结合HTML来理解，

比较容易。

<!DOCTYPE html>
<html>
<head>
    <title>ExtJs</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
        <script type="text/javascript" src="ExtJs/ext-all.js"></script>
        <script type="text/javascript" src="ExtJs/bootstrap.js"></script>
        <script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>

    <script type="text/javascript">
            Ext.onReady(function() {
                Ext.QuickTips.init();
                var testForm = new Ext.form.Panel({
                    title: 'Ext.form.field.TextAreaSample',
                    bodyStyle: 'padding: 5 5 5 5',
                    frame: true,
                    height: 150,
                    width: 250,
                    renderTo: 'formArea',
                    items: [{
                        xtype: 'textarea',
                        fieldLabel: 'memo',
                        id: 'memo',
                        labelSeparator: ':',
                        labelWidth: 60,
                        width: 200
                    }],
                    buttons: [{text: 'ok', handler: showValue}]
                });
                var loginForm = new Ext.form.Panel({
                    title: 'Ext.form.field.Text Sample',
                    bodyStyle: 'padding: 5 5 5 5',
                    frame: true,
                    height: 150,
                    width: 550,
                    renderTo: 'form',
                    defaultType: 'textfield',
                    defaults: {
                        labelSeparator: ':',
                        labelWidth: 150,
                        width: 500,
                        allowBlank: false,
                        labelAlign: 'left',
                        msgTarget: 'side'
                    },
                    items: [{
                        fieldLabel: 'username',
                        name: 'userName',
                        selectOnFocus: true,
                        regex: /^([\w]+)(.[\w+]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,
                        regexText: 'format error'
                    }, {
                        name: 'password',
                        fieldLabel: 'password',
                        inputType: 'password'
                    }],
                    buttons: [{
                        text: 'login',
                        handler: function() {
                            loginForm.form.setValues({userName: 'user@com', password: '123456'});
                        }
                    }]
                });
                var numberForm = new Ext.form.FormPanel({
                    title: 'Ext.form.field.Number.Sample',
                    bodyStyle: 'padding: 5 5 5 5',
                    renderTo: 'numberForm',
                    frame: true,
                    height: 350,
                    width: 550,
                    defaultType: 'numberfield',
                    defaults: {
                        labelSeparator: ':',
                        labelWidth: 80,
                        width: 200,
                        labelAlign: 'left',
                        msgTarget: 'side'
                    },
                    items: [{
                        fieldLabel: 'Int',
                        hideTrigger: true,
                        allowDecimals: false,
                        nanText: 'input valid number.'
                    }, {
                        fieldLabel: 'Float',
                        decimalPrecision: 2,
                        allowDecimals: true,
                        nanText: 'input valid number.'
                    }, {
                        fieldLabel: 'Limit number',
                        baseChars: '12345'
                    },{
                        fieldLabel: 'Limit number',
                        maxValue: 100,
                        minValue: 50
                    }]
                });
                function showValue(){
                    var memo = testForm.getForm().findField('memo');
                    alert(memo.getValue());
                };
            });
    </script>
</head>
<body>
    <div id='form'></div>
        <div id='formArea'></div>
        <div id='numberForm'></div>
        <div id='errorMsg'></div>

</body>
</html>

ExtJs之文本框及数字输入的更多相关文章

  1. 65. ExtJs获取文本框中值的几种方式

    转自:https://blog.csdn.net/qiu512300471/article/details/17415675/ 1.Html文本框    如:<input type=" ...

  2. [置顶] 解决EXTJS文本框长度验证在ORACLE数据库下不正确的问题

    由于ORACLE数据库里面一个汉字和符号占2 个字节,数字和英文占1个字节,所以用EXTJS的文本框MaxLenght去限制输入的长度是不正确的,因为EXTJS只限制了输入的字数量,而不是字节数量. ...

  3. 使用Javascript限制文本框只允许输入数字

    很多时候需要用到限制文本框的数字输入,试过许多方法,都不太理想,遂决定自己实现一个来玩玩.曾经使用过的方法通过onkeydown事件来控制只允许数字: <input onkeydown=&quo ...

  4. Extjs 下拉框

    刚刚熟练了easyui控件的使用,又開始了如今的这个项目. 这个项目是个半成品.前端使用的是Extjs控件,jsp中没有代码.就引用了非常多的js...于是乎有种不知所措了呀. . . 说实话特别的不 ...

  5. （二十八）c#Winform自定义控件-文本框（一）

    前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...

  6. （二十九）c#Winform自定义控件-文本框（二）

    前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...

  7. （三十）c#Winform自定义控件-文本框（三）

    前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...

  8. （三十一）c#Winform自定义控件-文本框（四）

    前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...

  9. 无废话ExtJs 入门教程五[文本框：TextField]

    无废话ExtJs 入门教程五[文本框:TextField] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个两个文本框.如下所示代码区的第42行位置,items: ...

随机推荐

  1. [原创]PostgreSQL Plus Advanced Server监控工具PEM（三）

    三.使用PEM Client 在PEM Client中连接PEM Server 点击上图所示的按钮或点击菜单-> 第一次连接PEM Server,会有一次导入证书的操作,点击Yes按钮. 接下来 ...

  2. hdu 1113 Word Amalgamation

    原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=1113 字符串简单题: stl水过 如下: #include<algorithm> #inc ...

  3. jdk 1.6 & 1.7新特性

    jdk1.6新特性 1.Desktop类和SystemTray类 2.使用JAXB2来实现对象与XML之间的映射 3.StAX 4.使用Compiler API 5.轻量级Http Server AP ...

  4. CPU制造工艺 级选来决定cpu等级

    CPU制造工艺 编辑 CPU制造工艺又叫做CPU制程,它的先进与否决定了CPU的性能优劣.CPU的制造是一项极为复杂的过程,当今世上只有少数几家厂商具备研发和生产CPU的能力.CPU的发展史也可以看作 ...

  5. iOS开发之Pch预编译文件的创建

    在Xcode6之前,创建一个新工程xcode会在Supporting files文件夹下面自动创建一个“工程名-Prefix.pch”文件,也是一个头文件,pch头文件的内容能被项目中的其他所有源文件 ...

  6. VS2012 常用web.config配置解析之自定义配置节点

    在web.config文件中拥有一个用户自定义配置节点configSections,这个节点可以方便用户在web.config中随意的添加配置节点,让程序更加灵活(主要用于第三方插件的配置使用) 自定 ...

  7. linux下操作

    一.没有正确安装GNOME电源管理器的默认配置 二.oracle启停 1. linux下启动oraclesu - oraclesqlplus /nologconn /as sysdbastartupe ...

  8. python pandas/numpy

    import pandas as pdpd.merge(dataframe1,dataframe2,on='common_field',how='outer') replace NaN datafra ...

  9. [shell基础]——算术运算

    shell只支持整数运算.一般可用let.expr.declare.$[]实现. 更精准的运算建议使用Linux下的bc工具——一款高精度计算语言. 1. let是shell内建的整数运算命令 ## ...

  10. 搭建SpringMVC+MyBatis开发框架一

    大部分 Java 应用都是 Web 应用,展现层是 Web 应用不可忽略的重要环节.Spring 为展现层提供了一个优秀的 Web 框架—— Spring MVC.和众多其他 Web 框架一样,它基于 ...