-<html>\r
-<head>\r
- <title>The source code</title>\r
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body onload="prettyPrint();">\r
- <pre class="prettyprint lang-js"><div id="cls-Ext.dd.StatusProxy"></div>/**\r
- * @class Ext.dd.StatusProxy\r
- * A specialized drag proxy that supports a drop status icon, {@link Ext.Layer} styles and auto-repair. This is the\r
- * default drag proxy used by all Ext.dd components.\r
- * @constructor\r
- * @param {Object} config\r
- */\r
-Ext.dd.StatusProxy = function(config){\r
- Ext.apply(this, config);\r
- this.id = this.id || Ext.id();\r
- this.el = new Ext.Layer({\r
- dh: {\r
- id: this.id, tag: "div", cls: "x-dd-drag-proxy "+this.dropNotAllowed, children: [\r
- {tag: "div", cls: "x-dd-drop-icon"},\r
- {tag: "div", cls: "x-dd-drag-ghost"}\r
- ]\r
- }, \r
- shadow: !config || config.shadow !== false\r
- });\r
- this.ghost = Ext.get(this.el.dom.childNodes[1]);\r
- this.dropStatus = this.dropNotAllowed;\r
-};\r
-\r
-Ext.dd.StatusProxy.prototype = {\r
- <div id="cfg-Ext.dd.StatusProxy-dropAllowed"></div>/**\r
- * @cfg {String} dropAllowed\r
- * The CSS class to apply to the status element when drop is allowed (defaults to "x-dd-drop-ok").\r
- */\r
- dropAllowed : "x-dd-drop-ok",\r
- <div id="cfg-Ext.dd.StatusProxy-dropNotAllowed"></div>/**\r
- * @cfg {String} dropNotAllowed\r
- * The CSS class to apply to the status element when drop is not allowed (defaults to "x-dd-drop-nodrop").\r
- */\r
- dropNotAllowed : "x-dd-drop-nodrop",\r
-\r
- <div id="method-Ext.dd.StatusProxy-setStatus"></div>/**\r
- * Updates the proxy's visual element to indicate the status of whether or not drop is allowed\r
- * over the current target element.\r
- * @param {String} cssClass The css class for the new drop status indicator image\r
- */\r
- setStatus : function(cssClass){\r
- cssClass = cssClass || this.dropNotAllowed;\r
- if(this.dropStatus != cssClass){\r
- this.el.replaceClass(this.dropStatus, cssClass);\r
- this.dropStatus = cssClass;\r
- }\r
- },\r
-\r
- <div id="method-Ext.dd.StatusProxy-reset"></div>/**\r
- * Resets the status indicator to the default dropNotAllowed value\r
- * @param {Boolean} clearGhost True to also remove all content from the ghost, false to preserve it\r
- */\r
- reset : function(clearGhost){\r
- this.el.dom.className = "x-dd-drag-proxy " + this.dropNotAllowed;\r
- this.dropStatus = this.dropNotAllowed;\r
- if(clearGhost){\r
- this.ghost.update("");\r
- }\r
- },\r
-\r
- <div id="method-Ext.dd.StatusProxy-update"></div>/**\r
- * Updates the contents of the ghost element\r
- * @param {String/HTMLElement} html The html that will replace the current innerHTML of the ghost element, or a\r
- * DOM node to append as the child of the ghost element (in which case the innerHTML will be cleared first).\r
- */\r
- update : function(html){\r
- if(typeof html == "string"){\r
- this.ghost.update(html);\r
- }else{\r
- this.ghost.update("");\r
- html.style.margin = "0";\r
- this.ghost.dom.appendChild(html);\r
- }\r
- var el = this.ghost.dom.firstChild; \r
- if(el){\r
- Ext.fly(el).setStyle('float', 'none');\r
- }\r
- },\r
-\r
- <div id="method-Ext.dd.StatusProxy-getEl"></div>/**\r
- * Returns the underlying proxy {@link Ext.Layer}\r
- * @return {Ext.Layer} el\r
- */\r
- getEl : function(){\r
- return this.el;\r
- },\r
-\r
- <div id="method-Ext.dd.StatusProxy-getGhost"></div>/**\r
- * Returns the ghost element\r
- * @return {Ext.Element} el\r
- */\r
- getGhost : function(){\r
- return this.ghost;\r
- },\r
-\r
- <div id="method-Ext.dd.StatusProxy-hide"></div>/**\r
- * Hides the proxy\r
- * @param {Boolean} clear True to reset the status and clear the ghost contents, false to preserve them\r
- */\r
- hide : function(clear){\r
- this.el.hide();\r
- if(clear){\r
- this.reset(true);\r
- }\r
- },\r
-\r
- <div id="method-Ext.dd.StatusProxy-stop"></div>/**\r
- * Stops the repair animation if it's currently running\r
- */\r
- stop : function(){\r
- if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){\r
- this.anim.stop();\r
- }\r
- },\r
-\r
- <div id="method-Ext.dd.StatusProxy-show"></div>/**\r
- * Displays this proxy\r
- */\r
- show : function(){\r
- this.el.show();\r
- },\r
-\r
- <div id="method-Ext.dd.StatusProxy-sync"></div>/**\r
- * Force the Layer to sync its shadow and shim positions to the element\r
- */\r
- sync : function(){\r
- this.el.sync();\r
- },\r
-\r
- <div id="method-Ext.dd.StatusProxy-repair"></div>/**\r
- * Causes the proxy to return to its position of origin via an animation. Should be called after an\r
- * invalid drop operation by the item being dragged.\r
- * @param {Array} xy The XY position of the element ([x, y])\r
- * @param {Function} callback The function to call after the repair is complete\r
- * @param {Object} scope The scope in which to execute the callback\r
- */\r
- repair : function(xy, callback, scope){\r
- this.callback = callback;\r
- this.scope = scope;\r
- if(xy && this.animRepair !== false){\r
- this.el.addClass("x-dd-drag-repair");\r
- this.el.hideUnders(true);\r
- this.anim = this.el.shift({\r
- duration: this.repairDuration || .5,\r
- easing: 'easeOut',\r
- xy: xy,\r
- stopFx: true,\r
- callback: this.afterRepair,\r
- scope: this\r
- });\r
- }else{\r
- this.afterRepair();\r
- }\r
- },\r
-\r
- // private\r
- afterRepair : function(){\r
- this.hide(true);\r
- if(typeof this.callback == "function"){\r
- this.callback.call(this.scope || this);\r
- }\r
- this.callback = null;\r
- this.scope = null;\r
- }\r
-};</pre> \r
-</body>\r
-</html>
\ No newline at end of file
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>The source code</title>
+ <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../prettify/prettify.js"></script>
+ <style type="text/css">
+ .highlight { display: block; background-color: #ddd; }
+ </style>
+ <script type="text/javascript">
+ function highlight() {
+ document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+ }
+ </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+ <pre class="prettyprint lang-js"><span id='Ext-dd-StatusProxy-method-constructor'><span id='Ext-dd-StatusProxy'>/**
+</span></span> * @class Ext.dd.StatusProxy
+ * A specialized drag proxy that supports a drop status icon, {@link Ext.Layer} styles and auto-repair. This is the
+ * default drag proxy used by all Ext.dd components.
+ * @constructor
+ * @param {Object} config
+ */
+Ext.define('Ext.dd.StatusProxy', {
+ animRepair: false,
+
+ constructor: function(config){
+ Ext.apply(this, config);
+ this.id = this.id || Ext.id();
+ this.proxy = Ext.createWidget('component', {
+ floating: true,
+ id: this.id,
+ html: '<div class="' + Ext.baseCSSPrefix + 'dd-drop-icon"></div>' +
+ '<div class="' + Ext.baseCSSPrefix + 'dd-drag-ghost"></div>',
+ cls: Ext.baseCSSPrefix + 'dd-drag-proxy ' + this.dropNotAllowed,
+ shadow: !config || config.shadow !== false,
+ renderTo: document.body
+ });
+
+ this.el = this.proxy.el;
+ this.el.show();
+ this.el.setVisibilityMode(Ext.core.Element.VISIBILITY);
+ this.el.hide();
+
+ this.ghost = Ext.get(this.el.dom.childNodes[1]);
+ this.dropStatus = this.dropNotAllowed;
+ },
+<span id='Ext-dd-StatusProxy-cfg-dropAllowed'> /**
+</span> * @cfg {String} dropAllowed
+ * The CSS class to apply to the status element when drop is allowed (defaults to "x-dd-drop-ok").
+ */
+ dropAllowed : Ext.baseCSSPrefix + 'dd-drop-ok',
+<span id='Ext-dd-StatusProxy-cfg-dropNotAllowed'> /**
+</span> * @cfg {String} dropNotAllowed
+ * The CSS class to apply to the status element when drop is not allowed (defaults to "x-dd-drop-nodrop").
+ */
+ dropNotAllowed : Ext.baseCSSPrefix + 'dd-drop-nodrop',
+
+<span id='Ext-dd-StatusProxy-method-setStatus'> /**
+</span> * Updates the proxy's visual element to indicate the status of whether or not drop is allowed
+ * over the current target element.
+ * @param {String} cssClass The css class for the new drop status indicator image
+ */
+ setStatus : function(cssClass){
+ cssClass = cssClass || this.dropNotAllowed;
+ if(this.dropStatus != cssClass){
+ this.el.replaceCls(this.dropStatus, cssClass);
+ this.dropStatus = cssClass;
+ }
+ },
+
+<span id='Ext-dd-StatusProxy-method-reset'> /**
+</span> * Resets the status indicator to the default dropNotAllowed value
+ * @param {Boolean} clearGhost True to also remove all content from the ghost, false to preserve it
+ */
+ reset : function(clearGhost){
+ this.el.dom.className = Ext.baseCSSPrefix + 'dd-drag-proxy ' + this.dropNotAllowed;
+ this.dropStatus = this.dropNotAllowed;
+ if(clearGhost){
+ this.ghost.update("");
+ }
+ },
+
+<span id='Ext-dd-StatusProxy-method-update'> /**
+</span> * Updates the contents of the ghost element
+ * @param {String/HTMLElement} html The html that will replace the current innerHTML of the ghost element, or a
+ * DOM node to append as the child of the ghost element (in which case the innerHTML will be cleared first).
+ */
+ update : function(html){
+ if(typeof html == "string"){
+ this.ghost.update(html);
+ }else{
+ this.ghost.update("");
+ html.style.margin = "0";
+ this.ghost.dom.appendChild(html);
+ }
+ var el = this.ghost.dom.firstChild;
+ if(el){
+ Ext.fly(el).setStyle('float', 'none');
+ }
+ },
+
+<span id='Ext-dd-StatusProxy-method-getEl'> /**
+</span> * Returns the underlying proxy {@link Ext.Layer}
+ * @return {Ext.Layer} el
+ */
+ getEl : function(){
+ return this.el;
+ },
+
+<span id='Ext-dd-StatusProxy-method-getGhost'> /**
+</span> * Returns the ghost element
+ * @return {Ext.core.Element} el
+ */
+ getGhost : function(){
+ return this.ghost;
+ },
+
+<span id='Ext-dd-StatusProxy-method-hide'> /**
+</span> * Hides the proxy
+ * @param {Boolean} clear True to reset the status and clear the ghost contents, false to preserve them
+ */
+ hide : function(clear) {
+ this.proxy.hide();
+ if (clear) {
+ this.reset(true);
+ }
+ },
+
+<span id='Ext-dd-StatusProxy-method-stop'> /**
+</span> * Stops the repair animation if it's currently running
+ */
+ stop : function(){
+ if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){
+ this.anim.stop();
+ }
+ },
+
+<span id='Ext-dd-StatusProxy-method-show'> /**
+</span> * Displays this proxy
+ */
+ show : function() {
+ this.proxy.show();
+ this.proxy.toFront();
+ },
+
+<span id='Ext-dd-StatusProxy-method-sync'> /**
+</span> * Force the Layer to sync its shadow and shim positions to the element
+ */
+ sync : function(){
+ this.proxy.el.sync();
+ },
+
+<span id='Ext-dd-StatusProxy-method-repair'> /**
+</span> * Causes the proxy to return to its position of origin via an animation. Should be called after an
+ * invalid drop operation by the item being dragged.
+ * @param {Array} xy The XY position of the element ([x, y])
+ * @param {Function} callback The function to call after the repair is complete.
+ * @param {Object} scope The scope (<code>this</code> reference) in which the callback function is executed. Defaults to the browser window.
+ */
+ repair : function(xy, callback, scope){
+ this.callback = callback;
+ this.scope = scope;
+ if (xy && this.animRepair !== false) {
+ this.el.addCls(Ext.baseCSSPrefix + 'dd-drag-repair');
+ this.el.hideUnders(true);
+ this.anim = this.el.animate({
+ duration: this.repairDuration || 500,
+ easing: 'ease-out',
+ to: {
+ x: xy[0],
+ y: xy[1]
+ },
+ stopAnimation: true,
+ callback: this.afterRepair,
+ scope: this
+ });
+ } else {
+ this.afterRepair();
+ }
+ },
+
+ // private
+ afterRepair : function(){
+ this.hide(true);
+ if(typeof this.callback == "function"){
+ this.callback.call(this.scope || this);
+ }
+ this.callback = null;
+ this.scope = null;
+ },
+
+ destroy: function(){
+ Ext.destroy(this.ghost, this.proxy, this.el);
+ }
+});</pre>
+</body>
+</html>
git.ithinksw.org / extjs.git / blobdiff