使行扩展元素，即 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 面板的项目 ` 我的父网格在窗口调整大小时被调整大小，但扩展的元素被截断。有没有办法用浏览器调整它们的大小。谢谢。

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

但实际上行体调整大小与开箱即用的网格，检查this fiddle。

您也可以查看this question。

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

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