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

ExtJs 分组表格控件----监听相关推荐

ExtJS4.2学习(10)分组表格控件--GroupingGrid（转）
鸣谢网址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-17/179.html ------------- ...
ExtJS4.2学习(10)分组表格控件--GroupingGrid
分组表格控件在我们的开发中经常被用到,GroupingGrid分组表格就是在普通表格的基础上,根据某一列的数据显示表格中的数据分组的表格控件.举个例子给大家,比如某些信息用树形显示觉得有点大才小用,树 ...
Cocos2dx中Scrollview控件滑动与其子控件监听冲突的解决方案(不改底层、最优)
语言环境: Cocos2dx 3.6 Lua 5.1 UI编辑器:Cocos Studio v2.0.6 问题:Scrollview控件滑动与其子控件监听发生冲突. 在点击子控件时,若在子控件上进行移 ...
android 控件监听方法,Android界面控件（2）—注册点击事件监听器
Button和ImageButton 1.添加控件 1.打开Android项目下,res文件夹中的 layout 的 activity_main.xml 文件 2.可视化界面拖拽添加或修改 xml 文 ...
android 控件监听方法是,Android | Android中监听Button的实现
Android中监听Button的实现单按钮监听 2018-04-27_061911.jpg 1.在按钮所属的父Activity里,创建按钮变量 private Button mBtnTextVie ...
EAS中F7控件监听变化后，手动修改带出值无效
案例问题分析如图,案例需要开发选择"项目经理"自动获取其对应项目的名称设置到"项目"字段. 假设用户选择了"张三"系统自动带出对应的项目名 ...
[转]ExtJS的使用方法汇总—配置和表格控件使用
在网上差一些关于ExtJS的相关资料,看到这篇博客写的不错,拿出来分享一下! 博客文章:ExtJS的使用方法汇总(1)--配置和表格控件使用 ExtJS的使用方法汇总(2) ...
extjs 表单设置html5,ExtJS 配置和表格控件使用
ExtJS是一套完整的RIA解决方案,也因为功能完整造成了ext-all.js有400多k,由于是基于JS和CSS的功能实现,对客户端机器性能也有一定的要求,即不支持IE6以下的版本.如果您的项目对网 ...
QTableWidget表格控件的用法
QTableWidget 是 Qt 提供的一种表格控件(如图 1 所示),类似于我们经常使用的 Excel 表格,可以将数据以表格的方式展示给用户.QTableWidget 的结构布局如图 1 所示. ...

ExtJs 分组表格控件----监听

ExtJs 分组表格控件----监听相关推荐

最新文章

热门文章