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

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

1 个答案: