Question

我正在尝试在面板中添加一个tabpanel作为项目，但它无法按预期工作。

我已将tabpanel定义为单独的视图，如下所示。

Ext.define("WU.view.WUTabPanel", {
    extend: "Ext.tab.Panel",
    alias: "widget.wuTabPanel",
    config: {
             tabBar: {
                    docked: 'bottom'
                },
                 items: [

                    {
                      title: 'Home',
                      iconCls: 'home',
                      html: 'Home Screen',
                    },
                    {
                        title: 'Send Money',
                        iconCls: 'favorites',
                        html: 'Contact Screen',

                    }
                    ]

        },

});

这是我的主视图，我试图在Panel中添加tabPanel。

Ext.define('WU.view.WUHomePage', {
    extend : 'Ext.Panel',
    requires : [ 'Ext.Toolbar', 'Ext.TitleBar', 'Ext.dataview.List', 'Ext.Ajax', 'Ext.data.proxy.Ajax' ],
    xtype : 'homePage',
    alias : 'widget.wuHomePageView',

    config : {
        fullscreen : true,
        title : 'MainMenu',
        // iconCls : 'mainMenuhome',
        disabledCls : 'mainMenuhome',
        items : [
                {
                    xtype : 'titlebar',
                    title:'Main Menu',
                    items : [ {
                        text : 'Back',
                        ui:'back',
                        id : 'homePageBack',
                        align : 'left',
                        handler : function(btn) {
                            console.log('HomePaga  >> Back to Login');
                            this.up('homePage').fireEvent('backButtonCommand', this,'homePage');
                        }
                    } ]
                },
                {
                    xtype : 'list',
                    id : 'mainList',
                    title : 'Sample',
                    height : '100%',
                },
                    itemTpl : '<div class = mainList>'
                             '<div class = listArrowImage><img class= mArrowImage src={arrow}></img></div>'
                        </div>',

                }, 
                {
                    xtype: 'wuTabPanel',
                }, 
                ],

    },
});

当渲染主页时，标签栏未出现在底部，并留下空心空间。

配置有问题吗？关于如何实现这一部分的任何更好的想法？在我的申请中，有7-8个视图，底部都有相同的tabbar。

感谢。

Answer 1

您似乎试图将标题栏，高度100％列表和tabpanel放入一个全屏组件中。标题栏很好我确定（如果它是一个停靠的工具栏），但是你的列表正在尝试占用所有高度并且不为tabpanel留下任何高度。请记住，tabpanel不是tabbar，它是两者。如果您希望底栏控制所有主视图，请将列表设置为tabpanel项之一。

Sencha Touch 2：无法将tabpanel添加为面板中的项目

1 个答案: