组件在重新渲染期间丢失，如何重新附加？

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

这很好用。但是当网格接收到具有某些修改字段的记录的 update 事件时，该记录的 rowExpander 仅使用 rowTpl 重新呈现，并且内部网格在某处悬空。我可以使用 Ext.getCmp 访问网格，并且 grid.rendered 是正确的，但未显示。所以我想我必须在重新呈现该行后重新附加网格。

我想我可以附加到更新事件，并使用

找出是否在没有子网格的情况下重新渲染了 rowTpl

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

但是有没有办法把网格放回dom？

我试过了

grid.container.insertFirst(grid.el);

但这不起作用。插入了元素，但没有显示网格。

有什么想法吗？

Answer 1

你这样做会导致内存泄漏（因为当网格 re-render 时你的组件没有被销毁）。

我建议查看：组件模板 (http://skirtlesden.com/ux/ctemplate) or if you try to render a nested grid, there was several attempt to build something correct and I think a working one is the following : http://blogs.walkingtree.in/2015/06/30/nested-grid-in-sencha-ext-js/

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

组件在重新渲染期间丢失，如何重新附加？

Component lost during rerender, how to reattach?

javascript

extjs

extjs6