View Full Version : Border Layout - Does Center resize when you resize north/south?

25 Nov 2012, 7:26 PM
I just noticed something with my Ext Js layout, when i use the resizeHandles on a south panel it expands to take up some of the center panel... but does not reduce the center panel.

This is an issue when something in the center panel has scroll bars... which you can't use because it is still the 'same' height, but now half of it is blocked so you can't access that content.

Does anyone know what causes this? I'm not sure if it is the way Ext Js is meant to work or if there are settings that cause/change this behaviour?

[There is quite a bit of nesting involved in my project, and some of it is dynamic, changing between panels, so I would appreciate if we could debug this in abstract, otherwise I'll be bombarding you guys with dozens of panel definitions... if we just figure out the configurations we need to check i'll step through the whole thing and report back]

27 Nov 2012, 6:49 AM
Instead of resizeHandles on the south panel, give it split : true on the south panel.

27 Nov 2012, 2:37 PM
//Config when i define it...

Ext.define('MyApp.view.todolist', {
extend: 'Ext.grid.Panel',
alias: 'widget.mygridpanel2',

height: 200,
id: 'todolist',
header: false,
title: 'Tasks to Do',
forceFit: true,
store: 'tasksToDo',

//Configs when i use it...
xtype: 'mygridpanel2',
resizable: true,
region: 'south',
split: true

Here's what i have for south's Configs now. Still having the issue, so i wanna check if i have used anything there that would undermine the 'split' setting.

Also, is there anything i should be mindful of with the Center panel and/or stuff nested inside it that would force it to overlap, regardless of split?

27 Nov 2012, 2:53 PM
You don't need resizable, split will take care of it

27 Nov 2012, 3:30 PM
removed resizable, now all we have is region: south and split:true on the south panel... still overlapping though.

28 Nov 2012, 5:22 AM
Here is a small example:

new Ext.container.Viewport({
layout : 'border',
items : [
region : 'center',
title : 'Center',
html : 'This is the center region'
region : 'south',
title : 'South',
html : 'This is the south region',
height : 200,
split : true

28 Nov 2012, 3:25 PM
You are right so far... which unforetunatley only means that my problem wasn't what i thought it was :-p

After a bit of prodding with inspect element in Firefox... the containing panel/frame is the right size, and I can see the curved borders... But when i inspect the grid it extends WAY down beyond the object containing it. Is there a setting I can use to limit it's height (which will presumably then force it to use scrollbars) or am i going about this the wrong way?

28 Nov 2012, 7:37 PM
The center region needs to use a layout to manage the grid's height or maybe you don't need the grid nested within a container.