0

パネルのアイテムとしてタブパネルを追加しようとしていますが、期待どおりに機能しません。

以下のように、タブパネルを別のビューとして定義しました。

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',

                    }
                    ]

        },

});

これは、パネル内に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',
                }, 
                ],

    },
});

mainPageがレンダリングされると、タブバーは下部に表示されず、下部に中空のスペースが残ります。

設定に問題はありますか？この部分を達成する方法についてのより良いアイデアはありますか？私のアプリケーションでは、7〜8個のビューがあり、すべて下部に同じタブバーがあります。

ありがとう。

4

1 に答える 1

1

タイトルバー、高さ 100% のリスト、およびタブパネルを 1 つのフルスクリーン コンポーネントに配置しようとしているようです。タイトルバーは問題ありませんが (ドッキングされたツールバーの場合)、リストはすべての高さを占めようとしており、タブパネルには何も残していません。タブパネルはタブバーではなく、両方であることに注意してください。下部のバーですべてのメイン ビューを制御する場合は、リストをタブパネル項目の 1 つとして設定します。

于 2013-02-21T05:15:41.113 に答える