ExtJS：捕获事件后的控制器隐藏按钮

Question

我有三个面板，每个面板有三个按钮。当我按下按钮＆＃39; 1＆＃39;我想要其他按钮＆＃39; 1＆＃39;从每个面板隐藏。我是ExtJS的菜鸟，我不确定我应该如何编程Controller类。请帮忙。

这是视图类：

Ext.define('EventButtons.view.Main', {
extend: 'Ext.container.Container',
xtype: 'app-main',
viewModel: {
    type: 'main'
},

layout: {
    type: 'border'
},


items: [{
    region: 'center',
    xtype: 'tabpanel',
    items:[{
        title: 'Buttons',

        items: [{
                title: 'Table1',
                id:'panel1',
                xtype:'panel',
                bodyPadding: 10,  
                width: 350,
                items:[{
                     xtype: 'button',
                     text: '1',
                     id:'1',
                     name:'1',
                     width:80,
                     margin: '10 10 10 10',
                     listeners: {
                        click: function () {

                                this.fireEvent('Name', this.text);
                                alert(this.name);
                   },
                        Name: function(name) {
                                if(this.text==name){

                                    this.hide();
                                 }
                        }}
                }]


            },
            {
                title: 'Table2',
                id:'panel2',
                xtype:'panel',
                bodyPadding: 10, 
                width: 350,
                items:[{
                     xtype: 'button',
                     text: '1',
                     width:80,
                     margin: '10 10 10 10',
                },{
                     xtype: 'button',
                     text: '2',
                     width:80,
                     margin: '10 10 10 10',
                },{
                     xtype: 'button',
                     text: '3',
                     width:80,
                     margin: '10 10 10 10',
                }]


            },
            {
                title: 'Table3',
                id:'panel3',
                xtype:'panel',
                bodyPadding: 10, 
                width: 350,
                items:[{
                     xtype: 'button',
                     text: '1',
                     width:80,
                     margin: '10 10 10 10',
                },{
                     xtype: 'button',
                     text: '2',
                     width:80,
                     margin: '10 10 10 10',
                },{
                     xtype: 'button',
                     text: '3',
                     width:80,
                     margin: '10 10 10 10',
                }]


            },

        ],


    }]
}],

});

任何人都可以帮助我吗？

Answer 1

为了让你这样做，你需要为按钮添加至少一个cls，如button-1，button-2，button-3。为每个按钮指定一个指示符将帮助您使用Ext.ComponentQuery获取每个按钮。

Ext.define('EventButtons.view.Main', {
extend: 'Ext.container.Container',
xtype: 'app-main',
viewModel: {
    type: 'main'
},

layout: {
    type: 'border'
},


items: [{
    region: 'center',
    xtype: 'tabpanel',
    itemId: 'tab-panel-container',
    items:[{
        title: 'Buttons',

        items: [{
                title: 'Table1',
                id:'panel1',
                xtype:'panel',
                bodyPadding: 10,  
                width: 350,
                items:[{
                     xtype: 'button',
                     text: '1',
                     id:'1',
                     name:'1',
                     width:80,
                     margin: '10 10 10 10',
                     listeners: {
                        click: function () {

                                this.fireEvent('Name', this.text);
                                alert(this.name);
                   },
                        Name: function(name) {
                                if(this.text==name){

                                    this.hide();
                                 }
                        }}
                }]


            },
            {
                title: 'Table2',
                id:'panel2',
                xtype:'panel',
                bodyPadding: 10, 
                width: 350,
                items:[{
                     xtype: 'button',
                     text: '1',
                     width:80,
                     margin: '10 10 10 10',
                     cls: 'button-1'
                },{
                     xtype: 'button',
                     text: '2',
                     width:80,
                     margin: '10 10 10 10',
                     cls: 'button-2'
                },{
                     xtype: 'button',
                     text: '3',
                     width:80,
                     margin: '10 10 10 10',
                     cls: 'button-3'
                }]


            },
            {
                title: 'Table3',
                id:'panel3',
                xtype:'panel',
                bodyPadding: 10, 
                width: 350,
                items:[{
                     xtype: 'button',
                     text: '1',
                     width:80,
                     margin: '10 10 10 10',
                     cls: 'button-1'

                },{
                     xtype: 'button',
                     text: '2',
                     width:80,
                     margin: '10 10 10 10',
                     cls: 'button-2'
                },{
                     xtype: 'button',
                     text: '3',
                     width:80,
                     margin: '10 10 10 10',
                     cls: 'button-3'
                }]


            },

        ],


    }]
}],

});

在您的控制器中，创建一个按钮单击事件，并在此处查询其他按钮。

control: {

'#tab-panel-container button' : {
    click: function(buttonItSelf){
        var tabpanel = buttonItSelf.up('tabpanel'),
            buttonCls = "."+ buttonItSelf.getCls(),//assuming there's only one cls as of now
            otherButtons = tabpanel.query(buttonCls); // query all buttons with the same cls

            Ext.Array.each(otherButtons, function(key, button, arrayItSelf){
                if(button != buttonItSelf){
                    button.hide();
                }
            })
    }

}

}

我还没有测试过我的代码，这只是对你想要做的事情的粗略了解。