有条件地绑定组件状态

Question

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

这可以使用 setVisible () 或 setHidden () 等方法来完成。

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

已解决

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

Answer 1

是的。使用ViewModel formulas。引用文档：

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

基本上，您可以使用绑定来控制可见属性，但绑定需要是布尔值。您可以通过“isAdmin”检查看到这一点。所以你需要做的是在 ViewModel 上创建一个公式并绑定到它。

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

要使用它，您需要在面板中说明您正在使用此视图模型。另外...你看到comboboxvalue 位了吗？好吧，看起来 ComboBox 不会自动将其 value 属性发布到视图模型 - 您需要明确地这样做，如下所示：

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

Answer 2

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

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