sencha-touch - 如何将分段按钮集成到标签栏？

Question

我正在创建一个煎茶触摸应用程序，该设计需要标签栏中的分段按钮。

有没有一种简单的方法可以使用 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.