PDA

View Full Version : Unable to add panels to tabpanel dynamically?



talha06
13 Apr 2012, 5:44 AM
Hi everyone,

I'm trying to add panels to tabpanel dynamically. Once I select a leaf from tree, I'm creating a panel that I defined before and trying to push it to the tabpanel that is rendered on center region.

Here's what I tried:

var aboutPanel = Ext.create('Ext4Playground.view.panel.AboutPanel');Ext.getCmp('centerPanel').add(aboutPanel).show();Ext.getCmp('centerPanel').doLayout();

I'll be happy if someone can help me.
Thanks in advance.
With regards,
T

friend
13 Apr 2012, 6:16 AM
No need to call show() and no need to call doLayout().


Run this:



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Dynamic Tab Test</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

<script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
xtype: 'panel',
frame: true,
height: 60,
html: '<span style="font-size: 24px;">Banner Text</span>',
layout: 'fit',
title: 'North Region',
region: 'north'
},{
xtype: 'panel',
region: 'west',
collapsible: true,
frame: true,
items: [{
xtype: 'button',
text: 'Add Tab',
handler: function() {
var tp = Ext.ComponentQuery.query('#tabPanel')[0];
var tabs = tp.items.length;
var newTab = tabs+1;
tp.add({
xtype: 'panel',
html: 'New Tab ' + newTab,
title: 'Tab ' + newTab
});
tp.setActiveTab(tabs);
}
}],
title: 'Menu Panel',
width: 150,
},{
xtype: 'tabpanel',
region: 'center',
itemId: 'tabPanel',
items: [{
xtype: 'panel',
html: 'Tab 1',
title: 'Tab 1'
}]
}]
});

});
</script>
</head>

<body>
</body>
</html>

talha06
13 Apr 2012, 6:36 AM
Thanks for the reply; but it's still same. I'm not able to see the created panel in the tabpanel. But as before, when I logged the tabpanel, it has 2 items.


var aboutPanel = Ext.create('Ext4Playground.view.panel.AboutPanel');Ext.getCmp('centerPanel').add(aboutPanel);
Ext.getCmp('centerPanel').setActiveTab(2);

dlamee
13 Apr 2012, 7:59 AM
Try this:


Ext.getCmp('centerPanel').setActiveTab(1);

The parameter of setActiveTab can be a tab, index or id, but since it's an index in this situation, it needs to be 0-based. And actually, a better way to do it (using indexes) would be to do this:


var centerPnl=Ext.getCmp('centerPanel');
centerPnl.setActiveTab(centerPnl.items.getCount()-1);

-
Dan

talha06
13 Apr 2012, 9:10 AM
Nothing has changed, still I'm not able to see added panel. By the way I know I'll use "
centerPnl.items.getCount()-1"; but this is just demo to see that adding panels dynamically.

dlamee
13 Apr 2012, 9:37 AM
Is centerPnl the actual tab panel? If it's not, that may be the issue.

In any case, here's a complete example that works fine for me.


Ext.onReady(function(){
Ext.create('Ext.Window', {

title:'Tab Panel Example',
width: 400,
height: 300,
x: 10,
y: 10,
layout: 'fit',

tbar: {

items: [

{

text: 'About',
handler: function(btn) {

var aboutPnl = Ext.create('Ext.panel.Panel', {

title: 'About',
html: 'About Panel'

});

var tpanel = btn.up('window').down('tabpanel');
tpanel.add(aboutPnl);
tpanel.setActiveTab(tpanel.items.getCount()-1);

}

}

]

},

items: {

xtype: 'tabpanel',

items: [{

title: 'Tab 1',

html: 'panel 1'

}]

}

}).show();
});

-
Dan

talha06
13 Apr 2012, 9:40 AM
centerPnl is the panel that is rendered at the center region; I'm trying to add items to it. Anyway, thanks a lot for your interest.

talha06
13 Apr 2012, 1:55 PM
Actually I found the solution; the problem occured because of a predefined component ID that is assigned to the tabpanel. Thanks a lot everyone who attached importance.

With best regards,
T