当 window 最大化时,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
最大化时,该列不会展开,而是保持与 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
本身确实在任何时候都可以正常扩展,只是里面的 Column
当 Window
最大化,filterFormPanel
折叠。
我试过了,没有成功:
- 根据 this 问题(和其他一些问题),将 searchResultsPanel 放入其自己的父 Panel 中并为其提供合适的布局。无论如何,我意识到这可能没有实际意义,因为这涉及到 GridPanel 没有扩展,我没有遇到过这个问题。
- 将
Column
的 width
配置设置为在可折叠 Panel
折叠和展开时等于 GridPanel
的宽度。这并没有解决我的问题,并导致折叠的 Panel
展开时右侧的 Panel
组件(在 centrePanel
内)出现水平滚动条。
我通过删除 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
});
我正在创建一个使用多个 Panel
组件的 EXT 应用程序。其中之一是包含单个 Column
的 GridPanel
。在我的 GridPanel
中,我将 autoExpandColumn
配置设置为此 Column
因为我的 Panel
组件之一是可折叠的,所以当它折叠时其他 Panel
组件展开并且 Column
也会展开。当 Window
处于其正常大小并且可折叠 Panel
被折叠时,Column
会展开以占据 GridPanel
的整个宽度。但是,当 Window
最大化时,该列不会展开,而是保持与 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
本身确实在任何时候都可以正常扩展,只是里面的 Column
当 Window
最大化,filterFormPanel
折叠。
我试过了,没有成功:
- 根据 this 问题(和其他一些问题),将 searchResultsPanel 放入其自己的父 Panel 中并为其提供合适的布局。无论如何,我意识到这可能没有实际意义,因为这涉及到 GridPanel 没有扩展,我没有遇到过这个问题。
- 将
Column
的width
配置设置为在可折叠Panel
折叠和展开时等于GridPanel
的宽度。这并没有解决我的问题,并导致折叠的Panel
展开时右侧的Panel
组件(在centrePanel
内)出现水平滚动条。
我通过删除 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
});