ExtJS renderTo element not found

Question

I have an MVC architecture, but when I try to make another TabPanel insite an existing one, I get this in the browser:

el is null

el = el.dom || Ext.getDom(el); ext-all-debug.js (line 12807)

From what I understand, it seems that the new TabPanel can't find the needed div for it to render. Anyway, here is the controller:

Ext.define('FI.controller.MainController', {
extend: 'Ext.app.Controller',
id: 'mainController',
views: ['MainTabPanel', 'UnitsTabPanel', 'SummariesTabPanel'],
mainTabPanel : {}, 
unitsTabPanel : {},
summariesTabPanel : {},
init: function(){
    console.log("main controller is init");
    console.log(this);

    this.control({
        'mainTabPanel':{
            afterrender: this.onCreate
        }
    });


    this.mainTabPanel = Ext.widget('mainTabPanel');
},

onCreate: function(){
    console.log("main tab panel is created");
    console.log(this);
    this.unitsTabPanel = Ext.widget('unitsTabPanel');
    this.summariesTabPanel = Ext.widget('summariesTabPanel');
}
});

This is the MainTabPanel:

Ext.define("FI.view.MainTabPanel", {
extend: 'Ext.tab.Panel',
renderTo:'container',
alias: 'widget.mainTabPanel',
enableTabScroll: true,
items:[{
        title:'Units',
        html: "<div id='units'></div>",
        closable: false
    },
    {title: 'Summaries',
        html: "<div id='summaries'></div>",
        closable:false
    }
]
});

And this is the SummariesTabPanel(the one with problems):

Ext.define("FI.view.SummariesTabPanel", {
extend: 'Ext.tab.Panel',
renderTo: 'summaries',
alias: 'widget.summariesTabPanel',
enableTabScroll: true
});

The problem is with the SummariesTabPanel. If I don't create it, the UnitsTabPanel gets rendered. For some reason, it can't find the summaries div.

Can you please tell me what is wrong?

Answer 1

The SummariesTabPanel renders to the "units" div according to your last snippet of code, is that correct? If not, replace renderTo: 'units' with renderTo: 'summaries'.

---

Edit

Since it was not the case, you may take a look ath this piece of Ext 4 Panel documentation (here: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Panel-cfg-html ) that says that the html content isn't added until the component is completely rendered. So, you have to wait for the afterrender event of the tab (not the tabpanel, as you do now) before you can actually get the DOM element.

If you instantiate this Panel

{title: 'Summaries',
 html: "<div id='summaries'></div>",
 closable:false
}

and store the pointer to it into a separate variable, you could listen to its afterrender event and try again.

A workaround to this could be using an existing element of the page (that is, a static html fragment) instead of adding it via the Panel's html config option.