Question

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

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

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

解决

小提琴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。引自文档：

您想要绑定的许多配置都是布尔值，例如可见（或隐藏），禁用，检查和按下。绑定模板在模板中支持布尔否定“内联”。其他形式的代数被降级为公式（见下文），但布尔反转很常见，有特殊的规定。

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

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

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

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

有条件地绑定组件状态

2 个答案: