dynamically adding Tabs to TabPanels

[q_no]

Hi,

I'm trying to add "dynamic tabs" to a TabPanel, but for some reason the created panels are always empty.

I took http://tof2k.com/ext/formbuilder/ create my basic layout (nice tool btw). The result is:

{
layout:"border",
items:[{
    region:"center",
    items:[{
        xtype:"tabpanel",
        activeTab:0,
        items:[{
            xtype:"panel",
            title:"test",
            items:[{
                xtype:"form",
                title:"Form",
                items:[{
                    xtype:"textfield",
                    fieldLabel:"Text",
                    name:"textvalue"
                  },{
                    xtype:"timefield",
                    fieldLabel:"Time",
                    name:"timevalue"
                  }]
              },{
                xtype:"form",
                title:"Form",
                items:[{
                    xtype:"datefield",
                    fieldLabel:"Date",
                    name:"datevalue"
                  },{
                    xtype:"timefield",
                    fieldLabel:"Time",
                    name:"timevalue"
                  },{
                    xtype:"radio",
                    fieldLabel:"Label",
                    boxLabel:"Box label",
                    name:"radio",
                    inputValue:"radiovalue"
                  }]
              }]
          }]
      }]
  },{
    region:"north",
    height:30,
    items:[{
        layout:"fit",
        title:"FitLayout Container"
      }]
  },{
    region:"west",
    width:200
  }]
}

In step2, I've splittet the objects into parts to assign for instance the tabPanel to var. Now, on

				  var tab= {
				            xtype:"panel",
				            title:"test",
				            border:false,
				            defaults:{
				              collapsible:true
				            },
				            items:[{
				                xtype:"form",
				                title:"Form",
				                border:false,
				                items:[{
				                    xtype:"textfield",
				                    fieldLabel:"Text",
				                    name:"textvalue"
				                  },{
				                    xtype:"timefield",
				                    fieldLabel:"Time",
				                    name:"timevalue"
				                  }]
				              },{
				                xtype:"form",
				                title:"Form",
				                border:false,
				                items:[{
				                    xtype:"datefield",
				                    fieldLabel:"Date",
				                    name:"datevalue"
				                  },{
				                    xtype:"timefield",
				                    fieldLabel:"Time",
				                    name:"timevalue"
				                  },{
				                    xtype:"radio",
				                    fieldLabel:"Label",
				                    boxLabel:"Box label",
				                    name:"radio",
				                    inputValue:"radiovalue"
				                  }]
				              }]
				          };
			tabPanel.add(tab).show();

the created (tab)panel is always empty. The "instant code" from the GUI builder works fine, which makes be believe that I'm not trying to achieve something impossible.

How can I force Ext to render my panel's items?

[hendricd]

What container is the host for all that, Viewport ?

[q_no]

Yep, I have a Viewport containing the borderLayout. The center region contains the "var" (object) TabPanel mentioned above.

[hendricd]

Add deferredRender:false to your tabPanel.

[q_no]

I did, but it doesn't change anything at all

var tabPanel = new Ext.TabPanel({
	id:'centerTab',
  //xtype:"tabpanel",
  activeTab:0,
	layoutOnTabChange:true,
	deferredRender:false,
 	defaults:{
    border:false
  },
  border:false
 });

[Animal]

You have to call doLayout on a Container after adding a new Component to it.

[q_no]

hhmm.... I'm close to the edge to give up. Ok, I've created a testpage that does nothing more than creating the Viewport and adding a tab on button click:

<?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>test website</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf8">


	<link rel="stylesheet" type="text/css" href="/ccds_library/ext2.0/resources/css/ext-all.css" />
	<script type="text/javascript" src="/ccds_library/ext2.0/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="/ccds_library/ext2.0/ext-all.js"></script>
  <script type="text/javascript" src="/ccds/js/xajax_proxy.js"></script>

	<script type="text/javascript">
		var ccdsUI;
		Ext.onReady(function() {


		function testFunc() {
		
		
					var form1 = new Ext.form.FormPanel({
				                title:"Form",
				                border:false,
				                items:[{
				                    xtype:"textfield",
				                    fieldLabel:"Text",
				                    name:"textvalue"
				                  },{
				                    xtype:"timefield",
				                    fieldLabel:"Time",
				                    name:"timevalue"
				                  }]
				              });
					
				  var tab= new Ext.Panel({
				            //xtype:"panel",
				            title:"test",
				            border:false,
				            //layout:'column',
				            defaults:{
				              collapsible:true
				            },
				            items:[form1,
				            {
				                xtype:"form",
				                title:"Form",
				                border:false,
				                items:[{
				                    xtype:"datefield",
				                    fieldLabel:"Date",
				                    name:"datevalue"
				                  },{
				                    xtype:"timefield",
				                    fieldLabel:"Time",
				                    name:"timevalue"
				                  },{
				                    xtype:"radio",
				                    fieldLabel:"Label",
				                    boxLabel:"Box label",
				                    name:"radio",
				                    inputValue:"radiovalue"
				                  }]
				              }]
				          });
			tabPanel.add(tab).show();

			//centerRegion.doLayout();
			//tabPanel.doLayout();
			//tab.doLayout();
			//form1.doLayout();
		
	}

		var tabPanel = new Ext.TabPanel({
			    		id:'centerTab',
			        activeTab:0,
							layoutOnTabChange:true,
							deferredRender:false,
						 	defaults:{
			          border:false
			        },
			        border:false
			       });
		var centerRegion = new Ext.Panel ({
				    region:"center",
				    border:true,
				    items:[tabPanel]
				  });

			var bla=	new Ext.Viewport({
				layout:"border",
				border:true,
				defaults:{
				
				},
				items:[centerRegion,{
				    region:"north",
				    height:30,
				    items:[{
				        layout:"fit",
				        border:false,
               	tbar:[{
                      text: 'add Tab',
                      handler:testFunc
                  }
               	]

				      }]
				  },{
				    region:"west",
				    width:200,
				    border:true,
				    split:true,
            collapsible: true,
            margins:'0 0 0 5',
		        layout:"accordion",
		        layoutConfig:{
		          activeOnTop:false,
		          animate:false,
		          autoWidth:true,
		          collapseFirst:false,
		          fill:true,
		          hideCollapseTool:false,
		          titleCollapse:true
		        },
		        defaults:{border:false},
		        items:[
		        	{
		        		layout:'fit',
		            title:"Panel 2",
		            autoWidth:true,
		            autoScroll:true,
				        containerScroll: true 
		          }]
				  },{
				    region:"east",
				    width:200,
				    split:true,
				    border:true,
				    items:[{
				        layout:"fit",
				        title:"FitLayout Container",
				        border:false
				      }]
				  }]
			});

		});


	</script>
</head>
<body>

</body>
</html>

I really appreciate your suggestions, but either I'm to blind to find my mistake or Ext is tricking me. As you can see I've tried doLayout() in all available components. the center region, the tabPanel, the tabPanel's panel and even the form.
In firebug I can see that all divs/forms are created - firebug even highlights the areas where there forms are supposed to be, but I can't see anything else then bright white.

Any ideas Dr. Cox?

[Animal]

GO back to basics.

Create a Viewport with one TabPanel in it and a button.

In the button handler, create a Panel, addit to the TabPanel, and call doLayout on the TabPanel.

It works.

[NoahK17]

Animal is correct. Anytime you add a new tab to a tabpanel dynamically, you have to call doLayout() to render the new information properly.

Example:
mainPanel is the TabPanel in question. We are going to dynamically add another regular Panel to the TabPanel.

var p = mainPanel.add(new TabPanel({
  id: id,
  items: [
    yourPanelVariable
  ]
}));
  mainPanel.setActiveTab(p);
  mainPanel.doLayout();

[benmclendon]

Where are you getting "mainPanel" from?

The id assigned to my tabpanel is 'tabs', but firebug tells me that tabs is not defined.

Thanks!!