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,483
    Vote Rating
    35
    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,117
    Vote Rating
    507
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar