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

最新推荐文章于 2020-12-19 10:33:06 发布

转载最新推荐文章于 2020-12-19 10:33:06 发布 · 1.2k 阅读

文章标签：

#ExtJS #前端 #RIA

基础知识同时被 3 个专栏收录

28 篇文章

订阅专栏

资源

26 篇文章

订阅专栏

ExtJS

4 篇文章

订阅专栏

本文介绍ExtJS中数字输入框组件的使用方法，并通过示例代码展示了如何配置不同的属性来实现整数、小数输入及数值范围限制等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>