我刚开始使用Sencha Touch 2.3。
我有一个NavigationView。 在它内部有一个由两个面板（flex：0）和一个tabpanel（flex：1）组成的View（布局：'vbox'）。视图应完全可滚动。
问题是，tabpanel的内容并不完全可见，也没有填满整个页面。
如果tabpanel的布局属性设置为“fit”，则内容显示正确，整个视图按预期滚动，但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
}
]
}
在'component-wrapper'内部，我动态创建并添加上述3个组件：
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: [
{
........
},
{
........
}
]
});
提前完成。
干杯
答案 0 :(得分：0)
删除“component-wrapper”面板。并在“view-athleteDetails”中添加这些动态面板。为了理解，试试这个：
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'
}]
}]
}
这适用于整个页面。
答案 1 :(得分：0)
Sencha在为vbox内的组件设置自动高度时遇到了困难。我建议你在切换标签时手动设置高度。请查看下面的activeitemchange听众和fixHeight函数：
Ext.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);
}
});