ExtJS button2 onClick выполнить кнопку click1 по компоненту

Question

Как выполнить нажатую кнопку1, когда я нажимаю кнопку 2 в extpan формы formpanel. Стараюсь:

btnFire.fireEvent('click', btnFire); 

, но ничего не произошло. Вот мой код кнопки:

xtype: 'button', 
text: 'Hitung', 
itemId: 'sumBtn', 
id: 'sumBtn', 
name: 'sumBtn', 
iconCls: '', 
listeners : { 
    'render' : function() { 
     Ext.get('sumBtn').on('click', function(e) { 
    // Here is button1 component   
    var btnFire = Ext.getCmp("ttransinboundawb_module_real_general_form_18_btn_sumBillBtn"); 
     // do execute button1 when button2 clicked  
     btnFire.fireEvent('click', btnFire); 
     }); 
    } 
} 

Спасибо за помощь

Answer 1

Вы пишете отдельное событие щелчка для обеих кнопок, а затем для достижения этой первой необходимости запроса 1-й компонент кнопки.

для этого var cc = Ext.ComponentQuery.query('button'); После того, как вы получите компонент первой кнопки во втором обработчике кнопок, вам необходимо запустить обработчик первой кнопки.

Обработчик кода второй кнопки должен быть таким.

{ 
     xtype: 'button', 
     text: 'Button 2', 
     id : 'bt2', 
     handler: function() { 
      var cc = Ext.ComponentQuery.query('button'); 
      for(var i=0; i<cc.length; i++){ 
       if(cc[i].id == 'bt1'){ 
        cc[i].handler(); 
       } 
      } 
      alert('You clicked the button2'); 
     } 
    } 

Или мы можем использовать

var cc = Ext.getCmp('bt1'); 
    cc.handler(); 

Я создал fiddle для вас. Пожалуйста, проверьте. Дайте мне знать, если вы беспокоитесь.

Answer 2

Вот другой подход:

Это позволяет избежать getCmp вызова и не использует жестко закодированные идентификаторы, какие пары вашу логику для конкретных идентификаторов, которые могут быть подвержены ошибкам, если вы расширяете ваше приложение. Используя жестко закодированные идентификаторы, вы можете столкнуться с конфликтами с другими частями вашего приложения, если дважды назначить один и тот же идентификатор.

Дополнительный подход использует концепцию ViewControllers и references, которая является предлагаемым способом Sencha в настоящее время для настройки вашей логики просмотра, особенно для крупных приложений (см. ViewControllers).

Ext.define('MyApp.view.foo.FilterController', { 
    extend: 'Ext.app.ViewController', 
    alias: 'controller.FilterController', 

    bt1Event: function() { 
     alert('bt1 clicked'); 
    }, 

    bt2Event: function() { 
     alert('bt2 clicked'); 
     // get a reference to the first button 
     var bt1 = this.lookupReference('bt1'); 
     bt1.fireEvent('click', bt1); 
    } 
}); 

Ext.define('MyApp.view.foo.Foo', { 
    extend: 'Ext.panel.Panel', 
    bodyPadding: 5, // Don't want content to crunch against the borders 
    width: 300, 
    title: 'Filters', 
    controller : 'FilterController', 
    defaults : { 
     xtype : 'button' 
    }, 
    items: [{ 
     text: 'Button 1', 
     reference: 'bt1', 
     listeners : { 
      click: 'bt1Event' // handled by view controller 
     } 
    }, { 
     text: 'Button 2', 
     reference: 'bt2', 
     listeners : { 
      click: 'bt2Event' // handled by view controller 
     } 
    }] 
}); 

Ext.create('MyApp.view.foo.Foo', { 
    renderTo: Ext.getBody() 
}); 

Я создал скрипку, чтобы продемонстрировать этот подход Sencha Fiddle