PDA

View Full Version : Border layout expand state retained when switching between cards in card layout



ratishsp
15 Jan 2012, 8:48 AM
I have card layout. In the second card, I add panel with Border layout.
After navigating to the second card, I expand visConfig (panel on east).
I now navigate back to card1. I reset the layout for card2
When I now navigate to card2, the Border layout has visConfig expanded.

As per the code, the Border Layout should have been reset.

Please help me in fixing the issue.
I am testing the same on Ext JS 4.0.2 version




var navigate = function(panel, direction){
var layout = panel.getLayout();

if(direction === 'next'){
createShell();

}else{
removeShell();
}
layout[direction]();

Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
Ext.getCmp('move-next').setDisabled(!layout.getNext());
};


Ext.onReady(function() {
paintCards();
});


function paintCards(){


Ext.create('Ext.form.Panel', {
title: 'Example Wizard',
id:'wizard',
width: 700,
height: 700,
layout: 'card',
bodyStyle: 'padding:15px',
defaults: {
// applied to each contained panel
border: false
},
// just an example of one possible navigation scheme, using buttons
bbar: [
{
id: 'move-prev',
text: 'Back',
handler: function(btn) {
navigate(btn.up("panel"), "prev");
},
disabled: true
},
'->', // greedy spacer so that the buttons are aligned to each side
{
id: 'move-next',
text: 'Next',
handler: function(btn) {
navigate(btn.up("panel"), "next");
}
}
],
// the panels (or "cards") within the layout
items: [{
id: 'card-0',
html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 2</p>'
},{
id: 'card-1',
html: '<p>Step 2 of 2</p>'
}],
renderTo: Ext.getBody()
});


}


function createShell(){
Ext.create('Ext.form.Panel',{
id:'visShell',
width:600,
height:700,
layout:'border',
items:[
{
id:'visCanvas',
width:400,
height:500,
region:'center'
},
{
id:'visConfig',
width:200,
height:700,
region:'east',
collapsible:true,
collapsed:true
},
{
id:'visHelp',
width:600,
height:100,
region:'south',
collapsible:true,
collapsed:true
}
]
});

Ext.getCmp('card-1').add(Ext.getCmp('visShell'));



}


function removeShell(){
Ext.getCmp('visShell').destroy();
Ext.getCmp('card-1').removeAll(true);
}

mitchellsimoens
15 Jan 2012, 2:17 PM
I have moved this to the Ext JS 4 Q&A forum. Please post into the appropriate forum.

ratishsp
17 Jan 2012, 5:15 AM
On further digging, found configuration 'stateful' on Ext.state.Stateful.
This configuration helps caching properties such as width, height, collapsed state etc. By default, it is true. Set it to false.
And it worked !!
Tell me if my reading of this config attribute is correct.

Thanks,
Ratish