Extjs 4 nest grid or sub grid demo
Extjs 4 nest grid or sub grid demo
grid的嵌套用到插件rowexpander,ext4.2.2.1144版本官方有这个插件。
实现重点
一:nest grid不能响应很多事件,否则会发生异常进入到函数 getHeaderIndex: function (header) 。
innerGrid.getEl().swallowEvent([ ‘mousedown‘, ‘mouseup‘, ‘click‘, ‘contextmenu‘, ‘mouseover‘, ‘mouseout‘, ‘dblclick‘, ‘mousemove‘ ]);
二:column定义时增加属性 menuDisabled : true,resizable:false,防止一些看起来不符合常理界面表现。
subgrid.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 }); Ext.define(‘NestGridPanel‘, { extend: ‘Ext.grid.Panel‘, store: mainStore, columns: [ {xtype: ‘rownumberer‘}, { 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: ‘rowmodel‘ }, height:400, plugins: [{ ptype: ‘rowexpander‘, rowBodyTpl: [ ‘<div class="detailData">‘, ‘</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); me.getView().on(‘expandBody‘, me.onExpandNestedGrid,me); me.getView().on(‘collapsebody‘, me.onCollapseNestedGrid,me); }, onExpandNestedGrid : function (rowNode, record, expandRow, eOpts) { var detailData = Ext.DomQuery.select("div.detailData", expandRow); //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 }); var innerGrid = Ext.create(‘Ext.grid.Panel‘, { store: insideGridStore, columns: [ {xtype: ‘rownumberer‘}, { text: "Column1", dataIndex: ‘Field1‘ ,menuDisabled : true,resizable:false}, { text: "Column2", dataIndex: ‘Field2‘ ,menuDisabled : true,resizable:false}, { text: "Column3", dataIndex: ‘Field3‘ ,menuDisabled : true,resizable:false} ], columnLines: false, autoWidth: true, autoHeight: true, frame: false, iconCls: ‘icon-grid‘, renderTo: detailData[0], preventHeader: true }); innerGrid.getEl().swallowEvent([ ‘mousedown‘, ‘mouseup‘, ‘click‘, ‘contextmenu‘, ‘mouseover‘, ‘mouseout‘, ‘dblclick‘, ‘mousemove‘ ]); }, onCollapseNestedGrid : function (rowNode, record, expandRow, eOpts) { var detailData = Ext.DomQuery.select("div.detailData", expandRow); var parent = detailData[0]; var child = parent.firstChild; while (child) { child.parentNode.removeChild(child); child = child.nextSibling; } } }); Ext.onReady(function () { Ext.QuickTips.init(); Ext.BLANK_IMAGE_URL = ‘/images/s.gif‘; var mainGrid = Ext.create(‘NestGridPanel‘); mainGrid.render(Ext.getBody()); });
subgrid.html
<!DOCTYPE html> <html> <head> <title>nest grid</title> <meta http-equiv="description" content="no-cache"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="./Ext/resources/css/ext-all-neptune-debug.css"> <script type="text/javascript" src="./Ext/ext-all-debug.js"></script> <script type="text/javascript" src="./Ext/ext-theme-neptune.js"></script> <script type="text/javascript" src="./subgrid.js"></script> </head> <body> </body> </html>
参考:
http://blog.csdn.net/trassion/article/details/10938069
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。