    /**
     * @class Ext.form.field.Trigger
     * @extends Ext.form.field.Text
     * <p>Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
     * The trigger has no default action, so you must assign a function to implement the trigger click handler by
     * overriding {@link #onTriggerClick}. You can create a Trigger field directly, as it renders exactly like a combobox
     * for which you can provide a custom implementation.
     * {@img Ext.form.field.Trigger/Ext.form.field.Trigger.png Ext.form.field.Trigger component}
     * For example:</p>
     * <pre><code>
    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',
            emptyText: 'click the trigger',
        }]
    });
    </code></pre>
     *
     * <p>However, in general you will most likely want to use Trigger as the base class for a reusable component.
     * {@link Ext.form.field.Date} and {@link Ext.form.field.ComboBox} are perfect examples of this.</p>
     *
     * @constructor
     * Create a new Trigger field.
     * @param {Object} config Configuration options (valid {@Ext.form.field.Text} config options will also be applied
     * to the base Text field)
     * @xtype triggerfield
     */
    Ext.define('Ext.form.field.Trigger', {
        extend:'Ext.form.field.Text',
        alias: ['widget.triggerfield', 'widget.trigger'],
        requires: ['Ext.core.DomHelper', 'Ext.util.ClickRepeater', 'Ext.layout.component.field.Trigger'],
        alternateClassName: ['Ext.form.TriggerField', 'Ext.form.TwinTriggerField', 'Ext.form.Trigger'],

        fieldSubTpl: [
            '<input id="{id}" type="{type}" ',
                '<tpl if="name">name="{name}" </tpl>',
                '<tpl if="size">size="{size}" </tpl>',
                '<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>',
                'class="{fieldCls} {typeCls}" autocomplete="off" />',
            '<div class="{triggerWrapCls}" role="presentation">',
                '{triggerEl}',
                '<div class="{clearCls}" role="presentation"></div>',
            '</div>',
            {
                compiled: true,
                disableFormats: true
            }
        ],

        /**
         * @cfg {String} triggerCls
         * An additional CSS class used to style the trigger button.  The trigger will always get the
         * {@link #triggerBaseCls} by default and <tt>triggerCls</tt> will be <b>appended</b> if specified.
         * Defaults to undefined.
         */

        /**
         * @cfg {String} triggerBaseCls
         * The base CSS class that is always added to the trigger button. The {@link #triggerCls} will be
         * appended in addition to this class.
         */
        triggerBaseCls: Ext.baseCSSPrefix + 'form-trigger',

        /**
         * @cfg {String} triggerWrapCls
         * The CSS class that is added to the div wrapping the trigger button(s).
         */
        triggerWrapCls: Ext.baseCSSPrefix + 'form-trigger-wrap',

        /**
         * @cfg {Boolean} hideTrigger <tt>true</tt> to hide the trigger element and display only the base
         * text field (defaults to <tt>false</tt>)
         */
        hideTrigger: false,

        /**
         * @cfg {Boolean} editable <tt>false</tt> to prevent the user from typing text directly into the field;
         * the field can only have its value set via an action invoked by the trigger. (defaults to <tt>true</tt>).
         */
        editable: true,

        /**
         * @cfg {Boolean} readOnly <tt>true</tt> to prevent the user from changing the field, and
         * hides the trigger.  Supercedes the editable and hideTrigger options if the value is true.
         * (defaults to <tt>false</tt>)
         */
        readOnly: false,

        /**
         * @cfg {Boolean} selectOnFocus <tt>true</tt> to select any existing text in the field immediately on focus.
         * Only applies when <tt>{@link #editable editable} = true</tt> (defaults to <tt>false</tt>).
         */

        /**
         * @cfg {Boolean} repeatTriggerClick <tt>true</tt> to attach a {@link Ext.util.ClickRepeater click repeater}
         * to the trigger. Defaults to <tt>false</tt>.
         */
        repeatTriggerClick: false,

        /**
         * @hide
         * @method autoSize
         */
        autoSize: Ext.emptyFn,
        // private
        monitorTab: true,
        // private
        mimicing: false,
        // private
        triggerIndexRe: /trigger-index-(\d+)/,

        componentLayout: 'triggerfield',

        initComponent: function() {
            this.wrapFocusCls = this.triggerWrapCls + '-focus';
            this.callParent(arguments);
        },

        // private
        onRender: function(ct, position) {
            var me = this,
                triggerCls,
                triggerBaseCls = me.triggerBaseCls,
                triggerWrapCls = me.triggerWrapCls,
                triggerConfigs = [],
                i;

            // triggerCls is a synonym for trigger1Cls, so copy it.
            // 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.
            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({
                    cls: [Ext.baseCSSPrefix + 'trigger-index-' + i, triggerBaseCls, triggerCls].join(' '),
                    role: 'button'
                });
            }
            triggerConfigs[i - 1].cls += ' ' + triggerBaseCls + '-last';

            Ext.applyIf(me.renderSelectors, {
                /**
                 * @property triggerWrap
                 * @type Ext.core.Element
                 * A reference to the div element wrapping the trigger button(s). Only set after the field has been rendered.
                 */
                triggerWrap: '.' + triggerWrapCls
            });
            Ext.applyIf(me.subTplData, {
                triggerWrapCls: triggerWrapCls,
                triggerEl: Ext.core.DomHelper.markup(triggerConfigs),
                clearCls: me.clearCls
            });

            me.callParent(arguments);

            /**
             * @property triggerEl
             * @type Ext.CompositeElement
             * A composite of all the trigger button elements. Only set after the field has been rendered.
             */
            me.triggerEl = Ext.select('.' + triggerBaseCls, true, me.triggerWrap.dom);

            me.doc = Ext.isIE ? Ext.getBody() : Ext.getDoc();
            me.initTrigger();
        },

        onEnable: function() {
            this.callParent();
            this.triggerWrap.unmask();
        },

        onDisable: function() {
            this.callParent();
            this.triggerWrap.mask();
        },

        afterRender: function() {
            this.callParent();
            this.updateEditState();
        },

        updateEditState: function() {
            var me = this,
                inputEl = me.inputEl,
                triggerWrap = me.triggerWrap,
                noeditCls = Ext.baseCSSPrefix + 'trigger-noedit',
                displayed,
                readOnly;

            if (me.rendered) {
                if (me.readOnly) {
                    inputEl.addCls(noeditCls);
                    readOnly = true;
                    displayed = false;
                } else {
                    if (me.editable) {
                        inputEl.removeCls(noeditCls);
                        readOnly = false;
                    } else {
                        inputEl.addCls(noeditCls);
                        readOnly = true;
                    }
                    displayed = !me.hideTrigger;
                }

                triggerWrap.setDisplayed(displayed);
                inputEl.dom.readOnly = readOnly;
                me.doComponentLayout();
            }
        },

        /**
         * Get the total width of the trigger button area. Only useful after the field has been rendered.
         * @return {Number} The trigger width
         */
        getTriggerWidth: function() {
            var me = this,
                triggerWrap = me.triggerWrap,
                totalTriggerWidth = 0;
            if (triggerWrap && !me.hideTrigger && !me.readOnly) {
                me.triggerEl.each(function(trigger) {
                    totalTriggerWidth += trigger.getWidth();
                });
                totalTriggerWidth += me.triggerWrap.getFrameWidth('lr');
            }
            return totalTriggerWidth;
        },

        setHideTrigger: function(hideTrigger) {
            if (hideTrigger != this.hideTrigger) {
                this.hideTrigger = hideTrigger;
                this.updateEditState();
            }
        },

        /**
         * @param {Boolean} editable True to allow the user to directly edit the field text
         * Allow or prevent the user from directly editing the field text.  If false is passed,
         * the user will only be able to modify the field using the trigger.  Will also add
         * a click event to the text field which will call the trigger. This method
         * is the runtime equivalent of setting the 'editable' config option at config time.
         */
        setEditable: function(editable) {
            if (editable != this.editable) {
                this.editable = editable;
                this.updateEditState();
            }
        },

        /**
         * @param {Boolean} readOnly True to prevent the user changing the field and explicitly
         * hide the trigger.
         * Setting this to true will superceed settings editable and hideTrigger.
         * Setting this to false will defer back to editable and hideTrigger. This method
         * is the runtime equivalent of setting the 'readOnly' config option at config time.
         */
        setReadOnly: function(readOnly) {
            if (readOnly != this.readOnly) {
                this.readOnly = readOnly;
                this.updateEditState();
            }
        },

        // private
        initTrigger: function() {
            var me = this,
                triggerWrap = me.triggerWrap,
                triggerEl = me.triggerEl;

            if (me.repeatTriggerClick) {
                me.triggerRepeater = Ext.create('Ext.util.ClickRepeater', triggerWrap, {
                    preventDefault: true,
                    handler: function(cr, e) {
                        me.onTriggerWrapClick(e);
                    }
                });
            } else {
                me.mon(me.triggerWrap, 'click', me.onTriggerWrapClick, me);
            }

            triggerEl.addClsOnOver(me.triggerBaseCls + '-over');
            triggerEl.each(function(el, c, i) {
                el.addClsOnOver(me['trigger' + (i + 1) + 'Cls'] + '-over');
            });
            triggerEl.addClsOnClick(me.triggerBaseCls + '-click');
            triggerEl.each(function(el, c, i) {
                el.addClsOnClick(me['trigger' + (i + 1) + 'Cls'] + '-click');
            });
        },

        // private
        onDestroy: function() {
            var me = this;
            Ext.destroyMembers(me, 'triggerRepeater', 'triggerWrap', 'triggerEl');
            delete me.doc;
            me.callParent();
        },

        // private
        onFocus: function() {
            var me = this;
            this.callParent();
            if (!me.mimicing) {
                me.bodyEl.addCls(me.wrapFocusCls);
                me.mimicing = true;
                me.mon(me.doc, 'mousedown', me.mimicBlur, me, {
                    delay: 10
                });
                if (me.monitorTab) {
                    me.on('specialkey', me.checkTab, me);
                }
            }
        },

        // private
        checkTab: function(me, e) {
            if (!this.ignoreMonitorTab && e.getKey() == e.TAB) {
                this.triggerBlur();
            }
        },

        // private
        onBlur: Ext.emptyFn,

        // private
        mimicBlur: function(e) {
            if (!this.isDestroyed && !this.bodyEl.contains(e.target) && this.validateBlur(e)) {
                this.triggerBlur();
            }
        },

        // private
        triggerBlur: function() {
            var me = this;
            me.mimicing = false;
            me.mun(me.doc, 'mousedown', me.mimicBlur, me);
            if (me.monitorTab && me.inputEl) {
                me.un('specialkey', me.checkTab, me);
            }
            Ext.form.field.Trigger.superclass.onBlur.call(me);
            if (me.bodyEl) {
                me.bodyEl.removeCls(me.wrapFocusCls);
            }
        },

        beforeBlur: Ext.emptyFn,

        // private
        // This should be overridden by any subclass that needs to check whether or not the field can be blurred.
        validateBlur: function(e) {
            return true;
        },

        // private
        // process clicks upon triggers.
        // determine which trigger index, and dispatch to the appropriate click handler
        onTriggerWrapClick: function(e) {
            var me = this,
                t = e && e.getTarget('.' + Ext.baseCSSPrefix + 'form-trigger', null),
                match = t && t.className.match(me.triggerIndexRe),
                idx,
                triggerClickMethod;

            if (match && !me.readOnly) {
                idx = parseInt(match[1], 10);
                triggerClickMethod = me['onTrigger' + (idx + 1) + 'Click'] || me.onTriggerClick;
                if (triggerClickMethod) {
                    triggerClickMethod.call(me, e);
                }
            }
        },

        /**
         * The function that should handle the trigger's click event.  This method does nothing by default
         * until overridden by an implementing function.  See Ext.form.field.ComboBox and Ext.form.field.Date for
         * sample implementations.
         * @method
         * @param {Ext.EventObject} e
         */
        onTriggerClick: Ext.emptyFn

        /**
         * @cfg {Boolean} grow @hide
         */
        /**
         * @cfg {Number} growMin @hide
         */
        /**
         * @cfg {Number} growMax @hide
         */
    });