ExtJS 配置和表格控件使用

ExtJS 配置和表格控件使用

ExtJS是一套AJAX控件，本人认为，它是目前我见过最好最美的JS控件库，所以非常有学习和使用价值，如果你还没有接触过ExtJS或者压根对其不感兴趣，那么没有必要看下去了。

ExtJS是一套完整的RIA解决方案，也因为功能完整造成了ext-all.js有400多k,由于是基于JS和CSS的功能实现，对客户端机器性能也有一定的要求，即不支持IE6以下的版本。如果您的项目对网页响应时间有严格的限制，或者客户端操作系统过于陈旧，一定不要选择ExtJS。

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

3.0，但是本文主要介绍2.2版本。

一、 ExtJS下载以及配置

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

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

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

(2) 在和之间添加如下代码：

代码如下:

(3) 这里注意不能用取代

(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里应该有一个

与之对应。

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

代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Grid.aspx.cs"

Inherits="Ext_example_Grid" %>

href="resources/css/ext-all.css" />