Extjs 动态网格

Posted 2023-02-26

【中文标题】Extjs 动态网格

【英文标题】：Extjs Dynamic Grid

【发布时间】：2010-03-12 06:22:55

【问题描述】：

我正在尝试使用 ExtJS 创建一个动态的grid。 grid 在触发点击事件时构建并显示，然后将ajax 请求发送到服务器以获取列、记录和记录定义a.k.a 存储字段。

每个节点可以有不同的grid 结构，这取决于tree 中节点的级别。

到目前为止我想出的唯一方法是：

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

我正在寻找的行为是在选项卡中显示网格的结果，如果该选项卡存在，则替换旧网格。

感谢任何帮助。

【参考方案1】：

当您尝试像这样将网格添加到选项卡时：

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

Ext 不知道它是一个有效的网格组件。相反，您只是添加恰好看起来像一个网格的 HTML 标记，但 TabPanel 不会意识到它是一个网格组件。

您应该将网格本身添加为选项卡（GridPanel 是面板，不需要嵌套到父面板中）。您可以这样做，也可以像这样应用所需的选项卡配置：

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

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

【讨论】：

很好用。谢谢你。至于每次破坏和重新创建网格，很遗憾我不能保证网格的数量有限，所以我别无选择。顺便说一句，为什么破坏网格不是一个好策略？

GridPanel 在标记和内存占用方面几乎是最重的组件（除了可能有很多节点的 TreePanel）。如果你不小心（或者如果 Ext 像过去一样有任何与组件销毁相关的错误），这可能会随着时间的推移导致 DOM 泄漏。此外，从用户的角度来看，创建一个网格非常耗时，因此重新创建一个网格与简单地显示一个隐藏的网格对您的应用程序的感知性能有很大的不同（尤其是当您经常像您一样这样做时）。很高兴你解决了你的问题。

很高兴知道。一旦我清楚地知道是否可以控制请求的网格数量，我将尝试更多地关注这一点。也许有一个网格池可供服务并限制它们的数量。

【参考方案2】：

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

来自

我发现的关于此的最有用的博客文章之一是： 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 有很好的记录