provide installation instructions
[extjs.git] / examples / layout-browser / layouts / custom.js
1 /*\r
2  * Ext JS Library 2.2.1\r
3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
4  * licensing@extjs.com\r
5  * \r
6  * http://extjs.com/license\r
7  */\r
8 \r
9 \r
10 // We are adding these custom layouts to a namespace that does not\r
11 // exist by default in Ext, so we have to add the namespace first:\r
12 Ext.ns('Ext.ux.layout');\r
13 \r
14 /*\r
15  * ================  CenterLayout  =======================\r
16  */\r
17 /**\r
18  * @class Ext.ux.layout.CenterLayout\r
19  * @extends Ext.layout.FitLayout\r
20  * <p>This is a very simple layout style used to center contents within a container.  This layout works within\r
21  * nested containers and can also be used as expected as a Viewport layout to center the page layout.</p>\r
22  * <p>As a subclass of FitLayout, CenterLayout expects to have a single child panel of the container that uses \r
23  * the layout.  The layout does not require any config options, although the child panel contained within the\r
24  * layout must provide a fixed or percentage width.  The child panel's height will fit to the container by\r
25  * default, but you can specify <tt>autoHeight:true</tt> to allow it to autosize based on its content height.  \r
26  * Example usage:</p> \r
27  * <pre><code>\r
28 // The content panel is centered in the container\r
29 var p = new Ext.Panel({\r
30     title: 'Center Layout',\r
31     layout: 'ux.center',\r
32     items: [{\r
33         title: 'Centered Content',\r
34         width: '75%',\r
35         html: 'Some content'\r
36     }]\r
37 });\r
38 \r
39 // If you leave the title blank and specify no border\r
40 // you'll create a non-visual, structural panel just\r
41 // for centering the contents in the main container.\r
42 var p = new Ext.Panel({\r
43     layout: 'ux.center',\r
44     border: false,\r
45     items: [{\r
46         title: 'Centered Content',\r
47         width: 300,\r
48         autoHeight: true,\r
49         html: 'Some content'\r
50     }]\r
51 });\r
52 </code></pre>\r
53  */\r
54 Ext.ux.layout.CenterLayout = Ext.extend(Ext.layout.FitLayout, {\r
55         // private\r
56     setItemSize : function(item, size){\r
57         this.container.addClass('ux-layout-center');\r
58         item.addClass('ux-layout-center-item');\r
59         if(item && size.height > 0){\r
60             if(item.width){\r
61                 size.width = item.width;\r
62             }\r
63             item.setSize(size);\r
64         }\r
65     }\r
66 });\r
67 Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;\r
68 \r
69 /*\r
70  * CenterLayout demo panel\r
71  */\r
72 var centerLayout = {\r
73         id: 'center-panel',\r
74     layout:'ux.center',\r
75     items: {\r
76         title: 'Centered Panel: 75% of container width and fit height',\r
77         layout: 'ux.center',\r
78         autoScroll: true,\r
79         width: '75%',\r
80         bodyStyle: 'padding:20px 0;',\r
81         items: [{\r
82                 title: 'Inner Centered Panel',\r
83                 html: 'Fixed 300px wide and auto height. The container panel will also autoscroll if narrower than 300px.',\r
84                 width: 300,\r
85                 frame: true,\r
86                 autoHeight: true,\r
87                 bodyStyle: 'padding:10px 20px;'\r
88         }]\r
89     }\r
90 };\r
91 \r
92 /*\r
93  * ================  RowLayout  =======================\r
94  */\r
95 /**\r
96  * @class Ext.ux.layout.RowLayout\r
97  * @extends Ext.layout.ContainerLayout\r
98  * <p>This is the layout style of choice for creating structural layouts in a multi-row format where the height of\r
99  * each row can be specified as a percentage or fixed height.  Row widths can also be fixed, percentage or auto.\r
100  * This class is intended to be extended or created via the layout:'ux.row' {@link Ext.Container#layout} config,\r
101  * and should generally not need to be created directly via the new keyword.</p>\r
102  * <p>RowLayout does not have any direct config options (other than inherited ones), but it does support a\r
103  * specific config property of <b><tt>rowHeight</tt></b> that can be included in the config of any panel added to it.  The\r
104  * layout will use the rowHeight (if present) or height of each panel during layout to determine how to size each panel.\r
105  * If height or rowHeight is not specified for a given panel, its height will default to the panel's height (or auto).</p>\r
106  * <p>The height property is always evaluated as pixels, and must be a number greater than or equal to 1.\r
107  * The rowHeight property is always evaluated as a percentage, and must be a decimal value greater than 0 and\r
108  * less than 1 (e.g., .25).</p>\r
109  * <p>The basic rules for specifying row heights are pretty simple.  The logic makes two passes through the\r
110  * set of contained panels.  During the first layout pass, all panels that either have a fixed height or none\r
111  * specified (auto) are skipped, but their heights are subtracted from the overall container height.  During the second\r
112  * pass, all panels with rowHeights are assigned pixel heights in proportion to their percentages based on\r
113  * the total <b>remaining</b> container height.  In other words, percentage height panels are designed to fill the space\r
114  * left over by all the fixed-height and/or auto-height panels.  Because of this, while you can specify any number of rows\r
115  * with different percentages, the rowHeights must always add up to 1 (or 100%) when added together, otherwise your\r
116  * layout may not render as expected.  Example usage:</p>\r
117  * <pre><code>\r
118 // All rows are percentages -- they must add up to 1\r
119 var p = new Ext.Panel({\r
120     title: 'Row Layout - Percentage Only',\r
121     layout:'ux.row',\r
122     items: [{\r
123         title: 'Row 1',\r
124         rowHeight: .25 \r
125     },{\r
126         title: 'Row 2',\r
127         rowHeight: .6\r
128     },{\r
129         title: 'Row 3',\r
130         rowHeight: .15\r
131     }]\r
132 });\r
133 \r
134 // Mix of height and rowHeight -- all rowHeight values must add\r
135 // up to 1. The first row will take up exactly 120px, and the last two\r
136 // rows will fill the remaining container height.\r
137 var p = new Ext.Panel({\r
138     title: 'Row Layout - Mixed',\r
139     layout:'ux.row',\r
140     items: [{\r
141         title: 'Row 1',\r
142         height: 120,\r
143         // standard panel widths are still supported too:\r
144         width: '50%' // or 200\r
145     },{\r
146         title: 'Row 2',\r
147         rowHeight: .8,\r
148         width: 300\r
149     },{\r
150         title: 'Row 3',\r
151         rowHeight: .2\r
152     }]\r
153 });\r
154 </code></pre>\r
155  */\r
156 Ext.ux.layout.RowLayout = Ext.extend(Ext.layout.ContainerLayout, {\r
157     // private\r
158     monitorResize:true,\r
159 \r
160     // private\r
161     isValidParent : function(c, target){\r
162         return c.getEl().dom.parentNode == this.innerCt.dom;\r
163     },\r
164 \r
165     // private\r
166     onLayout : function(ct, target){\r
167         var rs = ct.items.items, len = rs.length, r, i;\r
168 \r
169         if(!this.innerCt){\r
170             target.addClass('ux-row-layout-ct');\r
171             this.innerCt = target.createChild({cls:'x-row-inner'});\r
172         }\r
173         this.renderAll(ct, this.innerCt);\r
174 \r
175         var size = target.getViewSize();\r
176 \r
177         if(size.width < 1 && size.height < 1){ // display none?\r
178             return;\r
179         }\r
180 \r
181         var h = size.height - target.getPadding('tb'),\r
182             ph = h;\r
183 \r
184         this.innerCt.setSize({height:h});\r
185         \r
186         // some rows can be percentages while others are fixed\r
187         // so we need to make 2 passes\r
188         \r
189         for(i = 0; i < len; i++){\r
190             r = rs[i];\r
191             if(!r.rowHeight){\r
192                 ph -= (r.getSize().height + r.getEl().getMargins('tb'));\r
193             }\r
194         }\r
195 \r
196         ph = ph < 0 ? 0 : ph;\r
197 \r
198         for(i = 0; i < len; i++){\r
199             r = rs[i];\r
200             if(r.rowHeight){\r
201                 r.setSize({height: Math.floor(r.rowHeight*ph) - r.getEl().getMargins('tb')});\r
202             }\r
203         }\r
204     }\r
205     \r
206     /**\r
207      * @property activeItem\r
208      * @hide\r
209      */\r
210 });\r
211 Ext.Container.LAYOUTS['ux.row'] = Ext.ux.layout.RowLayout;\r
212 \r
213 /*\r
214  * RowLayout demo panel\r
215  */\r
216 var rowLayout = {\r
217         id: 'row-panel',\r
218         bodyStyle: 'padding:5px',\r
219         layout: 'ux.row',\r
220     title: 'Row Layout',\r
221     items: [{\r
222         title: 'Height = 25%, Width = 50%',\r
223         rowHeight: .25,\r
224         width: '50%'\r
225     },{\r
226         title: 'Height = 100px, Width = 300px',\r
227         height: 100,\r
228         width: 300\r
229     },{\r
230         title: 'Height = 75%, Width = fit',\r
231         rowHeight: .75\r
232     }]\r
233 };\r
234 \r