ExtJS4表格嵌套rowExpander行展开应用

今天来做一个带明细数据的 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 的事件绑定部分，思路非常直接：展开时创建子表格，折叠时销毁子表格。

复制代码 代码如下:

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，所以直接使用了。如果后台传的是其他字段名，务必同步修改。