亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間:2014年05月02日 11:42:17   作者:  
今天做一個(gè)grid,里面的數(shù)據(jù)需要帶明細(xì),思來(lái)想去還是搞個(gè)表格嵌套吧,需要的朋友可以參考下
今天做一個(gè)grid,里面的數(shù)據(jù)需要帶明細(xì),思來(lái)想去還是搞個(gè)表格嵌套吧!看下圖
 

對(duì)于grid中每一條記錄點(diǎn)擊左邊的+號(hào)能展開(kāi)一個(gè)明細(xì)的子表格 所有數(shù)據(jù)包括列名均從后臺(tái)獲得,子表格的數(shù)據(jù)暫時(shí)在本地以做測(cè)試

在此貼一些代碼留下記錄
復(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: "明細(xì)1", dataIndex: 'Field1' },
{ text: "明細(xì)2", dataIndex: 'Field2' },
{ text: "明細(xì)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的時(shí)候使用
復(fù)制代碼 代碼如下:

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

這個(gè)是rowexpander插件。。網(wǎng)上有人說(shuō)用的時(shí)候需要引用,但是我沒(méi)引用什么也可以用了?

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

相關(guān)文章

最新評(píng)論