Binding a field state (disabled or hidden) according to different selected values in a combobox

binding, extjs, extjs5, javascript

Solution

I reworded the formulas slightly and moved the AL||AK logic into the `hideAlabama` formula instead of it being in the disabled property. This keeps the `hidden` property to a single formula evaluation, as it seemed that multiple formula evaluations were not behaving as expected.

Ext.application({
    name : 'Fiddle',

    launch : function() {

    }
});

var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"AL", "name":"Alabama"},
        {"abbr":"AK", "name":"Alaska"},
        {"abbr":"AZ", "name":"Arizona"}
    ]
});

Ext.define('My.ViewModel', {
  extend: 'Ext.app.ViewModel',
  alias: 'viewmodel.myviewmodel',

  formulas: {
    hideAlabama: function(get) {
        return get('comboboxvalue') === 'AL' || get('comboboxvalue') === 'AK';

    },

    hideAlaska: function(get) {
      return get('comboboxvalue') === 'AK';
    },

    hideArizona: function(get) {
      return get('comboboxvalue') === 'AZ';
    }
  }
});

Ext.create('Ext.form.Panel', {
    title: 'Sign Up Form',
    width: 300,
    height: 230,
    bodyPadding: 10,
    margin: 10,

    layout: {
      type:'anchor',
        align: 'stretch'
    },

     viewModel:{
        type: 'myviewmodel'
    },

    items: [{
        xtype: 'combobox',
        fieldLabel: 'Choose State',
        store: states,
        queryMode: 'local',
        displayField: 'name',
        valueField: 'abbr',
        reference:'combobox',
        bind: {
            value: '{comboboxvalue}'
         }
    },{
        xtype: 'textfield',
        fieldLabel: 'If Alabama, hide',
        bind: {
            hidden: '{hideAlabama}'
         }
    },{
        xtype: 'textfield',
        fieldLabel: 'If Alaska, hide',
        bind: {
            hidden: '{hideAlaska}'
        }
    },{
        xtype: 'textfield',
        fieldLabel: 'If Arizona, hide',
        bind: {
            hidden: '{hideArizona}'
        }
    }],
    renderTo: Ext.getBody()
});

Problem

I want to binding a field state (disabled or hidden) according to different selected values in a combobox. If just one option is selected in combobox works great Fiddle: https://fiddle.sencha.com/#fiddle/1itf stackoverflow: Binding component state conditionally I tried the following way: ``` bind: { disabled: ('{isAlabama} || {isAlaska}') }, ``` Apparently it works. If I select Alabama or Alaska, the field Alabama is hidden. The problem is that when I select the combobox value Arizona should display the fields Alabama and Alaska, which does not, just show Alaska. Fiddle: https://fiddle.sencha.com/#fiddle/1j36 EDITED It is possible to do this with binding?

Original source