1,numberfield textfield 用法
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.
name: 字段名称, 绑定和获取数据的时候用到
fieldLabel: 显示的标签
value: 控件的值
allowBlank: 能否为空, true 为必填项, false 为可以为空
maxValue: 最大值
minValue: 最小值
selectOnFocus: 获得焦点时选中输入的内容
readOnly: 是否只读, true 为只读, false 为可编辑
disabled: 是否可用, true 为不可用, false 为可用
numberfield 特有的配置:
hideTrigger: 是否隐藏上下调节按钮
keyNavEnabled: 键盘导航是否可用, 启用后可以通过键盘的上下箭头调整数值
mouseWheelEnabled: 鼠标滚轮是否可用, 启用后可以通过滚动鼠标滚轮调整数值
step: 通过调节按钮, 键盘, 鼠标滚轮调节数值时的大小
来源: http://www.bubuko.com/infodetail-3053976.html