Code updated for latest 3.2 BoxLayout class.

The following example works with the latest updates to the BoxLayout class. The code is a little smaller because BoxLayout handles calculating child positions and actually positioning them seperately, and we can use this.

And when I drag and drop the block "friendsBlock" (portal item) - pictures in the block "friendsBlock" take places already in 3 strings.
Changing width of pictures I has calculated that at calculation of a parent window width the skroll-bar width is considered.

At refresh the browser - the block "friendsBlock" is drawn again without skroll-bar width.

/** * @class Ext.layout.FloatLayout * @extends Ext.layout.BoxLayout * <p>A layout that arranges items in a left to right flow similar to using HTML's <code>float: left</code> style.</p> * <p>When a Component's width (including its padding) won't fit within the available width of the Container (within its padding) * then the Component is wrapped to the beginning of a new line, clearing the tallest item on the current line.</p> * <p>Items may be vertically aligned with the row they happen to fall within. A line's height is the height of its tallest child * item (including its margins), and vertical alignment take place within this space. Vertical alignment is specified for the layout using the * {@link #verticalAlign} config, and may be overriden for a single item by configuring an item with a verticalAlign value.</p> * <p>Row content may be aligned within the available width of the Container using the {@link #horizontalAlign} config.</p> * <p>Child items may be cleared left or right by configuring a <b>clear</b> value in the item.</p> * <p>Row and column spacing may be specified using the {@link #verticalSpacing} and {@link #horizontalSpacing} options. */Ext.layout.FloatLayout = Ext.extend(Ext.layout.BoxLayout, { /** * @cfg {Boolean} animate * <p><code>true</code> to animate child items into their calculated positions.</p> * <p>Defaults to <code>false</code>.</p> */

I think it should be adopted as part of the framework. But called "FlowLayout" which makes more sense.

I really like watching the animate: true config working. That should be a standard part of the layout system too!

We have app components where an arbitrary number informational blocks (They are FieldSets containing tabular consignment information) must be "flowed" across and then down in whatever space is available.

Of course I couldn't tight fit them before which wasted a lot of space. This will help a lot! Thanks!