PDA

View Full Version : Div not found



ID91
22 Jun 2012, 3:40 AM
I am trying to create a TabPanel within another TabPanel, but it seems that the second one can't find the div for the renderTo property, although it has been previously created.

You can find more details here:

http://stackoverflow.com/questions/11154693/extjs-renderto-element-not-found

Please let me know if you need more information.

Any idea is helpful.

friend
22 Jun 2012, 4:44 AM
You should use the parent Tab Panels add() (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.tab.Panel-method-add)method when adding child Tab Panels.

ID91
22 Jun 2012, 5:33 AM
I need to add some other panels to specific tabs. How should I do that. Your solution doesn't seem to work.

scottmartin
22 Jun 2012, 6:23 AM
Is this what you are looking for?



Ext.define('My.subtabpanel', {
extend: 'Ext.tab.Panel',
alias: 'widget.subtabpanel',
items: [{
title: 'Foo11'},
{
title: 'Bar12'}]
});

Ext.define('My.maintabpanel', {
extend: 'Ext.tab.Panel',
alias: 'widget.maintabpanel',
width: 400,
height: 400,
items: [{
xtype: 'subtabpanel',
title: 'main tab1'
},
{
title: 'main tab2'
}]
});

Ext.create('My.maintabpanel', {
renderTo: Ext.getBody()
});


Scott.

ID91
22 Jun 2012, 6:41 AM
Yep. That's it! Thank you!
Can I add content dynamically?
I mean, can I do this after the main panel is rendered?

scottmartin
22 Jun 2012, 6:51 AM
Do you mean like this?




Ext.define('My.subtabpanel', {
extend: 'Ext.tab.Panel',
alias: 'widget.subtabpanel',
items: [{
title: 'Foo11'},
{
title: 'Bar12'}]
});

Ext.define('My.maintabpanel', {
extend: 'Ext.tab.Panel',
alias: 'widget.maintabpanel',
width: 400,
height: 400,
items: []
});

var mp = Ext.create('My.maintabpanel', {
renderTo: Ext.getBody()
});

var sp = Ext.create('My.subtabpanel', {
title: 'My New panel'
});

mp.add(sp);
mp.add( Ext.create('Ext.panel.Panel', { title: 'some panel' }) );


Scott.