ExtJS button2 onClick按組件執行click button1

Question

當我點擊formpanel extjs中的按鈕2時，如何執行單擊的按鈕1。 我嘗試：

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

您為這兩個按鈕編寫了單獨的單擊事件，然后首先需要查詢第一個按鈕組件。

for 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();

我為你創造了一個小提琴 。 請檢查。 如果有任何疑慮，請告訴我。

Answer 2

這是另一種方法：

它避免了getCmp調用，並且不使用將您的邏輯耦合到特定ID的硬編碼ID，如果您擴展應用程序，這些ID可能容易出錯。 通過使用硬編碼ID，如果您分配兩次相同的ID，則可能會與應用程序的其他部分發生沖突。

此外，此方法使用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