ExtJS：当其底层存储为空时从选项卡面板中删除网格答案

【问题标题】：ExtJS: remove a grid from a tabpanel when its underlying store is emptyExtJS：当其底层存储为空时从选项卡面板中删除网格
【发布时间】：2011-01-25 01:25:13
【问题描述】：

我有 TabPanel，其中包含连接到 Store 的 Grid。

一些事件可能会从商店中删除元素。

我希望在商店为空时从 TabPanel 中删除 Grid，并且可能在我的代码中有一个位置来检查此事件。

我考虑过使用商店监听器，但不幸的是这会导致 Ext 代码中的异常。我的假设是发生这种情况是因为在从选项卡面板中删除之后在网格上执行渲染。

非常感谢任何关于如何在不弄乱 Ext 的情况下完成此类任务的想法。谢谢:)

顺便说一下，这是一段代码摘录：

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]
});

【问题讨论】：

标签： javascript extjs grid listener

【解决方案1】：

问题已解决：我只需删除将“autoDestroy”参数设置为“false”的网格。修正以下代码。

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]
});

【讨论】：

【解决方案2】：

您从标签中物理删除网格的任何原因？似乎是一个奇怪的 UI 范例——为什么不只用“空”消息保留空网格？

无论如何，我认为您的方法（使用商店事件和记录计数来确定何时删除它）基本上是可以的。您可能想弄清楚如何解决您所说的任何错误。他们是什么？

【讨论】：