01: /*
02: * GWT-Ext Widget Library
03: * Copyright(c) 2007-2008, GWT-Ext.
04: * licensing@gwt-ext.com
05: *
06: * http://www.gwt-ext.com/license
07: */
08: package com.gwtext.client.widgets.layout;
09:
10: import com.google.gwt.core.client.JavaScriptObject;
11:
12: /**
13: *
14: * <p>This is a layout that enables anchoring of contained elements relative to the container's dimensions. If
15: * the container is resized, all anchored items are automatically rerendered according to their anchor rules.
16: * </p>
17: *
18: * <p>AnchorLayout does not have any direct config options (other than inherited ones). However, the container
19: * using the AnchorLayout can supply an anchoring-specific config property of <b>anchorSize</b>. By default,
20: * AnchorLayout will calculate anchor measurements based on the size of the container itself. However, if
21: * anchorSize is specifed, the layout will use it as a virtual container for the purposes of calculating anchor
22: * measurements based on it instead, allowing the container to be sized independently of the anchoring logic if necessary.</p>
23: *
24: * <p>The items added to an AnchorLayout can also supply an anchoring-specific config property of <b>anchor</b> which
25: * is a string containing two values: the horizontal anchor value and the vertical anchor value (for example, '100% 50%').
26: * This value is what tells the layout how the item should be anchored to the container. The following types of
27: * anchor values are supported:
28: * </p>
29: * <ul>
30: * <li><b>Percentage</b>: Any value between 1 and 100, expressed as a percentage. The first anchor is the percentage
31: * width that the item should take up within the container, and the second is the percentage height. Example: '100% 50%'
32: * would render an item the complete width of the container and 1/2 its height. If only one anchor value is supplied
33: * it is assumed to be the width value and the height will default to auto.</li>
34: * <li><b>Offsets</b>: Any positive or negative integer value. The first anchor is the offset from the right edge of
35: * the container, and the second is the offset from the bottom edge. Example: '-50 -100' would render an item the
36: * complete width of the container minus 50 pixels and the complete height minus 100 pixels. If only one anchor value
37: * is supplied it is assumed to be the right offset value and the bottom offset will default to 0.</li>
38: * <li><b>Sides</b>: Valid values are 'right' (or 'r') and 'bottom' (or 'b'). Either the container must have a fixed
39: * size or an anchorSize config value defined at render time in order for these to have any effect.</li>
40: * </ul>
41: * <p>Anchor values can also be mixed as needed. For example, '-50 75%' would render the width offset from the
42: * container right edge by 50 pixels and 75% of the container's height.</p>
43: *
44: * @see com.gwtext.client.widgets.layout.AnchorLayoutData
45: */
46: public class AnchorLayout extends ContainerLayout {
47:
48: private int width = -1;
49: private int height = -1;
50:
51: /**
52: * Create a new AnchorLayout
53: */
54: public AnchorLayout() {
55: }
56:
57: /**
58: * Create a new AnchorLayout.
59: *
60: * @param width the width
61: * @param height the height
62: */
63: public AnchorLayout(int width, int height) {
64:
65: this .width = width;
66: this .height = height;
67: }
68:
69: protected native JavaScriptObject create(JavaScriptObject config) /*-{
70: return new $wnd.Ext.layout.AnchorLayout(config);
71: }-*/;
72:
73: public native JavaScriptObject getContainerAttributes() /*-{
74: if(this.@com.gwtext.client.widgets.layout.AnchorLayout::width != -1) {
75: return {anchorSize: {width:this.@com.gwtext.client.widgets.layout.AnchorLayout::width, height:this.@com.gwtext.client.widgets.layout.AnchorLayout::height}};
76: } else {
77: return {};
78: }
79: }-*/;
80: }
|