ExtJs 分组表格控件----监听
2013年8月1日
10:59
如图，点击expand可以展开所有的分组，collapse可以合并所有的列，toggle和toggleone展开合并一个分组
| Ext.get('expand').on('click', function() { grid.getView().expandAllGroups(); }); Ext.get('collapse').on('click', function() { grid.getView().collapseAllGroups(); }); Ext.get('toggle').on('click', function() { grid.getView().toggleAllGroups(); }); Ext.get('one').on('click', function() { var view = grid.getView(); var groupId = view.getGroupId('female'); view.toggleGroup(groupId); }); |
实现分组的展开和合并，必须通过grid.getView()对象来调用具体的方法
expandAllGroups()展开所有项；
collapseAllGroups()合并所有项目；
toggleAllGroups()展开没有展开的分组；
toggleGroup()展开指定的分组；
方法获得view对象；得到分组的toggleAllGroups，
折叠/展开该分组
代码示例：
| <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 meta = [ {header:'编号',dataIndex:'id', name:'id'}, {header:'性别',dataIndex:'sex', name:'sex'}, {header:'名称',dataIndex:'name', name:'name'}, {header:'描述',dataIndex:'descn', name:'descn'} ]; var data = [ ['1','male','name1','descn1'], ['2','female','name2','descn2'], ['3','male','name3','descn3'], ['4','female','name4','descn4'], ['5','male','name5','descn5'] ]; var grid = new Ext.grid.GridPanel({ store: new Ext.data.GroupingStore({ reader: new Ext.data.ArrayReader({}, meta), data: data, groupField: 'sex', sortInfo: {field: 'id', direction: "ASC"} }), columns: meta, view: new Ext.grid.GroupingView(), renderTo: 'grid', autoHeight: true }); Ext.get('expand').on('click', function() { grid.getView().expandAllGroups(); }); Ext.get('collapse').on('click', function() { grid.getView().collapseAllGroups(); }); Ext.get('toggle').on('click', function() { grid.getView().toggleAllGroups(); }); Ext.get('one').on('click', function() { var view = grid.getView(); var groupId = view.getGroupId('female'); view.toggleGroup(groupId); }); }); </script> </head> <body> <script type="text/javascript" src="../shared/examples.js"></script> <button id="expand">expand</button> <button id="collapse">collapse</button> <button id="toggle">toggle</button> <button id="one">toggle one</button> <div id="grid"></div> </body> </html> |
已使用 Microsoft OneNote 2013 创建。
 - Stack Overflow)
![win2008启动计算机应用配置,[计算机软件及应用]WIN2008_NAP服务器配置详解.doc](http://pic.xiahunao.cn/win2008启动计算机应用配置,[计算机软件及应用]WIN2008_NAP服务器配置详解.doc)
