随笔 - 55  文章 - 187  trackbacks - 0
<2008年3月>
2425262728291
2345678
9101112131415
16171819202122
23242526272829
303112345

常用链接

留言簿(12)

随笔分类

随笔档案

groovy

搜索

  •  

最新评论

阅读排行榜

评论排行榜

页面代码:
 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 大卫 阅读(5071) 评论(1)  编辑  收藏 所属分类: JavaScript

FeedBack:
# re: Ext2.0的表格小例子 2009-07-30 09:44 adsfsdf
你好 从数据库里查询出来的数据如何显示在grid里面呢 能否给我个简单的小例子 shenyejingling@126.com 先谢谢啦 嘿嘿~  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: