如何将细分按钮集成到标签栏中？

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'的错误[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.