X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6a7e4474cba9d8be4b2ec445e10f1691f7277c50..3789b528d8dd8aad4558e38e22d775bcab1cbd36:/docs/source/Element.fx.html diff --git a/docs/source/Element.fx.html b/docs/source/Element.fx.html index 9a7e1240..5d1fdcb5 100644 --- a/docs/source/Element.fx.html +++ b/docs/source/Element.fx.html @@ -1,43 +1,68 @@ + - + The source code - - + + + + - -
/*!
- * Ext JS Library 3.2.0
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
+
+  
/**
+ * @class Ext.core.Element
  */
-/**
- * @class Ext.Element
+/**
+ * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element
+ * @static
+ * @type Number
  */
-
/** - * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element +Ext.core.Element.VISIBILITY = 1; +/** + * Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element * @static * @type Number */ -Ext.Element.VISIBILITY = 1; -
/** - * Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element +Ext.core.Element.DISPLAY = 2; + +/** + * Visibility mode constant for use with {@link #setVisibilityMode}. Use offsets (x and y positioning offscreen) + * to hide element. * @static * @type Number */ -Ext.Element.DISPLAY = 2; +Ext.core.Element.OFFSETS = 3; + + +Ext.core.Element.ASCLASS = 4; + +/** + * Defaults to 'x-hide-nosize' + * @static + * @type String + */ +Ext.core.Element.visibilityCls = Ext.baseCSSPrefix + 'hide-nosize'; -Ext.Element.addMethods(function(){ - var VISIBILITY = "visibility", - DISPLAY = "display", - HIDDEN = "hidden", - OFFSETS = "offsets", - NONE = "none", +Ext.core.Element.addMethods(function(){ + var El = Ext.core.Element, + OPACITY = "opacity", + VISIBILITY = "visibility", + DISPLAY = "display", + HIDDEN = "hidden", + OFFSETS = "offsets", + ASCLASS = "asclass", + NONE = "none", + NOSIZE = 'nosize', ORIGINALDISPLAY = 'originalDisplay', VISMODE = 'visibilityMode', - ELDISPLAY = Ext.Element.DISPLAY, - data = Ext.Element.data, + ISVISIBLE = 'isVisible', + data = El.data, getDisplay = function(dom){ var d = data(dom, ORIGINALDISPLAY); if(d === undefined){ @@ -54,266 +79,168 @@ Ext.Element.addMethods(function(){ }; return { -
/** - * The element's default display mode (defaults to "") + /** + * The element's default display mode (defaults to "") * @type String */ - originalDisplay : "", + originalDisplay : "", visibilityMode : 1, -
/** - * Sets the element's visibility mode. When setVisible() is called it + /** + * Sets the element's visibility mode. When setVisible() is called it * will use this to determine whether to set the visibility or the display property. - * @param {Number} visMode Ext.Element.VISIBILITY or Ext.Element.DISPLAY - * @return {Ext.Element} this + * @param {Number} visMode Ext.core.Element.VISIBILITY or Ext.core.Element.DISPLAY + * @return {Ext.core.Element} this */ setVisibilityMode : function(visMode){ data(this.dom, VISMODE, visMode); return this; }, -
/** - * Perform custom animation on this element. - *
    - *
  • Animation Properties
  • - * - *

    The Animation Control Object enables gradual transitions for any member of an - * element's style object that takes a numeric value including but not limited to - * these properties:

      - *
    • bottom, top, left, right
    • - *
    • height, width
    • - *
    • margin, padding
    • - *
    • borderWidth
    • - *
    • opacity
    • - *
    • fontSize
    • - *
    • lineHeight
    • - *
    - * - * - *
  • Animation Property Attributes
  • - * - *

    Each Animation Property is a config object with optional properties:

    - *
      - *
    • by* : relative change - start at current value, change by this value
    • - *
    • from : ignore current value, start from this value
    • - *
    • to* : start at current value, go to this value
    • - *
    • unit : any allowable unit specification
    • - *

      * do not specify both to and by for an animation property

      - *
    - * - *
  • Animation Types
  • - * - *

    The supported animation types:

      - *
    • 'run' : Default - *
      
      -var el = Ext.get('complexEl');
      -el.animate(
      -    // animation control object
      -    {
      -        borderWidth: {to: 3, from: 0},
      -        opacity: {to: .3, from: 1},
      -        height: {to: 50, from: el.getHeight()},
      -        width: {to: 300, from: el.getWidth()},
      -        top  : {by: - 100, unit: 'px'},
      -    },
      -    0.35,      // animation duration
      -    null,      // callback
      -    'easeOut', // easing method
      -    'run'      // animation type ('run','color','motion','scroll')
      -);
      -         * 
      - *
    • - *
    • 'color' - *

      Animates transition of background, text, or border colors.

      - *
      
      -el.animate(
      -    // animation control object
      -    {
      -        color: { to: '#06e' },
      -        backgroundColor: { to: '#e06' }
      -    },
      -    0.35,      // animation duration
      -    null,      // callback
      -    'easeOut', // easing method
      -    'color'    // animation type ('run','color','motion','scroll')
      -);
      -         * 
      - *
    • - * - *
    • 'motion' - *

      Animates the motion of an element to/from specific points using optional bezier - * way points during transit.

      - *
      
      -el.animate(
      -    // animation control object
      -    {
      -        borderWidth: {to: 3, from: 0},
      -        opacity: {to: .3, from: 1},
      -        height: {to: 50, from: el.getHeight()},
      -        width: {to: 300, from: el.getWidth()},
      -        top  : {by: - 100, unit: 'px'},
      -        points: {
      -            to: [50, 100],  // go to this point
      -            control: [      // optional bezier way points
      -                [ 600, 800],
      -                [-100, 200]
      -            ]
      -        }
      -    },
      -    3000,      // animation duration (milliseconds!)
      -    null,      // callback
      -    'easeOut', // easing method
      -    'motion'   // animation type ('run','color','motion','scroll')
      -);
      -         * 
      - *
    • - *
    • 'scroll' - *

      Animate horizontal or vertical scrolling of an overflowing page element.

      - *
      
      -el.animate(
      -    // animation control object
      -    {
      -        scroll: {to: [400, 300]}
      -    },
      -    0.35,      // animation duration
      -    null,      // callback
      -    'easeOut', // easing method
      -    'scroll'   // animation type ('run','color','motion','scroll')
      -);
      -         * 
      - *
    • - *
    - * - *
- * - * @param {Object} args The animation control args - * @param {Float} duration (optional) How long the animation lasts in seconds (defaults to .35) - * @param {Function} onComplete (optional) Function to call when animation completes - * @param {String} easing (optional) {@link Ext.Fx#easing} method to use (defaults to 'easeOut') - * @param {String} animType (optional) 'run' is the default. Can also be 'color', - * 'motion', or 'scroll' - * @return {Ext.Element} this - */ - animate : function(args, duration, onComplete, easing, animType){ - this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType); - return this; - }, - - /* - * @private Internal animation call + /** + * Checks whether the element is currently visible using both visibility and display properties. + * @return {Boolean} True if the element is currently visible, else false */ - anim : function(args, opt, animType, defaultDur, defaultEase, cb){ - animType = animType || 'run'; - opt = opt || {}; + isVisible : function() { var me = this, - anim = Ext.lib.Anim[animType]( - me.dom, - args, - (opt.duration || defaultDur) || .35, - (opt.easing || defaultEase) || 'easeOut', - function(){ - if(cb) cb.call(me); - if(opt.callback) opt.callback.call(opt.scope || me, me, opt); - }, - me - ); - opt.anim = anim; - return anim; - }, + dom = me.dom, + visible = data(dom, ISVISIBLE); - // private legacy anim prep - preanim : function(a, i){ - return !a[i] ? false : (Ext.isObject(a[i]) ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]}); - }, + if(typeof visible == 'boolean'){ //return the cached value if registered + return visible; + } + //Determine the current state based on display states + visible = !me.isStyle(VISIBILITY, HIDDEN) && + !me.isStyle(DISPLAY, NONE) && + !((getVisMode(dom) == El.ASCLASS) && me.hasCls(me.visibilityCls || El.visibilityCls)); -
/** - * Checks whether the element is currently visible using both visibility and display properties. - * @return {Boolean} True if the element is currently visible, else false - */ - isVisible : function() { - return !this.isStyle(VISIBILITY, HIDDEN) && !this.isStyle(DISPLAY, NONE); + data(dom, ISVISIBLE, visible); + return visible; }, -
/** - * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use + /** + * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property. * @param {Boolean} visible Whether the element is visible * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object - * @return {Ext.Element} this + * @return {Ext.core.Element} this */ - setVisible : function(visible, animate){ - var me = this, isDisplay, isVisible, isOffsets, - dom = me.dom; + setVisible : function(visible, animate){ + var me = this, isDisplay, isVisibility, isOffsets, isNosize, + dom = me.dom, + visMode = getVisMode(dom); + // hideMode string override - if (Ext.isString(animate)){ - isDisplay = animate == DISPLAY; - isVisible = animate == VISIBILITY; - isOffsets = animate == OFFSETS; + if (typeof animate == 'string'){ + switch (animate) { + case DISPLAY: + visMode = El.DISPLAY; + break; + case VISIBILITY: + visMode = El.VISIBILITY; + break; + case OFFSETS: + visMode = El.OFFSETS; + break; + case NOSIZE: + case ASCLASS: + visMode = El.ASCLASS; + break; + } + me.setVisibilityMode(visMode); animate = false; - } else { - isDisplay = getVisMode(this.dom) == ELDISPLAY; - isVisible = !isDisplay; } if (!animate || !me.anim) { - if (isDisplay){ - me.setDisplayed(visible); - } else if (isOffsets){ - if (!visible){ - me.hideModeStyles = { - position: me.getStyle('position'), - top: me.getStyle('top'), - left: me.getStyle('left') - }; + if(visMode == El.ASCLASS ){ + me[visible?'removeCls':'addCls'](me.visibilityCls || El.visibilityCls); + + } else if (visMode == El.DISPLAY){ + + return me.setDisplayed(visible); + + } else if (visMode == El.OFFSETS){ + + if (!visible){ + // Remember position for restoring, if we are not already hidden by offsets. + if (!me.hideModeStyles) { + me.hideModeStyles = { + position: me.getStyle('position'), + top: me.getStyle('top'), + left: me.getStyle('left') + }; + } me.applyStyles({position: 'absolute', top: '-10000px', left: '-10000px'}); - } else { + } + + // Only "restore" as position if we have actually been hidden using offsets. + // Calling setVisible(true) on a positioned element should not reposition it. + else if (me.hideModeStyles) { me.applyStyles(me.hideModeStyles || {position: '', top: '', left: ''}); + delete me.hideModeStyles; } + }else{ me.fixDisplay(); - dom.style.visibility = visible ? "visible" : HIDDEN; + // Show by clearing visibility style. Explicitly setting to "visible" overrides parent visibility setting. + dom.style.visibility = visible ? '' : HIDDEN; } }else{ // closure for composites - if (visible){ - me.setOpacity(.01); + if(visible){ + me.setOpacity(0.01); me.setVisible(true); } - me.anim({opacity: { to: (visible?1:0) }}, - me.preanim(arguments, 1), - null, - .35, - 'easeIn', - function(){ - if(!visible){ - dom.style[isDisplay ? DISPLAY : VISIBILITY] = (isDisplay) ? NONE : HIDDEN; - Ext.fly(dom).setOpacity(1); - } - }); + if (!Ext.isObject(animate)) { + animate = { + duration: 350, + easing: 'ease-in' + }; + } + me.animate(Ext.applyIf({ + callback: function() { + visible || me.setVisible(false).setOpacity(1); + }, + to: { + opacity: (visible) ? 1 : 0 + } + }, animate)); } + data(dom, ISVISIBLE, visible); //set logical visibility state return me; }, -
/** - * Toggles the element's visibility or display, depending on visibility mode. + + /** + * @private + * Determine if the Element has a relevant height and width available based + * upon current logical visibility state + */ + hasMetrics : function(){ + var dom = this.dom; + return this.isVisible() || (getVisMode(dom) == El.OFFSETS) || (getVisMode(dom) == El.VISIBILITY); + }, + + /** + * Toggles the element's visibility or display, depending on visibility mode. * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object - * @return {Ext.Element} this + * @return {Ext.core.Element} this */ toggle : function(animate){ var me = this; - me.setVisible(!me.isVisible(), me.preanim(arguments, 0)); + me.setVisible(!me.isVisible(), me.anim(animate)); return me; }, -
/** - * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true. + /** + * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true. * @param {Mixed} value Boolean value to display the element using its default display, or a string to set the display directly. - * @return {Ext.Element} this + * @return {Ext.core.Element} this */ setDisplayed : function(value) { - if(typeof value == "boolean"){ + if(typeof value == "boolean"){ value = value ? getDisplay(this.dom) : NONE; } this.setStyle(DISPLAY, value); @@ -323,45 +250,45 @@ el.animate( // private fixDisplay : function(){ var me = this; - if(me.isStyle(DISPLAY, NONE)){ + if (me.isStyle(DISPLAY, NONE)) { me.setStyle(VISIBILITY, HIDDEN); me.setStyle(DISPLAY, getDisplay(this.dom)); // first try reverting to default - if(me.isStyle(DISPLAY, NONE)){ // if that fails, default to block - me.setStyle(DISPLAY, "block"); + if (me.isStyle(DISPLAY, NONE)) { // if that fails, default to block + me.setStyle(DISPLAY, "block"); } } }, -
/** - * Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}. + /** + * Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}. * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object - * @return {Ext.Element} this + * @return {Ext.core.Element} this */ hide : function(animate){ // hideMode override - if (Ext.isString(animate)){ + if (typeof animate == 'string'){ this.setVisible(false, animate); return this; } - this.setVisible(false, this.preanim(arguments, 0)); + this.setVisible(false, this.anim(animate)); return this; }, -
/** - * Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}. + /** + * Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}. * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object - * @return {Ext.Element} this + * @return {Ext.core.Element} this */ show : function(animate){ // hideMode override - if (Ext.isString(animate)){ + if (typeof animate == 'string'){ this.setVisible(true, animate); return this; } - this.setVisible(true, this.preanim(arguments, 0)); + this.setVisible(true, this.anim(animate)); return this; } }; -}());
+}());
- \ No newline at end of file +