ExtJs 分组表格控件----监听
ExtJs 分組表格控件----監(jiān)聽
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); ????}); |
實現(xiàn)分組的展開和合并，必須通過grid.getView()對象來調(diào)用具體的方法
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 創(chuàng)建。
來自為知筆記(Wiz)
轉(zhuǎn)載于:https://www.cnblogs.com/babyhhcsy/p/3229864.html
總結(jié)
以上是生活随笔為你收集整理的ExtJs 分组表格控件----监听的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： sgu 175 Encoding
- 下一篇： 表达式(exp)