今天做一个grid,里面的数据须要带明细,思来想去还是搞个表格嵌套吧!看下图
对于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
最后给一个我參考的链接 这里
时间: 2024-10-10 02:37:06