1
我有一個容器，它有一系列垂直組織的組件。除非我指定鏈上某處的高度，否則這些組件的內部項目不會顯示。Sencha Touch 2佈局：適合內部的內容
應該在容器上使用什麼樣的佈局以便讓子組件適合其內容？
我試過以下，他們充當預期：
fit - 延伸超出需要，以適應整個屏幕什麼的第一個組件。
vbox - 而不只是內部部件對接面板撓曲結果被示出，與不具有高度
vbox內容面板 - 與組件撓曲結果共享屏幕，但不是基於它們的內容，這是沒有很好的內容，沒有很多內容留下空白空間，並沒有拉伸那些較大的溢出容器滾動
我認爲默認佈局是用於這個，但這會導致內部只顯示停放面板的組件，隱藏其餘部分：
問題：
目標（高度手動設置的屏幕截圖）：
主容器設置這樣的：
Ext.define('Messenger.view.NewsFeed',
{
extend : 'Ext.Container',
xtype : 'NewsFeed',
config :
{
scrollable :
{
direction : 'vertical',
directionLock : true
},
items : [
{
xtype : 'RacecardDaily'
},
{
xtype : 'RacecardDaily'
},
{
xtype : 'RacecardDaily'
},
{
xtype : 'RacecardDaily'
}
]
}
})
內部組件設置如下：
Ext.define('Messenger.view.content.actionable.racecard.daily.Daily',
{
extend : 'Messenger.view.content.actionable.racecard.Racecard',
xtype : 'RacecardDaily',
requires : [
'Messenger.view.content.actionable.racecard.daily.DataView'
],
config :
{
title : 'Today\'s racing',
cls: 'racecard-daily',
panelItems : [
{
xtype : 'RacecardDailyDataView',
flex : 1,
data : [ ... ] // Not relevant, just populates panel with content
}
]
}
})
延伸（最終，中級班只有場沒有佈局配置）：
Ext.define('Messenger.view.content.Container',
{
extend : 'Ext.Container',
requires : [
'Messenger.view.content.Header', 'Messenger.view.content.Panel'
],
config :
{
baseCls : 'content-container',
title : '',
panelItems : [],
margin : '10px 5% 0 5%',
layout: 'vbox'
},
initialize : function() {
this.contentHeader = this.add(
{
xtype : 'ContentHeader',
title : this.getTitle()
});
this.contentPanel = this.add(
{
xtype : 'ContentPanel',
items : this.getPanelItems(),
flex: 1
});
this.callParent();
},
canHide : function() {
return true;
},
toggleMinimize : function() {
var shouldHide = !this.contentPanel.getHidden();
this.contentPanel.setHidden(shouldHide);
}
});
會很感激任何與此指針，變成相當的時間下沉！