Связывание состояния поля (отключено или скрыто) в соответствии с различными выбранными значениями в combobox

Question

Я хочу привязать состояние поля (отключено или скрыто) в соответствии с различными выбранными значениями в выпадающем списке.

Если только один параметр выбран в выпадающем списке отлично работает

скрипку: https://fiddle.sencha.com/#fiddle/1itf

StackOverflow: Binding component state conditionally

Я попытался следующим образом:

bind: { 
     disabled: ('{isAlabama} || {isAlaska}') 
    }, 

Видимо это работает. Если я выберу Алабаму или Аляску, поле Алабама будет скрыто.

Проблема в том, что когда я выбираю значение combobox, Аризона должна отображать поля Алабама и Аляска, которые не показывают просто Аляску.

Fiddle: https://fiddle.sencha.com/#fiddle/1j36 EDITED

Можно сделать это с обязательным?

Answer 1

Я немного изменил формулы и переместил логику AL || AK в формулу hideAlabama вместо того, чтобы быть в отключенном состоянии. Это сохраняет свойство hidden для оценки одной формулы, поскольку казалось, что несколько оценок формулы не ведут себя так, как ожидалось.

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() 
});