Extjs动态网格

我想创造一个动态的 grid 使用ExtJS。这个 网格 ajax 请求被发送到服务器以获取列、记录和记录定义 a.k.a

每个节点可以有不同的 网格 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事件时调用

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

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

感谢您的帮助。