Question

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

我的问题是，如何从docketItems对象中访问视图中的一个根属性？在下面的代码中，它会在this.varindex处导致未定义的id: 'accountSearchField' + 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

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

有多种方法可用于从父容器或全局范围内通过itemId获取组件。

此外，Ext.app.Controllers可以使用refs配置获取组件。这些方法采用selector字符串。 itemId的选择器是以＆＃39;＃＆＃39;为前缀的itemId。（例如＆＃39;＃itemId＆＃39;）。您没有指定＆＃39;＃＆＃39;使用itemId配置组件时。

在Ext JS 5中引入了对MVVM的支持，reference标识符对于组件的容器或ViewController是唯一的。可以使用lookupReference通过组件或ViewControllers引用来获取组件。 lookupReference方法仅将引用作为输入，因此不需要前缀。

如果您希望能够引用与特定模型实例（帐户）关联的组件，则可以使用alias定义组件类，并在将每个实例添加到容器时配置引用或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'));

Answer 2

其实我可能已经弄明白了。我只是简单地移动了prerender事件中的项目并使用了this.add()函数。

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

2 个答案: