ExtJS之Ext.form.field.Number数字输入框组件实现了自动按键过滤和数字验证.在严格要求输入数字的场合有用,免去了编写相关验证的复杂逻辑,是简化编程的典型应用.实例代码如下:
<!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>Hello World</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link href="ext4.0.7/ext-all.css" rel="stylesheet" type="text/css" />
<script src="ext4.0.7/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript" src="ext4.0.7/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
Ext.QuickTips.init();
var form = new Ext.form.FormPanel({
title:'Ext.form.field.Number实例',
bodyStyle:'padding :5 5 5 5',
//表单边距
renderTo:'form',
frame:true,
height:250,
width:350,
defaultType:'numberfield',
//设置表单字段的默认类型
defaults:{
labelSeparator:':',
//分隔符
labelWidth:80,
//标签宽度
width:200,
//字段宽度
labelAlign:'left',
//标签对齐方式
msgTarget:'side'
//提示信息显示在字段的右边
},
items:[
{fieldLabel:'整数',
hideTrigger:true,
//隐藏微调按钮
allowDecimals:false,
//不允许输入小数
nanText:'请输入有效的整数'},
//错误信息提示
{fieldLabel:'小数',
hideTrigger:false,
decimalPrecision:2 ,
//精确到小数点后面两位
allowDecimals:true,
//允许输入小数
nanText:'请输入有效的小数'},
//无效数字提示
{fieldLabel:'数字限制',
baseChars:'12345'},
//输入数字范围
{fieldLabel:'数值限制',
maxValue:100,
//最大值
minValue:50}
//最小值
]
});
});
</script>
</head>
<body>
drgfd
<div id="form"></div>
</body>
</html>