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>

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>

<button id="expand">expand</button>

<button id="collapse">collapse</button>

<button id="toggle">toggle</button>

<button id="one">toggle one</button>

</body>

</html>

已使用 Microsoft OneNote 2013 创建。

来自为知笔记(Wiz)

原文地址：https://www.cnblogs.com/babyhhcsy/p/3229864.html