Extjs 中的 refs 有什么意义？答案

【问题标题】：What is the point of refs in Extjs?Extjs 中的 refs 有什么意义？
【发布时间】：2016-12-15 10:27:15
【问题描述】：

我仍在尝试理解 refs 在 Extjs 中的意义。关于这个主题的文档似乎非常缺乏。

Refs 应该让生活更轻松，但我发现事实恰恰相反，我想知道是不是因为我没有充分利用它们。

如果我在控制器中使用 ref 作为组合，我可能会有这样的代码：

refs: [{
    ref: 'maritalStatusCombo',
    selector: 'combo[name="maritalstatus"]',
}]

myFunction: function () {
    var comp = this.getMaritalStatusCombo();
}

但是我可以像这样轻松编写代码：

var maritalStatusComboSelector = 'combo[name="maritalstatus"]'

myFunction: function () {
    var comp = Ext.ComponentQuery.query(maritalStatusComboSelector)
}

第二个版本使用更少的文字（..我认为），并且更易于理解 IMO。

我的 IDE 也更好地理解了第二个。

如果我在选择器字符串上选择 'navigate to..'，它会将我直接带到顶部的声明。在第一个示例中，'navigate to..' getMaritalStatusCombo() 函数不会带我去任何地方。

裁判应该如何让生活更轻松？

【问题讨论】：

它们在 Ext4 中有一些优点，可以避免重复/多次指定选择器 - 但值得注意的是 refs 在 Ext5 及更高版本中的 ViewControllers 上不存在 - 它们使用不同的类型参考（和常规控制器往往最终不被用于“查看”相关的东西）。关键是，就升级框架而言，采用refs 并没有真正的优势——所以如果它们不适合你，忽略它们也没有什么坏处。

标签： extjs extjs4

【解决方案1】：

refs 配置在控制器上创建一个 getter 方法，该方法在内部使用 Ext.ComponentQuery 使用配置的选择器获取组件实例。以下示例将 getList 方法添加到控制器，并将返回应用程序层次结构中 xtype 为“grid”的第一个组件。默认情况下，当查询没有找到目标组件时会返回undefined。

Ext.define('MyApp.controller.Foo', {
    extend: 'Ext.app.Controller',

    refs: [{
        ref: 'list',
        selector: 'grid'
    }]
});

因此，您可以简单地使用“选择器”xtype 在第一个元素上创建一个 getter 方法。我经常在表单中使用它，例如，在我的登录控制器上，我可以简单地使用 getForm 来获取我的表单。

显然你可以像你告诉我们的那样创建你自己的方法，但是使用 refs 是完全一样的，你可以使用 refs 属性数组创建很多方法，而不需要为每个需要的单个组件创建大量的 getter。

我知道这是一种将吸气剂集中在一个地方的简单方法。

【讨论】：