Extjs 笔记 Ext.from(二）

来源：互联网发布：php 为什么可以跨平台编辑：程序博客网时间：2024/05/17 03:00

Ext.from.field.Text文本框

1、Ext.from.field.Text组件主要配置项目表

配置项类型说明allowBlankBoolean是否允许为空，默认为空trueblankTextString是否允许为空验证失败后提示消息disableKeyFilterBoolean设置为true则禁用键盘输入过滤，默认为falseemptyClsString设置应用于空字段的样式，默认为“x-form-empty-field”,该样式会根据当前字段值自动进行添加或移除emptyTextString在一个空字段默认显示的信息enableKeyEventsBoolean是否启用键盘事件代理enforceMaxLengthBoolean是否强制限制输入的最大长度，默认为false，设置为true则用户无法输入超过最大长度的字符growBoolean设置字段是否根据内容字段进行伸展和收缩，默认为falsegrowAppendString设置一个追加到当前值中的字符串，目的是计算预增长字段长度，并且仅当grow为true时生效，默认为大写字母WgrowMaxNumber字段伸展的最大宽度，默认为800growMinNumber字段收缩的最小宽度，默认为30maskReRegExp输入掩码正则表达式，将过滤不匹配的键盘输入maxLengthNumber

字段允许输入的最大长度，默认为Number.MAX_VALUE。

说明：

enforceMaxLength为false时，输入超长会显示错误提示。

enforceMaxLength为true时，输入被限制在范围内，不出现提示。

maxLengthTextString最大长度验证失败后显示的提示消息minLengthNumber字段允许输入的最小长度，默认为0minLengthTextString最小长度验证失败后显示的提示消息regexRegExp用于验证的javascript正则表达式regexTextString正则表达式验证失败后显示的提示消息，默认为空selectOnFocusBoolean设置当字段得到焦点时是否字段选择已存在的文本，默认为falsestripCharsReRegExps去除字符正则表达式，将在验证前过滤不希望输入的字符validatorFunction自定义验证函数，当前值将被传入，验证通过返回true，验证失败返回错误信息vtypeString验证类型名字vtypeTextString自定义提示消息，用来代替vtype本身的错误提示消息

2、Ext.from.field.Text示例

代码：

<!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.Panel</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 () {            Ext.QuickTips.init();            var frmLogin = new Ext.form.Panel({                title: "Ext.form.field.Text示例",                bodyStyle: "padding:5 5 5 5",                height: 120,                width: 200,                frame: true,                collapsible: true,                renderTo: "form1",                defaultType:"textfield",                defaults: {                    labelSeparator: "：",                    labelWidth: 50,                    labelAlign: "left",                    width: 175,                    allowBlank: false,                    blankText: "必填",                    msgTarget: "side"                },                items: [{                    fieldLabel: "用户名",                    name: "UserName",                    regex: /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,                    regexText: "格式错误"                }, {                    fieldLabel: "密码",                    name: "Password",                    inputType: "password"                }],                buttons: [{                    text: "登录",                    handler: function () {                        frmLogin.form.setValues({                            UserName:"libingql@126.com",                            Password:"1"                        })                    }                }]            });        });    </script></head><body>    <form id="form1">    </form></body></html>

效果图：

0 0