ExtJs
2013
10:33
在定义分组表格控件时，定义的方式和grid没有什么区别，重要的是在定义
reader：读取数据的方式。
data：数据来源；
groupField：分组的依据是什么
sortInfo：排序依据需要传递排序的字段和排序的方式
| var store = new Ext.data.GroupingStore({ reader: reader, data: data, groupField: 'sex', sortInfo: {field: 'id', direction: "ASC"} }); |
定义grid
| var grid = new Ext.grid.GridPanel({ autoHeight: true, store: store, columns: columns, view: new Ext.grid.GroupingView(), renderTo: 'grid' }); |
完整代码示例：
| <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>03.grid</title> <link rel="stylesheet" type="text/css" href="../ext3.2/resources/css/ext-all.css" /> <script type="text/javascript" src="../ext3.2/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../ext3.2/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.QuickTips.init(); var columns = [ {header:'编号',dataIndex:'id'}, {header:'性别',dataIndex:'sex'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]; var data = [ ['1','male','name1','descn1'], ['2','female','name2','descn2'], ['3','male','name3','descn3'], ['4','female','name4','descn4'], ['5','male','name5','descn5'] ]; var reader = new Ext.data.ArrayReader({}, [ {name: 'id'}, {name: 'sex'}, {name: 'name'}, {name: 'descn'} ]); var store = new Ext.data.GroupingStore({ reader: reader, data: data, groupField: 'sex', sortInfo: {field: 'id', direction: "ASC"} }); var grid = new Ext.grid.GridPanel({ autoHeight: true, store: store, columns: columns, view: new Ext.grid.GroupingView(), renderTo: 'grid' }); }); </script> </head> <body> <div id="grid"></div> </body> </html> |
已使用 Microsoft OneNote 2013 创建。