PDA

View Full Version : Ext.layout.ColumnLayout



mitchellsimoens
18 Feb 2011, 8:33 AM
I have made a layout based around CSS3 Multi Column layout (http://www.w3.org/TR/css3-multicol/).

It is customizable with these options:


columnCount
columnWidth
columnGap
columnRule

You can use columnCount OR columnWidth and it will prefer columnCount if you have both specified. Great thing about columnCount is the browser will automatically split the width into this however many columns you specified and will always account for width changes. With columnWidth, the browser will divide the width by columnWidth and the floor of that will be how many columns you will have. If the width changes, the number of columns may change depending on the math of width divided by columnWidth. **NOTE** This does act funny and it's CSS3's fault. Say you have 5 items and columnCount = 2, it will not act as expected and there will be half an item at the end of the first column and half of that item at the beginning of the next column. Not sure why they have it implemented that way but it is.

columnGap is the gap between each column. columnRule is a border between the columns.

GitHub - https://github.com/mitchellsimoens/Ext.layout.ColumnLayout
Demo - http://www.simoens.org/Sencha-Projects/demos/

mitchellsimoens
18 Feb 2011, 1:35 PM
Just a bump to say that the scroller issue has been fixed!

dontbugme
24 Apr 2011, 10:59 AM
looks like this isn't working with the latest sencha touch version (1.1.0) :(

sirshannon
22 Sep 2011, 6:33 AM
I've seen the demos but I can't find any example source code at all. Is there any documentation for this or examples of how to use it?