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

Posted 2023-02-26

【中文标题】使行扩展元素，即 extjs 网格和图表在窗口调整大小时调整大小

【英文标题】：Make row expanded element ie extjs grid and chart resizable on window resize

【发布时间】：2017-06-06 09:55:21

【问题描述】：

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

【参考方案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 4.1 中存储 getByInternalId id 不是函数。有没有办法用 internalId 获取记录。

实际上使用 ExtJS 4.2 行体调整大小与开箱即用的网格，检查这个小提琴 - fiddle.sencha.com/#view/editor&fiddle/213q

在这个小提琴中，我可以看到主网格没有在窗口调整大小时调整其列的大小。它的列被截断。

现在它可以正常工作，因为我希望我的应用程序可以正常工作。我想为 extjs 4.1 工作。对于“my_row_body”类，你对 div 应用了什么 CSS？

不确定 4.1 并且我没有为“my_row_body”类应用任何 CSS，因此我们可以使用 grid.getEl().down('.my_row_body#' + id).setWidth('100%'); 选择所需的 div