← Back to branch summary

~cdparra/gelee/trunk

« back to all changes in this revision

Viewing changes to webui/web/extjs/source/widgets/layout/AnchorLayout.js

  • Committer: parra
  • Date: 2010-03-15 15:56:56 UTC
  • Revision ID: svn-v4:ac5bba68-f036-4e09-846e-8f32731cc928:trunk/gelee:1448
merged gelee at svn

Show diffs side-by-side

added added

removed removed

Lines of Context:
webui/web/extjs/source/widgets/layout/AnchorLayout.js
 
1
/*
 
2
 * Ext JS Library 3.0 RC2
 
3
 * Copyright(c) 2006-2009, Ext JS, LLC.
 
4
 * licensing@extjs.com
 
5
 * 
 
6
 * http://extjs.com/license
 
7
 */
 
8
 
 
9
/**
 
10
 * @class Ext.layout.AnchorLayout
 
11
 * @extends Ext.layout.ContainerLayout
 
12
 * <p>This is a layout that enables anchoring of contained elements relative to the container's dimensions.
 
13
 * If the container is resized, all anchored items are automatically rerendered according to their
 
14
 * <b><tt>{@link #anchor}</tt></b> rules.</p>
 
15
 * <p>This class is intended to be extended or created via the layout:'anchor' {@link Ext.Container#layout}
 
16
 * config, and should generally not need to be created directly via the new keyword.</p>
 
17
 * <p>AnchorLayout does not have any direct config options (other than inherited ones). By default,
 
18
 * AnchorLayout will calculate anchor measurements based on the size of the container itself. However, the
 
19
 * container using the AnchorLayout can supply an anchoring-specific config property of <b>anchorSize</b>.
 
20
 * If anchorSize is specifed, the layout will use it as a virtual container for the purposes of calculating
 
21
 * anchor measurements based on it instead, allowing the container to be sized independently of the anchoring
 
22
 * logic if necessary.  For example:</p>
 
23
 * <pre><code>
 
24
var viewport = new Ext.Viewport({
 
25
    layout:'anchor',
 
26
    anchorSize: {width:800, height:600},
 
27
    items:[{
 
28
        title:'Item 1',
 
29
        html:'Content 1',
 
30
        width:800,
 
31
        anchor:'right 20%'
 
32
    },{
 
33
        title:'Item 2',
 
34
        html:'Content 2',
 
35
        width:300,
 
36
        anchor:'50% 30%'
 
37
    },{
 
38
        title:'Item 3',
 
39
        html:'Content 3',
 
40
        width:600,
 
41
        anchor:'-100 50%'
 
42
    }]
 
43
});
 
44
 * </code></pre>
 
45
 */
 
46
Ext.layout.AnchorLayout = Ext.extend(Ext.layout.ContainerLayout, {
 
47
    /**
 
48
     * @cfg {String} anchor
 
49
     * <p>This configuation option is to be applied to <b>child <tt>items</tt></b> of a container managed by
 
50
     * this layout (ie. configured with <tt>layout:'anchor'</tt>).</p><br/>
 
51
     * 
 
52
     * <p>This value is what tells the layout how an item should be anchored to the container. <tt>items</tt>
 
53
     * added to an AnchorLayout accept an anchoring-specific config property of <b>anchor</b> which is a string
 
54
     * containing two values: the horizontal anchor value and the vertical anchor value (for example, '100% 50%').
 
55
     * The following types of anchor values are supported:<div class="mdetail-params"><ul>
 
56
     * 
 
57
     * <li><b>Percentage</b> : Any value between 1 and 100, expressed as a percentage.<div class="sub-desc">
 
58
     * The first anchor is the percentage width that the item should take up within the container, and the
 
59
     * second is the percentage height.  For example:<pre><code>
 
60
// two values specified
 
61
anchor: '100% 50%' // render item complete width of the container and 1/2 its height.
 
62
// one value specified
 
63
anchor: '100%'     // the width value; the height will default to auto
 
64
     * </code></pre></div></li>
 
65
     * 
 
66
     * <li><b>Offsets</b> : Any positive or negative integer value.<div class="sub-desc">
 
67
     * This is a raw adjustment where the first anchor is the offset from the right edge of the container,
 
68
     * and the second is the offset from the bottom edge. For example:<pre><code>
 
69
// two values specified
 
70
anchor: '-50 -100' // render item the complete width of the container minus 50 pixels and
 
71
                   // the complete height minus 100 pixels.
 
72
// one value specified
 
73
anchor: '-50'      // anchor value is assumed to be the right offset value
 
74
                   // bottom offset will default to 0
 
75
     * </code></pre></div></li>
 
76
     * 
 
77
     * <li><b>Sides</b> : Valid values are <tt>'right'</tt> (or <tt>'r'</tt>) and <tt>'bottom'</tt>
 
78
     * (or <tt>'b'</tt>).<div class="sub-desc">
 
79
     * Either the container must have a fixed size or an anchorSize config value defined at render time in
 
80
     * order for these to have any effect.</div></li>
 
81
     *
 
82
     * <li><b>Mixed</b> : <div class="sub-desc">
 
83
     * Anchor values can also be mixed as needed.  For example, to render the width offset from the container
 
84
     * right edge by 50 pixels and 75% of the container's height use:
 
85
     * <pre><code>
 
86
anchor: '-50 75%' 
 
87
     * </code></pre></div></li>
 
88
     * 
 
89
     * 
 
90
     * </ul></div>
 
91
     */
 
92
    
 
93
    // private
 
94
    monitorResize:true,
 
95
 
 
96
    // private
 
97
    getAnchorViewSize : function(ct, target){
 
98
        return target.dom == document.body ?
 
99
                   target.getViewSize() : target.getStyleSize();
 
100
    },
 
101
 
 
102
    // private
 
103
    onLayout : function(ct, target){
 
104
        Ext.layout.AnchorLayout.superclass.onLayout.call(this, ct, target);
 
105
 
 
106
        var size = this.getAnchorViewSize(ct, target);
 
107
 
 
108
        var w = size.width, h = size.height;
 
109
 
 
110
        if(w < 20 && h < 20){
 
111
            return;
 
112
        }
 
113
 
 
114
        // find the container anchoring size
 
115
        var aw, ah;
 
116
        if(ct.anchorSize){
 
117
            if(typeof ct.anchorSize == 'number'){
 
118
                aw = ct.anchorSize;
 
119
            }else{
 
120
                aw = ct.anchorSize.width;
 
121
                ah = ct.anchorSize.height;
 
122
            }
 
123
        }else{
 
124
            aw = ct.initialConfig.width;
 
125
            ah = ct.initialConfig.height;
 
126
        }
 
127
 
 
128
        var cs = ct.items.items, len = cs.length, i, c, a, cw, ch;
 
129
        for(i = 0; i < len; i++){
 
130
            c = cs[i];
 
131
            if(c.anchor){
 
132
                a = c.anchorSpec;
 
133
                if(!a){ // cache all anchor values
 
134
                    var vs = c.anchor.split(' ');
 
135
                    c.anchorSpec = a = {
 
136
                        right: this.parseAnchor(vs[0], c.initialConfig.width, aw),
 
137
                        bottom: this.parseAnchor(vs[1], c.initialConfig.height, ah)
 
138
                    };
 
139
                }
 
140
                cw = a.right ? this.adjustWidthAnchor(a.right(w), c) : undefined;
 
141
                ch = a.bottom ? this.adjustHeightAnchor(a.bottom(h), c) : undefined;
 
142
 
 
143
                if(cw || ch){
 
144
                    c.setSize(cw || undefined, ch || undefined);
 
145
                }
 
146
            }
 
147
        }
 
148
    },
 
149
 
 
150
    // private
 
151
    parseAnchor : function(a, start, cstart){
 
152
        if(a && a != 'none'){
 
153
            var last;
 
154
            if(/^(r|right|b|bottom)$/i.test(a)){   // standard anchor
 
155
                var diff = cstart - start;
 
156
                return function(v){
 
157
                    if(v !== last){
 
158
                        last = v;
 
159
                        return v - diff;
 
160
                    }
 
161
                }
 
162
            }else if(a.indexOf('%') != -1){
 
163
                var ratio = parseFloat(a.replace('%', ''))*.01;   // percentage
 
164
                return function(v){
 
165
                    if(v !== last){
 
166
                        last = v;
 
167
                        return Math.floor(v*ratio);
 
168
                    }
 
169
                }
 
170
            }else{
 
171
                a = parseInt(a, 10);
 
172
                if(!isNaN(a)){                            // simple offset adjustment
 
173
                    return function(v){
 
174
                        if(v !== last){
 
175
                            last = v;
 
176
                            return v + a;
 
177
                        }
 
178
                    }
 
179
                }
 
180
            }
 
181
        }
 
182
        return false;
 
183
    },
 
184
 
 
185
    // private
 
186
    adjustWidthAnchor : function(value, comp){
 
187
        return value;
 
188
    },
 
189
 
 
190
    // private
 
191
    adjustHeightAnchor : function(value, comp){
 
192
        return value;
 
193
    }
 
194
    
 
195
    /**
 
196
     * @property activeItem
 
197
     * @hide
 
198
     */
 
199
});
 
200
Ext.Container.LAYOUTS['anchor'] = Ext.layout.AnchorLayout;
 
 
b'\\ No newline at end of file'