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:

PHP Code:


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

talha06

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

**friend** · 13 Apr 2012, 6:16 AM

No need to call show() and no need to call doLayout().

Run this:

Code:

<!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.

Code:

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:

Code:

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:

Code:

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.

Code:

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

Thread: Unable to add panels to tabpanel dynamically?

Thread Tools

Search Thread

Display

Answered: Unable to add panels to tabpanel dynamically?

Tags for this Thread

Posting Permissions

Stay Connected

Stay Connected

Sign up for Sencha News