ExtJS: retrait d'une grille d'un tabpanel lorsque son magasin sous-jacente est vide

Question

Je TabPanel qui contient, entre autres, une grille connectée à un magasin.

Plusieurs événements peuvent supprimer des éléments du magasin.

Je voudrais que la grille à retirer du TabPanel lorsque le magasin est vide et, peut-être, d'avoir un seul endroit dans mon code pour vérifier cet événement.

Je pensais à l'aide d'écouteurs de magasin, mais malheureusement, ce qui provoque des exceptions dans le code Ext. Je suppose que cela se produit parce que le rendu est effectué sur la grille après est retirée du tabpanel.

Une idée sur la façon d'accomplir une telle tâche sans chambouler Ext est très apprécié. Merci:)

Par ailleurs, voici un extrait de code:

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

Problème résolu: Je devais retirer la grille du paramètre « autoDestroy » à « false ». Code fixe ci-dessous.

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

Quel est le motif que vous êtes physiquement la grille retirez de l'onglet? On dirait un paradigme de l'interface utilisateur bizarre - pourquoi ne pas simplement garder la grille vide avec un message « vide »

En tout cas, je pense que votre approche (en utilisant les événements de magasin et nombre d'enregistrements pour déterminer quand le supprimer) est fondamentalement OK. Vous voudrez peut-être de savoir comment résoudre les erreurs que vous dites ce que vous obtenez. Quels étaient-ils?