javascript - 使行扩展元素即 extjs 网格和图表可在窗口调整大小时调整大小

Question

我在 extjs 网格中使用 rowExpander 插件扩展每行 1 属性网格，其中选择了行的详细信息，图表在 rowBodyTpl 的 div 中呈现。我想调整窗口(浏览器)上的两个元素调整大小。`我的父网格是这样的 rowexpander

    var grid = Ext.create('Ext.app.CustomizedGridPanelv2', {
        width: '100%',
        overflowY: 'auto',
        flex: 1,
        store: this.gridStore,
        plugins: [{
            pluginId: 'expander',
            ptype: 'rowexpander',
            expandOnDblClick: false,
            expandOnEnter: false,
            rowBodyTpl: '<div id="{someId}' + this.id + '"></div>'
        }],
        viewConfig: {
            stripeRows: true,
            deferEmptyText: false,
            emptyText: " No detailsfound."
        },
        columns: [{ columns needed}] });

展开时我创建一个面板并渲染到 div

grid.getView().addListener('expandbody', function(_rowNode, _rec, _expandedHTML) {

        var panel = Ext.create('myPanel', {
            srcPanel: me,
            srcRecord: _rec,
            srcDiv: _rec.get('someId') + me.id
        });

        panel.render(_rec.get('someId') + me.id);


        grid.doLayout();
    });

我的面板将包含属性网格和图表，它们是 extjs 面板的元素`我的父网格在窗口调整大小时调整大小，但展开的元素被 chop 。有什么办法可以用浏览器调整它们的大小。谢谢。

Answer 1

我认为您可以为父组件(在您的情况下为网格)添加 resize 事件监听器:

listeners: {
    resize: function (grid) {
        var plugin = grid.findPlugin('rowexpander');
        if (plugin && plugin.recordsExpanded) {
            for (var id in plugin.recordsExpanded) {
                grid.getEl().down('.my_row_body#' + id).setWidth('100%');
            }
        }
    }
}

但实际上开箱即用的 row body resize with grid，检查 this fiddle .

您也可以查看this question .

如果您的问题与浏览器窗口大小调整有关，而不仅仅是网格大小调整，我认为您可以为整个窗口添加 resize 事件监听器(顺便说一句，不确定它的好解决方案):

window.addEventListener('resize', function () {
    myView.doLayout();
}, true);