// 总价
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才是王道啊~~~~~~

Extjs 实现输入数量,实时更改总价的更多相关文章

  1. iOS UITextView 输入内容实时更新cell的高度

    iOS UITextView 输入内容实时更新cell的高度 2014-12-26 11:37 编辑: suiling 分类:iOS开发 来源:Vito Zhang'blog  11 4741 UIT ...

  2. localStorage实现购物车数量单价和总价实时同步(二)

    利用localStorage实时显示购物车小计和总价页面显示: 和昨天的原理相同,本地存储同时实时循环计算总价之和,注意循环时候的先清空再计算 Success is getting what you ...

  3. 【C#】让DataGridView输入中实时更新数据源中的计算列

    本文适用Winform开发,且DataGridView的数据源为DataTable/DataView的情况. 理解前提:熟知DataTable.DataView 求:更好方案 考虑这样一个场景: 某D ...

  4. magento购物车添加减少数量 实时更新购物车

    magento实时更新购物车商品数量 <td> <button onclick="addQtyone();" type="submit"> ...

  5. 使用JQuery统计input和textarea文字输入数量代码

    本文主要介绍了jQuery实现统计输入文字个数的方法,需要的朋友可以参考下. HTML部分: <input type="text" value="我是输入的文字&q ...

  6. Extjs文本输入域

    var form = Ext.create('Ext.form.Panel', {             renderTo: Ext.getBody(),             frame: tr ...

  7. Dynamics CRM 数据数量限制更改

    1.在CRM2016中如果想要导出超过10000记录数据,更新 MaxRecordsForExportToExcel  这个字段的值. SELECT MaxRecordsForExportToExce ...

  8. js实时计算价格

    //通过数量,单价的输入,实时显示总价 $("#number,#price").on("input",function(e){ $("#totalPr ...

  9. 【Knockout.js 学习体验之旅】(1)ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

随机推荐

  1. Android 高仿腾讯旗下app的 皮肤加载技术

    http://www.cnblogs.com/punkisnotdead/p/4968851.html 以前写的这篇文章 可以高仿出 知乎 新浪微博等 绝大多数app的换肤技术,但是遗漏了腾讯的效果, ...

  2. linux系统上Mysql数据库导入导出操作

    需求:把MySQL数据库目录中的dz数据库备份到/home/dz_bak.sql ,然后再新建一个数据库dzbak,最后把/home/dz_bak.sql 导入到数据库dzbak中.操作如下:以下操作 ...

  3. php curl简单使用

    使用PHP的cURL库可以简单和有效地去抓网页,您只需要运行一个脚本,然后分析一下您所抓取的网页,然后就可以以程序的方式得到您想要的数据了.无论是您想从一个链接上取部分数据,或是取一个XML文件并把其 ...

  4. windowsphone8.0 iso 下载地址

    中文版http://download.microsoft.com/download/F/5/6/F56AD199-EF12-43C7-8551-C095394D3B32/fulltril30/iso/ ...

  5. Linux makefile教程之make运行八[转]

    make 的运行 —————— 一 般来说,最简单的就是直接在命令行下输入make命令,make命令会找当前目录的makefile来执行,一切都是自动的.但也有时你也许只想让 make重编译某些文件, ...

  6. Linux makefile教程之书写规则三[转]

    书写规则———— 规则包含两个部分,一个是依赖关系,一个是生成目标的方法.在 Makefile中,规则的顺序是很重要的,因为,Makefile中只应该有一个最终目标,其它的目标都是被这个目标所连带出来 ...

  7. Private Bytes,Working Set,Virtual Size的区别

    http://aigo.iteye.com/blog/1930209 http://stackoverflow.com/questions/1984186/what-is-private-bytes- ...

  8. 康乐不风流之爱解题的pde灌水王张祖锦

    康乐不风流之爱解题的pde灌水王张祖锦 师弟: 邓洪存 (现在烟台大学任教) 好吧, 我一直想写写康乐园里与我相熟的这几个人, 不如趁此机会开始. 第一批人物为张祖锦.苏延辉.张会春.黄显涛.刘兴兴. ...

  9. Golang官方图片库

    Golang 的图片出来通过提供操作每一个像素点设置颜色(http://www.cnblogs.com/ghj1976/p/3441536.html) 和 提供通过可选蒙版图片重叠操作 (http:/ ...

  10. 使用xshell使用删除出现乱码

    在使用xshell的时候出现如下错误: 1.打开如下属性设置: 2. 查看终端--键盘设置 4.修改为下图所示: 从而可解决删除乱码问题,在设置完成之后,关闭xshell,重新打开即可.