有条件地绑定组件状态 [英] Binding component state conditionally

问题描述

我打算根据组合框中选择的值以某种形式(隐藏)更改多个字段的状态.

I intend to change the state of several fields in a form (hide) according to the value selected in a combobox.

这可以使用setVisible()或setHidden()之类的方法来完成.

This can be done using methods such as setVisible () or setHidden ().

是否可以使用绑定组件状态来实现此目标?

It will be possible to achieve this goal using binding component state?

已解决

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

推荐答案

是.使用 ViewModel公式 .从文档中引用:

Yes. Using ViewModel formulas. Quoting from the documentation:

您要绑定的许多配置都是布尔值，例如可见(或隐藏)，禁用，选中和按下.绑定模板在模板中支持布尔取反内联".其他形式的代数都归结为公式(请参见下文)，但是布尔求反很常见，为此有特殊规定.

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.

基本上，您可以使用绑定来控制visible属性，但是绑定必须是布尔值.您可以通过"isAdmin"检查看到这一点.因此，您需要在ViewModel上创建一个公式并将其绑定.

Basically, you can using bindings to control the visible attribute, but the binding needs to be a boolean value. You can see that with your 'isAdmin' check. So what you need to do is create a formula on the ViewModel and bind to that.

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

要使用此视图，您需要说您正在面板中使用此视图模型.另外...您看到comboboxvalue位吗?好吧，看来ComboBoxes不会自动将其value属性发布到视图模型-您需要明确地这样做，就像这样:

To use this, you'll need to say that you're using this view model in your panel. Also... you see the comboboxvalue bit? Well, it looks like ComboBoxes don't publish their value attribute to the view model automatically - you need to do that explicitly, like so:

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

这篇关于有条件地绑定组件状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！