EXTJS之GRID 一

最近空闲时间在学习Ext2.0框架，只有一个字的感叹“强”，我从未想到JS代码能够写出这么绚丽的Web页面出来，以前看到YUI，惊若天人，如今看到EXT2.0的东西，更是感觉震撼。

 

Ext2.0是一个JS框架，它的Grid控件和其它可以显示数据的控件，能够支持多种数据类型，如二维数组、Json数据和XML数据，甚至包括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.Store，通过它我们可以把任何格式的数据转化成grid可以使用的形式，这样就不需要为每种数据格式写一个grid的实现了。

  首先，一个表格应该有列定义，即定义表头ColumnModel：

Js代码

1. // 定义一个ColumnModel，表头中有四列   
2. var cm = new Ext.grid.ColumnModel([   
3.     {header:'编号',dataIndex:'id'},   
4.     {header:'性别',dataIndex:'sex'},   
5.     {header:'名称',dataIndex:'name'},   
6.     {header:'描述',dataIndex:'descn'}   
7. ]);   
8. cm.defaultSortable = true;  

// 定义一个ColumnModel，表头中有四列
var cm = new Ext.grid.ColumnModel([
    {header:'编号',dataIndex:'id'},
    {header:'性别',dataIndex:'sex'},
    {header:'名称',dataIndex:'name'},
    {header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;

 

该ColumnModel定义了表格的四个列，其每列的名称和对应的数据键。请注意defaultSortable属性，即为每个列都安上一个可以排序的功能。如果只想某些列举有该功能，可以设置：

Js代码

1. {header:'编号',dataIndex:'id',Sortable:true},  

{header:'编号',dataIndex:'id',Sortable:true},

 现在就来看看这个Ext.data.Store是如何转换三种数据的。

1.二维数组：

Js代码

1. // ArrayData   
2. var data = [   
3.     ['1','male','name1','descn1'],   
4.     ['2','male','name1','descn2'],   
5.     ['3','male','name3','descn3'],   
6.     ['4','male','name4','descn4'],   
7.     ['5','male','name5','descn5']   
8. ];   
9. // ArrayReader   
10. var ds = new Ext.data.Store({   
11.     proxy: new Ext.data.MemoryProxy(data),   
12.     reader: new Ext.data.ArrayReader({}, [   
13.         {name: 'id',mapping: 0},   
14.         {name: 'sex',mapping: 1},   
15.         {name: 'name',mapping: 2},   
16.         {name: 'descn',mapping: 3}   
17.     ])   
18. });   
19. ds.load();  

// ArrayData
var data = [
    ['1','male','name1','descn1'],
    ['2','male','name1','descn2'],
    ['3','male','name3','descn3'],
    ['4','male','name4','descn4'],
    ['5','male','name5','descn5']
];
// ArrayReader
var ds = new Ext.data.Store({
    proxy: new Ext.data.MemoryProxy(data),
    reader: new Ext.data.ArrayReader({}, [
        {name: 'id',mapping: 0},
        {name: 'sex',mapping: 1},
        {name: 'name',mapping: 2},
        {name: 'descn',mapping: 3}
    ])
});
ds.load();

 

ds要对应两个部分：proxy和reader。proxy告诉我们从哪里获得数据，reader告诉我们如何解析这个数据。

现在用的是Ext.data.MemoryProxy，它将内存中的数据data作为参数传递。Ext.data.ArrayReader专门用来解析数组，并且告诉我们它会按照定义的规范进行解析，每行按顺序读取四个数据，第一个叫id，第二个叫sex，第三个叫name，第四个descn。这些是跟cm定义中的dataIndex对应的。这样cm就知道哪列应该显示那条数据了。

  mapping属性用于标记data中的读取后的数据与标头的映射关系，一般是不用设置的。但如果我们想让sex的数据中name栏中出现，可以设置mapping值。即id的mapping为2,后者为0。

  记得要执行一次ds.load()，对数据进行初始化。

  数据的显示显得非常简单：

Html代码

1. <div id='grid'></div>  

<div id='grid'></div>

 

Js代码

1. var grid = new Ext.grid.GridPanel({   
2.     el: 'grid',   
3.     ds: ds,   
4.     cm: cm   
5. });   
6. grid.render();  

var grid = new Ext.grid.GridPanel({
    el: 'grid',
    ds: ds,
    cm: cm
});
grid.render();

 2.如何在表格中添加CheckBox呢？

Js代码

1. var sm = new Ext.grid.CheckboxSelectionModel();   
2. var cm = new Ext.grid.ColumnModel([   
3.     new Ext.grid.RowNumberer(),//自动行号   
4.     sm,//添加的地方   
5.     {header:'编号',dataIndex:'id'},   
6.     {header:'性别',dataIndex:'sex'},   
7.     {header:'名称',dataIndex:'name'},   
8.     {header:'描述',dataIndex:'descn'}   
9. ]);   
10. var grid = new Ext.grid.GridPanel({   
11.     el: 'grid3',   
12.     ds: ds,   
13.     cm: cm,   
14.     sm: sm,//添加的地方   
15.     title: 'HelloWorld'  
16. });  

var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),//自动行号
    sm,//添加的地方
    {header:'编号',dataIndex:'id'},
    {header:'性别',dataIndex:'sex'},
    {header:'名称',dataIndex:'name'},
    {header:'描述',dataIndex:'descn'}
]);
var grid = new Ext.grid.GridPanel({
    el: 'grid3',
    ds: ds,
    cm: cm,
    sm: sm,//添加的地方
    title: 'HelloWorld'
});

 

3. 如何做Grid上触发事件呢？

下面是一个cellclick事件

Js代码

1. grid.addListener('cellclick', cellclick);   
2. function cellclick(grid, rowIndex, columnIndex, e) {   
3.     var record = grid.getStore().getAt(rowIndex);   //Get the Record   
4.     var fieldName = grid.getColumnModel().getDataIndex(columnIndex);  //Get field name   
5.     var data = record.get(fieldName);   
6.     Ext.MessageBox.alert('show','当前选中的数据是'+data);   
7. }  

grid.addListener('cellclick', cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
    var record = grid.getStore().getAt(rowIndex);   //Get the Record
    var fieldName = grid.getColumnModel().getDataIndex(columnIndex);  //Get field name
    var data = record.get(fieldName);
    Ext.MessageBox.alert('show','当前选中的数据是'+data);
}

 

4.如何做Grid中做出快捷菜单效果：

Js代码

1. grid.addListener('rowcontextmenu', rightClickFn);//右键菜单代码关键部分   
2. var rightClick = new Ext.menu.Menu({   
3.     id:'rightClickCont',  //在HTML文件中必须有个rightClickCont的DIV元素   
4.     items: [   
5.         {   
6.             id: 'rMenu1',   
7.            handler: rMenu1Fn,//点击后触发的事件   
8.             text: '右键菜单1'  
9.         },   
10.         {   
11.             //id: 'rMenu2',   
12.             //handler: rMenu2Fn,   
13.             text: '右键菜单2'  
14.         }   
15.     ]   
16. });   
17. function rightClickFn(grid,rowindex,e){   
18.     e.preventDefault();   
19.     rightClick.showAt(e.getXY());   
20. }   
21. function rMenu1Fn(){   
22.    Ext.MessageBox.alert('right','rightClick');   
23. }  

grid.addListener('rowcontextmenu', rightClickFn);//右键菜单代码关键部分
var rightClick = new Ext.menu.Menu({
    id:'rightClickCont',  //在HTML文件中必须有个rightClickCont的DIV元素
    items: [
        {
            id: 'rMenu1',
           handler: rMenu1Fn,//点击后触发的事件
            text: '右键菜单1'
        },
        {
            //id: 'rMenu2',
            //handler: rMenu2Fn,
            text: '右键菜单2'
        }
    ]
});
function rightClickFn(grid,rowindex,e){
    e.preventDefault();
    rightClick.showAt(e.getXY());
}
function rMenu1Fn(){
   Ext.MessageBox.alert('right','rightClick');
}

 

5.如何将一列中的数据根据要求进行改变呢？

比如说性别字段根据其male或female改变显示的颜色，这种ColumnMode中设计：

Js代码

1. var cm = new Ext.grid.ColumnModel([   
2.     new Ext.grid.RowNumberer(),   
3.     sm,   
4.     {header:'编号',dataIndex:'id'},   
5.     {header:'性别',dataIndex:'sex',renderer:changeSex},   
6.     {header:'名称',dataIndex:'name'},   
7.     {header:'描述',dataIndex:'descn'}   
8. ]);   
9. cm.defaultSortable = true;   
10. function changeSex(value){   
11.     if (value == 'male') {   
12.         return "<span style='color:red;font-weight:bold;'>红男</span>";   
13.     } else {   
14.         return "<span style='color:green;font-weight:bold;'>绿女</span>";   
15.     }   
16. }  

var cm = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),
    sm,
    {header:'编号',dataIndex:'id'},
    {header:'性别',dataIndex:'sex',renderer:changeSex},
    {header:'名称',dataIndex:'name'},
    {header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
function changeSex(value){
    if (value == 'male') {
        return "<span style='color:red;font-weight:bold;'>红男</span>";
    } else {
        return "<span style='color:green;font-weight:bold;'>绿女</span>";
    }
}

 其它两种数据的Grid显示是相同的，其不同之处在于数据获取的过程：