在 ExtJS 6 中将 ext.getCmp 转换为 up() 或 down() 不返回任何内容

Question

我最近读到使用 Ext.getCmp 被认为不是很好，所以我正在研究我的应用程序，将它们转换为推荐的 up() 或 down() 方法。

我又遇到了一个小问题。在我的登录控制器中，它似乎无法正常工作，我也不知道为什么。我带有 Ext.getCmp 的原始控制器如下所示；

onLoginClick: function() {

    let formValues = this.getView().down('form').getValues();

    Application.login(formValues.email, formValues.password).then(function() {

        this.getView().destroy();

    }.bind(this), function(data) {
        Ext.getCmp('loginissues').setValue(data.message).show();
    });

}

我的看法有点像这样;

items: [{
    xtype: 'displayfield',
    id: 'loginissues',
    hidden: true
}, {
    xtype: 'textfield',
    id: 'email',
    name: 'email',
    fieldLabel: 'Email',
    allowBlank: true
}, {
    name: 'password',
    inputType: 'password',
    fieldLabel: 'Password',
    allowBlank: true
}]

所以基本上发生的事情是，如果从 API 返回失败，它会将消息加载到显示字段中，然后取消隐藏它。这一切都很完美，但是如果我将视图中的 id 更改为 itemId，然后将 Ext.getCmp 调用更改为如下所示，它根本不会执行任何操作。

this.getView().down('#loginissues').setValue(data.message).show();

没有错误或任何错误。

Answer 1

只用这部分代码分解:

this.getView().down('#loginissues')

如果您能够成功获取引用，请检查控制台。否则将 "down" 更改为 "up" 函数。

你也可以试试：

Ext.ComponentQuery.query('#loginissues')

虽然此方法搜索整个 DOM，但它不受视图布局变化的影响。元素在 DOM 中的位置很重要，控制位于您执行 "up" 的位置的元素在下方。所以 "up" 有效。如果它（#loginissues）在控制之下，那么 "down" 将起作用。这（"up" 和 "down" 函数）是 DOM 中的计算优化搜索。搜索将只发生一半，因此我们将比组件查询更快地捕获引用。

在 ExtJS 6 中将 ext.getCmp 转换为 up() 或 down() 不返回任何内容

Converting ext.getCmp to up() or down() in ExtJS 6 not returning anything

javascript

extjs

extjs6