今日はグリッドを作成しているのですが、その中のデータを詳細にする必要があるので、よく考えた結果、ネストされたテーブルを作成することにしました。下の図を見てください。
グリッド内の各レコードについて、左側の番号をクリックして詳細なサブテーブルを展開します。列名を含むすべてのデータが背景から取得されます。サブテーブルのデータは一時的にローカルに保存されます。テストを実行します
ここにコードを投稿して記録を残します
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('collapsebody ', function (rowNode, Record, ExpandRow, eOpts) {
destroyInnerGrid (record)
});
上記のコードはグリッド バインディング イベントです。 。特定のコードの意味を理解できるはずです
グリッドを定義するときは、
コードをコピーしてください
コードは次のとおりです: plugins: [{ ptype: 'rowexpander', rowBodyTpl : [
'
',
'
'
]
}],
これは rowexpander プラグインです。 。ネット上では利用する際に引用が必要と言う人もいますが、何も引用せずに利用しても大丈夫でしょうか?
上記の 3 つのコードのキー ID に注意してください。この ID は変更できますが、バックグラウンドから送信されるデータのフィールドの最初の項目に変更する必要があります。 。この例では、バックグラウンドから送信されるフィールドの最初の項目は id です。