PDA

View Full Version : Ext js 4.0 border layout Splitter Issue.



abhinavchugh
22 May 2012, 3:37 AM
Hi

I want to increase the width of the splitter used in border layout.
35491

which class in the css I should change to increase the width of a splitter?

sword-it
22 May 2012, 4:04 AM
Hi!

If you do not use splitter then you can just set margin. Eg. if you have north and east component then set margin on east component to '0 0 0 5'.If you use split, then you can change splitter size after render

try this:-




listeners: {
afterrender: function(){
yourPanel.layout.splitters.east.setWidth(30);
yourPanel.doLayout();
}
}

abhinavchugh
22 May 2012, 4:47 AM
Thanks for your reply.but no luck

I am using this code

Ext.onReady(function() {
Ext.Loader.setConfig({enabled:true});

Ext.QuickTips.init();

Ext.create('Ext.Viewport', {

layout: {
type: 'border',
padding: 5
},
// defaults: {
// split: true
// },
items: [{
region: 'west',
collapsible: true,
collapsed:true,
//title: 'Starts at width 30%',
//split: true,
width: '15%',
minWidth: 50,
minHeight: 140,
html: 'west<br>I am floatable'
},{
region: 'center',
collapsible: true,
split: true,
width: '30%',
minWidth: 100,
minHeight: 140,
html: 'west<br>I am floatable'
},{
region: 'east',
collapsible: true,
collapsed:true,
//title: 'Starts at width 30%',
split: true,
width: '15%',
minWidth: 100,
minHeight: 140

},
{
region: 'north',
collapsible: true,
collapsed:true,
title: 'Show Filters',
split: true,
width: '30%',
minWidth: 100,
minHeight: 140


},


]
});

scottmartin
23 May 2012, 12:12 PM
As mentioned, this seems to be working as described:



Ext.create('Ext.panel.Panel', {
width: 500,
height: 300,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
xtype: 'panel',
split: true,
height: 100,
split: true, // enable resizing
margins: '0 5 5 5'
},{
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
margins: '5 10 0 0',
width: 200,
collapsible: true, // make collapsible
id: 'west-region-container',
layout: 'fit'
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
layout: 'fit',
margins: '5 5 0 0'
}],
renderTo: Ext.getBody(),
listeners: {

afterrender: function(panel){
panel.layout.splitters.south.setHeight(15); // south, using height
panel.doLayout();
}
}
});?


Scott.