[SOLVED] Combobox rendering error in viewport

[srajakaruna]

I have 2 formpanels in east region on a viewport. When the active tab changes in the center panel i want to swap the forms.

1. FormPanel 1 which displays on the screen by default loads correctly
2. When the tab changes i hide the 1st Formpanel and show the 2nd one. But it renders incorrectly (please see the attachment)

I set defaults:{hideMode:'offsets'} in both formpanels but still had no luck. Please help ...
.

[srajakaruna]

Could you please give me an idea on this ...

[devnull]

You havent included any code so theres not much we can offer.

[Condor]

Yes, you need hideMode:'offsets' on all panels in a CardLayout, but you also need layoutOnTabChange:true.

Unfortunately CardLayout doesn't have a layoutOnTabChange config option, so you'll have to call doLayout() after every page switch.

[srajakaruna]

This is the code i have now ..

its not solving the issue. are there any places i have to do more changes ?

frmPanel_1 = new Ext.FormPanel({
	id:'idFilterPanel_1',					   
	labelAlign: 'top',
	bodyStyle:'padding:7px 10px',
    name: 'projectFilterFrm1',
	method: 'POST',
    labelWidth: 75,
    border:false,
	hidden:false,
	defaults:{hideMode:'offsets'},
    items: [_selProj,_selProp,_frmDate,_toDate],
	tbar:[{
		id:'filtBut',
		text: 'Filter',
		iconCls:'filter-icon',
		handler: _filterProperty
		},'-',{
		id:'remFiltBut',
		text: 'Remove Filter',
		iconCls:'filter-icon',
		handler: _filterProperty
		}]
});

frmPanel_2 = new Ext.FormPanel({
	id:'idFilterPanel_2',					   
	labelAlign: 'top',
	bodyStyle:'padding:7px 10px',
    name: 'projectFilterFrm2',
	method: 'POST',
    labelWidth: 75,
    border:false,
	hidden:false,
	defaults:{hideMode:'offsets'},
    items: [_projChan],
	tbar:[{
		id:'filtBut2',
		text: 'Filter',
		iconCls:'filter-icon',
		handler: _filterProperty
		},'-',{
		id:'remFiltBut2',
		text: 'Remove Filter',
		iconCls:'filter-icon',
		handler: _filterProperty
		}]
});

Tab 2 activate

Ext.getCmp('idFilterPanel_1').hide();
Ext.getCmp('idFilterPanel_2').show();
Ext.getCmp('idFilterPanel_2').doLayout();

Tab 1 activate

Ext.getCmp('idFilterPanel_2').hide();
Ext.getCmp('idFilterPanel_1').show();
Ext.getCmp('idFilterPanel_1').doLayout();

[Condor]

hideMode:'offsets' is meant for the panels in a card layout, not for the items inside the panel.

Change:

defaults:{hideMode:'offsets'},

to

hideMode:'offsets',

Also, call doLayout on the panel with the card layout, not on the panel in the card layout.

[srajakaruna]

I did the following change. Even without the doLayout() it works fine.

defaults:{hideMode:'offsets'} >> hideMode:'offsets'

Thanks a lot