Extjs4.0 NumberField的使用

来源：互联网发布：淘宝装修更换本地图片编辑：程序博客网时间：2024/04/30 23:06

使用Extjs4.0，页面中只需要引入ext-all.js就可以了，不需要引入ext-base.js。当然4.0压缩包中也找不到ext-base.js。

1、创建NumberField

            var numberFiled = new Ext.form.NumberField({                width:200,                renderTo: 'div1',            });

2、设定最大值、最小值、初始值

var numberFiled = new Ext.form.NumberField({            width: 200,            name: 'numberField',            value: 90,            maxValue: 92,            minValue: 88,            renderTo: 'div1'});

3、隐藏上下递增箭头、键盘导航、鼠标滚轮

           var numberFiled = new Ext.form.NumberField({                width: 200,                name: 'numberField',                value: 90,                hideTrigger: true,                keyNavEnabled: true,                mouseWheelEnabled: true,                renderTo: 'div1'            });

4、设置步进

            var numberFiled = new Ext.form.NumberField({                width: 200,                name: 'numberField',                value: 90,                step:5,                renderTo: 'div1'            });

5、设置错误时的提示文字

           var numberFiled = new Ext.form.NumberField({                width: 200,                name: 'numberField',                id: 'numberField',                value: 90,                step: 5,                nanText:'真的错了',                renderTo: 'div1'            });            var button = new Ext.Button({                name: 'button',                text: 'button',                handler: function() {                    numberFiled.setRawValue("hello the world");                },                renderTo: 'div1'            });

6、处理change事件

            var numberFiled = new Ext.form.NumberField({                width: 200,                name: 'numberField',                id: 'numberField',                value: 90,                step: 5,                listeners: {                    change: function(field, value) {                        value = parseInt(value, 10);                        field.setValue(value + value % 2);                    }                },                renderTo: 'div1'            });