Extjs: Remova uma grade de um tabpanel quando sua loja subjacente estiver vazia

Question

Eu tenho tabpanel que contém, entre outras coisas, uma grade conectada a uma loja.

Vários eventos podem remover elementos da loja.

Gostaria que a grade fosse removida do Tabpanel quando a loja estiver vazia e, possivelmente, ter um único local no meu código para verificar este evento.

Pensei em usar os ouvintes da loja, mas infelizmente isso causa exceções no código EXT. Minha suposição é que isso acontece porque a renderização é realizada na grade depois que isso é removido do TabPanel.

Qualquer idéia de como realizar essa tarefa sem estragar a EXT é muito apreciada. Obrigado :)

A propósito, este é um trecho de código:

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

Problema resolvido: eu só tive que remover a grade definindo o parâmetro "Autodestroy" para "false". Código corrigido abaixo.

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

Alguma razão para você estar removendo fisicamente a grade da guia? Parece um paradigma estranho da interface do usuário - por que não manter a grade vazia com uma mensagem "vazia"?

De qualquer forma, acho que sua abordagem (usando eventos da loja e contagem de registros para determinar quando removê -la) está basicamente bem. Você pode descobrir como resolver quaisquer erros que você diz que estava recebendo. O que eles eram?