您的位置：首页 > Web前端 > JavaScript

ExtJS之Ext.form.field.Number组件实例

2013-07-25 23:25 393 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ExtJS 前端 RIA

相关文章推荐

新的分享

章节导航