ExtJS4 表格的嵌套 rowExpander

標籤：des   blog   http   io   ar   使用   java   for   sp   

今天做一個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_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綁定事件。。詳細代碼啥意思應該能看懂

注意在定義grid的時候使用

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

這個是rowexpander外掛程式。。網上有人說用的時候須要引用，可是我沒引用什麼也能夠用了？

注意上面三段代碼中關鍵的id，這個id你能夠改，可是須要改成後台發過來的資料中fields中的第一項。。我這個範例後台發過來的fields第一項是id

最後給一個我參考的連結  這裡

ExtJS4 表格的嵌套 rowExpander