Confusing using refs in controller config. When to use advance version?

[tthai]

I am confused when to use the simple one line refs or the more advanced refs in controller to get access to an xtype page.


Assume I have a page that shows a menu:

Ext.define('Flo.view.SiteMenu', {
    extend: 'Ext.List',
    xtype: 'sitemenu',
    id: 'site-menu',
    
    requires: [
    ],
    config: {
       ......

Then in my other views, I have a button which on tap, goes to this siteMenu page. This button lives on multiple pages. Also when this siteMenu page is activated via xtype 'sitemenu' it will respond to "activate". That means In my controller I will be doing a this.getSiteMenu();


This is from my "Home" controller refs:

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


    config: {


        refs: {
            


            siteMenuBtn: '#home-sitemenu-btn',
                      
            siteMenu: {           /// <-- use this??
                xtype: 'sitemenu',
                selector: 'site-menu',
                autoCreate: true
            },
            
            siteMenu: 'sitemenu'   //<--- OR  use this??

When and what is main difference?

[mitchellsimoens]

You should use the object if you need to use one of the options like autoCreate. If you don't then you can just use the string.

[tthai]

Hi Mitchell, yes I 'm aware of that. But when would I need to use the autoCreate one?

I'm having trouble because some of my controllers need to access the same xtype pages and there seems to be some conflicts. I don't have exact code, but is it normal to have the same refs within different controllers?

[mitchellsimoens]

I use autoCreate for my sheet components a lot, it will just create an instance if one is not set on the ref.