您的位置：首页 > 其它

Ext.form.field.Number numberfield

2012-11-14 20:45 295 查看

A numeric text field that provides automatic keystroke filtering to disallow non-numeric characters, and numeric validation to limit the value to a range of valid numbers.(数据字段提供了自动过滤键盘输入的非数据字符，和数据校验限制在合法数据的范围中。) The range of acceptable number values can be controlled by setting the minValue and maxValue configs, and fractional decimals can be disallowed by setting allowDecimals to

false

.(可以设置minValue和maxValue属性控制可接受数据的范围，通过设置allowDecimals为false限制小数输入)

By default, the number field is also rendered with a set of up/down spinner buttons and has up/down arrow key and mouse wheel event listeners attached for incrementing/decrementing the value by the step value. (默认情况下，数据字段提供了一组上下转换的按钮和上下箭头按键和鼠标轮滚事件监听器控制数据的步进来递增和递减数值。)To hide the spinner buttons set

hideTrigger:true

; to disable the arrow key and mouse wheel handlers set

keyNavEnabled:false

and

mouseWheelEnabled:false

. (要隐藏上下转换按钮可以设置hideTrigger为true，要取消上下键事件和鼠标滚动事件可以设置keyNavEnabled为false和设置mouseWheelEnabled为false。)See the example below.(看下面的例子。)
numberfield.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HELLO WORD</title>
<link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script>
<script type="text/javascript" src="numberfield3.js"></script>
</head>
<body>
</body>
</html>

numberfield.js

(function(){
Ext.onReady(function(){

Ext.create('Ext.form.Panel', {
title: 'On The Wall',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'numberfield',
anchor: '100%',
name: 'bottles',
fieldLabel: 'Bottles of Beer',
value: 99,
maxValue: 99,
minValue: 0
}],
buttons: [{
text: 'Take one down, pass it around',
handler: function() {
this.up('form').down('[name=bottles]').spinDown();
}
}]
});

});
})();

numberfield2.js

(function(){
Ext.onReady(function(){

Ext.create('Ext.form.Panel', {
title: 'Personal Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'numberfield',
anchor: '100%',
name: 'age',
fieldLabel: 'Age',
minValue: 0, //prevents negative numbers

// Remove spinner buttons, and arrow key and mouse wheel listeners
hideTrigger: true,
keyNavEnabled: false,
mouseWheelEnabled: false
}]
});

});
})();

numberfield3.js

(function(){
Ext.onReady(function(){

Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'Step',
width: 300,
bodyPadding: 10,
items: [{
xtype: 'numberfield',
anchor: '100%',
name: 'evens',
fieldLabel: 'Even Numbers',

// Set step so it skips every other number
step: 2,
value: 0,

// Add change handler to force user-entered numbers to evens
listeners: {
change: function(field, value) {
value = parseInt(value, 10);
field.setValue(value + value % 2);
}
}
}]
});

});
})();

11111
本文出自 “智源软件” 博客，请务必保留此出处http://gzzjsoft.blog.51cto.com/6129059/1060084

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

标签：

相关文章推荐

新的分享

章节导航