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.ColumnLayout |
---|
9 | * @extends Ext.layout.ContainerLayout |
---|
10 | * <p>This is the layout style of choice for creating structural layouts in a multi-column format where the width of |
---|
11 | * each column can be specified as a percentage or fixed width, but the height is allowed to vary based on the content. |
---|
12 | * This class is intended to be extended or created via the layout:'column' {@link Ext.Container#layout} config, |
---|
13 | * and should generally not need to be created directly via the new keyword.</p> |
---|
14 | * <p>ColumnLayout does not have any direct config options (other than inherited ones), but it does support a |
---|
15 | * specific config property of <b><tt>columnWidth</tt></b> that can be included in the config of any panel added to it. The |
---|
16 | * layout will use the columnWidth (if present) or width of each panel during layout to determine how to size each panel. |
---|
17 | * If width or columnWidth is not specified for a given panel, its width will default to the panel's width (or auto).</p> |
---|
18 | * <p>The width property is always evaluated as pixels, and must be a number greater than or equal to 1. |
---|
19 | * The columnWidth property is always evaluated as a percentage, and must be a decimal value greater than 0 and |
---|
20 | * less than 1 (e.g., .25).</p> |
---|
21 | * <p>The basic rules for specifying column widths are pretty simple. The logic makes two passes through the |
---|
22 | * set of contained panels. During the first layout pass, all panels that either have a fixed width or none |
---|
23 | * specified (auto) are skipped, but their widths are subtracted from the overall container width. During the second |
---|
24 | * pass, all panels with columnWidths are assigned pixel widths in proportion to their percentages based on |
---|
25 | * the total <b>remaining</b> container width. In other words, percentage width panels are designed to fill the space |
---|
26 | * left over by all the fixed-width and/or auto-width panels. Because of this, while you can specify any number of columns |
---|
27 | * with different percentages, the columnWidths must always add up to 1 (or 100%) when added together, otherwise your |
---|
28 | * layout may not render as expected. Example usage:</p> |
---|
29 | * <pre><code> |
---|
30 | // All columns are percentages -- they must add up to 1 |
---|
31 | var p = new Ext.Panel({ |
---|
32 | title: 'Column Layout - Percentage Only', |
---|
33 | layout:'column', |
---|
34 | items: [{ |
---|
35 | title: 'Column 1', |
---|
36 | columnWidth: .25 |
---|
37 | },{ |
---|
38 | title: 'Column 2', |
---|
39 | columnWidth: .6 |
---|
40 | },{ |
---|
41 | title: 'Column 3', |
---|
42 | columnWidth: .15 |
---|
43 | }] |
---|
44 | }); |
---|
45 | |
---|
46 | // Mix of width and columnWidth -- all columnWidth values must add up |
---|
47 | // to 1. The first column will take up exactly 120px, and the last two |
---|
48 | // columns will fill the remaining container width. |
---|
49 | var p = new Ext.Panel({ |
---|
50 | title: 'Column Layout - Mixed', |
---|
51 | layout:'column', |
---|
52 | items: [{ |
---|
53 | title: 'Column 1', |
---|
54 | width: 120 |
---|
55 | },{ |
---|
56 | title: 'Column 2', |
---|
57 | columnWidth: .8 |
---|
58 | },{ |
---|
59 | title: 'Column 3', |
---|
60 | columnWidth: .2 |
---|
61 | }] |
---|
62 | }); |
---|
63 | </code></pre> |
---|
64 | */ |
---|
65 | Ext.layout.ColumnLayout = Ext.extend(Ext.layout.ContainerLayout, { |
---|
66 | // private |
---|
67 | monitorResize:true, |
---|
68 | |
---|
69 | extraCls: 'x-column', |
---|
70 | |
---|
71 | scrollOffset : 0, |
---|
72 | |
---|
73 | // private |
---|
74 | isValidParent : function(c, target){ |
---|
75 | return (c.getPositionEl ? c.getPositionEl() : c.getEl()).dom.parentNode == this.innerCt.dom; |
---|
76 | }, |
---|
77 | |
---|
78 | // private |
---|
79 | onLayout : function(ct, target){ |
---|
80 | var cs = ct.items.items, len = cs.length, c, i; |
---|
81 | |
---|
82 | if(!this.innerCt){ |
---|
83 | target.addClass('x-column-layout-ct'); |
---|
84 | |
---|
85 | // the innerCt prevents wrapping and shuffling while |
---|
86 | // the container is resizing |
---|
87 | this.innerCt = target.createChild({cls:'x-column-inner'}); |
---|
88 | this.innerCt.createChild({cls:'x-clear'}); |
---|
89 | } |
---|
90 | this.renderAll(ct, this.innerCt); |
---|
91 | |
---|
92 | var size = Ext.isIE && target.dom != Ext.getBody().dom ? target.getStyleSize() : target.getViewSize(); |
---|
93 | |
---|
94 | if(size.width < 1 && size.height < 1){ // display none? |
---|
95 | return; |
---|
96 | } |
---|
97 | |
---|
98 | var w = size.width - target.getPadding('lr') - this.scrollOffset, |
---|
99 | h = size.height - target.getPadding('tb'), |
---|
100 | pw = w; |
---|
101 | |
---|
102 | this.innerCt.setWidth(w); |
---|
103 | |
---|
104 | // some columns can be percentages while others are fixed |
---|
105 | // so we need to make 2 passes |
---|
106 | |
---|
107 | for(i = 0; i < len; i++){ |
---|
108 | c = cs[i]; |
---|
109 | if(!c.columnWidth){ |
---|
110 | pw -= (c.getSize().width + c.getEl().getMargins('lr')); |
---|
111 | } |
---|
112 | } |
---|
113 | |
---|
114 | pw = pw < 0 ? 0 : pw; |
---|
115 | |
---|
116 | for(i = 0; i < len; i++){ |
---|
117 | c = cs[i]; |
---|
118 | if(c.columnWidth){ |
---|
119 | c.setSize(Math.floor(c.columnWidth*pw) - c.getEl().getMargins('lr')); |
---|
120 | } |
---|
121 | } |
---|
122 | } |
---|
123 | |
---|
124 | /** |
---|
125 | * @property activeItem |
---|
126 | * @hide |
---|
127 | */ |
---|
128 | }); |
---|
129 | |
---|
130 | Ext.Container.LAYOUTS['column'] = Ext.layout.ColumnLayout; |
---|