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.示例代碼效果如下: