How to use logical operators inside bind formulas in ExtJS?

Question

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

This doesn't seem to 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

Jaimee · Accepted Answer · 2015-12-11T23:11:58.383

7

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

As per the fiddle:

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}"
            }
        },            
    ],

}]

edited Dec 11 '15 at 23:11

answered Dec 11 '15 at 22:52

Jaimee

488
2
8

1

Well javascript would just resolve this into '{!field1.value}' before even reaching extjs. – serg Dec 11 '15 at 22:57
My bad, you're right. Hm. Another option is you could add a change listener to fields 1 and 2, check both for values, and enable/disable accordingly. – Jaimee Dec 11 '15 at 23:00
Yeah that's what I am currently doing, I am wondering if there is a simple "bind" way of doing it. – serg Dec 11 '15 at 23:01
That seems to get the job done, thanks. I will wait a bit longer maybe there is a simpler inline solution. – serg Dec 11 '15 at 23:27
This formula is a very good idea. There is a problem that in a while I try to solve in a similar case. When using property allowBlank : false in the fields somehow bind does not work properly. ie, after the fields have value if clear the field 1 or field 2, the third field is not disabled. Any idea how to solve this? fiddle: https://fiddle.sencha.com/#fiddle/12l0 – jose Dec 15 '15 at 20:45

score 1 · Answer 2 · answered Jul 13 '16 at 19:49

Add a formulas configuration to your ViewModel like this:

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

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

How to use logical operators inside bind formulas in ExtJS?

2 Answers2

Linked