extjs binding with formulas

Question

I'm trying to do textfiled binding in extjs with the following conditions. What i'm doing wrong?

1. Need to display three textfields where by default 2nd and 3rd textfields will be disabled.
2. Second textfield should enable only when first field value is entered.
3. third should be enabled only when first and second values are entered.

the fiddle.

Answer 1

You have forgotten to bind the second field value to 'field2'. This sample works:

Ext.application({
  name: 'Fiddle',

  launch: function () {
    Ext.define('MyViewModel', {

        extend: 'Ext.app.ViewModel',

        alias: 'viewmodel.myvm',
        data: {
            field1: '',
            field2: '',
            field3: ''
        },
        formulas: {
            fieldTwoDisabled: function (get) {
                return Ext.isEmpty(get('field1'));
            },
            fieldThreeDisabled: function (get) {
                return !(!Ext.isEmpty(get('field1')) && !Ext.isEmpty(get('field2')));
            }
        }

    });


    Ext.create({
        xtype: 'panel',
        title: 'VM Demo',
        fullscreen: true,
        defaults: {
            xtype: 'textfield'
        },
        viewModel: {
            type: 'myvm'
        },

        items: [{
            label: 'Field 1',
            bind: '{field1}'
        }, {
            label: 'Field 2',
            bind: {
                value: '{field2}', // THIS BINDING IS FORGOTTEN
                disabled: '{fieldTwoDisabled}'
            }
        }, {
            label: 'Field 3',
            bind: {
                disabled: '{fieldThreeDisabled}'
            }
        }]
    })
  }
});