ExtJS 2.2下载与配置教程：表格控件入门

148 浏览量更新于2024-08-30 收藏 180KB PDF 举报

ExtJS是一款强大的企业级JavaScript应用程序框架，提供了一整套用于构建富互联网应用(RIA)的工具和组件。由于其丰富的功能，ext-all.js文件大小超过400KB，这意味着它对客户端性能有较高要求，只支持IE6及以上的现代浏览器版本。对于对网页响应速度和兼容性有严格要求的项目，应当谨慎考虑是否采用ExtJS。本文将指导读者如何下载和配置ExtJS 2.2版本，适合对新手或初次接触者进行学习。首先，用户可以从官方网站www.extjs.com下载适合自己项目的版本。下载后，建议在名为"Ext"的根目录下创建自定义目录"MyExample"，用于存放个人代码。配置步骤如下： 1. 创建一个HTML页面，例如Helloworld.html。 2. 在页面头部加入ExtJS的CSS样式表链接（ext-all.css）和核心库文件（ext-base.js），以及主ExtJS库文件（ext-all.js）。 3. 确保使用正确的脚本标签，并且使用onReady函数来初始化ExtJS，例如展示一个弹窗消息来确认配置成功。 4. 注意脚本标签的正确闭合和加载顺序，确保先引入基础库和适应层，然后加载ExtJS库。接着，文章会重点讲解如何使用ExtJS的表格控件Grid。Grid提供了丰富的功能，如列头自定义、数据索引绑定、排序、列的可隐藏性和编辑等。创建一个基本的Grid，需要定义列模型，包括每个列的标题和对应的数据字段。例如： ```javascript var columnModel = new Ext.grid.ColumnModel([ {header: '编号', dataIndex: 'id'}, {header: '名称', dataIndex: 'name'}, // 其他列定义... ]); ``` 通过这些步骤，用户可以开始理解和运用ExtJS的基本配置和表格控件，为开发高效、功能强大的Web应用打下坚实的基础。然而，随着版本的更新，3.0版本可能包含更多改进和优化，推荐读者根据实际需求评估是否升级到最新版本。

ExtJS 配置和表格控件使用第配置和表格控件使用第1/2页页

ExtJS是一套完整的RIA解决方案，也因为功能完整造成了ext-all.js有400多k,由于是基于JS和CSS的功能实现，对客户端机器性能也有一定的要求，即不支持IE6以下的版本。如

果您的项目对网页响应时间有严格的限制，或者客户端操作系统过于陈旧，一定不要选择ExtJS。

本文主要是介绍ExtJS的下载和配置以及一些简单的使用方法。目前最新版本为3.0，但是本文主要介绍2.2版本。

一、一、ExtJS下载以及配置下载以及配置

1、下载地址：www.extjs.com/(这是官网，大家可以选择自己喜欢的版本下载)

2、配置过程，假设下载后的目录为Ext,我们在该目录下建立我们自己的目录MyExample(该目录用于存放你自己写的代码)，配置过程如下：

(1) 新建一个页面文件Helloworld.html

(2) 在<head>和</head>之间添加如下代码：

代码如下:

Ext.onReady(function(){

Ext.MessageBox.alert(‘HelloWorld’,’Hello World’);

})

</script>

(3) 这里注意<script></script>不能用</script>取代

(4) js的导入顺序不要更改

(3) 如果弹出一个HelloWorld的对话框，则代表配置成功。

二、表格控件二、表格控件Grid的使用的使用

EXT中的表格功能非常强大，包括排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等使用功能。我们首先介绍如何制作一个简单的Grid。

1、创建表格的列信息：

代码如下:

var cm=new Ext.grid.ColumnModel([

{header:’编号’,dataIndex:’id’},

{header:’名称’,dataIndex:’name’},

{header:’描述’,dataIndex:’desn’}

]);

2、添加数据信息：

代码如下:

var data=[

[‘1′,’name1′,’desn1’],

[‘2′,’name1′,’desn1’],

[‘3′,’name1′,’desn1’],

[‘4′,’name1′,’desn1’],

[‘5′,’name1′,’desn1’]

];

3、创建数据存储对象：

代码如下:

var ds=new Ext.data.Store({

proxy:new Ext.data.MemoryProxy(data),

reader:new Ext.data.ArrayReader({},[

{name:’id’},

{name:’name’},

{name:’desn’}

])

});

ds.load();//这个相当的重要

4、表格的列模型定义好了，原始数据和数据的转换也已经完成，剩下的只需要把它们装配在一起，我们的Grid就创建成功了。

代码如下:

var grid=new Ext.grid.GridPanel({

renderTo:”grid”,

store: ds,

height:600,

cm:cm

});

5、注意：Ext.grid.Grid的renderTo属性指示EXT将表格渲染到什么地方，所以，在HTML里应该有一个<div id=’grid’></div>与之对应。

6、所有代码清单如下(已通过测试)：

代码如下:

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Grid.aspx.cs” Inherits=”Ext_example_Grid” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Ext.onReady(function(){

var cm=new Ext.grid.ColumnModel([

{header:’编号’,dataIndex:’id’},

{header:’名称’,dataIndex:’name’},

{header:’描述’,dataIndex:’desn’}

]);

var data=[

[‘1′,’name1′,’desn1’],

[‘2′,’name1′,’desn1’],

[‘3′,’name1′,’desn1’],

[‘4′,’name1′,’desn1’],

[‘5′,’name1′,’desn1’]

];

var ds=new Ext.data.Store({

proxy:new Ext.data.MemoryProxy(data),

reader:new Ext.data.ArrayReader({},[

{name:’id’},

{name:’name’},

{name:’desn’}

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38685876

粉丝: 4
资源: 927

ExtJS 2.2下载与配置教程：表格控件入门

ExtJS表格与树控件使用详解

ExtJS入门教程：配置与表格控件实战

ExtJS表格控件教程：深入学习JavaScript Grid

ExtJs：收集基于ExtJs扩展的一些控件

ExtJS日期时间控件

ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页

FineUI基于Extjs的net控件库

ExtJS 中文手册2

ExtJs 2 中文API

深入浅出ExtJS第2版

最新资源