Merge branch 'master' of https://github.com/roojs/roojs1 into github
[roojs1] / roojs-ui-debug.js
index 3904185..88b8611 100644 (file)
@@ -26,6 +26,7 @@ var Dom=Roo.lib.Dom;
 
 /**
  * @class Roo.dd.DragDrop
+ * @extends Roo.util.Observable
  * Defines the interface and base operation of items that that can be
  * dragged or can be drop targets.  It was designed to be extended, overriding
  * the event handlers for startDrag, onDrag, onDragOver and onDragOut.
@@ -72,12 +73,7 @@ Roo.dd.DragDrop = function(id, sGroup, config) {
     if (id) {
         this.init(id, sGroup, config);
     }
-    if (config.listeners || config.events) { 
-        Roo.BasicLayoutRegion.superclass.constructor.call(this,  { 
-            listeners : config.listeners || {}, 
-            events : config.events || {} 
-        });    
-    }
+    
 };
 
 Roo.extend(Roo.dd.DragDrop, Roo.util.Observable , {
@@ -3006,6 +3002,12 @@ Roo.dd.DDTarget = function(id, sGroup, config) {
     if (id) {
         this.initTarget(id, sGroup, config);
     }
+    if (config.listeners || config.events) { 
+       Roo.dd.DragDrop.superclass.constructor.call(this,  { 
+            listeners : config.listeners || {}, 
+            events : config.events || {} 
+        });    
+    }
 };
 
 // Roo.dd.DDTarget.prototype = new Roo.dd.DragDrop();
@@ -3890,78 +3892,84 @@ Roo.extend(Roo.dd.DragSource, Roo.dd.DDProxy, {
 Roo.dd.DropTarget = function(el, config){
     this.el = Roo.get(el);
     
+    var listeners = false; ;
+    if (config && config.listeners) {
+        listeners= config.listeners;
+        delete config.listeners;
+    }
     Roo.apply(this, config);
     
     if(this.containerScroll){
         Roo.dd.ScrollManager.register(this.el);
     }
-    
+    this.addEvents( {
+         /**
+         * @scope Roo.dd.DropTarget
+         */
+         
+         /**
+         * @event enter
+         * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the source is now over the
+         * target.  This default implementation adds the CSS class specified by overClass (if any) to the drop element
+         * and returns the dropAllowed config value.  This method should be overridden if drop validation is required.
+         * 
+         * IMPORTANT : it should set this.overClass and this.dropAllowed
+         * 
+         * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
+         * @param {Event} e The event
+         * @param {Object} data An object containing arbitrary data supplied by the drag source
+         */
+        "enter" : true,
+        
+         /**
+         * @event over
+         * The function a {@link Roo.dd.DragSource} calls continuously while it is being dragged over the target.
+         * This method will be called on every mouse movement while the drag source is over the drop target.
+         * This default implementation simply returns the dropAllowed config value.
+         * 
+         * IMPORTANT : it should set this.dropAllowed
+         * 
+         * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
+         * @param {Event} e The event
+         * @param {Object} data An object containing arbitrary data supplied by the drag source
+         
+         */
+        "over" : true,
+        /**
+         * @event out
+         * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the source has been dragged
+         * out of the target without dropping.  This default implementation simply removes the CSS class specified by
+         * overClass (if any) from the drop element.
+         * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
+         * @param {Event} e The event
+         * @param {Object} data An object containing arbitrary data supplied by the drag source
+         */
+         "out" : true,
+         
+        /**
+         * @event drop
+         * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the dragged item has
+         * been dropped on it.  This method has no default implementation and returns false, so you must provide an
+         * implementation that does something to process the drop event and returns true so that the drag source's
+         * repair action does not run.
+         * 
+         * IMPORTANT : it should set this.success
+         * 
+         * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
+         * @param {Event} e The event
+         * @param {Object} data An object containing arbitrary data supplied by the drag source
+        */
+         "drop" : true
+    });
+            
      
     Roo.dd.DropTarget.superclass.constructor.call(  this, 
         this.el.dom, 
         this.ddGroup || this.group,
         {
             isTarget: true,
-            events : {
-                 /**
-                 * @scope Roo.dd.DropTarget
-                 */
-                 
-                 /**
-                 * @event enter
-                 * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the source is now over the
-                 * target.  This default implementation adds the CSS class specified by overClass (if any) to the drop element
-                 * and returns the dropAllowed config value.  This method should be overridden if drop validation is required.
-                 * 
-                 * IMPORTANT : it should set this.overClass and this.dropAllowed
-                 * 
-                 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
-                 * @param {Event} e The event
-                 * @param {Object} data An object containing arbitrary data supplied by the drag source
-                 */
-                "enter" : true,
-                
-                 /**
-                 * @event over
-                 * The function a {@link Roo.dd.DragSource} calls continuously while it is being dragged over the target.
-                 * This method will be called on every mouse movement while the drag source is over the drop target.
-                 * This default implementation simply returns the dropAllowed config value.
-                 * 
-                 * IMPORTANT : it should set this.dropAllowed
-                 * 
-                 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
-                 * @param {Event} e The event
-                 * @param {Object} data An object containing arbitrary data supplied by the drag source
-                 
-                 */
-                "over" : true,
-                /**
-                 * @event out
-                 * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the source has been dragged
-                 * out of the target without dropping.  This default implementation simply removes the CSS class specified by
-                 * overClass (if any) from the drop element.
-                 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
-                 * @param {Event} e The event
-                 * @param {Object} data An object containing arbitrary data supplied by the drag source
-                 */
-                 "out" : true,
-                 
-                /**
-                 * @event drop
-                 * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the dragged item has
-                 * been dropped on it.  This method has no default implementation and returns false, so you must provide an
-                 * implementation that does something to process the drop event and returns true so that the drag source's
-                 * repair action does not run.
-                 * 
-                 * IMPORTANT : it should set this.success
-                 * 
-                 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
-                 * @param {Event} e The event
-                 * @param {Object} data An object containing arbitrary data supplied by the drag source
-                */
-                 "drop" : true
-            }
-                
+            listeners : listeners || {} 
+           
         
         }
     );
@@ -3973,6 +3981,11 @@ Roo.extend(Roo.dd.DropTarget, Roo.dd.DDTarget, {
      * @cfg {String} overClass
      * The CSS class applied to the drop target element while the drag source is over it (defaults to "").
      */
+     /**
+     * @cfg {String} ddGroup
+     * The drag drop group to handle drop events for
+     */
+     
     /**
      * @cfg {String} dropAllowed
      * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
@@ -3989,7 +4002,7 @@ Roo.extend(Roo.dd.DropTarget, Roo.dd.DDTarget, {
      */
     success : false,
     /**
-     * @cfg {boolean} valid
+     * @cfg {boolean|String} valid true/false or string (ok-add/ok-sub/ok/nodrop)
      * if the drop point is valid for over/enter..
      */
     valid : false,
@@ -3999,37 +4012,51 @@ Roo.extend(Roo.dd.DropTarget, Roo.dd.DDTarget, {
     // private
     isNotifyTarget : true,
     
-    // private
-
-    notifyEnter : function(dd, e, data){
+    /**
+     * @hide
+     */
+    notifyEnter : function(dd, e, data)
+    {
         this.valid = true;
-        this.fireEvent('enter', this, dd, e, data);
+        this.fireEvent('enter', dd, e, data);
         if(this.overClass){
             this.el.addClass(this.overClass);
         }
-        return this.valid ? this.dropAllowed : this.dropNotAllowed;
+        return typeof(this.valid) == 'string' ? 'x-dd-drop-' + this.valid : (
+            this.valid ? this.dropAllowed : this.dropNotAllowed
+        );
     },
 
-    // private
-
-    notifyOver : function(dd, e, data){
+    /**
+     * @hide
+     */
+    notifyOver : function(dd, e, data)
+    {
         this.valid = true;
-        this.fireEvent('over', this, dd, e, data);
-        return this.valid ? this.dropAllowed : this.dropNotAllowed;
+        this.fireEvent('over', dd, e, data);
+        return typeof(this.valid) == 'string' ? 'x-dd-drop-' + this.valid : (
+            this.valid ? this.dropAllowed : this.dropNotAllowed
+        );
     },
 
-    
-    notifyOut : function(dd, e, data){
-        this.fireEvent('out', this, dd, e, data);
+    /**
+     * @hide
+     */
+    notifyOut : function(dd, e, data)
+    {
+        this.fireEvent('out', dd, e, data);
         if(this.overClass){
             this.el.removeClass(this.overClass);
         }
     },
 
-    
-    notifyDrop : function(dd, e, data){
+    /**
+     * @hide
+     */
+    notifyDrop : function(dd, e, data)
+    {
         this.success = false;
-        this.fireEvent('drop', this, dd, e, data);
+        this.fireEvent('drop', dd, e, data);
         return this.success;
     }
 });/*
@@ -13893,16 +13920,24 @@ Roo.extend(Roo.Editor, Roo.Component, {
         }
     },
 
-    onSpecialKey : function(field, e){
+    onSpecialKey : function(field, e)
+    {
         //Roo.log('editor onSpecialKey');
         if(this.completeOnEnter && e.getKey() == e.ENTER){
             e.stopEvent();
             this.completeEdit();
-        }else if(this.cancelOnEsc && e.getKey() == e.ESC){
-            this.cancelEdit();
-        }else{
-            this.fireEvent('specialkey', field, e);
+            return;
         }
+        // do not fire special key otherwise it might hide close the editor...
+        if(e.getKey() == e.ENTER){    
+            return;
+        }
+        if(this.cancelOnEsc && e.getKey() == e.ESC){
+            this.cancelEdit();
+            return;
+        } 
+        this.fireEvent('specialkey', field, e);
+    
     },
 
     /**
@@ -15252,7 +15287,8 @@ Roo.LayoutDialog = function(el, cfg){
         config = Roo.apply({}, el);
         // not sure why we use documentElement here.. - it should always be body.
         // IE7 borks horribly if we use documentElement.
-        el = Roo.get( Roo.isIE ? (document.body || document.documentElement) : (document.documentElement || document.body) ).createChild();
+        // webkit also does not like documentElement - it creates a body element...
+        el = Roo.get( document.body || document.documentElement ).createChild();
         //config.autoCreate = true;
     }
     
@@ -25956,10 +25992,13 @@ Roo.extend(Roo.form.BasicForm, Roo.util.Observable, {
      * @cfg {Boolean} fileUpload
      * Set to true if this form is a file upload.
      */
+     
     /**
      * @cfg {Object} baseParams
      * Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.
      */
+     /**
+     
     /**
      * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds).
      */
@@ -25992,7 +26031,7 @@ Roo.extend(Roo.form.BasicForm, Roo.util.Observable, {
      * element by passing it or its id or mask the form itself by passing in true.
      * @type Mixed
      */
-    waitMsgTarget : undefined,
+    waitMsgTarget : false,
 
     // private
     initEl : function(el){
@@ -26115,42 +26154,50 @@ clientValidation  Boolean          Applies to submit only.  Pass true to call fo
     // private
     beforeAction : function(action){
         var o = action.options;
-        if(o.waitMsg){
-            if(this.waitMsgTarget === true){
-                this.el.mask(o.waitMsg, 'x-mask-loading');
-            }else if(this.waitMsgTarget){
-                this.waitMsgTarget = Roo.get(this.waitMsgTarget);
-                this.waitMsgTarget.mask(o.waitMsg, 'x-mask-loading');
-            }else{
-                Roo.MessageBox.wait(o.waitMsg, o.waitTitle || this.waitTitle || 'Please Wait...');
-            }
+        
+       
+        if(this.waitMsgTarget === true){
+            this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
+        }else if(this.waitMsgTarget){
+            this.waitMsgTarget = Roo.get(this.waitMsgTarget);
+            this.waitMsgTarget.mask(o.waitMsg || "Sending", 'x-mask-loading');
+        }else {
+            Roo.MessageBox.wait(o.waitMsg || "Sending", o.waitTitle || this.waitTitle || 'Please Wait...');
         }
+         
     },
 
     // private
     afterAction : function(action, success){
         this.activeAction = null;
         var o = action.options;
-        if(o.waitMsg){
-            if(this.waitMsgTarget === true){
-                this.el.unmask();
-            }else if(this.waitMsgTarget){
-                this.waitMsgTarget.unmask();
-            }else{
-                Roo.MessageBox.updateProgress(1);
-                Roo.MessageBox.hide();
-            }
+        
+        if(this.waitMsgTarget === true){
+            this.el.unmask();
+        }else if(this.waitMsgTarget){
+            this.waitMsgTarget.unmask();
+        }else{
+            Roo.MessageBox.updateProgress(1);
+            Roo.MessageBox.hide();
         }
+         
         if(success){
             if(o.reset){
                 this.reset();
             }
             Roo.callback(o.success, o.scope, [this, action]);
             this.fireEvent('actioncomplete', this, action);
+            
         }else{
             Roo.callback(o.failure, o.scope, [this, action]);
+            // show an error message if no failed handler is set..
+            if (!this.hasListener('actionfailed')) {
+                Roo.MessageBox.alert("Error", "Saving Failed, please check your entries");
+            }
+            
             this.fireEvent('actionfailed', this, action);
         }
+        
     },
 
     /**
@@ -26945,6 +26992,7 @@ Roo.form.Action.prototype = {
 
     // default connection failure
     failure : function(response){
+        
         this.response = response;
         this.failureType = Roo.form.Action.CONNECT_FAILURE;
         this.form.afterAction(this, false);
@@ -27093,6 +27141,7 @@ Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
                     
             } 
             
+            
             Roo.Ajax.request(Roo.apply(this.createCallback(), {
                 form:this.form.el.dom,
                 url:this.getUrl(!isPost),
@@ -27116,6 +27165,7 @@ Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
             Roo.MessageBox.hide();
         }
         
+        
         var result = this.processResponse(response);
         if(result === true || result.success){
             this.form.afterAction(this, true);
@@ -27134,6 +27184,7 @@ Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
             Roo.MessageBox.hide();
         }
         
+        
         this.response = response;
         this.failureType = Roo.form.Action.CONNECT_FAILURE;
         this.form.afterAction(this, false);
@@ -27182,6 +27233,7 @@ Roo.extend(Roo.form.Action.Load, Roo.form.Action, {
     type : 'load',
 
     run : function(){
+        
         Roo.Ajax.request(Roo.apply(
                 this.createCallback(), {
                     method:this.getMethod(),
@@ -27191,6 +27243,7 @@ Roo.extend(Roo.form.Action.Load, Roo.form.Action, {
     },
 
     success : function(response){
+        
         var result = this.processResponse(response);
         if(result === true || !result.success || !result.data){
             this.failureType = Roo.form.Action.LOAD_FAILURE;
@@ -31787,123 +31840,123 @@ Roo.grid.Grid = function(container, config){
     }
     /** @private */
        this.addEvents({
-           // raw events
-           /**
-            * @event click
-            * The raw click event for the entire grid.
-            * @param {Roo.EventObject} e
-            */
-           "click" : true,
-           /**
-            * @event dblclick
-            * The raw dblclick event for the entire grid.
-            * @param {Roo.EventObject} e
-            */
-           "dblclick" : true,
-           /**
-            * @event contextmenu
-            * The raw contextmenu event for the entire grid.
-            * @param {Roo.EventObject} e
-            */
-           "contextmenu" : true,
-           /**
-            * @event mousedown
-            * The raw mousedown event for the entire grid.
-            * @param {Roo.EventObject} e
-            */
-           "mousedown" : true,
-           /**
-            * @event mouseup
-            * The raw mouseup event for the entire grid.
-            * @param {Roo.EventObject} e
-            */
-           "mouseup" : true,
-           /**
-            * @event mouseover
-            * The raw mouseover event for the entire grid.
-            * @param {Roo.EventObject} e
-            */
-           "mouseover" : true,
-           /**
-            * @event mouseout
-            * The raw mouseout event for the entire grid.
-            * @param {Roo.EventObject} e
-            */
-           "mouseout" : true,
-           /**
-            * @event keypress
-            * The raw keypress event for the entire grid.
-            * @param {Roo.EventObject} e
-            */
-           "keypress" : true,
-           /**
-            * @event keydown
-            * The raw keydown event for the entire grid.
-            * @param {Roo.EventObject} e
-            */
-           "keydown" : true,
+        // raw events
+        /**
+         * @event click
+         * The raw click event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "click" : true,
+        /**
+         * @event dblclick
+         * The raw dblclick event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "dblclick" : true,
+        /**
+         * @event contextmenu
+         * The raw contextmenu event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "contextmenu" : true,
+        /**
+         * @event mousedown
+         * The raw mousedown event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "mousedown" : true,
+        /**
+         * @event mouseup
+         * The raw mouseup event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "mouseup" : true,
+        /**
+         * @event mouseover
+         * The raw mouseover event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "mouseover" : true,
+        /**
+         * @event mouseout
+         * The raw mouseout event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "mouseout" : true,
+        /**
+         * @event keypress
+         * The raw keypress event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "keypress" : true,
+        /**
+         * @event keydown
+         * The raw keydown event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "keydown" : true,
 
-           // custom events
+        // custom events
 
-           /**
-            * @event cellclick
-            * Fires when a cell is clicked
-            * @param {Grid} this
-            * @param {Number} rowIndex
-            * @param {Number} columnIndex
-            * @param {Roo.EventObject} e
-            */
-           "cellclick" : true,
-           /**
-            * @event celldblclick
-            * Fires when a cell is double clicked
-            * @param {Grid} this
-            * @param {Number} rowIndex
-            * @param {Number} columnIndex
-            * @param {Roo.EventObject} e
-            */
-           "celldblclick" : true,
-           /**
-            * @event rowclick
-            * Fires when a row is clicked
-            * @param {Grid} this
-            * @param {Number} rowIndex
-            * @param {Roo.EventObject} e
-            */
-           "rowclick" : true,
-           /**
-            * @event rowdblclick
-            * Fires when a row is double clicked
-            * @param {Grid} this
-            * @param {Number} rowIndex
-            * @param {Roo.EventObject} e
-            */
-           "rowdblclick" : true,
-           /**
-            * @event headerclick
-            * Fires when a header is clicked
-            * @param {Grid} this
-            * @param {Number} columnIndex
-            * @param {Roo.EventObject} e
-            */
-           "headerclick" : true,
-           /**
-            * @event headerdblclick
-            * Fires when a header cell is double clicked
-            * @param {Grid} this
-            * @param {Number} columnIndex
-            * @param {Roo.EventObject} e
-            */
-           "headerdblclick" : true,
-           /**
-            * @event rowcontextmenu
-            * Fires when a row is right clicked
-            * @param {Grid} this
-            * @param {Number} rowIndex
-            * @param {Roo.EventObject} e
-            */
-           "rowcontextmenu" : true,
-           /**
+        /**
+         * @event cellclick
+         * Fires when a cell is clicked
+         * @param {Grid} this
+         * @param {Number} rowIndex
+         * @param {Number} columnIndex
+         * @param {Roo.EventObject} e
+         */
+        "cellclick" : true,
+        /**
+         * @event celldblclick
+         * Fires when a cell is double clicked
+         * @param {Grid} this
+         * @param {Number} rowIndex
+         * @param {Number} columnIndex
+         * @param {Roo.EventObject} e
+         */
+        "celldblclick" : true,
+        /**
+         * @event rowclick
+         * Fires when a row is clicked
+         * @param {Grid} this
+         * @param {Number} rowIndex
+         * @param {Roo.EventObject} e
+         */
+        "rowclick" : true,
+        /**
+         * @event rowdblclick
+         * Fires when a row is double clicked
+         * @param {Grid} this
+         * @param {Number} rowIndex
+         * @param {Roo.EventObject} e
+         */
+        "rowdblclick" : true,
+        /**
+         * @event headerclick
+         * Fires when a header is clicked
+         * @param {Grid} this
+         * @param {Number} columnIndex
+         * @param {Roo.EventObject} e
+         */
+        "headerclick" : true,
+        /**
+         * @event headerdblclick
+         * Fires when a header cell is double clicked
+         * @param {Grid} this
+         * @param {Number} columnIndex
+         * @param {Roo.EventObject} e
+         */
+        "headerdblclick" : true,
+        /**
+         * @event rowcontextmenu
+         * Fires when a row is right clicked
+         * @param {Grid} this
+         * @param {Number} rowIndex
+         * @param {Roo.EventObject} e
+         */
+        "rowcontextmenu" : true,
+        /**
          * @event cellcontextmenu
          * Fires when a cell is right clicked
          * @param {Grid} this
@@ -31912,93 +31965,101 @@ Roo.grid.Grid = function(container, config){
          * @param {Roo.EventObject} e
          */
          "cellcontextmenu" : true,
-           /**
-            * @event headercontextmenu
-            * Fires when a header is right clicked
-            * @param {Grid} this
-            * @param {Number} columnIndex
-            * @param {Roo.EventObject} e
-            */
-           "headercontextmenu" : true,
-           /**
-            * @event bodyscroll
-            * Fires when the body element is scrolled
-            * @param {Number} scrollLeft
-            * @param {Number} scrollTop
-            */
-           "bodyscroll" : true,
-           /**
-            * @event columnresize
-            * Fires when the user resizes a column
-            * @param {Number} columnIndex
-            * @param {Number} newSize
-            */
-           "columnresize" : true,
-           /**
-            * @event columnmove
-            * Fires when the user moves a column
-            * @param {Number} oldIndex
-            * @param {Number} newIndex
-            */
-           "columnmove" : true,
-           /**
-            * @event startdrag
-            * Fires when row(s) start being dragged
-            * @param {Grid} this
-            * @param {Roo.GridDD} dd The drag drop object
-            * @param {event} e The raw browser event
-            */
-           "startdrag" : true,
-           /**
-            * @event enddrag
-            * Fires when a drag operation is complete
-            * @param {Grid} this
-            * @param {Roo.GridDD} dd The drag drop object
-            * @param {event} e The raw browser event
-            */
-           "enddrag" : true,
-           /**
-            * @event dragdrop
-            * Fires when dragged row(s) are dropped on a valid DD target
-            * @param {Grid} this
-            * @param {Roo.GridDD} dd The drag drop object
-            * @param {String} targetId The target drag drop object
-            * @param {event} e The raw browser event
-            */
-           "dragdrop" : true,
-           /**
-            * @event dragover
-            * Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
-            * @param {Grid} this
-            * @param {Roo.GridDD} dd The drag drop object
-            * @param {String} targetId The target drag drop object
-            * @param {event} e The raw browser event
-            */
-           "dragover" : true,
-           /**
-            * @event dragenter
-            *  Fires when the dragged row(s) first cross another DD target while being dragged
-            * @param {Grid} this
-            * @param {Roo.GridDD} dd The drag drop object
-            * @param {String} targetId The target drag drop object
-            * @param {event} e The raw browser event
-            */
-           "dragenter" : true,
-           /**
-            * @event dragout
-            * Fires when the dragged row(s) leave another DD target while being dragged
-            * @param {Grid} this
-            * @param {Roo.GridDD} dd The drag drop object
-            * @param {String} targetId The target drag drop object
-            * @param {event} e The raw browser event
-            */
-           "dragout" : true,
+        /**
+         * @event headercontextmenu
+         * Fires when a header is right clicked
+         * @param {Grid} this
+         * @param {Number} columnIndex
+         * @param {Roo.EventObject} e
+         */
+        "headercontextmenu" : true,
+        /**
+         * @event bodyscroll
+         * Fires when the body element is scrolled
+         * @param {Number} scrollLeft
+         * @param {Number} scrollTop
+         */
+        "bodyscroll" : true,
+        /**
+         * @event columnresize
+         * Fires when the user resizes a column
+         * @param {Number} columnIndex
+         * @param {Number} newSize
+         */
+        "columnresize" : true,
+        /**
+         * @event columnmove
+         * Fires when the user moves a column
+         * @param {Number} oldIndex
+         * @param {Number} newIndex
+         */
+        "columnmove" : true,
+        /**
+         * @event startdrag
+         * Fires when row(s) start being dragged
+         * @param {Grid} this
+         * @param {Roo.GridDD} dd The drag drop object
+         * @param {event} e The raw browser event
+         */
+        "startdrag" : true,
+        /**
+         * @event enddrag
+         * Fires when a drag operation is complete
+         * @param {Grid} this
+         * @param {Roo.GridDD} dd The drag drop object
+         * @param {event} e The raw browser event
+         */
+        "enddrag" : true,
+        /**
+         * @event dragdrop
+         * Fires when dragged row(s) are dropped on a valid DD target
+         * @param {Grid} this
+         * @param {Roo.GridDD} dd The drag drop object
+         * @param {String} targetId The target drag drop object
+         * @param {event} e The raw browser event
+         */
+        "dragdrop" : true,
+        /**
+         * @event dragover
+         * Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
+         * @param {Grid} this
+         * @param {Roo.GridDD} dd The drag drop object
+         * @param {String} targetId The target drag drop object
+         * @param {event} e The raw browser event
+         */
+        "dragover" : true,
+        /**
+         * @event dragenter
+         *  Fires when the dragged row(s) first cross another DD target while being dragged
+         * @param {Grid} this
+         * @param {Roo.GridDD} dd The drag drop object
+         * @param {String} targetId The target drag drop object
+         * @param {event} e The raw browser event
+         */
+        "dragenter" : true,
+        /**
+         * @event dragout
+         * Fires when the dragged row(s) leave another DD target while being dragged
+         * @param {Grid} this
+         * @param {Roo.GridDD} dd The drag drop object
+         * @param {String} targetId The target drag drop object
+         * @param {event} e The raw browser event
+         */
+        "dragout" : true,
+        /**
+         * @event rowclass
+         * Fires when a row is rendered, so you can change add a style to it.
+         * @param {GridView} gridview The grid view
+         * @param {Object} rowcfg contains record, rowIndex and rowClass - set rowClass to add a style.
+         */
+        'rowclass' : true,
+
         /**
          * @event render
          * Fires when the grid is rendered
          * @param {Grid} grid
          */
-        render : true
+        'render' : true
     });
 
     Roo.grid.Grid.superclass.constructor.call(this);
@@ -32101,7 +32162,10 @@ Roo.extend(Roo.grid.Grid, Roo.util.Observable, {
      * @cfg {Object} loadMask An {@link Roo.LoadMask} config or true to mask the grid while loading. Default is false.
         */
        loadMask : false,
-
+    /**
+     * @cfg {Roo.dd.DropTarget} dragTarget An {@link Roo.dd.DragTarget} config
+        */
+       dropTarget: false,
     // private
     rendered : false,
 
@@ -32151,9 +32215,9 @@ Roo.extend(Roo.grid.Grid, Roo.util.Observable, {
             this.footer.container = this.getView().getFooterPanel(true);
             this.footer = Roo.factory(this.footer, Roo);
         }
-        if (this.dragTarget && this.dragTarget) {
-            delete this.dragTarget.xtype;
-            this.dragTarget =  new Ext.dd.DropTarget(this.getView().mainBody, this.dragTarget);
+        if (this.dropTarget && this.dropTarget.xtype) {
+            delete this.dropTarget.xtype;
+            this.dropTarget =  new Ext.dd.DropTarget(this.getView().mainBody, this.dropTarget);
         }
         
         
@@ -33523,6 +33587,9 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
                 var ts = this.templates, ct = ts.cell, rt = ts.row;
                 // buffers
                 var buf = "", lbuf = "", cb, lcb, c, p = {}, rp = {}, r, rowIndex;
+                
+                var hasListener = this.grid.hasListener('rowclass');
+                var rowcfg = {};
                 for(var j = 0, len = rs.length; j < len; j++){
                     r = rs[j]; cb = ""; lcb = ""; rowIndex = (j+startRow);
                     for(var i = 0; i < colCount; i++){
@@ -33544,14 +33611,24 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
                     }
                     var alt = [];
                     if(stripe && ((rowIndex+1) % 2 == 0)){
-                        alt[0] = "x-grid-row-alt";
+                        alt.push("x-grid-row-alt")
                     }
                     if(r.dirty){
-                        alt[1] = " x-grid-dirty-row";
+                        alt.push(  " x-grid-dirty-row");
                     }
                     rp.cells = lcb;
                     if(this.getRowClass){
-                        alt[2] = this.getRowClass(r, rowIndex);
+                        alt.push(this.getRowClass(r, rowIndex));
+                    }
+                    if (hasListener) {
+                        rowcfg = {
+                             
+                            record: r,
+                            rowIndex : rowIndex,
+                            rowClass : ''
+                        }
+                        this.grid.fireEvent('rowclass', this, rowcfg);
+                        alt.push(rowcfg.rowClass);
                     }
                     rp.alt = alt.join(" ");
                     lbuf+= rt.apply(rp);
@@ -33564,6 +33641,8 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
                 var ts = this.templates, ct = ts.cell, rt = ts.row;
                 // buffers
                 var buf = [], lbuf = [], cb, lcb, c, p = {}, rp = {}, r, rowIndex;
+                var hasListener = this.grid.hasListener('rowclass');
+                var rowcfg = {};
                 for(var j = 0, len = rs.length; j < len; j++){
                     r = rs[j]; cb = []; lcb = []; rowIndex = (j+startRow);
                     for(var i = 0; i < colCount; i++){
@@ -33585,14 +33664,24 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
                     }
                     var alt = [];
                     if(stripe && ((rowIndex+1) % 2 == 0)){
-                        alt[0] = "x-grid-row-alt";
+                        alt.push( "x-grid-row-alt");
                     }
                     if(r.dirty){
-                        alt[1] = " x-grid-dirty-row";
+                        alt.push(" x-grid-dirty-row");
                     }
                     rp.cells = lcb;
                     if(this.getRowClass){
-                        alt[2] = this.getRowClass(r, rowIndex);
+                        alt.push( this.getRowClass(r, rowIndex));
+                    }
+                    if (hasListener) {
+                        rowcfg = {
+                             
+                            record: r,
+                            rowIndex : rowIndex,
+                            rowClass : ''
+                        }
+                        this.grid.fireEvent('rowclass', this, rowcfg);
+                        alt.push(rowcfg.rowClass);
                     }
                     rp.alt = alt.join(" ");
                     rp.cells = lcb.join("");