根据组合框中不同的选定值绑定字段状态(禁用或隐藏)

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

本文关键字：状态 字段 绑定 隐藏 组合      更新时间：2023-09-26

我想根据组合框中不同的选择值绑定字段状态(禁用或隐藏)。

如果在组合框中只选择一个选项，效果很好

小提琴:https://fiddle.sencha.com/小提琴/1 itf

stackoverflow:有条件绑定组件状态

我尝试了以下方法:

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

显然它有效。如果我选择Alabama或Alaska，字段Alabama将被隐藏。

问题是，当我选择组合框值时，亚利桑那应该显示字段阿拉巴马州和阿拉斯加州，没有，只显示阿拉斯加州。

小提琴:https://fiddle.sencha.com/#fiddle/1j36 EDITED

是否可以通过绑定来实现?

我稍微改写了公式，并将AL||AK逻辑移动到hideAlabama公式中，而不是将其放在disabled属性中。这使得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()
});
相关文章：