Results 1 to 8 of 8

Thread: Unable to add panels to tabpanel dynamically?

  1. #1
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    327
    Answers
    10

    Default Answered: Unable to add panels to tabpanel dynamically?

    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
    "People will never forget how you made them feel."
    linkedin.com/in/talhakabakus

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

  3. #2
    Sencha User friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106

    Default

    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>

  4. #3
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    327
    Answers
    10

    Default

    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);
    "People will never forget how you made them feel."
    linkedin.com/in/talhakabakus

  5. #4
    Ext JS Premium Member
    Join Date
    Aug 2011
    Posts
    17

    Default

    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

  6. #5
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    327
    Answers
    10

    Default

    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.
    "People will never forget how you made them feel."
    linkedin.com/in/talhakabakus

  7. #6
    Ext JS Premium Member
    Join Date
    Aug 2011
    Posts
    17

    Default

    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

  8. #7
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    327
    Answers
    10

    Default

    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.
    "People will never forget how you made them feel."
    linkedin.com/in/talhakabakus

  9. #8
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    327
    Answers
    10

    Default

    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
    "People will never forget how you made them feel."
    linkedin.com/in/talhakabakus

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •