Question

我正在尝试使用ExtJS创建动态grid。触发click事件后会构建并显示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);
}

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

感谢任何帮助。

Answer 1

当您尝试将网格添加到标签时，如下所示：

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

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

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

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

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

Answer 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

中详细记录了原始信息

Extjs动态网格

2 个答案: