extjs : 기본 상점이 비어있을 때 Tabpanel에서 그리드를 제거하십시오.

Question

나는 무엇보다도 상점에 연결된 그리드를 포함하는 Tabpanel이 있습니다.

여러 이벤트가 상점에서 요소를 제거 할 수 있습니다.

상점이 비어있을 때 Tabpanel에서 그리드를 제거하고 아마도이 이벤트를 확인하기 위해 내 코드에 단일 장소를 갖기를 원합니다.

나는 상점 청취자를 사용하는 것에 대해 생각했지만 불행히도 이것은 EXT 코드에서 예외를 유발합니다. 내 가정은 Tabpanel에서이를 제거한 후 그리드에서 렌더링이 수행되기 때문에 발생한다고 가정합니다.

Ext를 엉망으로 만들지 않고 그러한 과제를 수행하는 방법에 대한 아이디어는 대단히 감사합니다. 감사 :)

그건 그렇고, 이것은 코드 발췌입니다.

var myStore = new Ext.data.Store({
 reader: new Ext.data.JsonReader({fields: MyRecord}),
 listeners:{
  'clear': function(store, recs) {
   myTabPanel.remove(myGrid);
  },
  'remove': function(store, rec, idx) {
   if (store.getCount() == 0) {
    myTabPanel.remove(myGrid);
   }
  }
 }
});

var myGrid = new Ext.grid.GridPanel({
 id: "myGrid",
 title: "A Grid",
 store: myStore,
 frame:false,
 border:false,
 columns: [
 {
  header: 'Remove',
  align:'center',
  width: 45,
  sortable: false,
  renderer: function(value, metaData, record, rowIndex, colIndex, store) {
   return '<img src="images/remove.png" width="34" height="18"/>';
  }
 },{
  header: 'Some Data',
  dataIndex: 'data',
  sortable: true
 }
 ],
 listeners:{
  'cellclick':function(grid, rowIndex, colIndex, e){
   var rec = myStore.getAt(rowIndex);
   if(colIndex == 0){
    myStore.remove(rec);
   }
  }
 } 
});

var myTabPanel= new Ext.TabPanel({ 
 activeTab: 0,
 items: [ fooPanel, barPanel, myGrid]
});

Answer 1

문제 해결 : 그리드 설정을 "autodestroy"매개 변수를 "false"로 제거해야했습니다. 아래에 고정 코드.

var myStore = new Ext.data.Store({
 reader: new Ext.data.JsonReader({fields: MyRecord}),
 listeners:{
  'clear': function(store, recs) {
   myTabPanel.remove(myGrid, false);
  },
  'remove': function(store, rec, idx) {
   if (store.getCount() == 0) {
    myTabPanel.remove(myGrid, false);
   }
  }
 }
});

var myGrid = new Ext.grid.GridPanel({
 id: "myGrid",
 title: "A Grid",
 store: myStore,
 frame:false,
 border:false,
 columns: [
 {
  header: 'Remove',
  align:'center',
  width: 45,
  sortable: false,
  renderer: function(value, metaData, record, rowIndex, colIndex, store) {
   return '<img src="images/remove.png" width="34" height="18"/>';
  }
 },{
  header: 'Some Data',
  dataIndex: 'data',
  sortable: true
 }
 ],
 listeners:{
  'cellclick':function(grid, rowIndex, colIndex, e){
   var rec = myStore.getAt(rowIndex);
   if(colIndex == 0){
    myStore.remove(rec);
   }
  }
 } 
});

var myTabPanel= new Ext.TabPanel({ 
 activeTab: 0,
 items: [ fooPanel, barPanel, myGrid]
});

Answer 2

탭에서 그리드를 물리적으로 제거하는 이유가 있습니까? 이상한 UI 패러다임처럼 보입니다. 왜 "빈"메시지로 빈 그리드를 유지하지 않습니까?

어쨌든, 나는 당신의 접근 방식 (매장 이벤트와 레코드 수용을 사용하여 제거시기를 결정)이 기본적으로 괜찮다고 생각합니다. 당신이 얻는 오류를 해결하는 방법을 알아 내고 싶을 수도 있습니다. 그들은 무엇 이었습니까?