Ext JS-优快云博客

本文详细介绍了ExtJS中NumberField组件的使用方法，包括其基本属性如字段名称、显示标签、值范围等，以及特有配置如键盘导航、鼠标滚轮调整和步长设定。同时，文章还提供了如何在Form中应用NumberField的实例。

textfield的用法示例

var formCmp = Ext.create("Ext.form.Panel", {
    title: "NumberField用法示例",
    x: 30,
    y: 30,
    width: 500,
    height: 300,
    bodyPadding: 5,
    frame: true,
    defaultType: "textfield",
    fieldDefaults: { labelAlign: "right", labelWidth: 60, msgTarget: "qtip" },
    defaults: { anchor: "100%" },
    items: [
        {
            //控件类型为numberfield
            xtype: "numberfield",
            //字段名称，绑定和获取数据的时候用到
            name: "month",
            //显示的标签
            fieldLabel: "月份",
            //控件的值
            value: 1,
            //能否为空，true为必填项，false为可以为空
            allowBlank: false,
            //最大值
            maxValue: 12,
            //最小值
            minValue: 1,
            //获得焦点时选中输入的内容
            selectOnFocus: true,
            //是否只读，true为只读，false为可编辑
            readOnly: false,
            //是否可用，true为不可用，false为可用
            disabled: false,
            //是否隐藏上下调节按钮
            hideTrigger: false,
            //键盘导航是否可用，启用后可以通过键盘的上下箭头调整数值
            keyNavEnabled: true,
            //鼠标滚轮是否可用，启用后可以通过滚动鼠标滚轮调整数值
            mouseWheelEnabled: true,
            //通过调节按钮、键盘、鼠标滚轮调节数值时的大小
            step: 2
        }
    ],
    listeners: {
        change: function (me, newValue, oldValue, eOpts) {
            Ext.MessageBox.alert("提示", newValue);
        }
    },
    renderTo: "container"
});

NumberField事例
在Form中使用NumberField字段，作为form的一个item，如果form的defaultType不是numberfield，那么需要首先将xtype设置为numberfield。