ExtJs之文本框及数字输入
结合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之文本框及数字输入的更多相关文章
- 65. ExtJs获取文本框中值的几种方式
转自:https://blog.csdn.net/qiu512300471/article/details/17415675/ 1.Html文本框 如:<input type=" ...
- [置顶] 解决EXTJS文本框长度验证在ORACLE数据库下不正确的问题
由于ORACLE数据库里面一个汉字和符号占2 个字节,数字和英文占1个字节,所以用EXTJS的文本框MaxLenght去限制输入的长度是不正确的,因为EXTJS只限制了输入的字数量,而不是字节数量. ...
- 使用Javascript限制文本框只允许输入数字
很多时候需要用到限制文本框的数字输入,试过许多方法,都不太理想,遂决定自己实现一个来玩玩.曾经使用过的方法通过onkeydown事件来控制只允许数字: <input onkeydown=&quo ...
- Extjs 下拉框
刚刚熟练了easyui控件的使用,又開始了如今的这个项目. 这个项目是个半成品.前端使用的是Extjs控件,jsp中没有代码.就引用了非常多的js...于是乎有种不知所措了呀. . . 说实话特别的不 ...
- （二十八）c#Winform自定义控件-文本框（一）
前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...
- （二十九）c#Winform自定义控件-文本框（二）
前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...
- （三十）c#Winform自定义控件-文本框（三）
前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...
- （三十一）c#Winform自定义控件-文本框（四）
前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...
- 无废话ExtJs 入门教程五[文本框：TextField]
无废话ExtJs 入门教程五[文本框:TextField] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个两个文本框.如下所示代码区的第42行位置,items: ...
随机推荐
- 16位CPU多周期设计
16位CPU多周期设计 这个工程完成了16位CPU的多周期设计,模块化设计,有包含必要的分析说明. 多周期CPU结构图 多周期CPU设计真值表 对应某一指令的情况,但仅当对应周期时才为对应的输出,不是 ...
- 硬件相关-EMI & EMS & EMC
EMI——Electro Magnetic Interference 电磁干扰 定义:是指电磁波与电子元件作用后而产生的干扰现象. 分类:有传导干扰和辐射干扰两种. 传导干扰: 是指通过导电介质把一个 ...
- 一个Option请求引发的深度解析
在当前项目中,前端通过POST方式访问后端的REST接口时,发现两条请求记录,一条请求的Request Method为Options,另一条请求的Reuest Method为Post.想要解决这个疑惑 ...
- 软件工程课堂练习——N层电梯只停一层求乘客爬楼层数最少（基本方法+优化方法）
题目: •石家庄铁道大学基础大楼一共有四部电梯,每层都有人上下,电梯在每层都停.信1201-1班的张一东觉得在每层都停觉得不耐烦. •由于楼层不太高,在上下课高峰期时时,电梯从一层上行,但只允许停在某 ...
- javascript各种模式解析
1.工厂模式: 工厂模式是软件工程领域一种广为人知的设计模式,这种模式抽象了创建具体对象的过程(后面还将讨论其他设计模式及其在JavaScript 中的实现).考虑到在ECMAScript 中无法创建 ...
- 使用SecureRandom类替代Random类
java.util.Random 产生确定的值可能被恶意的程序预测到. java.security.SecureRandom 产生不确定的随机数不能被预测到. 所以优先使用java.security. ...
- c++ swap 函数
转载地址 1,最通用的模板交换函数模式:创建临时对象,调用对象的赋值操作符. template <class T> void swap ( T& a, T& b ) { T ...
- Redis 起步
Rdis和JQuery一样是纯粹为应用而产生的,这里记录的是在CentOS 5.7上学习入门文章: 1.Redis简介 Redis是一个key-value存储系统.和Memcached类似,但是解决 ...
- 【BZOJ】【3856】Monster
又是一道水题…… 重点是分情况讨论: 首先我们很容易想到,如果a*k-b*(k+1)>0的话那么一定能磨死Monster. 但即使不满足这个条件,还有可能打死boss: 1.h-a<1也就 ...
- NYOJ-73 比大小 AC 分类： NYOJ 2014-01-17 21:29 195人阅读 评论(0) 收藏
典型的大数题目,这只是大数的比较,到时还有大数加减乘除,更加还有乘方,对于大数,一般用数组或者字符串,因为其他的结构类型一般都没有那么大 的范围!! 这道题目需要你仔细回想怎么比较俩个数字的大小,考虑 ...