CODEWITHSUNDEEP
layoutextjs
Eugene Anthony
Eugene Anthony

Reputation: 49

ExtJS Card Layout

I used the card layout to switch between two created panels: 

var config = {
layout: 'card',
region : 'center',
activeItem: 0,
defaults : {
//height : 160
},
items : [this.ePanel, this.dPanel]
};
Ext.apply(this, config);

The switching takes place based on criteria:

if(params.exchange==='ABCD'){
l.setActiveItem(this.ePanel.id);
} else {    
l.setActiveItem(this.dPanel.id);
}

As I switch between panels one of the panel contents get distorted. Are there any solutions to the problem? I am using ExtJS 2.2.

Upvotes: 0

Views: 1861

Answers (1)

rixo
rixo

Reputation: 25031

I've never used Ext2, but I've encountered similar difficulties with Ext3. Here are two ideas you can try...

  • Setting deferredRender to true.

  • Calling doLayout after setActiveItem, possibly after a small delay (because rendering is often deferred in Ext):

    l.setActiveItem(this.ePanel.id);
setTimeout(function() {
    l.doLayout();
}, 100); // more may be needed, one need to inspect Ext's code to know the precise value

    doLayout is often the solution to layout issues, but it also generally requires a serious amount of debugging in order to have it applied. In effect, layouts are cached (at least in Ext3), so your call can be ignored if Ext consider internally that nothing has changed. Furthermore, as I've already said, rendering is often deferred, so if you don't delay it enough, your doLayout call may be executed before the child elements have been rendered...

Upvotes: 1

Related Questions