ExtJS4 表格的嵌套 rowExpander應(yīng)用

更新時間：2014年05月02日 11:42:17 作者：

今天做一個grid，里面的數(shù)據(jù)需要帶明細，思來想去還是搞個表格嵌套吧,需要的朋友可以參考下

今天做一個grid，里面的數(shù)據(jù)需要帶明細，思來想去還是搞個表格嵌套吧！看下圖

對于grid中每一條記錄點擊左邊的+號能展開一個明細的子表格所有數(shù)據(jù)包括列名均從后臺獲得，子表格的數(shù)據(jù)暫時在本地以做測試

在此貼一些代碼留下記錄

復(fù)制代碼代碼如下:

 
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; 
} 

} 

復(fù)制代碼代碼如下:

 
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綁定事件。。具體代碼啥意思應(yīng)該能看懂

注意在定義grid的時候使用

復(fù)制代碼代碼如下:

 
plugins: [{ 
ptype: 'rowexpander', 
rowBodyTpl : [ 
'<div id="{id}">', 
'</div>' 
] 
}], 

這個是rowexpander插件。。網(wǎng)上有人說用的時候需要引用，但是我沒引用什么也可以用了？

注意上面三段代碼中關(guān)鍵的id，這個id你可以改，但是需要改成后臺發(fā)過來的數(shù)據(jù)中fields中的第一項。。我這個例子后臺發(fā)過來的fields第一項是id

您可能感興趣的文章: