ExtJS4 table_extjs のネストされた rowExpander アプリケーション

今日はグリッドを作成しているのですが、その中のデータを詳細にする必要があるので、よく考えた結果、ネストされたテーブルを作成することにしました。下の図を見てください。


グリッド内の各レコードについて、左側の番号をクリックして詳細なサブテーブルを展開します。列名を含むすべてのデータが背景から取得されます。サブテーブルのデータは一時的にローカルに保存されます。テストを実行します

ここにコードを投稿して記録を残します

コードをコピーします コードは次のとおりです。

function displayInnerGrid(renderId) {

//内部グリッド ストアのモデル
Ext.define('TestModel', {
拡張: 'Ext.data.Model'、
フィールド: [
{ 名前: 'フィールド 1' }、
{ 名前: 'フィールド 2' }、
{ 名前: 'フィールド 3' }
]
});

//内部グリッドのダミーデータ
var dummyDataForInsideGrid = [
['a', 'a', 'a'],
['b', 'b', 'b' ],
['c', 'c', 'c']

];

var insideGridStore = Ext .create('Ext.data.ArrayStore', {
モデル: 'TestModel',
データ: dummyDataForInsideGrid
});

innerGrid = Ext.create('Ext.grid.パネル', {
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-グリッド',
renderTo: renderId
}) ;

/* innerGrid.getEl().swallowEvent([
'mousedown', 'mouseup', 'click',
'contextmenu', 'mouseover', 'mouseout',
'dblclick', 'mousemove'
]); */

}


function destroyInnerGrid(record) ) {

varparent = document.getElementById (record.get('id'));
var child =parent.firstChild; .parentNode.removeChild(child);
child = child
}

コピーcode

コードは次のとおりです。 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)
});


上記のコードはグリッド バインディング イベントです。 。特定のコードの意味を理解できるはずです

グリッドを定義するときは、

コードをコピーしてください

コードは次のとおりです: plugins: [{ ptype: 'rowexpander', rowBodyTpl : [

'

',

'

'
]
}],


これは rowexpander プラグインです。 。ネット上では利用する際に引用が必要と言う人もいますが、何も引用せずに利用しても大丈夫でしょうか？

上記の 3 つのコードのキー ID に注意してください。この ID は変更できますが、バックグラウンドから送信されるデータのフィールドの最初の項目に変更する必要があります。 。この例では、バックグラウンドから送信されるフィールドの最初の項目は id です。