ExtJS 3.4 列在窗口最大化时未完全展开
extjs 3.4 column not fully expanding when window is maximised
我正在创建一个使用多个Panel
组件的 EXT 应用程序。其中之一是包含单个Column
的GridPanel
。在我的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
的整个宽度。
我试过了,但没有成功:
- 将 searchResultsPanel 放在它自己的父面板中,并根据这个问题(和其他一些问题)为其提供合适的布局。无论如何,我意识到这可能是没有意义的,因为这涉及GridPanel不扩展,这是我没有的问题。
- 将
Column
的width
配置设置为折叠和展开可折叠Panel
时GridPanel
的宽度。这并没有解决我的问题,并导致右侧(centrePanel
内部)的Panel
组件在折叠的Panel
展开时具有水平滚动条。
我通过删除GridPanel
中的autoExpandColumn
配置并用viewConfig
将forceFit
配置括起来来解决此问题,因为它是 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
});
- 如何禁用最大化,最小化和关闭按钮以打开新窗口
- 自动最大化浏览器窗口
- 浏览器窗口最小化/最大化事件
- 引导 3 - 最大化窗口时导航对齐未正确显示
- Mac Chrome 悬停事件在窗口最大化时的行为会有所不同
- ExtJS 3.4 列在窗口最大化时未完全展开
- 图像映射区域无法触发单击事件.afer最大化寡妇或恢复窗口单击事件触发
- 如果用户调整窗口大小/窗口未最大化,是否可以隐藏网页上的图像
- 当我单击最大化窗口时,游戏速度变慢
- 如何使用Javascript打开最大化窗口
- 在 Chrome 中最大化弹出窗口
- 如何通过Javascript删除最小化和最大化窗口属性
- 想要在浏览器窗口最小化或最大化时重置RadGrid高度
- 在FireFox中使用JavaScript最大化弹出窗口
- 禁用弹出窗口中的最大化、关闭按钮
- ExtJS 4.2 -约束窗口在最大化然后恢复后没有正确定位
- 背景/内容下半部分消失时,调整大小/最大化窗口
- 如何使用html/javascript自动最大化chrome窗口
- 使用相同按钮的Javascript最大化/取消最大化窗口
- 子窗口可以'在GNU+Linux的Electron中不能最大化