How to integrate a segmentedbutton into a tabbar?

Question

I'm creating a sencha touch app and the design requires a segmented button in the tab bar.

Is there an easy way to do this with sencha built-in features or do I have to create that by myself (add a toolbar with the segmented button as an item and create all the controls to actually get the same thing)?

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

That's what I tried so far. the listener is there to get around the error of [Object] Object has no method 'setActive', but doesn't result in the behaviour I'd like it to have.

You are going to need to add a segmented button as an item to the tab bar. — blessanm86, Sep 18 '12 at 00:15
Then the framework complains, that there's no method setActive. For segmentedbuttons this method is called setActiveItem — wiseveri, Sep 18 '12 at 10:22

Saurabh · Accepted Answer · 2012-09-24T12:22:33.427

//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.

enter image description here

How to integrate a segmentedbutton into a tabbar?

1 Answers1