ExtJS button2 onClick exécuter click button1 par composant

Question

Comment exécuter le bouton cliqué1 lorsque je clique sur le bouton 2 dans les extensions du panneau de configuration. J'essaie:

btnFire.fireEvent('click', btnFire); 

, mais rien ne se passe. Voici mon bouton de code:

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

Merci pour l'aide

Answer 1

Vous écrivez un événement click séparé pour les deux boutons et pour atteindre ce premier besoin d'interroger la composante 1er bouton. Une fois que vous obtenez le composant du premier bouton dans le deuxième gestionnaire de boutons, vous devez déclencher le gestionnaire du premier bouton.

Le gestionnaire du second code de bouton devrait être comme ceci.

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

Ou Nous pouvons utiliser

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

J'ai créé un fiddle pour vous. Vérifiez s'il vous plaît. Faites-moi savoir si une préoccupation.

Answer 2

Voici une autre approche:

Il évite l'appel getCmp et ne pas utiliser ID codés en dur qui couple votre logique à ID spécifiques qui peuvent être source d'erreurs si vous prolongez votre application. En utilisant des ID codés en dur, vous risquez de rencontrer des conflits avec d'autres parties de votre application si vous attribuez deux fois le même ID. Cette approche utilise également le concept de ViewControllers et references qui est la manière proposée par Sencha aujourd'hui de configurer votre logique de vue, en particulier pour les grandes applications (voir 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() 
}); 

J'ai créé un violon pour démontrer cette approche Sencha Fiddle