Extjs Sencha Touch2:工具栏内的分段按钮侦听器不工作

您好，我是Sencha touch2的新手，我在容器中的工具栏内有分段按钮和2个普通按钮，布局为“卡”。视图在分段按钮点击时不会改变，我可以在任何分段按钮点击时看到相同的视图。但如果我把分段按钮分开放置（在工具栏外面），它就可以正常工作了。 以下是我的看法：

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'
            }
        ]
    }
});

这是我的控制器：

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');
    },
});

---

有人能帮我吗？谢谢。

如果仔细查看，getParent（）方法将返回segmentedButton的父级，在本例中，它是工具栏。：）

您可以简单地使用：

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

此外，如果要查看对象内容，请使用，而不是+

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