ExtJS 5：绑定到其他 class 属性，例如 allowBlank

Question

我对允许绑定哪些配置值以及不允许绑定哪些配置值感到困惑。目前，不允许绑定 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 或任何其他属性绑定到公式？这甚至可能吗，还是我完全不了解某些东西？如果是这样，我怎么知道我可以绑定什么和不能绑定什么？

Answer 1

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

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

的主体中定义

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

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

config: { allowBlank: true }

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

Answer 2

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

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}'
}

Answer 3

您可以绑定到任何具有相应 "set" 方法的属性。例如，有一个 setStore() 方法，因此您可以绑定到 "store"。因为没有setAllowBlank()，所以不能绑定。

Answer 4

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

所以在我使用 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();
    }
}

ExtJS 5：绑定到其他 class 属性，例如 allowBlank

ExtJS 5: bind to other class properties, like allowBlank

javascript

data-binding

extjs

mvvm

extjs5