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