0

I intend to change the state of several fields in a form (hide) according to the value selected in a combobox.

This can be done using methods such as setVisible () or setHidden ().

It will be possible to achieve this goal using binding component state?

SOLVED

Fiddle https://fiddle.sencha.com/#fiddle/1itf

jose
  • 1,490
  • 3
  • 30
  • 65

2 Answers2

1

There may be a more elegant solution but you could add an attribute into your store to determine to hide or not, then bind to that attribute:

    Ext.application({
    name : 'Fiddle',

    launch : function() {

    }
});

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

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

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

    viewModel: true,

    items: [{
        xtype: 'checkbox',
        boxLabel: 'Is Admin',
        reference: 'isAdmin'
    },{
        xtype: 'textfield',
        fieldLabel: 'Admin Key',
        bind: {
            visible: '{!isAdmin.checked}'
        }
    },{

         xtype : 'menuseparator',
         width : '100%'
    },{
        xtype: 'combobox',
        fieldLabel: 'Choose State',
        store: states,
        queryMode: 'local',
        displayField: 'name',
        valueField: 'abbr',
        reference:'combobox'
    },{
        xtype: 'textfield',
        fieldLabel: 'If Alabama, hide',
        bind: {
            visible: '{combobox.selection.hide}'
         }
    },{
        xtype: 'textfield',
        fieldLabel: 'If Alaska, hide',
        bind: {
            visible: '{}'
        }
    },{
        xtype: 'textfield',
        fieldLabel: 'If Arizona, hide',
        bind: {
            visible: '{}'
        }
    }],
    renderTo: Ext.getBody()
});
michwalk
  • 323
  • 1
  • 5
  • Thanks michwalk. It is an interesting solution and a starting point. However, this solution does not dynamically hide fields according to the value selected in the combo box: That is, when is selected Alabama intend to hide the corresponding field (or more than one) and display other; when I select the Alaska value intend to hide the corresponding field (or more than one) and display others, and so on – jose Oct 20 '16 at 14:58
  • Although to a different case, the answer to the question of the post given below were used formulas that perhaps with proper adaptation could be a possible solution to this case. http://stackoverflow.com/questions/30065978/extjs-5-1-binding-record-value-to-component-property?rq=1 – jose Oct 20 '16 at 15:07
1

Yes. Using ViewModel formulas. Quoting from the documentation:

Many configs you will want to bind are boolean values, such as visible (or hidden), disabled, checked, and pressed. Bind templates support boolean negation "inline" in the template. Other forms of algebra are relegated to formulas (see below), but boolean inversion is common enough there is special provision for it.

Basically, you can using bindings to control the visible attribute, but the binding needs to be a boolean value. You can see that with your 'isAdmin' check. So what you need to do is create a formula on the ViewModel and bind to that.

Ext.define('My.ViewModel', {
  extend: 'Ext.app.ViewModel',
  formulas: {
    isAlabama: function(get) {
      return get('comboboxvalue') === 'AL';
    }
  }
}

To use this, you'll need to say that you're using this view model in your panel. Also... you see the comboboxvalue bit? Well, it looks like ComboBoxes don't publish their value attribute to the view model automatically - you need to do that explicitly, like so:

{ xtype: 'combobox',
  fieldLabel: 'Choose State',
  store: states,
  queryMode: 'local',
  displayField: 'name',
  valueField: 'abbr',
  reference:'combobox',
  bind: {
    value: '{comboboxvalue}'
  }
}
Robert Watkins
  • 2,196
  • 15
  • 17