PDA

View Full Version : Border Layout: prevent e.g. center region from resizing



raz0r1
11 Aug 2011, 10:51 PM
Hi,
I have following to do:

viewport with toolbar (north), expandable panel(west), panel (center) components.
toolbar is fixed.
now I want that the center-panel dont resizes when the west-panel is expanded.
The west-panel should be above the center-panel till its collapsed again.

i searched some time to find what i have to override and extend but i did not find anything.

I would be very grateful i somebody could help solving this problem.

greetings,
christopher

slemmon
12 Aug 2011, 4:56 AM
I don't believe strictly speaking you can probihit the center region from resizing when it's in the border layout. I saw the following bulleted note on the border layout page in the API doc:
Any Container using the Border layout must have a child item with region:'center'. The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.
[/URL][URL="http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Border"]http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Border

A (http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Border)re you wanting your west panel to always float over the top of your center region? Maybe instead of a west region you put the content into a Window, set its position to top-left, make it draggable: false, set the height to the height of the document body, and resizable only on the right-hand side?

skirtle
12 Aug 2011, 7:56 AM
How is the west region being expanded? If you just want to stop people clicking the expand tool then you can just hide it:


new Ext.panel.Panel({
...
layout: 'border',
items: [
{
collapsed: true,
collapsible: true,
hideCollapseTool: true,
region: 'west',
...
}, {
region: 'center',
...
}
]
});

If you don't want to hide it, I think it'll take an almighty hack:


new Ext.panel.Panel({
...
layout: 'border',
items: [
{
collapsed: true,
collapsible: true,
region: 'west',
...
}, {
region: 'center',
...
}
],
listeners: {
beforerender: function(panel) {
var borderLayout = panel.getLayout();

borderLayout.onPlaceHolderToolClick = function(e, target, owner, tool) {
this.floatCollapsedPanel({
getTarget: function() {
return false;
}
}, tool.client);
};
}
}
});

I suspect this won't work if you're expanding it programmatically. Let us know if that's what you need.

jay@moduscreate.com
12 Aug 2011, 8:15 AM
What you are asking for is not the border layout then. It should be something like the HBox layout, with a floating panel that slides in when called upon.

raz0r1
14 Aug 2011, 11:28 PM
Thanks very much for your answers. Sounds very interesting and I will try them by time but for know I changed my layout and used another way to display my panels.

Thanks again,
Christopher

raz0r1
18 Aug 2011, 9:01 PM
How is the west region being expanded? If you just want to stop people clicking the expand tool then you can just hide it:
[...]
If you don't want to hide it, I think it'll take an almighty hack:


new Ext.panel.Panel({
...
layout: 'border',
items: [
{
collapsed: true,
collapsible: true,
region: 'west',
...
}, {
region: 'center',
...
}
],
listeners: {
beforerender: function(panel) {
var borderLayout = panel.getLayout();

borderLayout.onPlaceHolderToolClick = function(e, target, owner, tool) {
this.floatCollapsedPanel({
getTarget: function() {
return false;
}
}, tool.client);
};
}
}
});

I suspect this won't work if you're expanding it programmatically. Let us know if that's what you need.


I tried the second one but it does not work :/


'filterpanel': {
beforerender: function(panel) {
var borderLayout = panel.getLayout();


borderLayout.onPlaceHolderToolClick = function(e, target, owner, tool) {
this.floatCollapsedPanel({
getTarget: function() {
return false;
}
}, tool.client);
};


}
}

skirtle
19 Aug 2011, 9:29 AM
In case anyone else stumbles across this topic, there's more discussion about it in this thread:

http://www.sencha.com/forum/showthread.php?144065

skirtle
19 Aug 2011, 9:33 AM
I tried the second one but it does not work :/

Could you try putting some logging in the beforerender handler to confirm that it is being run at all?

If that doesn't help fix it, exactly what ExtJS version are you using? Which browsers have you tried?

ferengidedalo
26 Mar 2012, 5:47 PM
I need to do this but programmatically... everything the same... floating panel inside border layout, wich is the charm to slide it out?

ferengidedalo
26 Mar 2012, 6:05 PM
the charm is

border.floatCollapsedPanel({getTarget:function(){return null}},panel);