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'和＆amp; 'verhuurPrijs'我想计算它们之间的百分比并将其置于'inhuurMarge'

这可能是一种形式吗？

Answer 1

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

Fiddle

以下是上述链接中断的代码：

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);
    }
 });

我的模型中有总字段，并从服务器中检索它的默认值（如果需要），但我在其上设置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课程中实现的功能，所以所有这些都归功于他：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()。

根据另外两个字段更改一个数字字段中的值

2 个答案: