-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

トーマスが言ったように、リンク先の例は、アイテムがビューポートに直接配置されているためにのみ機能します。ビューポートは を使用してborder layoutいます。rqstPanel はパネルのサブアイテムであり、そのパネルはボーダー レイアウトにあります。そのため、rqstpanel が折りたたまれている場合、その親であるパネルは折りたたまれません。

したがって、例には次の階層があります。

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

中央のパネルが折りたたまれている場合、ビューポートのレイアウトは兄弟のサイズを変更して、使用可能なスペースを埋めます。

あなたはこれを持っています：

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

これは、デフォルトの xtype が「panel」であり、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 に答える