Extjs 实现输入数量,实时更改总价
// 总价 var totalNum = '0.00'; //总价初始值 var $total = new Ext.form.Label({ text: '消费金额 : ¥' + totalNum + '元', name: 'total', margin: '0 0 0 44' }); //购买数量form var $buyNum = new Ext.form.TextField({ xtype: 'textfield', width: 200, labelWidth: 60, fieldLabel: '购买数量', value: '单位(个)', margin: '5 0 10 45', fieldStyle: 'color:gray', enableKeyEvents: true, listeners: { focus: function () { this.setValue(""); }, change: function (pthis, newValue, oldValue, eOpts ){ totalNum = (newValue * 0.2).toFixed(2); //验证输入数字 if (/^[0-9]*$/.test(newValue) === true) { $total.setConfig('text', '消费金额:¥' + totalNum + '元'); } else { newValue = 0; } } } }); // 创建内容 var $label = [{ xtype: 'label', text: '当前可用余额 :' + "¥200元', margin: '10 0 0 41' }, { xtype: 'tbtext', margin: '10 0 0 40', text: '单价 : 0.2元/个' //可以拼接使动态给值 }, $buyNum, $total]; // 创建窗口 var win = Ext.create('Ext.window.Window', { title: '购买商品', width: 300, height: 200, layout: 'vbox', modal: true, plain: true, items: $label, buttons: [{ text: '确定' }, { text: '取消', handler: function () { win.close(); } }] }); win.show();
在实现这个功能的过程中也遇到了一点问题。我最开始是使用的‘keyup’事件,出现的问题就是每次刷新页面后第一次keyup的时候,总价偶尔会不变,还是初始状态。第二次开始keyup总价才开始实时改变。当时很奇怪,只有刷新后的第一次才会偶尔不好使。
我以为是代码执行顺序的问题,稍作调整之后还是存在问题。检测代码,不是算法的问题。那就是事件的问题了。又查了API,看是否有其他事件也可以实现这个功能,果不其然,‘change’是个好东西。
change :(pthis, newValue, oldValue, eOpts )
连获取输入框值得方式都省了。而且change是检测输入框值改变的事件,它就不会像keyup事件带来各种意想不到的问题。
最后总结:使用框架多看API才是王道啊~~~~~~