我想根据组合框中不同的选定值来绑定(bind)字段状态(禁用或隐藏)。
如果在组合框中只选择一个选项效果很好
fiddle :https://fiddle.sencha.com/#fiddle/1itf
计算器:Binding component state conditionally
我尝试了以下方法:
bind: {
disabled: ('{isAlabama} || {isAlaska}')
},
显然它有效。如果我选择 Alabama 或 Alaska,Alabama 字段将被隐藏。
问题是当我选择组合框值时,Arizona 应该显示字段 阿拉巴马州和没有阿拉斯加的阿拉斯加只显示阿拉斯加。
fiddle :https://fiddle.sencha.com/#fiddle/1j36已编辑
可以通过绑定(bind)来做到这一点吗?
最佳答案
我稍微改写了公式并将 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()
});
关于javascript - 根据组合框中不同的选定值绑定(bind)字段状态(禁用或隐藏),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40217810/