sencha-touch - Sencha Touch - 标签面板布局

Question

请看演示：http: //jsfiddle.net/JeaffreyGilbert/NGrry/1/

如何使选项卡面板的内容填充中心区域？标题应位于工具栏下方的顶部。

预期布局：http ://dev.sencha.com/deploy/touch/examples/kitchensink/ 。我认为 Source 不完整，只有 tabPanel 本身。

请帮忙。

Answer 1

通常要进行这种布局，我必须嵌套面板并使用 flex 属性设置为 1 的空面板。

我调整了您的代码以显示我的意思http://jsfiddle.net/r9c2M/

例如，为了使工具栏标题下方的文本“主页”居中，我将第一个选项卡面板项更改为

{
    title: 'Home',
    layout: 'vbox',
    items: [
        {layout: 'hbox',
         items: [
            {flex: 1},
            {html: '<h2>Home</h2>'},
            {flex: 1}
        ]},
        {flex: 1}
    ],
    iconCls: 'home',
    cls: 'card card1'}

此外，标签面板应该只是主视口面板的一个项目，而不是停靠项目。那也弄乱了布局。