Mixin: SC.FlowedLayout

Normal SproutCore views are absolutely positioned--parent views have relatively little input on where their child views are placed.

This mixin makes a view layout its child views itself, flowing left-to-right or up-to-down, and, optionally, wrapping.

Child views with useAbsoluteLayout===YES will be ignored in the layout process. This mixin detects when child views have changed their size, and will adjust accordingly. It also observes child views' isVisible and calculatedWidth/Height properties, and, as a flowedlayout-specific extension, isHidden.

These properties are observed through observeChildLayout and unobserveChildLayout; you can override the method to add your own properties. To customize isVisible behavior, you will also want to override shouldIncludeChildInFlow.

This relies on the children's frames or, if specified, calculatedWidth and calculatedHeight properties.

This view mixes very well with animation. Further, it is able to automatically mix in to child views it manages, created or not yet created, allowing you to specify settings such as animation once only, and have everything "just work".

Like normal views, you simply specify child views--everything will "just work."

Defined in: flowed_layout.js

Since:
SproutCore 1.0

Field Summary

Class Methods

Field Detail

SC.FlowedLayout.align String

The alignment of items within rows or columns. Possible values:

  • SC.ALIGN_LEFT
  • SC.ALIGN_CENTER
  • SC.ALIGN_RIGHT
  • SC.ALIGN_JUSTIFY
Default value:
SC.ALIGN_LEFT
SC.FlowedLayout.autoResize Boolean
Whether the view should automatically resize (to allow scrolling, for instance)
Default value:
YES
SC.FlowedLayout.canWrap Boolean
If YES, flowing child views are allowed to wrap to new rows or columns.
Default value:
YES
SC.FlowedLayout.defaultFlowSpacing Hash

A set of spacings (left, top, right, bottom) for subviews. Defaults to 0s all around. This is the amount of space that will be before, after, above, and below the view. These spacings do not collapse into each other.

You can also set flowSpacing on any child view, or implement flowSpacingForView.

Default value:
`{ left: 0, bottom: 0, top: 0, right: 0 }`
SC.FlowedLayout.flowPadding Hash Padding around the edges of this flow layout view. This is useful for situations where you don't control the layout of the FlowedLayout view; for instance, when the view is the contentView for a SC.ScrollView.
Default value:
`{ left: 0, bottom: 0, top: 0, right: 0 }`
SC.FlowedLayout.flowSizeForChild Hash

Returns the flow size for a given view, excluding spacing. The default version checks the view's calculatedWidth/Height, then its frame.

For spacers, this returns an empty size.

SC.FlowedLayout.flowSpacingForChild Hash

Returns the flow spacings for a given view. By default, returns the view's flowSpacing, and if they don't exist, the defaultFlowSpacing for this view.

SC.FlowedLayout.layoutDirection String

The direction of flow. Possible values:

  • SC.LAYOUT_HORIZONTAL
  • SC.LAYOUT_VERTICAL
Default value:
SC.LAYOUT_HORIZONTAL
SC.FlowedLayout.shouldIncludeChildInFlow Boolean

Determines whether the specified child view should be included in the flow layout. By default, if it has isVisible: NO or useAbsoluteLayout: YES, it will not be included.

Default value:
NO
SC.FlowedLayout.shouldResizeHeight Boolean
Default value:
YES
SC.FlowedLayout.shouldResizeWidth Boolean
Default value:
YES

Class Method Detail

applyPlanToView(view, layout)

Applies the given layout to the view. Override this if you would like your view to, for example, animate to a new position.

Parameters:
view
layout
Documentation generated by JsDoc Toolkit 2.4.0 on Wed Apr 08 2015 10:02:20 GMT-0600 (CST)