2

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

煎茶小提琴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 回答