Javascript 有条件地绑定组件状态

我打算根据组合框中选择的值更改表单（隐藏）中几个字段的状态

这可以使用setVisible（）或setHidden（）等方法完成

使用绑定组件状态可以实现这个目标吗

解决

---

Fiddle

可能有一个更优雅的解决方案，但您可以在存储中添加一个属性以确定是否隐藏，然后绑定到该属性：

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

---

可能有更优雅的解决方案，但您可以将属性添加到存储中以确定是否隐藏，然后绑定到该属性：

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

对。使用。引用文件：

要绑定的许多配置都是布尔值，例如可见（或隐藏）、禁用、选中和按下。绑定模板在模板中支持布尔否定“inline”。代数的其他形式被归为公式（见下文），但布尔倒数法很常见，有专门的规定

基本上，可以使用绑定来控制visible属性，但绑定必须是布尔值。你可以通过你的“isAdmin”支票看到这一点。因此，您需要做的是在ViewModel上创建一个公式并绑定到该公式

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

要使用它，您需要说明您正在面板中使用此视图模型。也。。。您看到

comboboxvalue

位了吗？好吧，看起来组合框不会自动将其值属性发布到视图模型-您需要明确地这样做，如下所示：

{ xtype: 'combobox',
  fieldLabel: 'Choose State',
  store: states,
  queryMode: 'local',
  displayField: 'name',
  valueField: 'abbr',
  reference:'combobox',
  bind: {
    value: '{comboboxvalue}'
  }
}

对。使用。引用文件：

要绑定的许多配置都是布尔值，例如可见（或隐藏）、禁用、选中和按下。绑定模板在模板中支持布尔否定“inline”。代数的其他形式被归为公式（见下文），但布尔倒数法很常见，有专门的规定

基本上，可以使用绑定来控制visible属性，但绑定必须是布尔值。你可以通过你的“isAdmin”支票看到这一点。因此，您需要做的是在ViewModel上创建一个公式并绑定到该公式

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

要使用它，您需要说明您正在面板中使用此视图模型。也。。。您看到

comboboxvalue

位了吗？好吧，看起来组合框不会自动将其值属性发布到视图模型-您需要明确地这样做，如下所示：

{ xtype: 'combobox',
  fieldLabel: 'Choose State',
  store: states,
  queryMode: 'local',
  displayField: 'name',
  valueField: 'abbr',
  reference:'combobox',
  bind: {
    value: '{comboboxvalue}'
  }
}

---

谢谢米切沃尔克。这是一个有趣的解决方案，也是一个起点。但是，此解决方案不会根据组合框中选择的值动态隐藏字段：即，选择时，阿拉巴马州打算隐藏相应字段（或多个字段）并显示其他字段；当我选择Alaska值以隐藏相应的字段（或多个字段）并显示其他字段时，对于不同的情况，下面给出的帖子问题的答案使用了一些公式，如果进行适当的调整，这些公式可能是这种情况的一种可能解决方案。谢谢米切沃尔克。这是一个有趣的解决方案，也是一个起点。但是，此解决方案不会根据组合框中选择的值动态隐藏字段：即，选择时，阿拉巴马州打算隐藏相应字段（或多个字段）并显示其他字段；当我选择Alaska值以隐藏相应的字段（或多个字段）并显示其他字段时，对于不同的情况，下面给出的帖子问题的答案使用了一些公式，如果进行适当的调整，这些公式可能是这种情况的一种可能解决方案。谢谢你，罗伯特。效果很好。我编辑了我的小提琴宽度，谢谢你的解答。效果很好。我编辑了我的提琴宽度，你的解决方案。