ext-foundation-debug.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:503k
源码类别:

中间件编程

开发平台:

JavaScript

  1.         } else if(pos) {
  2.             me.setStyle(POSITION, pos);
  3.         }
  4.         if(zIndex){
  5.             me.setStyle(ZINDEX, zIndex);
  6.         }
  7.         if(x || y) me.setXY([x || false, y || false]);
  8.     },
  9.     /**
  10.     * Clear positioning back to the default when the document was loaded
  11.     * @param {String} value (optional) The value to use for the left,right,top,bottom, defaults to '' (empty string). You could use 'auto'.
  12.     * @return {Ext.Element} this
  13.      */
  14.     clearPositioning : function(value){
  15.         value = value || '';
  16.         this.setStyle({
  17.             left : value,
  18.             right : value,
  19.             top : value,
  20.             bottom : value,
  21.             "z-index" : "",
  22.             position : STATIC
  23.         });
  24.         return this;
  25.     },
  26.     /**
  27.     * Gets an object with all CSS positioning properties. Useful along with setPostioning to get
  28.     * snapshot before performing an update and then restoring the element.
  29.     * @return {Object}
  30.     */
  31.     getPositioning : function(){
  32.         var l = this.getStyle(LEFT);
  33.         var t = this.getStyle(TOP);
  34.         return {
  35.             "position" : this.getStyle(POSITION),
  36.             "left" : l,
  37.             "right" : l ? "" : this.getStyle(RIGHT),
  38.             "top" : t,
  39.             "bottom" : t ? "" : this.getStyle(BOTTOM),
  40.             "z-index" : this.getStyle(ZINDEX)
  41.         };
  42.     },
  43.     
  44.     /**
  45.     * Set positioning with an object returned by getPositioning().
  46.     * @param {Object} posCfg
  47.     * @return {Ext.Element} this
  48.      */
  49.     setPositioning : function(pc){
  50.     var me = this,
  51.      style = me.dom.style;
  52.     
  53.         me.setStyle(pc);
  54.         
  55.         if(pc.right == AUTO){
  56.             style.right = "";
  57.         }
  58.         if(pc.bottom == AUTO){
  59.             style.bottom = "";
  60.         }
  61.         
  62.         return me;
  63.     },    
  64.     /**
  65.      * Translates the passed page coordinates into left/top css values for this element
  66.      * @param {Number/Array} x The page x or an array containing [x, y]
  67.      * @param {Number} y (optional) The page y, required if x is not an array
  68.      * @return {Object} An object with left and top properties. e.g. {left: (value), top: (value)}
  69.      */
  70.     translatePoints : function(x, y){              
  71.     y = isNaN(x[1]) ? y : x[1];
  72.         x = isNaN(x[0]) ? x : x[0];
  73.         var me = this,
  74.          relative = me.isStyle(POSITION, RELATIVE),
  75.          o = me.getXY(),
  76.          l = parseInt(me.getStyle(LEFT), 10),
  77.          t = parseInt(me.getStyle(TOP), 10);
  78.         
  79.         l = !isNaN(l) ? l : (relative ? 0 : me.dom.offsetLeft);
  80.         t = !isNaN(t) ? t : (relative ? 0 : me.dom.offsetTop);        
  81.         return {left: (x - o[0] + l), top: (y - o[1] + t)}; 
  82.     },
  83.     
  84.     animTest : animTest
  85. });
  86. })();/**
  87.  * @class Ext.Element
  88.  */
  89. Ext.Element.addMethods({
  90.     /**
  91.      * 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.
  92.      * @param {Object} box The box to fill {x, y, width, height}
  93.      * @param {Boolean} adjust (optional) Whether to adjust for box-model issues automatically
  94.      * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
  95.      * @return {Ext.Element} this
  96.      */
  97.     setBox : function(box, adjust, animate){
  98.         var me = this,
  99.          w = box.width, 
  100.          h = box.height;
  101.         if((adjust && !me.autoBoxAdjust) && !me.isBorderBox()){
  102.            w -= (me.getBorderWidth("lr") + me.getPadding("lr"));
  103.            h -= (me.getBorderWidth("tb") + me.getPadding("tb"));
  104.         }
  105.         me.setBounds(box.x, box.y, w, h, me.animTest.call(me, arguments, animate, 2));
  106.         return me;
  107.     },
  108.     
  109.     /**
  110.      * Return a box {x, y, width, height} that can be used to set another elements
  111.      * size/location to match this element.
  112.      * @param {Boolean} contentBox (optional) If true a box for the content of the element is returned.
  113.      * @param {Boolean} local (optional) If true the element's left and top are returned instead of page x/y.
  114.      * @return {Object} box An object in the format {x, y, width, height}
  115.      */
  116. getBox : function(contentBox, local) {     
  117.     var me = this,
  118.          xy,
  119.          left,
  120.          top,
  121.          getBorderWidth = me.getBorderWidth,
  122.          getPadding = me.getPadding, 
  123.          l,
  124.          r,
  125.          t,
  126.          b;
  127.         if(!local){
  128.             xy = me.getXY();
  129.         }else{
  130.             left = parseInt(me.getStyle("left"), 10) || 0;
  131.             top = parseInt(me.getStyle("top"), 10) || 0;
  132.             xy = [left, top];
  133.         }
  134.         var el = me.dom, w = el.offsetWidth, h = el.offsetHeight, bx;
  135.         if(!contentBox){
  136.             bx = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: w, height: h};
  137.         }else{
  138.             l = getBorderWidth.call(me, "l") + getPadding.call(me, "l");
  139.             r = getBorderWidth.call(me, "r") + getPadding.call(me, "r");
  140.             t = getBorderWidth.call(me, "t") + getPadding.call(me, "t");
  141.             b = getBorderWidth.call(me, "b") + getPadding.call(me, "b");
  142.             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)};
  143.         }
  144.         bx.right = bx.x + bx.width;
  145.         bx.bottom = bx.y + bx.height;
  146.         return bx;
  147. },
  148.     /**
  149.      * Move this element relative to its current position.
  150.      * @param {String} direction Possible values are: "l" (or "left"), "r" (or "right"), "t" (or "top", or "up"), "b" (or "bottom", or "down").
  151.      * @param {Number} distance How far to move the element in pixels
  152.      * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
  153.      * @return {Ext.Element} this
  154.      */
  155.      move : function(direction, distance, animate){
  156.         var me = this,        
  157.          xy = me.getXY(),
  158.          x = xy[0],
  159.          y = xy[1],        
  160.          left = [x - distance, y],
  161.          right = [x + distance, y],
  162.          top = [x, y - distance],
  163.          bottom = [x, y + distance],
  164.         hash = {
  165.          l : left,
  166.          left : left,
  167.          r : right,
  168.          right : right,
  169.          t : top,
  170.          top : top,
  171.          up : top,
  172.          b : bottom, 
  173.          bottom : bottom,
  174.          down : bottom         
  175.         };
  176.         
  177.       direction = direction.toLowerCase();    
  178.       me.moveTo(hash[direction][0], hash[direction][1], me.animTest.call(me, arguments, animate, 2));
  179.     },
  180.     
  181.     /**
  182.      * Quick set left and top adding default units
  183.      * @param {String} left The left CSS property value
  184.      * @param {String} top The top CSS property value
  185.      * @return {Ext.Element} this
  186.      */
  187.      setLeftTop : function(left, top){
  188.     var me = this,
  189.      style = me.dom.style;
  190.         style.left = me.addUnits(left);
  191.         style.top = me.addUnits(top);
  192.         return me;
  193.     },
  194.     
  195.     /**
  196.      * Returns the region of the given element.
  197.      * The element must be part of the DOM tree to have a region (display:none or elements not appended return false).
  198.      * @return {Region} A Ext.lib.Region containing "top, left, bottom, right" member data.
  199.      */
  200.     getRegion : function(){
  201.         return Ext.lib.Dom.getRegion(this.dom);
  202.     },
  203.     
  204.     /**
  205.      * Sets the element's position and size in one shot. If animation is true then width, height, x and y will be animated concurrently.
  206.      * @param {Number} x X value for new position (coordinates are page-based)
  207.      * @param {Number} y Y value for new position (coordinates are page-based)
  208.      * @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>
  209.      * <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels)</li>
  210.      * <li>A String used to set the CSS width style. Animation may <b>not</b> be used.
  211.      * </ul></div>
  212.      * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>
  213.      * <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels)</li>
  214.      * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>
  215.      * </ul></div>
  216.      * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
  217.      * @return {Ext.Element} this
  218.      */
  219.     setBounds : function(x, y, width, height, animate){
  220.     var me = this;
  221.         if (!animate || !me.anim) {
  222.             me.setSize(width, height);
  223.             me.setLocation(x, y);
  224.         } else {
  225.             me.anim({points: {to: [x, y]}, 
  226.               width: {to: me.adjustWidth(width)}, 
  227.               height: {to: me.adjustHeight(height)}},
  228.                      me.preanim(arguments, 4), 
  229.                      'motion');
  230.         }
  231.         return me;
  232.     },
  233.     /**
  234.      * Sets the element's position and size the specified region. If animation is true then width, height, x and y will be animated concurrently.
  235.      * @param {Ext.lib.Region} region The region to fill
  236.      * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
  237.      * @return {Ext.Element} this
  238.      */
  239.     setRegion : function(region, animate) {
  240.         return this.setBounds(region.left, region.top, region.right-region.left, region.bottom-region.top, this.animTest.call(this, arguments, animate, 1));
  241.     }
  242. });/**
  243.  * @class Ext.Element
  244.  */
  245. Ext.Element.addMethods({
  246.     /**
  247.      * Returns true if this element is scrollable.
  248.      * @return {Boolean}
  249.      */
  250.     isScrollable : function(){
  251.         var dom = this.dom;
  252.         return dom.scrollHeight > dom.clientHeight || dom.scrollWidth > dom.clientWidth;
  253.     },
  254.     /**
  255.      * 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().
  256.      * @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.
  257.      * @param {Number} value The new scroll value.
  258.      * @return {Element} this
  259.      */
  260.     scrollTo : function(side, value){
  261.         this.dom["scroll" + (/top/i.test(side) ? "Top" : "Left")] = value;
  262.         return this;
  263.     },
  264.     /**
  265.      * Returns the current scroll position of the element.
  266.      * @return {Object} An object containing the scroll position in the format {left: (scrollLeft), top: (scrollTop)}
  267.      */
  268.     getScroll : function(){
  269.         var d = this.dom, 
  270.             doc = document,
  271.             body = doc.body,
  272.             docElement = doc.documentElement,
  273.             l,
  274.             t,
  275.             ret;
  276.         if(d == doc || d == body){
  277.             if(Ext.isIE && Ext.isStrict){
  278.                 l = docElement.scrollLeft; 
  279.                 t = docElement.scrollTop;
  280.             }else{
  281.                 l = window.pageXOffset;
  282.                 t = window.pageYOffset;
  283.             }
  284.             ret = {left: l || (body ? body.scrollLeft : 0), top: t || (body ? body.scrollTop : 0)};
  285.         }else{
  286.             ret = {left: d.scrollLeft, top: d.scrollTop};
  287.         }
  288.         return ret;
  289.     }
  290. });/**
  291.  * @class Ext.Element
  292.  */
  293. Ext.Element.addMethods({
  294.     /**
  295.      * 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().
  296.      * @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.
  297.      * @param {Number} value The new scroll value
  298.      * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
  299.      * @return {Element} this
  300.      */
  301.     scrollTo : function(side, value, animate){
  302.         var tester = /top/i,
  303.          prop = "scroll" + (tester.test(side) ? "Top" : "Left"),
  304.          me = this,
  305.          dom = me.dom;
  306.         if (!animate || !me.anim) {
  307.             dom[prop] = value;
  308.         } else {
  309.             me.anim({scroll: {to: tester.test(prop) ? [dom[prop], value] : [value, dom[prop]]}},
  310.               me.preanim(arguments, 2), 'scroll');
  311.         }
  312.         return me;
  313.     },
  314.     
  315.     /**
  316.      * Scrolls this element into view within the passed container.
  317.      * @param {Mixed} container (optional) The container element to scroll (defaults to document.body).  Should be a
  318.      * string (id), dom node, or Ext.Element.
  319.      * @param {Boolean} hscroll (optional) False to disable horizontal scroll (defaults to true)
  320.      * @return {Ext.Element} this
  321.      */
  322.     scrollIntoView : function(container, hscroll){
  323.         var c = Ext.getDom(container) || Ext.getBody().dom,
  324.          el = this.dom,
  325.          o = this.getOffsetsTo(c),
  326.             l = o[0] + c.scrollLeft,
  327.             t = o[1] + c.scrollTop,
  328.             b = t + el.offsetHeight,
  329.             r = l + el.offsetWidth,
  330.          ch = c.clientHeight,
  331.          ct = parseInt(c.scrollTop, 10),
  332.          cl = parseInt(c.scrollLeft, 10),
  333.          cb = ct + ch,
  334.          cr = cl + c.clientWidth;
  335.         if (el.offsetHeight > ch || t < ct) {
  336.          c.scrollTop = t;
  337.         } else if (b > cb){
  338.             c.scrollTop = b-ch;
  339.         }
  340.         c.scrollTop = c.scrollTop; // corrects IE, other browsers will ignore
  341.         if(hscroll !== false){
  342. if(el.offsetWidth > c.clientWidth || l < cl){
  343.                 c.scrollLeft = l;
  344.             }else if(r > cr){
  345.                 c.scrollLeft = r - c.clientWidth;
  346.             }
  347.             c.scrollLeft = c.scrollLeft;
  348.         }
  349.         return this;
  350.     },
  351.     // private
  352.     scrollChildIntoView : function(child, hscroll){
  353.         Ext.fly(child, '_scrollChildIntoView').scrollIntoView(this, hscroll);
  354.     },
  355.     
  356.     /**
  357.      * Scrolls this element the specified direction. Does bounds checking to make sure the scroll is
  358.      * within this element's scrollable range.
  359.      * @param {String} direction Possible values are: "l" (or "left"), "r" (or "right"), "t" (or "top", or "up"), "b" (or "bottom", or "down").
  360.      * @param {Number} distance How far to scroll the element in pixels
  361.      * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
  362.      * @return {Boolean} Returns true if a scroll was triggered or false if the element
  363.      * was scrolled as far as it could go.
  364.      */
  365.      scroll : function(direction, distance, animate){
  366.          if(!this.isScrollable()){
  367.              return;
  368.          }
  369.          var el = this.dom,
  370.             l = el.scrollLeft, t = el.scrollTop,
  371.             w = el.scrollWidth, h = el.scrollHeight,
  372.             cw = el.clientWidth, ch = el.clientHeight,
  373.             scrolled = false, v,
  374.             hash = {
  375.                 l: Math.min(l + distance, w-cw),
  376.                 r: v = Math.max(l - distance, 0),
  377.                 t: Math.max(t - distance, 0),
  378.                 b: Math.min(t + distance, h-ch)
  379.             };
  380.             hash.d = hash.b;
  381.             hash.u = hash.t;
  382.             
  383.          direction = direction.substr(0, 1);
  384.          if((v = hash[direction]) > -1){
  385.             scrolled = true;
  386.             this.scrollTo(direction == 'l' || direction == 'r' ? 'left' : 'top', v, this.preanim(arguments, 2));
  387.          }
  388.          return scrolled;
  389.     }
  390. });/**
  391.  * @class Ext.Element
  392.  */
  393. /**
  394.  * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element
  395.  * @static
  396.  * @type Number
  397.  */
  398. Ext.Element.VISIBILITY = 1;
  399. /**
  400.  * Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element
  401.  * @static
  402.  * @type Number
  403.  */
  404. Ext.Element.DISPLAY = 2;
  405. Ext.Element.addMethods(function(){
  406.     var VISIBILITY = "visibility",
  407.         DISPLAY = "display",
  408.         HIDDEN = "hidden",
  409.         NONE = "none",      
  410.         ORIGINALDISPLAY = 'originalDisplay',
  411.         VISMODE = 'visibilityMode',
  412.         ELDISPLAY = Ext.Element.DISPLAY,
  413.         data = Ext.Element.data,
  414.         getDisplay = function(dom){
  415.             var d = data(dom, ORIGINALDISPLAY);
  416.             if(d === undefined){
  417.                 data(dom, ORIGINALDISPLAY, d = '');
  418.             }
  419.             return d;
  420.         },
  421.         getVisMode = function(dom){
  422.             var m = data(dom, VISMODE);
  423.             if(m === undefined){
  424.                 data(dom, VISMODE, m = 1)
  425.             }
  426.             return m;
  427.         };
  428.     
  429.     return {
  430.         /**
  431.          * The element's default display mode  (defaults to "")
  432.          * @type String
  433.          */
  434.         originalDisplay : "",
  435.         visibilityMode : 1,
  436.         
  437.         /**
  438.          * Sets the element's visibility mode. When setVisible() is called it
  439.          * will use this to determine whether to set the visibility or the display property.
  440.          * @param visMode Ext.Element.VISIBILITY or Ext.Element.DISPLAY
  441.          * @return {Ext.Element} this
  442.          */
  443.         setVisibilityMode : function(visMode){  
  444.             data(this.dom, VISMODE, visMode);
  445.             return this;
  446.         },
  447.         
  448.         /**
  449.          * Perform custom animation on this element.
  450.          * <div><ul class="mdetail-params">
  451.          * <li><u>Animation Properties</u></li>
  452.          * 
  453.          * <p>The Animation Control Object enables gradual transitions for any member of an
  454.          * element's style object that takes a numeric value including but not limited to
  455.          * these properties:</p><div><ul class="mdetail-params">
  456.          * <li><tt>bottom, top, left, right</tt></li>
  457.          * <li><tt>height, width</tt></li>
  458.          * <li><tt>margin, padding</tt></li>
  459.          * <li><tt>borderWidth</tt></li>
  460.          * <li><tt>opacity</tt></li>
  461.          * <li><tt>fontSize</tt></li>
  462.          * <li><tt>lineHeight</tt></li>
  463.          * </ul></div>
  464.          * 
  465.          * 
  466.          * <li><u>Animation Property Attributes</u></li>
  467.          * 
  468.          * <p>Each Animation Property is a config object with optional properties:</p>
  469.          * <div><ul class="mdetail-params">
  470.          * <li><tt>by</tt>*  : relative change - start at current value, change by this value</li>
  471.          * <li><tt>from</tt> : ignore current value, start from this value</li>
  472.          * <li><tt>to</tt>*  : start at current value, go to this value</li>
  473.          * <li><tt>unit</tt> : any allowable unit specification</li>
  474.          * <p>* do not specify both <tt>to</tt> and <tt>by</tt> for an animation property</p>
  475.          * </ul></div>
  476.          * 
  477.          * <li><u>Animation Types</u></li>
  478.          * 
  479.          * <p>The supported animation types:</p><div><ul class="mdetail-params">
  480.          * <li><tt>'run'</tt> : Default
  481.          * <pre><code>
  482. var el = Ext.get('complexEl');
  483. el.animate(
  484.     // animation control object
  485.     {
  486.         borderWidth: {to: 3, from: 0},
  487.         opacity: {to: .3, from: 1},
  488.         height: {to: 50, from: el.getHeight()},
  489.         width: {to: 300, from: el.getWidth()},
  490.         top  : {by: - 100, unit: 'px'},
  491.     },
  492.     0.35,      // animation duration
  493.     null,      // callback
  494.     'easeOut', // easing method
  495.     'run'      // animation type ('run','color','motion','scroll')    
  496. );
  497.          * </code></pre>
  498.          * </li>
  499.          * <li><tt>'color'</tt>
  500.          * <p>Animates transition of background, text, or border colors.</p>
  501.          * <pre><code>
  502. el.animate(
  503.     // animation control object
  504.     {
  505.         color: { to: '#06e' },
  506.         backgroundColor: { to: '#e06' }
  507.     },
  508.     0.35,      // animation duration
  509.     null,      // callback
  510.     'easeOut', // easing method
  511.     'color'    // animation type ('run','color','motion','scroll')    
  512. );
  513.          * </code></pre> 
  514.          * </li>
  515.          * 
  516.          * <li><tt>'motion'</tt>
  517.          * <p>Animates the motion of an element to/from specific points using optional bezier
  518.          * way points during transit.</p>
  519.          * <pre><code>
  520. el.animate(
  521.     // animation control object
  522.     {
  523.         borderWidth: {to: 3, from: 0},
  524.         opacity: {to: .3, from: 1},
  525.         height: {to: 50, from: el.getHeight()},
  526.         width: {to: 300, from: el.getWidth()},
  527.         top  : {by: - 100, unit: 'px'},
  528.         points: {
  529.             to: [50, 100],  // go to this point
  530.             control: [      // optional bezier way points
  531.                 [ 600, 800],
  532.                 [-100, 200]
  533.             ]
  534.         }
  535.     },
  536.     3000,      // animation duration (milliseconds!)
  537.     null,      // callback
  538.     'easeOut', // easing method
  539.     'motion'   // animation type ('run','color','motion','scroll')    
  540. );
  541.          * </code></pre> 
  542.          * </li>
  543.          * <li><tt>'scroll'</tt>
  544.          * <p>Animate horizontal or vertical scrolling of an overflowing page element.</p>
  545.          * <pre><code>
  546. el.animate(
  547.     // animation control object
  548.     {
  549.         scroll: {to: [400, 300]}
  550.     },
  551.     0.35,      // animation duration
  552.     null,      // callback
  553.     'easeOut', // easing method
  554.     'scroll'   // animation type ('run','color','motion','scroll')    
  555. );
  556.          * </code></pre> 
  557.          * </li>
  558.          * </ul></div>
  559.          * 
  560.          * </ul></div>
  561.          * 
  562.          * @param {Object} args The animation control args
  563.          * @param {Float} duration (optional) How long the animation lasts in seconds (defaults to <tt>.35</tt>)
  564.          * @param {Function} onComplete (optional) Function to call when animation completes
  565.          * @param {String} easing (optional) {@link Ext.Fx#easing} method to use (defaults to <tt>'easeOut'</tt>)
  566.          * @param {String} animType (optional) <tt>'run'</tt> is the default. Can also be <tt>'color'</tt>,
  567.          * <tt>'motion'</tt>, or <tt>'scroll'</tt>
  568.          * @return {Ext.Element} this
  569.          */
  570.         animate : function(args, duration, onComplete, easing, animType){       
  571.             this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType);
  572.             return this;
  573.         },
  574.     
  575.         /*
  576.          * @private Internal animation call
  577.          */
  578.         anim : function(args, opt, animType, defaultDur, defaultEase, cb){
  579.             animType = animType || 'run';
  580.             opt = opt || {};
  581.             var me = this,              
  582.                 anim = Ext.lib.Anim[animType](
  583.                     me.dom, 
  584.                     args,
  585.                     (opt.duration || defaultDur) || .35,
  586.                     (opt.easing || defaultEase) || 'easeOut',
  587.                     function(){
  588.                         if(cb) cb.call(me);
  589.                         if(opt.callback) opt.callback.call(opt.scope || me, me, opt);
  590.                     },
  591.                     me
  592.                 );
  593.             opt.anim = anim;
  594.             return anim;
  595.         },
  596.     
  597.         // private legacy anim prep
  598.         preanim : function(a, i){
  599.             return !a[i] ? false : (Ext.isObject(a[i]) ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]});
  600.         },
  601.         
  602.         /**
  603.          * Checks whether the element is currently visible using both visibility and display properties.         
  604.          * @return {Boolean} True if the element is currently visible, else false
  605.          */
  606.         isVisible : function() {
  607.             return !this.isStyle(VISIBILITY, HIDDEN) && !this.isStyle(DISPLAY, NONE);
  608.         },
  609.         
  610.         /**
  611.          * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
  612.          * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
  613.          * @param {Boolean} visible Whether the element is visible
  614.          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
  615.          * @return {Ext.Element} this
  616.          */
  617.          setVisible : function(visible, animate){
  618.             var me = this,
  619.                 dom = me.dom,
  620.                 isDisplay = getVisMode(this.dom) == ELDISPLAY;
  621.                 
  622.             if (!animate || !me.anim) {
  623.                 if(isDisplay){
  624.                     me.setDisplayed(visible);
  625.                 }else{
  626.                     me.fixDisplay();
  627.                     dom.style.visibility = visible ? "visible" : HIDDEN;
  628.                 }
  629.             }else{
  630.                 // closure for composites            
  631.                 if(visible){
  632.                     me.setOpacity(.01);
  633.                     me.setVisible(true);
  634.                 }
  635.                 me.anim({opacity: { to: (visible?1:0) }},
  636.                         me.preanim(arguments, 1),
  637.                         null,
  638.                         .35,
  639.                         'easeIn',
  640.                         function(){
  641.                              if(!visible){
  642.                                  dom.style[isDisplay ? DISPLAY : VISIBILITY] = (isDisplay) ? NONE : HIDDEN;                     
  643.                                  Ext.fly(dom).setOpacity(1);
  644.                              }
  645.                         });
  646.             }
  647.             return me;
  648.         },
  649.     
  650.         /**
  651.          * Toggles the element's visibility or display, depending on visibility mode.
  652.          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
  653.          * @return {Ext.Element} this
  654.          */
  655.         toggle : function(animate){
  656.             var me = this;
  657.             me.setVisible(!me.isVisible(), me.preanim(arguments, 0));
  658.             return me;
  659.         },
  660.     
  661.         /**
  662.          * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
  663.          * @param {Mixed} value Boolean value to display the element using its default display, or a string to set the display directly.
  664.          * @return {Ext.Element} this
  665.          */
  666.         setDisplayed : function(value) {            
  667.             if(typeof value == "boolean"){
  668.                value = value ? getDisplay(this.dom) : NONE;
  669.             }
  670.             this.setStyle(DISPLAY, value);
  671.             return this;
  672.         },
  673.         
  674.         // private
  675.         fixDisplay : function(){
  676.             var me = this;
  677.             if(me.isStyle(DISPLAY, NONE)){
  678.                 me.setStyle(VISIBILITY, HIDDEN);
  679.                 me.setStyle(DISPLAY, getDisplay(this.dom)); // first try reverting to default
  680.                 if(me.isStyle(DISPLAY, NONE)){ // if that fails, default to block
  681.                     me.setStyle(DISPLAY, "block");
  682.                 }
  683.             }
  684.         },
  685.     
  686.         /**
  687.          * Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
  688.          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
  689.          * @return {Ext.Element} this
  690.          */
  691.         hide : function(animate){
  692.             this.setVisible(false, this.preanim(arguments, 0));
  693.             return this;
  694.         },
  695.     
  696.         /**
  697.         * Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
  698.         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
  699.          * @return {Ext.Element} this
  700.          */
  701.         show : function(animate){
  702.             this.setVisible(true, this.preanim(arguments, 0));
  703.             return this;
  704.         }
  705.     }
  706. }());/**
  707.  * @class Ext.Element
  708.  */
  709. Ext.Element.addMethods(
  710. function(){
  711.     var VISIBILITY = "visibility",
  712.         DISPLAY = "display",
  713.         HIDDEN = "hidden",
  714.         NONE = "none",
  715.     XMASKED = "x-masked",
  716. XMASKEDRELATIVE = "x-masked-relative",
  717.         data = Ext.Element.data;
  718. return {
  719. /**
  720.      * Checks whether the element is currently visible using both visibility and display properties.
  721.      * @param {Boolean} deep (optional) True to walk the dom and see if parent elements are hidden (defaults to false)
  722.      * @return {Boolean} True if the element is currently visible, else false
  723.      */
  724.     isVisible : function(deep) {
  725.         var vis = !this.isStyle(VISIBILITY,HIDDEN) && !this.isStyle(DISPLAY,NONE),
  726.          p = this.dom.parentNode;
  727.         if(deep !== true || !vis){
  728.             return vis;
  729.         }         
  730.         while(p && !/body/i.test(p.tagName)){
  731.             if(!Ext.fly(p, '_isVisible').isVisible()){
  732.                 return false;
  733.             }
  734.             p = p.parentNode;
  735.         }
  736.         return true;
  737.     },
  738.     
  739.     /**
  740.      * Returns true if display is not "none"
  741.      * @return {Boolean}
  742.      */
  743.     isDisplayed : function() {
  744.         return !this.isStyle(DISPLAY, NONE);
  745.     },
  746.     
  747. /**
  748.      * Convenience method for setVisibilityMode(Element.DISPLAY)
  749.      * @param {String} display (optional) What to set display to when visible
  750.      * @return {Ext.Element} this
  751.      */
  752.     enableDisplayMode : function(display){     
  753.         this.setVisibilityMode(Ext.Element.DISPLAY);
  754.         if(!Ext.isEmpty(display)){
  755.                 data(this.dom, 'originalDisplay', display);
  756.             }
  757.         return this;
  758.     },
  759.     
  760. /**
  761.      * Puts a mask over this element to disable user interaction. Requires core.css.
  762.      * This method can only be applied to elements which accept child nodes.
  763.      * @param {String} msg (optional) A message to display in the mask
  764.      * @param {String} msgCls (optional) A css class to apply to the msg element
  765.      * @return {Element} The mask element
  766.      */
  767.     mask : function(msg, msgCls){
  768.     var me = this,
  769.      dom = me.dom,
  770.      dh = Ext.DomHelper,
  771.      EXTELMASKMSG = "ext-el-mask-msg",
  772.                 el, 
  773.                 mask;
  774.     
  775.         if(me.getStyle("position") == "static"){
  776.             me.addClass(XMASKEDRELATIVE);
  777.         }
  778.         if((el = data(dom, 'maskMsg'))){
  779.             el.remove();
  780.         }
  781.         if((el = data(dom, 'mask'))){
  782.             el.remove();
  783.         }
  784.             mask = dh.append(dom, {cls : "ext-el-mask"}, true);
  785.         data(dom, 'mask', mask);
  786.         me.addClass(XMASKED);
  787.         mask.setDisplayed(true);
  788.         if(typeof msg == 'string'){
  789.                 var mm = dh.append(dom, {cls : EXTELMASKMSG, cn:{tag:'div'}}, true);
  790.                 data(dom, 'maskMsg', mm);
  791.             mm.dom.className = msgCls ? EXTELMASKMSG + " " + msgCls : EXTELMASKMSG;
  792.             mm.dom.firstChild.innerHTML = msg;
  793.             mm.setDisplayed(true);
  794.             mm.center(me);
  795.         }
  796.         if(Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && me.getStyle('height') == 'auto'){ // ie will not expand full height automatically
  797.             mask.setSize(undefined, me.getHeight());
  798.         }
  799.         return mask;
  800.     },
  801.     /**
  802.      * Removes a previously applied mask.
  803.      */
  804.     unmask : function(){
  805.     var me = this,
  806.                 dom = me.dom,
  807.      mask = data(dom, 'mask'),
  808.      maskMsg = data(dom, 'maskMsg');
  809.         if(mask){
  810.             if(maskMsg){
  811.                 maskMsg.remove();
  812.                     data(dom, 'maskMsg', undefined);
  813.             }
  814.             mask.remove();
  815.                 data(dom, 'mask', undefined);
  816.         }
  817.         me.removeClass([XMASKED, XMASKEDRELATIVE]);
  818.     },
  819.     /**
  820.      * Returns true if this element is masked
  821.      * @return {Boolean}
  822.      */
  823.     isMasked : function(){
  824.             var m = data(this.dom, 'mask');
  825.         return m && m.isVisible();
  826.     },
  827.     
  828.     /**
  829.      * Creates an iframe shim for this element to keep selects and other windowed objects from
  830.      * showing through.
  831.      * @return {Ext.Element} The new shim element
  832.      */
  833.     createShim : function(){
  834.         var el = document.createElement('iframe'),        
  835.          shim;
  836.         el.frameBorder = '0';
  837.         el.className = 'ext-shim';
  838.         if(Ext.isIE && Ext.isSecure){
  839.             el.src = Ext.SSL_SECURE_URL;
  840.         }
  841.         shim = Ext.get(this.dom.parentNode.insertBefore(el, this.dom));
  842.         shim.autoBoxAdjust = false;
  843.         return shim;
  844.     }
  845.     };
  846. }());/**
  847.  * @class Ext.Element
  848.  */
  849. Ext.Element.addMethods({
  850.     /**
  851.      * Convenience method for constructing a KeyMap
  852.      * @param {Number/Array/Object/String} key Either a string with the keys to listen for, the numeric key code, array of key codes or an object with the following options:
  853.      *                                  {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
  854.      * @param {Function} fn The function to call
  855.      * @param {Object} scope (optional) The scope of the function
  856.      * @return {Ext.KeyMap} The KeyMap created
  857.      */
  858.     addKeyListener : function(key, fn, scope){
  859.         var config;
  860.         if(!Ext.isObject(key) || Ext.isArray(key)){
  861.             config = {
  862.                 key: key,
  863.                 fn: fn,
  864.                 scope: scope
  865.             };
  866.         }else{
  867.             config = {
  868.                 key : key.key,
  869.                 shift : key.shift,
  870.                 ctrl : key.ctrl,
  871.                 alt : key.alt,
  872.                 fn: fn,
  873.                 scope: scope
  874.             };
  875.         }
  876.         return new Ext.KeyMap(this, config);
  877.     },
  878.     /**
  879.      * Creates a KeyMap for this element
  880.      * @param {Object} config The KeyMap config. See {@link Ext.KeyMap} for more details
  881.      * @return {Ext.KeyMap} The KeyMap created
  882.      */
  883.     addKeyMap : function(config){
  884.         return new Ext.KeyMap(this, config);
  885.     }
  886. });(function(){
  887.     // contants
  888.     var NULL = null,
  889.         UNDEFINED = undefined,
  890.         TRUE = true,
  891.         FALSE = false,
  892.         SETX = "setX",
  893.         SETY = "setY",
  894.         SETXY = "setXY",
  895.         LEFT = "left",
  896.         BOTTOM = "bottom",
  897.         TOP = "top",
  898.         RIGHT = "right",
  899.         HEIGHT = "height",
  900.         WIDTH = "width",
  901.         POINTS = "points",
  902.         HIDDEN = "hidden",
  903.         ABSOLUTE = "absolute",
  904.         VISIBLE = "visible",
  905.         MOTION = "motion",
  906.         POSITION = "position",
  907.         EASEOUT = "easeOut",
  908.         /*
  909.          * Use a light flyweight here since we are using so many callbacks and are always assured a DOM element
  910.          */
  911.         flyEl = new Ext.Element.Flyweight(),
  912.         queues = {},
  913.         getObject = function(o){
  914.             return o || {};
  915.         },
  916.         fly = function(dom){
  917.             flyEl.dom = dom;
  918.             flyEl.id = Ext.id(dom);
  919.             return flyEl;
  920.         },
  921.         /*
  922.          * Queueing now stored outside of the element due to closure issues
  923.          */
  924.         getQueue = function(id){
  925.             if(!queues[id]){
  926.                 queues[id] = [];
  927.             }
  928.             return queues[id];
  929.         },
  930.         setQueue = function(id, value){
  931.             queues[id] = value;
  932.         };
  933.         
  934. //Notifies Element that fx methods are available
  935. Ext.enableFx = TRUE;
  936. /**
  937.  * @class Ext.Fx
  938.  * <p>A class to provide basic animation and visual effects support.  <b>Note:</b> This class is automatically applied
  939.  * to the {@link Ext.Element} interface when included, so all effects calls should be performed via {@link Ext.Element}.
  940.  * Conversely, since the effects are not actually defined in {@link Ext.Element}, Ext.Fx <b>must</b> be
  941.  * {@link Ext#enableFx included} in order for the Element effects to work.</p><br/>
  942.  * 
  943.  * <p><b><u>Method Chaining</u></b></p>
  944.  * <p>It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that
  945.  * they return the Element object itself as the method return value, it is not always possible to mix the two in a single
  946.  * method chain.  The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced.
  947.  * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately.  For this reason,
  948.  * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the
  949.  * expected results and should be done with care.  Also see <tt>{@link #callback}</tt>.</p><br/>
  950.  *
  951.  * <p><b><u>Anchor Options for Motion Effects</u></b></p>
  952.  * <p>Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element
  953.  * that will serve as either the start or end point of the animation.  Following are all of the supported anchor positions:</p>
  954. <pre>
  955. Value  Description
  956. -----  -----------------------------
  957. tl     The top left corner
  958. t      The center of the top edge
  959. tr     The top right corner
  960. l      The center of the left edge
  961. r      The center of the right edge
  962. bl     The bottom left corner
  963. b      The center of the bottom edge
  964. br     The bottom right corner
  965. </pre>
  966.  * <b>Note</b>: some Fx methods accept specific custom config parameters.  The options shown in the Config Options
  967.  * section below are common options that can be passed to any Fx method unless otherwise noted.</b>
  968.  * 
  969.  * @cfg {Function} callback A function called when the effect is finished.  Note that effects are queued internally by the
  970.  * Fx class, so a callback is not required to specify another effect -- effects can simply be chained together
  971.  * and called in sequence (see note for <b><u>Method Chaining</u></b> above), for example:<pre><code>
  972.  * el.slideIn().highlight();
  973.  * </code></pre>
  974.  * The callback is intended for any additional code that should run once a particular effect has completed. The Element
  975.  * being operated upon is passed as the first parameter.
  976.  * 
  977.  * @cfg {Object} scope The scope of the <tt>{@link #callback}</tt> function
  978.  * 
  979.  * @cfg {String} easing A valid Ext.lib.Easing value for the effect:</p><div class="mdetail-params"><ul>
  980.  * <li><b><tt>backBoth</tt></b></li>
  981.  * <li><b><tt>backIn</tt></b></li>
  982.  * <li><b><tt>backOut</tt></b></li>
  983.  * <li><b><tt>bounceBoth</tt></b></li>
  984.  * <li><b><tt>bounceIn</tt></b></li>
  985.  * <li><b><tt>bounceOut</tt></b></li>
  986.  * <li><b><tt>easeBoth</tt></b></li>
  987.  * <li><b><tt>easeBothStrong</tt></b></li>
  988.  * <li><b><tt>easeIn</tt></b></li>
  989.  * <li><b><tt>easeInStrong</tt></b></li>
  990.  * <li><b><tt>easeNone</tt></b></li>
  991.  * <li><b><tt>easeOut</tt></b></li>
  992.  * <li><b><tt>easeOutStrong</tt></b></li>
  993.  * <li><b><tt>elasticBoth</tt></b></li>
  994.  * <li><b><tt>elasticIn</tt></b></li>
  995.  * <li><b><tt>elasticOut</tt></b></li>
  996.  * </ul></div>
  997.  *
  998.  * @cfg {String} afterCls A css class to apply after the effect
  999.  * @cfg {Number} duration The length of time (in seconds) that the effect should last
  1000.  * 
  1001.  * @cfg {Number} endOpacity Only applicable for {@link #fadeIn} or {@link #fadeOut}, a number between
  1002.  * <tt>0</tt> and <tt>1</tt> inclusive to configure the ending opacity value.
  1003.  *  
  1004.  * @cfg {Boolean} remove Whether the Element should be removed from the DOM and destroyed after the effect finishes
  1005.  * @cfg {Boolean} useDisplay Whether to use the <i>display</i> CSS property instead of <i>visibility</i> when hiding Elements (only applies to 
  1006.  * effects that end with the element being visually hidden, ignored otherwise)
  1007.  * @cfg {String/Object/Function} afterStyle A style specification string, e.g. <tt>"width:100px"</tt>, or an object
  1008.  * in the form <tt>{width:"100px"}</tt>, or a function which returns such a specification that will be applied to the
  1009.  * Element after the effect finishes.
  1010.  * @cfg {Boolean} block Whether the effect should block other effects from queueing while it runs
  1011.  * @cfg {Boolean} concurrent Whether to allow subsequently-queued effects to run at the same time as the current effect, or to ensure that they run in sequence
  1012.  * @cfg {Boolean} stopFx Whether preceding effects should be stopped and removed before running current effect (only applies to non blocking effects)
  1013.  */
  1014. Ext.Fx = {
  1015.     
  1016.     // private - calls the function taking arguments from the argHash based on the key.  Returns the return value of the function.
  1017.     //           this is useful for replacing switch statements (for example).
  1018.     switchStatements : function(key, fn, argHash){
  1019.         return fn.apply(this, argHash[key]);
  1020.     },
  1021.     
  1022.     /**
  1023.      * Slides the element into view.  An anchor point can be optionally passed to set the point of
  1024.      * origin for the slide effect.  This function automatically handles wrapping the element with
  1025.      * a fixed-size container if needed.  See the Fx class overview for valid anchor point options.
  1026.      * Usage:
  1027.      *<pre><code>
  1028. // default: slide the element in from the top
  1029. el.slideIn();
  1030. // custom: slide the element in from the right with a 2-second duration
  1031. el.slideIn('r', { duration: 2 });
  1032. // common config options shown with default values
  1033. el.slideIn('t', {
  1034.     easing: 'easeOut',
  1035.     duration: .5
  1036. });
  1037. </code></pre>
  1038.      * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
  1039.      * @param {Object} options (optional) Object literal with any of the Fx config options
  1040.      * @return {Ext.Element} The Element
  1041.      */
  1042.     slideIn : function(anchor, o){ 
  1043.         o = getObject(o);
  1044.         var me = this,
  1045.             dom = me.dom,
  1046.             st = dom.style,
  1047.             xy,
  1048.             r,
  1049.             b,              
  1050.             wrap,               
  1051.             after,
  1052.             st,
  1053.             args, 
  1054.             pt,
  1055.             bw,
  1056.             bh;
  1057.             
  1058.         anchor = anchor || "t";
  1059.         me.queueFx(o, function(){            
  1060.             xy = fly(dom).getXY();
  1061.             // fix display to visibility
  1062.             fly(dom).fixDisplay();            
  1063.             
  1064.             // restore values after effect
  1065.             r = fly(dom).getFxRestore();      
  1066.             b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight};
  1067.             b.right = b.x + b.width;
  1068.             b.bottom = b.y + b.height;
  1069.             
  1070.             // fixed size for slide
  1071.             fly(dom).setWidth(b.width).setHeight(b.height);            
  1072.             
  1073.             // wrap if needed
  1074.             wrap = fly(dom).fxWrap(r.pos, o, HIDDEN);
  1075.             
  1076.             st.visibility = VISIBLE;
  1077.             st.position = ABSOLUTE;
  1078.             
  1079.             // clear out temp styles after slide and unwrap
  1080.             function after(){
  1081.                  fly(dom).fxUnwrap(wrap, r.pos, o);
  1082.                  st.width = r.width;
  1083.                  st.height = r.height;
  1084.                  fly(dom).afterFx(o);
  1085.             }
  1086.             
  1087.             // time to calculate the positions        
  1088.             pt = {to: [b.x, b.y]}; 
  1089.             bw = {to: b.width};
  1090.             bh = {to: b.height};
  1091.                 
  1092.             function argCalc(wrap, style, ww, wh, sXY, sXYval, s1, s2, w, h, p){                    
  1093.                 var ret = {};
  1094.                 fly(wrap).setWidth(ww).setHeight(wh);
  1095.                 if(fly(wrap)[sXY]){
  1096.                     fly(wrap)[sXY](sXYval);                  
  1097.                 }
  1098.                 style[s1] = style[s2] = "0";                    
  1099.                 if(w){
  1100.                     ret.width = w
  1101.                 };
  1102.                 if(h){
  1103.                     ret.height = h;
  1104.                 }
  1105.                 if(p){
  1106.                     ret.points = p;
  1107.                 }
  1108.                 return ret;
  1109.             };
  1110.             args = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, {
  1111.                     t  : [wrap, st, b.width, 0, NULL, NULL, LEFT, BOTTOM, NULL, bh, NULL],
  1112.                     l  : [wrap, st, 0, b.height, NULL, NULL, RIGHT, TOP, bw, NULL, NULL],
  1113.                     r  : [wrap, st, b.width, b.height, SETX, b.right, LEFT, TOP, NULL, NULL, pt],
  1114.                     b  : [wrap, st, b.width, b.height, SETY, b.bottom, LEFT, TOP, NULL, bh, pt],
  1115.                     tl : [wrap, st, 0, 0, NULL, NULL, RIGHT, BOTTOM, bw, bh, pt],
  1116.                     bl : [wrap, st, 0, 0, SETY, b.y + b.height, RIGHT, TOP, bw, bh, pt],
  1117.                     br : [wrap, st, 0, 0, SETXY, [b.right, b.bottom], LEFT, TOP, bw, bh, pt],
  1118.                     tr : [wrap, st, 0, 0, SETX, b.x + b.width, LEFT, BOTTOM, bw, bh, pt]
  1119.                 });
  1120.             
  1121.             st.visibility = VISIBLE;
  1122.             fly(wrap).show();
  1123.             arguments.callee.anim = fly(wrap).fxanim(args,
  1124.                 o,
  1125.                 MOTION,
  1126.                 .5,
  1127.                 EASEOUT, 
  1128.                 after);
  1129.         });
  1130.         return me;
  1131.     },
  1132.     
  1133.     /**
  1134.      * Slides the element out of view.  An anchor point can be optionally passed to set the end point
  1135.      * for the slide effect.  When the effect is completed, the element will be hidden (visibility = 
  1136.      * 'hidden') but block elements will still take up space in the document.  The element must be removed
  1137.      * from the DOM using the 'remove' config option if desired.  This function automatically handles 
  1138.      * wrapping the element with a fixed-size container if needed.  See the Fx class overview for valid anchor point options.
  1139.      * Usage:
  1140.      *<pre><code>
  1141. // default: slide the element out to the top
  1142. el.slideOut();
  1143. // custom: slide the element out to the right with a 2-second duration
  1144. el.slideOut('r', { duration: 2 });
  1145. // common config options shown with default values
  1146. el.slideOut('t', {
  1147.     easing: 'easeOut',
  1148.     duration: .5,
  1149.     remove: false,
  1150.     useDisplay: false
  1151. });
  1152. </code></pre>
  1153.      * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
  1154.      * @param {Object} options (optional) Object literal with any of the Fx config options
  1155.      * @return {Ext.Element} The Element
  1156.      */
  1157.     slideOut : function(anchor, o){
  1158.         o = getObject(o);
  1159.         var me = this,
  1160.             dom = me.dom,
  1161.             st = dom.style,
  1162.             xy = me.getXY(),
  1163.             wrap,
  1164.             r,
  1165.             b,
  1166.             a,
  1167.             zero = {to: 0}; 
  1168.                     
  1169.         anchor = anchor || "t";
  1170.         me.queueFx(o, function(){
  1171.             
  1172.             // restore values after effect
  1173.             r = fly(dom).getFxRestore(); 
  1174.             b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight};
  1175.             b.right = b.x + b.width;
  1176.             b.bottom = b.y + b.height;
  1177.                 
  1178.             // fixed size for slide   
  1179.             fly(dom).setWidth(b.width).setHeight(b.height);
  1180.             // wrap if needed
  1181.             wrap = fly(dom).fxWrap(r.pos, o, VISIBLE);
  1182.                 
  1183.             st.visibility = VISIBLE;
  1184.             st.position = ABSOLUTE;
  1185.             fly(wrap).setWidth(b.width).setHeight(b.height);            
  1186.             function after(){
  1187.                 o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();                
  1188.                 fly(dom).fxUnwrap(wrap, r.pos, o);
  1189.                 st.width = r.width;
  1190.                 st.height = r.height;
  1191.                 fly(dom).afterFx(o);
  1192.             }            
  1193.             
  1194.             function argCalc(style, s1, s2, p1, v1, p2, v2, p3, v3){                    
  1195.                 var ret = {};
  1196.                 
  1197.                 style[s1] = style[s2] = "0";
  1198.                 ret[p1] = v1;               
  1199.                 if(p2){
  1200.                     ret[p2] = v2;               
  1201.                 }
  1202.                 if(p3){
  1203.                     ret[p3] = v3;
  1204.                 }
  1205.                 
  1206.                 return ret;
  1207.             };
  1208.             
  1209.             a = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, {
  1210.                 t  : [st, LEFT, BOTTOM, HEIGHT, zero],
  1211.                 l  : [st, RIGHT, TOP, WIDTH, zero],
  1212.                 r  : [st, LEFT, TOP, WIDTH, zero, POINTS, {to : [b.right, b.y]}],
  1213.                 b  : [st, LEFT, TOP, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}],
  1214.                 tl : [st, RIGHT, BOTTOM, WIDTH, zero, HEIGHT, zero],
  1215.                 bl : [st, RIGHT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}],
  1216.                 br : [st, LEFT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x + b.width, b.bottom]}],
  1217.                 tr : [st, LEFT, BOTTOM, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.right, b.y]}]
  1218.             });
  1219.             
  1220.             arguments.callee.anim = fly(wrap).fxanim(a,
  1221.                 o,
  1222.                 MOTION,
  1223.                 .5,
  1224.                 EASEOUT, 
  1225.                 after);
  1226.         });
  1227.         return me;
  1228.     },
  1229.     /**
  1230.      * Fades the element out while slowly expanding it in all directions.  When the effect is completed, the 
  1231.      * element will be hidden (visibility = 'hidden') but block elements will still take up space in the document. 
  1232.      * The element must be removed from the DOM using the 'remove' config option if desired.
  1233.      * Usage:
  1234.      *<pre><code>
  1235. // default
  1236. el.puff();
  1237. // common config options shown with default values
  1238. el.puff({
  1239.     easing: 'easeOut',
  1240.     duration: .5,
  1241.     remove: false,
  1242.     useDisplay: false
  1243. });
  1244. </code></pre>
  1245.      * @param {Object} options (optional) Object literal with any of the Fx config options
  1246.      * @return {Ext.Element} The Element
  1247.      */
  1248.     puff : function(o){
  1249.         o = getObject(o);
  1250.         var me = this,
  1251.             dom = me.dom,
  1252.             st = dom.style,
  1253.             width,
  1254.             height,
  1255.             r;
  1256.         me.queueFx(o, function(){
  1257.             width = fly(dom).getWidth();
  1258.             height = fly(dom).getHeight();
  1259.             fly(dom).clearOpacity();
  1260.             fly(dom).show();
  1261.             // restore values after effect
  1262.             r = fly(dom).getFxRestore();                   
  1263.             
  1264.             function after(){
  1265.                 o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();                  
  1266.                 fly(dom).clearOpacity();  
  1267.                 fly(dom).setPositioning(r.pos);
  1268.                 st.width = r.width;
  1269.                 st.height = r.height;
  1270.                 st.fontSize = '';
  1271.                 fly(dom).afterFx(o);
  1272.             }   
  1273.             arguments.callee.anim = fly(dom).fxanim({
  1274.                     width : {to : fly(dom).adjustWidth(width * 2)},
  1275.                     height : {to : fly(dom).adjustHeight(height * 2)},
  1276.                     points : {by : [-width * .5, -height * .5]},
  1277.                     opacity : {to : 0},
  1278.                     fontSize: {to : 200, unit: "%"}
  1279.                 },
  1280.                 o,
  1281.                 MOTION,
  1282.                 .5,
  1283.                 EASEOUT,
  1284.                  after);
  1285.         });
  1286.         return me;
  1287.     },
  1288.     /**
  1289.      * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
  1290.      * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still 
  1291.      * take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.
  1292.      * Usage:
  1293.      *<pre><code>
  1294. // default
  1295. el.switchOff();
  1296. // all config options shown with default values
  1297. el.switchOff({
  1298.     easing: 'easeIn',
  1299.     duration: .3,
  1300.     remove: false,
  1301.     useDisplay: false
  1302. });
  1303. </code></pre>
  1304.      * @param {Object} options (optional) Object literal with any of the Fx config options
  1305.      * @return {Ext.Element} The Element
  1306.      */
  1307.     switchOff : function(o){
  1308.         o = getObject(o);
  1309.         var me = this,
  1310.             dom = me.dom,
  1311.             st = dom.style,
  1312.             r;
  1313.         me.queueFx(o, function(){
  1314.             fly(dom).clearOpacity();
  1315.             fly(dom).clip();
  1316.             // restore values after effect
  1317.             r = fly(dom).getFxRestore();
  1318.                 
  1319.             function after(){
  1320.                 o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();  
  1321.                 fly(dom).clearOpacity();
  1322.                 fly(dom).setPositioning(r.pos);
  1323.                 st.width = r.width;
  1324.                 st.height = r.height;   
  1325.                 fly(dom).afterFx(o);
  1326.             };
  1327.             fly(dom).fxanim({opacity : {to : 0.3}}, 
  1328.                 NULL, 
  1329.                 NULL, 
  1330.                 .1, 
  1331.                 NULL, 
  1332.                 function(){                                 
  1333.                     fly(dom).clearOpacity();
  1334.                         (function(){                            
  1335.                             fly(dom).fxanim({
  1336.                                 height : {to : 1},
  1337.                                 points : {by : [0, fly(dom).getHeight() * .5]}
  1338.                             }, 
  1339.                             o, 
  1340.                             MOTION, 
  1341.                             0.3, 
  1342.                             'easeIn', 
  1343.                             after);
  1344.                         }).defer(100);
  1345.                 });
  1346.         });
  1347.         return me;
  1348.     },
  1349.     /**
  1350.      * Highlights the Element by setting a color (applies to the background-color by default, but can be
  1351.      * changed using the "attr" config option) and then fading back to the original color. If no original
  1352.      * color is available, you should provide the "endColor" config option which will be cleared after the animation.
  1353.      * Usage:
  1354. <pre><code>
  1355. // default: highlight background to yellow
  1356. el.highlight();
  1357. // custom: highlight foreground text to blue for 2 seconds
  1358. el.highlight("0000ff", { attr: 'color', duration: 2 });
  1359. // common config options shown with default values
  1360. el.highlight("ffff9c", {
  1361.     attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
  1362.     endColor: (current color) or "ffffff",
  1363.     easing: 'easeIn',
  1364.     duration: 1
  1365. });
  1366. </code></pre>
  1367.      * @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')
  1368.      * @param {Object} options (optional) Object literal with any of the Fx config options
  1369.      * @return {Ext.Element} The Element
  1370.      */ 
  1371.     highlight : function(color, o){
  1372.         o = getObject(o);
  1373.         var me = this,
  1374.             dom = me.dom,
  1375.             attr = o.attr || "backgroundColor",
  1376.             a = {},
  1377.             restore;
  1378.         me.queueFx(o, function(){
  1379.             fly(dom).clearOpacity();
  1380.             fly(dom).show();
  1381.             function after(){
  1382.                 dom.style[attr] = restore;
  1383.                 fly(dom).afterFx(o);
  1384.             }            
  1385.             restore = dom.style[attr];
  1386.             a[attr] = {from: color || "ffff9c", to: o.endColor || fly(dom).getColor(attr) || "ffffff"};
  1387.             arguments.callee.anim = fly(dom).fxanim(a,
  1388.                 o,
  1389.                 'color',
  1390.                 1,
  1391.                 'easeIn', 
  1392.                 after);
  1393.         });
  1394.         return me;
  1395.     },
  1396.    /**
  1397.     * Shows a ripple of exploding, attenuating borders to draw attention to an Element.
  1398.     * Usage:
  1399. <pre><code>
  1400. // default: a single light blue ripple
  1401. el.frame();
  1402. // custom: 3 red ripples lasting 3 seconds total
  1403. el.frame("ff0000", 3, { duration: 3 });
  1404. // common config options shown with default values
  1405. el.frame("C3DAF9", 1, {
  1406.     duration: 1 //duration of each individual ripple.
  1407.     // Note: Easing is not configurable and will be ignored if included
  1408. });
  1409. </code></pre>
  1410.     * @param {String} color (optional) The color of the border.  Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').
  1411.     * @param {Number} count (optional) The number of ripples to display (defaults to 1)
  1412.     * @param {Object} options (optional) Object literal with any of the Fx config options
  1413.     * @return {Ext.Element} The Element
  1414.     */
  1415.     frame : function(color, count, o){
  1416.         o = getObject(o);
  1417.         var me = this,
  1418.             dom = me.dom,
  1419.             proxy,
  1420.             active;
  1421.         me.queueFx(o, function(){
  1422.             color = color || "#C3DAF9"
  1423.             if(color.length == 6){
  1424.                 color = "#" + color;
  1425.             }            
  1426.             count = count || 1;
  1427.             fly(dom).show();
  1428.             var xy = fly(dom).getXY(),
  1429.                 b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight},
  1430.                 queue = function(){
  1431.                     proxy = fly(document.body || document.documentElement).createChild({
  1432.                         style:{
  1433.                             visbility: HIDDEN,
  1434.                             position : ABSOLUTE,
  1435.                             "z-index": 35000, // yee haw
  1436.                             border : "0px solid " + color
  1437.                         }
  1438.                     });
  1439.                     return proxy.queueFx({}, animFn);
  1440.                 };
  1441.             
  1442.             
  1443.             arguments.callee.anim = {
  1444.                 isAnimated: true,
  1445.                 stop: function() {
  1446.                     count = 0;
  1447.                     proxy.stopFx();
  1448.                 }
  1449.             };
  1450.             
  1451.             function animFn(){
  1452.                 var scale = Ext.isBorderBox ? 2 : 1;
  1453.                 active = proxy.anim({
  1454.                     top : {from : b.y, to : b.y - 20},
  1455.                     left : {from : b.x, to : b.x - 20},
  1456.                     borderWidth : {from : 0, to : 10},
  1457.                     opacity : {from : 1, to : 0},
  1458.                     height : {from : b.height, to : b.height + 20 * scale},
  1459.                     width : {from : b.width, to : b.width + 20 * scale}
  1460.                 },{
  1461.                     duration: o.duration || 1,
  1462.                     callback: function() {
  1463.                         proxy.remove();
  1464.                         --count > 0 ? queue() : fly(dom).afterFx(o);
  1465.                     }
  1466.                 });
  1467.                 arguments.callee.anim = {
  1468.                     isAnimated: true,
  1469.                     stop: function(){
  1470.                         active.stop();
  1471.                     }
  1472.                 };
  1473.             };
  1474.             queue();
  1475.         });
  1476.         return me;
  1477.     },
  1478.    /**
  1479.     * Creates a pause before any subsequent queued effects begin.  If there are
  1480.     * no effects queued after the pause it will have no effect.
  1481.     * Usage:
  1482. <pre><code>
  1483. el.pause(1);
  1484. </code></pre>
  1485.     * @param {Number} seconds The length of time to pause (in seconds)
  1486.     * @return {Ext.Element} The Element
  1487.     */
  1488.     pause : function(seconds){        
  1489.         var dom = this.dom,
  1490.             t;
  1491.         this.queueFx({}, function(){
  1492.             t = setTimeout(function(){
  1493.                 fly(dom).afterFx({});
  1494.             }, seconds * 1000);
  1495.             arguments.callee.anim = {
  1496.                 isAnimated: true,
  1497.                 stop: function(){
  1498.                     clearTimeout(t);
  1499.                     fly(dom).afterFx({});
  1500.                 }
  1501.             };
  1502.         });
  1503.         return this;
  1504.     },
  1505.    /**
  1506.     * Fade an element in (from transparent to opaque).  The ending opacity can be specified
  1507.     * using the <tt>{@link #endOpacity}</tt> config option.
  1508.     * Usage:
  1509. <pre><code>
  1510. // default: fade in from opacity 0 to 100%
  1511. el.fadeIn();
  1512. // custom: fade in from opacity 0 to 75% over 2 seconds
  1513. el.fadeIn({ endOpacity: .75, duration: 2});
  1514. // common config options shown with default values
  1515. el.fadeIn({
  1516.     endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
  1517.     easing: 'easeOut',
  1518.     duration: .5
  1519. });
  1520. </code></pre>
  1521.     * @param {Object} options (optional) Object literal with any of the Fx config options
  1522.     * @return {Ext.Element} The Element
  1523.     */
  1524.     fadeIn : function(o){
  1525.         o = getObject(o);
  1526.         var me = this,
  1527.             dom = me.dom,
  1528.             to = o.endOpacity || 1;
  1529.         
  1530.         me.queueFx(o, function(){
  1531.             fly(dom).setOpacity(0);
  1532.             fly(dom).fixDisplay();
  1533.             dom.style.visibility = VISIBLE;
  1534.             arguments.callee.anim = fly(dom).fxanim({opacity:{to:to}},
  1535.                 o, NULL, .5, EASEOUT, function(){
  1536.                 if(to == 1){
  1537.                     fly(dom).clearOpacity();
  1538.                 }
  1539.                 fly(dom).afterFx(o);
  1540.             });
  1541.         });
  1542.         return me;
  1543.     },
  1544.    /**
  1545.     * Fade an element out (from opaque to transparent).  The ending opacity can be specified
  1546.     * using the <tt>{@link #endOpacity}</tt> config option.  Note that IE may require
  1547.     * <tt>{@link #useDisplay}:true</tt> in order to redisplay correctly.
  1548.     * Usage:
  1549. <pre><code>
  1550. // default: fade out from the element's current opacity to 0
  1551. el.fadeOut();
  1552. // custom: fade out from the element's current opacity to 25% over 2 seconds
  1553. el.fadeOut({ endOpacity: .25, duration: 2});
  1554. // common config options shown with default values
  1555. el.fadeOut({
  1556.     endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
  1557.     easing: 'easeOut',
  1558.     duration: .5,
  1559.     remove: false,
  1560.     useDisplay: false
  1561. });
  1562. </code></pre>
  1563.     * @param {Object} options (optional) Object literal with any of the Fx config options
  1564.     * @return {Ext.Element} The Element
  1565.     */
  1566.     fadeOut : function(o){
  1567.         o = getObject(o);
  1568.         var me = this,
  1569.             dom = me.dom,
  1570.             style = dom.style,
  1571.             to = o.endOpacity || 0;         
  1572.         
  1573.         me.queueFx(o, function(){  
  1574.             arguments.callee.anim = fly(dom).fxanim({ 
  1575.                 opacity : {to : to}},
  1576.                 o, 
  1577.                 NULL, 
  1578.                 .5, 
  1579.                 EASEOUT, 
  1580.                 function(){
  1581.                     if(to == 0){
  1582.                         Ext.Element.data(dom, 'visibilityMode') == Ext.Element.DISPLAY || o.useDisplay ? 
  1583.                             style.display = "none" :
  1584.                             style.visibility = HIDDEN;
  1585.                             
  1586.                         fly(dom).clearOpacity();
  1587.                     }
  1588.                     fly(dom).afterFx(o);
  1589.             });
  1590.         });
  1591.         return me;
  1592.     },
  1593.    /**
  1594.     * Animates the transition of an element's dimensions from a starting height/width
  1595.     * to an ending height/width.  This method is a convenience implementation of {@link shift}.
  1596.     * Usage:
  1597. <pre><code>
  1598. // change height and width to 100x100 pixels
  1599. el.scale(100, 100);
  1600. // common config options shown with default values.  The height and width will default to
  1601. // the element&#39;s existing values if passed as null.
  1602. el.scale(
  1603.     [element&#39;s width],
  1604.     [element&#39;s height], {
  1605.         easing: 'easeOut',
  1606.         duration: .35
  1607.     }
  1608. );
  1609. </code></pre>
  1610.     * @param {Number} width  The new width (pass undefined to keep the original width)
  1611.     * @param {Number} height  The new height (pass undefined to keep the original height)
  1612.     * @param {Object} options (optional) Object literal with any of the Fx config options
  1613.     * @return {Ext.Element} The Element
  1614.     */
  1615.     scale : function(w, h, o){
  1616.         this.shift(Ext.apply({}, o, {
  1617.             width: w,
  1618.             height: h
  1619.         }));
  1620.         return this;
  1621.     },
  1622.    /**
  1623.     * Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
  1624.     * Any of these properties not specified in the config object will not be changed.  This effect 
  1625.     * requires that at least one new dimension, position or opacity setting must be passed in on
  1626.     * the config object in order for the function to have any effect.
  1627.     * Usage:
  1628. <pre><code>
  1629. // slide the element horizontally to x position 200 while changing the height and opacity
  1630. el.shift({ x: 200, height: 50, opacity: .8 });
  1631. // common config options shown with default values.
  1632. el.shift({
  1633.     width: [element&#39;s width],
  1634.     height: [element&#39;s height],
  1635.     x: [element&#39;s x position],
  1636.     y: [element&#39;s y position],
  1637.     opacity: [element&#39;s opacity],
  1638.     easing: 'easeOut',
  1639.     duration: .35
  1640. });
  1641. </code></pre>
  1642.     * @param {Object} options  Object literal with any of the Fx config options
  1643.     * @return {Ext.Element} The Element
  1644.     */
  1645.     shift : function(o){
  1646.         o = getObject(o);
  1647.         var dom = this.dom,
  1648.             a = {};
  1649.                 
  1650.         this.queueFx(o, function(){
  1651.             for (var prop in o) {
  1652.                 if (o[prop] != UNDEFINED) {                                                 
  1653.                     a[prop] = {to : o[prop]};                   
  1654.                 }
  1655.             } 
  1656.             
  1657.             a.width ? a.width.to = fly(dom).adjustWidth(o.width) : a;
  1658.             a.height ? a.height.to = fly(dom).adjustWidth(o.height) : a;   
  1659.             
  1660.             if (a.x || a.y || a.xy) {
  1661.                 a.points = a.xy || 
  1662.                            {to : [ a.x ? a.x.to : fly(dom).getX(),
  1663.                                    a.y ? a.y.to : fly(dom).getY()]};                  
  1664.             }
  1665.             arguments.callee.anim = fly(dom).fxanim(a,
  1666.                 o, 
  1667.                 MOTION, 
  1668.                 .35, 
  1669.                 EASEOUT, 
  1670.                 function(){
  1671.                     fly(dom).afterFx(o);
  1672.                 });
  1673.         });
  1674.         return this;
  1675.     },
  1676.     /**
  1677.      * Slides the element while fading it out of view.  An anchor point can be optionally passed to set the 
  1678.      * ending point of the effect.
  1679.      * Usage:
  1680.      *<pre><code>
  1681. // default: slide the element downward while fading out
  1682. el.ghost();
  1683. // custom: slide the element out to the right with a 2-second duration
  1684. el.ghost('r', { duration: 2 });
  1685. // common config options shown with default values
  1686. el.ghost('b', {
  1687.     easing: 'easeOut',
  1688.     duration: .5,
  1689.     remove: false,
  1690.     useDisplay: false
  1691. });
  1692. </code></pre>
  1693.      * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to bottom: 'b')
  1694.      * @param {Object} options (optional) Object literal with any of the Fx config options
  1695.      * @return {Ext.Element} The Element
  1696.      */
  1697.     ghost : function(anchor, o){
  1698.         o = getObject(o);
  1699.         var me = this,
  1700.             dom = me.dom,
  1701.             st = dom.style,
  1702.             a = {opacity: {to: 0}, points: {}},
  1703.             pt = a.points,
  1704.             r,
  1705.             w,
  1706.             h;
  1707.             
  1708.         anchor = anchor || "b";
  1709.         me.queueFx(o, function(){
  1710.             // restore values after effect
  1711.             r = fly(dom).getFxRestore();
  1712.             w = fly(dom).getWidth();
  1713.             h = fly(dom).getHeight();
  1714.             
  1715.             function after(){
  1716.                 o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();   
  1717.                 fly(dom).clearOpacity();
  1718.                 fly(dom).setPositioning(r.pos);
  1719.                 st.width = r.width;
  1720.                 st.height = r.height;
  1721.                 fly(dom).afterFx(o);
  1722.             }
  1723.                 
  1724.             pt.by = fly(dom).switchStatements(anchor.toLowerCase(), function(v1,v2){ return [v1, v2];}, {
  1725.                t  : [0, -h],
  1726.                l  : [-w, 0],
  1727.                r  : [w, 0],
  1728.                b  : [0, h],
  1729.                tl : [-w, -h],
  1730.                bl : [-w, h],
  1731.                br : [w, h],
  1732.                tr : [w, -h] 
  1733.             });
  1734.                 
  1735.             arguments.callee.anim = fly(dom).fxanim(a,
  1736.                 o,
  1737.                 MOTION,
  1738.                 .5,
  1739.                 EASEOUT, after);
  1740.         });
  1741.         return me;
  1742.     },
  1743.     /**
  1744.      * Ensures that all effects queued after syncFx is called on the element are
  1745.      * run concurrently.  This is the opposite of {@link #sequenceFx}.
  1746.      * @return {Ext.Element} The Element
  1747.      */
  1748.     syncFx : function(){
  1749.         var me = this;
  1750.         me.fxDefaults = Ext.apply(me.fxDefaults || {}, {
  1751.             block : FALSE,
  1752.             concurrent : TRUE,
  1753.             stopFx : FALSE
  1754.         });
  1755.         return me;
  1756.     },
  1757.     /**
  1758.      * Ensures that all effects queued after sequenceFx is called on the element are
  1759.      * run in sequence.  This is the opposite of {@link #syncFx}.
  1760.      * @return {Ext.Element} The Element
  1761.      */
  1762.     sequenceFx : function(){
  1763.         var me = this;
  1764.         me.fxDefaults = Ext.apply(me.fxDefaults || {}, {
  1765.             block : FALSE,
  1766.             concurrent : FALSE,
  1767.             stopFx : FALSE
  1768.         });
  1769.         return me;
  1770.     },
  1771.     /* @private */
  1772.     nextFx : function(){        
  1773.         var ef = getQueue(this.dom.id)[0];
  1774.         if(ef){
  1775.             ef.call(this);
  1776.         }
  1777.     },
  1778.     /**
  1779.      * Returns true if the element has any effects actively running or queued, else returns false.
  1780.      * @return {Boolean} True if element has active effects, else false
  1781.      */
  1782.     hasActiveFx : function(){
  1783.         return getQueue(this.dom.id)[0];
  1784.     },
  1785.     /**
  1786.      * Stops any running effects and clears the element's internal effects queue if it contains
  1787.      * any additional effects that haven't started yet.
  1788.      * @return {Ext.Element} The Element
  1789.      */
  1790.     stopFx : function(finish){
  1791.         var me = this,
  1792.             id = me.dom.id;
  1793.         if(me.hasActiveFx()){
  1794.             var cur = getQueue(id)[0];
  1795.             if(cur && cur.anim){
  1796.                 if(cur.anim.isAnimated){
  1797.                     setQueue(id, [cur]); //clear
  1798.                     cur.anim.stop(finish !== undefined ? finish : TRUE);
  1799.                 }else{
  1800.                     setQueue(id, []);
  1801.                 }
  1802.             }
  1803.         }
  1804.         return me;
  1805.     },
  1806.     /* @private */
  1807.     beforeFx : function(o){
  1808.         if(this.hasActiveFx() && !o.concurrent){
  1809.            if(o.stopFx){
  1810.                this.stopFx();
  1811.                return TRUE;
  1812.            }
  1813.            return FALSE;
  1814.         }
  1815.         return TRUE;
  1816.     },
  1817.     /**
  1818.      * Returns true if the element is currently blocking so that no other effect can be queued
  1819.      * until this effect is finished, else returns false if blocking is not set.  This is commonly
  1820.      * used to ensure that an effect initiated by a user action runs to completion prior to the
  1821.      * same effect being restarted (e.g., firing only one effect even if the user clicks several times).
  1822.      * @return {Boolean} True if blocking, else false
  1823.      */
  1824.     hasFxBlock : function(){
  1825.         var q = getQueue(this.dom.id);
  1826.         return q && q[0] && q[0].block;
  1827.     },
  1828.     /* @private */
  1829.     queueFx : function(o, fn){
  1830.         var me = this;
  1831.         if(!me.hasFxBlock()){
  1832.             Ext.applyIf(o, me.fxDefaults);
  1833.             if(!o.concurrent){
  1834.                 var run = me.beforeFx(o);
  1835.                 fn.block = o.block;
  1836.                 getQueue(me.dom.id).push(fn);
  1837.                 if(run){
  1838.                     me.nextFx();
  1839.                 }
  1840.             }else{
  1841.                 fn.call(me);
  1842.             }
  1843.         }
  1844.         return me;
  1845.     },
  1846.     /* @private */
  1847.     fxWrap : function(pos, o, vis){ 
  1848.         var dom = this.dom,
  1849.             wrap,
  1850.             wrapXY;
  1851.         if(!o.wrap || !(wrap = Ext.getDom(o.wrap))){            
  1852.             if(o.fixPosition){
  1853.                 wrapXY = fly(dom).getXY();
  1854.             }
  1855.             var div = document.createElement("div");
  1856.             div.style.visibility = vis;
  1857.             wrap = dom.parentNode.insertBefore(div, dom);
  1858.             fly(wrap).setPositioning(pos);
  1859.             if(fly(wrap).isStyle(POSITION, "static")){
  1860.                 fly(wrap).position("relative");
  1861.             }
  1862.             fly(dom).clearPositioning('auto');
  1863.             fly(wrap).clip();
  1864.             wrap.appendChild(dom);
  1865.             if(wrapXY){
  1866.                 fly(wrap).setXY(wrapXY);
  1867.             }
  1868.         }
  1869.         return wrap;
  1870.     },
  1871.     /* @private */
  1872.     fxUnwrap : function(wrap, pos, o){      
  1873.         var dom = this.dom;
  1874.         fly(dom).clearPositioning();
  1875.         fly(dom).setPositioning(pos);
  1876.         if(!o.wrap){
  1877.             wrap.parentNode.insertBefore(dom, wrap);
  1878.             fly(wrap).remove();
  1879.         }
  1880.     },
  1881.     /* @private */
  1882.     getFxRestore : function(){
  1883.         var st = this.dom.style;
  1884.         return {pos: this.getPositioning(), width: st.width, height : st.height};
  1885.     },
  1886.     /* @private */
  1887.     afterFx : function(o){
  1888.         var dom = this.dom,
  1889.             id = dom.id,
  1890.             notConcurrent = !o.concurrent;
  1891.         if(o.afterStyle){
  1892.             fly(dom).setStyle(o.afterStyle);            
  1893.         }
  1894.         if(o.afterCls){
  1895.             fly(dom).addClass(o.afterCls);
  1896.         }
  1897.         if(o.remove == TRUE){
  1898.             fly(dom).remove();
  1899.         }
  1900.         if(notConcurrent){
  1901.             getQueue(id).shift();
  1902.         }
  1903.         if(o.callback){
  1904.             o.callback.call(o.scope, fly(dom));
  1905.         }
  1906.         if(notConcurrent){
  1907.             fly(dom).nextFx();
  1908.         }
  1909.     },
  1910.     /* @private */
  1911.     fxanim : function(args, opt, animType, defaultDur, defaultEase, cb){
  1912.         animType = animType || 'run';
  1913.         opt = opt || {};
  1914.         var anim = Ext.lib.Anim[animType](
  1915.                 this.dom, 
  1916.                 args,
  1917.                 (opt.duration || defaultDur) || .35,
  1918.                 (opt.easing || defaultEase) || EASEOUT,
  1919.                 cb,            
  1920.                 this
  1921.             );
  1922.         opt.anim = anim;
  1923.         return anim;
  1924.     }
  1925. };
  1926. // backwards compat
  1927. Ext.Fx.resize = Ext.Fx.scale;
  1928. //When included, Ext.Fx is automatically applied to Element so that all basic
  1929. //effects are available directly via the Element API
  1930. Ext.Element.addMethods(Ext.Fx);
  1931. })();/**
  1932.  * @class Ext.CompositeElementLite
  1933.  * Flyweight composite class. Reuses the same Ext.Element for element operations.
  1934.  <pre><code>
  1935.  var els = Ext.select("#some-el div.some-class");
  1936.  // or select directly from an existing element
  1937.  var el = Ext.get('some-el');
  1938.  el.select('div.some-class');
  1939.  els.setWidth(100); // all elements become 100 width
  1940.  els.hide(true); // all elements fade out and hide
  1941.  // or
  1942.  els.setWidth(100).hide(true);
  1943.  </code></pre><br><br>
  1944.  * <b>NOTE: Although they are not listed, this class supports all of the set/update methods of Ext.Element. All Ext.Element
  1945.  * actions will be performed on all the elements in this collection.</b>
  1946.  */
  1947. Ext.CompositeElementLite = function(els, root){
  1948.     this.elements = [];
  1949.     this.add(els, root);
  1950.     this.el = new Ext.Element.Flyweight();
  1951. };
  1952. Ext.CompositeElementLite.prototype = {
  1953. isComposite: true,
  1954. /**
  1955.      * Returns the number of elements in this composite
  1956.      * @return Number
  1957.      */
  1958.     getCount : function(){
  1959.         return this.elements.length;
  1960.     },    
  1961. add : function(els){
  1962.         if(els){
  1963.             if (Ext.isArray(els)) {
  1964.                 this.elements = this.elements.concat(els);
  1965.             } else {
  1966.                 var yels = this.elements;                                 
  1967.             Ext.each(els, function(e) {
  1968.                     yels.push(e);
  1969.                 });
  1970.             }
  1971.         }
  1972.         return this;
  1973.     },
  1974.     invoke : function(fn, args){
  1975.         var els = this.elements,
  1976.          el = this.el;        
  1977.     Ext.each(els, function(e) {    
  1978.             el.dom = e;
  1979.          Ext.Element.prototype[fn].apply(el, args);
  1980.         });
  1981.         return this;
  1982.     },
  1983.     /**
  1984.      * Returns a flyweight Element of the dom element object at the specified index
  1985.      * @param {Number} index
  1986.      * @return {Ext.Element}
  1987.      */
  1988.     item : function(index){
  1989.     var me = this;
  1990.         if(!me.elements[index]){
  1991.             return null;
  1992.         }
  1993.         me.el.dom = me.elements[index];
  1994.         return me.el;
  1995.     },
  1996.     // fixes scope with flyweight
  1997.     addListener : function(eventName, handler, scope, opt){
  1998.         Ext.each(this.elements, function(e) {
  1999.         Ext.EventManager.on(e, eventName, handler, scope || e, opt);
  2000.         });
  2001.         return this;
  2002.     },
  2003.     /**
  2004.     * Calls the passed function passing (el, this, index) for each element in this composite. <b>The element
  2005.     * passed is the flyweight (shared) Ext.Element instance, so if you require a
  2006.     * a reference to the dom node, use el.dom.</b>
  2007.     * @param {Function} fn The function to call
  2008.     * @param {Object} scope (optional) The <i>this</i> object (defaults to the element)
  2009.     * @return {CompositeElement} this
  2010.     */
  2011.     each : function(fn, scope){       
  2012.         var me = this,
  2013.          el = me.el;
  2014.        
  2015.     Ext.each(me.elements, function(e,i) {    
  2016.             el.dom = e;
  2017.          return fn.call(scope || el, el, me, i);
  2018.         });
  2019.         return me;
  2020.     },
  2021.     
  2022.     /**
  2023.      * Find the index of the passed element within the composite collection.
  2024.      * @param el {Mixed} The id of an element, or an Ext.Element, or an HtmlElement to find within the composite collection.
  2025.      * @return Number The index of the passed Ext.Element in the composite collection, or -1 if not found.
  2026.      */
  2027.     indexOf : function(el){
  2028.         return this.elements.indexOf(Ext.getDom(el));
  2029.     },
  2030.     
  2031.     /**
  2032.     * Replaces the specified element with the passed element.
  2033.     * @param {Mixed} el The id of an element, the Element itself, the index of the element in this composite
  2034.     * to replace.
  2035.     * @param {Mixed} replacement The id of an element or the Element itself.
  2036.     * @param {Boolean} domReplace (Optional) True to remove and replace the element in the document too.
  2037.     * @return {CompositeElement} this
  2038.     */    
  2039.     replaceElement : function(el, replacement, domReplace){
  2040.         var index = !isNaN(el) ? el : this.indexOf(el),
  2041.          d;
  2042.         if(index > -1){
  2043.             replacement = Ext.getDom(replacement);
  2044.             if(domReplace){
  2045.                 d = this.elements[index];
  2046.                 d.parentNode.insertBefore(replacement, d);
  2047.                 Ext.removeNode(d);
  2048.             }
  2049.             this.elements.splice(index, 1, replacement);
  2050.         }
  2051.         return this;
  2052.     },
  2053.     
  2054.     /**
  2055.      * Removes all elements.
  2056.      */
  2057.     clear : function(){
  2058.         this.elements = [];
  2059.     }
  2060. };
  2061. Ext.CompositeElementLite.prototype.on = Ext.CompositeElementLite.prototype.addListener;
  2062. (function(){
  2063. var fnName,
  2064. ElProto = Ext.Element.prototype,
  2065. CelProto = Ext.CompositeElementLite.prototype;
  2066. for(fnName in ElProto){
  2067.     if(Ext.isFunction(ElProto[fnName])){
  2068.     (function(fnName){ 
  2069.     CelProto[fnName] = CelProto[fnName] || function(){
  2070.      return this.invoke(fnName, arguments);
  2071.      };
  2072.      }).call(CelProto, fnName);
  2073.         
  2074.     }
  2075. }
  2076. })();
  2077. if(Ext.DomQuery){
  2078.     Ext.Element.selectorFunction = Ext.DomQuery.select;
  2079. /**
  2080.  * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
  2081.  * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or
  2082.  * {@link Ext.CompositeElementLite CompositeElementLite} object.
  2083.  * @param {String/Array} selector The CSS selector or an array of elements
  2084.  * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object) <b>Not supported in core</b>
  2085.  * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
  2086.  * @return {CompositeElementLite/CompositeElement}
  2087.  * @member Ext.Element
  2088.  * @method select
  2089.  */
  2090. Ext.Element.select = function(selector, unique, root){
  2091.     var els;
  2092.     if(typeof selector == "string"){
  2093.         els = Ext.Element.selectorFunction(selector, root);
  2094.     }else if(selector.length !== undefined){
  2095.         els = selector;
  2096.     }else{
  2097.         throw "Invalid selector";
  2098.     }
  2099.     return new Ext.CompositeElementLite(els);
  2100. };
  2101. /**
  2102.  * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
  2103.  * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or
  2104.  * {@link Ext.CompositeElementLite CompositeElementLite} object.