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

UDID · Answer 1 · 2016-11-15T07:01:41.467

2

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.

edited Nov 15 '16 at 07:01

answered Nov 15 '16 at 05:34

UDID

2,350
3
16
31

`Ext.getCmp` would be much more efficient than the CQ loop. – Evan Trimboli Nov 15 '16 at 06:56
@EvanTrimboli Ya correct. I updated my solution. Thanks for suggestion. – UDID Nov 15 '16 at 07:02
Thanks mate, I use handler with getCmp and work like charm – darkcosplay Nov 15 '16 at 07:28

oberbics · Answer 2 · 2016-11-15T11:17:30.507

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

`getCmp` is not slow, it's a lookup in a map so it's super cheap, but the other parts are correct. Your solution is much better, assuming the OP has their code setup in such a way. — Evan Trimboli, Nov 15 '16 at 10:49
@Evan: You are right regarding the speed of `getCmp` (I had `up` and `down` in mind which traverses the DOM tree as far as i know). I removed that part of the answer. But as others said `getCmp` should not be used in production ready code (see http://stackoverflow.com/questions/11872261/up-and-down-versus-ext-getcmp) — oberbics, Nov 15 '16 at 11:01
There are times when it's useful, I wouldn't say never use it. — Evan Trimboli, Nov 15 '16 at 11:08
yes, This solution is looks bit optimal. When I was preparing I could'nt think for `lookupReference` — UDID, Nov 15 '16 at 11:20

ExtJS button2 onClick execute click button1 by component

2 Answers2