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.Element |
---|
9 | */ |
---|
10 | |
---|
11 | // special markup used throughout Ext when box wrapping elements |
---|
12 | Ext.Element.boxMarkup = '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div><div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div><div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>'; |
---|
13 | |
---|
14 | Ext.Element.addMethods(function(){ |
---|
15 | var INTERNAL = "_internal"; |
---|
16 | return { |
---|
17 | /** |
---|
18 | * More flexible version of {@link #setStyle} for setting style properties. |
---|
19 | * @param {String/Object/Function} styles A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or |
---|
20 | * a function which returns such a specification. |
---|
21 | * @return {Ext.Element} this |
---|
22 | */ |
---|
23 | applyStyles : function(style){ |
---|
24 | Ext.DomHelper.applyStyles(this.dom, style); |
---|
25 | return this; |
---|
26 | }, |
---|
27 | |
---|
28 | /** |
---|
29 | * Returns an object with properties matching the styles requested. |
---|
30 | * For example, el.getStyles('color', 'font-size', 'width') might return |
---|
31 | * {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}. |
---|
32 | * @param {String} style1 A style name |
---|
33 | * @param {String} style2 A style name |
---|
34 | * @param {String} etc. |
---|
35 | * @return {Object} The style object |
---|
36 | */ |
---|
37 | getStyles : function(){ |
---|
38 | var ret = {}; |
---|
39 | Ext.each(arguments, function(v) { |
---|
40 | ret[v] = this.getStyle(v); |
---|
41 | }, |
---|
42 | this); |
---|
43 | return ret; |
---|
44 | }, |
---|
45 | |
---|
46 | getStyleSize : function(){ |
---|
47 | var me = this, |
---|
48 | w, |
---|
49 | h, |
---|
50 | d = this.dom, |
---|
51 | s = d.style; |
---|
52 | if(s.width && s.width != 'auto'){ |
---|
53 | w = parseInt(s.width, 10); |
---|
54 | if(me.isBorderBox()){ |
---|
55 | w -= me.getFrameWidth('lr'); |
---|
56 | } |
---|
57 | } |
---|
58 | if(s.height && s.height != 'auto'){ |
---|
59 | h = parseInt(s.height, 10); |
---|
60 | if(me.isBorderBox()){ |
---|
61 | h -= me.getFrameWidth('tb'); |
---|
62 | } |
---|
63 | } |
---|
64 | return {width: w || me.getWidth(true), height: h || me.getHeight(true)}; |
---|
65 | }, |
---|
66 | |
---|
67 | // private ==> used by ext full |
---|
68 | setOverflow : function(v){ |
---|
69 | var dom = this.dom; |
---|
70 | if(v=='auto' && Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug |
---|
71 | dom.style.overflow = 'hidden'; |
---|
72 | (function(){dom.style.overflow = 'auto';}).defer(1); |
---|
73 | }else{ |
---|
74 | dom.style.overflow = v; |
---|
75 | } |
---|
76 | }, |
---|
77 | |
---|
78 | /** |
---|
79 | * <p>Wraps the specified element with a special 9 element markup/CSS block that renders by default as |
---|
80 | * a gray container with a gradient background, rounded corners and a 4-way shadow.</p> |
---|
81 | * <p>This special markup is used throughout Ext when box wrapping elements ({@link Ext.Button}, |
---|
82 | * {@link Ext.Panel} when <tt>{@link Ext.Panel#frame frame=true}</tt>, {@link Ext.Window}). The markup |
---|
83 | * is of this form:</p> |
---|
84 | * <pre><code> |
---|
85 | Ext.Element.boxMarkup = |
---|
86 | '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div> |
---|
87 | <div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div> |
---|
88 | <div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>'; |
---|
89 | * </code></pre> |
---|
90 | * <p>Example usage:</p> |
---|
91 | * <pre><code> |
---|
92 | // Basic box wrap |
---|
93 | Ext.get("foo").boxWrap(); |
---|
94 | |
---|
95 | // You can also add a custom class and use CSS inheritance rules to customize the box look. |
---|
96 | // 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example |
---|
97 | // for how to create a custom box wrap style. |
---|
98 | Ext.get("foo").boxWrap().addClass("x-box-blue"); |
---|
99 | * </code></pre> |
---|
100 | * @param {String} class (optional) A base CSS class to apply to the containing wrapper element |
---|
101 | * (defaults to <tt>'x-box'</tt>). Note that there are a number of CSS rules that are dependent on |
---|
102 | * this name to make the overall effect work, so if you supply an alternate base class, make sure you |
---|
103 | * also supply all of the necessary rules. |
---|
104 | * @return {Ext.Element} this |
---|
105 | */ |
---|
106 | boxWrap : function(cls){ |
---|
107 | cls = cls || 'x-box'; |
---|
108 | var el = Ext.get(this.insertHtml("beforeBegin", "<div class='" + cls + "'>" + String.format(Ext.Element.boxMarkup, cls) + "</div>")); //String.format('<div class="{0}">'+Ext.Element.boxMarkup+'</div>', cls))); |
---|
109 | Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom); |
---|
110 | return el; |
---|
111 | }, |
---|
112 | |
---|
113 | /** |
---|
114 | * Set the size of this Element. If animation is true, both width and height will be animated concurrently. |
---|
115 | * @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul> |
---|
116 | * <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).</li> |
---|
117 | * <li>A String used to set the CSS width style. Animation may <b>not</b> be used. |
---|
118 | * <li>A size object in the format <code>{width: widthValue, height: heightValue}</code>.</li> |
---|
119 | * </ul></div> |
---|
120 | * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul> |
---|
121 | * <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels).</li> |
---|
122 | * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li> |
---|
123 | * </ul></div> |
---|
124 | * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object |
---|
125 | * @return {Ext.Element} this |
---|
126 | */ |
---|
127 | setSize : function(width, height, animate){ |
---|
128 | var me = this; |
---|
129 | if(Ext.isObject(width)){ // in case of object from getSize() |
---|
130 | height = width.height; |
---|
131 | width = width.width; |
---|
132 | } |
---|
133 | width = me.adjustWidth(width); |
---|
134 | height = me.adjustHeight(height); |
---|
135 | if(!animate || !me.anim){ |
---|
136 | me.dom.style.width = me.addUnits(width); |
---|
137 | me.dom.style.height = me.addUnits(height); |
---|
138 | }else{ |
---|
139 | me.anim({width: {to: width}, height: {to: height}}, me.preanim(arguments, 2)); |
---|
140 | } |
---|
141 | return me; |
---|
142 | }, |
---|
143 | |
---|
144 | /** |
---|
145 | * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders |
---|
146 | * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements |
---|
147 | * if a height has not been set using CSS. |
---|
148 | * @return {Number} |
---|
149 | */ |
---|
150 | getComputedHeight : function(){ |
---|
151 | var me = this, |
---|
152 | h = Math.max(me.dom.offsetHeight, me.dom.clientHeight); |
---|
153 | if(!h){ |
---|
154 | h = parseInt(me.getStyle('height'), 10) || 0; |
---|
155 | if(!me.isBorderBox()){ |
---|
156 | h += me.getFrameWidth('tb'); |
---|
157 | } |
---|
158 | } |
---|
159 | return h; |
---|
160 | }, |
---|
161 | |
---|
162 | /** |
---|
163 | * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders |
---|
164 | * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements |
---|
165 | * if a width has not been set using CSS. |
---|
166 | * @return {Number} |
---|
167 | */ |
---|
168 | getComputedWidth : function(){ |
---|
169 | var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth); |
---|
170 | if(!w){ |
---|
171 | w = parseInt(this.getStyle('width'), 10) || 0; |
---|
172 | if(!this.isBorderBox()){ |
---|
173 | w += this.getFrameWidth('lr'); |
---|
174 | } |
---|
175 | } |
---|
176 | return w; |
---|
177 | }, |
---|
178 | |
---|
179 | /** |
---|
180 | * Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth() |
---|
181 | for more information about the sides. |
---|
182 | * @param {String} sides |
---|
183 | * @return {Number} |
---|
184 | */ |
---|
185 | getFrameWidth : function(sides, onlyContentBox){ |
---|
186 | return onlyContentBox && this.isBorderBox() ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides)); |
---|
187 | }, |
---|
188 | |
---|
189 | /** |
---|
190 | * Sets up event handlers to add and remove a css class when the mouse is over this element |
---|
191 | * @param {String} className |
---|
192 | * @return {Ext.Element} this |
---|
193 | */ |
---|
194 | addClassOnOver : function(className){ |
---|
195 | this.hover( |
---|
196 | function(){ |
---|
197 | Ext.fly(this, INTERNAL).addClass(className); |
---|
198 | }, |
---|
199 | function(){ |
---|
200 | Ext.fly(this, INTERNAL).removeClass(className); |
---|
201 | } |
---|
202 | ); |
---|
203 | return this; |
---|
204 | }, |
---|
205 | |
---|
206 | /** |
---|
207 | * Sets up event handlers to add and remove a css class when this element has the focus |
---|
208 | * @param {String} className |
---|
209 | * @return {Ext.Element} this |
---|
210 | */ |
---|
211 | addClassOnFocus : function(className){ |
---|
212 | this.on("focus", function(){ |
---|
213 | Ext.fly(this, INTERNAL).addClass(className); |
---|
214 | }, this.dom); |
---|
215 | this.on("blur", function(){ |
---|
216 | Ext.fly(this, INTERNAL).removeClass(className); |
---|
217 | }, this.dom); |
---|
218 | return this; |
---|
219 | }, |
---|
220 | |
---|
221 | /** |
---|
222 | * Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect) |
---|
223 | * @param {String} className |
---|
224 | * @return {Ext.Element} this |
---|
225 | */ |
---|
226 | addClassOnClick : function(className){ |
---|
227 | var dom = this.dom; |
---|
228 | this.on("mousedown", function(){ |
---|
229 | Ext.fly(dom, INTERNAL).addClass(className); |
---|
230 | var d = Ext.getDoc(), |
---|
231 | fn = function(){ |
---|
232 | Ext.fly(dom, INTERNAL).removeClass(className); |
---|
233 | d.removeListener("mouseup", fn); |
---|
234 | }; |
---|
235 | d.on("mouseup", fn); |
---|
236 | }); |
---|
237 | return this; |
---|
238 | }, |
---|
239 | |
---|
240 | /** |
---|
241 | * Returns the width and height of the viewport. |
---|
242 | * <pre><code> |
---|
243 | var vpSize = Ext.getBody().getViewSize(); |
---|
244 | |
---|
245 | // all Windows created afterwards will have a default value of 90% height and 95% width |
---|
246 | Ext.Window.override({ |
---|
247 | width: vpSize.width * 0.9, |
---|
248 | height: vpSize.height * 0.95 |
---|
249 | }); |
---|
250 | // To handle window resizing you would have to hook onto onWindowResize. |
---|
251 | </code></pre> |
---|
252 | * @return {Object} An object containing the viewport's size {width: (viewport width), height: (viewport height)} |
---|
253 | */ |
---|
254 | getViewSize : function(){ |
---|
255 | var doc = document, |
---|
256 | d = this.dom, |
---|
257 | extdom = Ext.lib.Dom, |
---|
258 | isDoc = (d == doc || d == doc.body); |
---|
259 | return { width : (isDoc ? extdom.getViewWidth() : d.clientWidth), |
---|
260 | height : (isDoc ? extdom.getViewHeight() : d.clientHeight) }; |
---|
261 | }, |
---|
262 | |
---|
263 | /** |
---|
264 | * Returns the size of the element. |
---|
265 | * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding |
---|
266 | * @return {Object} An object containing the element's size {width: (element width), height: (element height)} |
---|
267 | */ |
---|
268 | getSize : function(contentSize){ |
---|
269 | return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)}; |
---|
270 | }, |
---|
271 | |
---|
272 | /** |
---|
273 | * Forces the browser to repaint this element |
---|
274 | * @return {Ext.Element} this |
---|
275 | */ |
---|
276 | repaint : function(){ |
---|
277 | var dom = this.dom; |
---|
278 | this.addClass("x-repaint"); |
---|
279 | setTimeout(function(){ |
---|
280 | Ext.fly(dom).removeClass("x-repaint"); |
---|
281 | }, 1); |
---|
282 | return this; |
---|
283 | }, |
---|
284 | |
---|
285 | /** |
---|
286 | * Disables text selection for this element (normalized across browsers) |
---|
287 | * @return {Ext.Element} this |
---|
288 | */ |
---|
289 | unselectable : function(){ |
---|
290 | this.dom.unselectable = "on"; |
---|
291 | return this.swallowEvent("selectstart", true). |
---|
292 | applyStyles("-moz-user-select:none;-khtml-user-select:none;"). |
---|
293 | addClass("x-unselectable"); |
---|
294 | }, |
---|
295 | |
---|
296 | /** |
---|
297 | * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed, |
---|
298 | * then it returns the calculated width of the sides (see getPadding) |
---|
299 | * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides |
---|
300 | * @return {Object/Number} |
---|
301 | */ |
---|
302 | getMargins : function(side){ |
---|
303 | var me = this, |
---|
304 | key, |
---|
305 | hash = {t:"top", l:"left", r:"right", b: "bottom"}, |
---|
306 | o = {}; |
---|
307 | |
---|
308 | if (!side) { |
---|
309 | for (key in me.margins){ |
---|
310 | o[hash[key]] = parseInt(me.getStyle(me.margins[key]), 10) || 0; |
---|
311 | } |
---|
312 | return o; |
---|
313 | } else { |
---|
314 | return me.addStyles.call(me, side, me.margins); |
---|
315 | } |
---|
316 | } |
---|
317 | }; |
---|
318 | }()); |
---|