source: trunk/web/addons/job_monarch/lib/extjs-30/src/widgets/layout/BoxLayout.js @ 625

Last change on this file since 625 was 625, checked in by ramonb, 15 years ago

lib/extjs-30:

  • new ExtJS 3.0
File size: 16.0 KB
Line 
1/*!
2 * Ext JS Library 3.0.0
3 * Copyright(c) 2006-2009 Ext JS, LLC
4 * licensing@extjs.com
5 * http://www.extjs.com/license
6 */
7/**
8 * @class Ext.layout.BoxLayout
9 * @extends Ext.layout.ContainerLayout
10 * <p>Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly.</p>
11 */
12Ext.layout.BoxLayout = Ext.extend(Ext.layout.ContainerLayout, {
13    /**
14     * @cfg {Object} defaultMargins
15     * <p>If the individual contained items do not have a <tt>margins</tt>
16     * property specified, the default margins from this property will be
17     * applied to each item.</p>
18     * <br><p>This property may be specified as an object containing margins
19     * to apply in the format:</p><pre><code>
20{
21    top: (top margin),
22    right: (right margin),
23    bottom: (bottom margin),
24    left: (left margin)
25}</code></pre>
26     * <p>This property may also be specified as a string containing
27     * space-separated, numeric margin values. The order of the sides associated
28     * with each value matches the way CSS processes margin values:</p>
29     * <div class="mdetail-params"><ul>
30     * <li>If there is only one value, it applies to all sides.</li>
31     * <li>If there are two values, the top and bottom borders are set to the
32     * first value and the right and left are set to the second.</li>
33     * <li>If there are three values, the top is set to the first value, the left
34     * and right are set to the second, and the bottom is set to the third.</li>
35     * <li>If there are four values, they apply to the top, right, bottom, and
36     * left, respectively.</li>
37     * </ul></div>
38     * <p>Defaults to:</p><pre><code>
39     * {top:0, right:0, bottom:0, left:0}
40     * </code></pre>
41     */
42    defaultMargins : {left:0,top:0,right:0,bottom:0},
43    /**
44     * @cfg {String} padding
45     * Defaults to <tt>'0'</tt>. Sets the padding to be applied to all child items managed by this
46     * container's layout.
47     */
48    padding : '0',
49    // documented in subclasses
50    pack : 'start',
51
52    // private
53    monitorResize : true,
54    scrollOffset : 0,
55    extraCls : 'x-box-item',
56    ctCls : 'x-box-layout-ct',
57    innerCls : 'x-box-inner',
58
59    // private
60    isValidParent : function(c, target){
61        return c.getEl().dom.parentNode == this.innerCt.dom;
62    },
63
64    // private
65    onLayout : function(ct, target){
66        var cs = ct.items.items, len = cs.length, c, i, last = len-1, cm;
67
68        if(!this.innerCt){
69            target.addClass(this.ctCls);
70
71            // the innerCt prevents wrapping and shuffling while
72            // the container is resizing
73            this.innerCt = target.createChild({cls:this.innerCls});
74            this.padding = this.parseMargins(this.padding); 
75        }
76        this.renderAll(ct, this.innerCt);
77    },
78
79    // private
80    renderItem : function(c){
81        if(typeof c.margins == 'string'){
82            c.margins = this.parseMargins(c.margins);
83        }else if(!c.margins){
84            c.margins = this.defaultMargins;
85        }
86        Ext.layout.BoxLayout.superclass.renderItem.apply(this, arguments);
87    },
88
89    getTargetSize : function(target){
90        return (Ext.isIE6 && Ext.isStrict && target.dom == document.body) ? target.getStyleSize() : target.getViewSize();
91    },
92   
93    getItems: function(ct){
94        var items = [];
95        ct.items.each(function(c){
96            if(c.isVisible()){
97                items.push(c);
98            }
99        });
100        return items;
101    }
102
103    /**
104     * @property activeItem
105     * @hide
106     */
107});
108
109/**
110 * @class Ext.layout.VBoxLayout
111 * @extends Ext.layout.BoxLayout
112 * A layout that arranges items vertically
113 */
114Ext.layout.VBoxLayout = Ext.extend(Ext.layout.BoxLayout, {
115    /**
116     * @cfg {String} align
117     * Controls how the child items of the container are aligned. Acceptable configuration values for this
118     * property are:
119     * <div class="mdetail-params"><ul>
120     * <li><b><tt>left</tt></b> : <b>Default</b><div class="sub-desc">child items are aligned horizontally
121     * at the <b>left</b> side of the container</div></li>
122     * <li><b><tt>center</tt></b> : <div class="sub-desc">child items are aligned horizontally at the
123     * <b>mid-width</b> of the container</div></li>
124     * <li><b><tt>stretch</tt></b> : <div class="sub-desc">child items are stretched horizontally to fill
125     * the width of the container</div></li>
126     * <li><b><tt>stretchmax</tt></b> : <div class="sub-desc">child items are stretched horizontally to
127     * the size of the largest item.</div></li>
128     * </ul></div>
129     */
130    align : 'left', // left, center, stretch, strechmax
131    /**
132     * @cfg {String} pack
133     * Controls how the child items of the container are packed together. Acceptable configuration values
134     * for this property are:
135     * <div class="mdetail-params"><ul>
136     * <li><b><tt>start</tt></b> : <b>Default</b><div class="sub-desc">child items are packed together at
137     * <b>top</b> side of container</div></li>
138     * <li><b><tt>center</tt></b> : <div class="sub-desc">child items are packed together at
139     * <b>mid-height</b> of container</div></li>
140     * <li><b><tt>end</tt></b> : <div class="sub-desc">child items are packed together at <b>bottom</b>
141     * side of container</div></li>
142     * </ul></div>
143     */
144    /**
145     * @cfg {Number} flex
146     * This configuation option is to be applied to <b>child <tt>items</tt></b> of the container managed
147     * by this layout. Each child item with a <tt>flex</tt> property will be flexed <b>vertically</b>
148     * according to each item's <b>relative</b> <tt>flex</tt> value compared to the sum of all items with
149     * a <tt>flex</tt> value specified.  Any child items that have either a <tt>flex = 0</tt> or
150     * <tt>flex = undefined</tt> will not be 'flexed' (the initial size will not be changed).
151     */
152
153    // private
154    onLayout : function(ct, target){
155        Ext.layout.VBoxLayout.superclass.onLayout.call(this, ct, target);
156                   
157       
158        var cs = this.getItems(ct), cm, ch, margin,
159            size = this.getTargetSize(target),
160            w = size.width - target.getPadding('lr') - this.scrollOffset,
161            h = size.height - target.getPadding('tb'),
162            l = this.padding.left, t = this.padding.top,
163            isStart = this.pack == 'start',
164            isRestore = ['stretch', 'stretchmax'].indexOf(this.align) == -1,
165            stretchWidth = w - (this.padding.left + this.padding.right),
166            extraHeight = 0,
167            maxWidth = 0,
168            totalFlex = 0,
169            flexHeight = 0,
170            usedHeight = 0;
171           
172        Ext.each(cs, function(c){
173            cm = c.margins;
174            totalFlex += c.flex || 0;
175            ch = c.getHeight();
176            margin = cm.top + cm.bottom;
177            extraHeight += ch + margin;
178            flexHeight += margin + (c.flex ? 0 : ch);
179            maxWidth = Math.max(maxWidth, c.getWidth() + cm.left + cm.right);
180        });
181        extraHeight = h - extraHeight - this.padding.top - this.padding.bottom;
182       
183        var innerCtWidth = maxWidth + this.padding.left + this.padding.right;
184        switch(this.align){
185            case 'stretch':
186                this.innerCt.setSize(w, h);
187                break;
188            case 'stretchmax':
189            case 'left':
190                this.innerCt.setSize(innerCtWidth, h);
191                break;
192            case 'center':
193                this.innerCt.setSize(w = Math.max(w, innerCtWidth), h);
194                break;
195        }
196
197        var availHeight = Math.max(0, h - this.padding.top - this.padding.bottom - flexHeight),
198            leftOver = availHeight,
199            heights = [],
200            restore = [],
201            idx = 0,
202            availableWidth = Math.max(0, w - this.padding.left - this.padding.right);
203           
204
205        Ext.each(cs, function(c){
206            if(isStart && c.flex){
207                ch = Math.floor(availHeight * (c.flex / totalFlex));
208                leftOver -= ch;
209                heights.push(ch);
210            }
211        }); 
212       
213        if(this.pack == 'center'){
214            t += extraHeight ? extraHeight / 2 : 0;
215        }else if(this.pack == 'end'){
216            t += extraHeight;
217        }
218        Ext.each(cs, function(c){
219            cm = c.margins;
220            t += cm.top;
221            c.setPosition(l + cm.left, t);
222            if(isStart && c.flex){
223                ch = Math.max(0, heights[idx++] + (leftOver-- > 0 ? 1 : 0));
224                if(isRestore){
225                    restore.push(c.getWidth());
226                }
227                c.setSize(availableWidth, ch);
228            }else{
229                ch = c.getHeight();
230            }
231            t += ch + cm.bottom;
232        });
233       
234        idx = 0;
235        Ext.each(cs, function(c){
236            cm = c.margins;
237            if(this.align == 'stretch'){
238                c.setWidth((stretchWidth - (cm.left + cm.right)).constrain(
239                    c.minWidth || 0, c.maxWidth || 1000000));
240            }else if(this.align == 'stretchmax'){
241                c.setWidth((maxWidth - (cm.left + cm.right)).constrain(
242                    c.minWidth || 0, c.maxWidth || 1000000));
243            }else{
244                if(this.align == 'center'){
245                    var diff = availableWidth - (c.getWidth() + cm.left + cm.right);
246                    if(diff > 0){
247                        c.setPosition(l + cm.left + (diff/2), c.y);
248                    }
249                }
250                if(isStart && c.flex){
251                    c.setWidth(restore[idx++]);
252                }
253            }
254        }, this);
255    }
256    /**
257     * @property activeItem
258     * @hide
259     */
260});
261
262Ext.Container.LAYOUTS.vbox = Ext.layout.VBoxLayout;
263
264/**
265 * @class Ext.layout.HBoxLayout
266 * @extends Ext.layout.BoxLayout
267 * A layout that arranges items horizontally
268 */
269Ext.layout.HBoxLayout = Ext.extend(Ext.layout.BoxLayout, {
270    /**
271     * @cfg {String} align
272     * Controls how the child items of the container are aligned. Acceptable configuration values for this
273     * property are:
274     * <div class="mdetail-params"><ul>
275     * <li><b><tt>top</tt></b> : <b>Default</b><div class="sub-desc">child items are aligned vertically
276     * at the <b>left</b> side of the container</div></li>
277     * <li><b><tt>middle</tt></b> : <div class="sub-desc">child items are aligned vertically at the
278     * <b>mid-height</b> of the container</div></li>
279     * <li><b><tt>stretch</tt></b> : <div class="sub-desc">child items are stretched vertically to fill
280     * the height of the container</div></li>
281     * <li><b><tt>stretchmax</tt></b> : <div class="sub-desc">child items are stretched vertically to
282     * the size of the largest item.</div></li>
283     */
284    align : 'top', // top, middle, stretch, strechmax
285    /**
286     * @cfg {String} pack
287     * Controls how the child items of the container are packed together. Acceptable configuration values
288     * for this property are:
289     * <div class="mdetail-params"><ul>
290     * <li><b><tt>start</tt></b> : <b>Default</b><div class="sub-desc">child items are packed together at
291     * <b>left</b> side of container</div></li>
292     * <li><b><tt>center</tt></b> : <div class="sub-desc">child items are packed together at
293     * <b>mid-width</b> of container</div></li>
294     * <li><b><tt>end</tt></b> : <div class="sub-desc">child items are packed together at <b>right</b>
295     * side of container</div></li>
296     * </ul></div>
297     */
298    /**
299     * @cfg {Number} flex
300     * This configuation option is to be applied to <b>child <tt>items</tt></b> of the container managed
301     * by this layout. Each child item with a <tt>flex</tt> property will be flexed <b>horizontally</b>
302     * according to each item's <b>relative</b> <tt>flex</tt> value compared to the sum of all items with
303     * a <tt>flex</tt> value specified.  Any child items that have either a <tt>flex = 0</tt> or
304     * <tt>flex = undefined</tt> will not be 'flexed' (the initial size will not be changed).
305     */
306
307    // private
308    onLayout : function(ct, target){
309        Ext.layout.HBoxLayout.superclass.onLayout.call(this, ct, target);
310       
311        var cs = this.getItems(ct), cm, cw, margin,
312            size = this.getTargetSize(target),
313            w = size.width - target.getPadding('lr') - this.scrollOffset,
314            h = size.height - target.getPadding('tb'),
315            l = this.padding.left, t = this.padding.top,
316            isStart = this.pack == 'start',
317            isRestore = ['stretch', 'stretchmax'].indexOf(this.align) == -1,
318            stretchHeight = h - (this.padding.top + this.padding.bottom),
319            extraWidth = 0,
320            maxHeight = 0,
321            totalFlex = 0,
322            flexWidth = 0,
323            usedWidth = 0;
324       
325        Ext.each(cs, function(c){
326            cm = c.margins;
327            totalFlex += c.flex || 0;
328            cw = c.getWidth();
329            margin = cm.left + cm.right;
330            extraWidth += cw + margin;
331            flexWidth += margin + (c.flex ? 0 : cw);
332            maxHeight = Math.max(maxHeight, c.getHeight() + cm.top + cm.bottom);
333        });
334        extraWidth = w - extraWidth - this.padding.left - this.padding.right;
335       
336        var innerCtHeight = maxHeight + this.padding.top + this.padding.bottom;
337        switch(this.align){
338            case 'stretch':
339                this.innerCt.setSize(w, h);
340                break;
341            case 'stretchmax':
342            case 'top':
343                this.innerCt.setSize(w, innerCtHeight);
344                break;
345            case 'middle':
346                this.innerCt.setSize(w, h = Math.max(h, innerCtHeight));
347                break;
348        }
349       
350
351        var availWidth = Math.max(0, w - this.padding.left - this.padding.right - flexWidth),
352            leftOver = availWidth,
353            widths = [],
354            restore = [],
355            idx = 0,
356            availableHeight = Math.max(0, h - this.padding.top - this.padding.bottom);
357           
358
359        Ext.each(cs, function(c){
360            if(isStart && c.flex){
361                cw = Math.floor(availWidth * (c.flex / totalFlex));
362                leftOver -= cw;
363                widths.push(cw);
364            }
365        }); 
366       
367        if(this.pack == 'center'){
368            l += extraWidth ? extraWidth / 2 : 0;
369        }else if(this.pack == 'end'){
370            l += extraWidth;
371        }
372        Ext.each(cs, function(c){
373            cm = c.margins;
374            l += cm.left;
375            c.setPosition(l, t + cm.top);
376            if(isStart && c.flex){
377                cw = Math.max(0, widths[idx++] + (leftOver-- > 0 ? 1 : 0));
378                if(isRestore){
379                    restore.push(c.getHeight());
380                }
381                c.setSize(cw, availableHeight);
382            }else{
383                cw = c.getWidth();
384            }
385            l += cw + cm.right;
386        });
387       
388        idx = 0;
389        Ext.each(cs, function(c){
390            var cm = c.margins;
391            if(this.align == 'stretch'){
392                c.setHeight((stretchHeight - (cm.top + cm.bottom)).constrain(
393                    c.minHeight || 0, c.maxHeight || 1000000));
394            }else if(this.align == 'stretchmax'){
395                c.setHeight((maxHeight - (cm.top + cm.bottom)).constrain(
396                    c.minHeight || 0, c.maxHeight || 1000000));
397            }else{
398                if(this.align == 'middle'){
399                    var diff = availableHeight - (c.getHeight() + cm.top + cm.bottom);
400                    if(diff > 0){
401                        c.setPosition(c.x, t + cm.top + (diff/2));
402                    }
403                }
404                if(isStart && c.flex){
405                    c.setHeight(restore[idx++]);
406                }
407            }
408        }, this);
409    }
410
411    /**
412     * @property activeItem
413     * @hide
414     */
415});
416
417Ext.Container.LAYOUTS.hbox = Ext.layout.HBoxLayout;
Note: See TracBrowser for help on using the repository browser.