Wie verwenden Sie logische Operatoren in Bindungsformeln in ExtJS?

Question

Ich habe 3 Eingabefelder in einem Formular und möchte den dritten Eingang erst aktivieren, wenn die ersten beiden Eingänge Werte haben.

Dies scheint nicht zu funktionieren:

Ext.define('MyApp.view.myobj.MyPanel', { 
    extend:'Ext.Panel', 

    viewModel: {}, 

    items: [{ 
     xtype: 'form', 
     defaultType: 'textfield', 
     items: [ 
      {fieldLabel: 'Field 1', reference: 'field1', publishes: 'value'}, 
      {fieldLabel: 'Field 2', reference: 'field2', publishes: 'value'}, 
      { 
       fieldLabel: 'Field 3', 
       bind: { 
        disabled: '{!field1.value} || {!field2.value}' 
       } 
      },    
     ], 
    }], 
}); 

Fiddle

Answer 1

Im View-Modell, eine Formel fügen Sie den Wert für {field1.value!} Zurück || {! Field1.value}

Gemäß der Geige:

viewModel: { 
    formulas: { 
     something: { 
      bind: { 
       x: '{!field1.value}', 
       y: '{!field2.value}' 
      }, 

      get: function (data) { 
       if (data.x || data.y) return true; 
       else return false; 
      } 
     } 
    } 
}, 

items: [{ 
    xtype: 'form', 
    defaultType: 'textfield', 
    bodyPadding: 10, 
    items: [ 
     {fieldLabel: 'Field 1', reference: 'field1', publishes: 'value'}, 
     {fieldLabel: 'Field 2', reference: 'field2', publishes: 'value'}, 
     { 
      fieldLabel: 'Field 3', 
      bind: { 
       disabled: "{something}" 
      } 
     },    
    ], 

}] 

Answer 2

eine Formeln Konfiguration auf Ihre Ansichtsmodell wie folgt hinzufügen:

formulas : { 
     showSomeComponent : function (get) { 
      return get('isAuthorized') && !get('isDisabled'); 
     } 
    } 

http://docs.sencha.com/extjs/5.1.0/Ext.app.ViewModel.html#cfg-formulas