在 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 的事件绑定部分，思路非常直接：展开时创建子表格，折叠时销毁子表格。
复制代码 代码如下:
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 时，需要添加一个插件——rowexpander。使用起来非常简单，配置如下即可：
复制代码 代码如下:
plugins: [{
ptype: 'rowexpander',
rowBodyTpl : [
'
',
'
]
}],
关于这个 rowexpander 插件，网上有些资料说需要额外引用，但实际测试发现即使不引入也能正常运行，可能是框架版本已经自带了。 最后提醒一下：上面三段代码中都出现了关键的
id 字段。这个字段可以根据实际需要改名，但必须与后台返回数据的 fields 中第一项保持一致。本例中后台返回的 fields 第一项正是 id，所以直接使用了。如果后台传的是其他字段名，务必同步修改。
