Extjs4.0.7 实现Grid的嵌套
网上相关资料非常少,我看过的大多是Extjs 3.0 急以前版本的解决方案。
比如:http://mikhailstadnik.com/ext/examples/nested-grid.htm (Extjs3.0版本的)
但是4以后的就没看到了,经自己研究和参考官方网站资料,终于测试完成。现写下来供大家参考学习:
以下为简单的测试数据,如何做到更多功能,就看各位看官的功底了,哈。。。。。
效果图如下:
subgrid2.js文件:
Ext.define('Company', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id' },
{ name: 'company' },
{ name: 'price', type: 'float' },
{ name: 'change', type: 'float' },
{ name: 'pctChange', type: 'float' },
{ name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia' },
{ name: 'industry' },
{ name: 'desc' }
]
}); var dummyDataForMainGrid = [
['1', '3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Manufacturing'],
['2', 'Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am', 'Manufacturing'],
['3', 'Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am', 'Manufacturing'],
['4', 'American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am', 'Finance']
]; var mainStore = Ext.create('Ext.data.ArrayStore', {
model: 'Company',
data: dummyDataForMainGrid
}); 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 = [
['dummyRow1', 1, 2],
['dummyRow2', 1, 2],
['dummyRow3', 1, 3] ]; var insideGridStore = Ext.create('Ext.data.ArrayStore', {
model: 'TestModel',
data: dummyDataForInsideGrid
}); innerGrid = Ext.create('Ext.grid.Panel', {
store: insideGridStore,
selModel: {
selType: 'cellmodel'
},
columns: [
{ text: "Column1", dataIndex: 'Field1' },
{ text: "Column2", dataIndex: 'Field2' },
{ text: "Column3", 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;
} } Ext.define('MainGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.MainGrid',
store: mainStore,
columns: [
{ text: "Company", flex: 1, dataIndex: 'company' },
{ text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price' },
{ text: "Change", dataIndex: 'change' },
{ text: "% Change", dataIndex: 'pctChange' },
{ text: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange' }
],
//autoWidth: true,
selModel: {
selType: 'cellmodel'
},
//autoHeight: true,
plugins: [{
ptype: 'rowexpander',
rowBodyTpl: [
'<div id="{id}">',
'</div>'
]
}],
collapsible: true,
animCollapse: false,
title: 'Expander Rows in a Collapsable Grid',
iconCls: 'icon-grid',
//renderTo: Ext.getBody()
initComponent: function () {
var me = this;
this.callParent(arguments);
}
}); Ext.onReady(function () { Ext.QuickTips.init();
Ext.BLANK_IMAGE_URL = '/images/s.gif'; var mainGrid = new Ext.create('MainGrid'); mainGrid.view.on('expandBody', function (rowNode, record, expandRow, eOpts) {
displayInnerGrid(record.get('id'));
}); mainGrid.view.on('collapsebody', function (rowNode, record, expandRow, eOpts) {
destroyInnerGrid(record);
}); mainGrid.render(Ext.getBody());
mainGrid.setHeight(window.innerHeight);
mainGrid.setWidth(window.innerWidth);
Ext.EventManager.onWindowResize(function () {
//console.log('-------');
mainGrid.setHeight(window.innerHeight);
mainGrid.setWidth(window.innerWidth);
}); });
htm文件:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="/extjs4/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/CSS/css.css" />
<link rel="stylesheet" type="text/css" href="/CSS/loading.css" />
<script type="text/javascript" src="/extjs4/ext-all.js"></script>
<script type="text/javascript" src="/extjs4/ux/RowExpander.js"></script>
<script type="text/javascript" src="/htm/test/subgrid2.js"></script>
</head>
<body> </body>
</html>
Extjs4.0.7 实现Grid的嵌套的更多相关文章
- MVC4.0 JSON JsonResult 序列化之后 对JSON 进行修改 EXTJS4.0 分页
事情是这样的:我在MVC 下 前后台交互 用JsonResult 返回给前台使用. public JsonResult AjaxFindHospitalInfo() { List<T> l ...
- extjs4.0下的日期控件的星期显示为y的解决办法
没有修改的时候的问题: 今天第一次写博客,就记录一下以前extjs4.2下运用日期组件的星期显示问题,当时找了n久,可能是extjs4.2才出来没多久,没有多少人发现这个问题或者说很少有人将Extjs ...
- 转: ASP.NET+ExtJs4.0+表单提交submit,上传图片到服务器
http://blog.csdn.net/lmaohuanl/article/details/6792057 <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
- Swift2.0语言教程之函数嵌套调用形式
Swift2.0语言教程之函数嵌套调用形式 Swift2.0语言函数嵌套调用形式 在Swift中,在函数中还能够调用函数,从而形成嵌套调用.嵌套调用的形式往往有两种:一种是在一个函数中调用其它函数:还 ...
- Swift2.0语言教程之类的嵌套与可选链接
Swift2.0语言教程之类的嵌套与可选链接 Swift2.0语言类的嵌套 在一个类中可以嵌套一个或者多个类.它们的嵌套形式也是不同的,大致分为了两种:直接嵌套和多次嵌套.下面依次讲解这两种方式. S ...
- EXTJS4.0 grid 可编辑模式 配置
首先配置这个参数 plugins:[//插件 Ext.create("Ext.grid.plugin.CellEditing",{ clicksToEdit:1//单元格 点一下就 ...
- ExtJS4.2学习(四)Grid表格中文排序问题(转)
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-07/173.html --------------- ...
- ExtJS4.2学习(三)Grid表格(转)
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-07/172.html --------------- ...
- extjs6.0点击grid一行数据显示在一端的form中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Windows 8 动手实验系列教程 实验7:磁贴和通知
动手实验 实验7:磁贴和通知 2012年9月 简介 磁贴是Windows应用商店应用用户体验的重要元素.当应用程序被安装后,它的磁贴将在Windows 8开始屏幕被创建.该磁贴(称为主磁贴)作为启动应 ...
- 别动我的奶酪:CSV文件数据丢零现象及对策
CSV文件在读入EXCEL时,对于前面有零的数据项,比如电话号码,会自作聪明地丢掉那个零. 比如,我有一个北京客户,其号码为01059178888,如果这是通过CSV文件来的数据,在EXCEL中打开时 ...
- linux下C/C++,多线程pthread《转载》
原文网址:http://www.cnblogs.com/xianghang123/archive/2011/08/11/2134927.html ·线程创建 函数原型:int pthread_cr ...
- ZeroMQ:云计算时代最好的通讯库
还在学socket编程吗?还在研究为什么epoll比select更好吗? 噢,不必了! 在复杂的云计算环境中,我们面临的难题远比这个复杂得多. 庞大的服务器集群作为计算云,对来来看或许只是一个简单的搜 ...
- VC 绘图技巧--自定义形状图形
自定义形状图形,定义几个点围城的图形,然后进行描边和填充: if (m_memDC.m_hDC!=NULL) { CPoint point[4]; point[0].x=nLeft+(int)(0.1 ...
- meminfo,df,
yx100:root@yxRouter:/# cat /proc/meminfoMemTotal: 126584 kBMemFree: 103156 kBBuffer ...
- HDU 4707 Pet(DFS(深度优先搜索)+BFS(广度优先搜索))
Pet Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submissio ...
- 求刷Kindle Fire HD的方法
前几天入手了台Amazon Kindle Fire HD 其系统是经过Amazon尝试改造过的Android,用起来很不爽,想刷个CM10之类的,求教程和工具.
- 按 Eclipse 开发喜好重新布置 cocos2dx 目录层次
[tonyfield 2013.08.29 ] 1. Cocos2dx 库的改动 处于个人的固执,花一天时间重新布置了cocos2dx 2.1.4的目录层次,将android平台无关的代码全数裁剪, ...
- Python之常用模块(待更新)
模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需要多个函数才 ...