Sencha触觉2布局:适合内部内容
Sencha触觉2布局:适合内部内容
提问于 2014-10-16 11:54:44
我有一个容器，它有一系列垂直组织的组件。这些组件的内部项不显示，除非我指定链上某个位置的高度。
容器上应该使用什么样的布局才能使子组件伸长以适应其内容？
我试过以下几种方法，它们的作用就像预期的那样：
fit -将第一个组件扩展到适合整个屏幕所需的范围之外。
vbox -不使用flex只显示内部组件停靠面板，而内容面板没有高度。
vbox -使用flex可以使组件共享屏幕，而不是基于它们的内容，这对没有大量内容的内部组件来说是没有好处的，也不会扩展那些较大的组件来溢出用于滚动的容器。
我认为默认布局是用于此的布局，但这会导致内部组件只显示停靠面板，而隐藏其余部分：
问题是：
目标(屏幕截图手动设定的高度)：
主容器设置如下：
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);
}
});会真的很感激任何的指点与此，变成了相当的时间下沉！
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-10-16 15:07:34
结果发现有几个问题：
- 我的数据视图中没有正确设置我的存储库，这意味着数据没有正确加载。因此，我现在使用Ext.create在DataView初始化中创建存储。
- DataView的
scrollbale需要是null而不是false。 - 容器(对我来说是ContentPanel)布局设置为
fit。如果我想要在那里有多个面板，这会在以后引起问题，但是在花了这么长时间让它达到这个阶段之后，当我到达它的时候，我会穿过那座桥。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26403733
复制相关文章
相似问题
腾讯云开发者
