網上有例子介紹Extjs3帶清空功能的ComboBox或者TextField，例如：

http://chamcon.iteye.com/blog/1769427

http://leon1509.iteye.com/blog/413690

但是針對Extjs4的例子較少，我自己碰到這個問題後花了些時間研究，現在記錄下來做一個分享。

首先，Extjs4對於xtype:trigger的改動很大，原來Extjs3裡面是通過triggerConfig來進行配置的，例如

this.triggerConfig = {
            tag:'span', cls:'x-form-twin-triggers', cn:[
            {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger x-form-clear-trigger"},//新增的清除trigger按鈕
            {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger x-form " + this.triggerClass}
        ]};

但是Extjs4的xtype:trigger裡面根本沒有此項配置，我剛開始想通過檢視Extjs4的API尋找類似的配置項，結果沒有找到！

沒有辦法，只能看原始碼，通過原始碼分析，才最終解決了問題。

如下：

http://docs.sencha.com/extjs/4.2.0/source/Trigger.html#Ext-form-field-Trigger

getTriggerMarkup: function() {
        var me = this,
            i = 0,
            hideTrigger = (me.readOnly || me.hideTrigger),
            triggerCls,
            triggerBaseCls = me.triggerBaseCls,
            triggerConfigs = [],
            unselectableCls = Ext.dom.Element.unselectableCls,
            style = 'width:' + me.triggerWidth + 'px;' + (hideTrigger ? 'display:none;' : ''),
            cls = me.extraTriggerCls + ' ' + Ext.baseCSSPrefix + 'trigger-cell ' + unselectableCls;

        // TODO this trigger<n>Cls API design doesn't feel clean, especially where it butts up against the
        // single triggerCls config. Should rethink this, perhaps something more structured like a list of
        // trigger config objects that hold cls, handler, etc.
        // triggerCls is a synonym for trigger1Cls, so copy it.
	   //官方說明了目前該配置還設計得不完善，有待改進：this trigger<n>Cls API design doesn't feel clean
        if (!me.trigger1Cls) {
            me.trigger1Cls = me.triggerCls;
        }

        // Create as many trigger elements as we have trigger<n>Cls configs, but always at least one
        for (i = 0; (triggerCls = me['trigger' + (i + 1) + 'Cls']) || i < 1; i++) {
            triggerConfigs.push({
                tag: 'td',
                valign: 'top',
                cls: cls,
                style: style,
                cn: {
                    cls: [Ext.baseCSSPrefix + 'trigger-index-' + i, triggerBaseCls, triggerCls].join(' '),
                    role: 'button'
                }
            });
        }
        triggerConfigs[0].cn.cls += ' ' + triggerBaseCls + '-first';

        return Ext.DomHelper.markup(triggerConfigs);
    },
 

其中for迴圈那一段是關鍵，原來Extjs4是通過trigger1Cls、trigger2Cls……來依次新增的，實在是太意外了！難怪//TODO那段說明了目前該配置還設計得不完善，有待改進。

明白原理以後就簡單了，直接修改官網上的小示例：

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.form.field.Trigger

Ext.define('Ext.ux.CustomTrigger', {
    extend: 'Ext.form.field.Trigger',
    alias: 'widget.customtrigger',

    // override onTriggerClick
    onTriggerClick: function() {
        Ext.Msg.alert('Status', 'You clicked my trigger!');
    }
});

Ext.create('Ext.form.FormPanel', {
    title: 'Form with TriggerField',
    bodyPadding: 5,
    width: 350,
    renderTo: Ext.getBody(),
    items:[{
        xtype: 'customtrigger',
        fieldLabel: 'Sample Trigger',
        trigger1Cls:'x-form-clear-trigger',  
        trigger2Cls:'x-form-search-trigger', 
        emptyText: 'click the trigger'
    }]
});
 

官方Combobox例子：http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.form.field.ComboBox

新增清除按鈕的程式碼之後：

// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"AL", "name":"Alabama"},
        {"abbr":"AK", "name":"Alaska"},
        {"abbr":"AZ", "name":"Arizona"}
        //...
    ]
});

// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose State',
    store: states,
    queryMode: 'local',
    displayField: 'name',
    valueField: 'abbr',
    trigger1Cls:'x-form-clear-trigger',  
trigger2Cls:'x-form-arrow-trigger',
onTrigger1Click: function() {this.clearValue(); this.fireEvent('clear', this)},
onTrigger2Click: function() {this.onTriggerClick()},
    renderTo: Ext.getBody()
});