Extjs 4.2 实现文本框组 支付宝支付密码输入效果

1.如下图:

2.Extjs 使用numberfield进行实现:

 

	function uxInputChange(numfield, newV) {
		var neiboNumfield = numfield.nextNode("numberfield");
		if (!newV && 0 !== newV && "." != newV) {
			neiboNumfield = null;
			neiboNumfield = numfield.previousNode("numberfield");
		}
		try {
			neiboNumfield.focus(true);
		} catch (e) {
			console.log(e);
		}
	}
	Ext.create("Ext.form.Panel", {
		width : 400,
		height : 50,
		border : false,
		layout : "column",
		name : "azimuthForm",
		defaultType : "numberfield",
		defaults : {
			width : 23,
			frame : true,
			hideLabel : true,
			margin : "0 2 0 0",
			hideTrigger : true,
			minValue : 0,
			maxValue : 9,
			maxLength : 1,
			enforceMaxLength : 1,
			allowDecimals : true,
			autoStripChars : true,
			enableKeyEvents : true,
			listeners : {
				keypress : function(numfield, e, eOpts) {
					if (e.getKey() == e.BACKSPACE) {
						console.log("backspace fire move label");
						uxInputChange(numfield, false);
					}
					if ((e.getKey() > e.ZERO - 1 && e.getKey() < e.ZERO + 10) || e.ZERO - 2 == e.getKey()) {
						if (-1 != numfield.name.indexOf("1")) {
							if (e.ZERO - 2 == e.getKey()) {
								return;
							}
						}
						console.log("input fire move label");
                        uxInputChange(numfield, true);
					}
				}
			}
		},
		items : [{
			xtype : "label",
			width : 110,
			flex : 0,
			text : "扇区天线方位角:",
			style : {
				textAlign : "right"
			}
		}, {
			name : "azimuth1",
			margin : "0 2 0 3",
			allowDecimals : false
		}, {
			name : "azimuth2"
		}, {
			name : "azimuth3"
		}, {
			name : "azimuth4"
		}, {
			name : "azimuth5"
		}, {
			name : "azimuth6",
			margin : "0"
		}],
		renderTo : Ext.getBody()
	});

3.上面的uxInputChange是自定义的函数,主要功能是找到邻近的numberfield进行光标的定位,并选中该文本框的文字

 

4.本例中以数字+小数的方式实现光标的自动移动,并监听删除按钮,小数点按钮,使得小数点不在首位,并自动过滤非数字文本方便验证

5.示例代码效果如下: