ExtJS: rimuovere una griglia di tabpanel quando il suo deposito sottostante è vuoto

Question

Ho TabPanel che contiene, tra le altre cose, una griglia collegata ad un negozio.

Diversi eventi possono rimuovere gli elementi dal negozio.

Vorrei che la griglia di essere rimosso dal TabPanel quando il negozio è vuoto e, possibilmente, di avere un unico posto nel mio codice per verificare la presenza di questo evento.

Ho pensato di usare ascoltatori negozio, ma purtroppo questo fa sì che le eccezioni nel codice Ext. La mia ipotesi è che questo avviene perché rendering viene eseguito sulla griglia dopo questo viene rimosso dal tabpanel.

Qualche idea su come realizzare un tale compito senza rovinare Ext è molto apprezzato. Grazie:)

Tra l'altro, questo è un estratto di codice:

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 risolto: ho dovuto rimuovere l'impostazione del parametro "autoDestroy" a "false" griglia. Codice fisso sotto.

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

Qual è il motivo che si sta rimuovendo fisicamente la griglia dalla scheda? Sembra una UI paradigma strano -? Perché non solo a mantenere la griglia vuota con un messaggio di "vuoto"

In ogni caso, credo che il tuo approccio (usando gli eventi del deposito e numero di record per determinare quando per rimuoverlo) è fondamentalmente OK. Si potrebbe desiderare di capire come risolvere gli errori che si dice si stavano diventando. Che cosa erano?