Extjs4.0 NumberField的使用

使用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'
            });