Layout Sencha：内部带有选项卡面板的可滚动vbox布局
我刚开始使用Sencha Touch 2.3 我有一个导航视图。 其中有一个视图（布局：“vbox”），由两个面板（flex:0）和一个选项卡面板（flex:1）组成。视图应该是完全可滚动的 问题是tabpanel的内容不是完全可见的，也不能填满整个页面 如果tabpanel的布局属性设置为“适合”，则其内容将正确显示，整个视图将按aspected滚动，但tabpanel将停止工作。如果我将tabpanel放在外部容器中并将其设置为“layout:fit”，则会得到相同的结果 这是我的代码摘录：Layout Sencha：内部带有选项卡面板的可滚动vbox布局,layout,sencha-touch-2,Layout,Sencha Touch 2,我刚开始使用Sencha Touch 2.3 我有一个导航视图。 其中有一个视图（布局：“vbox”），由两个面板（flex:0）和一个选项卡面板（flex:1）组成。视图应该是完全可滚动的 问题是tabpanel的内容不是完全可见的，也不能填满整个页面 如果tabpanel的布局属性设置为“适合”，则其内容将正确显示，整个视图将按aspected滚动，但tabpanel将停止工作。如果我将tabpanel放在外部容器中并将其设置为“layout:fit”，则会得到相同的结果 这是我的代码摘录：
Ext.define('App.view.athletes.Detail', {
extend: 'Ext.Panel',
xtype: 'athleteDetail',
config: {
itemId: 'view-athleteDetail',
title: '...',
layout: 'vbox',
items: [
{
xtype: 'panel',
itemId: 'component-wrapper',
scrollable: true,
flex: 1
}
]
}
this.topComponent = Ext.create('Ext.Panel', {
flex: 0,
layout: 'hbox',
items: [
{
xtype: 'panel',
....
....
},
{
xtype: 'panel',
....
....
}
]
});
this.baseInfoComponent = Ext.create('Ext.Panel', {
flex: 0,
html: '...'
});
this.bottomComponent = Ext.create('Ext.TabPanel', {
flex: 1,
tabBarPosition: 'top',
styleHtmlContent : true,
items: [
{
........
},
{
........
}
]
});
config: {
cls: 'main',
itemId: 'view-athleteDetail',
title: '...',
layout: 'vbox',
items: [{
xtype: 'panel',
flex: 0,
layout: 'hbox',
items: [{
xtype: 'panel'
}, {
xtype: 'panel'
}]
}, {
xtype: 'panel',
flex: 0,
html: 'O meri jaan'
}, {
xtype: 'tabpanel',
flex: 1,
tabBarPosition: 'bottom',
styleHtmlContent : true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
}, {
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
}]
}]
}
这适合整个页面。Sencha很难为vbox中的组件设置自动高度。我建议您在切换选项卡时手动设置高度。查看下面的
activeitemchangefixHeightExt.application({
name: 'Test',
requires: [
'Ext.MessageBox',
'Ext.TitleBar',
'Ext.tab.Panel'
],
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('Ext.Container', {
scrollable: 'vertical',
layout: 'vbox',
items: [{
xtype: 'titlebar',
title: 'Test',
docked: 'top'
}, {
xtype: 'panel',
height: 100,
layout: 'hbox',
padding: 10,
defaults: {
width: 80,
margin: '0 5px'
},
items: [{
style: {
'background-color': '#B1654B'
}
}, {
style: {
'background-color': '#F79273'
}
}, {
style: {
'background-color': '#FDC08E'
}
}, {
style: {
'background-color': '#FFF6B9'
}
},{
style: {
'background-color': '#99D1B7'
}
}]
}, {
xtype: 'tabpanel',
height: 0,
style: {
'border': '2px solid #555'
},
defaults: {
style: {
'padding': '10px 5px',
'background-color': '#EFFFE0'
}
},
items: [{
xtype: 'panel',
title: 'tab 1',
html: 'panel 1<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}, {
xtype: 'panel',
title: 'tab 2',
html: 'panel 2<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
}, {
xtype: 'panel',
title: 'tab 3',
html: 'panel 3<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.'
}],
listeners: {
activeitemchange: function() {
this.fixHeight();
},
scope: this,
order: 'after'
}
}]
}));
this.fixHeight();
},
fixHeight: function() {
var tabPanel = Ext.Viewport.down('tabpanel'),
tabBar = tabPanel.down('tabbar'),
dh = 10,
h;
tabPanel.setHeight(0);// reset tab panel height
h = tabPanel.getActiveItem().element.dom.scrollHeight + tabBar.element.getHeight() + dh;
tabPanel.setHeight(h);
}
});
Ext.application({
名称：'测试'，
要求：[
“Ext.MessageBox”，
“外部标题栏”，
“外部选项卡面板”
],
启动：函数（）{
//销毁#appLoadingIndicator元素
Ext.fly（'appLoadingIndicator'）.destroy（）；
//初始化主视图
Ext.Viewport.add（Ext.create（'Ext.Container'）{
可滚动：“垂直”，
布局：“vbox”，
项目：[{
xtype:'标题栏'，
标题:"测试",，
停靠：“顶部”
}, {
xtype:'面板'，
身高：100，
布局：“hbox”，
填充：10，
默认值：{
宽度：80，
边距：“0 5px”
},
项目：[{
风格：{
“背景色”：“B1654B”
}
}, {
风格：{
“背景色”：“F79273”
}
}, {
风格：{
“背景色”：“FDC08E”
}
}, {
风格：{
“背景色”：“FFF6B9”
}
},{
风格：{
“背景色”：“99D1B7”
}
}]
}, {
xtype:'tabpanel'，
高度:0,，
风格：{
“边框”：“2px实心#555”
},
默认值：{
风格：{
“填充”：“10px 5px”，
“背景色”：“EFFFE0”
}
},
项目：[{
xtype:'面板'，
标题：“表1”，
HTML：“面板1 BR/> LoRM Ipple Door坐在一起，EDE乱数假文，除非是出于谨慎，否则不应因官方过失而获得动物保护和劳动。知识本身不应被视为一种道德，不应被视为一种道德，不应被视为一种道德，不应被视为一种道德，不应被视为一种道德，不应被视为一种道德2.两人或两人都有权在法庭上受到谴责，因为他们都有权在法庭上被判无罪。除了偶尔被判无罪外，还必须在法庭上承担对动物和劳动力的责任。知识本身是一种责任，是一种对精英的奉献，是一种对劳动力和劳动力的暂时性惩罚从最低限度上说，我们的劳动是不正当的，因为我们的共同义务是不正当的。我们的劳动是不正当的，我们的劳动是不正当的。我们的劳动是不正当的，我们的劳动是不正当的。我们的知识是不正当的，我们的劳动是神圣的作为一名精英，我们的工作和收入都是暂时性的。我们的收入是最低的，但我们的收入是从普通消费品中扣除的。我们的收入和收入都是以不平等的方式分配的。但偶尔的情况除外，工作人员必须承担劳动的责任。知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德精英应该是无资格的。除了偶尔出于谨慎的考虑，不能因为工作上的过失而得到动物的劳动。知识应该是有资格的，因为精英应该是有资格的，因为他们是临时性的，而不是临时性的，而不是临时性的，因为他们需要的是最低限度的，因为他们需要的是劳动这是一个不可否认的事实。两人或两人都有权在无教区区的地方受到惩罚。除了偶尔出于谨慎，不应因官员的过失而受到惩罚。知识产权不应被剥夺，不应被剥夺，不应被剥夺，不应被剥夺，不应被剥夺我们的劳动和生活是巨大的，我们的生活是微小的