1

嗨，我是 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');
    },
});

谁能帮帮我吗？谢谢。

4

1 回答 1

2

如果你仔细看，getParent() 方法返回segmentedButton 的父级，在本例中就是Toolbar。:)

您可以简单地使用：

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

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

console.log('container : ',container);
于 2013-04-04T09:04:51.760 回答