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才是王道啊~~~~~~
Extjs 实现输入数量,实时更改总价的更多相关文章
- iOS UITextView 输入内容实时更新cell的高度
iOS UITextView 输入内容实时更新cell的高度 2014-12-26 11:37 编辑: suiling 分类:iOS开发 来源:Vito Zhang'blog 11 4741 UIT ...
- localStorage实现购物车数量单价和总价实时同步(二)
利用localStorage实时显示购物车小计和总价页面显示: 和昨天的原理相同,本地存储同时实时循环计算总价之和,注意循环时候的先清空再计算 Success is getting what you ...
- 【C#】让DataGridView输入中实时更新数据源中的计算列
本文适用Winform开发,且DataGridView的数据源为DataTable/DataView的情况. 理解前提:熟知DataTable.DataView 求:更好方案 考虑这样一个场景: 某D ...
- magento购物车添加减少数量 实时更新购物车
magento实时更新购物车商品数量 <td> <button onclick="addQtyone();" type="submit"> ...
- 使用JQuery统计input和textarea文字输入数量代码
本文主要介绍了jQuery实现统计输入文字个数的方法,需要的朋友可以参考下. HTML部分: <input type="text" value="我是输入的文字&q ...
- Extjs文本输入域
var form = Ext.create('Ext.form.Panel', { renderTo: Ext.getBody(), frame: tr ...
- Dynamics CRM 数据数量限制更改
1.在CRM2016中如果想要导出超过10000记录数据,更新 MaxRecordsForExportToExcel 这个字段的值. SELECT MaxRecordsForExportToExce ...
- js实时计算价格
//通过数量,单价的输入,实时显示总价 $("#number,#price").on("input",function(e){ $("#totalPr ...
- 【Knockout.js 学习体验之旅】(1)ko初体验
前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...
随机推荐
- Android 图文教学让你彻底理解activity启动模式
我们首先从最简单的开始, standard 这个模式就是默认的模式,我们都知道 当你用这个模式时,每次发送一个intent,都会生成一个新的实例! 我写一个简单的例子: <?xml versio ...
- 关于Xcode的项目文件夹
当我们在打开的项目中,对某个文件夹 Show in Finder的时候,发现对代码的分类文件夹没有全在一堆,在项目中明明对代码分了类,为什么在Finder中没有文件夹?? 这是因为,Xcode项目中的 ...
- AndroidManifest修改重打包全过程
AndroidManifest修改重打包全过程: 作者: 蔡建良 2013-06-26 准备工具:apktool.jar和signapk.jar 下载: http://download.csdn.ne ...
- nginx的配置,要求根据不同的来路域名,发送到不同的端口去处理
这一台电脑上既有tomcat 也有 apache,他俩是没有办法同时享用80端口的.我现在让tomcat用8088,apache用8080,然后让nginx用80,这样nginx在收到请求后,根据不同 ...
- CMake实践(3)
一,本期目标 [sun@localhost t3]$ cat README t3:静态库(.a)与动态库(.so)构建 任务:1,建立一个静态库和动态库,提供HelloFunc函数供其他程序编程 ...
- 创建Web API
引言 在公司中用到的都是webAPI的应用程序,这个东西之前没有接触过.但是这个并不是什么新鲜的东西,因我们 之前有mvc的基础,所以说学习这个东西还是比较容易的,在开始的时候自己可能突然蒙圈了.因为 ...
- SmartGit STUDY 2
The Index The Index is an intermediate cache for preparing a commit. With SmartGit, you can make hea ...
- YII Framework学习教程-YII的日志
日志的作用(此处省略1000字) YII中的日志很好很强大,允许你把日志信息存放到数据库,发送到制定email,存放咋文件中,意见显示页面是,甚至可以用来做性能分析. YII中日志的基本配置:/yii ...
- 【转】linux下cpio命令使用
转自:http://www.51testing.com/html/32/498132-816949.html 功能说明:备份文件. 补充说明:cpio是用来建立,还原备份档的工具程序,它可以加入,解开 ...
- Selenium2Library系列 keywords 之 _SelectElementKeywords
# 公有方法 (1)get_list_items(self, locator) 返回labels集合 _get_select_list_options(self, select_list_or_lo ...