ExtJS4 表格的嵌套 rowExpander应用


Posted in Javascript onMay 02, 2014

今天做一个grid,里面的数据需要带明细,思来想去还是搞个表格嵌套吧!看下图
ExtJS4 表格的嵌套 rowExpander应用 

对于grid中每一条记录点击左边的+号能展开一个明细的子表格 所有数据包括列名均从后台获得,子表格的数据暂时在本地以做测试

在此贴一些代码留下记录

function displayInnerGrid(renderId) { //Model for the inside grid store 
Ext.define('TestModel', { 
extend: 'Ext.data.Model', 
fields: [ 
{ name: 'Field1' }, 
{ name: 'Field2' }, 
{ name: 'Field3' } 
] 
}); 
//dummy data for the inside grid 
var dummyDataForInsideGrid = [ 
['a', 'a', 'a'], 
['b', 'b', 'b'], 
['c', 'c', 'c'] 
]; 
var insideGridStore = Ext.create('Ext.data.ArrayStore', { 
model: 'TestModel', 
data: dummyDataForInsideGrid 
}); 
innerGrid = Ext.create('Ext.grid.Panel', { 
store: insideGridStore, 
selModel: { 
selType: 'cellmodel' 
}, 
columns: [ 
{ text: "明细1", dataIndex: 'Field1' }, 
{ text: "明细2", dataIndex: 'Field2' }, 
{ text: "明细3", dataIndex: 'Field3' } 
], 
columnLines: true, 
autoWidth: true, 
autoHeight: true, 
//width: 400, 
//height: 200, 
frame: false, 
// iconCls: 'icon-grid', 
renderTo: renderId 
}); 
/* innerGrid.getEl().swallowEvent([ 
'mousedown', 'mouseup', 'click', 
'contextmenu', 'mouseover', 'mouseout', 
'dblclick', 'mousemove' 
]); */ 
} 

function destroyInnerGrid(record) { 
var parent = document.getElementById(record.get('id')); 
var child = parent.firstChild; 
while (child) { 
child.parentNode.removeChild(child); 
child = child.nextSibling; 
} 
}

grid_huizong.view.on('expandBody', function (rowNode, record, expandRow, eOpts) { 
//console.log(record.get('id')); 
displayInnerGrid(record.get('id')); 
}); grid_huizong.view.on('collapsebody', function (rowNode, record, expandRow, eOpts) { 
destroyInnerGrid(record); 
});

以上代码为grid绑定事件。。具体代码啥意思应该能看懂

注意在定义grid的时候使用

plugins: [{ 
ptype: 'rowexpander', 
rowBodyTpl : [ 
'<div id="{id}">', 
'</div>' 
] 
}],

这个是rowexpander插件。。网上有人说用的时候需要引用,但是我没引用什么也可以用了?

注意上面三段代码中关键的id,这个id你可以改,但是需要改成后台发过来的数据中fields中的第一项。。我这个例子后台发过来的fields第一项是id

Javascript 相关文章推荐
ppk谈JavaScript style属性
Oct 10 Javascript
JavaScript Memoization 让函数也有记忆功能
Oct 27 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
Vuejs第十三篇之组件——杂项
Sep 09 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
Vue中封装input组件的实例详解
Oct 17 Javascript
JS隐藏号码中间4位代码实例
Apr 09 Javascript
微信小程序地图实现展示线路
Jul 29 Javascript
prettier自动格式化去换行的实现代码
Aug 25 Javascript
用json方式实现在 js 中建立一个map
May 02 #Javascript
jquery操作checkbox实现全选和取消全选
May 02 #Javascript
ExtJS4 动态生成的grid导出为excel示例
May 02 #Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 #Javascript
jquery等待效果示例
May 01 #Javascript
js实现checkbox全选和反选示例
May 01 #Javascript
jquery插件之定时查询待处理任务数量
May 01 #Javascript
You might like
基于PHPExcel的常用方法总结
2013/06/13 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
获取url中用&amp;隔开的参数实例(分享)
2017/05/28 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
浅谈JavaScript find 方法不支持IE的问题
2017/09/28 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python实现在目录中查找指定文件的方法
2014/11/11 Python
python使用matplotlib绘制折线图教程
2017/02/08 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
python计算导数并绘图的实例
2020/02/29 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
Python flask框架端口失效解决方案
2020/06/04 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
英国足球店:UK Soccer Shop
2017/11/19 全球购物
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
护士感人事迹
2014/05/01 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL
mysql left join快速转inner join的过程
2021/06/30 MySQL
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL