roojs-ui-debug.js
[roojs1] / roojs-debug.js
index 64c452d..76ba5e3 100644 (file)
@@ -567,7 +567,23 @@ Roo.factory(conf, Roo.data);
          * you may want to set this to true.
          * @type Boolean
          */
-        useShims : ((isIE && !isIE7) || (isGecko && isMac))
+        useShims : ((isIE && !isIE7) || (isGecko && isMac)),
+        
+        
+                
+        /**
+         * Selects a single element as a Roo Element
+         * This is about as close as you can get to jQuery's $('do crazy stuff')
+         * @param {String} selector The selector/xpath query
+         * @param {Node} root (optional) The start of the query (defaults to document).
+         * @return {Roo.Element}
+         */
+        selectNode : function(selector, root) 
+        {
+            var node = Roo.DomQuery.selectNode(selector,root);
+            return node ? Roo.get(node) : new Roo.Element(false);
+        }
+        
     });
 
 
@@ -7805,7 +7821,9 @@ if(opt.anim.isAnimated()){
          * @param {Object}   options   (optional)An object with standard {@link Roo.EventManager#addListener} options
          */
         addListener : function(eventName, fn, scope, options){
-            Roo.EventManager.on(this.dom,  eventName, fn, scope || this, options);
+            if (this.dom) {
+                Roo.EventManager.on(this.dom,  eventName, fn, scope || this, options);
+            }
         },
 
         /**
@@ -12261,7 +12279,7 @@ Roo.extend(Roo.util.MixedCollection, Roo.util.Observable, {
         this.fireEvent("add", this.length-1, o, key);
         return o;
     },
-   
+       
 /**
   * MixedCollection has a generic way to fetch keys if you implement getKey.
 <pre><code>
@@ -12770,7 +12788,10 @@ Roo.util.JSON = new (function(){
      * @param {Mixed} o The variable to encode
      * @return {String} The JSON string
      */
-    this.encode = function(o){
+    this.encode = function(o)
+    {
+        // should this be extended to fully wrap stringify..
+        
         if(typeof o == "undefined" || o === null){
             return "null";
         }else if(o instanceof Array){
@@ -12815,19 +12836,19 @@ Roo.util.JSON = new (function(){
      */
     this.decode = function(json){
         
-        return /** eval:var:json */ eval("(" + json + ')');
+        return  /** eval:var:json */ eval("(" + json + ')');
     };
 })();
 /** 
  * Shorthand for {@link Roo.util.JSON#encode}
  * @member Roo encode 
  * @method */
-Roo.encode = Roo.util.JSON.encode;
+Roo.encode = typeof(JSON) != 'undefined' && JSON.stringify ? JSON.stringify : Roo.util.JSON.encode;
 /** 
  * Shorthand for {@link Roo.util.JSON#decode}
  * @member Roo decode 
  * @method */
-Roo.decode = Roo.util.JSON.decode;
+Roo.decode = typeof(JSON) != 'undefined' && JSON.parse ? JSON.parse : Roo.util.JSON.decode;
 /*
  * Based on:
  * Ext JS Library 1.1.1
@@ -12947,6 +12968,46 @@ Roo.util.Format = function(){
             }
         },
 
+       
+        /**
+         * safer version of Math.toFixed..??/
+         * @param {Number/String} value The numeric value to format
+         * @param {Number/String} value Decimal places 
+         * @return {String} The formatted currency string
+         */
+        toFixed : function(v, n)
+        {
+            // why not use to fixed - precision is buggered???
+            if (!n) {
+                return Math.round(v-0);
+            }
+            var fact = Math.pow(10,n+1);
+            v = (Math.round((v-0)*fact))/fact;
+            var z = (''+fact).substring(2);
+            if (v == Math.floor(v)) {
+                return Math.floor(v) + '.' + z;
+            }
+            
+            // now just padd decimals..
+            var ps = String(v).split('.');
+            var fd = (ps[1] + z);
+            var r = fd.substring(0,n); 
+            var rm = fd.substring(n); 
+            if (rm < 5) {
+                return ps[0] + '.' + r;
+            }
+            r*=1; // turn it into a number;
+            r++;
+            if (String(r).length != n) {
+                ps[0]*=1;
+                ps[0]++;
+                r = String(r).substring(1); // chop the end off.
+            }
+            
+            return ps[0] + '.' + r;
+             
+        },
+        
         /**
          * Format a number as US currency
          * @param {Number/String} value The numeric value to format
@@ -12965,7 +13026,7 @@ Roo.util.Format = function(){
             }
             return "$" + whole + sub ;
         },
-
+        
         /**
          * Parse a value into a formatted date using the specified format pattern.
          * @param {Mixed} value The value to format
@@ -14356,6 +14417,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.
@@ -14402,9 +14464,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
@@ -15487,7 +15550,7 @@ Roo.dd.DragDrop.prototype = {
         return ("DragDrop " + this.id);
     }
 
-};
+});
 
 })();
 /*
@@ -17330,6 +17393,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();
@@ -18214,14 +18283,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 || {} 
+           
+        
+        }
+    );
 
 };
 
@@ -18230,6 +18372,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").
@@ -18240,70 +18387,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:
@@ -25776,11 +25921,13 @@ Roo.Button = function(renderTo, config)
     if(this.menu){
         this.menu = Roo.menu.MenuMgr.get(this.menu);
     }
+    // register listeners first!!  - so render can be captured..
+    Roo.util.Observable.call(this);
     if(renderTo){
         this.render(renderTo);
     }
     
-    Roo.util.Observable.call(this);
+  
 };
 
 Roo.extend(Roo.Button, Roo.util.Observable, {
@@ -25956,6 +26103,7 @@ Roo.extend(Roo.Button, Roo.util.Observable, {
             );
             repeater.on("click", this.onClick,  this);
         }
+        
         this.fireEvent('render', this);
         
     },
@@ -27067,13 +27215,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, {
@@ -28152,16 +28311,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);
+    
     },
 
     /**
@@ -28938,7 +29105,7 @@ Roo.extend(Roo.BasicDialog, Roo.util.Observable, {
 
     // private
     animShow : function(){
-        var b = Roo.get(this.animateTarget, true).getBox();
+        var b = Roo.get(this.animateTarget).getBox();
         this.proxy.setSize(b.width, b.height);
         this.proxy.setLocation(b.x, b.y);
         this.proxy.show();
@@ -28964,7 +29131,7 @@ Roo.extend(Roo.BasicDialog, Roo.util.Observable, {
         this.animateTarget = animateTarget || this.animateTarget;
         if(!this.el.isVisible()){
             this.beforeShow();
-            if(this.animateTarget){
+            if(this.animateTarget && Roo.get(this.animateTarget)){
                 this.animShow();
             }else{
                 this.showEl();
@@ -35179,7 +35346,14 @@ side          Add an error icon to the right of the field with a popup on hover
              * Fires after the field has been validated with no errors.
              * @param {Roo.form.Field} this
              */
-            valid : true
+            valid : true,
+             /**
+             * @event keyup
+             * Fires after the key up
+             * @param {Roo.form.Field} this
+             * @param {Roo.EventObject}  e The event Object
+             */
+            keyup : true
         });
     },
 
@@ -35281,6 +35455,7 @@ side          Add an error icon to the right of the field with a popup on hover
         this.el.on("keydown" , this.fireKey,  this);
         this.el.on("focus", this.onFocus,  this);
         this.el.on("blur", this.onBlur,  this);
+        this.el.relayEvent('keyup', this);
 
         // reference to original value for reset
         this.originalValue = this.getValue();
@@ -37060,14 +37235,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,
@@ -37460,7 +37639,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){
@@ -37668,7 +37847,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;
@@ -37778,8 +37957,26 @@ Roo.extend(Roo.form.ComboBox, Roo.form.TriggerField, {
         var k = String.fromCharCode(e.getKey()).toUpperCase();
         //Roo.log(k);
         var match  = false;
+        var csel = this.view.getSelectedNodes();
+        var cselitem = false;
+        if (csel.length) {
+            var ix = this.view.indexOf(csel[0]);
+            cselitem  = this.store.getAt(ix);
+            if (!cselitem.get(this.displayField) || cselitem.get(this.displayField).substring(0,1).toUpperCase() != k) {
+                cselitem = false;
+            }
+            
+        }
         
         this.store.each(function(v) { 
+            if (cselitem) {
+                // start at existing selection.
+                if (cselitem.id == v.id) {
+                    cselitem = false;
+                }
+                return;
+            }
+                
             if (v.get(this.displayField) && v.get(this.displayField).substring(0,1).toUpperCase() == k) {
                 match = this.store.indexOf(v);
                 return false;
@@ -37997,7 +38194,7 @@ Roo.extend(Roo.form.Checkbox, Roo.form.Field,  {
         }
         this.checked = state;
         if(suppressEvent !== true){
-            this.fireEvent('checkchange', this, state);
+            this.fireEvent('check', this, state);
         }
         this.inSetChecked = true;
         this.el.dom.value = state ? this.inputValue : this.valueOff;
@@ -40185,10 +40382,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).
      */
@@ -40221,7 +40421,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){
@@ -40344,42 +40544,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);
         }
+        
     },
 
     /**
@@ -40721,6 +40929,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);
     
     
@@ -40761,7 +40979,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
@@ -40906,7 +41129,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',
@@ -40916,7 +41143,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);
         });
@@ -41153,6 +41382,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);
@@ -41216,6 +41446,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.
@@ -41225,6 +41524,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),
@@ -41232,6 +41539,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;
@@ -41239,7 +41548,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);
@@ -41251,7 +41567,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);
@@ -41295,6 +41623,7 @@ Roo.extend(Roo.form.Action.Load, Roo.form.Action, {
     type : 'load',
 
     run : function(){
+        
         Roo.Ajax.request(Roo.apply(
                 this.createCallback(), {
                     method:this.getMethod(),
@@ -41304,6 +41633,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;
@@ -42074,6 +42404,14 @@ function FCKeditor_OnComplete(editorInstance){
  * @extends Roo.form.Field
  * Embed a grid (or editable grid into a form)
  * STATUS ALPHA
+ * 
+ * This embeds a grid in a form, the value of the field should be the json encoded array of rows
+ * it needs 
+ * xgrid.store = Roo.data.Store
+ * xgrid.store.proxy = Roo.data.MemoryProxy (data = [] )
+ * xgrid.store.reader = Roo.data.JsonReader 
+ * 
+ * 
  * @constructor
  * Creates a new GridField
  * @param {Object} config Configuration options
@@ -45091,6 +45429,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){
@@ -45457,6 +45800,7 @@ Roo.NestedLayoutPanel = function(layout, config)
     }
     */
     
+    
     Roo.NestedLayoutPanel.superclass.constructor.call(this, layout.getEl(), config);
     
     layout.monitorWindowResize = false; // turn off autosizing
@@ -45465,6 +45809,7 @@ Roo.NestedLayoutPanel = function(layout, config)
     
     
     
+    
 };
 
 Roo.extend(Roo.NestedLayoutPanel, Roo.ContentPanel, {
@@ -46199,7 +46544,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,
 
@@ -46249,6 +46597,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;
@@ -48077,6 +48431,11 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
         this.grid.getGridEl().dom.innerHTML = html;
 
         this.initElements();
+        
+        // a kludge to fix the random scolling effect in webkit
+        this.el.on("scroll", function() {
+            this.el.dom.scrollTop=0; // hopefully not recursive..
+        },this);
 
         this.scroller.on("scroll", this.handleScroll, this);
         this.lockedBody.on("mousewheel", this.handleWheel, this);
@@ -49863,11 +50222,17 @@ Roo.extend(Roo.grid.EditorGrid, Roo.grid.Grid, {
             
             if(this.fireEvent("validateedit", e) !== false && !e.cancel){
                 r.set(field, e.value);
+                // if we are dealing with a combo box..
+                // then we also set the 'name' colum to be the displayField
+                if (ed.field.displayField && ed.field.name) {
+                    r.set(ed.field.name, ed.field.el.dom.value);
+                }
+                
                 delete e.cancel; //?? why!!!
                 this.fireEvent("afteredit", e);
             }
         } else {
-            this.fireEvent("afteredit", e); // always fir it!
+            this.fireEvent("afteredit", e); // always fire it!
         }
         this.view.focusCell(ed.row, ed.col);
     },
@@ -49912,6 +50277,12 @@ Roo.extend(Roo.grid.EditorGrid, Roo.grid.Grid, {
                     this.activeEditor = ed;
                     var v = r.data[field];
                     ed.startEdit(this.view.getCell(row, col), v);
+                    // combo's with 'displayField and name set
+                    if (ed.field.displayField && ed.field.name) {
+                        ed.field.el.dom.value = r.data[ed.field.name];
+                    }
+                    
+                    
                 }).defer(50, this);
             }
         }