頁面代碼：
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
*/
4Ext.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 */
4Ext.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
posted on 2008-03-07 16:11
大衛 閱讀(5100)
評論(1) 編輯 收藏 所屬分類:
JavaScript