<stableborderlayout>
Keeps the width of two outer sibling views constant, while stretching the innermost one.
stableborderlayout extends <layout>, and is therefore
responsible for arranging a set of views. Unlike like most layouts, stableborderlayout only manipulates the first three
subviews. All of the other subviews are ignored. stableborderlayout is very similar to
<simplelayout> in that it arranges views vertically or horizontally depending
on the axis specified. The difference is that stableborderlayout stretches the second view so that the total combined width
(or height) of these three subviews matches the width (or height) of their parent.
The following example demonstrates the differences between simplelayout and stableborderlayout.
Example 77. simplelayout vs. stableborderlayout
<canvas height="100">
<view bgcolor="yellow" width="200">
<view bgcolor="blue" height="30" width="50"/>
<view bgcolor="red" height="30" width="50"/>
<view bgcolor="blue" height="30" width="50"/>
<simplelayout axis="x" spacing="10"/>
</view>
<view y="40" bgcolor="yellow" width="200">
<view bgcolor="blue" height="30" width="50"/>
<view bgcolor="red" height="30"/>
<view bgcolor="blue" height="30" width="50"/>
<stableborderlayout axis="x"/>
</view>
</canvas>
Note that there is no spacing parameter allowed in stableborderlayout. Also, notice that each parent
view has a width of 200. In the top view this information is preserved, which is why yellow can be seen extending
past the last subview.
In the bottom view no yellow can be seen because it is covered up by the blue and red views. Finally, take note
that the second red
view has no width assigned to it, because stableborderlayout controls that value directly.
| Name (CSS property) | Type (tag) | Type (js) | Default | Category |
|---|---|---|---|---|
axis
|
string | String | read/write | |
| The axis in which this layout operates. One of 'x' or 'y'. | ||||
Attributes inherited from <node>
classroot, cloneManager, data, datapath, defaultplacement, id, ignoreplacement, immediateparent, inited, initstage, name, nodeLevel, options, parent, placement, styleclass, subnodes, transition
Methods
-
update() -
This method is usually only called when the size of the parent changes. This means that stableborderlayout is not really designed for use in situations where the size of the views controlled by the layout changes after init time. However, this method may be called directly to force the layout to update.
Methods inherited from <layout>
addSubview, ignore, lock, releaseLayout, removeSubview, reset, setLayoutOrder, swapSubviewOrder, unlock, update
Methods inherited from <node>
animate, applyConstraintMethod, applyData, childOf, completeInstantiation, construct, createChildren, dataBindAttribute, destroy, determinePlacement, getOption, getUID, init, lookupSourceLocator, releaseConstraint, releaseConstraintMethod, searchImmediateSubnodes, searchSubnodes, setOption, setSelected, updateData
Events