PDA

View Full Version : How do Layouts in 4.1 work



winkelmann
26 Sep 2012, 12:09 AM
Hi there,

I had a reasonably well understanding on how the layouting in 4.0 worked, and implemented a highly customized layout to automatically put desktop icons into rows, taking their heights and the maximum available height into account.
With 4.1, the layout broke, and I cannot figure out why. Is there a tutorial or at least some documentation on how exactly the layout system works in 4.1? What gets called when and especially why?

thanks in advance
Jan

scottmartin
26 Sep 2012, 7:17 AM
This would be hard to say without an example. Layouts were a bit broken in 4.0.x, so invalid configurations were allowed. This is no longer the case in 4.1.x. It is usually a simple case of maeking minor adjustments to make it work again.

Have you tried using our Sencha Architect to design your form and then review the code to see what changes need to be made?

Scott.

winkelmann
26 Sep 2012, 9:32 AM
The problem isn't the actual layout itself, its more of the inner workings of how the layouting works in general that has me confused. I know what my Layout needs to do, what I don't understand is _when_ I have to do it and what happens in what order...
I'll have to see if I can post the original 4.0 sources...

scottmartin
26 Sep 2012, 9:43 AM
Please make sure we can run the examples and not just snippets.

Scott.

winkelmann
26 Sep 2012, 10:17 AM
I put the code on pastebin, 200 lines seems a little too long to put directly in the thread:
http://pastebin.com/PwjSJbTU

winkelmann
26 Sep 2012, 3:38 PM
So, to achieve the same effect in 4.1, I spent the last few hours disecting table layout and figuring out a way to extend it to allow for vertically stacking my icons.
Assuming that my icons always have the same size (which they should) i could discard the feature my 4.0 layout provided that supports dynamic heights.
Since the table layout will step through my items and add a new column for each item, or rather stick each item in a new colum, the first thing i need to to on a resize, is recalculate my required number of columns and rows from the width and height of my parent element and the size of my icons.
After that, i chunk my items into the desired number of pieces and build an array, that represents the structure that i want (vertical stacking rather than horizontal).

What I ended up with is the following:


Ext.define('NFY.layout.DeskColumns', {
extend: 'Ext.layout.container.Table',

requires: ['NFY.Tools'],

alias: ['layout.nfy-deskcolumns'],

rows: 1,
columns: 1,

recalculateGrid: function(numItems) {
var target = this.getTarget(),
width,
height;

if ( !target ) {
return;
}

width = target.getWidth();
height = target.getHeight();

this.rows = Math.floor(height/this.rowHeight);
this.columns = Math.ceil(numItems/this.rows);
},

getLayoutItems: function() {
var items = this.callParent(),
newItems,
len = items.length,
r=0,
c=0,
chunks,
itm;

this.recalculateGrid(len);
newItems = len<=this.rows ? items : [];

if ( len>this.rows ) {
chunks = NFY.Tools.chunkArray(items, this.rows);
for ( r=0; r<this.rows; r++ ) {
for ( c=0; c<this.columns; c++ ) {
itm = chunks[c][r];
if ( itm!==undefined ) {
itm.colspan = 1;
newItems.push(itm);
} else if ( chunks[c-1]!==undefined && chunks[c-1][r]!==undefined ) {
chunks[c-1][r].colspan++;
}
}
}
}
return newItems;
}
});

Note that I did actually have to add a rezize event listener in my container element forcing a re-layout on resize since there seems to be some freaky buffering involved within the layouting system that loses its real width and height somewhere along the way...

I would appreciate any input and thoughts on the solution, although I am actually pretty happy with it for now.

winkelmann
30 Oct 2012, 2:17 AM
Thats what I was looking for by the way, thanks for that, Don!

http://www.sencha.com/blog/inside-the-ext-js-4-1-layout-system