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>

效果图:

Ext.form.field.Trigger触发字段

你可能感兴趣的:(trigger)