Access root property in ExtJS custom view? / Duplicate components

Question

For testing purposes, I made 2 views. One that requires the other view. Now I want people to be able to open components multiple times as a tab, so I obviously have to assign unique ID's to each tab and element inside of the component, right?

My question is, how can I access one of the root properties in a view from say the docketItems object? In the code below, it will cause an undefined this.varindex error at id: 'accountSearchField' + this.varindex,. varindex is dynamically assigned from the other component. (I hardcoded it in the example code below)

Note that I will not know the exact ID, so I can not use something such as Ext.getCmp. I could make use of Ext.ComponentQuery.query('searchAccount') but perhaps there is a better way to do this?

Listed below is a portion of the code that is required by my main component.

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 will generate IDs for DOM elements and ensure they are unique to the page, so it is unusual to use the id attribute for referencing components. There are two configuration properties with this purpose, itemId and reference.

There are multiple methods that can be used to acquire a component by itemId from a parent container or globally.

• Ext.container.Container.getComponent
• Ext.container.Container.query
• Ext.container.Container.down
• Ext.container.Container.child
• Ext.ComponentQuery.query

Additionally, components can be acquired by Ext.app.Controllers using the refs configuration. These methods take a selector string. The selector for an itemId is the itemId prefixed with '#' (e.g. '#itemId'). You do not specify the '#' when configuring a component with an itemId.

Introduced along with support for MVVM in Ext JS 5, the reference identifier is unique to the component's container or ViewController. A component can be acquired by reference from components or ViewControllers using lookupReference. The lookupReference method takes only references as input and therefore, does not require a prefix.

If you want to be able to reference a component associated with a particular model instance (account), you can define the component class with an alias and configure the reference or itemId when you add each instance to the container.

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

In this example, an account's associated panel can be acquired later on using the account number.

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

Answer 2

Actually I may have figured it out. I simply moved the items inside of the beforerender event and made use of the this.add() function.