结合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. 细说Debug和Release区别

    VC下Debug和Release区别 最近写代码过程中,发现 Debug 下运行正常,Release 下就会出现问题,百思不得其解,而Release 下又无法进行调试,于是只能采用printf方式逐步 ...

  2. jquery 源码学习（*）

    最近在做日志统计程序,发现对方的程序是在Jquery基础上进行开发的,而公司的网站的框架是prototype.而且我也早就想了解一下Jquery源码,故决定研究Jquery源码,模拟它的方法   Jq ...

  3. 16.如何设置Quartus II Programmer，保护pof不被读出

    Program时,把security bit勾上,点击start 这样examine时就不能正确的读出pof 读出来的pof 除文件头外,其余的内容全为0 怎么样,大家试试!

  4. datawindow直接导入导出xml

    long dwcontrol.ImportFile ( XML!, filename ) dw_.Modify("DataWindow.Export.XML.UseTemplate = 't ...

  5. jquery ajax 传递js对象到后台

    第一种:通过struts接收 (function ($) { $("#btnsave").click(function () { var params = {}; params[& ...

  6. 简单修改 MySQL 的 root 账号密码

    首先这是一篇非常非常初级的教程. 平时为了方便,经常是直接在网上下载 PHP + MySQL 的集成环境,但有一些 MySQL 的 root 账号是没有密码的(例如大名鼎鼎的 XAMPP 就是这样), ...

  7. 程序调试手段之gdb, vxworks shell

    调试一个程序主要用到的功能: 启动程序 设置函数断点 设置数据断点 单步执行 查看内存值 修改内存值 linux下的gdb,和vxworks下的shell 虽然使用方式和调试命令略有不同,但是都能满足 ...

  8. Mac系统如何配置adb

    在使用mac进行android开发之前,我们一般会安装android studio 或者 eclipse,无论哪一款开发软件,都少不了安装adb(Android Debug Bridge).adb(A ...

  9. 揭开NodeJS的神秘面纱！

    一.NodeJS是什么? Node是一个服务器端JavaScript解释器.Node.js是一套用来编写高性能网络服务器的JavaScript包. 二.Node的目标是什么? Node 公开宣称的目标 ...

  10. socket 套接字

    网络:交换机,路由器,网线 交换机:分配.. 路由器:找寻网络线路 网络架构: 应用层 ---> 表示层 ---> 会话层 ---> 传输层 ---> 网络层 ---> ...