docs/source/StatusProxy.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>The source code</title>
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   7 </head>
   8 <body  onload="prettyPrint();">
   9     <pre class="prettyprint lang-js">/*!
  10  * Ext JS Library 3.3.0
  11  * Copyright(c) 2006-2010 Ext JS, Inc.
  12  * licensing@extjs.com
  13  * http://www.extjs.com/license
  14  */
  15 <div id="cls-Ext.dd.StatusProxy"></div>/**
  16  * @class Ext.dd.StatusProxy
  17  * A specialized drag proxy that supports a drop status icon, {@link Ext.Layer} styles and auto-repair.  This is the
  18  * default drag proxy used by all Ext.dd components.
  19  * @constructor
  20  * @param {Object} config
  21  */
  22 Ext.dd.StatusProxy = function(config){
  23     Ext.apply(this, config);
  24     this.id = this.id || Ext.id();
  25     this.el = new Ext.Layer({
  26         dh: {
  27             id: this.id, tag: "div", cls: "x-dd-drag-proxy "+this.dropNotAllowed, children: [
  28                 {tag: "div", cls: "x-dd-drop-icon"},
  29                 {tag: "div", cls: "x-dd-drag-ghost"}
  30             ]
  31         },
  32         shadow: !config || config.shadow !== false
  33     });
  34     this.ghost = Ext.get(this.el.dom.childNodes[1]);
  35     this.dropStatus = this.dropNotAllowed;
  36 };
  37
  38 Ext.dd.StatusProxy.prototype = {
  39     <div id="cfg-Ext.dd.StatusProxy-dropAllowed"></div>/**
  40      * @cfg {String} dropAllowed
  41      * The CSS class to apply to the status element when drop is allowed (defaults to "x-dd-drop-ok").
  42      */
  43     dropAllowed : "x-dd-drop-ok",
  44     <div id="cfg-Ext.dd.StatusProxy-dropNotAllowed"></div>/**
  45      * @cfg {String} dropNotAllowed
  46      * The CSS class to apply to the status element when drop is not allowed (defaults to "x-dd-drop-nodrop").
  47      */
  48     dropNotAllowed : "x-dd-drop-nodrop",
  49
  50     <div id="method-Ext.dd.StatusProxy-setStatus"></div>/**
  51      * Updates the proxy's visual element to indicate the status of whether or not drop is allowed
  52      * over the current target element.
  53      * @param {String} cssClass The css class for the new drop status indicator image
  54      */
  55     setStatus : function(cssClass){
  56         cssClass = cssClass || this.dropNotAllowed;
  57         if(this.dropStatus != cssClass){
  58             this.el.replaceClass(this.dropStatus, cssClass);
  59             this.dropStatus = cssClass;
  60         }
  61     },
  62
  63     <div id="method-Ext.dd.StatusProxy-reset"></div>/**
  64      * Resets the status indicator to the default dropNotAllowed value
  65      * @param {Boolean} clearGhost True to also remove all content from the ghost, false to preserve it
  66      */
  67     reset : function(clearGhost){
  68         this.el.dom.className = "x-dd-drag-proxy " + this.dropNotAllowed;
  69         this.dropStatus = this.dropNotAllowed;
  70         if(clearGhost){
  71             this.ghost.update("");
  72         }
  73     },
  74
  75     <div id="method-Ext.dd.StatusProxy-update"></div>/**
  76      * Updates the contents of the ghost element
  77      * @param {String/HTMLElement} html The html that will replace the current innerHTML of the ghost element, or a
  78      * DOM node to append as the child of the ghost element (in which case the innerHTML will be cleared first).
  79      */
  80     update : function(html){
  81         if(typeof html == "string"){
  82             this.ghost.update(html);
  83         }else{
  84             this.ghost.update("");
  85             html.style.margin = "0";
  86             this.ghost.dom.appendChild(html);
  87         }
  88         var el = this.ghost.dom.firstChild;
  89         if(el){
  90             Ext.fly(el).setStyle('float', 'none');
  91         }
  92     },
  93
  94     <div id="method-Ext.dd.StatusProxy-getEl"></div>/**
  95      * Returns the underlying proxy {@link Ext.Layer}
  96      * @return {Ext.Layer} el
  97     */
  98     getEl : function(){
  99         return this.el;
 100     },
 101
 102     <div id="method-Ext.dd.StatusProxy-getGhost"></div>/**
 103      * Returns the ghost element
 104      * @return {Ext.Element} el
 105      */
 106     getGhost : function(){
 107         return this.ghost;
 108     },
 109
 110     <div id="method-Ext.dd.StatusProxy-hide"></div>/**
 111      * Hides the proxy
 112      * @param {Boolean} clear True to reset the status and clear the ghost contents, false to preserve them
 113      */
 114     hide : function(clear){
 115         this.el.hide();
 116         if(clear){
 117             this.reset(true);
 118         }
 119     },
 120
 121     <div id="method-Ext.dd.StatusProxy-stop"></div>/**
 122      * Stops the repair animation if it's currently running
 123      */
 124     stop : function(){
 125         if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){
 126             this.anim.stop();
 127         }
 128     },
 129
 130     <div id="method-Ext.dd.StatusProxy-show"></div>/**
 131      * Displays this proxy
 132      */
 133     show : function(){
 134         this.el.show();
 135     },
 136
 137     <div id="method-Ext.dd.StatusProxy-sync"></div>/**
 138      * Force the Layer to sync its shadow and shim positions to the element
 139      */
 140     sync : function(){
 141         this.el.sync();
 142     },
 143
 144     <div id="method-Ext.dd.StatusProxy-repair"></div>/**
 145      * Causes the proxy to return to its position of origin via an animation.  Should be called after an
 146      * invalid drop operation by the item being dragged.
 147      * @param {Array} xy The XY position of the element ([x, y])
 148      * @param {Function} callback The function to call after the repair is complete.
 149      * @param {Object} scope The scope (<code>this</code> reference) in which the callback function is executed. Defaults to the browser window.
 150      */
 151     repair : function(xy, callback, scope){
 152         this.callback = callback;
 153         this.scope = scope;
 154         if(xy && this.animRepair !== false){
 155             this.el.addClass("x-dd-drag-repair");
 156             this.el.hideUnders(true);
 157             this.anim = this.el.shift({
 158                 duration: this.repairDuration || .5,
 159                 easing: 'easeOut',
 160                 xy: xy,
 161                 stopFx: true,
 162                 callback: this.afterRepair,
 163                 scope: this
 164             });
 165         }else{
 166             this.afterRepair();
 167         }
 168     },
 169
 170     // private
 171     afterRepair : function(){
 172         this.hide(true);
 173         if(typeof this.callback == "function"){
 174             this.callback.call(this.scope || this);
 175         }
 176         this.callback = null;
 177         this.scope = null;
 178     },
 179
 180     destroy: function(){
 181         Ext.destroy(this.ghost, this.el);
 182     }
 183 };</pre>
 184 </body>
 185 </html>