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