Ext.form.field.Trigger触发字段
1、Ext.form.field.Trigger主要配置
配置项 | 类型 | 说明 |
---|---|---|
editable | Boolean | 是否允许直接对文本进行编辑,false则不允许编辑,只能通过触发按钮进行设置,默认为true |
hideTrigger | Boolean | 是否隐藏触发按钮,默认为false |
repeatTriggerClick | Boolean | true则添加一个click repeater到触发按钮上,默认为false |
readOnly | Boolean | 字段是否只读,true则阻止用户修改字段内容,并隐藏触发按钮,默认为false |
repeatTriggerClick | Boolean | true则自动添加一个重复点击器 |
selectOnFocus | Boolean | 在获得焦点时是否立即选中输入框已经存在的文本,默认为false。该配置只在editable为true时生效 |
2、Ext.form.field.Trigger示例
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Ext.form.field.Trigger示例</title> <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script> <script type="text/javascript"> Ext.onReady(function () { var frm = new Ext.form.Panel({ title: "Ext.form.field.Trigger示例", bodyStyle: "padding:5", frame: true, height: 100, width: 240, renderTo: Ext.getBody(), defaults: { labelSeparator: ":", labelWidth: 80, width: 230, labelAlign: "left" }, items: [{ xtype: "triggerfield", id: "memo", fieldLabel: "触发字段", hideTrigger: false, onTriggerClick: function () { var memo = frm.getForm().findField("memo"); Ext.MessageBox.alert(memo.getValue()); Ext.getCmp("memo").setValue("Test"); } }] }); }); </script> </head> <body> </body> </html>
效果图: