本节的内容将介绍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!'); } }] }); });