ExtJS 5：绑定到其他类属性，例如 allowBlank答案

【问题标题】：ExtJS 5: bind to other class properties, like allowBlankExtJS 5：绑定到其他类属性，例如 allowBlank
【发布时间】：2015-10-27 03:22:45
【问题描述】：

我对允许绑定哪些配置值以及不允许绑定哪些配置值感到困惑。目前，不允许绑定allowBlank，因为我收到错误消息Ext.mixin.Bindable.applyBind(): Cannot bind allowBlank on Ext.form.field.ComboBox - missing a setAllowBlank method. 如果我使用配置，我不会收到错误消息，但它不能按预期工作：

xtype: 'combobox',
anchor: '100%',
fieldLabel: 'Affiliation',
name: 'AffiliationId',
displayField: 'Abbreviation',
valueField: 'AffiliationId',
queryMode: 'local',
typeAhead: true,
config: {
  forceSelection: true,
  allowBlank: false
},
bind: {
  store: '{affiliationStore}',
  allowBlank: '{allowBlankAffiliation}',
  forceSelection: '{forceSelectionAffiliation}'
}

我想知道的是，如何将allowBlank 或任何其他属性绑定到公式？这甚至可能吗，还是我完全不理解某些东西？如果是这样，我怎么知道我可以绑定什么，我不能绑定什么？

【问题讨论】：

另见 sencha.com/forum/… 带覆盖选项。

标签： javascript extjs mvvm data-binding extjs5

【解决方案1】：

只有带有setter的属性，一个set方法应该存在于docs中，才能被绑定。 'setAllowBlank' 不存在。 allowBlank 没有开箱即用的设置器，因为它没有放置在组合框对象的配置中。正如您在源代码中看到的那样：

http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/source/Text.html#Ext-form-field-Text-cfg-allowBlank

通过像您一样将allowBlank 设置到配置中，您只是在抑制错误。

您可以做的是扩展 ComboBox 并创建自定义配置属性。之后，您可以覆盖更新方法（由配置系统创建）并手动设置allowBlank。

Ext.define('MyComboBox', {
    extend: 'Ext.form.field.ComboBox',

    alias: 'widget.MyComboBox',

    config: {
        requireMe: false
    },

    // override of generated update method
    updateRequireMe: function(value) {
        this.allowBlank = !value;
    }
});

用法：

xtype: 'MyComboBox',
valueField: '_id',
displayField: 'name',
queryMode: 'local',
requireMe: '{!allowBlank}',
bind: {
    store: '{people}'
}

【讨论】：

非常有趣。这绝对消除了我对什么可以设置和不可以设置的困惑。谢谢！
请注意，类的构建方式可能无法应对 allowBlank 设置的更改。它的许多用途都是在 initComponent 期间完成的 - 这些设置不会在您更改 allowBlank 时更新
这样，该属性只在视图声明时设置一次。我进行了测试，验证工作正常。不过，我不确定以后是否要动态更改它。你可能是对的。但最初它以这种方式工作正常。

【解决方案2】：

Sencha 并不总是擅长区分配置变量和属性变量。你有时需要go to the source。

配置变量在config 块内定义。这些是生成 getter 和 setter 的变量，您可以绑定到这些变量。相比之下，属性直接在类的主体中定义。

您可能已经猜到了，allowBlank - 在 Ext.form.field.Text 类中定义 - 是直接定义的，因此是一个属性，即使它有一个 @cfg 文档标记。因此，它不能直接绑定。

不过，您可以使其可绑定 - 您只需定义正确的方法。最简单的方法是创建 Combobox 的子类，并添加如下部分：

config: { allowBlank: true }

然后在您的表单中使用该子类。但是请注意，这可能还不够；因为该类不期望 allowBlank 发生变化，所以它没有被连接来处理（例如更改验证器等）

【讨论】：

对我来说听起来不是一个好主意，创建一个现有属性的配置。在同一个原型上。总有一天你会遇到麻烦。
不应该；如果父类更改为将其包含为配置属性，则子类将不再自行创建函数。正如我最后指出的那样，我更担心更改属性可能会使类处于不一致的状态；它不是为改变而设计的。

【解决方案3】：

您可以绑定到具有相应“设置”方法的任何属性。例如，有一个 setStore() 方法，因此您可以绑定到“存储”。由于没有 setAllowBlank()，所以无法绑定。

【讨论】：

【解决方案4】：

线程https://www.sencha.com/forum/showthread.php?339465-Why-allowBlank-isn-t-bindable 建议可以覆盖基字段类而不是扩展它。

所以在我使用 extjs 5.1.1.1 的情况下，解决方案很简单：

Ext.define('AdminKit.form.field.override.Text', {
    override: 'Ext.form.field.Text',

    setAllowBlank: function(value) {
        this.allowBlank = value;
        this.validate();
    }
}

【讨论】：