ExtJS: quitar una rejilla de un TabPanel cuando su almacén subyacente está vacía

Question

Tengo TabPanel que contiene, entre otras cosas, una rejilla conectada a una tienda.

Varios eventos pueden eliminar los elementos de la tienda.

Me gustaría que la cuadrícula para ser retirado de la TabPanel cuando el almacén está vacío y, posiblemente, tener un único lugar en mi código para comprobar para este evento.

pensé acerca del uso de los oyentes de la tienda, pero por desgracia esto causa excepciones en código Ext. Mi suposición es que esto sucede porque la representación se realiza en la parrilla después de esto se retira de la TabPanel.

Cualquier idea sobre cómo llevar a cabo esta tarea sin estropear Ext es muy apreciada. Gracias:)

Por cierto, este es un fragmento 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 resuelto: sólo tenía que quitar el ajuste del parámetro "autoDestroy" a "falso" rejilla. Código fijo a continuación.

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

Cualquier razón por la que va a quitar la rejilla de la pestaña? Parece como un paradigma de interfaz de usuario extraño - ¿por qué no sólo mantener la cuadrícula vacía con un mensaje de "vacío"

En cualquier caso, creo que su enfoque (utilizando los sucesos de almacén y el número de registros para determinar cuándo quitarlo) es básicamente bien. Es posible que desee encontrar la manera de resolver cualquier error que dice que estaba recibiendo. ¿Qué eran?