开通博客赚积分
发布资源赚积分
分类

源码开发语言/平台
当前位置：首页 > 源码/资料 > 中间件编程 > 查看源码
ext-all-debug.js
资源名称：ext-3.0.0.zip　[点击查看]
上传用户：shuoshiled
上传日期：2018-01-28
资源大小：10124k
文件大小：2341k
源码类别：

中间件编程

开发平台：

JavaScript

ext-all-debug.js：源码内容
  1.         return this;
  2.     },
  4.     /**
  5.      * Inserts this element before the passed element in the DOM
  6.      * @param {Mixed} el The element before which this element will be inserted
  7.      * @return {Ext.Element} this
  8.      */
  9.     insertBefore: function(el){             
  10.         (el = GETDOM(el)).parentNode.insertBefore(this.dom, el);
  11.         return this;
  12.     },
  14.     /**
  15.      * Inserts this element after the passed element in the DOM
  16.      * @param {Mixed} el The element to insert after
  17.      * @return {Ext.Element} this
  18.      */
  19.     insertAfter: function(el){
  20.         (el = GETDOM(el)).parentNode.insertBefore(this.dom, el.nextSibling);
  21.         return this;
  22.     },
  24.     /**
  25.      * Inserts (or creates) an element (or DomHelper config) as the first child of this element
  26.      * @param {Mixed/Object} el The id or element to insert or a DomHelper config to create and insert
  27.      * @return {Ext.Element} The new child
  28.      */
  29.     insertFirst: function(el, returnDom){
  30.             el = el || {};
  31.             if(isEl(el)){ // element
  32.                 el = GETDOM(el);
  33.                 this.dom.insertBefore(el, this.dom.firstChild);
  34.                 return !returnDom ? GET(el) : el;
  35.             }else{ // dh config
  36.                 return this.createChild(el, this.dom.firstChild, returnDom);
  37.             }
  38.     },
  40.     /**
  41.      * Replaces the passed element with this element
  42.      * @param {Mixed} el The element to replace
  43.      * @return {Ext.Element} this
  44.      */
  45.     replace: function(el){
  46.         el = GET(el);
  47.         this.insertBefore(el);
  48.         el.remove();
  49.         return this;
  50.     },
  52.     /**
  53.      * Replaces this element with the passed element
  54.      * @param {Mixed/Object} el The new element or a DomHelper config of an element to create
  55.      * @return {Ext.Element} this
  56.      */
  57.     replaceWith: function(el){
  58.     var me = this,
  59.      Element = Ext.Element;
  60.             if(isEl(el)){
  61.                 el = GETDOM(el);
  62.                 me.dom.parentNode.insertBefore(el, me.dom);
  63.             }else{
  64.                 el = DH.insertBefore(me.dom, el);
  65.             }
  66.         
  67.         delete Element.cache[me.id];
  68.         Ext.removeNode(me.dom);      
  69.         me.id = Ext.id(me.dom = el);
  70.         return Element.cache[me.id] = me;        
  71.     },
  72.     
  73. /**
  74.  * Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.
  75.  * @param {Object} config DomHelper element config object.  If no tag is specified (e.g., {tag:'input'}) then a div will be
  76.  * automatically generated with the specified attributes.
  77.  * @param {HTMLElement} insertBefore (optional) a child element of this element
  78.  * @param {Boolean} returnDom (optional) true to return the dom node instead of creating an Element
  79.  * @return {Ext.Element} The new child element
  80.  */
  81. createChild: function(config, insertBefore, returnDom){
  82.     config = config || {tag:'div'};
  83.     return insertBefore ? 
  84.         DH.insertBefore(insertBefore, config, returnDom !== true) :
  85.         DH[!this.dom.firstChild ? 'overwrite' : 'append'](this.dom, config,  returnDom !== true);
  86. },
  88. /**
  89.  * Creates and wraps this element with another element
  90.  * @param {Object} config (optional) DomHelper element config object for the wrapper element or null for an empty div
  91.  * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Ext.Element
  92.  * @return {HTMLElement/Element} The newly created wrapper element
  93.  */
  94. wrap: function(config, returnDom){        
  95.     var newEl = DH.insertBefore(this.dom, config || {tag: "div"}, !returnDom);
  96.     newEl.dom ? newEl.dom.appendChild(this.dom) : newEl.appendChild(this.dom);
  97.     return newEl;
  98. },
  100. /**
  101.  * Inserts an html fragment into this element
  102.  * @param {String} where Where to insert the html in relation to this element - beforeBegin, afterBegin, beforeEnd, afterEnd.
  103.  * @param {String} html The HTML fragment
  104.  * @param {Boolean} returnEl (optional) True to return an Ext.Element (defaults to false)
  105.  * @return {HTMLElement/Ext.Element} The inserted node (or nearest related if more than 1 inserted)
  106.  */
  107. insertHtml : function(where, html, returnEl){
  108.     var el = DH.insertHtml(where, this.dom, html);
  109.     return returnEl ? Ext.get(el) : el;
  110. }
  111. }
  112. }());/**
  113.  * @class Ext.Element
  114.  */
  115. Ext.apply(Ext.Element.prototype, function() {
  116. var GETDOM = Ext.getDom,
  117. GET = Ext.get,
  118. DH = Ext.DomHelper;
  120. return {
  121. /**
  122.      * Inserts (or creates) the passed element (or DomHelper config) as a sibling of this element
  123.      * @param {Mixed/Object/Array} el The id, element to insert or a DomHelper config to create and insert *or* an array of any of those.
  124.      * @param {String} where (optional) 'before' or 'after' defaults to before
  125.      * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Ext.Element
  126.      * @return {Ext.Element} the inserted Element
  127.      */
  128.     insertSibling: function(el, where, returnDom){
  129.         var me = this,
  130.          rt;
  131.         
  132.         if(Ext.isArray(el)){            
  133.             Ext.each(el, function(e) {
  134.             rt = me.insertSibling(e, where, returnDom);
  135.             });
  136.             return rt;
  137.         }
  138.                 
  139.         where = (where || 'before').toLowerCase();
  140.         el = el || {};
  141.        
  142.             if(el.nodeType || el.dom){
  143.                 rt = me.dom.parentNode.insertBefore(GETDOM(el), where == 'before' ? me.dom : me.dom.nextSibling);
  144.                 if (!returnDom) {
  145.                     rt = GET(rt);
  146.                 }
  147.             }else{
  148.                 if (where == 'after' && !me.dom.nextSibling) {
  149.                     rt = DH.append(me.dom.parentNode, el, !returnDom);
  150.                 } else {                    
  151.                     rt = DH[where == 'after' ? 'insertAfter' : 'insertBefore'](me.dom, el, !returnDom);
  152.                 }
  153.             }
  154.         return rt;
  155.     }
  156.     };
  157. }());/**
  158.  * @class Ext.Element
  159.  */
  160. Ext.Element.addMethods(function(){  
  161.     // local style camelizing for speed
  162.     var propCache = {},
  163.         camelRe = /(-[a-z])/gi,
  164.         classReCache = {},
  165.         view = document.defaultView,
  166.         propFloat = Ext.isIE ? 'styleFloat' : 'cssFloat',
  167.         opacityRe = /alpha(opacity=(.*))/i,
  168.         trimRe = /^s+|s+$/g,
  169.         EL = Ext.Element,   
  170.         PADDING = "padding",
  171.         MARGIN = "margin",
  172.         BORDER = "border",
  173.         LEFT = "-left",
  174.         RIGHT = "-right",
  175.         TOP = "-top",
  176.         BOTTOM = "-bottom",
  177.         WIDTH = "-width",    
  178.         MATH = Math,
  179.         HIDDEN = 'hidden',
  180.         ISCLIPPED = 'isClipped',
  181.         OVERFLOW = 'overflow',
  182.         OVERFLOWX = 'overflow-x',
  183.         OVERFLOWY = 'overflow-y',
  184.         ORIGINALCLIP = 'originalClip',
  185.         // special markup used throughout Ext when box wrapping elements    
  186.         borders = {l: BORDER + LEFT + WIDTH, r: BORDER + RIGHT + WIDTH, t: BORDER + TOP + WIDTH, b: BORDER + BOTTOM + WIDTH},
  187.         paddings = {l: PADDING + LEFT, r: PADDING + RIGHT, t: PADDING + TOP, b: PADDING + BOTTOM},
  188.         margins = {l: MARGIN + LEFT, r: MARGIN + RIGHT, t: MARGIN + TOP, b: MARGIN + BOTTOM},
  189.         data = Ext.Element.data;
  190.         
  191.     
  192.     // private  
  193.     function camelFn(m, a) {
  194.         return a.charAt(1).toUpperCase();
  195.     }
  196.     
  197.     // private (needs to be called => addStyles.call(this, sides, styles))
  198.     function addStyles(sides, styles){
  199.         var val = 0;    
  200.         
  201.         Ext.each(sides.match(/w/g), function(s) {
  202.             if (s = parseInt(this.getStyle(styles[s]), 10)) {
  203.                 val += MATH.abs(s);      
  204.             }
  205.         },
  206.         this);
  207.         return val;
  208.     }
  210.     function chkCache(prop) {
  211.         return propCache[prop] || (propCache[prop] = prop == 'float' ? propFloat : prop.replace(camelRe, camelFn));
  213.     }
  214.             
  215.     return {    
  216.         // private  ==> used by Fx  
  217.         adjustWidth : function(width) {
  218.             var me = this;
  219.             var isNum = (typeof width == "number");
  220.             if(isNum && me.autoBoxAdjust && !me.isBorderBox()){
  221.                width -= (me.getBorderWidth("lr") + me.getPadding("lr"));
  222.             }
  223.             return (isNum && width < 0) ? 0 : width;
  224.         },
  225.         
  226.         // private   ==> used by Fx 
  227.         adjustHeight : function(height) {
  228.             var me = this;
  229.             var isNum = (typeof height == "number");
  230.             if(isNum && me.autoBoxAdjust && !me.isBorderBox()){
  231.                height -= (me.getBorderWidth("tb") + me.getPadding("tb"));               
  232.             }
  233.             return (isNum && height < 0) ? 0 : height;
  234.         },
  235.     
  236.     
  237.         /**
  238.          * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
  239.          * @param {String/Array} className The CSS class to add, or an array of classes
  240.          * @return {Ext.Element} this
  241.          */
  242.         addClass : function(className){
  243.             var me = this;
  244.             Ext.each(className, function(v) {
  245.                 me.dom.className += (!me.hasClass(v) && v ? " " + v : "");  
  246.             });
  247.             return me;
  248.         },
  249.     
  250.         /**
  251.          * Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
  252.          * @param {String/Array} className The CSS class to add, or an array of classes
  253.          * @return {Ext.Element} this
  254.          */
  255.         radioClass : function(className){
  256.             Ext.each(this.dom.parentNode.childNodes, function(v) {
  257.                 if(v.nodeType == 1) {
  258.                     Ext.fly(v, '_internal').removeClass(className);          
  259.                 }
  260.             });
  261.             return this.addClass(className);
  262.         },
  263.     
  264.         /**
  265.          * Removes one or more CSS classes from the element.
  266.          * @param {String/Array} className The CSS class to remove, or an array of classes
  267.          * @return {Ext.Element} this
  268.          */
  269.         removeClass : function(className){
  270.             var me = this;
  271.             if (me.dom.className) {
  272.                 Ext.each(className, function(v) {               
  273.                     me.dom.className = me.dom.className.replace(
  274.                         classReCache[v] = classReCache[v] || new RegExp('(?:^|\s+)' + v + '(?:\s+|$)', "g"), 
  275.                         " ");               
  276.                 });    
  277.             }
  278.             return me;
  279.         },
  280.     
  281.         /**
  282.          * Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
  283.          * @param {String} className The CSS class to toggle
  284.          * @return {Ext.Element} this
  285.          */
  286.         toggleClass : function(className){
  287.             return this.hasClass(className) ? this.removeClass(className) : this.addClass(className);
  288.         },
  289.     
  290.         /**
  291.          * Checks if the specified CSS class exists on this element's DOM node.
  292.          * @param {String} className The CSS class to check for
  293.          * @return {Boolean} True if the class exists, else false
  294.          */
  295.         hasClass : function(className){
  296.             return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1;
  297.         },
  298.     
  299.         /**
  300.          * Replaces a CSS class on the element with another.  If the old name does not exist, the new name will simply be added.
  301.          * @param {String} oldClassName The CSS class to replace
  302.          * @param {String} newClassName The replacement CSS class
  303.          * @return {Ext.Element} this
  304.          */
  305.         replaceClass : function(oldClassName, newClassName){
  306.             return this.removeClass(oldClassName).addClass(newClassName);
  307.         },
  308.         
  309.         isStyle : function(style, val) {
  310.             return this.getStyle(style) == val;  
  311.         },
  312.     
  313.         /**
  314.          * Normalizes currentStyle and computedStyle.
  315.          * @param {String} property The style property whose value is returned.
  316.          * @return {String} The current value of the style property for this element.
  317.          */
  318.         getStyle : function(){         
  319.             return view && view.getComputedStyle ?
  320.                 function(prop){
  321.                     var el = this.dom,
  322.                         v,                  
  323.                         cs;
  324.                     if(el == document) return null;
  325.                     prop = chkCache(prop);
  326.                     return (v = el.style[prop]) ? v : 
  327.                            (cs = view.getComputedStyle(el, "")) ? cs[prop] : null;
  328.                 } :
  329.                 function(prop){      
  330.                     var el = this.dom, 
  331.                         m, 
  332.                         cs;     
  333.                         
  334.                     if(el == document) return null;      
  335.                     if (prop == 'opacity') {
  336.                         if (el.style.filter.match) {                       
  337.                             if(m = el.style.filter.match(opacityRe)){
  338.                                 var fv = parseFloat(m[1]);
  339.                                 if(!isNaN(fv)){
  340.                                     return fv ? fv / 100 : 0;
  341.                                 }
  342.                             }
  343.                         }
  344.                         return 1;
  345.                     }
  346.                     prop = chkCache(prop);  
  347.                     return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);
  348.                 };
  349.         }(),
  350.         
  351.         /**
  352.          * Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values
  353.          * are convert to standard 6 digit hex color.
  354.          * @param {String} attr The css attribute
  355.          * @param {String} defaultValue The default value to use when a valid color isn't found
  356.          * @param {String} prefix (optional) defaults to #. Use an empty string when working with
  357.          * color anims.
  358.          */
  359.         getColor : function(attr, defaultValue, prefix){
  360.             var v = this.getStyle(attr),
  361.                 color = prefix || '#',
  362.                 h;
  363.                 
  364.             if(!v || /transparent|inherit/.test(v)){
  365.                 return defaultValue;
  366.             }
  367.             if(/^r/.test(v)){
  368.                 Ext.each(v.slice(4, v.length -1).split(','), function(s){
  369.                     h = parseInt(s, 10);
  370.                     color += (h < 16 ? '0' : '') + h.toString(16); 
  371.                 });
  372.             }else{
  373.                 v = v.replace('#', '');
  374.                 color += v.length == 3 ? v.replace(/^(w)(w)(w)$/, '$1$1$2$2$3$3') : v;
  375.             }
  376.             return(color.length > 5 ? color.toLowerCase() : defaultValue);
  377.         },
  378.     
  379.         /**
  380.          * Wrapper for setting style properties, also takes single object parameter of multiple styles.
  381.          * @param {String/Object} property The style property to be set, or an object of multiple styles.
  382.          * @param {String} value (optional) The value to apply to the given property, or null if an object was passed.
  383.          * @return {Ext.Element} this
  384.          */
  385.         setStyle : function(prop, value){
  386.             var tmp, 
  387.                 style,
  388.                 camel;
  389.             if (!Ext.isObject(prop)) {
  390.                 tmp = {};
  391.                 tmp[prop] = value;          
  392.                 prop = tmp;
  393.             }
  394.             for (style in prop) {
  395.                 value = prop[style];            
  396.                 style == 'opacity' ? 
  397.                     this.setOpacity(value) : 
  398.                     this.dom.style[chkCache(style)] = value;
  399.             }
  400.             return this;
  401.         },
  402.         
  403.         /**
  404.          * Set the opacity of the element
  405.          * @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
  406.          * @param {Boolean/Object} animate (optional) a standard Element animation config object or <tt>true</tt> for
  407.          * the default animation (<tt>{duration: .35, easing: 'easeIn'}</tt>)
  408.          * @return {Ext.Element} this
  409.          */
  410.          setOpacity : function(opacity, animate){
  411.             var me = this,
  412.                 s = me.dom.style;
  413.                 
  414.             if(!animate || !me.anim){            
  415.                 if(Ext.isIE){
  416.                     var opac = opacity < 1 ? 'alpha(opacity=' + opacity * 100 + ')' : '', 
  417.                     val = s.filter.replace(opacityRe, '').replace(trimRe, '');
  419.                     s.zoom = 1;
  420.                     s.filter = val + (val.length > 0 ? ' ' : '') + opac;
  421.                 }else{
  422.                     s.opacity = opacity;
  423.                 }
  424.             }else{
  425.                 me.anim({opacity: {to: opacity}}, me.preanim(arguments, 1), null, .35, 'easeIn');
  426.             }
  427.             return me;
  428.         },
  429.         
  430.         /**
  431.          * Clears any opacity settings from this element. Required in some cases for IE.
  432.          * @return {Ext.Element} this
  433.          */
  434.         clearOpacity : function(){
  435.             var style = this.dom.style;
  436.             if(Ext.isIE){
  437.                 if(!Ext.isEmpty(style.filter)){
  438.                     style.filter = style.filter.replace(opacityRe, '').replace(trimRe, '');
  439.                 }
  440.             }else{
  441.                 style.opacity = style['-moz-opacity'] = style['-khtml-opacity'] = '';
  442.             }
  443.             return this;
  444.         },
  445.     
  446.         /**
  447.          * Returns the offset height of the element
  448.          * @param {Boolean} contentHeight (optional) true to get the height minus borders and padding
  449.          * @return {Number} The element's height
  450.          */
  451.         getHeight : function(contentHeight){
  452.             var me = this,
  453.                 dom = me.dom,
  454.                 h = MATH.max(dom.offsetHeight, dom.clientHeight) || 0;
  455.             h = !contentHeight ? h : h - me.getBorderWidth("tb") - me.getPadding("tb");
  456.             return h < 0 ? 0 : h;
  457.         },
  458.     
  459.         /**
  460.          * Returns the offset width of the element
  461.          * @param {Boolean} contentWidth (optional) true to get the width minus borders and padding
  462.          * @return {Number} The element's width
  463.          */
  464.         getWidth : function(contentWidth){
  465.             var me = this,
  466.                 dom = me.dom,
  467.                 w = MATH.max(dom.offsetWidth, dom.clientWidth) || 0;
  468.             w = !contentWidth ? w : w - me.getBorderWidth("lr") - me.getPadding("lr");
  469.             return w < 0 ? 0 : w;
  470.         },
  471.     
  472.         /**
  473.          * Set the width of this Element.
  474.          * @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>
  475.          * <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).</li>
  476.          * <li>A String used to set the CSS width style. Animation may <b>not</b> be used.
  477.          * </ul></div>
  478.          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
  479.          * @return {Ext.Element} this
  480.          */
  481.         setWidth : function(width, animate){
  482.             var me = this;
  483.             width = me.adjustWidth(width);
  484.             !animate || !me.anim ? 
  485.                 me.dom.style.width = me.addUnits(width) :
  486.                 me.anim({width : {to : width}}, me.preanim(arguments, 1));
  487.             return me;
  488.         },
  489.     
  490.         /**
  491.          * Set the height of this Element.
  492.          * <pre><code>
  493. // change the height to 200px and animate with default configuration
  494. Ext.fly('elementId').setHeight(200, true);
  496. // change the height to 150px and animate with a custom configuration
  497. Ext.fly('elId').setHeight(150, {
  498.     duration : .5, // animation will have a duration of .5 seconds
  499.     // will change the content to "finished"
  500.     callback: function(){ this.{@link #update}("finished"); } 
  501. });
  502.          * </code></pre>
  503.          * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>
  504.          * <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels.)</li>
  505.          * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>
  506.          * </ul></div>
  507.          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
  508.          * @return {Ext.Element} this
  509.          */
  510.          setHeight : function(height, animate){
  511.             var me = this;
  512.             height = me.adjustHeight(height);
  513.             !animate || !me.anim ? 
  514.                 me.dom.style.height = me.addUnits(height) :
  515.                 me.anim({height : {to : height}}, me.preanim(arguments, 1));
  516.             return me;
  517.         },
  518.         
  519.         /**
  520.          * Gets the width of the border(s) for the specified side(s)
  521.          * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
  522.          * passing <tt>'lr'</tt> would get the border <b><u>l</u></b>eft width + the border <b><u>r</u></b>ight width.
  523.          * @return {Number} The width of the sides passed added together
  524.          */
  525.         getBorderWidth : function(side){
  526.             return addStyles.call(this, side, borders);
  527.         },
  528.     
  529.         /**
  530.          * Gets the width of the padding(s) for the specified side(s)
  531.          * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
  532.          * passing <tt>'lr'</tt> would get the padding <b><u>l</u></b>eft + the padding <b><u>r</u></b>ight.
  533.          * @return {Number} The padding of the sides passed added together
  534.          */
  535.         getPadding : function(side){
  536.             return addStyles.call(this, side, paddings);
  537.         },
  538.     
  539.         /**
  540.          *  Store the current overflow setting and clip overflow on the element - use <tt>{@link #unclip}</tt> to remove
  541.          * @return {Ext.Element} this
  542.          */
  543.         clip : function(){
  544.             var me = this,
  545.                 dom = me.dom;
  546.                 
  547.             if(!data(dom, ISCLIPPED)){
  548.                 data(dom, ISCLIPPED, true);
  549.                 data(dom, ORIGINALCLIP, {
  550.                     o: me.getStyle(OVERFLOW),
  551.                     x: me.getStyle(OVERFLOWX),
  552.                     y: me.getStyle(OVERFLOWY)
  553.                 });
  554.                 me.setStyle(OVERFLOW, HIDDEN);
  555.                 me.setStyle(OVERFLOWX, HIDDEN);
  556.                 me.setStyle(OVERFLOWY, HIDDEN);
  557.             }
  558.             return me;
  559.         },
  560.     
  561.         /**
  562.          *  Return clipping (overflow) to original clipping before <tt>{@link #clip}</tt> was called
  563.          * @return {Ext.Element} this
  564.          */
  565.         unclip : function(){
  566.             var me = this,
  567.                 dom = me.dom;
  568.                 
  569.             if(data(dom, ISCLIPPED)){
  570.                 data(dom, ISCLIPPED, false);
  571.                 var o = data(dom, ORIGINALCLIP);
  572.                 if(o.o){
  573.                     me.setStyle(OVERFLOW, o.o);
  574.                 }
  575.                 if(o.x){
  576.                     me.setStyle(OVERFLOWX, o.x);
  577.                 }
  578.                 if(o.y){
  579.                     me.setStyle(OVERFLOWY, o.y);
  580.                 }
  581.             }
  582.             return me;
  583.         },
  584.         
  585.         addStyles : addStyles,
  586.         margins : margins
  587.     }
  588. }()         
  589. );/**
  590.  * @class Ext.Element
  591.  */
  593. // special markup used throughout Ext when box wrapping elements
  594. 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>';
  596. Ext.Element.addMethods(function(){
  597. var INTERNAL = "_internal";
  598. return {
  599.     /**
  600.      * More flexible version of {@link #setStyle} for setting style properties.
  601.      * @param {String/Object/Function} styles A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
  602.      * a function which returns such a specification.
  603.      * @return {Ext.Element} this
  604.      */
  605.     applyStyles : function(style){
  606.         Ext.DomHelper.applyStyles(this.dom, style);
  607.         return this;
  608.     },
  610. /**
  611.      * Returns an object with properties matching the styles requested.
  612.      * For example, el.getStyles('color', 'font-size', 'width') might return
  613.      * {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.
  614.      * @param {String} style1 A style name
  615.      * @param {String} style2 A style name
  616.      * @param {String} etc.
  617.      * @return {Object} The style object
  618.      */
  619.     getStyles : function(){
  620.     var ret = {};
  621.     Ext.each(arguments, function(v) {
  622.    ret[v] = this.getStyle(v);
  623.     },
  624.     this);
  625.     return ret;
  626.     },
  628. getStyleSize : function(){
  629.         var me = this,
  630.          w,
  631.          h,
  632.          d = this.dom,
  633.          s = d.style;
  634.         if(s.width && s.width != 'auto'){
  635.             w = parseInt(s.width, 10);
  636.             if(me.isBorderBox()){
  637.                w -= me.getFrameWidth('lr');
  638.             }
  639.         }
  640.         if(s.height && s.height != 'auto'){
  641.             h = parseInt(s.height, 10);
  642.             if(me.isBorderBox()){
  643.                h -= me.getFrameWidth('tb');
  644.             }
  645.         }
  646.         return {width: w || me.getWidth(true), height: h || me.getHeight(true)};
  647.     },
  649.     // private  ==> used by ext full
  650. setOverflow : function(v){
  651. var dom = this.dom;
  652.      if(v=='auto' && Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug
  653.      dom.style.overflow = 'hidden';
  654.          (function(){dom.style.overflow = 'auto';}).defer(1);
  655.      }else{
  656.      dom.style.overflow = v;
  657.      }
  658. },
  660.    /**
  661. * <p>Wraps the specified element with a special 9 element markup/CSS block that renders by default as
  662. * a gray container with a gradient background, rounded corners and a 4-way shadow.</p>
  663. * <p>This special markup is used throughout Ext when box wrapping elements ({@link Ext.Button},
  664. * {@link Ext.Panel} when <tt>{@link Ext.Panel#frame frame=true}</tt>, {@link Ext.Window}).  The markup
  665. * is of this form:</p>
  666. * <pre><code>
  667. Ext.Element.boxMarkup =
  668.     &#39;&lt;div class="{0}-tl">&lt;div class="{0}-tr">&lt;div class="{0}-tc">&lt;/div>&lt;/div>&lt;/div>
  669.      &lt;div class="{0}-ml">&lt;div class="{0}-mr">&lt;div class="{0}-mc">&lt;/div>&lt;/div>&lt;/div>
  670.      &lt;div class="{0}-bl">&lt;div class="{0}-br">&lt;div class="{0}-bc">&lt;/div>&lt;/div>&lt;/div>&#39;;
  671. * </code></pre>
  672. * <p>Example usage:</p>
  673. * <pre><code>
  674. // Basic box wrap
  675. Ext.get("foo").boxWrap();
  677. // You can also add a custom class and use CSS inheritance rules to customize the box look.
  678. // 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example
  679. // for how to create a custom box wrap style.
  680. Ext.get("foo").boxWrap().addClass("x-box-blue");
  681. * </code></pre>
  682. * @param {String} class (optional) A base CSS class to apply to the containing wrapper element
  683. * (defaults to <tt>'x-box'</tt>). Note that there are a number of CSS rules that are dependent on
  684. * this name to make the overall effect work, so if you supply an alternate base class, make sure you
  685. * also supply all of the necessary rules.
  686. * @return {Ext.Element} this
  687. */
  688.     boxWrap : function(cls){
  689.         cls = cls || 'x-box';
  690.         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)));
  691.         Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom);
  692.         return el;
  693.     },
  695.         /**
  696.          * Set the size of this Element. If animation is true, both width and height will be animated concurrently.
  697.          * @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>
  698.          * <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).</li>
  699.          * <li>A String used to set the CSS width style. Animation may <b>not</b> be used.
  700.          * <li>A size object in the format <code>{width: widthValue, height: heightValue}</code>.</li>
  701.          * </ul></div>
  702.          * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>
  703.          * <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels).</li>
  704.          * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>
  705.          * </ul></div>
  706.          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
  707.          * @return {Ext.Element} this
  708.          */
  709.     setSize : function(width, height, animate){
  710. var me = this;
  711. if(Ext.isObject(width)){ // in case of object from getSize()
  712.     height = width.height;
  713.     width = width.width;
  714. }
  715. width = me.adjustWidth(width);
  716. height = me.adjustHeight(height);
  717. if(!animate || !me.anim){
  718.     me.dom.style.width = me.addUnits(width);
  719.     me.dom.style.height = me.addUnits(height);
  720. }else{
  721.     me.anim({width: {to: width}, height: {to: height}}, me.preanim(arguments, 2));
  722. }
  723. return me;
  724.     },
  726.     /**
  727.      * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders
  728.      * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements
  729.      * if a height has not been set using CSS.
  730.      * @return {Number}
  731.      */
  732.     getComputedHeight : function(){
  733.     var me = this,
  734.          h = Math.max(me.dom.offsetHeight, me.dom.clientHeight);
  735.         if(!h){
  736.             h = parseInt(me.getStyle('height'), 10) || 0;
  737.             if(!me.isBorderBox()){
  738.                 h += me.getFrameWidth('tb');
  739.             }
  740.         }
  741.         return h;
  742.     },
  744.     /**
  745.      * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders
  746.      * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements
  747.      * if a width has not been set using CSS.
  748.      * @return {Number}
  749.      */
  750.     getComputedWidth : function(){
  751.         var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth);
  752.         if(!w){
  753.             w = parseInt(this.getStyle('width'), 10) || 0;
  754.             if(!this.isBorderBox()){
  755.                 w += this.getFrameWidth('lr');
  756.             }
  757.         }
  758.         return w;
  759.     },
  761.     /**
  762.      * Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()
  763.      for more information about the sides.
  764.      * @param {String} sides
  765.      * @return {Number}
  766.      */
  767.     getFrameWidth : function(sides, onlyContentBox){
  768.         return onlyContentBox && this.isBorderBox() ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));
  769.     },
  771.     /**
  772.      * Sets up event handlers to add and remove a css class when the mouse is over this element
  773.      * @param {String} className
  774.      * @return {Ext.Element} this
  775.      */
  776.     addClassOnOver : function(className){
  777.         this.hover(
  778.             function(){
  779.                 Ext.fly(this, INTERNAL).addClass(className);
  780.             },
  781.             function(){
  782.                 Ext.fly(this, INTERNAL).removeClass(className);
  783.             }
  784.         );
  785.         return this;
  786.     },
  788.     /**
  789.      * Sets up event handlers to add and remove a css class when this element has the focus
  790.      * @param {String} className
  791.      * @return {Ext.Element} this
  792.      */
  793.     addClassOnFocus : function(className){
  794.     this.on("focus", function(){
  795.         Ext.fly(this, INTERNAL).addClass(className);
  796.     }, this.dom);
  797.     this.on("blur", function(){
  798.         Ext.fly(this, INTERNAL).removeClass(className);
  799.     }, this.dom);
  800.     return this;
  801.     },
  803.     /**
  804.      * 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)
  805.      * @param {String} className
  806.      * @return {Ext.Element} this
  807.      */
  808.     addClassOnClick : function(className){
  809.         var dom = this.dom;
  810.         this.on("mousedown", function(){
  811.             Ext.fly(dom, INTERNAL).addClass(className);
  812.             var d = Ext.getDoc(),
  813.              fn = function(){
  814.                 Ext.fly(dom, INTERNAL).removeClass(className);
  815.                 d.removeListener("mouseup", fn);
  816.             };
  817.             d.on("mouseup", fn);
  818.         });
  819.         return this;
  820.     },
  822.     /**
  823.      * Returns the width and height of the viewport.
  824.         * <pre><code>
  825.         var vpSize = Ext.getBody().getViewSize();
  827.         // all Windows created afterwards will have a default value of 90% height and 95% width
  828.         Ext.Window.override({
  829.             width: vpSize.width * 0.9,
  830.             height: vpSize.height * 0.95
  831.         });
  832.         // To handle window resizing you would have to hook onto onWindowResize.
  833.         </code></pre>
  834.      * @return {Object} An object containing the viewport's size {width: (viewport width), height: (viewport height)}
  835.      */
  836.     getViewSize : function(){
  837.         var doc = document,
  838.          d = this.dom,
  839.          extdom = Ext.lib.Dom,
  840.          isDoc = (d == doc || d == doc.body);
  841.         return { width : (isDoc ? extdom.getViewWidth() : d.clientWidth),
  842.           height : (isDoc ? extdom.getViewHeight() : d.clientHeight) };
  843.     },
  845.     /**
  846.      * Returns the size of the element.
  847.      * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding
  848.      * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
  849.      */
  850.     getSize : function(contentSize){
  851.         return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};
  852.     },
  854.     /**
  855.      * Forces the browser to repaint this element
  856.      * @return {Ext.Element} this
  857.      */
  858.     repaint : function(){
  859.         var dom = this.dom;
  860.         this.addClass("x-repaint");
  861.         setTimeout(function(){
  862.             Ext.fly(dom).removeClass("x-repaint");
  863.         }, 1);
  864.         return this;
  865.     },
  867.     /**
  868.      * Disables text selection for this element (normalized across browsers)
  869.      * @return {Ext.Element} this
  870.      */
  871.     unselectable : function(){
  872.         this.dom.unselectable = "on";
  873.         return this.swallowEvent("selectstart", true).
  874.              applyStyles("-moz-user-select:none;-khtml-user-select:none;").
  875.              addClass("x-unselectable");
  876.     },
  878.     /**
  879.      * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,
  880.      * then it returns the calculated width of the sides (see getPadding)
  881.      * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides
  882.      * @return {Object/Number}
  883.      */
  884.     getMargins : function(side){
  885.     var me = this,
  886.      key,
  887.      hash = {t:"top", l:"left", r:"right", b: "bottom"},
  888.      o = {};
  890.     if (!side) {
  891.         for (key in me.margins){
  892.          o[hash[key]] = parseInt(me.getStyle(me.margins[key]), 10) || 0;
  893.                 }
  894.         return o;
  895.         } else {
  896.             return me.addStyles.call(me, side, me.margins);
  897.         }
  898.     }
  899.     };
  900. }());/**
  901.  * @class Ext.Element
  902.  */
  903. (function(){
  904. var D = Ext.lib.Dom,
  905.         LEFT = "left",
  906.         RIGHT = "right",
  907.         TOP = "top",
  908.         BOTTOM = "bottom",
  909.         POSITION = "position",
  910.         STATIC = "static",
  911.         RELATIVE = "relative",
  912.         AUTO = "auto",
  913.         ZINDEX = "z-index";
  915. function animTest(args, animate, i) {
  916. return this.preanim && !!animate ? this.preanim(args, i) : false
  917. }
  919. Ext.Element.addMethods({
  920. /**
  921.       * Gets the current X position of the element based on page coordinates.  Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
  922.       * @return {Number} The X position of the element
  923.       */
  924.     getX : function(){
  925.         return D.getX(this.dom);
  926.     },
  928.     /**
  929.       * Gets the current Y position of the element based on page coordinates.  Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
  930.       * @return {Number} The Y position of the element
  931.       */
  932.     getY : function(){
  933.         return D.getY(this.dom);
  934.     },
  936.     /**
  937.       * Gets the current position of the element based on page coordinates.  Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
  938.       * @return {Array} The XY position of the element
  939.       */
  940.     getXY : function(){
  941.         return D.getXY(this.dom);
  942.     },
  944.     /**
  945.       * Returns the offsets of this element from the passed element. Both element must be part of the DOM tree and not have display:none to have page coordinates.
  946.       * @param {Mixed} element The element to get the offsets from.
  947.       * @return {Array} The XY page offsets (e.g. [100, -200])
  948.       */
  949.     getOffsetsTo : function(el){
  950.         var o = this.getXY(),
  951.          e = Ext.fly(el, '_internal').getXY();
  952.         return [o[0]-e[0],o[1]-e[1]];
  953.     },
  955.     /**
  956.      * Sets the X position of the element based on page coordinates.  Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
  957.      * @param {Number} The X position of the element
  958.      * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
  959.      * @return {Ext.Element} this
  960.      */
  961.     setX : function(x, animate){     
  962.     return this.setXY([x, this.getY()], animTest.call(this, arguments, animate, 1));
  963.     },
  965.     /**
  966.      * Sets the Y position of the element based on page coordinates.  Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
  967.      * @param {Number} The Y position of the element
  968.      * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
  969.      * @return {Ext.Element} this
  970.      */
  971.     setY : function(y, animate){     
  972.     return this.setXY([this.getX(), y], animTest.call(this, arguments, animate, 1));
  973.     },
  975.     /**
  976.      * Sets the element's left position directly using CSS style (instead of {@link #setX}).
  977.      * @param {String} left The left CSS property value
  978.      * @return {Ext.Element} this
  979.      */
  980.     setLeft : function(left){
  981.         this.setStyle(LEFT, this.addUnits(left));
  982.         return this;
  983.     },
  985.     /**
  986.      * Sets the element's top position directly using CSS style (instead of {@link #setY}).
  987.      * @param {String} top The top CSS property value
  988.      * @return {Ext.Element} this
  989.      */
  990.     setTop : function(top){
  991.         this.setStyle(TOP, this.addUnits(top));
  992.         return this;
  993.     },
  995.     /**
  996.      * Sets the element's CSS right style.
  997.      * @param {String} right The right CSS property value
  998.      * @return {Ext.Element} this
  999.      */
  1000.     setRight : function(right){
  1001.         this.setStyle(RIGHT, this.addUnits(right));
  1002.         return this;
  1003.     },
  1005.     /**
  1006.      * Sets the element's CSS bottom style.
  1007.      * @param {String} bottom The bottom CSS property value
  1008.      * @return {Ext.Element} this
  1009.      */
  1010.     setBottom : function(bottom){
  1011.         this.setStyle(BOTTOM, this.addUnits(bottom));
  1012.         return this;
  1013.     },
  1015.     /**
  1016.      * Sets the position of the element in page coordinates, regardless of how the element is positioned.
  1017.      * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
  1018.      * @param {Array} pos Contains X & Y [x, y] values for new position (coordinates are page-based)
  1019.      * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
  1020.      * @return {Ext.Element} this
  1021.      */
  1022.     setXY : function(pos, animate){
  1023.     var me = this;
  1024.         if(!animate || !me.anim){
  1025.             D.setXY(me.dom, pos);
  1026.         }else{
  1027.             me.anim({points: {to: pos}}, me.preanim(arguments, 1), 'motion');
  1028.         }
  1029.         return me;
  1030.     },
  1032.     /**
  1033.      * Sets the position of the element in page coordinates, regardless of how the element is positioned.
  1034.      * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
  1035.      * @param {Number} x X value for new position (coordinates are page-based)
  1036.      * @param {Number} y Y value for new position (coordinates are page-based)
  1037.      * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
  1038.      * @return {Ext.Element} this
  1039.      */
  1040.     setLocation : function(x, y, animate){
  1041.         return this.setXY([x, y], animTest.call(this, arguments, animate, 2));
  1042.     },
  1044.     /**
  1045.      * Sets the position of the element in page coordinates, regardless of how the element is positioned.
  1046.      * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
  1047.      * @param {Number} x X value for new position (coordinates are page-based)
  1048.      * @param {Number} y Y value for new position (coordinates are page-based)
  1049.      * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
  1050.      * @return {Ext.Element} this
  1051.      */
  1052.     moveTo : function(x, y, animate){
  1053.         return this.setXY([x, y], animTest.call(this, arguments, animate, 2));        
  1054.     },    
  1055.     
  1056.     /**
  1057.      * Gets the left X coordinate
  1058.      * @param {Boolean} local True to get the local css position instead of page coordinate
  1059.      * @return {Number}
  1060.      */
  1061.     getLeft : function(local){
  1062.     return !local ? this.getX() : parseInt(this.getStyle(LEFT), 10) || 0;
  1063.     },
  1065.     /**
  1066.      * Gets the right X coordinate of the element (element X position + element width)
  1067.      * @param {Boolean} local True to get the local css position instead of page coordinate
  1068.      * @return {Number}
  1069.      */
  1070.     getRight : function(local){
  1071.     var me = this;
  1072.     return !local ? me.getX() + me.getWidth() : (me.getLeft(true) + me.getWidth()) || 0;
  1073.     },
  1075.     /**
  1076.      * Gets the top Y coordinate
  1077.      * @param {Boolean} local True to get the local css position instead of page coordinate
  1078.      * @return {Number}
  1079.      */
  1080.     getTop : function(local) {
  1081.     return !local ? this.getY() : parseInt(this.getStyle(TOP), 10) || 0;
  1082.     },
  1084.     /**
  1085.      * Gets the bottom Y coordinate of the element (element Y position + element height)
  1086.      * @param {Boolean} local True to get the local css position instead of page coordinate
  1087.      * @return {Number}
  1088.      */
  1089.     getBottom : function(local){
  1090.     var me = this;
  1091.     return !local ? me.getY() + me.getHeight() : (me.getTop(true) + me.getHeight()) || 0;
  1092.     },
  1094.     /**
  1095.     * Initializes positioning on this element. If a desired position is not passed, it will make the
  1096.     * the element positioned relative IF it is not already positioned.
  1097.     * @param {String} pos (optional) Positioning to use "relative", "absolute" or "fixed"
  1098.     * @param {Number} zIndex (optional) The zIndex to apply
  1099.     * @param {Number} x (optional) Set the page X position
  1100.     * @param {Number} y (optional) Set the page Y position
  1101.     */
  1102.     position : function(pos, zIndex, x, y){
  1103.     var me = this;
  1104.     
  1105.         if(!pos && me.isStyle(POSITION, STATIC)){           
  1106.             me.setStyle(POSITION, RELATIVE);           
  1107.         } else if(pos) {
  1108.             me.setStyle(POSITION, pos);
  1109.         }
  1110.         if(zIndex){
  1111.             me.setStyle(ZINDEX, zIndex);
  1112.         }
  1113.         if(x || y) me.setXY([x || false, y || false]);
  1114.     },
  1116.     /**
  1117.     * Clear positioning back to the default when the document was loaded
  1118.     * @param {String} value (optional) The value to use for the left,right,top,bottom, defaults to '' (empty string). You could use 'auto'.
  1119.     * @return {Ext.Element} this
  1120.      */
  1121.     clearPositioning : function(value){
  1122.         value = value || '';
  1123.         this.setStyle({
  1124.             left : value,
  1125.             right : value,
  1126.             top : value,
  1127.             bottom : value,
  1128.             "z-index" : "",
  1129.             position : STATIC
  1130.         });
  1131.         return this;
  1132.     },
  1134.     /**
  1135.     * Gets an object with all CSS positioning properties. Useful along with setPostioning to get
  1136.     * snapshot before performing an update and then restoring the element.
  1137.     * @return {Object}
  1138.     */
  1139.     getPositioning : function(){
  1140.         var l = this.getStyle(LEFT);
  1141.         var t = this.getStyle(TOP);
  1142.         return {
  1143.             "position" : this.getStyle(POSITION),
  1144.             "left" : l,
  1145.             "right" : l ? "" : this.getStyle(RIGHT),
  1146.             "top" : t,
  1147.             "bottom" : t ? "" : this.getStyle(BOTTOM),
  1148.             "z-index" : this.getStyle(ZINDEX)
  1149.         };
  1150.     },
  1151.     
  1152.     /**
  1153.     * Set positioning with an object returned by getPositioning().
  1154.     * @param {Object} posCfg
  1155.     * @return {Ext.Element} this
  1156.      */
  1157.     setPositioning : function(pc){
  1158.     var me = this,
  1159.      style = me.dom.style;
  1160.     
  1161.         me.setStyle(pc);
  1162.         
  1163.         if(pc.right == AUTO){
  1164.             style.right = "";
  1165.         }
  1166.         if(pc.bottom == AUTO){
  1167.             style.bottom = "";
  1168.         }
  1169.         
  1170.         return me;
  1171.     },    
  1173.     /**
  1174.      * Translates the passed page coordinates into left/top css values for this element
  1175.      * @param {Number/Array} x The page x or an array containing [x, y]
  1176.      * @param {Number} y (optional) The page y, required if x is not an array
  1177.      * @return {Object} An object with left and top properties. e.g. {left: (value), top: (value)}
  1178.      */
  1179.     translatePoints : function(x, y){              
  1180.     y = isNaN(x[1]) ? y : x[1];
  1181.         x = isNaN(x[0]) ? x : x[0];
  1182.         var me = this,
  1183.          relative = me.isStyle(POSITION, RELATIVE),
  1184.          o = me.getXY(),
  1185.          l = parseInt(me.getStyle(LEFT), 10),
  1186.          t = parseInt(me.getStyle(TOP), 10);
  1187.         
  1188.         l = !isNaN(l) ? l : (relative ? 0 : me.dom.offsetLeft);
  1189.         t = !isNaN(t) ? t : (relative ? 0 : me.dom.offsetTop);        
  1191.         return {left: (x - o[0] + l), top: (y - o[1] + t)}; 
  1192.     },
  1193.     
  1194.     animTest : animTest
  1195. });
  1196. })();/**
  1197.  * @class Ext.Element
  1198.  */
  1199. Ext.Element.addMethods({
  1200.     /**
  1201.      * Sets the element's box. Use getBox() on another element to get a box obj. If animate is true then width, height, x and y will be animated concurrently.
  1202.      * @param {Object} box The box to fill {x, y, width, height}
  1203.      * @param {Boolean} adjust (optional) Whether to adjust for box-model issues automatically
  1204.      * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
  1205.      * @return {Ext.Element} this
  1206.      */
  1207.     setBox : function(box, adjust, animate){
  1208.         var me = this,
  1209.          w = box.width, 
  1210.          h = box.height;
  1211.         if((adjust && !me.autoBoxAdjust) && !me.isBorderBox()){
  1212.            w -= (me.getBorderWidth("lr") + me.getPadding("lr"));
  1213.            h -= (me.getBorderWidth("tb") + me.getPadding("tb"));
  1214.         }
  1215.         me.setBounds(box.x, box.y, w, h, me.animTest.call(me, arguments, animate, 2));
  1216.         return me;
  1217.     },
  1218.     
  1219.     /**
  1220.      * Return a box {x, y, width, height} that can be used to set another elements
  1221.      * size/location to match this element.
  1222.      * @param {Boolean} contentBox (optional) If true a box for the content of the element is returned.
  1223.      * @param {Boolean} local (optional) If true the element's left and top are returned instead of page x/y.
  1224.      * @return {Object} box An object in the format {x, y, width, height}
  1225.      */
  1226. getBox : function(contentBox, local) {     
  1227.     var me = this,
  1228.          xy,
  1229.          left,
  1230.          top,
  1231.          getBorderWidth = me.getBorderWidth,
  1232.          getPadding = me.getPadding, 
  1233.          l,
  1234.          r,
  1235.          t,
  1236.          b;
  1237.         if(!local){
  1238.             xy = me.getXY();
  1239.         }else{
  1240.             left = parseInt(me.getStyle("left"), 10) || 0;
  1241.             top = parseInt(me.getStyle("top"), 10) || 0;
  1242.             xy = [left, top];
  1243.         }
  1244.         var el = me.dom, w = el.offsetWidth, h = el.offsetHeight, bx;
  1245.         if(!contentBox){
  1246.             bx = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: w, height: h};
  1247.         }else{
  1248.             l = getBorderWidth.call(me, "l") + getPadding.call(me, "l");
  1249.             r = getBorderWidth.call(me, "r") + getPadding.call(me, "r");
  1250.             t = getBorderWidth.call(me, "t") + getPadding.call(me, "t");
  1251.             b = getBorderWidth.call(me, "b") + getPadding.call(me, "b");
  1252.             bx = {x: xy[0]+l, y: xy[1]+t, 0: xy[0]+l, 1: xy[1]+t, width: w-(l+r), height: h-(t+b)};
  1253.         }
  1254.         bx.right = bx.x + bx.width;
  1255.         bx.bottom = bx.y + bx.height;
  1256.         return bx;
  1257. },
  1259.     /**
  1260.      * Move this element relative to its current position.
  1261.      * @param {String} direction Possible values are: "l" (or "left"), "r" (or "right"), "t" (or "top", or "up"), "b" (or "bottom", or "down").
  1262.      * @param {Number} distance How far to move the element in pixels
  1263.      * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
  1264.      * @return {Ext.Element} this
  1265.      */
  1266.      move : function(direction, distance, animate){
  1267.         var me = this,        
  1268.          xy = me.getXY(),
  1269.          x = xy[0],
  1270.          y = xy[1],        
  1271.          left = [x - distance, y],
  1272.          right = [x + distance, y],
  1273.          top = [x, y - distance],
  1274.          bottom = [x, y + distance],
  1275.         hash = {
  1276.          l : left,
  1277.          left : left,
  1278.          r : right,
  1279.          right : right,
  1280.          t : top,
  1281.          top : top,
  1282.          up : top,
  1283.          b : bottom, 
  1284.          bottom : bottom,
  1285.          down : bottom         
  1286.         };
  1287.         
  1288.       direction = direction.toLowerCase();    
  1289.       me.moveTo(hash[direction][0], hash[direction][1], me.animTest.call(me, arguments, animate, 2));
  1290.     },
  1291.     
  1292.     /**
  1293.      * Quick set left and top adding default units
  1294.      * @param {String} left The left CSS property value
  1295.      * @param {String} top The top CSS property value
  1296.      * @return {Ext.Element} this
  1297.      */
  1298.      setLeftTop : function(left, top){
  1299.     var me = this,
  1300.      style = me.dom.style;
  1301.         style.left = me.addUnits(left);
  1302.         style.top = me.addUnits(top);
  1303.         return me;
  1304.     },
  1305.     
  1306.     /**
  1307.      * Returns the region of the given element.
  1308.      * The element must be part of the DOM tree to have a region (display:none or elements not appended return false).
  1309.      * @return {Region} A Ext.lib.Region containing "top, left, bottom, right" member data.
  1310.      */
  1311.     getRegion : function(){
  1312.         return Ext.lib.Dom.getRegion(this.dom);
  1313.     },
  1314.     
  1315.     /**
  1316.      * Sets the element's position and size in one shot. If animation is true then width, height, x and y will be animated concurrently.
  1317.      * @param {Number} x X value for new position (coordinates are page-based)
  1318.      * @param {Number} y Y value for new position (coordinates are page-based)
  1319.      * @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>
  1320.      * <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels)</li>
  1321.      * <li>A String used to set the CSS width style. Animation may <b>not</b> be used.
  1322.      * </ul></div>
  1323.      * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>
  1324.      * <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels)</li>
  1325.      * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>
  1326.      * </ul></div>
  1327.      * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
  1328.      * @return {Ext.Element} this
  1329.      */
  1330.     setBounds : function(x, y, width, height, animate){
  1331.     var me = this;
  1332.         if (!animate || !me.anim) {
  1333.             me.setSize(width, height);
  1334.             me.setLocation(x, y);
  1335.         } else {
  1336.             me.anim({points: {to: [x, y]}, 
  1337.               width: {to: me.adjustWidth(width)}, 
  1338.               height: {to: me.adjustHeight(height)}},
  1339.                      me.preanim(arguments, 4), 
  1340.                      'motion');
  1341.         }
  1342.         return me;
  1343.     },
  1345.     /**
  1346.      * Sets the element's position and size the specified region. If animation is true then width, height, x and y will be animated concurrently.
  1347.      * @param {Ext.lib.Region} region The region to fill
  1348.      * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
  1349.      * @return {Ext.Element} this
  1350.      */
  1351.     setRegion : function(region, animate) {
  1352.         return this.setBounds(region.left, region.top, region.right-region.left, region.bottom-region.top, this.animTest.call(this, arguments, animate, 1));
  1353.     }
  1354. });/**
  1355.  * @class Ext.Element
  1356.  */
  1357. Ext.Element.addMethods({
  1358.     /**
  1359.      * Returns true if this element is scrollable.
  1360.      * @return {Boolean}
  1361.      */
  1362.     isScrollable : function(){
  1363.         var dom = this.dom;
  1364.         return dom.scrollHeight > dom.clientHeight || dom.scrollWidth > dom.clientWidth;
  1365.     },
  1367.     /**
  1368.      * Scrolls this element the specified scroll point. It does NOT do bounds checking so if you scroll to a weird value it will try to do it. For auto bounds checking, use scroll().
  1369.      * @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.
  1370.      * @param {Number} value The new scroll value.
  1371.      * @return {Element} this
  1372.      */
  1373.     scrollTo : function(side, value){
  1374.         this.dom["scroll" + (/top/i.test(side) ? "Top" : "Left")] = value;
  1375.         return this;
  1376.     },
  1378.     /**
  1379.      * Returns the current scroll position of the element.
  1380.      * @return {Object} An object containing the scroll position in the format {left: (scrollLeft), top: (scrollTop)}
  1381.      */
  1382.     getScroll : function(){
  1383.         var d = this.dom, 
  1384.             doc = document,
  1385.             body = doc.body,
  1386.             docElement = doc.documentElement,
  1387.             l,
  1388.             t,
  1389.             ret;
  1391.         if(d == doc || d == body){
  1392.             if(Ext.isIE && Ext.isStrict){
  1393.                 l = docElement.scrollLeft; 
  1394.                 t = docElement.scrollTop;
  1395.             }else{
  1396.                 l = window.pageXOffset;
  1397.                 t = window.pageYOffset;
  1398.             }
  1399.             ret = {left: l || (body ? body.scrollLeft : 0), top: t || (body ? body.scrollTop : 0)};
  1400.         }else{
  1401.             ret = {left: d.scrollLeft, top: d.scrollTop};
  1402.         }
  1403.         return ret;
  1404.     }
  1405. });/**
  1406.  * @class Ext.Element
  1407.  */
  1408. Ext.Element.addMethods({
  1409.     /**
  1410.      * Scrolls this element the specified scroll point. It does NOT do bounds checking so if you scroll to a weird value it will try to do it. For auto bounds checking, use scroll().
  1411.      * @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.
  1412.      * @param {Number} value The new scroll value
  1413.      * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
  1414.      * @return {Element} this
  1415.      */
  1416.     scrollTo : function(side, value, animate){
  1417.         var tester = /top/i,
  1418.          prop = "scroll" + (tester.test(side) ? "Top" : "Left"),
  1419.          me = this,
  1420.          dom = me.dom;
  1421.         if (!animate || !me.anim) {
  1422.             dom[prop] = value;
  1423.         } else {
  1424.             me.anim({scroll: {to: tester.test(prop) ? [dom[prop], value] : [value, dom[prop]]}},
  1425.               me.preanim(arguments, 2), 'scroll');
  1426.         }
  1427.         return me;
  1428.     },
  1429.     
  1430.     /**
  1431.      * Scrolls this element into view within the passed container.
  1432.      * @param {Mixed} container (optional) The container element to scroll (defaults to document.body).  Should be a
  1433.      * string (id), dom node, or Ext.Element.
  1434.      * @param {Boolean} hscroll (optional) False to disable horizontal scroll (defaults to true)
  1435.      * @return {Ext.Element} this
  1436.      */
  1437.     scrollIntoView : function(container, hscroll){
  1438.         var c = Ext.getDom(container) || Ext.getBody().dom,
  1439.          el = this.dom,
  1440.          o = this.getOffsetsTo(c),
  1441.             l = o[0] + c.scrollLeft,
  1442.             t = o[1] + c.scrollTop,
  1443.             b = t + el.offsetHeight,
  1444.             r = l + el.offsetWidth,
  1445.          ch = c.clientHeight,
  1446.          ct = parseInt(c.scrollTop, 10),
  1447.          cl = parseInt(c.scrollLeft, 10),
  1448.          cb = ct + ch,
  1449.          cr = cl + c.clientWidth;
  1451.         if (el.offsetHeight > ch || t < ct) {
  1452.          c.scrollTop = t;
  1453.         } else if (b > cb){
  1454.             c.scrollTop = b-ch;
  1455.         }
  1456.         c.scrollTop = c.scrollTop; // corrects IE, other browsers will ignore
  1458.         if(hscroll !== false){
  1459. if(el.offsetWidth > c.clientWidth || l < cl){
  1460.                 c.scrollLeft = l;
  1461.             }else if(r > cr){
  1462.                 c.scrollLeft = r - c.clientWidth;
  1463.             }
  1464.             c.scrollLeft = c.scrollLeft;
  1465.         }
  1466.         return this;
  1467.     },
  1469.     // private
  1470.     scrollChildIntoView : function(child, hscroll){
  1471.         Ext.fly(child, '_scrollChildIntoView').scrollIntoView(this, hscroll);
  1472.     },
  1473.     
  1474.     /**
  1475.      * Scrolls this element the specified direction. Does bounds checking to make sure the scroll is
  1476.      * within this element's scrollable range.
  1477.      * @param {String} direction Possible values are: "l" (or "left"), "r" (or "right"), "t" (or "top", or "up"), "b" (or "bottom", or "down").
  1478.      * @param {Number} distance How far to scroll the element in pixels
  1479.      * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
  1480.      * @return {Boolean} Returns true if a scroll was triggered or false if the element
  1481.      * was scrolled as far as it could go.
  1482.      */
  1483.      scroll : function(direction, distance, animate){
  1484.          if(!this.isScrollable()){
  1485.              return;
  1486.          }
  1487.          var el = this.dom,
  1488.             l = el.scrollLeft, t = el.scrollTop,
  1489.             w = el.scrollWidth, h = el.scrollHeight,
  1490.             cw = el.clientWidth, ch = el.clientHeight,
  1491.             scrolled = false, v,
  1492.             hash = {
  1493.                 l: Math.min(l + distance, w-cw),
  1494.                 r: v = Math.max(l - distance, 0),
  1495.                 t: Math.max(t - distance, 0),
  1496.                 b: Math.min(t + distance, h-ch)
  1497.             };
  1498.             hash.d = hash.b;
  1499.             hash.u = hash.t;
  1500.             
  1501.          direction = direction.substr(0, 1);
  1502.          if((v = hash[direction]) > -1){
  1503.             scrolled = true;
  1504.             this.scrollTo(direction == 'l' || direction == 'r' ? 'left' : 'top', v, this.preanim(arguments, 2));
  1505.          }
  1506.          return scrolled;
  1507.     }
  1508. });/**
  1509.  * @class Ext.Element
  1510.  */
  1511. /**
  1512.  * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element
  1513.  * @static
  1514.  * @type Number
  1515.  */
  1516. Ext.Element.VISIBILITY = 1;
  1517. /**
  1518.  * Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element
  1519.  * @static
  1520.  * @type Number
  1521.  */
  1522. Ext.Element.DISPLAY = 2;
  1524. Ext.Element.addMethods(function(){
  1525.     var VISIBILITY = "visibility",
  1526.         DISPLAY = "display",
  1527.         HIDDEN = "hidden",
  1528.         NONE = "none",      
  1529.         ORIGINALDISPLAY = 'originalDisplay',
  1530.         VISMODE = 'visibilityMode',
  1531.         ELDISPLAY = Ext.Element.DISPLAY,
  1532.         data = Ext.Element.data,
  1533.         getDisplay = function(dom){
  1534.             var d = data(dom, ORIGINALDISPLAY);
  1535.             if(d === undefined){
  1536.                 data(dom, ORIGINALDISPLAY, d = '');
  1537.             }
  1538.             return d;
  1539.         },
  1540.         getVisMode = function(dom){
  1541.             var m = data(dom, VISMODE);
  1542.             if(m === undefined){
  1543.                 data(dom, VISMODE, m = 1)
  1544.             }
  1545.             return m;
  1546.         };
  1547.     
  1548.     return {
  1549.         /**
  1550.          * The element's default display mode  (defaults to "")
  1551.          * @type String
  1552.          */
  1553.         originalDisplay : "",
  1554.         visibilityMode : 1,
  1555.         
  1556.         /**
  1557.          * Sets the element's visibility mode. When setVisible() is called it
  1558.          * will use this to determine whether to set the visibility or the display property.
  1559.          * @param visMode Ext.Element.VISIBILITY or Ext.Element.DISPLAY
  1560.          * @return {Ext.Element} this
  1561.          */
  1562.         setVisibilityMode : function(visMode){  
  1563.             data(this.dom, VISMODE, visMode);
  1564.             return this;
  1565.         },
  1566.         
  1567.         /**
  1568.          * Perform custom animation on this element.
  1569.          * <div><ul class="mdetail-params">
  1570.          * <li><u>Animation Properties</u></li>
  1571.          * 
  1572.          * <p>The Animation Control Object enables gradual transitions for any member of an
  1573.          * element's style object that takes a numeric value including but not limited to
  1574.          * these properties:</p><div><ul class="mdetail-params">
  1575.          * <li><tt>bottom, top, left, right</tt></li>
  1576.          * <li><tt>height, width</tt></li>
  1577.          * <li><tt>margin, padding</tt></li>
  1578.          * <li><tt>borderWidth</tt></li>
  1579.          * <li><tt>opacity</tt></li>
  1580.          * <li><tt>fontSize</tt></li>
  1581.          * <li><tt>lineHeight</tt></li>
  1582.          * </ul></div>
  1583.          * 
  1584.          * 
  1585.          * <li><u>Animation Property Attributes</u></li>
  1586.          * 
  1587.          * <p>Each Animation Property is a config object with optional properties:</p>
  1588.          * <div><ul class="mdetail-params">
  1589.          * <li><tt>by</tt>*  : relative change - start at current value, change by this value</li>
  1590.          * <li><tt>from</tt> : ignore current value, start from this value</li>
  1591.          * <li><tt>to</tt>*  : start at current value, go to this value</li>
  1592.          * <li><tt>unit</tt> : any allowable unit specification</li>
  1593.          * <p>* do not specify both <tt>to</tt> and <tt>by</tt> for an animation property</p>
  1594.          * </ul></div>
  1595.          * 
  1596.          * <li><u>Animation Types</u></li>
  1597.          * 
  1598.          * <p>The supported animation types:</p><div><ul class="mdetail-params">
  1599.          * <li><tt>'run'</tt> : Default
  1600.          * <pre><code>
  1601. var el = Ext.get('complexEl');
  1602. el.animate(
  1603.     // animation control object
  1604.     {
  1605.         borderWidth: {to: 3, from: 0},
  1606.         opacity: {to: .3, from: 1},
  1607.         height: {to: 50, from: el.getHeight()},
  1608.         width: {to: 300, from: el.getWidth()},
  1609.         top  : {by: - 100, unit: 'px'},
  1610.     },
  1611.     0.35,      // animation duration
  1612.     null,      // callback
  1613.     'easeOut', // easing method
  1614.     'run'      // animation type ('run','color','motion','scroll')    
  1615. );
  1616.          * </code></pre>
  1617.          * </li>
  1618.          * <li><tt>'color'</tt>
  1619.          * <p>Animates transition of background, text, or border colors.</p>
  1620.          * <pre><code>
  1621. el.animate(
  1622.     // animation control object
  1623.     {
  1624.         color: { to: '#06e' },
  1625.         backgroundColor: { to: '#e06' }
  1626.     },
  1627.     0.35,      // animation duration
  1628.     null,      // callback
  1629.     'easeOut', // easing method
  1630.     'color'    // animation type ('run','color','motion','scroll')    
  1631. );
  1632.          * </code></pre> 
  1633.          * </li>
  1634.          * 
  1635.          * <li><tt>'motion'</tt>
  1636.          * <p>Animates the motion of an element to/from specific points using optional bezier
  1637.          * way points during transit.</p>
  1638.          * <pre><code>
  1639. el.animate(
  1640.     // animation control object
  1641.     {
  1642.         borderWidth: {to: 3, from: 0},