Extjs动态网格

我想用Extjs创建一个动态网格。当点击事件被触发时，网格被构建和显示，然后ajax请求被发送到服务器以获取列，记录和记录定义a.k.a存储字段。每个节点可以具有不同的网格结构，并且取决于树中节点的级别。Extjs动态网格

我想出了迄今为止唯一的办法就是

 function showGrid(response, request) {     
     var jsonData = Ext.util.JSON.decode(response.responseText);     
     var grid = Ext.getCmp('contentGrid'+request.params.owner); 

     if(grid) { 
      grid.destroy();         
     } 

     var store = new Ext.data.ArrayStore({ 
      id : 'arrayStore',     
      fields : jsonData.recordFields, 
      autoDestroy : true 
     });    

     grid = new Ext.grid.GridPanel({ 
      defaults: {sortable:true}, 
      id:'contentGrid'+request.params.owner, 
      store: store,   
      columns: jsonData.columns, 
      //width:540, 
      //height:200, 
      loadMask: true 
     });   


     store.loadData(jsonData.records);   
     if(Ext.getCmp('tab-'+request.params.owner)) { 
      Ext.getCmp('tab-'+request.params.owner).show(); 
     } else {     
      grid.render('grid-div'); 
      Ext.getCmp('card-tabs-panel').add({ 
      id:'tab-'+request.params.owner, 
      title: request.params.text, 
      iconCls:'silk-tab', 
      html:Ext.getDom('grid-div').innerHTML, 
      closable:true 
      }).show();   
     } 
    }

的功能时点击事件被触发

 'click': function(node) { 
      Ext.Ajax.request({ 
       url: 'showCtn', 
       success: function(response, request) {        
        alert('Success');             
        showGrid(response,request); 
       }, 
       failure: function(results, request) { 
        alert('Error'); 
       }, 
       params: Ext.urlDecode(node.attributes.options);           
     }

我与这段代码获得的问题是，上述被称为每次showGrid函数被调用时都会显示一个新的网格。最终用户会看到旧的网格和新的网格。为了缓解这个问题，我尝试销毁网格，并删除每个请求上的网格元素，这似乎解决了问题，只有记录从未显示这次。

if(grid) { 
      grid.destroy(true);         
     }

我在找的行为是一个选项卡中显示网格的结果，如果该选项卡存在代替了旧的网格。任何帮助表示赞赏。

谢谢

来源

2010-03-12 ken

当您尝试网格添加到标签是这样的：

html:Ext.getDom('grid-div').innerHTML,

分机不知道它是一个有效的网格组件的。相反，您只需添加HTML标记，看起来像是一个网格，但TabPanel不会意识到它是一个网格组件。相反，您应该将网格本身添加为选项卡（GridPanel 是Panel，不需要嵌套到父面板中）。你可以这样做，也适用所需的标签CONFIGS这样的：

Ext.getCmp('card-tabs-panel').add(
     Ext.apply(grid, { 
      id:'tab-'+request.params.owner, 
      title: request.params.text, 
      iconCls:'silk-tab', 
      closable:true 
     }); 
    }).show();

BTW，不断创建和销毁网格是不是一个理想的策略，如果你能避免它。如果可能的话（假设网格类型是有限的），根据需要哪种类型的网格简单地隐藏和重新显示网格（并重新加载它们的数据）可能会更好。

来源

2010-03-12 08:35:25

大它的工作原理。谢谢。至于摧毁和重建每一次电网，我不能保证数量有限的电网，所以我别无选择。顺便说一句为什么销毁电网不被认为是一个好策略？ – ken 2010-03-12 20:45:13

GridPanel在标记和内存占用方面都是最重的组件（除了可能有很多节点的TreePanel外）。如果你不小心（或者如果Ext像过去一样有任何与组件销毁有关的错误），那么随着时间的推移，这可能导致DOM泄漏。此外，从用户的角度来看，创建网格非常耗时，因此重新创建网格而不是简单地展示隐藏网格是您应用感知性能的一大差异（尤其是在经常按照您的操作进行时）。很高兴你解决了你的问题。 – 2010-03-12 23:19:50

很高兴知道。如果我可以控制请求的网格数，我会尝试更多地关注这一点。也许有一组网格来服务并限制他们的数量。 – ken 2010-03-13 06:19:57

一个潜在的选择是使用JsonStore上的元数据字段，该字段允许根据新数据集动态重新配置网格列。

从

一个关于这一点，香港专业教育学院发现的最有用的博客文章是这个： http://blog.nextlogic.net/2009/04/dynamic-columns-in-ext-js-grid.html和原来的信息是有据可查的，在http://docs.sencha.com/ext-js/3-4/#!/api/Ext.data.JsonReader

来源

2012-07-30 17:10:29 Karl

Extjs动态网格

回答

相关问题