ExtJS button2 onClick execute click button1 by component

Question

How to execute clicked button1 when I click button 2 in formpanel extjs. I try :

btnFire.fireEvent('click', btnFire);

but nothing happen. Here my code button :

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

Thanks for help

Answer 1

You write a separate click event for both the buttons and then to achieve this first need to query the 1st button component.

for that var cc = Ext.ComponentQuery.query('button'); Once you get the component of the first button in second button handler then you need to fire handler of the first button.

Handler of second button code should be like this.

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

Or We can use

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

I created a fiddle for you. Please check. Let me know if any concern.

Answer 2

Here is another approach:

It avoids the getCmp call and does not use hard coded IDs which couples your logic to specific IDs which may be error prone if you extend your application. By using hard coded IDs you may run in conflicts with other parts of your application if you assign the same ID twice.

Additional this approach uses the concept of ViewControllers and references which is the proposed way by Sencha nowadays to set up your view logic especially for large applications (see 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()
});

I created a fiddle to demonstrate this approach Sencha Fiddle