중첩 확장 그리드 - 내부 그리드 붕괴 제대로

Question

내 요구에 here

을 찾을 수있는 최초의 ExtJS 예제를 수정하려고 확장되지 않습니다. 특정 항목을 클릭하고 다른 확장 가능한 표를 여는 확장 가능한 표를 원합니다.

내가 기존 코드에 이러한 변경 사항을 도입 시도하고 다음과 같은 문제가 발생했습니다 : 그리드가로드 될 때 그 옆에 각각의 내부 그리드에서

1. 은 행은 마이너스 기호로 표시
2. 열 수있는 내부 격자의 행을 클릭하지만 다시 클릭하면 축소되지 않습니다.
3. 내부 격자의 각 행과 외부 격자의 행 사이에 "신비한"연결이 있음을 눈치 챘습니다. 예를 들어 내부 격자의 두 번째 행을 두 번 클릭하면 축소/확장 반응이 발생합니다 외부 그리드의 두 번째 행에 표시됩니다 (그러나 확장 된 후 내부 격자에 영향을 미치지 않음).

어디에서 코드를 잘못 또는 잘못 사용 했습니까?

여기 내 코드입니다 :

var urlObject = Ext.urlDecode(document.location.search); 
var request_url = 'my_url'; 
var request_state = 'my_state'; 

// row expander 
var expander = new Ext.ux.grid.RowExpander({ 
    tpl : new Ext.Template(
     '<p>{layer_name} --- under construction!!!</p>' 
    ) 
}); 

expander.on('expand', function(rowExp, rec, body, rowIndex) { 

    var inner_expander = new Ext.ux.grid.RowExpander({ 
     tpl : new Ext.Template(
      '<p>under construction!!!</p>' 
     ) 
    }); 


    var sub_layer_store = new Ext.data.JsonStore ({ 
     url: request_url, 
     fields: ['sub_layer_name'], 
     root: 'sub_layer_names', 
     baseParams: { 
      _state: request_state, 
      _action: 'get_sub_layer_names', 
      layer_name: rec.data.layer_name 
     } 
    }); 

    var sub_layer_grid = new Ext.grid.GridPanel({ 
     store: sub_layer_store, 
     cm: new Ext.grid.ColumnModel({ 
      defaults: { 
       width: 20, 
       sortable: true 
      }, 
      columns: [ 
       inner_expander, 
       {header: "Sub-Layer", width: 40, dataIndex: 'sub_layer_name'} 
      ] 
     }), 
     viewConfig: { 
      forceFit:true 
     },   
     width: 1100, 
     height: 200, 
     plugins: inner_expander, 
     collapsible: true, 
     animCollapse: false, 
     title: 'Sub-Layers information', 
     iconCls: 'icon-grid', 
     renderTo: body 
    }); 

    //load the sub grid 
    sub_layer_grid.store.load(); 

}); 

var layers_store = new Ext.data.JsonStore ({ 
    url: request_url, 
    fields: ['layer_name'], 
    root: 'layer_names', 
    baseParams: { 
     _state: request_state, 
     _action: 'get_layer_names' 
    } 
}); 


var layers_grid = new Ext.grid.GridPanel({ 
    store: layers_store, 
    cm: new Ext.grid.ColumnModel({ 
     defaults: { 
      width: 20, 
      sortable: true 
     }, 
     columns: [ 
      expander, 
      {header: "Layer", width: 40, dataIndex: 'layer_name'} 
     ] 
    }), 
    viewConfig: { 
     forceFit:true 
    },   
    width: 1200, 
    height: 500, 
    plugins: expander, 
    collapsible: true, 
    animCollapse: false, 
    title: 'Layers information', 
    iconCls: 'icon-grid' 
}); 


Ext.onReady(function(){ 

    var el = document.getElementById('my_container'); 

    layers_grid.store.load(); 
    layers_grid.render(el); 

}); 

감사합니다!

Answer 1

확장 가능한 다른 그리드는 복잡합니다 (사용자의 경우). 왼쪽 영역에 트리가 있고 오른쪽 영역에 세부 사항이있는 경계 패널 하나를 사용할 수 있습니다 (디자인에 해당하는 경우).

Answer 2

세 번째 문제의 유일한 이유는 그리드에 ID를 언급하지 않고 그 다음을 언급하는 것입니다. 기본적으로 extjs는 행과 열 인덱스를 사용하여 축소 및 확장합니다. 따라서 내부 격자의 두 번째 행의 행 색인은 두 번째 행의 외부 격자의 행 색인과 같습니다. 다른 두 개의 프로 블록과 동일한 이유 일 수 있습니다. 누군가가 Sourxe 코드를 필요로한다면 샘플을 첨부 해 주시기 바랍니다.