Question

我正在将一个组件渲染到一个网格rowExpander插件rowBodyTpl：

plugins: [{
    ptype: 'rowexpander',
    rowBodyTpl : [
        '<div id="contact-row-{Id}"> </div>'
    ]
}],


var row = 'contact-row-' + record.get('Id'),
    grid = Ext.getCmp(gridId),
    if(!grid) me.createSubGrid(record,gridId).render(row);

这很好用。但是当网格收到带有某些modifiedFields的记录的update事件时，该记录的rowExpander仅使用rowTpl重新呈现，并且内部网格悬挂在某处。我可以使用Ext.getCmp访问网格，grid.rendered为true，但未显示。所以我想在重新渲染行之后我必须重新连接网格。

我想我可以附加到更新事件，并查明是否已使用子网格重新渲染rowTpl

if(!grid.container.contains(grid.el))

但是有没有办法让网格重新进入dom？

我试过了

grid.container.insertFirst(grid.el);

但这不起作用。插入元素但不显示网格。

有什么想法吗？

Answer 1

你正在做的事情会导致内存泄漏（因为重新渲染网格时你的组件不会被破坏）。

我建议检查：组件模板（http://skirtlesden.com/ux/ctemplate）或者如果您尝试渲染嵌套网格，有几次尝试构建正确的东西，我认为有一个工作原因如下：{{3} }

Answer 2

通过我的试验，我已经走上了正确的轨道，错误完全在其他地方。问题是我的更新事件fn执行了重新连接是在更新事件fn之前执行的，它破坏了所有内容，因为fn在同一事件上被触发并具有相同的优先级，但之前已附加到商店。更改优先级是一个选项，但我只是将创建放入boxready事件，该事件在视图将其事件附加到商店后执行：

xtype:'grid',
listeners:{
    boxready:function(grid) {
        var store = grid.getStore();
        ...
        store.on({
            update:function(store, record) {
                me.restoreSubgridDom(record);
            },
            beforeload:function(store) {
                var records = store.getRange();
                Ext.each(records,me.destroySubgrid);
            }
        });
    }
}

有两个功能：

restoreSubgridDom: function(record) {
    var row = 'contact-row-' + record.get('Id'),
        gridId = 'ContactRow'+record.get('Id')+'Grid',
        grid = Ext.getCmp(gridId);
    if(grid && !grid.container.contains(grid.el))
    {
        grid.container.insertFirst(grid.el);
    }
},
destroySubgrid: function(record) {
    var gridId = 'ContactRow'+record.get('Id')+'Grid',
        grid = Ext.getCmp(gridId);
    if(grid) grid.destroy();
}

在重新渲染过程中组件丢失，如何重新连接？

2 个答案: