如何将分段按钮集成到tabbar？

Question

我正在创建一个sencha touch应用程序，设计需要在标签栏中显示一个分段按钮。

使用sencha内置功能是否有一种简单的方法可以做到这一点，或者我必须自己创建（添加带有分段按钮作为项目的工具栏并创建所有控件以实际获得相同的东西）？

extend: 'Ext.TabPanel',
requires: [
    'Ext.SegmentedButton',
],
xtype: 'album',
id: 'album',
fullscreen: true,
config: {
    tabBar: {
        layout: {
            pack: 'center',
        },
        items: {
            xtype: 'segmentedbutton',
            allowDepress: false,

            listeners: {
                initialize: function() {
                    Ext.SegmentedButton.implement({
                        setActive: function(activeItem) {
                            this.setActiveItem(activeItem);
                        }
                    });
                }
            }
        }
    },
    autoDestroy: true,
    activeItem: 1,
    items: [
        {
            title: 'HIGHLIGHTS',
            xtype: 'highlightview',
            id: 'highlightView'
        },
        {
            title: 'KATEGORIEN',
            xtype: 'categoryView',
            id: 'categoryView',
        },
        {
            title: 'SUCHE',
            xtype: 'searchView',
            id: 'searchView',
        }
    ],
}

这就是我到目前为止所尝试的内容。听众在那里绕过[Object] Object has no method 'setActive'的错误，但不会导致我希望它拥有的行为。

Answer 1

//take a tap panel and inside the tap panel create panel as a xtype
//give item id to each button in segmented button to create listener and later on assign a //function to it


extend: 'Ext.TabPanel',

requires: [

    'Ext.SegmentedButton'

],

xtype: 'album',

id: 'album',

    enter code here`enter code here`

fullscreen: true,

    config: {
    cls:[
            'styles'
        ],
        scrollable: 'vertical',

        items: [


            {
                xtype: 'panel',
                title: 'Close Case',

                items: [

            {
                        xtype: 'segmentedbutton',
                        allowDepress: true,
                        height: 50,
                        items: [
                            {
                                text: 'Option 1',
                                pressed: true,
                                handler: function() {
                                console.log("Picked #1");
                                alert("foo");
                                itemId: "newButton11"
                                }
                            },
                            {
                                text: 'Option 2',
                                handler: function() {
                                alert("foo");


                                }
                            },
                            {
                                text: 'Option 3',
                                handler: function() {
                                alert("foo");
                                }
                            }
                        ]
                    }
                ]
            }

        ],

        listeners: [

        {

            delegate: "#newButton",
            event: "tap",
            fn: "onNewButtonTap"
        }
    ]

    },

onNewButtonTap: function () {
        //write your function here and it will work
    }




//This is working for me just let me know if it works for you.