source: trunk/web/addons/job_monarch/lib/extjs-30/src/core/Element.style-more.js @ 625

Last change on this file since 625 was 625, checked in by ramonb, 15 years ago

lib/extjs-30:

  • new ExtJS 3.0
File size: 12.3 KB
Line 
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
12Ext.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
14Ext.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>
85Ext.Element.boxMarkup =
86    &#39;&lt;div class="{0}-tl">&lt;div class="{0}-tr">&lt;div class="{0}-tc">&lt;/div>&lt;/div>&lt;/div>
87     &lt;div class="{0}-ml">&lt;div class="{0}-mr">&lt;div class="{0}-mc">&lt;/div>&lt;/div>&lt;/div>
88     &lt;div class="{0}-bl">&lt;div class="{0}-br">&lt;div class="{0}-bc">&lt;/div>&lt;/div>&lt;/div>&#39;;
89                * </code></pre>
90                * <p>Example usage:</p>
91                * <pre><code>
92// Basic box wrap
93Ext.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.
98Ext.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}());
Note: See TracBrowser for help on using the repository browser.