Ext2.0的表格小例子

Ext2.0的表格小例子

页面代码：

 1 < html >
 2      < head >
 3          < meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
 4          < title > Ext Reader </ title >
 5          < link  rel ="stylesheet"  type ="text/css"  href ="../resources/css/ext-all.css" />
 6          < script  type ="text/javascript"  src ="../adapter/ext/ext-base.js" >
 7         </ script >
 8          < script  type ="text/javascript"  src ="../ext-all.js" >
 9         </ script >
10          < script  type ="text/javascript"  src ="./test.js" >
11         </ script >
12      </ head >
13      < body >
14          < div  id ="main" >
15          </ div >
16      </ body >
17 </ html >

JavaScript代码：
第一种实现，简单表格

 1 /**/ /**
 2 * @author hasee
 3 */
 4 Ext.onReady( function () {
 5
 6    //json数据
 7    var data = {
 8        'data': [{
 9            'id': 1,
10            'name': 'david',
11            'age': 25
12        }, {
13            'id': 2,
14            'name': 'marry',
15            'age': 21
16        }, {
17            'id': 3,
18            'name': 'leo',
19            'age': 19
20        }]
21    }
22    
23    //表格控件
24    var grid = new Ext.grid.GridPanel({
25        renderTo: "main",
26        title: "表格",
27        columns: [{
28            header: "ID",
29            dataIndex: "id",
30            sortable: true
31        }, {
32            header: "姓名",
33            dataIndex: "name",
34            sortable: true
35        }, {
36            header: "年龄",
37            dataIndex: "age",
38            sortable: true
39        }],
40        ds: new Ext.data.JsonStore({
41            data: data,
42            autoLoad: true,
43            root: 'data',
44            fields: ['id', 'name', 'age']
45        }),
46        autoExpandColumn: 2
47    })
48} );
49

第二种实现，添加checkbox，右键菜单：

 1 /**/ /**
 2 * @author hasee
 3 */
 4 Ext.onReady( function () {
 5
 6    //json数据
 7    var data = {
 8        'data': [{
 9            'id': 1,
10            'name': 'david',
11            'age': 25
12        }, {
13            'id': 2,
14            'name': 'marry',
15            'age': 21
16        }, {
17            'id': 3,
18            'name': 'leo',
19            'age': 19
20        }]
21    }
22    
23    //表格控件
24    var sm = new Ext.grid.CheckboxSelectionModel();
25    var grid = new Ext.grid.GridPanel({
26        renderTo: "main",
27        title: "表格",
28        columns: [sm, {
29            header: "ID",
30            dataIndex: "id",
31            sortable: true
32        }, {
33            header: "姓名",
34            dataIndex: "name",
35            sortable: true
36        }, {
37            header: "年龄",
38            dataIndex: "age",
39            sortable: true
40        }],
41        ds: new Ext.data.Store({
42            proxy: new Ext.data.MemoryProxy(data),
43            reader: new Ext.data.JsonReader({
44                root: 'data'
45            }, [{
46                name: 'id'
47            }, {
48                name: 'name'
49            }, {
50                name: 'age'
51            }]),
52            autoLoad: true//一定要写，否则无数据
53        }),
54        sm: sm,//多选框checkbox
55        autoExpandColumn: 3,//自动扩展最后一列
56        autoHeight: true//一定要写，否则显示的数据会少一行
57    })
58    
59    var currentRowNumber;//保存当前行号，用户右键菜单。
60    grid.addListener('rowcontextmenu', rightClickFn);//为右键菜单添加事件监听器
61    //显示右键菜单
62    function rightClickFn(grid, rowindex, e){
63        e.preventDefault();
64        rightClickMenu.showAt(e.getXY());
65        currentRowNumber = rowindex;
66    }
67    //右键菜单
68    var rightClickMenu = new Ext.menu.Menu({
69        id: 'rightClickMenu',
70        items: [{
71            id: 'menuContent1',
72            handler: menuContent1Fn,
73            text: '显示行号'
74        }, {
75            id: 'menuContent2',
76            handler: menuContent2Fn,
77            text: '右键菜单2'
78        }]
79    })
80    function menuContent1Fn(){
81        alert('行号为' + currentRowNumber);
82    }
83    function menuContent2Fn(){
84        alert('右键菜单2');
85    }
86    
87} );
88