ExtJS4 表格的巢狀 rowExpander應用程式_extjs

今天做一個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,
Height ,
//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 parentget =Byument. (record.get('id'));
var child = parent.firstChild;

while (child) {
child.parentNode.removeChild(child);
child = child 。 🎜>

grid_huizong.view.on('expandBody', function (rowNode, record, expandRow, eOpts) {
//console.log(record.get('id'));

//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>' ] }], 這個是rowexpander外掛。 。網路上有人說用的時候需要引用，但是我沒引用什麼也可以用了？

注意上面三段程式碼中關鍵的id，這個id你可以改，但是需要改成後台發過來的資料中fields中的第一項。 。我這個例子後台發過來的fields第一項是id