Clear Up
SharpKit Reference

Trigger Class

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 onTriggerClick. You can create a Trigger field directly, as it renders exactly like a combobox for which you can provide a custom implementation.

For example:

    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(),
            xtype: 'customtrigger',
            fieldLabel: 'Sample Trigger',
            emptyText: 'click the trigger'

However, in general you will most likely want to use Trigger as the base class for a reusable component. Ext.form.field.Date and Ext.form.field.ComboBox are perfect examples of this.

Namespace: Ext.form.field



Name Description
editable false 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: true
hideTrigger true to hide the trigger element and display only the base text field Defaults to: false
repeatTriggerClick true to attach a click repeater to the trigger. Defaults to: false
triggerBaseCls The base CSS class that is always added to the trigger button. The triggerCls will be appended in addition to this class. Defaults to: "x-form-trigger"
triggerCls An additional CSS class used to style the trigger button. The trigger will always get the triggerBaseCls by default and triggerCls will be appended if specified.
triggerNoEditCls The CSS class that is added to the text field when component is read-only or not editable. Defaults to: "x-trigger-noedit"
triggerWrapCls The CSS class that is added to the div wrapping the trigger button(s). Defaults to: "x-form-trigger-wrap"


Name Description
getTriggerWidth() Get the total width of the trigger button area.
onBlur() The default blur handling must not occur for a TriggerField, implementing this template method as emptyFn disables that. Instead the tab key is monitored, and the superclass's onBlur is called when tab is detected
onTriggerClick(EventObject) 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.
setEditable(bool) Sets the editable state of this field. This method is the runtime equivalent of setting the 'editable' config option at config time.


Name Description
inputCell A reference to the TD element wrapping the input element. Only set after the field has been rendered.
triggerEl A composite of all the trigger button elements. Only set after the field has been rendered.
triggerWrap A reference to the TABLE element which encapsulates the input field and all trigger button(s). Only set after the field has been rendered.
© Copyright 2005-2011 SharpKit. All rights reserved.