• 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才是王道啊~~~~~~

  • 相关阅读:
    Linux2.6内核实现的是NPTL
    linux kernel thread(Daemons)
    linux 多线程 LinuxThreads(转)
    同步与互斥的区别和联系
    Linux下使用popen()执行shell命令
    HTML学习笔记
    C++ 编译器的函数名修饰规则
    普林斯顿公开课 算法1-2:观察
    问卷星调查学生对《算法》教学的建议与反馈
    Visual Studio 2013 与 14
  • 原文地址:https://www.cnblogs.com/webRongS/p/5590302.html
Copyright © 2020-2023  润新知