Extjs 动态网格

Question

我正在尝试创建一个动态 grid使用 ExtJS。 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 是面板 并且不需要嵌套到父面板中)。您可以这样做，也可以应用所需的选项卡配置，如下所示:

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

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