Extjs 동적 격자

Question

Extj를 사용하여 동적 격자를 만들려고합니다. 그리드는 click 이벤트가 발생하면 열과 레코드 및 레코드 정의 a.k.a Store Fields를 가져 오기 위해 서버로 ajax 요청이 전송 될 때 생성되고 표시됩니다. 각 노드는 다른 그리드 구조를 가질 수 있으며 트리의 노드 레벨에 따라 다릅니다.

내가 지금까지 함께했다 유일한 방법은

 function showGrid(response, request) {     
     var jsonData = Ext.util.JSON.decode(response.responseText);     
     var grid = Ext.getCmp('contentGrid'+request.params.owner); 

     if(grid) { 
      grid.destroy();         
     } 

     var store = new Ext.data.ArrayStore({ 
      id : 'arrayStore',     
      fields : jsonData.recordFields, 
      autoDestroy : true 
     });    

     grid = new Ext.grid.GridPanel({ 
      defaults: {sortable:true}, 
      id:'contentGrid'+request.params.owner, 
      store: store,   
      columns: jsonData.columns, 
      //width:540, 
      //height:200, 
      loadMask: true 
     });   


     store.loadData(jsonData.records);   
     if(Ext.getCmp('tab-'+request.params.owner)) { 
      Ext.getCmp('tab-'+request.params.owner).show(); 
     } else {     
      grid.render('grid-div'); 
      Ext.getCmp('card-tabs-panel').add({ 
      id:'tab-'+request.params.owner, 
      title: request.params.text, 
      iconCls:'silk-tab', 
      html:Ext.getDom('grid-div').innerHTML, 
      closable:true 
      }).show();   
     } 
    } 

 'click': function(node) { 
      Ext.Ajax.request({ 
       url: 'showCtn', 
       success: function(response, request) {        
        alert('Success');             
        showGrid(response,request); 
       }, 
       failure: function(results, request) { 
        alert('Error'); 
       }, 
       params: Ext.urlDecode(node.attributes.options);           
     } 

이 코드로지고있어 문제가 있다는 것입니다 클릭 이벤트가

을 발사하면 기능이 위라고합니다입니다 showGrid 함수가 호출 될 때마다 새 그리드가 표시됩니다. 최종 사용자는 이전 그리드와 새로운 그리드를 봅니다. 이 문제를 줄이기 위해 그리드를 파괴하고 각 요청에서 그리드 요소를 제거해 보았습니다. 이는 레코드가 이번에는 표시되지 않는다는 문제 만 해결하는 것 같습니다.

if(grid) { 
      grid.destroy(true);         
     } 

내가 원하는 동작은 탭 내에 그리드 결과를 표시하고 해당 탭이 기존 그리드를 대체하는 경우입니다. 어떤 도움을 주셔서 감사합니다. 이 같은 탭에 그리드를 추가하려고 할 때

는

Answer 1

감사합니다

html:Ext.getDom('grid-div').innerHTML, 

내선이 유효한 그리드 구성 요소가되는 인식하지 못합니다. 대신, 그리드처럼 보일 뿐인 HTML 마크 업을 추가하는 것뿐입니다. 그러나 TabPanel은 그리드 구성 요소임을 인식하지 못합니다. 대신 그리드 자체를 탭으로 추가해야합니다 (GridPanel 은 패널이며 상위 패널에 중첩 될 필요가 없습니다). 당신은 그렇게하고도 같이 필요한 탭 CONFIGS을 적용 할 수 있습니다 : 당신이 그것을 피할 수 있다면

Ext.getCmp('card-tabs-panel').add(
     Ext.apply(grid, { 
      id:'tab-'+request.params.owner, 
      title: request.params.text, 
      iconCls:'silk-tab', 
      closable:true 
     }); 
    }).show(); 

이 BTW, 지속적으로 생성하고 그리드를 파괴하는 이상적인 전략이 아니다. 가능하다면 필요한 그리드 유형에 따라 그리드를 숨기거나 다시 표시하고 데이터를 다시로드하는 것이 좋습니다 (그리드 유형 세트가 유한하다고 가정 할 때).

Answer 2

잠재적 인 옵션은 새 데이터 세트 당 그리드 열의 동적 재구성을 허용하는 JsonStore에서 metaData 필드를 사용하는 것입니다. http://blog.nextlogic.net/2009/04/dynamic-columns-in-ext-js-grid.html 및 http://docs.sencha.com/ext-js/3-4/#!/api/Ext.data.JsonReader