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.ContainerLayout |
---|
11 | * <p>Every {@link Ext.Container Container} delegates the rendering of its child {@link Ext.Component Component}s |
---|
12 | * to a layout manager class which must be {@link Ext.Container#layout configured} into the Container.</p> Some |
---|
13 | * layouts also provide sizing and positioning of child Components/ |
---|
14 | * |
---|
15 | * <p>The ContainerLayout class is the default layout manager used when no layout is configured into a Container. |
---|
16 | * It provides the basic foundation for all other layout classes in Ext. It simply renders all child Components |
---|
17 | * into the Container, performing no sizing os positioning services. This class is intended to be extended and should |
---|
18 | * generally not need to be created directly via the new keyword. |
---|
19 | */ |
---|
20 | Ext.layout.ContainerLayout = function(config){ |
---|
21 | Ext.apply(this, config); |
---|
22 | }; |
---|
23 | |
---|
24 | Ext.layout.ContainerLayout.prototype = { |
---|
25 | /** |
---|
26 | * @cfg {String} extraCls |
---|
27 | * An optional extra CSS class that will be added to the container (defaults to ''). This can be useful for |
---|
28 | * adding customized styles to the container or any of its children using standard CSS rules. |
---|
29 | */ |
---|
30 | /** |
---|
31 | * @cfg {Boolean} renderHidden |
---|
32 | * True to hide each contained item on render (defaults to false). |
---|
33 | */ |
---|
34 | |
---|
35 | /** |
---|
36 | * A reference to the {@link Ext.Component} that is active. For example, |
---|
37 | * if(myPanel.layout.activeItem.id == 'item-1') { ... }. activeItem only applies to layout styles that can |
---|
38 | * display items one at a time (like {@link Ext.layout.Accordion}, {@link Ext.layout.CardLayout} |
---|
39 | * and {@link Ext.layout.FitLayout}). Read-only. Related to {@link Ext.Container#activeItem}. |
---|
40 | * @type {Ext.Component} |
---|
41 | * @property activeItem |
---|
42 | */ |
---|
43 | |
---|
44 | // private |
---|
45 | monitorResize:false, |
---|
46 | // private |
---|
47 | activeItem : null, |
---|
48 | |
---|
49 | // private |
---|
50 | layout : function(){ |
---|
51 | var target = this.container.getLayoutTarget(); |
---|
52 | this.onLayout(this.container, target); |
---|
53 | this.container.fireEvent('afterlayout', this.container, this); |
---|
54 | }, |
---|
55 | |
---|
56 | // private |
---|
57 | onLayout : function(ct, target){ |
---|
58 | this.renderAll(ct, target); |
---|
59 | }, |
---|
60 | |
---|
61 | // private |
---|
62 | isValidParent : function(c, target){ |
---|
63 | var el = c.getPositionEl ? c.getPositionEl() : c.getEl(); |
---|
64 | return el.dom.parentNode == target.dom; |
---|
65 | }, |
---|
66 | |
---|
67 | // private |
---|
68 | renderAll : function(ct, target){ |
---|
69 | var items = ct.items.items; |
---|
70 | for(var i = 0, len = items.length; i < len; i++) { |
---|
71 | var c = items[i]; |
---|
72 | if(c && (!c.rendered || !this.isValidParent(c, target))){ |
---|
73 | this.renderItem(c, i, target); |
---|
74 | } |
---|
75 | } |
---|
76 | }, |
---|
77 | |
---|
78 | // private |
---|
79 | renderItem : function(c, position, target){ |
---|
80 | if(c && !c.rendered){ |
---|
81 | c.render(target, position); |
---|
82 | if(this.extraCls){ |
---|
83 | var t = c.getPositionEl ? c.getPositionEl() : c; |
---|
84 | t.addClass(this.extraCls); |
---|
85 | } |
---|
86 | if (this.renderHidden && c != this.activeItem) { |
---|
87 | c.hide(); |
---|
88 | } |
---|
89 | }else if(c && !this.isValidParent(c, target)){ |
---|
90 | if(this.extraCls){ |
---|
91 | var t = c.getPositionEl ? c.getPositionEl() : c; |
---|
92 | t.addClass(this.extraCls); |
---|
93 | } |
---|
94 | if(typeof position == 'number'){ |
---|
95 | position = target.dom.childNodes[position]; |
---|
96 | } |
---|
97 | target.dom.insertBefore(c.getEl().dom, position || null); |
---|
98 | if (this.renderHidden && c != this.activeItem) { |
---|
99 | c.hide(); |
---|
100 | } |
---|
101 | } |
---|
102 | }, |
---|
103 | |
---|
104 | // private |
---|
105 | onResize: function(){ |
---|
106 | if(this.container.collapsed){ |
---|
107 | return; |
---|
108 | } |
---|
109 | var b = this.container.bufferResize; |
---|
110 | if(b){ |
---|
111 | if(!this.resizeTask){ |
---|
112 | this.resizeTask = new Ext.util.DelayedTask(this.layout, this); |
---|
113 | this.resizeBuffer = typeof b == 'number' ? b : 100; |
---|
114 | } |
---|
115 | this.resizeTask.delay(this.resizeBuffer); |
---|
116 | }else{ |
---|
117 | this.layout(); |
---|
118 | } |
---|
119 | }, |
---|
120 | |
---|
121 | // private |
---|
122 | setContainer : function(ct){ |
---|
123 | if(this.monitorResize && ct != this.container){ |
---|
124 | if(this.container){ |
---|
125 | this.container.un('resize', this.onResize, this); |
---|
126 | } |
---|
127 | if(ct){ |
---|
128 | ct.on('resize', this.onResize, this); |
---|
129 | } |
---|
130 | } |
---|
131 | this.container = ct; |
---|
132 | }, |
---|
133 | |
---|
134 | // private |
---|
135 | parseMargins : function(v){ |
---|
136 | var ms = v.split(' '); |
---|
137 | var len = ms.length; |
---|
138 | if(len == 1){ |
---|
139 | ms[1] = ms[0]; |
---|
140 | ms[2] = ms[0]; |
---|
141 | ms[3] = ms[0]; |
---|
142 | } |
---|
143 | if(len == 2){ |
---|
144 | ms[2] = ms[0]; |
---|
145 | ms[3] = ms[1]; |
---|
146 | } |
---|
147 | return { |
---|
148 | top:parseInt(ms[0], 10) || 0, |
---|
149 | right:parseInt(ms[1], 10) || 0, |
---|
150 | bottom:parseInt(ms[2], 10) || 0, |
---|
151 | left:parseInt(ms[3], 10) || 0 |
---|
152 | }; |
---|
153 | }, |
---|
154 | |
---|
155 | /* |
---|
156 | * Destroys this layout. This is a template method that is empty by default, but should be implemented |
---|
157 | * by subclasses that require explicit destruction to purge event handlers or remove DOM nodes. |
---|
158 | * @protected |
---|
159 | */ |
---|
160 | destroy : Ext.emptyFn |
---|
161 | }; |
---|
162 | Ext.Container.LAYOUTS['auto'] = Ext.layout.ContainerLayout; |
---|