PDA

View Full Version : changing the width of a panel



toxkillfraex
23 Mar 2012, 3:59 AM
I have a panel that initially is allowed to take up 85% space, but I want to be able to change it to 15% when the content changes.


var westPanel = Ext.create('Ext.panel.Panel',
{
xtype:'panel',

id: 'west-region',

bodyCls: 'viewportBasePanel',
layout: 'fit',
region: 'west',

width: '84%',

collapsible: true,
collapsed: true,
collapseMode: 'mini',

split: true, //collapse in correct direction

header : false // no title bar with collapse button


});


I tried setWidth('15%') but it doesn't seem to do a thing

toxkillfraex
23 Mar 2012, 4:51 AM
I managed to fix it in some degree by only setting a size when the panel is already being used

problem is. It does show the content but it's not accessible because of the split being on the wrong side of the panel for some reason. (ie in this case it's on the left instead of the right where it belongs) until I click it for a resize.

Is there a way I can fix this problem with code after the resize?



this.addPanel(Ext.create('app.view.window.Browser') , 'west');
this.getWest().setWidth('84%');
this.getWest().expand(true);
this.getWest().doLayout();

to hopefully explain visually what's happening

33068

that's the initial look. When I click the split and make it go 'resize' on me it jumps to the correct spot

33069

toxkillfraex
23 Mar 2012, 5:23 AM
I somehow fixed it using flex instead of width


var westPanel = Ext.create('Ext.panel.Panel',
{
xtype:'panel',

id: 'west-region',

bodyCls: 'viewportBasePanel',
layout: 'fit',
region: 'west',


flex: 0,
//width: '84%',
//maxWidth: 1000,

collapsible: true,
collapsed: true,
collapseMode: 'mini',

split: true, //collapse in correct direction

header : false // no title bar with collapse button

});



this.getWest().flex = 4;

this.getWest().expand(true);

this.getWest().doLayout();


don't understand why this works though

anybody care to explain?