1 | /*! |
---|
2 | * Ext JS Library 3.4.0 |
---|
3 | * Copyright(c) 2006-2011 Sencha Inc. |
---|
4 | * licensing@sencha.com |
---|
5 | * http://www.sencha.com/license |
---|
6 | */ |
---|
7 | /** |
---|
8 | * @class Ext.layout.BorderLayout |
---|
9 | * @extends Ext.layout.ContainerLayout |
---|
10 | * <p>This is a multi-pane, application-oriented UI layout style that supports multiple |
---|
11 | * nested panels, automatic {@link Ext.layout.BorderLayout.Region#split split} bars between |
---|
12 | * {@link Ext.layout.BorderLayout.Region#BorderLayout.Region regions} and built-in |
---|
13 | * {@link Ext.layout.BorderLayout.Region#collapsible expanding and collapsing} of regions.</p> |
---|
14 | * <p>This class is intended to be extended or created via the <tt>layout:'border'</tt> |
---|
15 | * {@link Ext.Container#layout} config, and should generally not need to be created directly |
---|
16 | * via the new keyword.</p> |
---|
17 | * <p>BorderLayout does not have any direct config options (other than inherited ones). |
---|
18 | * All configuration options available for customizing the BorderLayout are at the |
---|
19 | * {@link Ext.layout.BorderLayout.Region} and {@link Ext.layout.BorderLayout.SplitRegion} |
---|
20 | * levels.</p> |
---|
21 | * <p>Example usage:</p> |
---|
22 | * <pre><code> |
---|
23 | var myBorderPanel = new Ext.Panel({ |
---|
24 | {@link Ext.Component#renderTo renderTo}: document.body, |
---|
25 | {@link Ext.BoxComponent#width width}: 700, |
---|
26 | {@link Ext.BoxComponent#height height}: 500, |
---|
27 | {@link Ext.Panel#title title}: 'Border Layout', |
---|
28 | {@link Ext.Container#layout layout}: 'border', |
---|
29 | {@link Ext.Container#items items}: [{ |
---|
30 | {@link Ext.Panel#title title}: 'South Region is resizable', |
---|
31 | {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}: 'south', // position for region |
---|
32 | {@link Ext.BoxComponent#height height}: 100, |
---|
33 | {@link Ext.layout.BorderLayout.Region#split split}: true, // enable resizing |
---|
34 | {@link Ext.SplitBar#minSize minSize}: 75, // defaults to {@link Ext.layout.BorderLayout.Region#minHeight 50} |
---|
35 | {@link Ext.SplitBar#maxSize maxSize}: 150, |
---|
36 | {@link Ext.layout.BorderLayout.Region#margins margins}: '0 5 5 5' |
---|
37 | },{ |
---|
38 | // xtype: 'panel' implied by default |
---|
39 | {@link Ext.Panel#title title}: 'West Region is collapsible', |
---|
40 | {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}:'west', |
---|
41 | {@link Ext.layout.BorderLayout.Region#margins margins}: '5 0 0 5', |
---|
42 | {@link Ext.BoxComponent#width width}: 200, |
---|
43 | {@link Ext.layout.BorderLayout.Region#collapsible collapsible}: true, // make collapsible |
---|
44 | {@link Ext.layout.BorderLayout.Region#cmargins cmargins}: '5 5 0 5', // adjust top margin when collapsed |
---|
45 | {@link Ext.Component#id id}: 'west-region-container', |
---|
46 | {@link Ext.Container#layout layout}: 'fit', |
---|
47 | {@link Ext.Panel#unstyled unstyled}: true |
---|
48 | },{ |
---|
49 | {@link Ext.Panel#title title}: 'Center Region', |
---|
50 | {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}: 'center', // center region is required, no width/height specified |
---|
51 | {@link Ext.Component#xtype xtype}: 'container', |
---|
52 | {@link Ext.Container#layout layout}: 'fit', |
---|
53 | {@link Ext.layout.BorderLayout.Region#margins margins}: '5 5 0 0' |
---|
54 | }] |
---|
55 | }); |
---|
56 | </code></pre> |
---|
57 | * <p><b><u>Notes</u></b>:</p><div class="mdetail-params"><ul> |
---|
58 | * <li>Any container using the BorderLayout <b>must</b> have a child item with <tt>region:'center'</tt>. |
---|
59 | * The child item in the center region will always be resized to fill the remaining space not used by |
---|
60 | * the other regions in the layout.</li> |
---|
61 | * <li>Any child items with a region of <tt>west</tt> or <tt>east</tt> must have <tt>width</tt> defined |
---|
62 | * (an integer representing the number of pixels that the region should take up).</li> |
---|
63 | * <li>Any child items with a region of <tt>north</tt> or <tt>south</tt> must have <tt>height</tt> defined.</li> |
---|
64 | * <li>The regions of a BorderLayout are <b>fixed at render time</b> and thereafter, its child Components may not be removed or added</b>. To add/remove |
---|
65 | * Components within a BorderLayout, have them wrapped by an additional Container which is directly |
---|
66 | * managed by the BorderLayout. If the region is to be collapsible, the Container used directly |
---|
67 | * by the BorderLayout manager should be a Panel. In the following example a Container (an Ext.Panel) |
---|
68 | * is added to the west region: |
---|
69 | * <div style="margin-left:16px"><pre><code> |
---|
70 | wrc = {@link Ext#getCmp Ext.getCmp}('west-region-container'); |
---|
71 | wrc.{@link Ext.Panel#removeAll removeAll}(); |
---|
72 | wrc.{@link Ext.Container#add add}({ |
---|
73 | title: 'Added Panel', |
---|
74 | html: 'Some content' |
---|
75 | }); |
---|
76 | wrc.{@link Ext.Container#doLayout doLayout}(); |
---|
77 | * </code></pre></div> |
---|
78 | * </li> |
---|
79 | * <li> To reference a {@link Ext.layout.BorderLayout.Region Region}: |
---|
80 | * <div style="margin-left:16px"><pre><code> |
---|
81 | wr = myBorderPanel.layout.west; |
---|
82 | * </code></pre></div> |
---|
83 | * </li> |
---|
84 | * </ul></div> |
---|
85 | */ |
---|
86 | Ext.layout.BorderLayout = Ext.extend(Ext.layout.ContainerLayout, { |
---|
87 | // private |
---|
88 | monitorResize:true, |
---|
89 | // private |
---|
90 | rendered : false, |
---|
91 | |
---|
92 | type: 'border', |
---|
93 | |
---|
94 | targetCls: 'x-border-layout-ct', |
---|
95 | |
---|
96 | getLayoutTargetSize : function() { |
---|
97 | var target = this.container.getLayoutTarget(); |
---|
98 | return target ? target.getViewSize() : {}; |
---|
99 | }, |
---|
100 | |
---|
101 | // private |
---|
102 | onLayout : function(ct, target){ |
---|
103 | var collapsed, i, c, pos, items = ct.items.items, len = items.length; |
---|
104 | if(!this.rendered){ |
---|
105 | collapsed = []; |
---|
106 | for(i = 0; i < len; i++) { |
---|
107 | c = items[i]; |
---|
108 | pos = c.region; |
---|
109 | if(c.collapsed){ |
---|
110 | collapsed.push(c); |
---|
111 | } |
---|
112 | c.collapsed = false; |
---|
113 | if(!c.rendered){ |
---|
114 | c.render(target, i); |
---|
115 | c.getPositionEl().addClass('x-border-panel'); |
---|
116 | } |
---|
117 | this[pos] = pos != 'center' && c.split ? |
---|
118 | new Ext.layout.BorderLayout.SplitRegion(this, c.initialConfig, pos) : |
---|
119 | new Ext.layout.BorderLayout.Region(this, c.initialConfig, pos); |
---|
120 | this[pos].render(target, c); |
---|
121 | } |
---|
122 | this.rendered = true; |
---|
123 | } |
---|
124 | |
---|
125 | var size = this.getLayoutTargetSize(); |
---|
126 | if(size.width < 20 || size.height < 20){ // display none? |
---|
127 | if(collapsed){ |
---|
128 | this.restoreCollapsed = collapsed; |
---|
129 | } |
---|
130 | return; |
---|
131 | }else if(this.restoreCollapsed){ |
---|
132 | collapsed = this.restoreCollapsed; |
---|
133 | delete this.restoreCollapsed; |
---|
134 | } |
---|
135 | |
---|
136 | var w = size.width, h = size.height, |
---|
137 | centerW = w, centerH = h, centerY = 0, centerX = 0, |
---|
138 | n = this.north, s = this.south, west = this.west, e = this.east, c = this.center, |
---|
139 | b, m, totalWidth, totalHeight; |
---|
140 | if(!c && Ext.layout.BorderLayout.WARN !== false){ |
---|
141 | throw 'No center region defined in BorderLayout ' + ct.id; |
---|
142 | } |
---|
143 | |
---|
144 | if(n && n.isVisible()){ |
---|
145 | b = n.getSize(); |
---|
146 | m = n.getMargins(); |
---|
147 | b.width = w - (m.left+m.right); |
---|
148 | b.x = m.left; |
---|
149 | b.y = m.top; |
---|
150 | centerY = b.height + b.y + m.bottom; |
---|
151 | centerH -= centerY; |
---|
152 | n.applyLayout(b); |
---|
153 | } |
---|
154 | if(s && s.isVisible()){ |
---|
155 | b = s.getSize(); |
---|
156 | m = s.getMargins(); |
---|
157 | b.width = w - (m.left+m.right); |
---|
158 | b.x = m.left; |
---|
159 | totalHeight = (b.height + m.top + m.bottom); |
---|
160 | b.y = h - totalHeight + m.top; |
---|
161 | centerH -= totalHeight; |
---|
162 | s.applyLayout(b); |
---|
163 | } |
---|
164 | if(west && west.isVisible()){ |
---|
165 | b = west.getSize(); |
---|
166 | m = west.getMargins(); |
---|
167 | b.height = centerH - (m.top+m.bottom); |
---|
168 | b.x = m.left; |
---|
169 | b.y = centerY + m.top; |
---|
170 | totalWidth = (b.width + m.left + m.right); |
---|
171 | centerX += totalWidth; |
---|
172 | centerW -= totalWidth; |
---|
173 | west.applyLayout(b); |
---|
174 | } |
---|
175 | if(e && e.isVisible()){ |
---|
176 | b = e.getSize(); |
---|
177 | m = e.getMargins(); |
---|
178 | b.height = centerH - (m.top+m.bottom); |
---|
179 | totalWidth = (b.width + m.left + m.right); |
---|
180 | b.x = w - totalWidth + m.left; |
---|
181 | b.y = centerY + m.top; |
---|
182 | centerW -= totalWidth; |
---|
183 | e.applyLayout(b); |
---|
184 | } |
---|
185 | if(c){ |
---|
186 | m = c.getMargins(); |
---|
187 | var centerBox = { |
---|
188 | x: centerX + m.left, |
---|
189 | y: centerY + m.top, |
---|
190 | width: centerW - (m.left+m.right), |
---|
191 | height: centerH - (m.top+m.bottom) |
---|
192 | }; |
---|
193 | c.applyLayout(centerBox); |
---|
194 | } |
---|
195 | if(collapsed){ |
---|
196 | for(i = 0, len = collapsed.length; i < len; i++){ |
---|
197 | collapsed[i].collapse(false); |
---|
198 | } |
---|
199 | } |
---|
200 | if(Ext.isIE && Ext.isStrict){ // workaround IE strict repainting issue |
---|
201 | target.repaint(); |
---|
202 | } |
---|
203 | // Putting a border layout into an overflowed container is NOT correct and will make a second layout pass necessary. |
---|
204 | if (i = target.getStyle('overflow') && i != 'hidden' && !this.adjustmentPass) { |
---|
205 | var ts = this.getLayoutTargetSize(); |
---|
206 | if (ts.width != size.width || ts.height != size.height){ |
---|
207 | this.adjustmentPass = true; |
---|
208 | this.onLayout(ct, target); |
---|
209 | } |
---|
210 | } |
---|
211 | delete this.adjustmentPass; |
---|
212 | }, |
---|
213 | |
---|
214 | destroy: function() { |
---|
215 | var r = ['north', 'south', 'east', 'west'], i, region; |
---|
216 | for (i = 0; i < r.length; i++) { |
---|
217 | region = this[r[i]]; |
---|
218 | if(region){ |
---|
219 | if(region.destroy){ |
---|
220 | region.destroy(); |
---|
221 | }else if (region.split){ |
---|
222 | region.split.destroy(true); |
---|
223 | } |
---|
224 | } |
---|
225 | } |
---|
226 | Ext.layout.BorderLayout.superclass.destroy.call(this); |
---|
227 | } |
---|
228 | |
---|
229 | /** |
---|
230 | * @property activeItem |
---|
231 | * @hide |
---|
232 | */ |
---|
233 | }); |
---|
234 | |
---|
235 | /** |
---|
236 | * @class Ext.layout.BorderLayout.Region |
---|
237 | * <p>This is a region of a {@link Ext.layout.BorderLayout BorderLayout} that acts as a subcontainer |
---|
238 | * within the layout. Each region has its own {@link Ext.layout.ContainerLayout layout} that is |
---|
239 | * independent of other regions and the containing BorderLayout, and can be any of the |
---|
240 | * {@link Ext.layout.ContainerLayout valid Ext layout types}.</p> |
---|
241 | * <p>Region size is managed automatically and cannot be changed by the user -- for |
---|
242 | * {@link #split resizable regions}, see {@link Ext.layout.BorderLayout.SplitRegion}.</p> |
---|
243 | * @constructor |
---|
244 | * Create a new Region. |
---|
245 | * @param {Layout} layout The {@link Ext.layout.BorderLayout BorderLayout} instance that is managing this Region. |
---|
246 | * @param {Object} config The configuration options |
---|
247 | * @param {String} position The region position. Valid values are: <tt>north</tt>, <tt>south</tt>, |
---|
248 | * <tt>east</tt>, <tt>west</tt> and <tt>center</tt>. Every {@link Ext.layout.BorderLayout BorderLayout} |
---|
249 | * <b>must have a center region</b> for the primary content -- all other regions are optional. |
---|
250 | */ |
---|
251 | Ext.layout.BorderLayout.Region = function(layout, config, pos){ |
---|
252 | Ext.apply(this, config); |
---|
253 | this.layout = layout; |
---|
254 | this.position = pos; |
---|
255 | this.state = {}; |
---|
256 | if(typeof this.margins == 'string'){ |
---|
257 | this.margins = this.layout.parseMargins(this.margins); |
---|
258 | } |
---|
259 | this.margins = Ext.applyIf(this.margins || {}, this.defaultMargins); |
---|
260 | if(this.collapsible){ |
---|
261 | if(typeof this.cmargins == 'string'){ |
---|
262 | this.cmargins = this.layout.parseMargins(this.cmargins); |
---|
263 | } |
---|
264 | if(this.collapseMode == 'mini' && !this.cmargins){ |
---|
265 | this.cmargins = {left:0,top:0,right:0,bottom:0}; |
---|
266 | }else{ |
---|
267 | this.cmargins = Ext.applyIf(this.cmargins || {}, |
---|
268 | pos == 'north' || pos == 'south' ? this.defaultNSCMargins : this.defaultEWCMargins); |
---|
269 | } |
---|
270 | } |
---|
271 | }; |
---|
272 | |
---|
273 | Ext.layout.BorderLayout.Region.prototype = { |
---|
274 | /** |
---|
275 | * @cfg {Boolean} animFloat |
---|
276 | * When a collapsed region's bar is clicked, the region's panel will be displayed as a floated |
---|
277 | * panel that will close again once the user mouses out of that panel (or clicks out if |
---|
278 | * <tt>{@link #autoHide} = false</tt>). Setting <tt>{@link #animFloat} = false</tt> will |
---|
279 | * prevent the open and close of these floated panels from being animated (defaults to <tt>true</tt>). |
---|
280 | */ |
---|
281 | /** |
---|
282 | * @cfg {Boolean} autoHide |
---|
283 | * When a collapsed region's bar is clicked, the region's panel will be displayed as a floated |
---|
284 | * panel. If <tt>autoHide = true</tt>, the panel will automatically hide after the user mouses |
---|
285 | * out of the panel. If <tt>autoHide = false</tt>, the panel will continue to display until the |
---|
286 | * user clicks outside of the panel (defaults to <tt>true</tt>). |
---|
287 | */ |
---|
288 | /** |
---|
289 | * @cfg {String} collapseMode |
---|
290 | * <tt>collapseMode</tt> supports two configuration values:<div class="mdetail-params"><ul> |
---|
291 | * <li><b><tt>undefined</tt></b> (default)<div class="sub-desc">By default, {@link #collapsible} |
---|
292 | * regions are collapsed by clicking the expand/collapse tool button that renders into the region's |
---|
293 | * title bar.</div></li> |
---|
294 | * <li><b><tt>'mini'</tt></b><div class="sub-desc">Optionally, when <tt>collapseMode</tt> is set to |
---|
295 | * <tt>'mini'</tt> the region's split bar will also display a small collapse button in the center of |
---|
296 | * the bar. In <tt>'mini'</tt> mode the region will collapse to a thinner bar than in normal mode. |
---|
297 | * </div></li> |
---|
298 | * </ul></div></p> |
---|
299 | * <p><b>Note</b>: if a collapsible region does not have a title bar, then set <tt>collapseMode = |
---|
300 | * 'mini'</tt> and <tt>{@link #split} = true</tt> in order for the region to be {@link #collapsible} |
---|
301 | * by the user as the expand/collapse tool button (that would go in the title bar) will not be rendered.</p> |
---|
302 | * <p>See also <tt>{@link #cmargins}</tt>.</p> |
---|
303 | */ |
---|
304 | /** |
---|
305 | * @cfg {Object} margins |
---|
306 | * An object containing margins to apply to the region when in the expanded state in the |
---|
307 | * format:<pre><code> |
---|
308 | { |
---|
309 | top: (top margin), |
---|
310 | right: (right margin), |
---|
311 | bottom: (bottom margin), |
---|
312 | left: (left margin) |
---|
313 | }</code></pre> |
---|
314 | * <p>May also be a string containing space-separated, numeric margin values. The order of the |
---|
315 | * sides associated with each value matches the way CSS processes margin values:</p> |
---|
316 | * <p><div class="mdetail-params"><ul> |
---|
317 | * <li>If there is only one value, it applies to all sides.</li> |
---|
318 | * <li>If there are two values, the top and bottom borders are set to the first value and the |
---|
319 | * right and left are set to the second.</li> |
---|
320 | * <li>If there are three values, the top is set to the first value, the left and right are set |
---|
321 | * to the second, and the bottom is set to the third.</li> |
---|
322 | * <li>If there are four values, they apply to the top, right, bottom, and left, respectively.</li> |
---|
323 | * </ul></div></p> |
---|
324 | * <p>Defaults to:</p><pre><code> |
---|
325 | * {top:0, right:0, bottom:0, left:0} |
---|
326 | * </code></pre> |
---|
327 | */ |
---|
328 | /** |
---|
329 | * @cfg {Object} cmargins |
---|
330 | * An object containing margins to apply to the region when in the collapsed state in the |
---|
331 | * format:<pre><code> |
---|
332 | { |
---|
333 | top: (top margin), |
---|
334 | right: (right margin), |
---|
335 | bottom: (bottom margin), |
---|
336 | left: (left margin) |
---|
337 | }</code></pre> |
---|
338 | * <p>May also be a string containing space-separated, numeric margin values. The order of the |
---|
339 | * sides associated with each value matches the way CSS processes margin values.</p> |
---|
340 | * <p><ul> |
---|
341 | * <li>If there is only one value, it applies to all sides.</li> |
---|
342 | * <li>If there are two values, the top and bottom borders are set to the first value and the |
---|
343 | * right and left are set to the second.</li> |
---|
344 | * <li>If there are three values, the top is set to the first value, the left and right are set |
---|
345 | * to the second, and the bottom is set to the third.</li> |
---|
346 | * <li>If there are four values, they apply to the top, right, bottom, and left, respectively.</li> |
---|
347 | * </ul></p> |
---|
348 | */ |
---|
349 | /** |
---|
350 | * @cfg {Boolean} collapsible |
---|
351 | * <p><tt>true</tt> to allow the user to collapse this region (defaults to <tt>false</tt>). If |
---|
352 | * <tt>true</tt>, an expand/collapse tool button will automatically be rendered into the title |
---|
353 | * bar of the region, otherwise the button will not be shown.</p> |
---|
354 | * <p><b>Note</b>: that a title bar is required to display the collapse/expand toggle button -- if |
---|
355 | * no <tt>title</tt> is specified for the region's panel, the region will only be collapsible if |
---|
356 | * <tt>{@link #collapseMode} = 'mini'</tt> and <tt>{@link #split} = true</tt>. |
---|
357 | */ |
---|
358 | collapsible : false, |
---|
359 | /** |
---|
360 | * @cfg {Boolean} split |
---|
361 | * <p><tt>true</tt> to create a {@link Ext.layout.BorderLayout.SplitRegion SplitRegion} and |
---|
362 | * display a 5px wide {@link Ext.SplitBar} between this region and its neighbor, allowing the user to |
---|
363 | * resize the regions dynamically. Defaults to <tt>false</tt> creating a |
---|
364 | * {@link Ext.layout.BorderLayout.Region Region}.</p><br> |
---|
365 | * <p><b>Notes</b>:</p><div class="mdetail-params"><ul> |
---|
366 | * <li>this configuration option is ignored if <tt>region='center'</tt></li> |
---|
367 | * <li>when <tt>split == true</tt>, it is common to specify a |
---|
368 | * <tt>{@link Ext.SplitBar#minSize minSize}</tt> and <tt>{@link Ext.SplitBar#maxSize maxSize}</tt> |
---|
369 | * for the {@link Ext.BoxComponent BoxComponent} representing the region. These are not native |
---|
370 | * configs of {@link Ext.BoxComponent BoxComponent}, and are used only by this class.</li> |
---|
371 | * <li>if <tt>{@link #collapseMode} = 'mini'</tt> requires <tt>split = true</tt> to reserve space |
---|
372 | * for the collapse tool</tt></li> |
---|
373 | * </ul></div> |
---|
374 | */ |
---|
375 | split:false, |
---|
376 | /** |
---|
377 | * @cfg {Boolean} floatable |
---|
378 | * <tt>true</tt> to allow clicking a collapsed region's bar to display the region's panel floated |
---|
379 | * above the layout, <tt>false</tt> to force the user to fully expand a collapsed region by |
---|
380 | * clicking the expand button to see it again (defaults to <tt>true</tt>). |
---|
381 | */ |
---|
382 | floatable: true, |
---|
383 | /** |
---|
384 | * @cfg {Number} minWidth |
---|
385 | * <p>The minimum allowable width in pixels for this region (defaults to <tt>50</tt>). |
---|
386 | * <tt>maxWidth</tt> may also be specified.</p><br> |
---|
387 | * <p><b>Note</b>: setting the <tt>{@link Ext.SplitBar#minSize minSize}</tt> / |
---|
388 | * <tt>{@link Ext.SplitBar#maxSize maxSize}</tt> supersedes any specified |
---|
389 | * <tt>minWidth</tt> / <tt>maxWidth</tt>.</p> |
---|
390 | */ |
---|
391 | minWidth:50, |
---|
392 | /** |
---|
393 | * @cfg {Number} minHeight |
---|
394 | * The minimum allowable height in pixels for this region (defaults to <tt>50</tt>) |
---|
395 | * <tt>maxHeight</tt> may also be specified.</p><br> |
---|
396 | * <p><b>Note</b>: setting the <tt>{@link Ext.SplitBar#minSize minSize}</tt> / |
---|
397 | * <tt>{@link Ext.SplitBar#maxSize maxSize}</tt> supersedes any specified |
---|
398 | * <tt>minHeight</tt> / <tt>maxHeight</tt>.</p> |
---|
399 | */ |
---|
400 | minHeight:50, |
---|
401 | |
---|
402 | // private |
---|
403 | defaultMargins : {left:0,top:0,right:0,bottom:0}, |
---|
404 | // private |
---|
405 | defaultNSCMargins : {left:5,top:5,right:5,bottom:5}, |
---|
406 | // private |
---|
407 | defaultEWCMargins : {left:5,top:0,right:5,bottom:0}, |
---|
408 | floatingZIndex: 100, |
---|
409 | |
---|
410 | /** |
---|
411 | * True if this region is collapsed. Read-only. |
---|
412 | * @type Boolean |
---|
413 | * @property |
---|
414 | */ |
---|
415 | isCollapsed : false, |
---|
416 | |
---|
417 | /** |
---|
418 | * This region's panel. Read-only. |
---|
419 | * @type Ext.Panel |
---|
420 | * @property panel |
---|
421 | */ |
---|
422 | /** |
---|
423 | * This region's layout. Read-only. |
---|
424 | * @type Layout |
---|
425 | * @property layout |
---|
426 | */ |
---|
427 | /** |
---|
428 | * This region's layout position (north, south, east, west or center). Read-only. |
---|
429 | * @type String |
---|
430 | * @property position |
---|
431 | */ |
---|
432 | |
---|
433 | // private |
---|
434 | render : function(ct, p){ |
---|
435 | this.panel = p; |
---|
436 | p.el.enableDisplayMode(); |
---|
437 | this.targetEl = ct; |
---|
438 | this.el = p.el; |
---|
439 | |
---|
440 | var gs = p.getState, ps = this.position; |
---|
441 | p.getState = function(){ |
---|
442 | return Ext.apply(gs.call(p) || {}, this.state); |
---|
443 | }.createDelegate(this); |
---|
444 | |
---|
445 | if(ps != 'center'){ |
---|
446 | p.allowQueuedExpand = false; |
---|
447 | p.on({ |
---|
448 | beforecollapse: this.beforeCollapse, |
---|
449 | collapse: this.onCollapse, |
---|
450 | beforeexpand: this.beforeExpand, |
---|
451 | expand: this.onExpand, |
---|
452 | hide: this.onHide, |
---|
453 | show: this.onShow, |
---|
454 | scope: this |
---|
455 | }); |
---|
456 | if(this.collapsible || this.floatable){ |
---|
457 | p.collapseEl = 'el'; |
---|
458 | p.slideAnchor = this.getSlideAnchor(); |
---|
459 | } |
---|
460 | if(p.tools && p.tools.toggle){ |
---|
461 | p.tools.toggle.addClass('x-tool-collapse-'+ps); |
---|
462 | p.tools.toggle.addClassOnOver('x-tool-collapse-'+ps+'-over'); |
---|
463 | } |
---|
464 | } |
---|
465 | }, |
---|
466 | |
---|
467 | // private |
---|
468 | getCollapsedEl : function(){ |
---|
469 | if(!this.collapsedEl){ |
---|
470 | if(!this.toolTemplate){ |
---|
471 | var tt = new Ext.Template( |
---|
472 | '<div class="x-tool x-tool-{id}"> </div>' |
---|
473 | ); |
---|
474 | tt.disableFormats = true; |
---|
475 | tt.compile(); |
---|
476 | Ext.layout.BorderLayout.Region.prototype.toolTemplate = tt; |
---|
477 | } |
---|
478 | this.collapsedEl = this.targetEl.createChild({ |
---|
479 | cls: "x-layout-collapsed x-layout-collapsed-"+this.position, |
---|
480 | id: this.panel.id + '-xcollapsed' |
---|
481 | }); |
---|
482 | this.collapsedEl.enableDisplayMode('block'); |
---|
483 | |
---|
484 | if(this.collapseMode == 'mini'){ |
---|
485 | this.collapsedEl.addClass('x-layout-cmini-'+this.position); |
---|
486 | this.miniCollapsedEl = this.collapsedEl.createChild({ |
---|
487 | cls: "x-layout-mini x-layout-mini-"+this.position, html: " " |
---|
488 | }); |
---|
489 | this.miniCollapsedEl.addClassOnOver('x-layout-mini-over'); |
---|
490 | this.collapsedEl.addClassOnOver("x-layout-collapsed-over"); |
---|
491 | this.collapsedEl.on('click', this.onExpandClick, this, {stopEvent:true}); |
---|
492 | }else { |
---|
493 | if(this.collapsible !== false && !this.hideCollapseTool) { |
---|
494 | var t = this.expandToolEl = this.toolTemplate.append( |
---|
495 | this.collapsedEl.dom, |
---|
496 | {id:'expand-'+this.position}, true); |
---|
497 | t.addClassOnOver('x-tool-expand-'+this.position+'-over'); |
---|
498 | t.on('click', this.onExpandClick, this, {stopEvent:true}); |
---|
499 | } |
---|
500 | if(this.floatable !== false || this.titleCollapse){ |
---|
501 | this.collapsedEl.addClassOnOver("x-layout-collapsed-over"); |
---|
502 | this.collapsedEl.on("click", this[this.floatable ? 'collapseClick' : 'onExpandClick'], this); |
---|
503 | } |
---|
504 | } |
---|
505 | } |
---|
506 | return this.collapsedEl; |
---|
507 | }, |
---|
508 | |
---|
509 | // private |
---|
510 | onExpandClick : function(e){ |
---|
511 | if(this.isSlid){ |
---|
512 | this.panel.expand(false); |
---|
513 | }else{ |
---|
514 | this.panel.expand(); |
---|
515 | } |
---|
516 | }, |
---|
517 | |
---|
518 | // private |
---|
519 | onCollapseClick : function(e){ |
---|
520 | this.panel.collapse(); |
---|
521 | }, |
---|
522 | |
---|
523 | // private |
---|
524 | beforeCollapse : function(p, animate){ |
---|
525 | this.lastAnim = animate; |
---|
526 | if(this.splitEl){ |
---|
527 | this.splitEl.hide(); |
---|
528 | } |
---|
529 | this.getCollapsedEl().show(); |
---|
530 | var el = this.panel.getEl(); |
---|
531 | this.originalZIndex = el.getStyle('z-index'); |
---|
532 | el.setStyle('z-index', 100); |
---|
533 | this.isCollapsed = true; |
---|
534 | this.layout.layout(); |
---|
535 | }, |
---|
536 | |
---|
537 | // private |
---|
538 | onCollapse : function(animate){ |
---|
539 | this.panel.el.setStyle('z-index', 1); |
---|
540 | if(this.lastAnim === false || this.panel.animCollapse === false){ |
---|
541 | this.getCollapsedEl().dom.style.visibility = 'visible'; |
---|
542 | }else{ |
---|
543 | this.getCollapsedEl().slideIn(this.panel.slideAnchor, {duration:.2}); |
---|
544 | } |
---|
545 | this.state.collapsed = true; |
---|
546 | this.panel.saveState(); |
---|
547 | }, |
---|
548 | |
---|
549 | // private |
---|
550 | beforeExpand : function(animate){ |
---|
551 | if(this.isSlid){ |
---|
552 | this.afterSlideIn(); |
---|
553 | } |
---|
554 | var c = this.getCollapsedEl(); |
---|
555 | this.el.show(); |
---|
556 | if(this.position == 'east' || this.position == 'west'){ |
---|
557 | this.panel.setSize(undefined, c.getHeight()); |
---|
558 | }else{ |
---|
559 | this.panel.setSize(c.getWidth(), undefined); |
---|
560 | } |
---|
561 | c.hide(); |
---|
562 | c.dom.style.visibility = 'hidden'; |
---|
563 | this.panel.el.setStyle('z-index', this.floatingZIndex); |
---|
564 | }, |
---|
565 | |
---|
566 | // private |
---|
567 | onExpand : function(){ |
---|
568 | this.isCollapsed = false; |
---|
569 | if(this.splitEl){ |
---|
570 | this.splitEl.show(); |
---|
571 | } |
---|
572 | this.layout.layout(); |
---|
573 | this.panel.el.setStyle('z-index', this.originalZIndex); |
---|
574 | this.state.collapsed = false; |
---|
575 | this.panel.saveState(); |
---|
576 | }, |
---|
577 | |
---|
578 | // private |
---|
579 | collapseClick : function(e){ |
---|
580 | if(this.isSlid){ |
---|
581 | e.stopPropagation(); |
---|
582 | this.slideIn(); |
---|
583 | }else{ |
---|
584 | e.stopPropagation(); |
---|
585 | this.slideOut(); |
---|
586 | } |
---|
587 | }, |
---|
588 | |
---|
589 | // private |
---|
590 | onHide : function(){ |
---|
591 | if(this.isCollapsed){ |
---|
592 | this.getCollapsedEl().hide(); |
---|
593 | }else if(this.splitEl){ |
---|
594 | this.splitEl.hide(); |
---|
595 | } |
---|
596 | }, |
---|
597 | |
---|
598 | // private |
---|
599 | onShow : function(){ |
---|
600 | if(this.isCollapsed){ |
---|
601 | this.getCollapsedEl().show(); |
---|
602 | }else if(this.splitEl){ |
---|
603 | this.splitEl.show(); |
---|
604 | } |
---|
605 | }, |
---|
606 | |
---|
607 | /** |
---|
608 | * True if this region is currently visible, else false. |
---|
609 | * @return {Boolean} |
---|
610 | */ |
---|
611 | isVisible : function(){ |
---|
612 | return !this.panel.hidden; |
---|
613 | }, |
---|
614 | |
---|
615 | /** |
---|
616 | * Returns the current margins for this region. If the region is collapsed, the |
---|
617 | * {@link #cmargins} (collapsed margins) value will be returned, otherwise the |
---|
618 | * {@link #margins} value will be returned. |
---|
619 | * @return {Object} An object containing the element's margins: <tt>{left: (left |
---|
620 | * margin), top: (top margin), right: (right margin), bottom: (bottom margin)}</tt> |
---|
621 | */ |
---|
622 | getMargins : function(){ |
---|
623 | return this.isCollapsed && this.cmargins ? this.cmargins : this.margins; |
---|
624 | }, |
---|
625 | |
---|
626 | /** |
---|
627 | * Returns the current size of this region. If the region is collapsed, the size of the |
---|
628 | * collapsedEl will be returned, otherwise the size of the region's panel will be returned. |
---|
629 | * @return {Object} An object containing the element's size: <tt>{width: (element width), |
---|
630 | * height: (element height)}</tt> |
---|
631 | */ |
---|
632 | getSize : function(){ |
---|
633 | return this.isCollapsed ? this.getCollapsedEl().getSize() : this.panel.getSize(); |
---|
634 | }, |
---|
635 | |
---|
636 | /** |
---|
637 | * Sets the specified panel as the container element for this region. |
---|
638 | * @param {Ext.Panel} panel The new panel |
---|
639 | */ |
---|
640 | setPanel : function(panel){ |
---|
641 | this.panel = panel; |
---|
642 | }, |
---|
643 | |
---|
644 | /** |
---|
645 | * Returns the minimum allowable width for this region. |
---|
646 | * @return {Number} The minimum width |
---|
647 | */ |
---|
648 | getMinWidth: function(){ |
---|
649 | return this.minWidth; |
---|
650 | }, |
---|
651 | |
---|
652 | /** |
---|
653 | * Returns the minimum allowable height for this region. |
---|
654 | * @return {Number} The minimum height |
---|
655 | */ |
---|
656 | getMinHeight: function(){ |
---|
657 | return this.minHeight; |
---|
658 | }, |
---|
659 | |
---|
660 | // private |
---|
661 | applyLayoutCollapsed : function(box){ |
---|
662 | var ce = this.getCollapsedEl(); |
---|
663 | ce.setLeftTop(box.x, box.y); |
---|
664 | ce.setSize(box.width, box.height); |
---|
665 | }, |
---|
666 | |
---|
667 | // private |
---|
668 | applyLayout : function(box){ |
---|
669 | if(this.isCollapsed){ |
---|
670 | this.applyLayoutCollapsed(box); |
---|
671 | }else{ |
---|
672 | this.panel.setPosition(box.x, box.y); |
---|
673 | this.panel.setSize(box.width, box.height); |
---|
674 | } |
---|
675 | }, |
---|
676 | |
---|
677 | // private |
---|
678 | beforeSlide: function(){ |
---|
679 | this.panel.beforeEffect(); |
---|
680 | }, |
---|
681 | |
---|
682 | // private |
---|
683 | afterSlide : function(){ |
---|
684 | this.panel.afterEffect(); |
---|
685 | }, |
---|
686 | |
---|
687 | // private |
---|
688 | initAutoHide : function(){ |
---|
689 | if(this.autoHide !== false){ |
---|
690 | if(!this.autoHideHd){ |
---|
691 | this.autoHideSlideTask = new Ext.util.DelayedTask(this.slideIn, this); |
---|
692 | this.autoHideHd = { |
---|
693 | "mouseout": function(e){ |
---|
694 | if(!e.within(this.el, true)){ |
---|
695 | this.autoHideSlideTask.delay(500); |
---|
696 | } |
---|
697 | }, |
---|
698 | "mouseover" : function(e){ |
---|
699 | this.autoHideSlideTask.cancel(); |
---|
700 | }, |
---|
701 | scope : this |
---|
702 | }; |
---|
703 | } |
---|
704 | this.el.on(this.autoHideHd); |
---|
705 | this.collapsedEl.on(this.autoHideHd); |
---|
706 | } |
---|
707 | }, |
---|
708 | |
---|
709 | // private |
---|
710 | clearAutoHide : function(){ |
---|
711 | if(this.autoHide !== false){ |
---|
712 | this.el.un("mouseout", this.autoHideHd.mouseout); |
---|
713 | this.el.un("mouseover", this.autoHideHd.mouseover); |
---|
714 | this.collapsedEl.un("mouseout", this.autoHideHd.mouseout); |
---|
715 | this.collapsedEl.un("mouseover", this.autoHideHd.mouseover); |
---|
716 | } |
---|
717 | }, |
---|
718 | |
---|
719 | // private |
---|
720 | clearMonitor : function(){ |
---|
721 | Ext.getDoc().un("click", this.slideInIf, this); |
---|
722 | }, |
---|
723 | |
---|
724 | /** |
---|
725 | * If this Region is {@link #floatable}, this method slides this Region into full visibility <i>over the top |
---|
726 | * of the center Region</i> where it floats until either {@link #slideIn} is called, or other regions of the layout |
---|
727 | * are clicked, or the mouse exits the Region. |
---|
728 | */ |
---|
729 | slideOut : function(){ |
---|
730 | if(this.isSlid || this.el.hasActiveFx()){ |
---|
731 | return; |
---|
732 | } |
---|
733 | this.isSlid = true; |
---|
734 | var ts = this.panel.tools, dh, pc; |
---|
735 | if(ts && ts.toggle){ |
---|
736 | ts.toggle.hide(); |
---|
737 | } |
---|
738 | this.el.show(); |
---|
739 | |
---|
740 | // Temporarily clear the collapsed flag so we can onResize the panel on the slide |
---|
741 | pc = this.panel.collapsed; |
---|
742 | this.panel.collapsed = false; |
---|
743 | |
---|
744 | if(this.position == 'east' || this.position == 'west'){ |
---|
745 | // Temporarily clear the deferHeight flag so we can size the height on the slide |
---|
746 | dh = this.panel.deferHeight; |
---|
747 | this.panel.deferHeight = false; |
---|
748 | |
---|
749 | this.panel.setSize(undefined, this.collapsedEl.getHeight()); |
---|
750 | |
---|
751 | // Put the deferHeight flag back after setSize |
---|
752 | this.panel.deferHeight = dh; |
---|
753 | }else{ |
---|
754 | this.panel.setSize(this.collapsedEl.getWidth(), undefined); |
---|
755 | } |
---|
756 | |
---|
757 | // Put the collapsed flag back after onResize |
---|
758 | this.panel.collapsed = pc; |
---|
759 | |
---|
760 | this.restoreLT = [this.el.dom.style.left, this.el.dom.style.top]; |
---|
761 | this.el.alignTo(this.collapsedEl, this.getCollapseAnchor()); |
---|
762 | this.el.setStyle("z-index", this.floatingZIndex+2); |
---|
763 | this.panel.el.replaceClass('x-panel-collapsed', 'x-panel-floating'); |
---|
764 | if(this.animFloat !== false){ |
---|
765 | this.beforeSlide(); |
---|
766 | this.el.slideIn(this.getSlideAnchor(), { |
---|
767 | callback: function(){ |
---|
768 | this.afterSlide(); |
---|
769 | this.initAutoHide(); |
---|
770 | Ext.getDoc().on("click", this.slideInIf, this); |
---|
771 | }, |
---|
772 | scope: this, |
---|
773 | block: true |
---|
774 | }); |
---|
775 | }else{ |
---|
776 | this.initAutoHide(); |
---|
777 | Ext.getDoc().on("click", this.slideInIf, this); |
---|
778 | } |
---|
779 | }, |
---|
780 | |
---|
781 | // private |
---|
782 | afterSlideIn : function(){ |
---|
783 | this.clearAutoHide(); |
---|
784 | this.isSlid = false; |
---|
785 | this.clearMonitor(); |
---|
786 | this.el.setStyle("z-index", ""); |
---|
787 | this.panel.el.replaceClass('x-panel-floating', 'x-panel-collapsed'); |
---|
788 | this.el.dom.style.left = this.restoreLT[0]; |
---|
789 | this.el.dom.style.top = this.restoreLT[1]; |
---|
790 | |
---|
791 | var ts = this.panel.tools; |
---|
792 | if(ts && ts.toggle){ |
---|
793 | ts.toggle.show(); |
---|
794 | } |
---|
795 | }, |
---|
796 | |
---|
797 | /** |
---|
798 | * If this Region is {@link #floatable}, and this Region has been slid into floating visibility, then this method slides |
---|
799 | * this region back into its collapsed state. |
---|
800 | */ |
---|
801 | slideIn : function(cb){ |
---|
802 | if(!this.isSlid || this.el.hasActiveFx()){ |
---|
803 | Ext.callback(cb); |
---|
804 | return; |
---|
805 | } |
---|
806 | this.isSlid = false; |
---|
807 | if(this.animFloat !== false){ |
---|
808 | this.beforeSlide(); |
---|
809 | this.el.slideOut(this.getSlideAnchor(), { |
---|
810 | callback: function(){ |
---|
811 | this.el.hide(); |
---|
812 | this.afterSlide(); |
---|
813 | this.afterSlideIn(); |
---|
814 | Ext.callback(cb); |
---|
815 | }, |
---|
816 | scope: this, |
---|
817 | block: true |
---|
818 | }); |
---|
819 | }else{ |
---|
820 | this.el.hide(); |
---|
821 | this.afterSlideIn(); |
---|
822 | } |
---|
823 | }, |
---|
824 | |
---|
825 | // private |
---|
826 | slideInIf : function(e){ |
---|
827 | if(!e.within(this.el)){ |
---|
828 | this.slideIn(); |
---|
829 | } |
---|
830 | }, |
---|
831 | |
---|
832 | // private |
---|
833 | anchors : { |
---|
834 | "west" : "left", |
---|
835 | "east" : "right", |
---|
836 | "north" : "top", |
---|
837 | "south" : "bottom" |
---|
838 | }, |
---|
839 | |
---|
840 | // private |
---|
841 | sanchors : { |
---|
842 | "west" : "l", |
---|
843 | "east" : "r", |
---|
844 | "north" : "t", |
---|
845 | "south" : "b" |
---|
846 | }, |
---|
847 | |
---|
848 | // private |
---|
849 | canchors : { |
---|
850 | "west" : "tl-tr", |
---|
851 | "east" : "tr-tl", |
---|
852 | "north" : "tl-bl", |
---|
853 | "south" : "bl-tl" |
---|
854 | }, |
---|
855 | |
---|
856 | // private |
---|
857 | getAnchor : function(){ |
---|
858 | return this.anchors[this.position]; |
---|
859 | }, |
---|
860 | |
---|
861 | // private |
---|
862 | getCollapseAnchor : function(){ |
---|
863 | return this.canchors[this.position]; |
---|
864 | }, |
---|
865 | |
---|
866 | // private |
---|
867 | getSlideAnchor : function(){ |
---|
868 | return this.sanchors[this.position]; |
---|
869 | }, |
---|
870 | |
---|
871 | // private |
---|
872 | getAlignAdj : function(){ |
---|
873 | var cm = this.cmargins; |
---|
874 | switch(this.position){ |
---|
875 | case "west": |
---|
876 | return [0, 0]; |
---|
877 | break; |
---|
878 | case "east": |
---|
879 | return [0, 0]; |
---|
880 | break; |
---|
881 | case "north": |
---|
882 | return [0, 0]; |
---|
883 | break; |
---|
884 | case "south": |
---|
885 | return [0, 0]; |
---|
886 | break; |
---|
887 | } |
---|
888 | }, |
---|
889 | |
---|
890 | // private |
---|
891 | getExpandAdj : function(){ |
---|
892 | var c = this.collapsedEl, cm = this.cmargins; |
---|
893 | switch(this.position){ |
---|
894 | case "west": |
---|
895 | return [-(cm.right+c.getWidth()+cm.left), 0]; |
---|
896 | break; |
---|
897 | case "east": |
---|
898 | return [cm.right+c.getWidth()+cm.left, 0]; |
---|
899 | break; |
---|
900 | case "north": |
---|
901 | return [0, -(cm.top+cm.bottom+c.getHeight())]; |
---|
902 | break; |
---|
903 | case "south": |
---|
904 | return [0, cm.top+cm.bottom+c.getHeight()]; |
---|
905 | break; |
---|
906 | } |
---|
907 | }, |
---|
908 | |
---|
909 | destroy : function(){ |
---|
910 | if (this.autoHideSlideTask && this.autoHideSlideTask.cancel){ |
---|
911 | this.autoHideSlideTask.cancel(); |
---|
912 | } |
---|
913 | Ext.destroyMembers(this, 'miniCollapsedEl', 'collapsedEl', 'expandToolEl'); |
---|
914 | } |
---|
915 | }; |
---|
916 | |
---|
917 | /** |
---|
918 | * @class Ext.layout.BorderLayout.SplitRegion |
---|
919 | * @extends Ext.layout.BorderLayout.Region |
---|
920 | * <p>This is a specialized type of {@link Ext.layout.BorderLayout.Region BorderLayout region} that |
---|
921 | * has a built-in {@link Ext.SplitBar} for user resizing of regions. The movement of the split bar |
---|
922 | * is configurable to move either {@link #tickSize smooth or incrementally}.</p> |
---|
923 | * @constructor |
---|
924 | * Create a new SplitRegion. |
---|
925 | * @param {Layout} layout The {@link Ext.layout.BorderLayout BorderLayout} instance that is managing this Region. |
---|
926 | * @param {Object} config The configuration options |
---|
927 | * @param {String} position The region position. Valid values are: north, south, east, west and center. Every |
---|
928 | * BorderLayout must have a center region for the primary content -- all other regions are optional. |
---|
929 | */ |
---|
930 | Ext.layout.BorderLayout.SplitRegion = function(layout, config, pos){ |
---|
931 | Ext.layout.BorderLayout.SplitRegion.superclass.constructor.call(this, layout, config, pos); |
---|
932 | // prevent switch |
---|
933 | this.applyLayout = this.applyFns[pos]; |
---|
934 | }; |
---|
935 | |
---|
936 | Ext.extend(Ext.layout.BorderLayout.SplitRegion, Ext.layout.BorderLayout.Region, { |
---|
937 | /** |
---|
938 | * @cfg {Number} tickSize |
---|
939 | * The increment, in pixels by which to move this Region's {@link Ext.SplitBar SplitBar}. |
---|
940 | * By default, the {@link Ext.SplitBar SplitBar} moves smoothly. |
---|
941 | */ |
---|
942 | /** |
---|
943 | * @cfg {String} splitTip |
---|
944 | * The tooltip to display when the user hovers over a |
---|
945 | * {@link Ext.layout.BorderLayout.Region#collapsible non-collapsible} region's split bar |
---|
946 | * (defaults to <tt>"Drag to resize."</tt>). Only applies if |
---|
947 | * <tt>{@link #useSplitTips} = true</tt>. |
---|
948 | */ |
---|
949 | splitTip : "Drag to resize.", |
---|
950 | /** |
---|
951 | * @cfg {String} collapsibleSplitTip |
---|
952 | * The tooltip to display when the user hovers over a |
---|
953 | * {@link Ext.layout.BorderLayout.Region#collapsible collapsible} region's split bar |
---|
954 | * (defaults to "Drag to resize. Double click to hide."). Only applies if |
---|
955 | * <tt>{@link #useSplitTips} = true</tt>. |
---|
956 | */ |
---|
957 | collapsibleSplitTip : "Drag to resize. Double click to hide.", |
---|
958 | /** |
---|
959 | * @cfg {Boolean} useSplitTips |
---|
960 | * <tt>true</tt> to display a tooltip when the user hovers over a region's split bar |
---|
961 | * (defaults to <tt>false</tt>). The tooltip text will be the value of either |
---|
962 | * <tt>{@link #splitTip}</tt> or <tt>{@link #collapsibleSplitTip}</tt> as appropriate. |
---|
963 | */ |
---|
964 | useSplitTips : false, |
---|
965 | |
---|
966 | // private |
---|
967 | splitSettings : { |
---|
968 | north : { |
---|
969 | orientation: Ext.SplitBar.VERTICAL, |
---|
970 | placement: Ext.SplitBar.TOP, |
---|
971 | maxFn : 'getVMaxSize', |
---|
972 | minProp: 'minHeight', |
---|
973 | maxProp: 'maxHeight' |
---|
974 | }, |
---|
975 | south : { |
---|
976 | orientation: Ext.SplitBar.VERTICAL, |
---|
977 | placement: Ext.SplitBar.BOTTOM, |
---|
978 | maxFn : 'getVMaxSize', |
---|
979 | minProp: 'minHeight', |
---|
980 | maxProp: 'maxHeight' |
---|
981 | }, |
---|
982 | east : { |
---|
983 | orientation: Ext.SplitBar.HORIZONTAL, |
---|
984 | placement: Ext.SplitBar.RIGHT, |
---|
985 | maxFn : 'getHMaxSize', |
---|
986 | minProp: 'minWidth', |
---|
987 | maxProp: 'maxWidth' |
---|
988 | }, |
---|
989 | west : { |
---|
990 | orientation: Ext.SplitBar.HORIZONTAL, |
---|
991 | placement: Ext.SplitBar.LEFT, |
---|
992 | maxFn : 'getHMaxSize', |
---|
993 | minProp: 'minWidth', |
---|
994 | maxProp: 'maxWidth' |
---|
995 | } |
---|
996 | }, |
---|
997 | |
---|
998 | // private |
---|
999 | applyFns : { |
---|
1000 | west : function(box){ |
---|
1001 | if(this.isCollapsed){ |
---|
1002 | return this.applyLayoutCollapsed(box); |
---|
1003 | } |
---|
1004 | var sd = this.splitEl.dom, s = sd.style; |
---|
1005 | this.panel.setPosition(box.x, box.y); |
---|
1006 | var sw = sd.offsetWidth; |
---|
1007 | s.left = (box.x+box.width-sw)+'px'; |
---|
1008 | s.top = (box.y)+'px'; |
---|
1009 | s.height = Math.max(0, box.height)+'px'; |
---|
1010 | this.panel.setSize(box.width-sw, box.height); |
---|
1011 | }, |
---|
1012 | east : function(box){ |
---|
1013 | if(this.isCollapsed){ |
---|
1014 | return this.applyLayoutCollapsed(box); |
---|
1015 | } |
---|
1016 | var sd = this.splitEl.dom, s = sd.style; |
---|
1017 | var sw = sd.offsetWidth; |
---|
1018 | this.panel.setPosition(box.x+sw, box.y); |
---|
1019 | s.left = (box.x)+'px'; |
---|
1020 | s.top = (box.y)+'px'; |
---|
1021 | s.height = Math.max(0, box.height)+'px'; |
---|
1022 | this.panel.setSize(box.width-sw, box.height); |
---|
1023 | }, |
---|
1024 | north : function(box){ |
---|
1025 | if(this.isCollapsed){ |
---|
1026 | return this.applyLayoutCollapsed(box); |
---|
1027 | } |
---|
1028 | var sd = this.splitEl.dom, s = sd.style; |
---|
1029 | var sh = sd.offsetHeight; |
---|
1030 | this.panel.setPosition(box.x, box.y); |
---|
1031 | s.left = (box.x)+'px'; |
---|
1032 | s.top = (box.y+box.height-sh)+'px'; |
---|
1033 | s.width = Math.max(0, box.width)+'px'; |
---|
1034 | this.panel.setSize(box.width, box.height-sh); |
---|
1035 | }, |
---|
1036 | south : function(box){ |
---|
1037 | if(this.isCollapsed){ |
---|
1038 | return this.applyLayoutCollapsed(box); |
---|
1039 | } |
---|
1040 | var sd = this.splitEl.dom, s = sd.style; |
---|
1041 | var sh = sd.offsetHeight; |
---|
1042 | this.panel.setPosition(box.x, box.y+sh); |
---|
1043 | s.left = (box.x)+'px'; |
---|
1044 | s.top = (box.y)+'px'; |
---|
1045 | s.width = Math.max(0, box.width)+'px'; |
---|
1046 | this.panel.setSize(box.width, box.height-sh); |
---|
1047 | } |
---|
1048 | }, |
---|
1049 | |
---|
1050 | // private |
---|
1051 | render : function(ct, p){ |
---|
1052 | Ext.layout.BorderLayout.SplitRegion.superclass.render.call(this, ct, p); |
---|
1053 | |
---|
1054 | var ps = this.position; |
---|
1055 | |
---|
1056 | this.splitEl = ct.createChild({ |
---|
1057 | cls: "x-layout-split x-layout-split-"+ps, html: " ", |
---|
1058 | id: this.panel.id + '-xsplit' |
---|
1059 | }); |
---|
1060 | |
---|
1061 | if(this.collapseMode == 'mini'){ |
---|
1062 | this.miniSplitEl = this.splitEl.createChild({ |
---|
1063 | cls: "x-layout-mini x-layout-mini-"+ps, html: " " |
---|
1064 | }); |
---|
1065 | this.miniSplitEl.addClassOnOver('x-layout-mini-over'); |
---|
1066 | this.miniSplitEl.on('click', this.onCollapseClick, this, {stopEvent:true}); |
---|
1067 | } |
---|
1068 | |
---|
1069 | var s = this.splitSettings[ps]; |
---|
1070 | |
---|
1071 | this.split = new Ext.SplitBar(this.splitEl.dom, p.el, s.orientation); |
---|
1072 | this.split.tickSize = this.tickSize; |
---|
1073 | this.split.placement = s.placement; |
---|
1074 | this.split.getMaximumSize = this[s.maxFn].createDelegate(this); |
---|
1075 | this.split.minSize = this.minSize || this[s.minProp]; |
---|
1076 | this.split.on("beforeapply", this.onSplitMove, this); |
---|
1077 | this.split.useShim = this.useShim === true; |
---|
1078 | this.maxSize = this.maxSize || this[s.maxProp]; |
---|
1079 | |
---|
1080 | if(p.hidden){ |
---|
1081 | this.splitEl.hide(); |
---|
1082 | } |
---|
1083 | |
---|
1084 | if(this.useSplitTips){ |
---|
1085 | this.splitEl.dom.title = this.collapsible ? this.collapsibleSplitTip : this.splitTip; |
---|
1086 | } |
---|
1087 | if(this.collapsible){ |
---|
1088 | this.splitEl.on("dblclick", this.onCollapseClick, this); |
---|
1089 | } |
---|
1090 | }, |
---|
1091 | |
---|
1092 | //docs inherit from superclass |
---|
1093 | getSize : function(){ |
---|
1094 | if(this.isCollapsed){ |
---|
1095 | return this.collapsedEl.getSize(); |
---|
1096 | } |
---|
1097 | var s = this.panel.getSize(); |
---|
1098 | if(this.position == 'north' || this.position == 'south'){ |
---|
1099 | s.height += this.splitEl.dom.offsetHeight; |
---|
1100 | }else{ |
---|
1101 | s.width += this.splitEl.dom.offsetWidth; |
---|
1102 | } |
---|
1103 | return s; |
---|
1104 | }, |
---|
1105 | |
---|
1106 | // private |
---|
1107 | getHMaxSize : function(){ |
---|
1108 | var cmax = this.maxSize || 10000; |
---|
1109 | var center = this.layout.center; |
---|
1110 | return Math.min(cmax, (this.el.getWidth()+center.el.getWidth())-center.getMinWidth()); |
---|
1111 | }, |
---|
1112 | |
---|
1113 | // private |
---|
1114 | getVMaxSize : function(){ |
---|
1115 | var cmax = this.maxSize || 10000; |
---|
1116 | var center = this.layout.center; |
---|
1117 | return Math.min(cmax, (this.el.getHeight()+center.el.getHeight())-center.getMinHeight()); |
---|
1118 | }, |
---|
1119 | |
---|
1120 | // private |
---|
1121 | onSplitMove : function(split, newSize){ |
---|
1122 | var s = this.panel.getSize(); |
---|
1123 | this.lastSplitSize = newSize; |
---|
1124 | if(this.position == 'north' || this.position == 'south'){ |
---|
1125 | this.panel.setSize(s.width, newSize); |
---|
1126 | this.state.height = newSize; |
---|
1127 | }else{ |
---|
1128 | this.panel.setSize(newSize, s.height); |
---|
1129 | this.state.width = newSize; |
---|
1130 | } |
---|
1131 | this.layout.layout(); |
---|
1132 | this.panel.saveState(); |
---|
1133 | return false; |
---|
1134 | }, |
---|
1135 | |
---|
1136 | /** |
---|
1137 | * Returns a reference to the split bar in use by this region. |
---|
1138 | * @return {Ext.SplitBar} The split bar |
---|
1139 | */ |
---|
1140 | getSplitBar : function(){ |
---|
1141 | return this.split; |
---|
1142 | }, |
---|
1143 | |
---|
1144 | // inherit docs |
---|
1145 | destroy : function() { |
---|
1146 | Ext.destroy(this.miniSplitEl, this.split, this.splitEl); |
---|
1147 | Ext.layout.BorderLayout.SplitRegion.superclass.destroy.call(this); |
---|
1148 | } |
---|
1149 | }); |
---|
1150 | |
---|
1151 | Ext.Container.LAYOUTS['border'] = Ext.layout.BorderLayout; |
---|