在 ExtJS 自定义视图中访问 root 属性？ / 重复组件

Question

出于测试目的，我做了2个视图。一个需要另一个视图。现在我希望人们能够将组件作为选项卡多次打开，所以我显然必须为组件内的每个选项卡和元素分配唯一 ID，对吗？

我的问题是，如何从 docketItems 对象访问视图中的根属性之一？在下面的代码中，它将在 id: 'accountSearchField' + this.varindex, 处导致未定义的 this.varindex 错误。 varindex 是从其他组件动态分配的。（我在下面的示例代码中对其进行了硬编码）

请注意，我不知道确切的 ID，所以我不能使用诸如 Ext.getCmp 之类的东西。我可以使用 Ext.ComponentQuery.query('searchAccount') 但也许有更好的方法来做到这一点？

下面列出了我的主要组件所需的部分代码。

Ext.define('cp.views.search.Account', {     
    extend: 'Ext.panel.Panel',       
    xtype: 'searchAccount',
    varindex: "uniqueid_assigned_by_main_component",
    listeners: {
        beforerender: function(){
            this.id = 'panelSearchAccount' + this.varindex
        }
    },
    items: [
        {
            xtype: 'grid',
            store: {
                type: 'Account'
            },
            id: 'searchAccount' + this.varindex,
            columns: [
                ///
            ],
            dockedItems: [
            {
                xtype: 'fieldset',
                items: [
                    {
                        id: 'accountSearchField' + this.varindex,
                        xtype: 'searchfield'
                    }
                ]
            }]
        }
    ]
});

Answer 1

其实我可能已经想通了。我只是将项目移动到 beforerender 事件中并使用了 this.add() 函数。

Answer 2

Ext 将为 DOM 元素生成 ID 并确保它们在页面中是唯一的，因此使用 id 属性引用组件是不常见的。有两个配置属性用于此目的，itemId 和 reference。

itemId 从父容器或全局获取组件有多种方法。

此外，组件可以通过 Ext.app.Controllers 使用 refs configuration. These methods take a selector 字符串获取。 itemId 的选择器是带有“#”前缀的 itemId（例如“#itemId”）。使用 itemId 配置组件时未指定“#”。

在 Ext JS 5 中引入了对 MVVM 的支持，reference identifier is unique to the component's container or ViewController. A component can be acquired by reference from components or ViewControllers using lookupReference。 lookupReference 方法仅将引用作为输入，因此不需要前缀。

如果您希望能够引用与特定模型实例（帐户）关联的组件，您可以使用 alias 定义组件 class 并在您配置引用或 itemId 时将每个实例添加到容器中。

for (var i = 0, ilen = accountModels.length; i < ilen; ++i) {
   container.add({
      xtype: 'accountpanel',
      reference: accountModel[i].get('accountNumber')
   });
}

在此示例中，稍后可以使用帐号获取帐户的关联面板。

var accountPanel = this.lookupReference(accountModel.get('accountNumber'));

在 ExtJS 自定义视图中访问 root 属性？ / 重复组件

Access root property in ExtJS custom view? / Duplicate components

extjs

extjs6-classic