Question

你是Sencha touch2的新手，我在Container的工具栏里面有分段按钮和2个普通按钮，带有布局'卡'。在segemnted按钮点击视图没有改变，并且能够在任何分段按钮点击上看到相同的视图。但如果我单独放置分段按钮（在工具栏之外）它的工作正常。这是我的观点：

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

任何人都可以帮助我吗？感谢。

Answer 1

如果仔细观察，getParent（）方法将返回segmentedButton的父级，在这种情况下是工具栏。：）

您可以简单地使用：

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

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

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

Sencha Touch2：工具栏内的分段按钮监听器无法正常工作

1 个答案: