PDA

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



mice-pace
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]

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

mice-pace
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?

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

mice-pace
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.

mitchellsimoens
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
}
]
});

mice-pace
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?

mitchellsimoens
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.