ExtJS4 - 渲染子网格答案

【问题标题】：ExtJS4 - Rendering a subgridExtJS4 - 渲染子网格
【发布时间】：2012-03-06 17:38:42
【问题描述】：

当我使用 rowexpander 插件扩展行时，我试图在网格行内创建一个网格。如何在 expandbody 事件上渲染子网格？

到目前为止，这是我的代码，它在我定义网格面板时用作事件处理程序属性：

 getOtherProducts: function (rowNode, record, expandRow, eOpts) {
        $.ajax({
            type: 'GET',
            url: "Report.aspx/GetOtherProducts",
            data: { ID: record.data['ID'] },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function () {
                var subStore = Ext.create('pr.store.Store-Products');
                subStore.proxy.extraParams.productID = record.data['ID'];

                var subGrid = Ext.create('Ext.grid.Panel', {
                    store: subStore
                });

                subGrid.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick']);
            },
            error: function () {
                showNotificationBar("Error retrieving product data. Re-expand the row to try again.");
            }
        });
    },

【问题讨论】：

您可能必须扩展 rowexpander 插件。我做过类似的事情，但使用的是 roweditor 插件，like this。

标签： extjs grid subgrid

【解决方案1】：

stratboogie 在http://www.sencha.com/forum/showthread.php?151442-Nested-EXTJS-4-Grids 的回答完成了这项工作。

我做了一点修改，将元素 ID 存储到一个数组中

subGrids.push(subGrid.id);

然后覆盖分页事件处理程序以循环遍历数组并销毁数组内具有 ID 的所有元素以检查内存。

function destroySubGrids(){
    Ext.each(subGrids, function(id){
            var subGrid = Ext.getCmp(id);
            if(subGrid){
                subGrid.destroy();
                delete subGrid;
            }
        });
    subGrids = [];  
    console.log(Ext.ComponentMgr.all.length); //debug
}

【讨论】：