Sencha Touch - 选项卡面板布局

发布于 2024-12-05 19:03:52 字数 455 浏览 4 评论 0 原文

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

在此处输入图像描述

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

预期布局： http://dev.sencha.com/deploy/touch/examples/厨房水槽/。我认为源代码并不完整，只有 tabPanel 本身。

请帮忙。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

﹂绝世的画 2024-12-12 19:03:52

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

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

例如，为了将文本“Home”置于工具栏标题下方的中心，我将第一个选项卡面板项更改为

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

另外选项卡面板应该只是主要的视口面板，而不是停靠项。这也打乱了布局。

Usually to do that sort of layout I've had to nest panels and use empty panels with the flex attribute set to 1.

I adjusted your code to show what I mean http://jsfiddle.net/r9c2M/

For example to center the text 'Home' underneath the toolbar title I changed the first tabpanel item to

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

Also the tabpanel should just be an item of the main viewport panel, not a dockedItem. That was messing up the layout too.

回复收藏 0 原文

~没有更多了~