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!');
}
}]
});
});