一個具有多個事件的自定義觸發器EXTJS

Question

我正在使用一個用戶界面，我正在尋找兩個搜索框來調用不同的事件。我想知道是否可以用多個事件實現一個觸發器。

下面是其onTriggerClick觸發的代碼：

Ext.define('Ext.ux.CustomTrigger', { 
    extend: 'Ext.form.field.Trigger', 
    alias: 'widget.customTrigger', 
    initComponent: function() { 
     var me = this; 
     me.triggerCls = 'x-form-search-trigger'; // native ExtJS class & icon 
     me.callParent(arguments); 
    }, 
    onTriggerClick: function(){ 
     alert('Hello'); 
    } 
}); 

Ext.define('DIN.view.DINView', { 
    extend: 'Ext.container.Container', 
    requires: [ 
     'Ext.grid.Panel' 
    ], 
    xtype: 'app-main', 

    items: [ 
     { 
      xtype: 'customTrigger', 
      fieldLabel: 'trigger1', 
      emptyText: 'trigger1', 
      margin: '5 5 5 5', 
      border: 'true', 
      textAlign: 'left', 
     }, 
     { 

      xtype: 'customTrigger', 
      fieldLabel: 'trigger2', 
      emptyText: 'trigger2', 
      margin: '5 5 5 5', 
      border: 'true', 
      textAlign: 'left', 
     }] 
}); 

我怎麼能有TRIGGER1火從觸發2不同的事件？

Answer 1

要有觸發2使用不同的處理程序比TRIGGER1，只是覆蓋它是這樣的：

Ext.application({ 
    name: 'Fiddle', 


    launch: function() { 
     var app = this; 
     Ext.define('Ext.ux.CustomTrigger', { 
      extend: 'Ext.form.field.Trigger', 
      alias: 'widget.customTrigger', 
      initComponent: function() { 
       var me = this; 
       me.triggerCls = 'x-form-search-trigger'; // native ExtJS class & icon 
       me.callParent(arguments); 
      }, 
      onTriggerClick: function() { 
       alert("Default Action"); 
      } 
     }); 

     Ext.define('DINView', { 
      extend: 'Ext.container.Container', 
      requires: ['Ext.grid.Panel'], 
      xtype: 'app-main', 

      items: [{ 
       xtype: 'customTrigger', 
       fieldLabel: 'trigger1', 
       emptyText: 'trigger1', 
       margin: '5 5 5 5', 
       border: 'true', 
       textAlign: 'left', 
      }, { 

       xtype: 'customTrigger', 
       fieldLabel: 'trigger2', 
       emptyText: 'trigger2', 
       margin: '5 5 5 5', 
       border: 'true', 
       textAlign: 'left', 
       onTriggerClick: function() { 
        alert("We'll override this one"); 
       } 
      }] 
     }); 

     Ext.create("DINView", { 
      renderTo: Ext.getBody() 
     }) 
    } 
}); 

當你定義Ext.ux.CustomTrigger您可以設置默認的設置和處理程序等，但你總是有壓倒一切的配置的選擇每個元素的基礎上。在我的Sencha Fiddle和上面的代碼中，您可以看到默認操作是顯示一條提示，說'默認操作'，但觸發器2我重新定義事件處理程序，以「我們將覆蓋這個」來調用alert。