ExtJS: кнопка скрытия контроллера после захвата события

Question

У меня есть три панели с тремя кнопками каждый. Когда я нажимаю кнопку «1», я хочу, чтобы другие кнопки «1» с каждой панели скрывались. Я noob с 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 для ваших кнопок, таких как кнопка-1, кнопка-2, кнопка-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(); 
       } 
      }) 
    } 

} 

} 

Я не тестировал свой код, это всего лишь приблизительное представление о том, что вы хотите сделать.