問題自動調整Extjs 4.2.1視口內的高度

Question

我在ExtJs應用中有視口。當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是「板」，並加入rqstPanel作爲面板的孩子throught是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 
     } 
    ] 
});