Sencha touch 2 将按钮添加到选项卡面板

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

森查提琴

代码：

将按钮1添加到选项卡面板时，不会显示按钮。 为什么按钮1不显示

---

请帮助？

将代码片段放入主项，类似这样的内容

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

---

我希望这有帮助

将代码片段放入主项中，类似这样

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

---

我希望这有帮助

这里有一个快速的方法。我不确定还有别的办法

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}',
            }
        ]
    });
}

这是小提琴：

---

希望这有帮助，这里有一个快速的方法。我不确定还有别的办法

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}',
            }
        ]
    });
}

这是小提琴：

---

---

希望这有帮助

我想在所有Market&Fav图标附近的选项卡面板中添加按钮1。嘿，请注意，如果你想添加按钮，这不是工具栏。请看API文档。谢谢，我知道它不是一个工具栏，我想在这个选项卡栏中添加按钮。我不知道你是什么意思看看APIDocs@hekomobile不管它是否是工具栏。它都是HTML，所以实际上可以在选项卡栏中添加Ext.按钮，但这并不容易。Sencha只是没有在框架中实现任何东西。这个答案显然没有在工具栏中添加按钮@TDeBailleul答案确实在工具栏中添加了一个按钮。我想在所有Market&Fav图标附近的选项卡面板中添加按钮1。嘿，请注意，如果要添加按钮，这不是工具栏。请看API文档。谢谢，我知道它不是一个工具栏，我想在这个选项卡栏中添加按钮。我不知道你是什么意思看看APIDocs@hekomobile不管它是否是工具栏。它都是HTML，所以实际上可以在选项卡栏中添加Ext.按钮，但这并不容易。Sencha只是没有在框架中实现任何东西。这个答案显然没有在工具栏中添加按钮@Tdebaileul answer确实在工具栏中添加了一个按钮。我想在TabBar的左侧添加按钮，而不添加新的TabBar。添加此按钮不是本机方法，但它工作得很好，我想非常感谢您。只是有一点，如何设置按钮的样式与常规选项卡面板按钮的样式相同。添加一个类按钮并使用CSSWow播放！我也在寻找这个，并看到添加dockedItems的解决方案，但这对我不起作用。这个解决方案有效！我想在TabBar的左侧添加按钮，而不添加新的TabBar。添加此按钮不是本机方法，但它工作得很好，我想非常感谢你。只是有一点，如何设置按钮的样式与常规Tabbanel按钮的样式相同。在按钮上添加一个类并使用CSSWow！我也在寻找这个，并看到添加dockedItems的解决方案，但这对我不起作用。这个解决方案有效！