Sencha Touch2: segmented button listener inside toolbar not working

Question

Hi am new to Sencha touch2, I have segmented button and 2 normal buttons inside toolbar in Container with layout 'card'. the view is not getting changed on segemnted button tap and am able to see same view on any segmented button tap. But if i place segmented button seperately(outside of toolbar) its working fine. here is my View:

Ext.define('Test.view.SegementedDemo', {
    extend: 'Ext.Container',
    xtype: 'carddemo',
    requires:['Ext.dataview.List','Ext.SegmentedButton'],
    config:{
        layout:{
            type:'card'
        },
        items:[
            {
                xtype:'toolbar',
                docked: 'top',

                items:[
                    {
                        xtype:'spacer'
                    },

                    {
                        xtype:'segmentedbutton',
                        id : 'segBtnId',
                        items: [{
                            text: 'First', pressed: true
                        }, {
                            text: 'Second'
                        }, {
                            text: 'Third'
                       }]
                    },
                    {
                        xtype:'spacer'
                    },
                    {
                        text:'Refresh',
                        ui:'action',
                        action:'backRefresh'
                    },
                    {
                        text:'Logout',
                        ui:'action',
                        action:'logoutBtn'
                    }
                ]
            },
            {
                xtype: 'component', itemId: 'First',
                html: 'First component', style: 'background-color: pink'
            }, {
                xtype: 'component', itemId: 'Second',
                html: 'Second component', style: 'background-color: lightgray'
            }, {
                xtype: 'component', itemId: 'Third',
                html: 'Third component', style: 'background-color: cyan'
            }
        ]
    }
});

Here is my Controller:

Ext.define('Test.controller.Main', {
    extend : 'Ext.app.Controller',
    requires : [ 'Test.view.SegementedDemo'],
    config : {
        refs : {
            refreshButton : 'button[action=backRefresh]',
            logoutButton : 'button[action=logoutBtn]',
                    segBtnId : "#segBtnId"
        },
        control : {
            refreshButton : {
                tap : 'handleRefresh'
            },
            logoutButton : {
                tap : 'handleLogout'
            },
                        segBtnId : {
                               toggle : "tapHandler"
                                   }

        }
    },
   tapHandler : function (segmentedbutton, button, isPressed, eOpts) { 

        var tappedBtn =button.getText();
        console.log('tapHandler+++++++++++'+tappedBtn);
        var container = segmentedbutton.getParent();
        var txt = button.getText()
        console.log('container : '+container);
        var selectedComponent = container.getComponent
            (button.getText());
        console.log('selectedComponent: '+selectedComponent);
        container.setActiveItem(selectedComponent);

       /*console O/p:
        tapHandler+++++++++++First
        container : [object Object]
        selectedComponent: undefined*/
        },
handleRefresh : function() {
    console.log('Refresh pressed');
    },
handleLogout : function() {
    console.log('Logout pressed');
    },
});

Can anyone please help me? Thanks.

Malay Shah Malay Shah · Accepted Answer · 2013-04-04T09:04:51

If you look carefully, the getParent() method returns the parent of the segmentedButton, which is the Toolbar in this case. :)

You can simply use:

segmentedButton.getParent().getParent(); //segButton->toolbar->container

Also, if you want to look at the object content use , instead of +

console.log('container : ',container);

Sencha Touch2: segmented button listener inside toolbar not working

1 Answers