ExtJS 3.4 列在窗口最大化时未完全展开

extjs 3.4 column not fully expanding when window is maximised

本文关键字:最大化 窗口 ExtJS      更新时间:2023-09-26

我正在创建一个使用多个Panel组件的 EXT 应用程序。其中之一是包含单个ColumnGridPanel。在我的GridPanel中,我已将autoExpandColumn配置设置为此Column因为我的一个Panel组件是可折叠的,因此当它折叠时,其他Panel组件会扩展,Column也会扩展。当Window处于正常大小并且可折叠Panel折叠时,Column确实会扩展以占据GridPanel的整个宽度。但是,当Window最大化时,列不会展开,而是保持与窗口最大化且可折叠Panel未折叠时的宽度相同的宽度(这比Window处于正常大小时更大)。Window有一个BorderLayout这就是前两个Panel组件使用 region 属性的原因。

以下是相关代码:

Window的配置:

                title: 'Engineering Works',
                width: 915,
                height: 550,
//                minHeight: 550,
//                minWidth: 915,
                resizable: false,
                padding: 10,
                shim:false,
//                monitorResize: true,
                confirmClose: true,
                animCollapse:false,
                constrainHeader:true,
                style: {
                    margin: "10px"
                },
                layout: "border",
                items: [filterFormPanel,centrePanel]

可折叠面板:

var filterFormPanel = new Ext.FormPanel({
    region: "west",
    monitorResize:true,
    width: "38%",
    title: "Filter",
    collapsible: true,
    id: windowId + "filter",
    items: [stationsPanel, datesPanel, daysPanel, impactPanel, searchButton]
});

centrePanel(包含另外两个面板,其中第一个(searchResultsPanel)是上面解释的GridPanel

   var centrePanel = new Ext.Panel({
        region: "center",
        layout:'border',
        monitorResize:true,
        items: [searchResultsPanel,individualResultPanel]
    });

searchResultsPanel(包含一个我省略的rowclick侦听器,因为它很长并且与此问题无关):

    var searchResultsPanel = new Ext.grid.GridPanel({
        title: "All Results",
        id: windowId + "allresults",
        border: false,
        monitorResize:true,
        autoScroll: true,
        region:'center',
        forceFit: true,
        colModel:  myColumnModel,
        autoExpandColumn: windowId + "summarycolumn",
        store: mystore
    });

值得指出的是,GridPanel本身确实在任何时候都正常扩展,只是当Window最大化并且filterFormPanel折叠时,它内部的Column并没有占据GridPanel的整个宽度。

我试过了,但没有成功:

  1. 将 searchResultsPanel 放在它自己的父面板中,并根据这个问题(和其他一些问题)为其提供合适的布局。无论如何,我意识到这可能是没有意义的,因为这涉及GridPanel不扩展,这是我没有的问题。
  2. Columnwidth配置设置为折叠和展开可折叠PanelGridPanel的宽度。这并没有解决我的问题,并导致右侧(centrePanel内部)的Panel组件在折叠的Panel展开时具有水平滚动条。

我通过删除GridPanel中的autoExpandColumn配置并用viewConfigforceFit配置括起来来解决此问题,因为它是 GridView 组件的配置。所以我的 GridPanel 现在看起来像这样(减去听众):

var searchResultsPanel = new Ext.grid.GridPanel({
    title: "All Results",
    id: windowId + "allresults",
    border: false,
    monitorResize:true,
    autoScroll: true,
    region:'center',
    colModel:  myColumnModel,
    viewConfig: {
        forceFit: true
    },
    store: mystore
});