1. #1
    Ext User
    Join Date
    Oct 2007
    Posts
    50
    Vote Rating
    0
    robiechahine is on a distinguished road

      0  

    Default tabpanel content not showing

    tabpanel content not showing


    Hello I ve been at this for one whole day now and I just couldnt figure out the problem

    Problem:
    I have a window that displays 4 tabs
    I placed a couple of form fields in the first tab and everything works fine (view attachment).
    but then I copied the content of the first tab and placed it in another tab. I did this because both tabs will contain similar layout and fileds.
    However when i try to duplicate the content of the first tab into the second tab I get nothing in the second tab. (view second attachment)

    could some help out?

    here is my code:

    Code:
    function HtmlTableWizard() {
    	var ComboRecord = Ext.data.Record.create([
            {name: 'item', type: 'string'}
        ]);
        
    	var fontComboStore = new Ext.data.SimpleStore({
            fields: ['abbr'],
            data: [['Arial'],['Courier New'],['Tahoma'],['Times New Roman'],['Verdana']],
            reader: new Ext.data.ArrayReader({},ComboRecord)
        }); 
        
        var fontFaceComboStore = new Ext.data.SimpleStore({
            fields: ['abbr'],
            data: [['inherit'],['pt(points)'],['pc(picas)'],['px(pixel)'],['em(ems)'],['ex(e-height)'],['%(percent)'],['xx-small'],['x-small)'],['small'],['medium'],['large'],['x-large'],['xx-large'],['smaller'],['larger']],
            reader: new Ext.data.ArrayReader({},ComboRecord)
        }); 
        
        var lineStyleComboStore = new Ext.data.SimpleStore({
            fields: ['abbr'],
            data: [['inherit'],['pt(points)'],['pc(picas)'],['px(pixel)'],['em(ems)'],['%(percent)']],
            reader: new Ext.data.ArrayReader({},ComboRecord)
        });
        
        var fontStyleComboStore = new Ext.data.SimpleStore({
            fields: ['abbr'],
            data: [['inherit'],['normal'],['italic'],['oblique']],
            reader: new Ext.data.ArrayReader({},ComboRecord)
        });
        
        var fontVariantComboStore = new Ext.data.SimpleStore({
            fields: ['abbr'],
            data: [['inherit'],['normal'],['small-caps']],
            reader: new Ext.data.ArrayReader({},ComboRecord)
        });
        
        var fontWeightComboStore = new Ext.data.SimpleStore({
            fields: ['abbr'],
            data: [['inherit'],['normal'],['bold'],['lighter'],['bolder'],['100'],['200'],['300'],['400'],['500'],['600'],['700'],['800'],['900']],
            reader: new Ext.data.ArrayReader({},ComboRecord)
        });
        
    	var htmlTable = new Ext.FormPanel({
            labelAlign: 'top',
            frame:true,
            bodyStyle:'padding:5px 5px 0',
            width: 600,
            items:{
            	xtype:'tabpanel',
                activeTab: 0,
                defaults:{autoHeight:true, bodyStyle:'padding:10px'}, 
                items:[{
                    title:'Fonts',
    		        items: [{
    		            layout:'column',
    		            items:[{
    		            	defaultType: 'textfield',
    		            	bodyStyle:'padding:5px 5px 0',
    				        items: [{
    				            layout:'column',
    					        xtype:'fieldset',
    					        title:'Font Family',
    					        autoHeight:true,
    				            defaults: {width: 210},
    				            items: [{
    				            	layout:'form',
    				            	items:[{
    			                		columnWidth:.5,
    			                		layout: 'form',
    			                		style:'font-size: 8px',
    			                		items: [{
    			                    		fieldLabel: 'primary',
    			                    		name: 'primary',
    			                    		tooltip:'Fonts',
    								        xtype:'combo',
    							            store: fontComboStore,
    							            valueField:'abbr',
    							            displayField:'abbr',
    							            typeAhead: true,
    							            mode: 'local',
    							            triggerAction: 'all',
    							            emptyText:'Fonts...',
    							            selectOnFocus:true,
    			                    		anchor:'95%'
    			                		}]
    			            		},{
    			                		columnWidth:.5,
    			                		layout: 'form',
    			                		items: [{
    			                    		fieldLabel: 'new secondary',
    			                    		name: 'newsecondary',
    			                    		tooltip:'Fonts',
    								        xtype:'combo',
    							            store: fontComboStore,
    							            valueField:'abbr',
    							            displayField:'abbr',
    							            typeAhead: true,
    							            mode: 'local',
    							            triggerAction: 'all',
    							            emptyText:'Fonts...',
    							            selectOnFocus:true,
    			                    		anchor:'95%'
    			                		}]
    			            		},{
    			                		columnWidth:.5,
    			                		layout: 'form',
    			                		items: [{
    			                    		fieldLabel: 'secondary',
    			                    		name: 'secondary',
    			                    		tooltip:'Fonts',
    								        xtype:'textarea',
    			                    		anchor:'95%',
    			                    		height:97
    			                		}]
    			            		},{
    			                		columnWidth:.5,
    			                		layout: 'form',
    			                		items: [{
    			                    		name: 'add',
    			                    		tooltip:'Fonts',
    								        xtype:'button',
    								        text:'add'
    			                		}]
    			            		}]
    				            }]
    			            }]
    		            },{
    		               //column 2
    		               defaultType: 'textfield',
    		               bodyStyle:'padding:5px 5px 0',
    				        items: [{
    				            layout:'column',
    					        xtype:'fieldset',
    					        title:'Font Style',
    					        autoHeight:true,
    				            defaults: {width: 210},
    				            
    			               items: [{
    				            	layout:'column',
    				            	items:[{
    			                		columnWidth:.5,
    			                		layout: 'form',
    			                		items: [{
    			                    		xtype:'textfield',
    										fieldLabel: 'font-size',
    			                    		name: 'font-size',
    			                    		anchor:'95%'
    			                		}, {
    			                    		xtype:'textfield',
    			                    		fieldLabel: 'line-height',
    			                    		name: 'line-height',
    			                    		anchor:'95%'
    			                		}]
    			            		},{
    			                		columnWidth:.5,
    			                		layout: 'form',
    			                		items: [{
    			                    		fieldLabel: '',
    			                    		name: 'fontFaceCombo',
    			                    		tooltip:'font-size',
    								        xtype:'combo',
    							            store: fontFaceComboStore,
    							            valueField:'abbr',
    							            displayField:'abbr',
    							            typeAhead: true,
    							            mode: 'local',
    							            triggerAction: 'all',
    							            emptyText:'inherit',
    							            selectOnFocus:true,
    			                    		anchor:'95%'
    			                		},{
    			                    		fieldLabel: '',
    			                    		name: 'lineStyleCombo',
    			                    		tooltip:'line-height',
    								        xtype:'combo',
    							            store: lineStyleComboStore,
    							            valueField:'abbr',
    							            displayField:'abbr',
    							            typeAhead: true,
    							            mode: 'local',
    							            triggerAction: 'all',
    							            emptyText:'inherit',
    							            selectOnFocus:true,
    			                    		anchor:'95%'
    			                		}]
    			            		}]
    				            },{
    				            	layout: 'form',
    				            	items:[{
    	            					defaultType: 'textfield',
    	            					bodyStyle:'padding:5px 5px 0',
    		                    		fieldLabel: 'font-style',
    		                    		name: 'fontStyleCombo',
    		                    		tooltip:'font-style',
    							        xtype:'combo',
    						            store: fontStyleComboStore,
    						            valueField:'abbr',
    						            displayField:'abbr',
    						            typeAhead: true,
    						            mode: 'local',
    						            triggerAction: 'all',
    						            emptyText:'inherit',
    						            selectOnFocus:true,
    		                    		anchor:'98%'
    		                		},{
    	            					defaultType: 'textfield',
    	            					bodyStyle:'padding:5px 5px 0',
    		                    		fieldLabel: 'font-variant',
    		                    		name: 'fontVariantCombo',
    		                    		tooltip:'font-variant',
    							        xtype:'combo',
    						            store: fontVariantComboStore,
    						            valueField:'abbr',
    						            displayField:'abbr',
    						            typeAhead: true,
    						            mode: 'local',
    						            triggerAction: 'all',
    						            emptyText:'inherit',
    						            selectOnFocus:true,
    		                    		anchor:'98%'
    		                		},{
    	            					defaultType: 'textfield',
    	            					bodyStyle:'padding:5px 5px 0',
    		                    		fieldLabel: 'font-weight',
    		                    		name: 'fontWeightCombo',
    		                    		tooltip:'font-variant',
    							        xtype:'combo',
    						            store: fontWeightComboStore,
    						            valueField:'abbr',
    						            displayField:'abbr',
    						            typeAhead: true,
    						            mode: 'local',
    						            triggerAction: 'all',
    						            emptyText:'inherit',
    						            selectOnFocus:true,
    		                    		anchor:'98%'
    		                		}]
    	                		}]
    			            }]
    		            }]
    		        }]
    	        },{
    				title: 'Box'
    			},{
    				title: 'Border'
    			},{
                    title:'Fonts2',
    		        items: [{
    		            layout:'column',
    		            items:[{
    		            	defaultType: 'textfield',
    		            	bodyStyle:'padding:5px 5px 0',
    				        items: [{
    				            layout:'column',
    					        xtype:'fieldset',
    					        title:'Font Family',
    					        autoHeight:true,
    				            defaults: {width: 210},
    				            items: [{
    				            	layout:'form',
    				            	items:[{
    			                		columnWidth:.5,
    			                		layout: 'form',
    			                		style:'font-size: 8px',
    			                		items: [{
    			                    		fieldLabel: 'primary',
    			                    		name: 'primary2',
    			                    		tooltip:'Fonts',
    								        xtype:'combo',
    							            store: fontComboStore,
    							            valueField:'abbr',
    							            displayField:'abbr',
    							            typeAhead: true,
    							            mode: 'local',
    							            triggerAction: 'all',
    							            emptyText:'Fonts...',
    							            selectOnFocus:true,
    			                    		anchor:'95%'
    			                		}]
    			            		},{
    			                		columnWidth:.5,
    			                		layout: 'form',
    			                		items: [{
    			                    		fieldLabel: 'new secondary',
    			                    		name: 'newsecondary2',
    			                    		tooltip:'Fonts',
    								        xtype:'combo',
    							            store: fontComboStore,
    							            valueField:'abbr',
    							            displayField:'abbr',
    							            typeAhead: true,
    							            mode: 'local',
    							            triggerAction: 'all',
    							            emptyText:'Fonts...',
    							            selectOnFocus:true,
    			                    		anchor:'95%'
    			                		}]
    			            		},{
    			                		columnWidth:.5,
    			                		layout: 'form',
    			                		items: [{
    			                    		fieldLabel: 'secondary',
    			                    		name: 'secondary2',
    			                    		tooltip:'Fonts',
    								        xtype:'textarea',
    			                    		anchor:'95%',
    			                    		height:97
    			                		}]
    			            		},{
    			                		columnWidth:.5,
    			                		layout: 'form',
    			                		items: [{
    			                    		name: 'add2',
    			                    		tooltip:'Fonts',
    								        xtype:'button',
    								        text:'add'
    			                		}]
    			            		}]
    				            }]
    			            }]
    		            },{
    		               //column 2
    		               defaultType: 'textfield',
    		               bodyStyle:'padding:5px 5px 0',
    				        items: [{
    				            layout:'column',
    					        xtype:'fieldset',
    					        title:'Font Style',
    					        autoHeight:true,
    				            defaults: {width: 210},
    				            
    			               items: [{
    				            	layout:'column',
    				            	items:[{
    			                		columnWidth:.5,
    			                		layout: 'form',
    			                		items: [{
    			                    		xtype:'textfield',
    										fieldLabel: 'font-size',
    			                    		name: 'font-size2',
    			                    		anchor:'95%'
    			                		}, {
    			                    		xtype:'textfield',
    			                    		fieldLabel: 'line-height',
    			                    		name: 'line-height2',
    			                    		anchor:'95%'
    			                		}]
    			            		},{
    			                		columnWidth:.5,
    			                		layout: 'form',
    			                		items: [{
    			                    		fieldLabel: '',
    			                    		name: 'fontFaceCombo2',
    			                    		tooltip:'font-size',
    								        xtype:'combo',
    							            store: fontFaceComboStore,
    							            valueField:'abbr',
    							            displayField:'abbr',
    							            typeAhead: true,
    							            mode: 'local',
    							            triggerAction: 'all',
    							            emptyText:'inherit',
    							            selectOnFocus:true,
    			                    		anchor:'95%'
    			                		},{
    			                    		fieldLabel: '',
    			                    		name: 'lineStyleCombo2',
    			                    		tooltip:'line-height',
    								        xtype:'combo',
    							            store: lineStyleComboStore,
    							            valueField:'abbr',
    							            displayField:'abbr',
    							            typeAhead: true,
    							            mode: 'local',
    							            triggerAction: 'all',
    							            emptyText:'inherit',
    							            selectOnFocus:true,
    			                    		anchor:'95%'
    			                		}]
    			            		}]
    				            },{
    				            	layout: 'form',
    				            	items:[{
    	            					defaultType: 'textfield',
    	            					bodyStyle:'padding:5px 5px 0',
    		                    		fieldLabel: 'font-style',
    		                    		name: 'fontStyleCombo2',
    		                    		tooltip:'font-style',
    							        xtype:'combo',
    						            store: fontStyleComboStore,
    						            valueField:'abbr',
    						            displayField:'abbr',
    						            typeAhead: true,
    						            mode: 'local',
    						            triggerAction: 'all',
    						            emptyText:'inherit',
    						            selectOnFocus:true,
    		                    		anchor:'98%'
    		                		},{
    	            					defaultType: 'textfield',
    	            					bodyStyle:'padding:5px 5px 0',
    		                    		fieldLabel: 'font-variant',
    		                    		name: 'fontVariantCombo2',
    		                    		tooltip:'font-variant',
    							        xtype:'combo',
    						            store: fontVariantComboStore,
    						            valueField:'abbr',
    						            displayField:'abbr',
    						            typeAhead: true,
    						            mode: 'local',
    						            triggerAction: 'all',
    						            emptyText:'inherit',
    						            selectOnFocus:true,
    		                    		anchor:'98%'
    		                		},{
    	            					defaultType: 'textfield',
    	            					bodyStyle:'padding:5px 5px 0',
    		                    		fieldLabel: 'font-weight',
    		                    		name: 'fontWeightCombo2',
    		                    		tooltip:'font-variant',
    							        xtype:'combo',
    						            store: fontWeightComboStore,
    						            valueField:'abbr',
    						            displayField:'abbr',
    						            typeAhead: true,
    						            mode: 'local',
    						            triggerAction: 'all',
    						            emptyText:'inherit',
    						            selectOnFocus:true,
    		                    		anchor:'98%'
    		                		}]
    	                		}]
    			            }]
    		            }]
    		        }]
    	        }]
            }
        });
    
        var htmlWizardwindow = new Ext.Window({
        	id:'HtmlTableProperties',
            title: 'CSS Editor',
            width: 560,
            height:445,
            minWidth: 560,
            minHeight: 445,
            layout: 'fit',
            plain:true,
            bodyStyle:'padding:7px;',
            buttonAlign:'right',
            items: htmlTable,
    		
            buttons: [{
                text: 'OK',
                handler:function(){
    				insertHTMLTable(2, 2);
    				htmlWizardwindow.close();
            	}
            },{
                text: 'Cancel',
                handler:function(){ htmlWizardwindow.close(); }
            }]
        });
        htmlWizardwindow.show();
    }
    Attached Images

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

      0  

    Default


    A word of advce.

    Nobody will read your code unless you put code tags round it. I fixed it for you for now...

  3. #3
    Ext User
    Join Date
    Oct 2007
    Posts
    50
    Vote Rating
    0
    robiechahine is on a distinguished road

      0  

    Default


    Thanks Animal.

    Any idea why I am unable to see the content of another tab.?
    while doing some further debuging I noticed this:
    I added the following line the first fieldset item of the content located in the second tab

    checkboxToggle:true,

    so now I am able to see the checkbox. when i click the check box I am able to see the form fileds.
    However if i remove the checkboxToggle thingy I see nothing again.

  4. #4
    Ext User
    Join Date
    Oct 2007
    Posts
    50
    Vote Rating
    0
    robiechahine is on a distinguished road

      0  

    Default


    ok if anyone cares. I had to add a listener for every tab to force it to render itself. I am not sure if this is the best or only way. I still have hope that someone will shed some light on this matter.

    Code:
    listeners: {
                    	'activate': function(){
                    		this.doLayout();
    					}
                	},

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,832
    Vote Rating
    609
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    On your tab panel, set:

    Code:
    layoutOnTabChange: true

  6. #6
    Ext User
    Join Date
    Oct 2007
    Posts
    50
    Vote Rating
    0
    robiechahine is on a distinguished road

      0  

    Default


    ah, thanks. A much cleaner solution.

Thread Participants: 2

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