ExtJS4 table_extjs의 중첩된 rowExpander 애플리케이션

오늘은 그리드를 만들고 있는데, 그 안의 데이터를 자세히 설명해야 해서 많은 고민 끝에 중첩된 테이블을 만들기로 결정했습니다. 아래 그림을 보세요


그리드의 각 레코드에 대해 왼쪽의 숫자를 클릭하면 세부 하위 테이블이 확장됩니다. 열 이름을 포함한 모든 데이터는 배경에서 가져옵니다. 하위 테이블의 데이터는 임시로 로컬에 저장됩니다. 테스트

여기에 코드를 게시하고 기록을 남겨주세요

코드 복사 코드는 다음과 같습니다.

function displayInnerGrid(renderId) {

//내부 그리드 저장소용 모델
Ext.define('TestModel', {
확장: 'Ext.data.Model',
필드: [
{ 이름: 'Field1' },
{ 이름: 'Field2' },
{ 이름: 'Field3' }
]
})

//내부 그리드의 더미 데이터
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: "Detail 1", dataIndex: ' Field1' },
{ text: "Detail 2" , dataIndex: 'Field2' },
{ text: "Details 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;
}

}

복사 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 플러그인입니다. . 인터넷에서 어떤 분들은 사용할 때 인용을 해야 한다고 하는데, 아무 것도 인용하지 않고 사용해도 될까요?

위 세 가지 코드에서 키 ID에 주의하세요. 이 ID는 변경할 수 있지만 백그라운드에서 전송되는 데이터의 필드 첫 번째 항목으로 변경되어야 합니다. . 내 예에서는 백그라운드에서 전송된 필드의 첫 번째 항목이 id입니다.