PDA

View Full Version : Extjs 4.2 TabPanel does not allow tab w/ 'renderTo' being set



mike1993
24 Apr 2013, 8:24 AM
I am in process of migration from extjs 3 to 4 and had to replace 'applyTo' for 'renderTo'
And now it's not working. It does work as soon as 'renderTo' is removed but I'd appreciate if someone could tell me what is wrong w/ original code.

Thanks,
Mike


<div id="tab-panel" style="height: 800px;"></div>
<div id="main-tab" class="x-hidden" style="padding: 15px 10px 10px 10px;"></div>
<div id="activity-tab" class="x-hidden">
<div id="past-activity-form-div"></div>
<div id="public-signup-activity-form-div"></div>
<div id="pref-choice-form-div"></div>
</div>
<div id="active-msg-tab" class="x-hidden"">
<div id="active-messages-panel-div"></div>
</div>
</div>


var activatedMessagesGrid = Ext.create('Ext.Panel', {
renderTo: 'active-messages-panel-div',
title: 'Tab 3',
html: 'test me, test me, test me'
});

var mainTabPanel = Ext.create('Ext.TabPanel', {
renderTo: 'tab-panel',
activeTab: 0,
border: true,
deferredRender: true,
frame: false,
height: 800,
plain:true,
defaults:{
//autoHeight: true
},
items: [{
contentEl:'main-tab',
title: 'Tab1'
}, {
contentEl:'activity-tab',
title: 'Tab 2'
},
activatedMessagesGrid,
]
});

Error: (ext-all-debug.js (line 115725))

TypeError: ownerCt.el is undefined
[Break On This Error]
if (ownerCt && (ownerCtContext = me.context.items[ownerCt.el.id])) {

This is from
-----------
Ext.define('Ext.layout.ContextItem', {
...
constructor: function(config) {
...
}

slemmon
25 Apr 2013, 7:20 PM
The tabpanel as a container will manage the rendering of its child components (like activatedMessagesGrid). The only time you would need to use the renderTo explicitly is if the component you're rendering is being rendered directly to the document body (or one of its child elements).

The exception to that would be the viewport which itself is rendered to the document body automatically without needing to configure a renderTo.