1. #1
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    germany
    Posts
    52
    Vote Rating
    0
    q_no is on a distinguished road

      0  

    Default dynamically adding Tabs to TabPanels

    dynamically adding Tabs to TabPanels


    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:
    Code:
    {
    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

    Code:
    				  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?

  2. #2
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    What container is the host for all that, Viewport ?
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    germany
    Posts
    52
    Vote Rating
    0
    q_no is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    Add deferredRender:false to your tabPanel.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  5. #5
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    germany
    Posts
    52
    Vote Rating
    0
    q_no is on a distinguished road

      0  

    Default


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

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

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,499
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


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

  7. #7
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    germany
    Posts
    52
    Vote Rating
    0
    q_no is on a distinguished road

      0  

    Default


    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:

    Code:
    <?
    <!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?

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,499
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  9. #9
    Ext JS Premium Member NoahK17's Avatar
    Join Date
    Apr 2008
    Location
    Atlanta, GA
    Posts
    518
    Vote Rating
    1
    NoahK17 is on a distinguished road

      0  

    Default


    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.
    Code:
    var p = mainPanel.add(new TabPanel({
      id: id,
      items: [
        yourPanelVariable
      ]
    }));
      mainPanel.setActiveTab(p);
      mainPanel.doLayout();

  10. #10
    Sencha User benmclendon's Avatar
    Join Date
    Jul 2008
    Location
    Valdosta, GA
    Posts
    70
    Vote Rating
    1
    benmclendon is on a distinguished road

      0  

    Default


    Where are you getting "mainPanel" from?

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

    Thanks!!

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi