Merge branch 'master' of https://github.com/roojs/roojs1 into github
[roojs1] / roojs-ui-debug.js
index d246f0c..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,9 +73,10 @@ Roo.dd.DragDrop = function(id, sGroup, config) {
     if (id) {
         this.init(id, sGroup, config);
     }
+    
 };
 
-Roo.dd.DragDrop.prototype = {
+Roo.extend(Roo.dd.DragDrop, Roo.util.Observable , {
 
     /**
      * The id of the element associated with this object.  This is what we
@@ -1157,7 +1159,7 @@ Roo.dd.DragDrop.prototype = {
         return ("DragDrop " + this.id);
     }
 
-};
+});
 
 })();
 /*
@@ -3000,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();
@@ -3884,14 +3892,87 @@ 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);
     }
-    
-    Roo.dd.DropTarget.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group, 
-          {isTarget: true});
+    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,
+            listeners : listeners || {} 
+           
+        
+        }
+    );
 
 };
 
@@ -3900,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").
@@ -3910,70 +3996,68 @@ Roo.extend(Roo.dd.DropTarget, Roo.dd.DDTarget, {
      * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
      */
     dropNotAllowed : "x-dd-drop-nodrop",
-
+    /**
+     * @cfg {boolean} success
+     * set this after drop listener.. 
+     */
+    success : false,
+    /**
+     * @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,
     // private
     isTarget : true,
 
     // private
     isNotifyTarget : true,
-
+    
     /**
-     * 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.
-     * @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
-     * @return {String} status The CSS class that communicates the drop status back to the source so that the
-     * underlying {@link Roo.dd.StatusProxy} can be updated
+     * @hide
      */
-    notifyEnter : function(dd, e, data){
+    notifyEnter : function(dd, e, data)
+    {
+        this.valid = true;
+        this.fireEvent('enter', dd, e, data);
         if(this.overClass){
             this.el.addClass(this.overClass);
         }
-        return this.dropAllowed;
+        return typeof(this.valid) == 'string' ? 'x-dd-drop-' + this.valid : (
+            this.valid ? this.dropAllowed : this.dropNotAllowed
+        );
     },
 
     /**
-     * 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.
-     * @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
-     * @return {String} status The CSS class that communicates the drop status back to the source so that the
-     * underlying {@link Roo.dd.StatusProxy} can be updated
+     * @hide
      */
-    notifyOver : function(dd, e, data){
-        return this.dropAllowed;
+    notifyOver : function(dd, e, data)
+    {
+        this.valid = true;
+        this.fireEvent('over', dd, e, data);
+        return typeof(this.valid) == 'string' ? 'x-dd-drop-' + this.valid : (
+            this.valid ? this.dropAllowed : this.dropNotAllowed
+        );
     },
 
     /**
-     * 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
+     * @hide
      */
-    notifyOut : function(dd, e, data){
+    notifyOut : function(dd, e, data)
+    {
+        this.fireEvent('out', dd, e, data);
         if(this.overClass){
             this.el.removeClass(this.overClass);
         }
     },
 
     /**
-     * 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.
-     * @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
-     * @return {Boolean} True if the drop was valid, else false
+     * @hide
      */
-    notifyDrop : function(dd, e, data){
-        return false;
+    notifyDrop : function(dd, e, data)
+    {
+        this.success = false;
+        this.fireEvent('drop', dd, e, data);
+        return this.success;
     }
 });/*
  * Based on:
@@ -12740,13 +12824,24 @@ Roo.PagingToolbar = function(el, ds, config)
         ds = el.dataSource;
         el = config.container;
     }
-    
+    var items = [];
+    if (config.items) {
+        items = config.items;
+        config.items = [];
+    }
     
     Roo.PagingToolbar.superclass.constructor.call(this, el, null, config);
     this.ds = ds;
     this.cursor = 0;
     this.renderButtons(this.el);
     this.bind(ds);
+    
+    // supprot items array.
+   
+    Roo.each(items, function(e) {
+        this.add(Roo.factory(e));
+    },this);
+    
 };
 
 Roo.extend(Roo.PagingToolbar, Roo.Toolbar, {
@@ -13825,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);
+    
     },
 
     /**
@@ -15184,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;
     }
     
@@ -22741,14 +22845,18 @@ Roo.extend(Roo.form.ComboBox, Roo.form.TriggerField, {
      */
     valueNotFoundText : undefined,
     /**
-     * @cfg {bool} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
+     * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
      */
     blockFocus : false,
     
     /**
-     * @cfg {bool} disableClear Disable showing of clear button.
+     * @cfg {Boolean} disableClear Disable showing of clear button.
      */
     disableClear : false,
+    /**
+     * @cfg {Boolean} alwaysQuery  Disable caching of results, and always send query
+     */
+    alwaysQuery : false,
     
     //private
     addicon : false,
@@ -23141,7 +23249,7 @@ Roo.extend(Roo.form.ComboBox, Roo.form.TriggerField, {
             dv = !o || typeof(o[this.displayField]) == 'undefined' ? '' : o[this.displayField];
         } else {
             // this is an error condition!!!
-            console.log('no value field set for '+ this.name);
+            Roo.log('no  displayField value set for '+ (this.name ? this.name : this.id));
         }
         
         if(this.valueField){
@@ -23349,7 +23457,7 @@ Roo.extend(Roo.form.ComboBox, Roo.form.TriggerField, {
         q = qe.query;
         forceAll = qe.forceAll;
         if(forceAll === true || (q.length >= this.minChars)){
-            if(this.lastQuery != q){
+            if(this.lastQuery != q || this.alwaysQuery){
                 this.lastQuery = q;
                 if(this.mode == 'local'){
                     this.selectedIndex = -1;
@@ -25884,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).
      */
@@ -25920,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){
@@ -26043,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);
         }
+        
     },
 
     /**
@@ -26420,6 +26539,16 @@ Roo.form.Form = function(config){
         rendered : true
     });
     
+    if (this.progressUrl) {
+            // push a hidden field onto the list of fields..
+            this.addxtype( {
+                    xns: Roo.form, 
+                    xtype : 'Hidden', 
+                    name : 'UPLOAD_IDENTIFIER' 
+            });
+        }
+        
+    
     Roo.each(xitems, this.addxtype, this);
     
     
@@ -26460,7 +26589,12 @@ Roo.extend(Roo.form.Form, Roo.form.BasicForm, {
      * @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
      */
     monitorPoll : 200,
-
+    
+    /**
+     * @cfg {String} progressUrl - Url to return progress data 
+     */
+    
+    progressUrl : false,
   
     /**
      * Opens a new {@link Roo.form.Column} container in the layout stack. If fields are passed after the config, the
@@ -26605,7 +26739,11 @@ Roo.extend(Roo.form.Form, Roo.form.BasicForm, {
      * @param {String/HTMLElement/Element} container The element this component should be rendered into
      * @return {Form} this
      */
-    render : function(ct){
+    render : function(ct)
+    {
+        
+        
+        
         ct = Roo.get(ct);
         var o = this.autoCreate || {
             tag: 'form',
@@ -26615,7 +26753,9 @@ Roo.extend(Roo.form.Form, Roo.form.BasicForm, {
         this.initEl(ct.createChild(o));
 
         this.root.render(this.el);
-
+        
+       
+             
         this.items.each(function(f){
             f.render('x-form-el-'+f.id);
         });
@@ -26852,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);
@@ -26915,6 +27056,75 @@ Roo.form.Action.Submit = function(form, options){
 Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
     type : 'submit',
 
+    haveProgress : false,
+    uploadComplete : false,
+    
+    // uploadProgress indicator.
+    uploadProgress : function()
+    {
+        if (!this.form.progressUrl) {
+            return;
+        }
+        
+        if (!this.haveProgress) {
+            Roo.MessageBox.progress("Uploading", "Uploading");
+        }
+        if (this.uploadComplete) {
+           Roo.MessageBox.hide();
+           return;
+        }
+        
+        this.haveProgress = true;
+   
+        var uid = this.form.findField('UPLOAD_IDENTIFIER').getValue();
+        
+        var c = new Roo.data.Connection();
+        c.request({
+            url : this.form.progressUrl,
+            params: {
+                id : uid
+            },
+            method: 'GET',
+            success : function(req){
+               //console.log(data);
+                var rdata = false;
+                var edata;
+                try  {
+                   rdata = Roo.decode(req.responseText)
+                } catch (e) {
+                    Roo.log("Invalid data from server..");
+                    Roo.log(edata);
+                    return;
+                }
+                if (!rdata || !rdata.success) {
+                    Roo.log(rdata);
+                    return;
+                }
+                var data = rdata.data;
+                
+                if (this.uploadComplete) {
+                   Roo.MessageBox.hide();
+                   return;
+                }
+                   
+                if (data){
+                    Roo.MessageBox.updateProgress(data.bytes_uploaded/data.bytes_total,
+                       Math.floor((data.bytes_total - data.bytes_uploaded)/1000) + 'k remaining'
+                    );
+                }
+                this.uploadProgress.defer(2000,this);
+            },
+       
+            failure: function(data) {
+                Roo.log('progress url failed ');
+                Roo.log(data);
+            },
+            scope : this
+        });
+           
+    },
+    
+    
     run : function()
     {
         // run get Values on the form, so it syncs any secondary forms.
@@ -26924,6 +27134,14 @@ Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
         var method = this.getMethod();
         var isPost = method == 'POST';
         if(o.clientValidation === false || this.form.isValid()){
+            
+            if (this.form.progressUrl) {
+                this.form.findField('UPLOAD_IDENTIFIER').setValue(
+                    (new Date() * 1) + '' + Math.random());
+                    
+            } 
+            
+            
             Roo.Ajax.request(Roo.apply(this.createCallback(), {
                 form:this.form.el.dom,
                 url:this.getUrl(!isPost),
@@ -26931,6 +27149,8 @@ Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
                 params:isPost ? this.getParams() : null,
                 isUpload: this.form.fileUpload
             }));
+            
+            this.uploadProgress();
 
         }else if (o.clientValidation !== false){ // client validation failed
             this.failureType = Roo.form.Action.CLIENT_INVALID;
@@ -26938,7 +27158,14 @@ Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
         }
     },
 
-    success : function(response){
+    success : function(response)
+    {
+        this.uploadComplete= true;
+        if (this.haveProgress) {
+            Roo.MessageBox.hide();
+        }
+        
+        
         var result = this.processResponse(response);
         if(result === true || result.success){
             this.form.afterAction(this, true);
@@ -26950,7 +27177,19 @@ Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
         }
         this.form.afterAction(this, false);
     },
-
+    failure : function(response)
+    {
+        this.uploadComplete= true;
+        if (this.haveProgress) {
+            Roo.MessageBox.hide();
+        }
+        
+        
+        this.response = response;
+        this.failureType = Roo.form.Action.CONNECT_FAILURE;
+        this.form.afterAction(this, false);
+    },
+    
     handleResponse : function(response){
         if(this.form.errorReader){
             var rs = this.form.errorReader.read(response);
@@ -26994,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(),
@@ -27003,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;
@@ -30798,6 +31039,11 @@ Roo.ContentPanel = function(el, config, content){
     });
     if(this.autoScroll){
         this.resizeEl.setStyle("overflow", "auto");
+    } else {
+        // fix randome scrolling
+        this.el.on('scroll', function() {
+            this.scrollTo('top',0); 
+        });
     }
     content = content || this.content;
     if(content){
@@ -31164,6 +31410,7 @@ Roo.NestedLayoutPanel = function(layout, config)
     }
     */
     
+    
     Roo.NestedLayoutPanel.superclass.constructor.call(this, layout.getEl(), config);
     
     layout.monitorWindowResize = false; // turn off autosizing
@@ -31172,6 +31419,7 @@ Roo.NestedLayoutPanel = function(layout, config)
     
     
     
+    
 };
 
 Roo.extend(Roo.NestedLayoutPanel, Roo.ContentPanel, {
@@ -31592,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
@@ -31717,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);
@@ -31906,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,
 
@@ -31956,6 +32215,12 @@ Roo.extend(Roo.grid.Grid, Roo.util.Observable, {
             this.footer.container = this.getView().getFooterPanel(true);
             this.footer = Roo.factory(this.footer, Roo);
         }
+        if (this.dropTarget && this.dropTarget.xtype) {
+            delete this.dropTarget.xtype;
+            this.dropTarget =  new Ext.dd.DropTarget(this.getView().mainBody, this.dropTarget);
+        }
+        
+        
         this.rendered = true;
         this.fireEvent('render', this);
         return this;
@@ -33322,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++){
@@ -33343,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);
@@ -33363,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++){
@@ -33384,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("");