X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/src/core/core/Element.fx.js diff --git a/src/core/core/Element.fx.js b/src/core/core/Element.fx.js new file mode 100644 index 00000000..5fcca87b --- /dev/null +++ b/src/core/core/Element.fx.js @@ -0,0 +1,324 @@ +/*! + * Ext JS Library 3.0.0 + * Copyright(c) 2006-2009 Ext JS, LLC + * licensing@extjs.com + * http://www.extjs.com/license + */ +/** + * @class Ext.Element + */ +/** + * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element + * @static + * @type Number + */ +Ext.Element.VISIBILITY = 1; +/** + * Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element + * @static + * @type Number + */ +Ext.Element.DISPLAY = 2; + +Ext.Element.addMethods(function(){ + var VISIBILITY = "visibility", + DISPLAY = "display", + HIDDEN = "hidden", + NONE = "none", + ORIGINALDISPLAY = 'originalDisplay', + VISMODE = 'visibilityMode', + ELDISPLAY = Ext.Element.DISPLAY, + data = Ext.Element.data, + getDisplay = function(dom){ + var d = data(dom, ORIGINALDISPLAY); + if(d === undefined){ + data(dom, ORIGINALDISPLAY, d = ''); + } + return d; + }, + getVisMode = function(dom){ + var m = data(dom, VISMODE); + if(m === undefined){ + data(dom, VISMODE, m = 1) + } + return m; + }; + + return { + /** + * The element's default display mode (defaults to "") + * @type String + */ + originalDisplay : "", + visibilityMode : 1, + + /** + * 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 visMode Ext.Element.VISIBILITY or Ext.Element.DISPLAY + * @return {Ext.Element} this + */ + setVisibilityMode : function(visMode){ + data(this.dom, VISMODE, visMode); + return this; + }, + + /** + * Perform custom animation on this element. + *
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:
Each Animation Property is a config object with optional properties:
+ ** do not specify both to and by for an animation property
+ *The supported animation types:
+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')
+);
+ *
+ * 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')
+);
+ *
+ * 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')
+);
+ *
+ * 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')
+);
+ *
+ *