2

Sencha Touch 2 の TabPanel に通常の Sencha ボタンを追加したい

煎茶フィドルhttp://www.senchafiddle.com/#tRd76

コード：

//define the application
Ext.application({

    launch: function() {
        addTabPanel();

    }
});

function addTabPanel(){
     Ext.Viewport.add({
        xtype: 'tabpanel',
        tabBarPosition: 'bottom',
        fullscreen: true,
        tabBar:{
           dockedItems:[{
               xtype: 'button',
               ui: 'round', 
               text: 'Button1',
               dock: 'left',
               handler: function(){
                   alert('Botton1 Working Now');    
               }
           }]
        },

        items:[
            {
            title: 'All Market',
            iconCls: 'home',
            html: 'Home',

        },

        {
                title: 'Favorite',
                iconCls: 'favorites',
                html:'Favorite',
                itemTpl: '{mwRow}',
            }
        ]
    });
}

Button1 を TabPanel に追加すると、ボタンが表示されません。Button1 が表示されないのはなぜですか?

助けてください？

4

2 に答える 2

3

これを行う簡単な方法は次のとおりです。別の方法があるかわかりません...

Ext.application({

    launch: function() {
        addTabPanel();
        var tp = Ext.ComponentQuery.query('tabpanel')[0];
        var btn = Ext.create('Ext.Button',{
            width:80,
            height:30,
            text:'BTN',
            style:'position:absolute;top:auto;bottom:13px;left:5px;z-index:10;'
        });
        tp.element.insertFirst(btn.element);

    }
});

function addTabPanel(){
    Ext.Viewport.add({
        xtype: 'tabpanel',
        tabBarPosition: 'bottom',
        fullscreen: true,
        tabBar:{
            dockedItems:[{
                xtype: 'button',
                ui: 'round', 
                text: 'Button1',
                dock: 'left',
                handler: function(){
                    alert('Botton1 Working Now');    
                }
            }]
        },

        items:[
            {
                title: 'All Market',
                iconCls: 'home',
                html: 'Home',

            },

            {
                title: 'Favorite',
                iconCls: 'favorites',
                html:'Favorite',
                itemTpl: '{mwRow}',
            }
        ]
    });
}

これがフィドルです：http ：//www.senchafiddle.com/#HvTek

お役に立てれば

于 2012-07-11T14:16:55.230 に答える
-3

コード スニペットを Home アイテムに入れます。

....
items:[
        {
        title: 'All Market',
        iconCls: 'home',
        html: 'Home',
        items: [
          {
           xtype: 'button',
           ui: 'round', 
           text: 'Button1',
           dock: 'left',
           handler: function(){
               alert('Botton1 Working Now');    
           }
          }
        ],
},
...

ここに画像の説明を入力

これが役立つことを願っています。:)

于 2012-07-11T13:29:31.613 に答える