ColumnFitLayout

[jsakalos]

Hi all,

Ext.ColumnLayout sizes width of its columns leaving height untouched. Sometimes we would want columns to take all available height to display some components (e.g. grids) side by side. That is the purpose of this layout.

I've written it quickly off hand without any extensive testing. I've just put two grids into it and run it in FF3@Linux and it works. However, there is plenty of other panels to put in, with or without buttons and there are some other browsers.

Thus, if you're interested, test it please, report problems or tweak it as needed.



// vim: ts=4:sw=4:nu:fdc=4:nospell
/**
* Ext.ux.layout.ColumnFitLayout Extension Class for Ext 2.x Library
*
* Sets height of columns to take the whole available height of the container.
*
* @author Ing. Jozef Sakalos
* @copyright (c) 2008, Ing. Jozef Sakalos
* @version $Id: Ext.ux.layout.ColumnFitLayout.js 362 2008-09-18 12:48:25Z jozo $
*
* @license Ext.ux.layout.ColumnFitLayout is licensed under the terms of
* the Open Source LGPL 3.0 license. Commercial use is permitted to the extent
* that the code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html
*/

/*global Ext */

Ext.ns('Ext.ux.layout');

/**
* @class Ext.ux.layout.ColumnFitLayout
* @extends Ext.layout.ColumnLayout
*/
Ext.ux.layout.ColumnFitLayout = Ext.extend(Ext.layout.ColumnLayout, {
onLayout:function(ct, target) {
// call parent
Ext.ux.layout.ColumnFitLayout.superclass.onLayout.apply(this, arguments);

// get columns and height
var cs = ct.items.items, len = cs.length, c, i;
var size = Ext.isIE && target.dom != Ext.getBody().dom ? target.getStyleSize() : target.getViewSize();
var h = size.height - target.getPadding('tb');

// set height of columns
for(i = 0; i < len; i++) {
c = cs[i];
c.setHeight(h + (c.footer ? c.footer.getHeight() : 0));
}
}
});

// register layout
Ext.Container.LAYOUTS['columnfit'] = Ext.ux.layout.ColumnFitLayout;

// eof

[galdaka]

Live example is posible?

Thanks in advance,

[jsakalos]

Yes, temporarily here: http://examples.extjs.eu/gridincl.html

[Animal]

Hey Saki,

Have you seen the following feature request complete with the full implementation?

http://extjs.com/forum/showthread.php?t=45143

Adds fitHeight: true to ColumnLayout's config options, and also, split: true to allow resizing columns using a Splitter.

[jsakalos]

Thanks, looks very good and useful. Any info when your implementation gets to core?

[Animal]

That's up to jack and Brian. I don't commit code changes, only documentation changes.

[jsakalos]

OK, I'll stay with extension until then.

[dsonet]

this.innerCt.setSize(w, this.fitHeight ? h : null);
and

c.setSize(w - cel.getMargins('lr'), this.fitHeight ? h : null);

the null should be replaced by undefined.

[jsakalos]

What is the problem with null?

[galdaka]

Yes, temporarily here: http://examples.extjs.eu/gridincl.html

I think that you Know but in IE fails :(

Thanks in advance,

[jsakalos]

IE failure was caused by bug in Ext.DomQuery. It's fixed now.

[armandoxxx]

is there a quick fix for my problem maybe ?

I use your columnfit layout and I would like to create a panel with border layout inside left colum .. If I try to do it, my border layout panel only shows one of it's panels and it's FITed to my left colum, other panels (for example EAST, RIGHT and SOUTH) are invisible ...

Kind regards

Armando
PS: if needed I'll write some test code for it ..

[jsakalos]

Well, it is ColumnFitLayout and as such it can have only one item in column. You'll probably need standard column layout or border layout.

[armandoxxx]

It would be cool to have columnFit layout to fit the columns not the items inside :D

but it's ok .. just asking since I saw this working on GXT ...

thank you for your fast reply ..

Kind regards

Armando

[jsakalos]

Animal has another solution for column layout - try to look at that, maybe it's that what you're after.

[armandoxxx]

did a workaround .. since it's not that big of a deal ...

10x

take care !

Armando

[panosru]

Hello, what I'm trying to accomplish is to have an anchor layout split 50 - 50 and on first anchor layout a column layout split 50 - 50 (screen shot attached)


{
layout : 'anchor',
layoutConfig: {
animate : true
},
items : [{
anchor : '100%, 50%',
layout : 'column',
layoutConfig : {
fitHeight : true
},
items : [{
columnWidth: 0.50
},{
columnWidth: 0.50
}]
},{
anchor : '100%, 50%'
}]
}I don't know where is my mistake.. I'm not sure about these lines of code:



...
anchor : '100%, 50%',
layout : 'column',
...Maybe i have to insert layout : 'column' in new item? But i tried it too and didn't work I still can't get 100% height in columns..

EDIT:
Sorry my mistake everything works great with yours and animal's extension, i just had a typo on include script path :P
thanks!

[ry.extjs]

I did something similar using a derivative HBox layout.

http://extjs.com/forum/showthread.php?t=65982

[jay@moduscreate.com]

yeah, hbox, vbox is where it's at

[jsakalos]

This extension lifetime ends with Ext 2.x. It is fully replaced by Ext 3's vbox layout.

[PierceSD]

Thanks, Saki, for this simple and effective extension. Very much appreciated!

I had a problem in IE: when the parent container had padding, it made the parent container appear to have double its padding. Changing this line:


var h = size.height - target.getPadding('tb');


To this:


var h = size.height - ( Ext.isIE ? 0 : target.getPadding('tb') );


Fixed the problem for me. Tested on FF3 and IE7.

[jsakalos]

Thank you for the patch.