Ext.from.field.Text文本框

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

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

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

说明：

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

enforceMaxLength为true时，输入被限制在范围内，不出现提示。
maxLengthText String 最大长度验证失败后显示的提示消息
minLength Number 字段允许输入的最小长度，默认为0
minLengthText String 最小长度验证失败后显示的提示消息
regex RegExp 用于验证的javascript正则表达式
regexText String 正则表达式验证失败后显示的提示消息，默认为空
selectOnFocus Boolean 设置当字段得到焦点时是否字段选择已存在的文本，默认为false
stripCharsRe RegExps 去除字符正则表达式，将在验证前过滤不希望输入的字符
validator Function 自定义验证函数，当前值将被传入，验证通过返回true，验证失败返回错误信息
vtype String 验证类型名字
vtypeText String 自定义提示消息，用来代替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>

效果图：

posted @ 2012-04-15 23:28  libingql  阅读(12654)  评论(1)  编辑  收藏  举报