ExtJS4表格嵌套rowExpander应用
作者：技术拾光时间：2026-06-11 08:23:01浏览：469
实现一个带明细的Grid，最直接的方案是采用表格嵌套，效果如下图所示。 在Grid中，每条记录左侧的“+”号点击后可展开一个明细子表格。所有数据（包括列名）均从后台获取。子表格数据在调试阶段使用本地测试数据。以下是三段核心代码，记录实现过程。 复制代码 代码如下: function displayI
实现一个带明细的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 : [
'
]
}],
该插件在某些框架版本中可能无需额外引用，实际测试表明未引用也能正常工作。 注意：上述三段代码中均使用了关键字段
在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 : [
'
',
'
' '
]
}],
该插件在某些框架版本中可能无需额外引用，实际测试表明未引用也能正常工作。 注意：上述三段代码中均使用了关键字段
id。该字段可根据实际需求改名，但需与后台传入数据中fields的第一项保持一致。本例中后台传入的fields第一项为id，因此直接使用。若后台使用其他字段名，需同步修改。