How to use logical operators inside bind formulas in ExtJS?

Question

I have 3 input fields on the form and you want to make the third input enabled only when the first two inputs have values.

This does not work:

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

In the view model, add a formula to return the value for {! field1.value} || {! Field1.value}

According to the violin:

 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

Add the formula formula to your ViewModel as follows:

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

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