ExtJS button2 onClick 按组件执行click button1

Posted 2023-02-26

【中文标题】ExtJS button2 onClick 按组件执行click button1

【英文标题】：ExtJS button2 onClick execute click button1 by component

【发布时间】：2016-11-15 02:11:55

【问题描述】：

当我在 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);
        );
    

感谢您的帮助

【参考方案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。请检查。让我知道是否有任何问题。

【讨论】：

Ext.getCmp 会比 CQ 循环更有效率。

@EvanTrimboli 没错。我更新了我的解决方案。感谢您的建议。

谢谢伙计，我将处理程序与 getCmp 一起使用，并像魅力一样工作

【参考方案2】：

这是另一种方法：

它避免了 getCmp 调用，并且不使用硬编码的 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

【讨论】：

getCmp 并不慢，它是在地图中查找所以它超级便宜，但其他部分是正确的。假设 OP 以这种方式设置代码，您的解决方案会好得多。

@Evan：关于getCmp 的速度，您是对的（据我所知，我想到了up 和down，它遍历了DOM 树）。我删除了答案的那部分。但正如其他人所说，getCmp 不应在生产就绪代码中使用（请参阅***.com/questions/11872261/…）

有些时候它很有用，我不会说永远不要使用它。

是的，这个解决方案看起来有点优化。当我准备时，我无法想到lookupReference