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

您为两个按钮编写单独的单击事件，然后首先需要查询第一个按钮组件。

表示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调用，并且不使用将您的逻辑与特定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

ExtJS button2 onClick按组件执行click button1

2 个答案: