Question

我想在Sencha Touch 2中将常规Sencha按钮添加到TabPanel

Sencha Fiddle 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没有显示？

请帮帮忙？

Answer 1

这是一种快速的方法。我不确定还有另一种方式......

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

希望这有帮助

Answer 2

将代码段放入Home项目，类似这样，

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

enter image description here

我希望这会有所帮助。：）

向TabPanel添加按钮

2 个答案: