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',
             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: '购买商品',
             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才是王道啊~~~~~~

原文地址:https://www.cnblogs.com/webRongS/p/5590302.html