ExtJS Trigger

本节的内容将介绍Trigger的用法。在所有控件中，我们很少直接使用Trigger，但是我们经常用到他的子类：combobox、date、file等都是它的子类（combobox和date是picker的子类，而picker继承自Trigger）。

更多的ExtJS教程，点击进入>>《ExtJS 教程目录》，持续更新中……

如果要直接使用Trigger，需要定义一个它的子类，并在子类中重写onTriggerClick方法。

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

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

我们在form中使用这个控件：

{
    xtype: 'customtrigger',
    fieldLabel: '自定义Trigger',
    emptyText: 'click the trigger'
}

效果如下：

它默认有一个下拉箭头，这可以通过设置样式表来设置：

triggerCls: "ux-form-search-trigger"

然后在样式表中添加样式：

.ux-form-search-trigger { background: url(images/form/search-trigger.gif);}
.ux-form-search-trigger-over { background-position:-17px 0; }
.ux-form-search-trigger-click { background-position:-34px 0; }

设置完成以后刷新页面，效果如下：

如果我们要在form中选择一个字段，我们可以重写onTriggerClick：

onTriggerClick: function () {
    var me = this;
    var win = Ext.create("Ext.window.Window", {
        title: "兴趣选择",
        width: 300,
        height: 200,
        layout: "fit",
        items: [
            {
                xtype: "form",
                layout: "hbox",
                margin: "0 0 5 0",
                defaultType: "textfield",
                items: [
                    {
                        xtype: "checkboxgroup",
                        columns: 3,
                        vertical: true,
                        flex: 1,
                        items: [
                            { boxLabel: "阅读", name: "Interest", inputValue: "阅读" },
                            { boxLabel: "摄影", name: "Interest", inputValue: "摄影" },
                            { boxLabel: "音乐", name: "Interest", inputValue: "音乐" },
                            { boxLabel: "跳舞", name: "Interest", inputValue: "跳舞" }
                        ]
                    }
                ]
            }
        ],
        buttons: [
            {
                text: "确定", handler: function () {
                    var interest = win.down("form").getValues().Interest;
                    me.setValue(interest);
                    win.close();
                }
            }
        ]
    });
    win.show();
}

在线示例

>>点击进入Trigger在线示例

extjs combobox 自动展开下拉框

在按钮监听的function中
combo.expand();

 Trigger按钮效果

另外 triggerCls：文本框右侧的按钮样式，主要有4种：

x-form-clear-trigger     // the X icon  

x-form-search-trigger    // the magnifying glass icon  

x-form-trigger           // the down arrow (default for combobox) icon  

x-form-date-trigger      // the calendar icon (just in case) 

带清除按键的triggerfield

 Ext.onReady(function () {
Ext.create('Ext.form.FormPanel', {
title: 'Form with TriggerField',
bodyPadding: 5,
width: 350,
renderTo: Ext.getBody(),
items: [{
xtype: 'triggerfield',
selectOnFocus: true,
fieldLabel: 'Sample Trigger',
trigger1Cls: 'x-form-clear-trigger',
trigger2Cls: 'x-form-search-trigger',
onTrigger1Click: function () {
this.setValue('');
},
onTrigger2Click: function () {
Ext.Msg.alert('Status', 'You clicked search!');
}
}]
});
});