有条件地绑定组件状态

Question

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

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

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

已解决

Fiddle https://fiddle.sencha.com/#fiddle/1itf

Answer 1

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

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

Answer 2

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

Many configs you will want to bind are boolean values, such as visible (or hidden), disabled, checked, and pressed. Bind templates support boolean negation "inline" in the template. Other forms of algebra are relegated to formulas (see below), but boolean inversion is common enough there is special provision for it.

基本上，您可以使用绑定来控制可见属性，但绑定需要是一个布尔值。您可以通过 '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}'
  }
}

有条件地绑定组件状态

Binding component state conditionally

javascript

binding

extjs

extjs5