-2

我在 ExtJs 应用程序中有 Viewport。折叠时rqstPanel，rsltsPanel激活。但它没有调整大小。

Ext.create('Ext.Viewport', {
layout: 'border',
align: 'center',
border : 0,
defaultAlign : 'center',
items: [
{
    region: 'north',
    align: 'center',
    html : 'some html '
},
{
    region: 'center',
    align: 'center',
    minHeight: 500,
    items: [rqstPanel, rsltsPanel]
}
]
});

我也试过：

Ext.create('Ext.Viewport', {
layout: 'border',
align: 'center',
border : 0,
defaultAlign : 'center',
items: [
{
    region: 'north',
    align: 'center',
    html : 'some html'
},
{
    region: 'center',
    align: 'center',
    minHeight: 500,
    items: [rqstPanel]
}
{
    region: 'south',
    align: 'center',
    minHeight: 500,
    items: [rsltPanel]
}
]
});
4

1 回答 1

3

就像 Thomas 所说，您链接到的示例仅因为项目直接位于视口中而起作用。视口正在使用border layout. 您的 rqstPanel 是面板的子项，然后该面板位于边框布局中。因此，当 rqstpanel 折叠时，它的父级面板不会折叠。

所以这个例子有这个层次结构：

Viewport (layout: 'border')
 - Panel (north)
 - Panel (center)
 - Panel (south)

当 fxp 中心面板折叠时，视口的布局将调整兄弟姐妹的大小以填充可用空间。

你有这个：

Viewport (layout: 'border')
 - Panel (north) with content 'some html'
 - Panel (center)
   - Panel rqstPanel
 - Panel (south)
   - Panel rsltPanel

这是因为默认的 xtype 是“面板”，并且您通过其配置将 rqstPanel 添加为该面板的子项items。此代码在此处生成一个位于 rqstPanel 和视口之间的面板。

{
    region: 'center',
    align: 'center',
    minHeight: 500,
    items: [rqstPanel]
}

因此，当 rqstPanel 折叠时，它的父级（中心）不会被视口调整大小，因为它拥有的所有项目（北/中/南）都具有同等重要性并且将采用相同的高度。

基本上托马斯所说的将解决您的问题。不要让 rqstPanel 和 rsltPanel 成为视口中的面板的子项 - 直接将它们添加为子项。

基本上你想要的是直接添加你的 rqstPanel 。

Ext.define("MyApp.view.RequestPanel", {
    extend: "Ext.panel.Panel",
    alias: "widget.requestPanel",
    // other configs for this panel
});

Ext.define("MyApp.view.ResultsPanel", {
    extend: "Ext.panel.Panel",
    alias: "widget.resultsPanel",
    // other configs for this panel
});

Ext.create('Ext.Viewport', {
    layout: 'border',
    align: 'center',
    border : 0,
    defaultAlign : 'center',
    items: [
        {
            region: 'north',
            align: 'center',
            html : 'some html'
        },
        {
            xtype: 'requestPanel',
            region: 'center',
            align: 'center',
            minHeight: 500
        },
        {
            xtype: 'resultsPanel',
            region: 'south',
            align: 'center',
            minHeight: 500
        }
    ]
});
于 2013-08-31T10:26:41.923 回答