Question

我在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]
}
]
});

Answer 1

就像托马斯所说，你链接到的例子只是因为这些项目直接位于视口中。视口正在使用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是'panel'，你可以通过它的items配置将rqstPanel添加为该面板的子节点。此代码生成一个位于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
        }
    ]
});

发出自动调整Extjs 4.2.1视口内的高度

1 个答案: