Extjs 笔记 Ext.from(二）

最新推荐文章于 2024-05-28 21:09:14 发布

Manarty

最新推荐文章于 2024-05-28 21:09:14 发布

阅读量947

点赞数

分类专栏： Web开发

本文链接：https://blog.csdn.net/Manarty/article/details/38703695

版权

Web开发专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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>

效果图：

Manarty

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Extjs 笔记 Ext.from(二）

Ext.from.field.Text文本框1、Ext.from.field.Text组件主要配置项目表配置项类型说明allowBlankBoolean是否允许为空，默认为空trueblankTextString是否允许为空验证失败后提示消息disableKeyFilterBoolean设置
复制链接

扫一扫