ExtJs框架之Form中自动计算总金额

首先，先给大家说先这款ExtJs的框架，本人也是在用到后才知道有这么一个框架软件。问了下公司的前端同事，好吧，他也不知道这个。前端都不知道，看来这个框架并没有被广泛的应用到。至少耳熟能详的有JQuery还是知道的。那么ExtJs到底是什么：

extjs是一种软件。自动生成行号，支持checkbox 全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。这个是在百度百科粘过来的

这里不在具体细说这个框架的由来了，毕竟这篇文章不是简史介绍。

这次记录下来的是本人在功能开发过程中一个很正常的需求。需求是单价、数量、总金额。可能我这样一写朋友们就知道我们的这个需求是什么了吧，就是要总金额自动填写吗。很简单吗，取值做运算就可以了，我也是这么想的。由于本人主要是做Android客户端开发的，已安大人的思想就是事件监听了吗。结果证明我的想法是没毛病的。毛病就是我取不到值啊，大写的尴尬啊，放着金山银山不能花好痛苦。查了好多网上的资料，但是就是不可以只能是看api了。

首先，思路是正确的，监听事件listener，还有一点说明就是本次的是单纯的form的事件监听，其他单独grid、grid和form一起的会有一点不同。所以不要生搬硬套，要看清楚哦！！！！！

先把我的页面截图展示出来

在把我的代码部分贴出来在给大家细细解说：

{
					fieldLabel : "数量",
					name : "qty",
					id : "qty",
					xtype: "numberfield",
					labelWidth : 70,
					align : "center",
					allowBlank : false,
					defaultValue : 1,
					listeners : {
						change : function(obj, newValue, oldValue) {
							if (newValue != oldValue) {
								valueQTY = newValue;
								valueRPrice = obj.ownerCt
										.getComponent('rPrice').getValue();
								var rMoney = obj.ownerCt
										.getComponent('rMoney');

								if (newValue != null
										&& valueRPrice != null) {
									valueRMoney2 = valueRPrice*valueQTY;
									rMoney.setValue(valueRMoney2);
								} else {
									Ext.MessageBox.alert("错误提示", "金额输入有误")
								}
							}
						}
					}
				},{
					fieldLabel : "单价",
					name : "rPrice",
					id : "rPrice",
					xtype: "numberfield",
					labelWidth : 70,
					align : "center",
					allowBlank : false,
					defaultValue : 0,
					listeners : {
						change : function(obj, newValue, oldValue) {
							if (newValue != oldValue) {
								valueRPrice = newValue;
								valueqty = obj.ownerCt
										.getComponent('qty').getValue();
								var rMoney = obj.ownerCt
										.getComponent('rMoney');

								if (newValue != null
										&& valueqty != null) {
									valueRMoney2 = valueRPrice*valueqty;
									rMoney.setValue(valueRMoney2);
								} else {
									Ext.MessageBox.alert("错误提示", "金额输入有误")
								}
							}
						}
					}
				},{
					fieldLabel : "总价",
					name : "rMoney",
					id : "rMoney",
					xtype: "numberfield",
					labelWidth : 70,
					align : "center",
					readOnly:true,
					allowBlank : false
				}

我的前端采用了mvc模式，这些都是放在了json里。listeners是放事件的集合，可以放多个，这个都是没问题的。其实头疼的问题就是在取值了。在这里取值用的是obj.ownerCt.getComponent('id值')，这个是所有问题的关键（记住是id值，name属性是取不到值的），用其他的方法取值一直不成功，后来研究可能是和我的mvc模式有关。其他的东西就不用再细说了。

本次文章所说的方法有几个要注意的地方：

一、这个是在form里进行的自动更新计算，如果是单独grid或者是form、grid组合的形式是有一点点不同的，如果有人需要，之后会在贴出其他形式的方法。

二、类型number 并且要有初始值，不要让其默认取到null值。

三、取值标识是id

最后，希望我的分享能到帮助需要的你！！！！！！！！！！！！！！！！！！

ExtJs框架之Form中自动计算总金额

猜你喜欢