Изменение значения в одном numberfield на основе двух других полей

Question

создать 3 numberfields в виде:

{ 
      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

Вы можете использовать слушатели, прикрепить их к полям, чтобы определить, когда сделаны изменения, и выполнить расчет и обновить итоговое значение.

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 

Джек Мур построил пользовательскую функцию, которая, кажется, чтобы исправить это, которое я реализовал в 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() вместо этого.