콤보 상자에서 선택한 여러 값에 따라 필드 상태 바인딩 (사용 안 함 또는 숨김)

Question

콤보 상자에서 선택한 여러 값에 따라 필드 상태 (사용 안 함 또는 숨김)를 바인딩하고 싶습니다. https://fiddle.sencha.com/#fiddle/1itf이

유래 :

Binding component state conditionally 나는 다음과 같은 방법을 시도 :

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

가 분명히 작동 하나의 옵션이 콤보 상자를 선택하면

큰

바이올린을 작동합니다. 알라바마 또는 알래스카를 선택하면 앨라배마 필드가 숨겨집니다.

문제는 내가 콤보 상자 값을 선택할 때 애리조나가 알래스카를 표시하는 알래스카와 알래스카의 필드를 표시해야한다는 것입니다.

바이올린 : 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() 
});