extjs 两个文本框输入值 另一个文本框的值自动计算

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了extjs 两个文本框输入值 另一个文本框的值自动计算相关的知识,希望对你有一定的参考价值。

自动计算这两个文本框的积(就是乘法)
var txtAmount = new Ext.form.TextField(
fieldLabel : '数量',
name : 'purchaseVo.amount',
allowBlank : false
);
var txtUnitPrice = new Ext.form.TextField(
fieldLabel : '单价',
name : 'purchaseVo.unitPrice',
allowBlank : false
);
var txtTotalMoney = new Ext.form.TextField(
fieldLabel : '总金额',
name : 'purchaseVo.totalMoney',
allowBlank : false
);
//自动计算总金额的方法是不是放在总金额那里

input自带方法oninput & onpropertychange 监听事件

<html>
<head>
    <title></title>
    <script type="text/javascript">
        function OnInput(event) //兼容其他浏览器及IE9以上版本
            alert("当前值: " + event.target.value);
        
        // Internet Explorer
        function OnPropChanged(event) //兼容IE9以下版本
            if (event.propertyName.toLowerCase() == "value") 
                alert("当前值: " + event.srcElement.value)
            
        
    </script>
</head>
<body>
    <input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)">
</body>
</html>

提示到这里,怎么实现还是自己想办法较好!

如有问题请继续追问,望采纳!

追问

我补充了代码,就是那个方法怎么写

追答

方法不是已经给你了吗,在两个需要计算的文本框加上oninput和onpropertychange属性,然后调用你的算法,算了代码给你粘出来!

<html>
<head>
    <title></title>
    <script type="text/javascript">
        function OnInput() //兼容其他浏览器及IE9以上版本
            var a = eval(document.getElementById('a')).value;//Jquery:var a=$("#a").val();
            var b = eval(document.getElementById('b')).value;
            var d = a * b;
            document.getElementById("c").value = d;      
        
        // Internet Explorer
        function OnPropChanged(event) //兼容IE9以下版本
            var a = eval(document.getElementById('a')).value;//Jquery:var a=$("#a").val();
            var b = eval(document.getElementById('b')).value;
            var d = a * b;
            document.getElementById("c").value = d;
        
    </script>
</head>
<body>
    <input type="text" id="a" oninput="OnInput()" onpropertychange="OnPropChanged()">
    *<input type="text" id="b" oninput="OnInput()" onpropertychange="OnPropChanged()">
    =<input type="text" id="c"value="">
</body>
</html>

参考技术A

参考下,校验什么的需要自己完善下

Ext.create('Ext.form.Panel', 
    title: 'Contact Info',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [
        xtype: 'textfield',
        itemId: 'num1',
        fieldLabel: '数值1',
vtype: 'alphanum',
listeners:
blur:function(obj)
debugger;
   var num3 = obj.ownerCt.getComponent('num3');
   var num2 = obj.ownerCt.getComponent('num2').value;
   if(num2!=null)
   num3.setValue(obj.value*num2);
 
 
    , 
        xtype: 'textfield',
        itemId: 'num2',
        fieldLabel: '数值2',
vtype: 'alphanum',
listeners:
blur:function(obj)
   var num3 = obj.ownerCt.getComponent('num3');
   var num1 = obj.ownerCt.getComponent('num1').value;
   if(num1!=null)
   num3.setValue(obj.value*num1);
 

    , 
        xtype: 'textfield',
        itemId: 'num3',
        fieldLabel: '乘积' 
    ]
);

追问

我补充了代码,就是那个方法怎么写

追答

是数量和单价输入完成后就完成计算
如果有先后顺序的话,哪个后输入完,就放在哪里做计算

追问

哈喽你写的这 debugger;是用来干嘛的,调试?

追答

是的,需要多熟悉下api
有疑问可以到群里问下

追问

好像没有反应。。

追答

用ff或者chrome, 打开后按f12
再操作

追问

没有火狐和谷歌。。用了其他浏览器按了f12没有提示错误,一定要用这两个浏览器吗- -,这个f12我最近也在用的,两个listeners都要写吗,我都放进去了。

追答

要确认下数量和单价有没有要求输入的顺序

如果没有的话,两个都要加了,如果有,就加在后面输入的那个控件
debugger 不会提示错误额
你可以在debugger前加alert

参考技术B +-/乘都有。。。。 参考技术C 在第二个文本框焦点离开后给第3个赋值就好了追问

能具体点吗,我初学

追答

在定义第2个文本框的时候添加listners:blur:function()事件 该事件里面填写获取第1 2 两个文本框的值 然后相乘 给第3个赋值就可以了

以上是关于extjs 两个文本框输入值 另一个文本框的值自动计算的主要内容,如果未能解决你的问题,请参考以下文章

winform中文本框的值怎么保存

jquery中判断两个文本框输入的值是不是相等

js里如何判断两个文本框的值是不是一样?

js 自动计算输入框的值

两个多行文本框的乘积并将其显示到另一个多行文本框

C#中怎样从一个form的文本框获取另一个form中Comobox控件的值