根据其他两个字段在一个数字字段中更改值

Question

我以一种形式创建3个数字字段：

{
            xtype: 'numberfield',
            fieldLabel: 'Inhuur',
            name: 'inhuurPrijs',
            inputId: 'inhuurPrijs',
            emptyText: '0'
        },
        {
            xtype: 'numberfield',
            fieldLabel: 'Marge %',
            inputId: 'inhuurMarge',
            emptyText: '0',
            maxValue: 100,
            minValue: -100
        },
        {
            xtype: 'numberfield',
            fieldLabel: 'Verhuur',
            inputId: 'verhuurPrijs',
            emptyText: '0'
        },

在字段“ inhuurPrijs”中，我填写一个数字。 例如100。基于字段“ inhuurMarge”，我要在“ verhuurPrijs”中定价。 inhuurMarge是一个百分比字段。 因此，当用户选择值“ 10”时，“ verhuurPrijs”应为110。

我试过听者，但听不到。 并且使其更加复杂.....如果我填写“ inhuurPrijs”和“ verhuurPrijs”，我想计算它们之间的百分比并将其放入“ inhuurMarge”

这有可能吗？

Answer 1

您可以使用侦听器，将它们附加到字段中以检测何时进行更改，并运行计算并更新总数。

小提琴

如果上面的链接断开，以下是代码：

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.create('Ext.form.Panel', {
            title: 'Basic Form',
            renderTo: Ext.getBody(),
            bodyPadding: 5,
            width: 350,

            defaults: {
                xtype: 'numberfield',
                listeners: {
                    change: function(field, newVal, oldVal) {
                        console.log("Calculating");
                        var amount = Ext.getCmp('fieldAmount').getValue();
                        var markup = Ext.getCmp('feildMarkup').getValue();
                        var total = Ext.getCmp('fieldTotal');
                        if (amount > 0 && markup > 0) {
                            total.setValue( 
                                amount + ((markup/amount) * 100)
                            );
                        }
                    }
                }
            },
            items: [{
                fieldLabel: 'amount',
                name: 'amount',
                id: 'fieldAmount'
            }, {
                fieldLabel: 'markup',
                name: 'markup',
                id: 'feildMarkup'
            }, {
                fieldLabel: 'total',
                name: 'total',
                id: 'fieldTotal'
            }]
        });
    }
});

注意：您可能应该禁用合计/计算字段，以便无法对其进行手动编辑。

Answer 2

我实现的另一种解决方案是在商店的update / datachanged事件上添加监听器，而不是在表单字段上添加监听器，这样，即使您从其他位置（甚至从控制台）更改数据，所有魔术也会发生，不仅是特定的表单。

myStore.on('update', function(store, rec, op, fields, details, eOpts){
    // run this only if desired fields have changed
    if (fields && fields.some(function(item){
            return /^amount/.test(item); // if field name starts with 'amount'
            //return ['field_1', 'or_field_2', 'percentage_3'].indexOf(item) >= 0; // validation based on custom names, of course that still can be done using RegEx
      })
    ) {
        // custom number round function, see bellow why
        var total = Ext.Number.round(rec.get('amount_one') * rec.get('amount_two') / 100);

        rec.set('total', total);
    }
 });

我在模型中有total字段，并从服务器（如果需要）检索它的默认值，但是我设置了persist: false在它上设置persist: false ，以便不将其发送回服务器。

关于自定义数字舍入方法，我发现JavaScript舍入方法不太精确，这意味着：

Number((1.005).toFixed(2)); // 1 instead of 1.01
Math.round(1.005*100)/100; // 1 instead of 1.01

杰克·摩尔（Jack Moore）构建了一个自定义函数，该函数似乎可以纠正我在Ext.Number类中实现的Ext.Number ，因此，所有功劳归功于他： http : //www.jacklmoore.com/notes/rounding-in-javascript/

function round(value, decimals) {
    return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
}

另一个改进是它使用的是直接记录访问（如果需要，甚至使用关联的数据），而不是像ComponentQuery那样性能不佳。

最近，我尽可能避免使用Ext.getCmp() ，但是如果我需要在视图（或事件父视图）中寻址组件，则可以使用this.getView().lookupReference()或.up()或.down()代替。