EXTJS: Entfernen Sie ein Gitter aus einem Tabpanel, wenn der zugrunde liegende Geschäft leer ist

Question

Ich habe Tabpanel, das unter anderem ein mit einem Geschäft verbundener Netz enthält.

Mehrere Veranstaltungen können Elemente aus dem Geschäft entfernen.

Ich möchte, dass das Netz aus dem Tabpanel entfernt wird, wenn der Laden leer ist und möglicherweise einen einzelnen Platz in meinem Code hat, um nach diesem Ereignis zu überprüfen.

Ich habe über die Verwendung von Geschäftshörern nachgedacht, aber leider verursacht dies Ausnahmen im EXT -Code. Ich gehe davon aus, dass dies geschieht, weil das Rendering am Raster durchgeführt wird, nachdem dies aus dem Tabpanel entfernt wurde.

Jede Idee, wie eine solche Aufgabe erledigt werden kann, ohne Ext durcheinander zu bringen, wird sehr geschätzt. Vielen Dank :)

Dies ist übrigens ein Codeauszug:

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

Problem gelöst: Ich musste nur das Gitter entfernen, der den Parameter "Autodestroy" auf "False" einstellte. CODE unten behoben.

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

Irgendein Grund, warum Sie das Netz physisch von der Registerkarte entfernen? Scheint wie ein seltsames UI -Paradigma - warum nicht einfach das leere Netz mit einer "leeren" Nachricht halten?

Auf jeden Fall denke ich, dass Ihr Ansatz (mithilfe von Store -Ereignissen und Aufzeichnungen, um zu bestimmen, wann sie entfernen müssen) im Grunde genommen in Ordnung ist. Vielleicht möchten Sie herausfinden, wie Sie alle Fehler lösen können, von denen Sie sagen, dass Sie sie erhalten haben. Was waren Sie?