X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=roojs-ui-debug.js;h=88b86114a5b961c4520389bea6dee6d4254cabd7;hb=refs%2Fheads%2Fgithub.com.roojs1.master;hp=080b7d96ac1795e8c0af8cc9aca858e16410c7db;hpb=335c8c4c7d1493021efef08f6d2a8004ef17735a;p=roojs1

diff --git a/roojs-ui-debug.js b/roojs-ui-debug.js
index 080b7d96ac..88b86114a5 100644
--- a/roojs-ui-debug.js
+++ b/roojs-ui-debug.js
@@ -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:
@@ -13836,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);
+    
     },
 
     /**
@@ -15195,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;
     }
     
@@ -21868,4 +21961,15529 @@ Roo.form.TwinTriggerField = Roo.extend(Roo.form.TriggerField, {
 
     onTrigger1Click : Roo.emptyFn,
     onTrigger2Click : Roo.emptyFn
-});
\ No newline at end of file
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+/**
+ * @class Roo.form.TextArea
+ * @extends Roo.form.TextField
+ * Multiline text field.  Can be used as a direct replacement for traditional textarea fields, plus adds
+ * support for auto-sizing.
+ * @constructor
+ * Creates a new TextArea
+ * @param {Object} config Configuration options
+ */
+Roo.form.TextArea = function(config){
+    Roo.form.TextArea.superclass.constructor.call(this, config);
+    // these are provided exchanges for backwards compat
+    // minHeight/maxHeight were replaced by growMin/growMax to be
+    // compatible with TextField growing config values
+    if(this.minHeight !== undefined){
+        this.growMin = this.minHeight;
+    }
+    if(this.maxHeight !== undefined){
+        this.growMax = this.maxHeight;
+    }
+};
+
+Roo.extend(Roo.form.TextArea, Roo.form.TextField,  {
+    /**
+     * @cfg {Number} growMin The minimum height to allow when grow = true (defaults to 60)
+     */
+    growMin : 60,
+    /**
+     * @cfg {Number} growMax The maximum height to allow when grow = true (defaults to 1000)
+     */
+    growMax: 1000,
+    /**
+     * @cfg {Boolean} preventScrollbars True to prevent scrollbars from appearing regardless of how much text is
+     * in the field (equivalent to setting overflow: hidden, defaults to false)
+     */
+    preventScrollbars: false,
+    /**
+     * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+     * {tag: "textarea", style: "width:300px;height:60px;", autocomplete: "off"})
+     */
+
+    // private
+    onRender : function(ct, position){
+        if(!this.el){
+            this.defaultAutoCreate = {
+                tag: "textarea",
+                style:"width:300px;height:60px;",
+                autocomplete: "off"
+            };
+        }
+        Roo.form.TextArea.superclass.onRender.call(this, ct, position);
+        if(this.grow){
+            this.textSizeEl = Roo.DomHelper.append(document.body, {
+                tag: "pre", cls: "x-form-grow-sizer"
+            });
+            if(this.preventScrollbars){
+                this.el.setStyle("overflow", "hidden");
+            }
+            this.el.setHeight(this.growMin);
+        }
+    },
+
+    onDestroy : function(){
+        if(this.textSizeEl){
+            this.textSizeEl.parentNode.removeChild(this.textSizeEl);
+        }
+        Roo.form.TextArea.superclass.onDestroy.call(this);
+    },
+
+    // private
+    onKeyUp : function(e){
+        if(!e.isNavKeyPress() || e.getKey() == e.ENTER){
+            this.autoSize();
+        }
+    },
+
+    /**
+     * Automatically grows the field to accomodate the height of the text up to the maximum field height allowed.
+     * This only takes effect if grow = true, and fires the autosize event if the height changes.
+     */
+    autoSize : function(){
+        if(!this.grow || !this.textSizeEl){
+            return;
+        }
+        var el = this.el;
+        var v = el.dom.value;
+        var ts = this.textSizeEl;
+
+        ts.innerHTML = '';
+        ts.appendChild(document.createTextNode(v));
+        v = ts.innerHTML;
+
+        Roo.fly(ts).setWidth(this.el.getWidth());
+        if(v.length < 1){
+            v = "&#160;&#160;";
+        }else{
+            if(Roo.isIE){
+                v = v.replace(/\n/g, '<p>&#160;</p>');
+            }
+            v += "&#160;\n&#160;";
+        }
+        ts.innerHTML = v;
+        var h = Math.min(this.growMax, Math.max(ts.offsetHeight, this.growMin));
+        if(h != this.lastHeight){
+            this.lastHeight = h;
+            this.el.setHeight(h);
+            this.fireEvent("autosize", this, h);
+        }
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+
+/**
+ * @class Roo.form.NumberField
+ * @extends Roo.form.TextField
+ * Numeric text field that provides automatic keystroke filtering and numeric validation.
+ * @constructor
+ * Creates a new NumberField
+ * @param {Object} config Configuration options
+ */
+Roo.form.NumberField = function(config){
+    Roo.form.NumberField.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.form.NumberField, Roo.form.TextField,  {
+    /**
+     * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field x-form-num-field")
+     */
+    fieldClass: "x-form-field x-form-num-field",
+    /**
+     * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
+     */
+    allowDecimals : true,
+    /**
+     * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
+     */
+    decimalSeparator : ".",
+    /**
+     * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
+     */
+    decimalPrecision : 2,
+    /**
+     * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)
+     */
+    allowNegative : true,
+    /**
+     * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
+     */
+    minValue : Number.NEGATIVE_INFINITY,
+    /**
+     * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE)
+     */
+    maxValue : Number.MAX_VALUE,
+    /**
+     * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
+     */
+    minText : "The minimum value for this field is {0}",
+    /**
+     * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
+     */
+    maxText : "The maximum value for this field is {0}",
+    /**
+     * @cfg {String} nanText Error text to display if the value is not a valid number.  For example, this can happen
+     * if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
+     */
+    nanText : "{0} is not a valid number",
+
+    // private
+    initEvents : function(){
+        Roo.form.NumberField.superclass.initEvents.call(this);
+        var allowed = "0123456789";
+        if(this.allowDecimals){
+            allowed += this.decimalSeparator;
+        }
+        if(this.allowNegative){
+            allowed += "-";
+        }
+        this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');
+        var keyPress = function(e){
+            var k = e.getKey();
+            if(!Roo.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
+                return;
+            }
+            var c = e.getCharCode();
+            if(allowed.indexOf(String.fromCharCode(c)) === -1){
+                e.stopEvent();
+            }
+        };
+        this.el.on("keypress", keyPress, this);
+    },
+
+    // private
+    validateValue : function(value){
+        if(!Roo.form.NumberField.superclass.validateValue.call(this, value)){
+            return false;
+        }
+        if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
+             return true;
+        }
+        var num = this.parseValue(value);
+        if(isNaN(num)){
+            this.markInvalid(String.format(this.nanText, value));
+            return false;
+        }
+        if(num < this.minValue){
+            this.markInvalid(String.format(this.minText, this.minValue));
+            return false;
+        }
+        if(num > this.maxValue){
+            this.markInvalid(String.format(this.maxText, this.maxValue));
+            return false;
+        }
+        return true;
+    },
+
+    getValue : function(){
+        return this.fixPrecision(this.parseValue(Roo.form.NumberField.superclass.getValue.call(this)));
+    },
+
+    // private
+    parseValue : function(value){
+        value = parseFloat(String(value).replace(this.decimalSeparator, "."));
+        return isNaN(value) ? '' : value;
+    },
+
+    // private
+    fixPrecision : function(value){
+        var nan = isNaN(value);
+        if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
+            return nan ? '' : value;
+        }
+        return parseFloat(value).toFixed(this.decimalPrecision);
+    },
+
+    setValue : function(v){
+        Roo.form.NumberField.superclass.setValue.call(this, String(v).replace(".", this.decimalSeparator));
+    },
+
+    // private
+    decimalPrecisionFcn : function(v){
+        return Math.floor(v);
+    },
+
+    beforeBlur : function(){
+        var v = this.parseValue(this.getRawValue());
+        if(v){
+            this.setValue(this.fixPrecision(v));
+        }
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+/**
+ * @class Roo.form.DateField
+ * @extends Roo.form.TriggerField
+ * Provides a date input field with a {@link Roo.DatePicker} dropdown and automatic date validation.
+* @constructor
+* Create a new DateField
+* @param {Object} config
+ */
+Roo.form.DateField = function(config){
+    Roo.form.DateField.superclass.constructor.call(this, config);
+    
+      this.addEvents({
+         
+        /**
+         * @event select
+         * Fires when a date is selected
+	     * @param {Roo.form.DateField} combo This combo box
+	     * @param {Date} date The date selected
+	     */
+        'select' : true
+         
+    });
+    
+    
+    if(typeof this.minValue == "string") this.minValue = this.parseDate(this.minValue);
+    if(typeof this.maxValue == "string") this.maxValue = this.parseDate(this.maxValue);
+    this.ddMatch = null;
+    if(this.disabledDates){
+        var dd = this.disabledDates;
+        var re = "(?:";
+        for(var i = 0; i < dd.length; i++){
+            re += dd[i];
+            if(i != dd.length-1) re += "|";
+        }
+        this.ddMatch = new RegExp(re + ")");
+    }
+};
+
+Roo.extend(Roo.form.DateField, Roo.form.TriggerField,  {
+    /**
+     * @cfg {String} format
+     * The default date format string which can be overriden for localization support.  The format must be
+     * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
+     */
+    format : "m/d/y",
+    /**
+     * @cfg {String} altFormats
+     * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
+     * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d').
+     */
+    altFormats : "m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d",
+    /**
+     * @cfg {Array} disabledDays
+     * An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
+     */
+    disabledDays : null,
+    /**
+     * @cfg {String} disabledDaysText
+     * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
+     */
+    disabledDaysText : "Disabled",
+    /**
+     * @cfg {Array} disabledDates
+     * An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular
+     * expression so they are very powerful. Some examples:
+     * <ul>
+     * <li>["03/08/2003", "09/16/2003"] would disable those exact dates</li>
+     * <li>["03/08", "09/16"] would disable those days for every year</li>
+     * <li>["^03/08"] would only match the beginning (useful if you are using short years)</li>
+     * <li>["03/../2006"] would disable every day in March 2006</li>
+     * <li>["^03"] would disable every day in every March</li>
+     * </ul>
+     * In order to support regular expressions, if you are using a date format that has "." in it, you will have to
+     * escape the dot when restricting dates. For example: ["03\\.08\\.03"].
+     */
+    disabledDates : null,
+    /**
+     * @cfg {String} disabledDatesText
+     * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
+     */
+    disabledDatesText : "Disabled",
+    /**
+     * @cfg {Date/String} minValue
+     * The minimum allowed date. Can be either a Javascript date object or a string date in a
+     * valid format (defaults to null).
+     */
+    minValue : null,
+    /**
+     * @cfg {Date/String} maxValue
+     * The maximum allowed date. Can be either a Javascript date object or a string date in a
+     * valid format (defaults to null).
+     */
+    maxValue : null,
+    /**
+     * @cfg {String} minText
+     * The error text to display when the date in the cell is before minValue (defaults to
+     * 'The date in this field must be after {minValue}').
+     */
+    minText : "The date in this field must be equal to or after {0}",
+    /**
+     * @cfg {String} maxText
+     * The error text to display when the date in the cell is after maxValue (defaults to
+     * 'The date in this field must be before {maxValue}').
+     */
+    maxText : "The date in this field must be equal to or before {0}",
+    /**
+     * @cfg {String} invalidText
+     * The error text to display when the date in the field is invalid (defaults to
+     * '{value} is not a valid date - it must be in the format {format}').
+     */
+    invalidText : "{0} is not a valid date - it must be in the format {1}",
+    /**
+     * @cfg {String} triggerClass
+     * An additional CSS class used to style the trigger button.  The trigger will always get the
+     * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-date-trigger'
+     * which displays a calendar icon).
+     */
+    triggerClass : 'x-form-date-trigger',
+    
+
+    /**
+     * @cfg {bool} useIso
+     * if enabled, then the date field will use a hidden field to store the 
+     * real value as iso formated date. default (false)
+     */ 
+    useIso : false,
+    /**
+     * @cfg {String/Object} autoCreate
+     * A DomHelper element spec, or true for a default element spec (defaults to
+     * {tag: "input", type: "text", size: "10", autocomplete: "off"})
+     */ 
+    // private
+    defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "off"},
+    
+    // private
+    hiddenField: false,
+    
+    onRender : function(ct, position)
+    {
+        Roo.form.DateField.superclass.onRender.call(this, ct, position);
+        if (this.useIso) {
+            this.el.dom.removeAttribute('name'); 
+            this.hiddenField = this.el.insertSibling({ tag:'input', type:'hidden', name: this.name },
+                    'before', true);
+            this.hiddenField.value = this.formatDate(this.value, 'Y-m-d');
+            // prevent input submission
+            this.hiddenName = this.name;
+        }
+            
+            
+    },
+    
+    // private
+    validateValue : function(value)
+    {
+        value = this.formatDate(value);
+        if(!Roo.form.DateField.superclass.validateValue.call(this, value)){
+            return false;
+        }
+        if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
+             return true;
+        }
+        var svalue = value;
+        value = this.parseDate(value);
+        if(!value){
+            this.markInvalid(String.format(this.invalidText, svalue, this.format));
+            return false;
+        }
+        var time = value.getTime();
+        if(this.minValue && time < this.minValue.getTime()){
+            this.markInvalid(String.format(this.minText, this.formatDate(this.minValue)));
+            return false;
+        }
+        if(this.maxValue && time > this.maxValue.getTime()){
+            this.markInvalid(String.format(this.maxText, this.formatDate(this.maxValue)));
+            return false;
+        }
+        if(this.disabledDays){
+            var day = value.getDay();
+            for(var i = 0; i < this.disabledDays.length; i++) {
+            	if(day === this.disabledDays[i]){
+            	    this.markInvalid(this.disabledDaysText);
+                    return false;
+            	}
+            }
+        }
+        var fvalue = this.formatDate(value);
+        if(this.ddMatch && this.ddMatch.test(fvalue)){
+            this.markInvalid(String.format(this.disabledDatesText, fvalue));
+            return false;
+        }
+        return true;
+    },
+
+    // private
+    // Provides logic to override the default TriggerField.validateBlur which just returns true
+    validateBlur : function(){
+        return !this.menu || !this.menu.isVisible();
+    },
+
+    /**
+     * Returns the current date value of the date field.
+     * @return {Date} The date value
+     */
+    getValue : function(){
+        
+        return  this.hiddenField ? this.hiddenField.value : this.parseDate(Roo.form.DateField.superclass.getValue.call(this)) || "";
+    },
+
+    /**
+     * Sets the value of the date field.  You can pass a date object or any string that can be parsed into a valid
+     * date, using DateField.format as the date format, according to the same rules as {@link Date#parseDate}
+     * (the default format used is "m/d/y").
+     * <br />Usage:
+     * <pre><code>
+//All of these calls set the same date value (May 4, 2006)
+
+//Pass a date object:
+var dt = new Date('5/4/06');
+dateField.setValue(dt);
+
+//Pass a date string (default format):
+dateField.setValue('5/4/06');
+
+//Pass a date string (custom format):
+dateField.format = 'Y-m-d';
+dateField.setValue('2006-5-4');
+</code></pre>
+     * @param {String/Date} date The date or valid date string
+     */
+    setValue : function(date){
+        if (this.hiddenField) {
+            this.hiddenField.value = this.formatDate(this.parseDate(date), 'Y-m-d');
+        }
+        Roo.form.DateField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
+    },
+
+    // private
+    parseDate : function(value){
+        if(!value || value instanceof Date){
+            return value;
+        }
+        var v = Date.parseDate(value, this.format);
+        if(!v && this.altFormats){
+            if(!this.altFormatsArray){
+                this.altFormatsArray = this.altFormats.split("|");
+            }
+            for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
+                v = Date.parseDate(value, this.altFormatsArray[i]);
+            }
+        }
+        return v;
+    },
+
+    // private
+    formatDate : function(date, fmt){
+        return (!date || !(date instanceof Date)) ?
+               date : date.dateFormat(fmt || this.format);
+    },
+
+    // private
+    menuListeners : {
+        select: function(m, d){
+            this.setValue(d);
+            this.fireEvent('select', this, d);
+        },
+        show : function(){ // retain focus styling
+            this.onFocus();
+        },
+        hide : function(){
+            this.focus.defer(10, this);
+            var ml = this.menuListeners;
+            this.menu.un("select", ml.select,  this);
+            this.menu.un("show", ml.show,  this);
+            this.menu.un("hide", ml.hide,  this);
+        }
+    },
+
+    // private
+    // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
+    onTriggerClick : function(){
+        if(this.disabled){
+            return;
+        }
+        if(this.menu == null){
+            this.menu = new Roo.menu.DateMenu();
+        }
+        Roo.apply(this.menu.picker,  {
+            showClear: this.allowBlank,
+            minDate : this.minValue,
+            maxDate : this.maxValue,
+            disabledDatesRE : this.ddMatch,
+            disabledDatesText : this.disabledDatesText,
+            disabledDays : this.disabledDays,
+            disabledDaysText : this.disabledDaysText,
+            format : this.format,
+            minText : String.format(this.minText, this.formatDate(this.minValue)),
+            maxText : String.format(this.maxText, this.formatDate(this.maxValue))
+        });
+        this.menu.on(Roo.apply({}, this.menuListeners, {
+            scope:this
+        }));
+        this.menu.picker.setValue(this.getValue() || new Date());
+        this.menu.show(this.el, "tl-bl?");
+    },
+
+    beforeBlur : function(){
+        var v = this.parseDate(this.getRawValue());
+        if(v){
+            this.setValue(v);
+        }
+    }
+
+    /** @cfg {Boolean} grow @hide */
+    /** @cfg {Number} growMin @hide */
+    /** @cfg {Number} growMax @hide */
+    /**
+     * @hide
+     * @method autoSize
+     */
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+
+/**
+ * @class Roo.form.ComboBox
+ * @extends Roo.form.TriggerField
+ * A combobox control with support for autocomplete, remote-loading, paging and many other features.
+ * @constructor
+ * Create a new ComboBox.
+ * @param {Object} config Configuration options
+ */
+Roo.form.ComboBox = function(config){
+    Roo.form.ComboBox.superclass.constructor.call(this, config);
+    this.addEvents({
+        /**
+         * @event expand
+         * Fires when the dropdown list is expanded
+	     * @param {Roo.form.ComboBox} combo This combo box
+	     */
+        'expand' : true,
+        /**
+         * @event collapse
+         * Fires when the dropdown list is collapsed
+	     * @param {Roo.form.ComboBox} combo This combo box
+	     */
+        'collapse' : true,
+        /**
+         * @event beforeselect
+         * Fires before a list item is selected. Return false to cancel the selection.
+	     * @param {Roo.form.ComboBox} combo This combo box
+	     * @param {Roo.data.Record} record The data record returned from the underlying store
+	     * @param {Number} index The index of the selected item in the dropdown list
+	     */
+        'beforeselect' : true,
+        /**
+         * @event select
+         * Fires when a list item is selected
+	     * @param {Roo.form.ComboBox} combo This combo box
+	     * @param {Roo.data.Record} record The data record returned from the underlying store (or false on clear)
+	     * @param {Number} index The index of the selected item in the dropdown list
+	     */
+        'select' : true,
+        /**
+         * @event beforequery
+         * Fires before all queries are processed. Return false to cancel the query or set cancel to true.
+         * The event object passed has these properties:
+	     * @param {Roo.form.ComboBox} combo This combo box
+	     * @param {String} query The query
+	     * @param {Boolean} forceAll true to force "all" query
+	     * @param {Boolean} cancel true to cancel the query
+	     * @param {Object} e The query event object
+	     */
+        'beforequery': true,
+         /**
+         * @event add
+         * Fires when the 'add' icon is pressed (add a listener to enable add button)
+	     * @param {Roo.form.ComboBox} combo This combo box
+	     */
+        'add' : true,
+        /**
+         * @event edit
+         * Fires when the 'edit' icon is pressed (add a listener to enable add button)
+	     * @param {Roo.form.ComboBox} combo This combo box
+	     * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
+	     */
+        'edit' : true
+        
+        
+    });
+    if(this.transform){
+        this.allowDomMove = false;
+        var s = Roo.getDom(this.transform);
+        if(!this.hiddenName){
+            this.hiddenName = s.name;
+        }
+        if(!this.store){
+            this.mode = 'local';
+            var d = [], opts = s.options;
+            for(var i = 0, len = opts.length;i < len; i++){
+                var o = opts[i];
+                var value = (Roo.isIE ? o.getAttributeNode('value').specified : o.hasAttribute('value')) ? o.value : o.text;
+                if(o.selected) {
+                    this.value = value;
+                }
+                d.push([value, o.text]);
+            }
+            this.store = new Roo.data.SimpleStore({
+                'id': 0,
+                fields: ['value', 'text'],
+                data : d
+            });
+            this.valueField = 'value';
+            this.displayField = 'text';
+        }
+        s.name = Roo.id(); // wipe out the name in case somewhere else they have a reference
+        if(!this.lazyRender){
+            this.target = true;
+            this.el = Roo.DomHelper.insertBefore(s, this.autoCreate || this.defaultAutoCreate);
+            s.parentNode.removeChild(s); // remove it
+            this.render(this.el.parentNode);
+        }else{
+            s.parentNode.removeChild(s); // remove it
+        }
+
+    }
+    if (this.store) {
+        this.store = Roo.factory(this.store, Roo.data);
+    }
+    
+    this.selectedIndex = -1;
+    if(this.mode == 'local'){
+        if(config.queryDelay === undefined){
+            this.queryDelay = 10;
+        }
+        if(config.minChars === undefined){
+            this.minChars = 0;
+        }
+    }
+};
+
+Roo.extend(Roo.form.ComboBox, Roo.form.TriggerField, {
+    /**
+     * @cfg {String/HTMLElement/Element} transform The id, DOM node or element of an existing select to convert to a ComboBox
+     */
+    /**
+     * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
+     * rendering into an Roo.Editor, defaults to false)
+     */
+    /**
+     * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:
+     * {tag: "input", type: "text", size: "24", autocomplete: "off"})
+     */
+    /**
+     * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
+     */
+    /**
+     * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
+     * the dropdown list (defaults to undefined, with no header element)
+     */
+
+     /**
+     * @cfg {String/Roo.Template} tpl The template to use to render the output
+     */
+     
+    // private
+    defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},
+    /**
+     * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
+     */
+    listWidth: undefined,
+    /**
+     * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
+     * mode = 'remote' or 'text' if mode = 'local')
+     */
+    displayField: undefined,
+    /**
+     * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
+     * mode = 'remote' or 'value' if mode = 'local'). 
+     * Note: use of a valueField requires the user make a selection
+     * in order for a value to be mapped.
+     */
+    valueField: undefined,
+    /**
+     * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
+     * field's data value (defaults to the underlying DOM element's name)
+     */
+    hiddenName: undefined,
+    /**
+     * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
+     */
+    listClass: '',
+    /**
+     * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
+     */
+    selectedClass: 'x-combo-selected',
+    /**
+     * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
+     * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-arrow-trigger'
+     * which displays a downward arrow icon).
+     */
+    triggerClass : 'x-form-arrow-trigger',
+    /**
+     * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
+     */
+    shadow:'sides',
+    /**
+     * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
+     * anchor positions (defaults to 'tl-bl')
+     */
+    listAlign: 'tl-bl?',
+    /**
+     * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
+     */
+    maxHeight: 300,
+    /**
+     * @cfg {String} triggerAction The action to execute when the trigger field is activated.  Use 'all' to run the
+     * query specified by the allQuery config option (defaults to 'query')
+     */
+    triggerAction: 'query',
+    /**
+     * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
+     * (defaults to 4, does not apply if editable = false)
+     */
+    minChars : 4,
+    /**
+     * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
+     * delay (typeAheadDelay) if it matches a known value (defaults to false)
+     */
+    typeAhead: false,
+    /**
+     * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the
+     * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')
+     */
+    queryDelay: 500,
+    /**
+     * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the
+     * filter queries will execute with page start and limit parameters.  Only applies when mode = 'remote' (defaults to 0)
+     */
+    pageSize: 0,
+    /**
+     * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus.  Only applies
+     * when editable = true (defaults to false)
+     */
+    selectOnFocus:false,
+    /**
+     * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
+     */
+    queryParam: 'query',
+    /**
+     * @cfg {String} loadingText The text to display in the dropdown list while data is loading.  Only applies
+     * when mode = 'remote' (defaults to 'Loading...')
+     */
+    loadingText: 'Loading...',
+    /**
+     * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
+     */
+    resizable: false,
+    /**
+     * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
+     */
+    handleHeight : 8,
+    /**
+     * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
+     * traditional select (defaults to true)
+     */
+    editable: true,
+    /**
+     * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
+     */
+    allQuery: '',
+    /**
+     * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
+     */
+    mode: 'remote',
+    /**
+     * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
+     * listWidth has a higher value)
+     */
+    minListWidth : 70,
+    /**
+     * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to
+     * allow the user to set arbitrary text into the field (defaults to false)
+     */
+    forceSelection:false,
+    /**
+     * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
+     * if typeAhead = true (defaults to 250)
+     */
+    typeAheadDelay : 250,
+    /**
+     * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
+     * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)
+     */
+    valueNotFoundText : undefined,
+    /**
+     * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
+     */
+    blockFocus : false,
+    
+    /**
+     * @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,
+    editicon: false,
+    
+    
+    // private
+    onRender : function(ct, position){
+        Roo.form.ComboBox.superclass.onRender.call(this, ct, position);
+        if(this.hiddenName){
+            this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id:  (this.hiddenId||this.hiddenName)},
+                    'before', true);
+            this.hiddenField.value =
+                this.hiddenValue !== undefined ? this.hiddenValue :
+                this.value !== undefined ? this.value : '';
+
+            // prevent input submission
+            this.el.dom.removeAttribute('name');
+        }
+        if(Roo.isGecko){
+            this.el.dom.setAttribute('autocomplete', 'off');
+        }
+
+        var cls = 'x-combo-list';
+
+        this.list = new Roo.Layer({
+            shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
+        });
+
+        var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
+        this.list.setWidth(lw);
+        this.list.swallowEvent('mousewheel');
+        this.assetHeight = 0;
+
+        if(this.title){
+            this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
+            this.assetHeight += this.header.getHeight();
+        }
+
+        this.innerList = this.list.createChild({cls:cls+'-inner'});
+        this.innerList.on('mouseover', this.onViewOver, this);
+        this.innerList.on('mousemove', this.onViewMove, this);
+        this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
+        
+        if(this.allowBlank && !this.pageSize && !this.disableClear){
+            this.footer = this.list.createChild({cls:cls+'-ft'});
+            this.pageTb = new Roo.Toolbar(this.footer);
+           
+        }
+        if(this.pageSize){
+            this.footer = this.list.createChild({cls:cls+'-ft'});
+            this.pageTb = new Roo.PagingToolbar(this.footer, this.store,
+                    {pageSize: this.pageSize});
+            
+        }
+        
+        if (this.pageTb && this.allowBlank && !this.disableClear) {
+            var _this = this;
+            this.pageTb.add(new Roo.Toolbar.Fill(), {
+                cls: 'x-btn-icon x-btn-clear',
+                text: '&#160;',
+                handler: function()
+                {
+                    _this.collapse();
+                    _this.clearValue();
+                    _this.onSelect(false, -1);
+                }
+            });
+        }
+        if (this.footer) {
+            this.assetHeight += this.footer.getHeight();
+        }
+        
+
+        if(!this.tpl){
+            this.tpl = '<div class="'+cls+'-item">{' + this.displayField + '}</div>';
+        }
+
+        this.view = new Roo.View(this.innerList, this.tpl, {
+            singleSelect:true, store: this.store, selectedClass: this.selectedClass
+        });
+
+        this.view.on('click', this.onViewClick, this);
+
+        this.store.on('beforeload', this.onBeforeLoad, this);
+        this.store.on('load', this.onLoad, this);
+        this.store.on('loadexception', this.collapse, this);
+
+        if(this.resizable){
+            this.resizer = new Roo.Resizable(this.list,  {
+               pinned:true, handles:'se'
+            });
+            this.resizer.on('resize', function(r, w, h){
+                this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
+                this.listWidth = w;
+                this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
+                this.restrictHeight();
+            }, this);
+            this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
+        }
+        if(!this.editable){
+            this.editable = true;
+            this.setEditable(false);
+        }  
+        
+        
+        if (typeof(this.events.add.listeners) != 'undefined') {
+            
+            this.addicon = this.wrap.createChild(
+                {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-add' });  
+       
+            this.addicon.on('click', function(e) {
+                this.fireEvent('add', this);
+            }, this);
+        }
+        if (typeof(this.events.edit.listeners) != 'undefined') {
+            
+            this.editicon = this.wrap.createChild(
+                {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-edit' });  
+            if (this.addicon) {
+                this.editicon.setStyle('margin-left', '40px');
+            }
+            this.editicon.on('click', function(e) {
+                
+                // we fire even  if inothing is selected..
+                this.fireEvent('edit', this, this.lastData );
+                
+            }, this);
+        }
+        
+        
+        
+    },
+
+    // private
+    initEvents : function(){
+        Roo.form.ComboBox.superclass.initEvents.call(this);
+
+        this.keyNav = new Roo.KeyNav(this.el, {
+            "up" : function(e){
+                this.inKeyMode = true;
+                this.selectPrev();
+            },
+
+            "down" : function(e){
+                if(!this.isExpanded()){
+                    this.onTriggerClick();
+                }else{
+                    this.inKeyMode = true;
+                    this.selectNext();
+                }
+            },
+
+            "enter" : function(e){
+                this.onViewClick();
+                //return true;
+            },
+
+            "esc" : function(e){
+                this.collapse();
+            },
+
+            "tab" : function(e){
+                this.onViewClick(false);
+                return true;
+            },
+
+            scope : this,
+
+            doRelay : function(foo, bar, hname){
+                if(hname == 'down' || this.scope.isExpanded()){
+                   return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
+                }
+                return true;
+            },
+
+            forceKeyDown: true
+        });
+        this.queryDelay = Math.max(this.queryDelay || 10,
+                this.mode == 'local' ? 10 : 250);
+        this.dqTask = new Roo.util.DelayedTask(this.initQuery, this);
+        if(this.typeAhead){
+            this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
+        }
+        if(this.editable !== false){
+            this.el.on("keyup", this.onKeyUp, this);
+        }
+        if(this.forceSelection){
+            this.on('blur', this.doForce, this);
+        }
+    },
+
+    onDestroy : function(){
+        if(this.view){
+            this.view.setStore(null);
+            this.view.el.removeAllListeners();
+            this.view.el.remove();
+            this.view.purgeListeners();
+        }
+        if(this.list){
+            this.list.destroy();
+        }
+        if(this.store){
+            this.store.un('beforeload', this.onBeforeLoad, this);
+            this.store.un('load', this.onLoad, this);
+            this.store.un('loadexception', this.collapse, this);
+        }
+        Roo.form.ComboBox.superclass.onDestroy.call(this);
+    },
+
+    // private
+    fireKey : function(e){
+        if(e.isNavKeyPress() && !this.list.isVisible()){
+            this.fireEvent("specialkey", this, e);
+        }
+    },
+
+    // private
+    onResize: function(w, h){
+        Roo.form.ComboBox.superclass.onResize.apply(this, arguments);
+        
+        if(typeof w != 'number'){
+            // we do not handle it!?!?
+            return;
+        }
+        var tw = this.trigger.getWidth();
+        tw += this.addicon ? this.addicon.getWidth() : 0;
+        tw += this.editicon ? this.editicon.getWidth() : 0;
+        var x = w - tw;
+        this.el.setWidth( this.adjustWidth('input', x));
+            
+        this.trigger.setStyle('left', x+'px');
+        
+        if(this.list && this.listWidth === undefined){
+            var lw = Math.max(x + this.trigger.getWidth(), this.minListWidth);
+            this.list.setWidth(lw);
+            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
+        }
+        
+    
+        
+    },
+
+    /**
+     * Allow or prevent the user from directly editing the field text.  If false is passed,
+     * the user will only be able to select from the items defined in the dropdown list.  This method
+     * is the runtime equivalent of setting the 'editable' config option at config time.
+     * @param {Boolean} value True to allow the user to directly edit the field text
+     */
+    setEditable : function(value){
+        if(value == this.editable){
+            return;
+        }
+        this.editable = value;
+        if(!value){
+            this.el.dom.setAttribute('readOnly', true);
+            this.el.on('mousedown', this.onTriggerClick,  this);
+            this.el.addClass('x-combo-noedit');
+        }else{
+            this.el.dom.setAttribute('readOnly', false);
+            this.el.un('mousedown', this.onTriggerClick,  this);
+            this.el.removeClass('x-combo-noedit');
+        }
+    },
+
+    // private
+    onBeforeLoad : function(){
+        if(!this.hasFocus){
+            return;
+        }
+        this.innerList.update(this.loadingText ?
+               '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
+        this.restrictHeight();
+        this.selectedIndex = -1;
+    },
+
+    // private
+    onLoad : function(){
+        if(!this.hasFocus){
+            return;
+        }
+        if(this.store.getCount() > 0){
+            this.expand();
+            this.restrictHeight();
+            if(this.lastQuery == this.allQuery){
+                if(this.editable){
+                    this.el.dom.select();
+                }
+                if(!this.selectByValue(this.value, true)){
+                    this.select(0, true);
+                }
+            }else{
+                this.selectNext();
+                if(this.typeAhead && this.lastKey != Roo.EventObject.BACKSPACE && this.lastKey != Roo.EventObject.DELETE){
+                    this.taTask.delay(this.typeAheadDelay);
+                }
+            }
+        }else{
+            this.onEmptyResults();
+        }
+        //this.el.focus();
+    },
+
+    // private
+    onTypeAhead : function(){
+        if(this.store.getCount() > 0){
+            var r = this.store.getAt(0);
+            var newValue = r.data[this.displayField];
+            var len = newValue.length;
+            var selStart = this.getRawValue().length;
+            if(selStart != len){
+                this.setRawValue(newValue);
+                this.selectText(selStart, newValue.length);
+            }
+        }
+    },
+
+    // private
+    onSelect : function(record, index){
+        if(this.fireEvent('beforeselect', this, record, index) !== false){
+            this.setFromData(index > -1 ? record.data : false);
+            this.collapse();
+            this.fireEvent('select', this, record, index);
+        }
+    },
+
+    /**
+     * Returns the currently selected field value or empty string if no value is set.
+     * @return {String} value The selected value
+     */
+    getValue : function(){
+        if(this.valueField){
+            return typeof this.value != 'undefined' ? this.value : '';
+        }else{
+            return Roo.form.ComboBox.superclass.getValue.call(this);
+        }
+    },
+
+    /**
+     * Clears any text/value currently set in the field
+     */
+    clearValue : function(){
+        if(this.hiddenField){
+            this.hiddenField.value = '';
+        }
+        this.value = '';
+        this.setRawValue('');
+        this.lastSelectionText = '';
+        this.applyEmptyText();
+    },
+
+    /**
+     * Sets the specified value into the field.  If the value finds a match, the corresponding record text
+     * will be displayed in the field.  If the value does not match the data value of an existing item,
+     * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
+     * Otherwise the field will be blank (although the value will still be set).
+     * @param {String} value The value to match
+     */
+    setValue : function(v){
+        var text = v;
+        if(this.valueField){
+            var r = this.findRecord(this.valueField, v);
+            if(r){
+                text = r.data[this.displayField];
+            }else if(this.valueNotFoundText !== undefined){
+                text = this.valueNotFoundText;
+            }
+        }
+        this.lastSelectionText = text;
+        if(this.hiddenField){
+            this.hiddenField.value = v;
+        }
+        Roo.form.ComboBox.superclass.setValue.call(this, text);
+        this.value = v;
+    },
+    /**
+     * @property {Object} the last set data for the element
+     */
+    
+    lastData : false,
+    /**
+     * Sets the value of the field based on a object which is related to the record format for the store.
+     * @param {Object} value the value to set as. or false on reset?
+     */
+    setFromData : function(o){
+        var dv = ''; // display value
+        var vv = ''; // value value..
+        this.lastData = o;
+        if (this.displayField) {
+            dv = !o || typeof(o[this.displayField]) == 'undefined' ? '' : o[this.displayField];
+        } else {
+            // this is an error condition!!!
+            Roo.log('no  displayField value set for '+ (this.name ? this.name : this.id));
+        }
+        
+        if(this.valueField){
+            vv = !o || typeof(o[this.valueField]) == 'undefined' ? dv : o[this.valueField];
+        }
+        if(this.hiddenField){
+            this.hiddenField.value = vv;
+            
+            this.lastSelectionText = dv;
+            Roo.form.ComboBox.superclass.setValue.call(this, dv);
+            this.value = vv;
+            return;
+        }
+        // no hidden field.. - we store the value in 'value', but still display
+        // display field!!!!
+        this.lastSelectionText = dv;
+        Roo.form.ComboBox.superclass.setValue.call(this, dv);
+        this.value = vv;
+        
+        
+    },
+    // private
+    reset : function(){
+        // overridden so that last data is reset..
+        this.setValue(this.originalValue);
+        this.clearInvalid();
+        this.lastData = false;
+    },
+    // private
+    findRecord : function(prop, value){
+        var record;
+        if(this.store.getCount() > 0){
+            this.store.each(function(r){
+                if(r.data[prop] == value){
+                    record = r;
+                    return false;
+                }
+            });
+        }
+        return record;
+    },
+
+    // private
+    onViewMove : function(e, t){
+        this.inKeyMode = false;
+    },
+
+    // private
+    onViewOver : function(e, t){
+        if(this.inKeyMode){ // prevent key nav and mouse over conflicts
+            return;
+        }
+        var item = this.view.findItemFromChild(t);
+        if(item){
+            var index = this.view.indexOf(item);
+            this.select(index, false);
+        }
+    },
+
+    // private
+    onViewClick : function(doFocus){
+        var index = this.view.getSelectedIndexes()[0];
+        var r = this.store.getAt(index);
+        if(r){
+            this.onSelect(r, index);
+        }
+        if(doFocus !== false && !this.blockFocus){
+            this.el.focus();
+        }
+    },
+
+    // private
+    restrictHeight : function(){
+        this.innerList.dom.style.height = '';
+        var inner = this.innerList.dom;
+        var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight);
+        this.innerList.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
+        this.list.beginUpdate();
+        this.list.setHeight(this.innerList.getHeight()+this.list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight);
+        this.list.alignTo(this.el, this.listAlign);
+        this.list.endUpdate();
+    },
+
+    // private
+    onEmptyResults : function(){
+        this.collapse();
+    },
+
+    /**
+     * Returns true if the dropdown list is expanded, else false.
+     */
+    isExpanded : function(){
+        return this.list.isVisible();
+    },
+
+    /**
+     * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
+     * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
+     * @param {String} value The data value of the item to select
+     * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
+     * selected item if it is not currently in view (defaults to true)
+     * @return {Boolean} True if the value matched an item in the list, else false
+     */
+    selectByValue : function(v, scrollIntoView){
+        if(v !== undefined && v !== null){
+            var r = this.findRecord(this.valueField || this.displayField, v);
+            if(r){
+                this.select(this.store.indexOf(r), scrollIntoView);
+                return true;
+            }
+        }
+        return false;
+    },
+
+    /**
+     * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
+     * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
+     * @param {Number} index The zero-based index of the list item to select
+     * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
+     * selected item if it is not currently in view (defaults to true)
+     */
+    select : function(index, scrollIntoView){
+        this.selectedIndex = index;
+        this.view.select(index);
+        if(scrollIntoView !== false){
+            var el = this.view.getNode(index);
+            if(el){
+                this.innerList.scrollChildIntoView(el, false);
+            }
+        }
+    },
+
+    // private
+    selectNext : function(){
+        var ct = this.store.getCount();
+        if(ct > 0){
+            if(this.selectedIndex == -1){
+                this.select(0);
+            }else if(this.selectedIndex < ct-1){
+                this.select(this.selectedIndex+1);
+            }
+        }
+    },
+
+    // private
+    selectPrev : function(){
+        var ct = this.store.getCount();
+        if(ct > 0){
+            if(this.selectedIndex == -1){
+                this.select(0);
+            }else if(this.selectedIndex != 0){
+                this.select(this.selectedIndex-1);
+            }
+        }
+    },
+
+    // private
+    onKeyUp : function(e){
+        if(this.editable !== false && !e.isSpecialKey()){
+            this.lastKey = e.getKey();
+            this.dqTask.delay(this.queryDelay);
+        }
+    },
+
+    // private
+    validateBlur : function(){
+        return !this.list || !this.list.isVisible();   
+    },
+
+    // private
+    initQuery : function(){
+        this.doQuery(this.getRawValue());
+    },
+
+    // private
+    doForce : function(){
+        if(this.el.dom.value.length > 0){
+            this.el.dom.value =
+                this.lastSelectionText === undefined ? '' : this.lastSelectionText;
+            this.applyEmptyText();
+        }
+    },
+
+    /**
+     * Execute a query to filter the dropdown list.  Fires the beforequery event prior to performing the
+     * query allowing the query action to be canceled if needed.
+     * @param {String} query The SQL query to execute
+     * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
+     * in the field than the minimum specified by the minChars config option.  It also clears any filter previously
+     * saved in the current store (defaults to false)
+     */
+    doQuery : function(q, forceAll){
+        if(q === undefined || q === null){
+            q = '';
+        }
+        var qe = {
+            query: q,
+            forceAll: forceAll,
+            combo: this,
+            cancel:false
+        };
+        if(this.fireEvent('beforequery', qe)===false || qe.cancel){
+            return false;
+        }
+        q = qe.query;
+        forceAll = qe.forceAll;
+        if(forceAll === true || (q.length >= this.minChars)){
+            if(this.lastQuery != q || this.alwaysQuery){
+                this.lastQuery = q;
+                if(this.mode == 'local'){
+                    this.selectedIndex = -1;
+                    if(forceAll){
+                        this.store.clearFilter();
+                    }else{
+                        this.store.filter(this.displayField, q);
+                    }
+                    this.onLoad();
+                }else{
+                    this.store.baseParams[this.queryParam] = q;
+                    this.store.load({
+                        params: this.getParams(q)
+                    });
+                    this.expand();
+                }
+            }else{
+                this.selectedIndex = -1;
+                this.onLoad();   
+            }
+        }
+    },
+
+    // private
+    getParams : function(q){
+        var p = {};
+        //p[this.queryParam] = q;
+        if(this.pageSize){
+            p.start = 0;
+            p.limit = this.pageSize;
+        }
+        return p;
+    },
+
+    /**
+     * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
+     */
+    collapse : function(){
+        if(!this.isExpanded()){
+            return;
+        }
+        this.list.hide();
+        Roo.get(document).un('mousedown', this.collapseIf, this);
+        Roo.get(document).un('mousewheel', this.collapseIf, this);
+        if (!this.editable) {
+            Roo.get(document).un('keydown', this.listKeyPress, this);
+        }
+        this.fireEvent('collapse', this);
+    },
+
+    // private
+    collapseIf : function(e){
+        if(!e.within(this.wrap) && !e.within(this.list)){
+            this.collapse();
+        }
+    },
+
+    /**
+     * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
+     */
+    expand : function(){
+        if(this.isExpanded() || !this.hasFocus){
+            return;
+        }
+        this.list.alignTo(this.el, this.listAlign);
+        this.list.show();
+        Roo.get(document).on('mousedown', this.collapseIf, this);
+        Roo.get(document).on('mousewheel', this.collapseIf, this);
+        if (!this.editable) {
+            Roo.get(document).on('keydown', this.listKeyPress, this);
+        }
+        
+        this.fireEvent('expand', this);
+    },
+
+    // private
+    // Implements the default empty TriggerField.onTriggerClick function
+    onTriggerClick : function(){
+        if(this.disabled){
+            return;
+        }
+        if(this.isExpanded()){
+            this.collapse();
+            if (!this.blockFocus) {
+                this.el.focus();
+            }
+            
+        }else {
+            this.hasFocus = true;
+            if(this.triggerAction == 'all') {
+                this.doQuery(this.allQuery, true);
+            } else {
+                this.doQuery(this.getRawValue());
+            }
+            if (!this.blockFocus) {
+                this.el.focus();
+            }
+        }
+    },
+    listKeyPress : function(e)
+    {
+        //Roo.log('listkeypress');
+        // scroll to first matching element based on key pres..
+        if (e.isSpecialKey()) {
+            return false;
+        }
+        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;
+            }
+        }, this);
+        
+        if (match === false) {
+            return true; // no more action?
+        }
+        // scroll to?
+        this.view.select(match);
+        var sn = Roo.get(this.view.getSelectedNodes()[0])
+        sn.scrollIntoView(sn.dom.parentNode, false);
+    }
+
+    /** 
+    * @cfg {Boolean} grow 
+    * @hide 
+    */
+    /** 
+    * @cfg {Number} growMin 
+    * @hide 
+    */
+    /** 
+    * @cfg {Number} growMax 
+    * @hide 
+    */
+    /**
+     * @hide
+     * @method autoSize
+     */
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.form.Checkbox
+ * @extends Roo.form.Field
+ * Single checkbox field.  Can be used as a direct replacement for traditional checkbox fields.
+ * @constructor
+ * Creates a new Checkbox
+ * @param {Object} config Configuration options
+ */
+Roo.form.Checkbox = function(config){
+    Roo.form.Checkbox.superclass.constructor.call(this, config);
+    this.addEvents({
+        /**
+         * @event check
+         * Fires when the checkbox is checked or unchecked.
+	     * @param {Roo.form.Checkbox} this This checkbox
+	     * @param {Boolean} checked The new checked value
+	     */
+        check : true
+    });
+};
+
+Roo.extend(Roo.form.Checkbox, Roo.form.Field,  {
+    /**
+     * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
+     */
+    focusClass : undefined,
+    /**
+     * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
+     */
+    fieldClass: "x-form-field",
+    /**
+     * @cfg {Boolean} checked True if the the checkbox should render already checked (defaults to false)
+     */
+    checked: false,
+    /**
+     * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+     * {tag: "input", type: "checkbox", autocomplete: "off"})
+     */
+    defaultAutoCreate : { tag: "input", type: 'hidden', autocomplete: "off"},
+    /**
+     * @cfg {String} boxLabel The text that appears beside the checkbox
+     */
+    boxLabel : "",
+    /**
+     * @cfg {String} inputValue The value that should go into the generated input element's value attribute
+     */  
+    inputValue : '1',
+    /**
+     * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
+     */
+     valueOff: '0', // value when not checked..
+
+    actionMode : 'viewEl', 
+    //
+    // private
+    itemCls : 'x-menu-check-item x-form-item',
+    groupClass : 'x-menu-group-item',
+    inputType : 'hidden',
+    
+    
+    inSetChecked: false, // check that we are not calling self...
+    
+    inputElement: false, // real input element?
+    basedOn: false, // ????
+    
+    isFormField: true, // not sure where this is needed!!!!
+
+    onResize : function(){
+        Roo.form.Checkbox.superclass.onResize.apply(this, arguments);
+        if(!this.boxLabel){
+            this.el.alignTo(this.wrap, 'c-c');
+        }
+    },
+
+    initEvents : function(){
+        Roo.form.Checkbox.superclass.initEvents.call(this);
+        this.el.on("click", this.onClick,  this);
+        this.el.on("change", this.onClick,  this);
+    },
+
+
+    getResizeEl : function(){
+        return this.wrap;
+    },
+
+    getPositionEl : function(){
+        return this.wrap;
+    },
+
+    // private
+    onRender : function(ct, position){
+        Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
+        /*
+        if(this.inputValue !== undefined){
+            this.el.dom.value = this.inputValue;
+        }
+        */
+        //this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
+        this.wrap = this.el.wrap({cls: 'x-menu-check-item '});
+        var viewEl = this.wrap.createChild({ 
+            tag: 'img', cls: 'x-menu-item-icon', style: 'margin: 0px;' ,src : Roo.BLANK_IMAGE_URL });
+        this.viewEl = viewEl;   
+        this.wrap.on('click', this.onClick,  this); 
+        
+        this.el.on('DOMAttrModified', this.setFromHidden,  this); //ff
+        this.el.on('propertychange', this.setFromHidden,  this);  //ie
+        
+        
+        
+        if(this.boxLabel){
+            this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
+        //    viewEl.on('click', this.onClick,  this); 
+        }
+        //if(this.checked){
+            this.setChecked(this.checked);
+        //}else{
+            //this.checked = this.el.dom;
+        //}
+
+    },
+
+    // private
+    initValue : Roo.emptyFn,
+
+    /**
+     * Returns the checked state of the checkbox.
+     * @return {Boolean} True if checked, else false
+     */
+    getValue : function(){
+        if(this.el){
+            return String(this.el.dom.value) == String(this.inputValue ) ? this.inputValue : this.valueOff;
+        }
+        return this.valueOff;
+        
+    },
+
+	// private
+    onClick : function(){ 
+        this.setChecked(!this.checked);
+
+        //if(this.el.dom.checked != this.checked){
+        //    this.setValue(this.el.dom.checked);
+       // }
+    },
+
+    /**
+     * Sets the checked state of the checkbox.
+     * On is always based on a string comparison between inputValue and the param.
+     * @param {Boolean/String} value - the value to set 
+     * @param {Boolean/String} suppressEvent - whether to suppress the checkchange event.
+     */
+    setValue : function(v,suppressEvent){
+        
+        
+        //this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
+        //if(this.el && this.el.dom){
+        //    this.el.dom.checked = this.checked;
+        //    this.el.dom.defaultChecked = this.checked;
+        //}
+        this.setChecked(String(v) === String(this.inputValue), suppressEvent);
+        //this.fireEvent("check", this, this.checked);
+    },
+    // private..
+    setChecked : function(state,suppressEvent)
+    {
+        if (this.inSetChecked) {
+            this.checked = state;
+            return;
+        }
+        
+    
+        if(this.wrap){
+            this.wrap[state ? 'addClass' : 'removeClass']('x-menu-item-checked');
+        }
+        this.checked = state;
+        if(suppressEvent !== true){
+            this.fireEvent('check', this, state);
+        }
+        this.inSetChecked = true;
+        this.el.dom.value = state ? this.inputValue : this.valueOff;
+        this.inSetChecked = false;
+        
+    },
+    // handle setting of hidden value by some other method!!?!?
+    setFromHidden: function()
+    {
+        if(!this.el){
+            return;
+        }
+        //console.log("SET FROM HIDDEN");
+        //alert('setFrom hidden');
+        this.setValue(this.el.dom.value);
+    },
+    
+    onDestroy : function()
+    {
+        if(this.viewEl){
+            Roo.get(this.viewEl).remove();
+        }
+         
+        Roo.form.Checkbox.superclass.onDestroy.call(this);
+    }
+
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+/**
+ * @class Roo.form.Radio
+ * @extends Roo.form.Checkbox
+ * Single radio field.  Same as Checkbox, but provided as a convenience for automatically setting the input type.
+ * Radio grouping is handled automatically by the browser if you give each radio in a group the same name.
+ * @constructor
+ * Creates a new Radio
+ * @param {Object} config Configuration options
+ */
+Roo.form.Radio = function(){
+    Roo.form.Radio.superclass.constructor.apply(this, arguments);
+};
+Roo.extend(Roo.form.Radio, Roo.form.Checkbox, {
+    inputType: 'radio',
+
+    /**
+     * If this radio is part of a group, it will return the selected value
+     * @return {String}
+     */
+    getGroupValue : function(){
+        return this.el.up('form').child('input[name='+this.el.dom.name+']:checked', true).value;
+    }
+});//<script type="text/javascript">
+
+/*
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+ 
+ /*
+  * 
+  * Known bugs:
+  * Default CSS appears to render it as fixed text by default (should really be Sans-Serif)
+  * - IE ? - no idea how much works there.
+  * 
+  * 
+  * 
+  */
+ 
+
+/**
+ * @class Ext.form.HtmlEditor
+ * @extends Ext.form.Field
+ * Provides a lightweight HTML Editor component.
+ * WARNING - THIS CURRENTlY ONLY WORKS ON FIREFOX - USE FCKeditor for a cross platform version
+ * 
+ * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
+ * supported by this editor.</b><br/><br/>
+ * An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within
+ * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
+ */
+Roo.form.HtmlEditor = Roo.extend(Roo.form.Field, {
+      /**
+     * @cfg {Array} toolbars Array of toolbars. - defaults to just the Standard one
+     */
+    toolbars : false,
+    /**
+     * @cfg {String} createLinkText The default text for the create link prompt
+     */
+    createLinkText : 'Please enter the URL for the link:',
+    /**
+     * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
+     */
+    defaultLinkValue : 'http:/'+'/',
+   
+    
+    // id of frame..
+    frameId: false,
+    
+    // private properties
+    validationEvent : false,
+    deferHeight: true,
+    initialized : false,
+    activated : false,
+    sourceEditMode : false,
+    onFocus : Roo.emptyFn,
+    iframePad:3,
+    hideMode:'offsets',
+    defaultAutoCreate : {
+        tag: "textarea",
+        style:"width:500px;height:300px;",
+        autocomplete: "off"
+    },
+
+    // private
+    initComponent : function(){
+        this.addEvents({
+            /**
+             * @event initialize
+             * Fires when the editor is fully initialized (including the iframe)
+             * @param {HtmlEditor} this
+             */
+            initialize: true,
+            /**
+             * @event activate
+             * Fires when the editor is first receives the focus. Any insertion must wait
+             * until after this event.
+             * @param {HtmlEditor} this
+             */
+            activate: true,
+             /**
+             * @event beforesync
+             * Fires before the textarea is updated with content from the editor iframe. Return false
+             * to cancel the sync.
+             * @param {HtmlEditor} this
+             * @param {String} html
+             */
+            beforesync: true,
+             /**
+             * @event beforepush
+             * Fires before the iframe editor is updated with content from the textarea. Return false
+             * to cancel the push.
+             * @param {HtmlEditor} this
+             * @param {String} html
+             */
+            beforepush: true,
+             /**
+             * @event sync
+             * Fires when the textarea is updated with content from the editor iframe.
+             * @param {HtmlEditor} this
+             * @param {String} html
+             */
+            sync: true,
+             /**
+             * @event push
+             * Fires when the iframe editor is updated with content from the textarea.
+             * @param {HtmlEditor} this
+             * @param {String} html
+             */
+            push: true,
+             /**
+             * @event editmodechange
+             * Fires when the editor switches edit modes
+             * @param {HtmlEditor} this
+             * @param {Boolean} sourceEdit True if source edit, false if standard editing.
+             */
+            editmodechange: true,
+            /**
+             * @event editorevent
+             * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
+             * @param {HtmlEditor} this
+             */
+            editorevent: true
+        })
+    },
+
+    /**
+     * Protected method that will not generally be called directly. It
+     * is called when the editor creates its toolbar. Override this method if you need to
+     * add custom toolbar buttons.
+     * @param {HtmlEditor} editor
+     */
+    createToolbar : function(editor){
+        if (!editor.toolbars || !editor.toolbars.length) {
+            editor.toolbars = [ new Roo.form.HtmlEditor.ToolbarStandard() ]; // can be empty?
+        }
+        
+        for (var i =0 ; i < editor.toolbars.length;i++) {
+            editor.toolbars[i] = Roo.factory(editor.toolbars[i], Roo.form.HtmlEditor);
+            editor.toolbars[i].init(editor);
+        }
+         
+        
+    },
+
+    /**
+     * Protected method that will not generally be called directly. It
+     * is called when the editor initializes the iframe with HTML contents. Override this method if you
+     * want to change the initialization markup of the iframe (e.g. to add stylesheets).
+     */
+    getDocMarkup : function(){
+        return '<html><head><style type="text/css">body{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style></head><body></body></html>';
+    },
+
+    // private
+    onRender : function(ct, position){
+        Roo.form.HtmlEditor.superclass.onRender.call(this, ct, position);
+        this.el.dom.style.border = '0 none';
+        this.el.dom.setAttribute('tabIndex', -1);
+        this.el.addClass('x-hidden');
+        if(Roo.isIE){ // fix IE 1px bogus margin
+            this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
+        }
+        this.wrap = this.el.wrap({
+            cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
+        });
+
+        this.frameId = Roo.id();
+        this.createToolbar(this);
+        
+        
+        
+        
+      
+        
+        var iframe = this.wrap.createChild({
+            tag: 'iframe',
+            id: this.frameId,
+            name: this.frameId,
+            frameBorder : 'no',
+            'src' : Roo.SSL_SECURE_URL ? Roo.SSL_SECURE_URL  :  "javascript:false"
+        });
+        
+       // console.log(iframe);
+        //this.wrap.dom.appendChild(iframe);
+
+        this.iframe = iframe.dom;
+
+         this.assignDocWin();
+        
+        this.doc.designMode = 'on';
+       
+        this.doc.open();
+        this.doc.write(this.getDocMarkup());
+        this.doc.close();
+
+        
+        var task = { // must defer to wait for browser to be ready
+            run : function(){
+                //console.log("run task?" + this.doc.readyState);
+                this.assignDocWin();
+                if(this.doc.body || this.doc.readyState == 'complete'){
+                    try {
+                        this.doc.designMode="on";
+                    } catch (e) {
+                        return;
+                    }
+                    Roo.TaskMgr.stop(task);
+                    this.initEditor.defer(10, this);
+                }
+            },
+            interval : 10,
+            duration:10000,
+            scope: this
+        };
+        Roo.TaskMgr.start(task);
+
+        if(!this.width){
+            this.setSize(this.el.getSize());
+        }
+    },
+
+    // private
+    onResize : function(w, h){
+        Roo.form.HtmlEditor.superclass.onResize.apply(this, arguments);
+        if(this.el && this.iframe){
+            if(typeof w == 'number'){
+                var aw = w - this.wrap.getFrameWidth('lr');
+                this.el.setWidth(this.adjustWidth('textarea', aw));
+                this.iframe.style.width = aw + 'px';
+            }
+            if(typeof h == 'number'){
+                var tbh = 0;
+                for (var i =0; i < this.toolbars.length;i++) {
+                    // fixme - ask toolbars for heights?
+                    tbh += this.toolbars[i].tb.el.getHeight();
+                }
+                
+                
+                
+                
+                var ah = h - this.wrap.getFrameWidth('tb') - tbh;// this.tb.el.getHeight();
+                this.el.setHeight(this.adjustWidth('textarea', ah));
+                this.iframe.style.height = ah + 'px';
+                if(this.doc){
+                    (this.doc.body || this.doc.documentElement).style.height = (ah - (this.iframePad*2)) + 'px';
+                }
+            }
+        }
+    },
+
+    /**
+     * Toggles the editor between standard and source edit mode.
+     * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
+     */
+    toggleSourceEdit : function(sourceEditMode){
+        
+        this.sourceEditMode = sourceEditMode === true;
+        
+        if(this.sourceEditMode){
+          
+            this.syncValue();
+            this.iframe.className = 'x-hidden';
+            this.el.removeClass('x-hidden');
+            this.el.dom.removeAttribute('tabIndex');
+            this.el.focus();
+        }else{
+             
+            this.pushValue();
+            this.iframe.className = '';
+            this.el.addClass('x-hidden');
+            this.el.dom.setAttribute('tabIndex', -1);
+            this.deferFocus();
+        }
+        this.setSize(this.wrap.getSize());
+        this.fireEvent('editmodechange', this, this.sourceEditMode);
+    },
+
+    // private used internally
+    createLink : function(){
+        var url = prompt(this.createLinkText, this.defaultLinkValue);
+        if(url && url != 'http:/'+'/'){
+            this.relayCmd('createlink', url);
+        }
+    },
+
+    // private (for BoxComponent)
+    adjustSize : Roo.BoxComponent.prototype.adjustSize,
+
+    // private (for BoxComponent)
+    getResizeEl : function(){
+        return this.wrap;
+    },
+
+    // private (for BoxComponent)
+    getPositionEl : function(){
+        return this.wrap;
+    },
+
+    // private
+    initEvents : function(){
+        this.originalValue = this.getValue();
+    },
+
+    /**
+     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
+     * @method
+     */
+    markInvalid : Roo.emptyFn,
+    /**
+     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
+     * @method
+     */
+    clearInvalid : Roo.emptyFn,
+
+    setValue : function(v){
+        Roo.form.HtmlEditor.superclass.setValue.call(this, v);
+        this.pushValue();
+    },
+
+    /**
+     * Protected method that will not generally be called directly. If you need/want
+     * custom HTML cleanup, this is the method you should override.
+     * @param {String} html The HTML to be cleaned
+     * return {String} The cleaned HTML
+     */
+    cleanHtml : function(html){
+        html = String(html);
+        if(html.length > 5){
+            if(Roo.isSafari){ // strip safari nonsense
+                html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
+            }
+        }
+        if(html == '&nbsp;'){
+            html = '';
+        }
+        return html;
+    },
+
+    /**
+     * Protected method that will not generally be called directly. Syncs the contents
+     * of the editor iframe with the textarea.
+     */
+    syncValue : function(){
+        if(this.initialized){
+            var bd = (this.doc.body || this.doc.documentElement);
+            var html = bd.innerHTML;
+            if(Roo.isSafari){
+                var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
+                var m = bs.match(/text-align:(.*?);/i);
+                if(m && m[1]){
+                    html = '<div style="'+m[0]+'">' + html + '</div>';
+                }
+            }
+            html = this.cleanHtml(html);
+            if(this.fireEvent('beforesync', this, html) !== false){
+                this.el.dom.value = html;
+                this.fireEvent('sync', this, html);
+            }
+        }
+    },
+
+    /**
+     * Protected method that will not generally be called directly. Pushes the value of the textarea
+     * into the iframe editor.
+     */
+    pushValue : function(){
+        if(this.initialized){
+            var v = this.el.dom.value;
+            if(v.length < 1){
+                v = '&#160;';
+            }
+            if(this.fireEvent('beforepush', this, v) !== false){
+                (this.doc.body || this.doc.documentElement).innerHTML = v;
+                this.fireEvent('push', this, v);
+            }
+        }
+    },
+
+    // private
+    deferFocus : function(){
+        this.focus.defer(10, this);
+    },
+
+    // doc'ed in Field
+    focus : function(){
+        if(this.win && !this.sourceEditMode){
+            this.win.focus();
+        }else{
+            this.el.focus();
+        }
+    },
+    
+    assignDocWin: function()
+    {
+        var iframe = this.iframe;
+        
+         if(Roo.isIE){
+            this.doc = iframe.contentWindow.document;
+            this.win = iframe.contentWindow;
+        } else {
+            if (!Roo.get(this.frameId)) {
+                return;
+            }
+            this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
+            this.win = Roo.get(this.frameId).dom.contentWindow;
+        }
+    },
+    
+    // private
+    initEditor : function(){
+        //console.log("INIT EDITOR");
+        this.assignDocWin();
+        
+        
+        
+        this.doc.designMode="on";
+        this.doc.open();
+        this.doc.write(this.getDocMarkup());
+        this.doc.close();
+        
+        var dbody = (this.doc.body || this.doc.documentElement);
+        //var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
+        // this copies styles from the containing element into thsi one..
+        // not sure why we need all of this..
+        var ss = this.el.getStyles('font-size', 'background-image', 'background-repeat');
+        ss['background-attachment'] = 'fixed'; // w3c
+        dbody.bgProperties = 'fixed'; // ie
+        Roo.DomHelper.applyStyles(dbody, ss);
+        Roo.EventManager.on(this.doc, {
+            'mousedown': this.onEditorEvent,
+            'dblclick': this.onEditorEvent,
+            'click': this.onEditorEvent,
+            'keyup': this.onEditorEvent,
+            buffer:100,
+            scope: this
+        });
+        if(Roo.isGecko){
+            Roo.EventManager.on(this.doc, 'keypress', this.mozKeyPress, this);
+        }
+        if(Roo.isIE || Roo.isSafari || Roo.isOpera){
+            Roo.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
+        }
+        this.initialized = true;
+
+        this.fireEvent('initialize', this);
+        this.pushValue();
+    },
+
+    // private
+    onDestroy : function(){
+        
+        
+        
+        if(this.rendered){
+            
+            for (var i =0; i < this.toolbars.length;i++) {
+                // fixme - ask toolbars for heights?
+                this.toolbars[i].onDestroy();
+            }
+            
+            this.wrap.dom.innerHTML = '';
+            this.wrap.remove();
+        }
+    },
+
+    // private
+    onFirstFocus : function(){
+        
+        this.assignDocWin();
+        
+        
+        this.activated = true;
+        for (var i =0; i < this.toolbars.length;i++) {
+            this.toolbars[i].onFirstFocus();
+        }
+       
+        if(Roo.isGecko){ // prevent silly gecko errors
+            this.win.focus();
+            var s = this.win.getSelection();
+            if(!s.focusNode || s.focusNode.nodeType != 3){
+                var r = s.getRangeAt(0);
+                r.selectNodeContents((this.doc.body || this.doc.documentElement));
+                r.collapse(true);
+                this.deferFocus();
+            }
+            try{
+                this.execCmd('useCSS', true);
+                this.execCmd('styleWithCSS', false);
+            }catch(e){}
+        }
+        this.fireEvent('activate', this);
+    },
+
+    // private
+    adjustFont: function(btn){
+        var adjust = btn.cmd == 'increasefontsize' ? 1 : -1;
+        //if(Roo.isSafari){ // safari
+        //    adjust *= 2;
+       // }
+        var v = parseInt(this.doc.queryCommandValue('FontSize')|| 3, 10);
+        if(Roo.isSafari){ // safari
+            var sm = { 10 : 1, 13: 2, 16:3, 18:4, 24: 5, 32:6, 48: 7 };
+            v =  (v < 10) ? 10 : v;
+            v =  (v > 48) ? 48 : v;
+            v = typeof(sm[v]) == 'undefined' ? 1 : sm[v];
+            
+        }
+        
+        
+        v = Math.max(1, v+adjust);
+        
+        this.execCmd('FontSize', v  );
+    },
+
+    onEditorEvent : function(e){
+        this.fireEvent('editorevent', this, e);
+      //  this.updateToolbar();
+        this.syncValue();
+    },
+
+    insertTag : function(tg)
+    {
+        // could be a bit smarter... -> wrap the current selected tRoo..
+        
+        this.execCmd("formatblock",   tg);
+        
+    },
+    
+    insertText : function(txt)
+    {
+        
+        
+        range = this.createRange();
+        range.deleteContents();
+               //alert(Sender.getAttribute('label'));
+               
+        range.insertNode(this.doc.createTextNode(txt));
+    } ,
+    
+    // private
+    relayBtnCmd : function(btn){
+        this.relayCmd(btn.cmd);
+    },
+
+    /**
+     * Executes a Midas editor command on the editor document and performs necessary focus and
+     * toolbar updates. <b>This should only be called after the editor is initialized.</b>
+     * @param {String} cmd The Midas command
+     * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
+     */
+    relayCmd : function(cmd, value){
+        this.win.focus();
+        this.execCmd(cmd, value);
+        this.fireEvent('editorevent', this);
+        //this.updateToolbar();
+        this.deferFocus();
+    },
+
+    /**
+     * Executes a Midas editor command directly on the editor document.
+     * For visual commands, you should use {@link #relayCmd} instead.
+     * <b>This should only be called after the editor is initialized.</b>
+     * @param {String} cmd The Midas command
+     * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
+     */
+    execCmd : function(cmd, value){
+        this.doc.execCommand(cmd, false, value === undefined ? null : value);
+        this.syncValue();
+    },
+
+   
+    /**
+     * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
+     * to insert tRoo.
+     * @param {String} text
+     */
+    insertAtCursor : function(text){
+        if(!this.activated){
+            return;
+        }
+        if(Roo.isIE){
+            this.win.focus();
+            var r = this.doc.selection.createRange();
+            if(r){
+                r.collapse(true);
+                r.pasteHTML(text);
+                this.syncValue();
+                this.deferFocus();
+            }
+        }else if(Roo.isGecko || Roo.isOpera || Roo.isSafari){
+            this.win.focus();
+            this.execCmd('InsertHTML', text);
+            this.deferFocus();
+        }
+    },
+ // private
+    mozKeyPress : function(e){
+        if(e.ctrlKey){
+            var c = e.getCharCode(), cmd;
+          
+            if(c > 0){
+                c = String.fromCharCode(c).toLowerCase();
+                switch(c){
+                    case 'b':
+                        cmd = 'bold';
+                    break;
+                    case 'i':
+                        cmd = 'italic';
+                    break;
+                    case 'u':
+                        cmd = 'underline';
+                    case 'v':
+                        this.cleanUpPaste.defer(100, this);
+                        return;
+                    break;
+                }
+                if(cmd){
+                    this.win.focus();
+                    this.execCmd(cmd);
+                    this.deferFocus();
+                    e.preventDefault();
+                }
+                
+            }
+        }
+    },
+
+    // private
+    fixKeys : function(){ // load time branching for fastest keydown performance
+        if(Roo.isIE){
+            return function(e){
+                var k = e.getKey(), r;
+                if(k == e.TAB){
+                    e.stopEvent();
+                    r = this.doc.selection.createRange();
+                    if(r){
+                        r.collapse(true);
+                        r.pasteHTML('&#160;&#160;&#160;&#160;');
+                        this.deferFocus();
+                    }
+                    return;
+                }
+                
+                if(k == e.ENTER){
+                    r = this.doc.selection.createRange();
+                    if(r){
+                        var target = r.parentElement();
+                        if(!target || target.tagName.toLowerCase() != 'li'){
+                            e.stopEvent();
+                            r.pasteHTML('<br />');
+                            r.collapse(false);
+                            r.select();
+                        }
+                    }
+                }
+                if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
+                    this.cleanUpPaste.defer(100, this);
+                    return;
+                }
+                
+                
+            };
+        }else if(Roo.isOpera){
+            return function(e){
+                var k = e.getKey();
+                if(k == e.TAB){
+                    e.stopEvent();
+                    this.win.focus();
+                    this.execCmd('InsertHTML','&#160;&#160;&#160;&#160;');
+                    this.deferFocus();
+                }
+                if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
+                    this.cleanUpPaste.defer(100, this);
+                    return;
+                }
+                
+            };
+        }else if(Roo.isSafari){
+            return function(e){
+                var k = e.getKey();
+                
+                if(k == e.TAB){
+                    e.stopEvent();
+                    this.execCmd('InsertText','\t');
+                    this.deferFocus();
+                    return;
+                }
+               if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
+                    this.cleanUpPaste.defer(100, this);
+                    return;
+                }
+                
+             };
+        }
+    }(),
+    
+    getAllAncestors: function()
+    {
+        var p = this.getSelectedNode();
+        var a = [];
+        if (!p) {
+            a.push(p); // push blank onto stack..
+            p = this.getParentElement();
+        }
+        
+        
+        while (p && (p.nodeType == 1) && (p.tagName.toLowerCase() != 'body')) {
+            a.push(p);
+            p = p.parentNode;
+        }
+        a.push(this.doc.body);
+        return a;
+    },
+    lastSel : false,
+    lastSelNode : false,
+    
+    
+    getSelection : function() 
+    {
+        this.assignDocWin();
+        return Roo.isIE ? this.doc.selection : this.win.getSelection();
+    },
+    
+    getSelectedNode: function() 
+    {
+        // this may only work on Gecko!!!
+        
+        // should we cache this!!!!
+        
+        
+        
+         
+        var range = this.createRange(this.getSelection());
+        
+        if (Roo.isIE) {
+            var parent = range.parentElement();
+            while (true) {
+                var testRange = range.duplicate();
+                testRange.moveToElementText(parent);
+                if (testRange.inRange(range)) {
+                    break;
+                }
+                if ((parent.nodeType != 1) || (parent.tagName.toLowerCase() == 'body')) {
+                    break;
+                }
+                parent = parent.parentElement;
+            }
+            return parent;
+        }
+        
+        
+        var ar = range.endContainer.childNodes;
+        if (!ar.length) {
+            ar = range.commonAncestorContainer.childNodes;
+            //alert(ar.length);
+        }
+        var nodes = [];
+        var other_nodes = [];
+        var has_other_nodes = false;
+        for (var i=0;i<ar.length;i++) {
+            if ((ar[i].nodeType == 3) && (!ar[i].data.length)) { // empty text ? 
+                continue;
+            }
+            // fullly contained node.
+            
+            if (this.rangeIntersectsNode(range,ar[i]) && this.rangeCompareNode(range,ar[i]) == 3) {
+                nodes.push(ar[i]);
+                continue;
+            }
+            
+            // probably selected..
+            if ((ar[i].nodeType == 1) && this.rangeIntersectsNode(range,ar[i]) && (this.rangeCompareNode(range,ar[i]) > 0)) {
+                other_nodes.push(ar[i]);
+                continue;
+            }
+            if (!this.rangeIntersectsNode(range,ar[i])|| (this.rangeCompareNode(range,ar[i]) == 0))  {
+                continue;
+            }
+            
+            
+            has_other_nodes = true;
+        }
+        if (!nodes.length && other_nodes.length) {
+            nodes= other_nodes;
+        }
+        if (has_other_nodes || !nodes.length || (nodes.length > 1)) {
+            return false;
+        }
+        
+        return nodes[0];
+    },
+    createRange: function(sel)
+    {
+        // this has strange effects when using with 
+        // top toolbar - not sure if it's a great idea.
+        //this.editor.contentWindow.focus();
+        if (typeof sel != "undefined") {
+            try {
+                return sel.getRangeAt ? sel.getRangeAt(0) : sel.createRange();
+            } catch(e) {
+                return this.doc.createRange();
+            }
+        } else {
+            return this.doc.createRange();
+        }
+    },
+    getParentElement: function()
+    {
+        
+        this.assignDocWin();
+        var sel = Roo.isIE ? this.doc.selection : this.win.getSelection();
+        
+        var range = this.createRange(sel);
+         
+        try {
+            var p = range.commonAncestorContainer;
+            while (p.nodeType == 3) { // text node
+                p = p.parentNode;
+            }
+            return p;
+        } catch (e) {
+            return null;
+        }
+    
+    },
+    
+    
+    
+    // BC Hacks - cause I cant work out what i was trying to do..
+    rangeIntersectsNode : function(range, node)
+    {
+        var nodeRange = node.ownerDocument.createRange();
+        try {
+            nodeRange.selectNode(node);
+        }
+        catch (e) {
+            nodeRange.selectNodeContents(node);
+        }
+
+        return range.compareBoundaryPoints(Range.END_TO_START, nodeRange) == -1 &&
+                 range.compareBoundaryPoints(Range.START_TO_END, nodeRange) == 1;
+    },
+    rangeCompareNode : function(range, node) {
+        var nodeRange = node.ownerDocument.createRange();
+        try {
+            nodeRange.selectNode(node);
+        } catch (e) {
+            nodeRange.selectNodeContents(node);
+        }
+        var nodeIsBefore = range.compareBoundaryPoints(Range.START_TO_START, nodeRange) == 1;
+        var nodeIsAfter = range.compareBoundaryPoints(Range.END_TO_END, nodeRange) == -1;
+
+        if (nodeIsBefore && !nodeIsAfter)
+            return 0;
+        if (!nodeIsBefore && nodeIsAfter)
+            return 1;
+        if (nodeIsBefore && nodeIsAfter)
+            return 2;
+
+        return 3;
+    },
+
+    // private? - in a new class?
+    cleanUpPaste :  function()
+    {
+        // cleans up the whole document..
+      //  console.log('cleanuppaste');
+        this.cleanUpChildren(this.doc.body)
+        
+        
+    },
+    cleanUpChildren : function (n)
+    {
+        if (!n.childNodes.length) {
+            return;
+        }
+        for (var i = n.childNodes.length-1; i > -1 ; i--) {
+           this.cleanUpChild(n.childNodes[i]);
+        }
+    },
+    
+    
+        
+    
+    cleanUpChild : function (node)
+    {
+        //console.log(node);
+        if (node.nodeName == "#text") {
+            // clean up silly Windows -- stuff?
+            return; 
+        }
+        if (node.nodeName == "#comment") {
+            node.parentNode.removeChild(node);
+            // clean up silly Windows -- stuff?
+            return; 
+        }
+        
+        if (Roo.form.HtmlEditor.black.indexOf(node.tagName.toLowerCase()) > -1) {
+            // remove node.
+            node.parentNode.removeChild(node);
+            return;
+            
+        }
+        if (!node.attributes || !node.attributes.length) {
+            this.cleanUpChildren(node);
+            return;
+        }
+        
+        function cleanAttr(n,v)
+        {
+            
+            if (v.match(/^\./) || v.match(/^\//)) {
+                return;
+            }
+            if (v.match(/^(http|https):\/\//) || v.match(/^mailto:/)) {
+                return;
+            }
+            Roo.log("(REMOVE)"+ node.tagName +'.' + n + '=' + v);
+            node.removeAttribute(n);
+            
+        }
+        
+        function cleanStyle(n,v)
+        {
+            if (v.match(/expression/)) { //XSS?? should we even bother..
+                node.removeAttribute(n);
+                return;
+            }
+            
+            
+            var parts = v.split(/;/);
+            Roo.each(parts, function(p) {
+                p = p.replace(/\s+/g,'');
+                if (!p.length) {
+                    return;
+                }
+                var l = p.split(':').shift().replace(/\s+/g,'');
+                
+                if (Roo.form.HtmlEditor.cwhite.indexOf(l) < 0) {
+                    Roo.log('(REMOVE)' + node.tagName +'.' + n + ':'+l + '=' + v);
+                    node.removeAttribute(n);
+                    return false;
+                }
+            });
+            
+            
+        }
+        
+        
+        for (var i = node.attributes.length-1; i > -1 ; i--) {
+            var a = node.attributes[i];
+            //console.log(a);
+            if (Roo.form.HtmlEditor.ablack.indexOf(a.name.toLowerCase()) > -1) {
+                node.removeAttribute(a.name);
+                return;
+            }
+            if (Roo.form.HtmlEditor.aclean.indexOf(a.name.toLowerCase()) > -1) {
+                cleanAttr(a.name,a.value); // fixme..
+                return;
+            }
+            if (a.name == 'style') {
+                cleanStyle(a.name,a.value);
+            }
+            /// clean up MS crap..
+            if (a.name == 'class') {
+                if (a.value.match(/^Mso/)) {
+                    node.className = '';
+                }
+            }
+            
+            // style cleanup!?
+            // class cleanup?
+            
+        }
+        
+        
+        this.cleanUpChildren(node);
+        
+        
+    }
+    
+    
+    // hide stuff that is not compatible
+    /**
+     * @event blur
+     * @hide
+     */
+    /**
+     * @event change
+     * @hide
+     */
+    /**
+     * @event focus
+     * @hide
+     */
+    /**
+     * @event specialkey
+     * @hide
+     */
+    /**
+     * @cfg {String} fieldClass @hide
+     */
+    /**
+     * @cfg {String} focusClass @hide
+     */
+    /**
+     * @cfg {String} autoCreate @hide
+     */
+    /**
+     * @cfg {String} inputType @hide
+     */
+    /**
+     * @cfg {String} invalidClass @hide
+     */
+    /**
+     * @cfg {String} invalidText @hide
+     */
+    /**
+     * @cfg {String} msgFx @hide
+     */
+    /**
+     * @cfg {String} validateOnBlur @hide
+     */
+});
+
+Roo.form.HtmlEditor.white = [
+        'area', 'br', 'img', 'input', 'hr', 'wbr',
+        
+       'address', 'blockquote', 'center', 'dd',      'dir',       'div', 
+       'dl',      'dt',         'h1',     'h2',      'h3',        'h4', 
+       'h5',      'h6',         'hr',     'isindex', 'listing',   'marquee', 
+       'menu',    'multicol',   'ol',     'p',       'plaintext', 'pre', 
+       'table',   'ul',         'xmp', 
+       
+       'caption', 'col', 'colgroup', 'tbody', 'td', 'tfoot', 'th', 
+      'thead',   'tr', 
+     
+      'dir', 'menu', 'ol', 'ul', 'dl',
+       
+      'embed',  'object'
+];
+
+
+Roo.form.HtmlEditor.black = [
+    //    'embed',  'object', // enable - backend responsiblity to clean thiese
+        'applet', // 
+        'base',   'basefont', 'bgsound', 'blink',  'body', 
+        'frame',  'frameset', 'head',    'html',   'ilayer', 
+        'iframe', 'layer',  'link',     'meta',    'object',   
+        'script', 'style' ,'title',  'xml' // clean later..
+];
+Roo.form.HtmlEditor.clean = [
+    'script', 'style', 'title', 'xml'
+];
+
+// attributes..
+
+Roo.form.HtmlEditor.ablack = [
+    'on'
+];
+    
+Roo.form.HtmlEditor.aclean = [ 
+    'action', 'background', 'codebase', 'dynsrc', 'href', 'lowsrc'
+];
+
+// protocols..
+Roo.form.HtmlEditor.pwhite= [
+        'http',  'https',  'mailto'
+];
+
+Roo.form.HtmlEditor.cwhite= [
+        'text-align',
+        'font-size'
+];
+
+// <script type="text/javascript">
+/*
+ * Based on
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *  
+ 
+ */
+
+/**
+ * @class Roo.form.HtmlEditorToolbar1
+ * Basic Toolbar
+ * 
+ * Usage:
+ *
+ new Roo.form.HtmlEditor({
+    ....
+    toolbars : [
+        new Roo.form.HtmlEditorToolbar1({
+            disable : { fonts: 1 , format: 1, ..., ... , ...],
+            btns : [ .... ]
+        })
+    }
+     
+ * 
+ * @cfg {Object} disable List of elements to disable..
+ * @cfg {Array} btns List of additional buttons.
+ * 
+ * 
+ * NEEDS Extra CSS? 
+ * .x-html-editor-tb .x-edit-none .x-btn-text { background: none; }
+ */
+ 
+Roo.form.HtmlEditor.ToolbarStandard = function(config)
+{
+    
+    Roo.apply(this, config);
+    //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
+    // dont call parent... till later.
+}
+
+Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
+    
+    tb: false,
+    
+    rendered: false,
+    
+    editor : false,
+    /**
+     * @cfg {Object} disable  List of toolbar elements to disable
+         
+     */
+    disable : false,
+      /**
+     * @cfg {Array} fontFamilies An array of available font families
+     */
+    fontFamilies : [
+        'Arial',
+        'Courier New',
+        'Tahoma',
+        'Times New Roman',
+        'Verdana'
+    ],
+    
+    specialChars : [
+           "&#169;",
+          "&#174;",     
+          "&#8482;",    
+          "&#163;" ,    
+         // "&#8212;",    
+          "&#8230;",    
+          "&#247;" ,    
+        //  "&#225;" ,     ?? a acute?
+           "&#8364;"    , //Euro
+       //   "&#8220;"    ,
+        //  "&#8221;"    ,
+        //  "&#8226;"    ,
+          "&#176;"  //   , // degrees
+
+         // "&#233;"     , // e ecute
+         // "&#250;"     , // u ecute?
+    ],
+    inputElements : [ 
+            "form", "input:text", "input:hidden", "input:checkbox", "input:radio", "input:password", 
+            "input:submit", "input:button", "select", "textarea", "label" ],
+    formats : [
+        ["p"] ,  
+        ["h1"],["h2"],["h3"],["h4"],["h5"],["h6"], 
+        ["pre"],[ "code"], 
+        ["abbr"],[ "acronym"],[ "address"],[ "cite"],[ "samp"],[ "var"]
+    ],
+     /**
+     * @cfg {String} defaultFont default font to use.
+     */
+    defaultFont: 'tahoma',
+   
+    fontSelect : false,
+    
+    
+    formatCombo : false,
+    
+    init : function(editor)
+    {
+        this.editor = editor;
+        
+        
+        var fid = editor.frameId;
+        var etb = this;
+        function btn(id, toggle, handler){
+            var xid = fid + '-'+ id ;
+            return {
+                id : xid,
+                cmd : id,
+                cls : 'x-btn-icon x-edit-'+id,
+                enableToggle:toggle !== false,
+                scope: editor, // was editor...
+                handler:handler||editor.relayBtnCmd,
+                clickEvent:'mousedown',
+                tooltip: etb.buttonTips[id] || undefined, ///tips ???
+                tabIndex:-1
+            };
+        }
+        
+        
+        
+        var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
+        this.tb = tb;
+         // stop form submits
+        tb.el.on('click', function(e){
+            e.preventDefault(); // what does this do?
+        });
+
+        if(!this.disable.font && !Roo.isSafari){
+            /* why no safari for fonts
+            editor.fontSelect = tb.el.createChild({
+                tag:'select',
+                tabIndex: -1,
+                cls:'x-font-select',
+                html: editor.createFontOptions()
+            });
+            editor.fontSelect.on('change', function(){
+                var font = editor.fontSelect.dom.value;
+                editor.relayCmd('fontname', font);
+                editor.deferFocus();
+            }, editor);
+            tb.add(
+                editor.fontSelect.dom,
+                '-'
+            );
+            */
+        };
+        if(!this.disable.formats){
+            this.formatCombo = new Roo.form.ComboBox({
+                store: new Roo.data.SimpleStore({
+                    id : 'tag',
+                    fields: ['tag'],
+                    data : this.formats // from states.js
+                }),
+                blockFocus : true,
+                //autoCreate : {tag: "div",  size: "20"},
+                displayField:'tag',
+                typeAhead: false,
+                mode: 'local',
+                editable : false,
+                triggerAction: 'all',
+                emptyText:'Add tag',
+                selectOnFocus:true,
+                width:135,
+                listeners : {
+                    'select': function(c, r, i) {
+                        editor.insertTag(r.get('tag'));
+                        editor.focus();
+                    }
+                }
+
+            });
+            tb.addField(this.formatCombo);
+            
+        }
+        
+        if(!this.disable.format){
+            tb.add(
+                btn('bold'),
+                btn('italic'),
+                btn('underline')
+            );
+        };
+        if(!this.disable.fontSize){
+            tb.add(
+                '-',
+                
+                
+                btn('increasefontsize', false, editor.adjustFont),
+                btn('decreasefontsize', false, editor.adjustFont)
+            );
+        };
+        
+        
+        if(this.disable.colors){
+            tb.add(
+                '-', {
+                    id:editor.frameId +'-forecolor',
+                    cls:'x-btn-icon x-edit-forecolor',
+                    clickEvent:'mousedown',
+                    tooltip: this.buttonTips['forecolor'] || undefined,
+                    tabIndex:-1,
+                    menu : new Roo.menu.ColorMenu({
+                        allowReselect: true,
+                        focus: Roo.emptyFn,
+                        value:'000000',
+                        plain:true,
+                        selectHandler: function(cp, color){
+                            editor.execCmd('forecolor', Roo.isSafari || Roo.isIE ? '#'+color : color);
+                            editor.deferFocus();
+                        },
+                        scope: editor,
+                        clickEvent:'mousedown'
+                    })
+                }, {
+                    id:editor.frameId +'backcolor',
+                    cls:'x-btn-icon x-edit-backcolor',
+                    clickEvent:'mousedown',
+                    tooltip: this.buttonTips['backcolor'] || undefined,
+                    tabIndex:-1,
+                    menu : new Roo.menu.ColorMenu({
+                        focus: Roo.emptyFn,
+                        value:'FFFFFF',
+                        plain:true,
+                        allowReselect: true,
+                        selectHandler: function(cp, color){
+                            if(Roo.isGecko){
+                                editor.execCmd('useCSS', false);
+                                editor.execCmd('hilitecolor', color);
+                                editor.execCmd('useCSS', true);
+                                editor.deferFocus();
+                            }else{
+                                editor.execCmd(Roo.isOpera ? 'hilitecolor' : 'backcolor', 
+                                    Roo.isSafari || Roo.isIE ? '#'+color : color);
+                                editor.deferFocus();
+                            }
+                        },
+                        scope:editor,
+                        clickEvent:'mousedown'
+                    })
+                }
+            );
+        };
+        // now add all the items...
+        
+
+        if(!this.disable.alignments){
+            tb.add(
+                '-',
+                btn('justifyleft'),
+                btn('justifycenter'),
+                btn('justifyright')
+            );
+        };
+
+        //if(!Roo.isSafari){
+            if(!this.disable.links){
+                tb.add(
+                    '-',
+                    btn('createlink', false, editor.createLink)    /// MOVE TO HERE?!!?!?!?!
+                );
+            };
+
+            if(!this.disable.lists){
+                tb.add(
+                    '-',
+                    btn('insertorderedlist'),
+                    btn('insertunorderedlist')
+                );
+            }
+            if(!this.disable.sourceEdit){
+                tb.add(
+                    '-',
+                    btn('sourceedit', true, function(btn){
+                        this.toggleSourceEdit(btn.pressed);
+                    })
+                );
+            }
+        //}
+        
+        var smenu = { };
+        // special menu.. - needs to be tidied up..
+        if (!this.disable.special) {
+            smenu = {
+                text: "&#169;",
+                cls: 'x-edit-none',
+                menu : {
+                    items : []
+                   }
+            };
+            for (var i =0; i < this.specialChars.length; i++) {
+                smenu.menu.items.push({
+                    
+                    html: this.specialChars[i],
+                    handler: function(a,b) {
+                        editor.insertAtCursor(String.fromCharCode(a.html.replace('&#','').replace(';', '')));
+                        
+                    },
+                    tabIndex:-1
+                });
+            }
+            
+            
+            tb.add(smenu);
+            
+            
+        }
+        if (this.btns) {
+            for(var i =0; i< this.btns.length;i++) {
+                var b = this.btns[i];
+                b.cls =  'x-edit-none';
+                b.scope = editor;
+                tb.add(b);
+            }
+        
+        }
+        
+        
+        
+        // disable everything...
+        
+        this.tb.items.each(function(item){
+           if(item.id != editor.frameId+ '-sourceedit'){
+                item.disable();
+            }
+        });
+        this.rendered = true;
+        
+        // the all the btns;
+        editor.on('editorevent', this.updateToolbar, this);
+        // other toolbars need to implement this..
+        //editor.on('editmodechange', this.updateToolbar, this);
+    },
+    
+    
+    
+    /**
+     * Protected method that will not generally be called directly. It triggers
+     * a toolbar update by reading the markup state of the current selection in the editor.
+     */
+    updateToolbar: function(){
+
+        if(!this.editor.activated){
+            this.editor.onFirstFocus();
+            return;
+        }
+
+        var btns = this.tb.items.map, 
+            doc = this.editor.doc,
+            frameId = this.editor.frameId;
+
+        if(!this.disable.font && !Roo.isSafari){
+            /*
+            var name = (doc.queryCommandValue('FontName')||this.editor.defaultFont).toLowerCase();
+            if(name != this.fontSelect.dom.value){
+                this.fontSelect.dom.value = name;
+            }
+            */
+        }
+        if(!this.disable.format){
+            btns[frameId + '-bold'].toggle(doc.queryCommandState('bold'));
+            btns[frameId + '-italic'].toggle(doc.queryCommandState('italic'));
+            btns[frameId + '-underline'].toggle(doc.queryCommandState('underline'));
+        }
+        if(!this.disable.alignments){
+            btns[frameId + '-justifyleft'].toggle(doc.queryCommandState('justifyleft'));
+            btns[frameId + '-justifycenter'].toggle(doc.queryCommandState('justifycenter'));
+            btns[frameId + '-justifyright'].toggle(doc.queryCommandState('justifyright'));
+        }
+        if(!Roo.isSafari && !this.disable.lists){
+            btns[frameId + '-insertorderedlist'].toggle(doc.queryCommandState('insertorderedlist'));
+            btns[frameId + '-insertunorderedlist'].toggle(doc.queryCommandState('insertunorderedlist'));
+        }
+        
+        var ans = this.editor.getAllAncestors();
+        if (this.formatCombo) {
+            
+            
+            var store = this.formatCombo.store;
+            this.formatCombo.setValue("");
+            for (var i =0; i < ans.length;i++) {
+                if (ans[i] && store.query('tag',ans[i].tagName.toLowerCase(), false).length) {
+                    // select it..
+                    this.formatCombo.setValue(ans[i].tagName.toLowerCase());
+                    break;
+                }
+            }
+        }
+        
+        
+        
+        // hides menus... - so this cant be on a menu...
+        Roo.menu.MenuMgr.hideAll();
+
+        //this.editorsyncValue();
+    },
+   
+    
+    createFontOptions : function(){
+        var buf = [], fs = this.fontFamilies, ff, lc;
+        for(var i = 0, len = fs.length; i< len; i++){
+            ff = fs[i];
+            lc = ff.toLowerCase();
+            buf.push(
+                '<option value="',lc,'" style="font-family:',ff,';"',
+                    (this.defaultFont == lc ? ' selected="true">' : '>'),
+                    ff,
+                '</option>'
+            );
+        }
+        return buf.join('');
+    },
+    
+    toggleSourceEdit : function(sourceEditMode){
+        if(sourceEditMode === undefined){
+            sourceEditMode = !this.sourceEditMode;
+        }
+        this.sourceEditMode = sourceEditMode === true;
+        var btn = this.tb.items.get(this.editor.frameId +'-sourceedit');
+        // just toggle the button?
+        if(btn.pressed !== this.editor.sourceEditMode){
+            btn.toggle(this.editor.sourceEditMode);
+            return;
+        }
+        
+        if(this.sourceEditMode){
+            this.tb.items.each(function(item){
+                if(item.cmd != 'sourceedit'){
+                    item.disable();
+                }
+            });
+          
+        }else{
+            if(this.initialized){
+                this.tb.items.each(function(item){
+                    item.enable();
+                });
+            }
+            
+        }
+        // tell the editor that it's been pressed..
+        this.editor.toggleSourceEdit(sourceEditMode);
+       
+    },
+     /**
+     * Object collection of toolbar tooltips for the buttons in the editor. The key
+     * is the command id associated with that button and the value is a valid QuickTips object.
+     * For example:
+<pre><code>
+{
+    bold : {
+        title: 'Bold (Ctrl+B)',
+        text: 'Make the selected text bold.',
+        cls: 'x-html-editor-tip'
+    },
+    italic : {
+        title: 'Italic (Ctrl+I)',
+        text: 'Make the selected text italic.',
+        cls: 'x-html-editor-tip'
+    },
+    ...
+</code></pre>
+    * @type Object
+     */
+    buttonTips : {
+        bold : {
+            title: 'Bold (Ctrl+B)',
+            text: 'Make the selected text bold.',
+            cls: 'x-html-editor-tip'
+        },
+        italic : {
+            title: 'Italic (Ctrl+I)',
+            text: 'Make the selected text italic.',
+            cls: 'x-html-editor-tip'
+        },
+        underline : {
+            title: 'Underline (Ctrl+U)',
+            text: 'Underline the selected text.',
+            cls: 'x-html-editor-tip'
+        },
+        increasefontsize : {
+            title: 'Grow Text',
+            text: 'Increase the font size.',
+            cls: 'x-html-editor-tip'
+        },
+        decreasefontsize : {
+            title: 'Shrink Text',
+            text: 'Decrease the font size.',
+            cls: 'x-html-editor-tip'
+        },
+        backcolor : {
+            title: 'Text Highlight Color',
+            text: 'Change the background color of the selected text.',
+            cls: 'x-html-editor-tip'
+        },
+        forecolor : {
+            title: 'Font Color',
+            text: 'Change the color of the selected text.',
+            cls: 'x-html-editor-tip'
+        },
+        justifyleft : {
+            title: 'Align Text Left',
+            text: 'Align text to the left.',
+            cls: 'x-html-editor-tip'
+        },
+        justifycenter : {
+            title: 'Center Text',
+            text: 'Center text in the editor.',
+            cls: 'x-html-editor-tip'
+        },
+        justifyright : {
+            title: 'Align Text Right',
+            text: 'Align text to the right.',
+            cls: 'x-html-editor-tip'
+        },
+        insertunorderedlist : {
+            title: 'Bullet List',
+            text: 'Start a bulleted list.',
+            cls: 'x-html-editor-tip'
+        },
+        insertorderedlist : {
+            title: 'Numbered List',
+            text: 'Start a numbered list.',
+            cls: 'x-html-editor-tip'
+        },
+        createlink : {
+            title: 'Hyperlink',
+            text: 'Make the selected text a hyperlink.',
+            cls: 'x-html-editor-tip'
+        },
+        sourceedit : {
+            title: 'Source Edit',
+            text: 'Switch to source editing mode.',
+            cls: 'x-html-editor-tip'
+        }
+    },
+    // private
+    onDestroy : function(){
+        if(this.rendered){
+            
+            this.tb.items.each(function(item){
+                if(item.menu){
+                    item.menu.removeAll();
+                    if(item.menu.el){
+                        item.menu.el.destroy();
+                    }
+                }
+                item.destroy();
+            });
+             
+        }
+    },
+    onFirstFocus: function() {
+        this.tb.items.each(function(item){
+           item.enable();
+        });
+    }
+});
+
+
+
+
+// <script type="text/javascript">
+/*
+ * Based on
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *  
+ 
+ */
+
+ 
+/**
+ * @class Roo.form.HtmlEditor.ToolbarContext
+ * Context Toolbar
+ * 
+ * Usage:
+ *
+ new Roo.form.HtmlEditor({
+    ....
+    toolbars : [
+        new Roo.form.HtmlEditor.ToolbarStandard(),
+        new Roo.form.HtmlEditor.ToolbarContext()
+        })
+    }
+     
+ * 
+ * @config : {Object} disable List of elements to disable.. (not done yet.)
+ * 
+ * 
+ */
+
+Roo.form.HtmlEditor.ToolbarContext = function(config)
+{
+    
+    Roo.apply(this, config);
+    //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
+    // dont call parent... till later.
+}
+Roo.form.HtmlEditor.ToolbarContext.types = {
+    'IMG' : {
+        width : {
+            title: "Width",
+            width: 40
+        },
+        height:  {
+            title: "Height",
+            width: 40
+        },
+        align: {
+            title: "Align",
+            opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
+            width : 80
+            
+        },
+        border: {
+            title: "Border",
+            width: 40
+        },
+        alt: {
+            title: "Alt",
+            width: 120
+        },
+        src : {
+            title: "Src",
+            width: 220
+        }
+        
+    },
+    'A' : {
+        name : {
+            title: "Name",
+            width: 50
+        },
+        href:  {
+            title: "Href",
+            width: 220
+        } // border?
+        
+    },
+    'TABLE' : {
+        rows : {
+            title: "Rows",
+            width: 20
+        },
+        cols : {
+            title: "Cols",
+            width: 20
+        },
+        width : {
+            title: "Width",
+            width: 40
+        },
+        height : {
+            title: "Height",
+            width: 40
+        },
+        border : {
+            title: "Border",
+            width: 20
+        }
+    },
+    'TD' : {
+        width : {
+            title: "Width",
+            width: 40
+        },
+        height : {
+            title: "Height",
+            width: 40
+        },   
+        align: {
+            title: "Align",
+            opts : [[""],[ "left"],[ "center"],[ "right"],[ "justify"],[ "char"]],
+            width: 40
+        },
+        valign: {
+            title: "Valign",
+            opts : [[""],[ "top"],[ "middle"],[ "bottom"],[ "baseline"]],
+            width: 40
+        },
+        colspan: {
+            title: "Colspan",
+            width: 20
+            
+        }
+    },
+    'INPUT' : {
+        name : {
+            title: "name",
+            width: 120
+        },
+        value : {
+            title: "Value",
+            width: 120
+        },
+        width : {
+            title: "Width",
+            width: 40
+        }
+    },
+    'LABEL' : {
+        'for' : {
+            title: "For",
+            width: 120
+        }
+    },
+    'TEXTAREA' : {
+          name : {
+            title: "name",
+            width: 120
+        },
+        rows : {
+            title: "Rows",
+            width: 20
+        },
+        cols : {
+            title: "Cols",
+            width: 20
+        }
+    },
+    'SELECT' : {
+        name : {
+            title: "name",
+            width: 120
+        },
+        selectoptions : {
+            title: "Options",
+            width: 200
+        }
+    },
+    'BODY' : {
+        title : {
+            title: "title",
+            width: 120,
+            disabled : true
+        }
+    }
+};
+
+
+
+Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
+    
+    tb: false,
+    
+    rendered: false,
+    
+    editor : false,
+    /**
+     * @cfg {Object} disable  List of toolbar elements to disable
+         
+     */
+    disable : false,
+    
+    
+    
+    toolbars : false,
+    
+    init : function(editor)
+    {
+        this.editor = editor;
+        
+        
+        var fid = editor.frameId;
+        var etb = this;
+        function btn(id, toggle, handler){
+            var xid = fid + '-'+ id ;
+            return {
+                id : xid,
+                cmd : id,
+                cls : 'x-btn-icon x-edit-'+id,
+                enableToggle:toggle !== false,
+                scope: editor, // was editor...
+                handler:handler||editor.relayBtnCmd,
+                clickEvent:'mousedown',
+                tooltip: etb.buttonTips[id] || undefined, ///tips ???
+                tabIndex:-1
+            };
+        }
+        // create a new element.
+        var wdiv = editor.wrap.createChild({
+                tag: 'div'
+            }, editor.wrap.dom.firstChild.nextSibling, true);
+        
+        // can we do this more than once??
+        
+         // stop form submits
+      
+ 
+        // disable everything...
+        var ty= Roo.form.HtmlEditor.ToolbarContext.types;
+        this.toolbars = {};
+           
+        for (var i in  ty) {
+          
+            this.toolbars[i] = this.buildToolbar(ty[i],i);
+        }
+        this.tb = this.toolbars.BODY;
+        this.tb.el.show();
+        
+         
+        this.rendered = true;
+        
+        // the all the btns;
+        editor.on('editorevent', this.updateToolbar, this);
+        // other toolbars need to implement this..
+        //editor.on('editmodechange', this.updateToolbar, this);
+    },
+    
+    
+    
+    /**
+     * Protected method that will not generally be called directly. It triggers
+     * a toolbar update by reading the markup state of the current selection in the editor.
+     */
+    updateToolbar: function(){
+
+        if(!this.editor.activated){
+            this.editor.onFirstFocus();
+            return;
+        }
+
+        
+        var ans = this.editor.getAllAncestors();
+        
+        // pick
+        var ty= Roo.form.HtmlEditor.ToolbarContext.types;
+        var sel = ans.length ? (ans[0] ?  ans[0]  : ans[1]) : this.editor.doc.body;
+        sel = sel ? sel : this.editor.doc.body;
+        sel = sel.tagName.length ? sel : this.editor.doc.body;
+        var tn = sel.tagName.toUpperCase();
+        sel = typeof(ty[tn]) != 'undefined' ? sel : this.editor.doc.body;
+        tn = sel.tagName.toUpperCase();
+        if (this.tb.name  == tn) {
+            return; // no change
+        }
+        this.tb.el.hide();
+        ///console.log("show: " + tn);
+        this.tb =  this.toolbars[tn];
+        this.tb.el.show();
+        this.tb.fields.each(function(e) {
+            e.setValue(sel.getAttribute(e.name));
+        });
+        this.tb.selectedNode = sel;
+        
+        
+        Roo.menu.MenuMgr.hideAll();
+
+        //this.editorsyncValue();
+    },
+   
+       
+    // private
+    onDestroy : function(){
+        if(this.rendered){
+            
+            this.tb.items.each(function(item){
+                if(item.menu){
+                    item.menu.removeAll();
+                    if(item.menu.el){
+                        item.menu.el.destroy();
+                    }
+                }
+                item.destroy();
+            });
+             
+        }
+    },
+    onFirstFocus: function() {
+        // need to do this for all the toolbars..
+        this.tb.items.each(function(item){
+           item.enable();
+        });
+    },
+    buildToolbar: function(tlist, nm)
+    {
+        var editor = this.editor;
+         // create a new element.
+        var wdiv = editor.wrap.createChild({
+                tag: 'div'
+            }, editor.wrap.dom.firstChild.nextSibling, true);
+        
+       
+        var tb = new Roo.Toolbar(wdiv);
+        tb.add(nm+ ":&nbsp;");
+        for (var i in tlist) {
+            var item = tlist[i];
+            tb.add(item.title + ":&nbsp;");
+            if (item.opts) {
+                // fixme
+                
+              
+                tb.addField( new Roo.form.ComboBox({
+                    store: new Roo.data.SimpleStore({
+                        id : 'val',
+                        fields: ['val'],
+                        data : item.opts // from states.js
+                    }),
+                    name : i,
+                    displayField:'val',
+                    typeAhead: false,
+                    mode: 'local',
+                    editable : false,
+                    triggerAction: 'all',
+                    emptyText:'Select',
+                    selectOnFocus:true,
+                    width: item.width ? item.width  : 130,
+                    listeners : {
+                        'select': function(c, r, i) {
+                            tb.selectedNode.setAttribute(c.name, r.get('val'));
+                        }
+                    }
+
+                }));
+                continue;
+                    
+                
+                
+                
+                
+                tb.addField( new Roo.form.TextField({
+                    name: i,
+                    width: 100,
+                    //allowBlank:false,
+                    value: ''
+                }));
+                continue;
+            }
+            tb.addField( new Roo.form.TextField({
+                name: i,
+                width: item.width,
+                //allowBlank:true,
+                value: '',
+                listeners: {
+                    'change' : function(f, nv, ov) {
+                        tb.selectedNode.setAttribute(f.name, nv);
+                    }
+                }
+            }));
+             
+        }
+        tb.el.on('click', function(e){
+            e.preventDefault(); // what does this do?
+        });
+        tb.el.setVisibilityMode( Roo.Element.DISPLAY);
+        tb.el.hide();
+        tb.name = nm;
+        // dont need to disable them... as they will get hidden
+        return tb;
+         
+        
+    }
+    
+    
+    
+    
+});
+
+
+
+
+
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+/**
+ * @class Roo.form.BasicForm
+ * @extends Roo.util.Observable
+ * Supplies the functionality to do "actions" on forms and initialize Roo.form.Field types on existing markup.
+ * @constructor
+ * @param {String/HTMLElement/Roo.Element} el The form element or its id
+ * @param {Object} config Configuration options
+ */
+Roo.form.BasicForm = function(el, config){
+    this.allItems = [];
+    this.childForms = [];
+    Roo.apply(this, config);
+    /*
+     * The Roo.form.Field items in this form.
+     * @type MixedCollection
+     */
+     
+     
+    this.items = new Roo.util.MixedCollection(false, function(o){
+        return o.id || (o.id = Roo.id());
+    });
+    this.addEvents({
+        /**
+         * @event beforeaction
+         * Fires before any action is performed. Return false to cancel the action.
+         * @param {Form} this
+         * @param {Action} action The action to be performed
+         */
+        beforeaction: true,
+        /**
+         * @event actionfailed
+         * Fires when an action fails.
+         * @param {Form} this
+         * @param {Action} action The action that failed
+         */
+        actionfailed : true,
+        /**
+         * @event actioncomplete
+         * Fires when an action is completed.
+         * @param {Form} this
+         * @param {Action} action The action that completed
+         */
+        actioncomplete : true
+    });
+    if(el){
+        this.initEl(el);
+    }
+    Roo.form.BasicForm.superclass.constructor.call(this);
+};
+
+Roo.extend(Roo.form.BasicForm, Roo.util.Observable, {
+    /**
+     * @cfg {String} method
+     * The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
+     */
+    /**
+     * @cfg {DataReader} reader
+     * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when executing "load" actions.
+     * This is optional as there is built-in support for processing JSON.
+     */
+    /**
+     * @cfg {DataReader} errorReader
+     * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when reading validation errors on "submit" actions.
+     * This is completely optional as there is built-in support for processing JSON.
+     */
+    /**
+     * @cfg {String} url
+     * The URL to use for form actions if one isn't supplied in the action options.
+     */
+    /**
+     * @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).
+     */
+    timeout: 30,
+
+    // private
+    activeAction : null,
+
+    /**
+     * @cfg {Boolean} trackResetOnLoad If set to true, form.reset() resets to the last loaded
+     * or setValues() data instead of when the form was first created.
+     */
+    trackResetOnLoad : false,
+    
+    
+    /**
+     * childForms - used for multi-tab forms
+     * @type {Array}
+     */
+    childForms : false,
+    
+    /**
+     * allItems - full list of fields.
+     * @type {Array}
+     */
+    allItems : false,
+    
+    /**
+     * By default wait messages are displayed with Roo.MessageBox.wait. You can target a specific
+     * element by passing it or its id or mask the form itself by passing in true.
+     * @type Mixed
+     */
+    waitMsgTarget : false,
+
+    // private
+    initEl : function(el){
+        this.el = Roo.get(el);
+        this.id = this.el.id || Roo.id();
+        this.el.on('submit', this.onSubmit, this);
+        this.el.addClass('x-form');
+    },
+
+    // private
+    onSubmit : function(e){
+        e.stopEvent();
+    },
+
+    /**
+     * Returns true if client-side validation on the form is successful.
+     * @return Boolean
+     */
+    isValid : function(){
+        var valid = true;
+        this.items.each(function(f){
+           if(!f.validate()){
+               valid = false;
+           }
+        });
+        return valid;
+    },
+
+    /**
+     * Returns true if any fields in this form have changed since their original load.
+     * @return Boolean
+     */
+    isDirty : function(){
+        var dirty = false;
+        this.items.each(function(f){
+           if(f.isDirty()){
+               dirty = true;
+               return false;
+           }
+        });
+        return dirty;
+    },
+
+    /**
+     * Performs a predefined action (submit or load) or custom actions you define on this form.
+     * @param {String} actionName The name of the action type
+     * @param {Object} options (optional) The options to pass to the action.  All of the config options listed
+     * below are supported by both the submit and load actions unless otherwise noted (custom actions could also
+     * accept other config options):
+     * <pre>
+Property          Type             Description
+----------------  ---------------  ----------------------------------------------------------------------------------
+url               String           The url for the action (defaults to the form's url)
+method            String           The form method to use (defaults to the form's method, or POST if not defined)
+params            String/Object    The params to pass (defaults to the form's baseParams, or none if not defined)
+clientValidation  Boolean          Applies to submit only.  Pass true to call form.isValid() prior to posting to
+                                   validate the form on the client (defaults to false)
+     * </pre>
+     * @return {BasicForm} this
+     */
+    doAction : function(action, options){
+        if(typeof action == 'string'){
+            action = new Roo.form.Action.ACTION_TYPES[action](this, options);
+        }
+        if(this.fireEvent('beforeaction', this, action) !== false){
+            this.beforeAction(action);
+            action.run.defer(100, action);
+        }
+        return this;
+    },
+
+    /**
+     * Shortcut to do a submit action.
+     * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
+     * @return {BasicForm} this
+     */
+    submit : function(options){
+        this.doAction('submit', options);
+        return this;
+    },
+
+    /**
+     * Shortcut to do a load action.
+     * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
+     * @return {BasicForm} this
+     */
+    load : function(options){
+        this.doAction('load', options);
+        return this;
+    },
+
+    /**
+     * Persists the values in this form into the passed Roo.data.Record object in a beginEdit/endEdit block.
+     * @param {Record} record The record to edit
+     * @return {BasicForm} this
+     */
+    updateRecord : function(record){
+        record.beginEdit();
+        var fs = record.fields;
+        fs.each(function(f){
+            var field = this.findField(f.name);
+            if(field){
+                record.set(f.name, field.getValue());
+            }
+        }, this);
+        record.endEdit();
+        return this;
+    },
+
+    /**
+     * Loads an Roo.data.Record into this form.
+     * @param {Record} record The record to load
+     * @return {BasicForm} this
+     */
+    loadRecord : function(record){
+        this.setValues(record.data);
+        return this;
+    },
+
+    // private
+    beforeAction : function(action){
+        var o = action.options;
+        
+       
+        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(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);
+        }
+        
+    },
+
+    /**
+     * Find a Roo.form.Field in this form by id, dataIndex, name or hiddenName
+     * @param {String} id The value to search for
+     * @return Field
+     */
+    findField : function(id){
+        var field = this.items.get(id);
+        if(!field){
+            this.items.each(function(f){
+                if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
+                    field = f;
+                    return false;
+                }
+            });
+        }
+        return field || null;
+    },
+
+    /**
+     * Add a secondary form to this one, 
+     * Used to provide tabbed forms. One form is primary, with hidden values 
+     * which mirror the elements from the other forms.
+     * 
+     * @param {Roo.form.Form} form to add.
+     * 
+     */
+    addForm : function(form)
+    {
+       
+        if (this.childForms.indexOf(form) > -1) {
+            // already added..
+            return;
+        }
+        this.childForms.push(form);
+        var n = '';
+        Roo.each(form.allItems, function (fe) {
+            
+            n = typeof(fe.getName) == 'undefined' ? fe.name : fe.getName();
+            if (this.findField(n)) { // already added..
+                return;
+            }
+            var add = new Roo.form.Hidden({
+                name : n
+            });
+            add.render(this.el);
+            
+            this.add( add );
+        }, this);
+        
+    },
+    /**
+     * Mark fields in this form invalid in bulk.
+     * @param {Array/Object} errors Either an array in the form [{id:'fieldId', msg:'The message'},...] or an object hash of {id: msg, id2: msg2}
+     * @return {BasicForm} this
+     */
+    markInvalid : function(errors){
+        if(errors instanceof Array){
+            for(var i = 0, len = errors.length; i < len; i++){
+                var fieldError = errors[i];
+                var f = this.findField(fieldError.id);
+                if(f){
+                    f.markInvalid(fieldError.msg);
+                }
+            }
+        }else{
+            var field, id;
+            for(id in errors){
+                if(typeof errors[id] != 'function' && (field = this.findField(id))){
+                    field.markInvalid(errors[id]);
+                }
+            }
+        }
+        Roo.each(this.childForms || [], function (f) {
+            f.markInvalid(errors);
+        });
+        
+        return this;
+    },
+
+    /**
+     * Set values for fields in this form in bulk.
+     * @param {Array/Object} values Either an array in the form [{id:'fieldId', value:'foo'},...] or an object hash of {id: value, id2: value2}
+     * @return {BasicForm} this
+     */
+    setValues : function(values){
+        if(values instanceof Array){ // array of objects
+            for(var i = 0, len = values.length; i < len; i++){
+                var v = values[i];
+                var f = this.findField(v.id);
+                if(f){
+                    f.setValue(v.value);
+                    if(this.trackResetOnLoad){
+                        f.originalValue = f.getValue();
+                    }
+                }
+            }
+        }else{ // object hash
+            var field, id;
+            for(id in values){
+                if(typeof values[id] != 'function' && (field = this.findField(id))){
+                    
+                    if (field.setFromData && 
+                        field.valueField && 
+                        field.displayField &&
+                        // combos' with local stores can 
+                        // be queried via setValue()
+                        // to set their value..
+                        (field.store && !field.store.isLocal)
+                        ) {
+                        // it's a combo
+                        var sd = { };
+                        sd[field.valueField] = typeof(values[field.hiddenName]) == 'undefined' ? '' : values[field.hiddenName];
+                        sd[field.displayField] = typeof(values[field.name]) == 'undefined' ? '' : values[field.name];
+                        field.setFromData(sd);
+                        
+                    } else {
+                        field.setValue(values[id]);
+                    }
+                    
+                    
+                    if(this.trackResetOnLoad){
+                        field.originalValue = field.getValue();
+                    }
+                }
+            }
+        }
+         
+        Roo.each(this.childForms || [], function (f) {
+            f.setValues(values);
+        });
+                
+        return this;
+    },
+
+    /**
+     * Returns the fields in this form as an object with key/value pairs. If multiple fields exist with the same name
+     * they are returned as an array.
+     * @param {Boolean} asString
+     * @return {Object}
+     */
+    getValues : function(asString){
+        if (this.childForms) {
+            // copy values from the child forms
+            Roo.each(this.childForms, function (f) {
+                this.setValues(f.getValues());
+            }, this);
+        }
+        
+        
+        
+        var fs = Roo.lib.Ajax.serializeForm(this.el.dom);
+        if(asString === true){
+            return fs;
+        }
+        return Roo.urlDecode(fs);
+    },
+    
+    /**
+     * Returns the fields in this form as an object with key/value pairs. 
+     * This differs from getValues as it calls getValue on each child item, rather than using dom data.
+     * @return {Object}
+     */
+    getFieldValues : function()
+    {
+        if (this.childForms) {
+            // copy values from the child forms
+            Roo.each(this.childForms, function (f) {
+                this.setValues(f.getValues());
+            }, this);
+        }
+        
+        var ret = {};
+        this.items.each(function(f){
+            if (!f.getName()) {
+                return;
+            }
+            var v = f.getValue();
+            if ((typeof(v) == 'object') && f.getRawValue) {
+                v = f.getRawValue() ; // dates..
+            }
+            ret[f.getName()] = v;
+        });
+        
+        return ret;
+    },
+
+    /**
+     * Clears all invalid messages in this form.
+     * @return {BasicForm} this
+     */
+    clearInvalid : function(){
+        this.items.each(function(f){
+           f.clearInvalid();
+        });
+        
+        Roo.each(this.childForms || [], function (f) {
+            f.clearInvalid();
+        });
+        
+        
+        return this;
+    },
+
+    /**
+     * Resets this form.
+     * @return {BasicForm} this
+     */
+    reset : function(){
+        this.items.each(function(f){
+            f.reset();
+        });
+        
+        Roo.each(this.childForms || [], function (f) {
+            f.reset();
+        });
+       
+        
+        return this;
+    },
+
+    /**
+     * Add Roo.form components to this form.
+     * @param {Field} field1
+     * @param {Field} field2 (optional)
+     * @param {Field} etc (optional)
+     * @return {BasicForm} this
+     */
+    add : function(){
+        this.items.addAll(Array.prototype.slice.call(arguments, 0));
+        return this;
+    },
+
+
+    /**
+     * Removes a field from the items collection (does NOT remove its markup).
+     * @param {Field} field
+     * @return {BasicForm} this
+     */
+    remove : function(field){
+        this.items.remove(field);
+        return this;
+    },
+
+    /**
+     * Looks at the fields in this form, checks them for an id attribute,
+     * and calls applyTo on the existing dom element with that id.
+     * @return {BasicForm} this
+     */
+    render : function(){
+        this.items.each(function(f){
+            if(f.isFormField && !f.rendered && document.getElementById(f.id)){ // if the element exists
+                f.applyTo(f.id);
+            }
+        });
+        return this;
+    },
+
+    /**
+     * Calls {@link Ext#apply} for all fields in this form with the passed object.
+     * @param {Object} values
+     * @return {BasicForm} this
+     */
+    applyToFields : function(o){
+        this.items.each(function(f){
+           Roo.apply(f, o);
+        });
+        return this;
+    },
+
+    /**
+     * Calls {@link Ext#applyIf} for all field in this form with the passed object.
+     * @param {Object} values
+     * @return {BasicForm} this
+     */
+    applyIfToFields : function(o){
+        this.items.each(function(f){
+           Roo.applyIf(f, o);
+        });
+        return this;
+    }
+});
+
+// back compat
+Roo.BasicForm = Roo.form.BasicForm;/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.form.Form
+ * @extends Roo.form.BasicForm
+ * Adds the ability to dynamically render forms with JavaScript to {@link Roo.form.BasicForm}.
+ * @constructor
+ * @param {Object} config Configuration options
+ */
+Roo.form.Form = function(config){
+    var xitems =  [];
+    if (config.items) {
+        xitems = config.items;
+        delete config.items;
+    }
+   
+    
+    Roo.form.Form.superclass.constructor.call(this, null, config);
+    this.url = this.url || this.action;
+    if(!this.root){
+        this.root = new Roo.form.Layout(Roo.applyIf({
+            id: Roo.id()
+        }, config));
+    }
+    this.active = this.root;
+    /**
+     * Array of all the buttons that have been added to this form via {@link addButton}
+     * @type Array
+     */
+    this.buttons = [];
+    this.allItems = [];
+    this.addEvents({
+        /**
+         * @event clientvalidation
+         * If the monitorValid config option is true, this event fires repetitively to notify of valid state
+         * @param {Form} this
+         * @param {Boolean} valid true if the form has passed client-side validation
+         */
+        clientvalidation: true,
+        /**
+         * @event rendered
+         * Fires when the form is rendered
+         * @param {Roo.form.Form} form
+         */
+        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);
+    
+    
+    
+};
+
+Roo.extend(Roo.form.Form, Roo.form.BasicForm, {
+    /**
+     * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
+     */
+    /**
+     * @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
+     */
+    /**
+     * @cfg {String} buttonAlign Valid values are "left," "center" and "right" (defaults to "center")
+     */
+    buttonAlign:'center',
+
+    /**
+     * @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to 75)
+     */
+    minButtonWidth:75,
+
+    /**
+     * @cfg {String} labelAlign Valid values are "left," "top" and "right" (defaults to "left").
+     * This property cascades to child containers if not set.
+     */
+    labelAlign:'left',
+
+    /**
+     * @cfg {Boolean} monitorValid If true the form monitors its valid state <b>client-side</b> and
+     * fires a looping event with that state. This is required to bind buttons to the valid
+     * state using the config value formBind:true on the button.
+     */
+    monitorValid : false,
+
+    /**
+     * @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
+     * fields are added and the column is closed. If no fields are passed the column remains open
+     * until end() is called.
+     * @param {Object} config The config to pass to the column
+     * @param {Field} field1 (optional)
+     * @param {Field} field2 (optional)
+     * @param {Field} etc (optional)
+     * @return Column The column container object
+     */
+    column : function(c){
+        var col = new Roo.form.Column(c);
+        this.start(col);
+        if(arguments.length > 1){ // duplicate code required because of Opera
+            this.add.apply(this, Array.prototype.slice.call(arguments, 1));
+            this.end();
+        }
+        return col;
+    },
+
+    /**
+     * Opens a new {@link Roo.form.FieldSet} container in the layout stack. If fields are passed after the config, the
+     * fields are added and the fieldset is closed. If no fields are passed the fieldset remains open
+     * until end() is called.
+     * @param {Object} config The config to pass to the fieldset
+     * @param {Field} field1 (optional)
+     * @param {Field} field2 (optional)
+     * @param {Field} etc (optional)
+     * @return FieldSet The fieldset container object
+     */
+    fieldset : function(c){
+        var fs = new Roo.form.FieldSet(c);
+        this.start(fs);
+        if(arguments.length > 1){ // duplicate code required because of Opera
+            this.add.apply(this, Array.prototype.slice.call(arguments, 1));
+            this.end();
+        }
+        return fs;
+    },
+
+    /**
+     * Opens a new {@link Roo.form.Layout} container in the layout stack. If fields are passed after the config, the
+     * fields are added and the container is closed. If no fields are passed the container remains open
+     * until end() is called.
+     * @param {Object} config The config to pass to the Layout
+     * @param {Field} field1 (optional)
+     * @param {Field} field2 (optional)
+     * @param {Field} etc (optional)
+     * @return Layout The container object
+     */
+    container : function(c){
+        var l = new Roo.form.Layout(c);
+        this.start(l);
+        if(arguments.length > 1){ // duplicate code required because of Opera
+            this.add.apply(this, Array.prototype.slice.call(arguments, 1));
+            this.end();
+        }
+        return l;
+    },
+
+    /**
+     * Opens the passed container in the layout stack. The container can be any {@link Roo.form.Layout} or subclass.
+     * @param {Object} container A Roo.form.Layout or subclass of Layout
+     * @return {Form} this
+     */
+    start : function(c){
+        // cascade label info
+        Roo.applyIf(c, {'labelAlign': this.active.labelAlign, 'labelWidth': this.active.labelWidth, 'itemCls': this.active.itemCls});
+        this.active.stack.push(c);
+        c.ownerCt = this.active;
+        this.active = c;
+        return this;
+    },
+
+    /**
+     * Closes the current open container
+     * @return {Form} this
+     */
+    end : function(){
+        if(this.active == this.root){
+            return this;
+        }
+        this.active = this.active.ownerCt;
+        return this;
+    },
+
+    /**
+     * Add Roo.form components to the current open container (e.g. column, fieldset, etc.).  Fields added via this method
+     * can also be passed with an additional property of fieldLabel, which if supplied, will provide the text to display
+     * as the label of the field.
+     * @param {Field} field1
+     * @param {Field} field2 (optional)
+     * @param {Field} etc. (optional)
+     * @return {Form} this
+     */
+    add : function(){
+        this.active.stack.push.apply(this.active.stack, arguments);
+        this.allItems.push.apply(this.allItems,arguments);
+        var r = [];
+        for(var i = 0, a = arguments, len = a.length; i < len; i++) {
+            if(a[i].isFormField){
+                r.push(a[i]);
+            }
+        }
+        if(r.length > 0){
+            Roo.form.Form.superclass.add.apply(this, r);
+        }
+        return this;
+    },
+    
+
+    
+    
+    
+     /**
+     * Find any element that has been added to a form, using it's ID or name
+     * This can include framesets, columns etc. along with regular fields..
+     * @param {String} id - id or name to find.
+     
+     * @return {Element} e - or false if nothing found.
+     */
+    findbyId : function(id)
+    {
+        var ret = false;
+        if (!id) {
+            return ret;
+        }
+        Ext.each(this.allItems, function(f){
+            if (f.id == id || f.name == id ){
+                ret = f;
+                return false;
+            }
+        });
+        return ret;
+    },
+
+    
+    
+    /**
+     * Render this form into the passed container. This should only be called once!
+     * @param {String/HTMLElement/Element} container The element this component should be rendered into
+     * @return {Form} this
+     */
+    render : function(ct)
+    {
+        
+        
+        
+        ct = Roo.get(ct);
+        var o = this.autoCreate || {
+            tag: 'form',
+            method : this.method || 'POST',
+            id : this.id || Roo.id()
+        };
+        this.initEl(ct.createChild(o));
+
+        this.root.render(this.el);
+        
+       
+             
+        this.items.each(function(f){
+            f.render('x-form-el-'+f.id);
+        });
+
+        if(this.buttons.length > 0){
+            // tables are required to maintain order and for correct IE layout
+            var tb = this.el.createChild({cls:'x-form-btns-ct', cn: {
+                cls:"x-form-btns x-form-btns-"+this.buttonAlign,
+                html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
+            }}, null, true);
+            var tr = tb.getElementsByTagName('tr')[0];
+            for(var i = 0, len = this.buttons.length; i < len; i++) {
+                var b = this.buttons[i];
+                var td = document.createElement('td');
+                td.className = 'x-form-btn-td';
+                b.render(tr.appendChild(td));
+            }
+        }
+        if(this.monitorValid){ // initialize after render
+            this.startMonitoring();
+        }
+        this.fireEvent('rendered', this);
+        return this;
+    },
+
+    /**
+     * Adds a button to the footer of the form - this <b>must</b> be called before the form is rendered.
+     * @param {String/Object} config A string becomes the button text, an object can either be a Button config
+     * object or a valid Roo.DomHelper element config
+     * @param {Function} handler The function called when the button is clicked
+     * @param {Object} scope (optional) The scope of the handler function
+     * @return {Roo.Button}
+     */
+    addButton : function(config, handler, scope){
+        var bc = {
+            handler: handler,
+            scope: scope,
+            minWidth: this.minButtonWidth,
+            hideParent:true
+        };
+        if(typeof config == "string"){
+            bc.text = config;
+        }else{
+            Roo.apply(bc, config);
+        }
+        var btn = new Roo.Button(null, bc);
+        this.buttons.push(btn);
+        return btn;
+    },
+
+     /**
+     * Adds a series of form elements (using the xtype property as the factory method.
+     * Valid xtypes are:  TextField, TextArea .... Button, Layout, FieldSet, Column, (and 'end' to close a block)
+     * @param {Object} config 
+     */
+    
+    addxtype : function()
+    {
+        var ar = Array.prototype.slice.call(arguments, 0);
+        var ret = false;
+        for(var i = 0; i < ar.length; i++) {
+            if (!ar[i]) {
+                continue; // skip -- if this happends something invalid got sent, we 
+                // should ignore it, as basically that interface element will not show up
+                // and that should be pretty obvious!!
+            }
+            
+            if (Roo.form[ar[i].xtype]) {
+                ar[i].form = this;
+                var fe = Roo.factory(ar[i], Roo.form);
+                if (!ret) {
+                    ret = fe;
+                }
+                fe.form = this;
+                if (fe.store) {
+                    fe.store.form = this;
+                }
+                if (fe.isLayout) {  
+                         
+                    this.start(fe);
+                    this.allItems.push(fe);
+                    if (fe.items && fe.addxtype) {
+                        fe.addxtype.apply(fe, fe.items);
+                        delete fe.items;
+                    }
+                     this.end();
+                    continue;
+                }
+                
+                
+                 
+                this.add(fe);
+              //  console.log('adding ' + ar[i].xtype);
+            }
+            if (ar[i].xtype == 'Button') {  
+                //console.log('adding button');
+                //console.log(ar[i]);
+                this.addButton(ar[i]);
+                this.allItems.push(fe);
+                continue;
+            }
+            
+            if (ar[i].xtype == 'end') { // so we can add fieldsets... / layout etc.
+                alert('end is not supported on xtype any more, use items');
+            //    this.end();
+            //    //console.log('adding end');
+            }
+            
+        }
+        return ret;
+    },
+    
+    /**
+     * Starts monitoring of the valid state of this form. Usually this is done by passing the config
+     * option "monitorValid"
+     */
+    startMonitoring : function(){
+        if(!this.bound){
+            this.bound = true;
+            Roo.TaskMgr.start({
+                run : this.bindHandler,
+                interval : this.monitorPoll || 200,
+                scope: this
+            });
+        }
+    },
+
+    /**
+     * Stops monitoring of the valid state of this form
+     */
+    stopMonitoring : function(){
+        this.bound = false;
+    },
+
+    // private
+    bindHandler : function(){
+        if(!this.bound){
+            return false; // stops binding
+        }
+        var valid = true;
+        this.items.each(function(f){
+            if(!f.isValid(true)){
+                valid = false;
+                return false;
+            }
+        });
+        for(var i = 0, len = this.buttons.length; i < len; i++){
+            var btn = this.buttons[i];
+            if(btn.formBind === true && btn.disabled === valid){
+                btn.setDisabled(!valid);
+            }
+        }
+        this.fireEvent('clientvalidation', this, valid);
+    }
+    
+    
+    
+    
+    
+    
+    
+    
+});
+
+
+// back compat
+Roo.Form = Roo.form.Form;
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+ /**
+ * @class Roo.form.Action
+ * Internal Class used to handle form actions
+ * @constructor
+ * @param {Roo.form.BasicForm} el The form element or its id
+ * @param {Object} config Configuration options
+ */
+ 
+ 
+// define the action interface
+Roo.form.Action = function(form, options){
+    this.form = form;
+    this.options = options || {};
+};
+/**
+ * Client Validation Failed
+ * @const 
+ */
+Roo.form.Action.CLIENT_INVALID = 'client';
+/**
+ * Server Validation Failed
+ * @const 
+ */
+ Roo.form.Action.SERVER_INVALID = 'server';
+ /**
+ * Connect to Server Failed
+ * @const 
+ */
+Roo.form.Action.CONNECT_FAILURE = 'connect';
+/**
+ * Reading Data from Server Failed
+ * @const 
+ */
+Roo.form.Action.LOAD_FAILURE = 'load';
+
+Roo.form.Action.prototype = {
+    type : 'default',
+    failureType : undefined,
+    response : undefined,
+    result : undefined,
+
+    // interface method
+    run : function(options){
+
+    },
+
+    // interface method
+    success : function(response){
+
+    },
+
+    // interface method
+    handleResponse : function(response){
+
+    },
+
+    // default connection failure
+    failure : function(response){
+        
+        this.response = response;
+        this.failureType = Roo.form.Action.CONNECT_FAILURE;
+        this.form.afterAction(this, false);
+    },
+
+    processResponse : function(response){
+        this.response = response;
+        if(!response.responseText){
+            return true;
+        }
+        this.result = this.handleResponse(response);
+        return this.result;
+    },
+
+    // utility functions used internally
+    getUrl : function(appendParams){
+        var url = this.options.url || this.form.url || this.form.el.dom.action;
+        if(appendParams){
+            var p = this.getParams();
+            if(p){
+                url += (url.indexOf('?') != -1 ? '&' : '?') + p;
+            }
+        }
+        return url;
+    },
+
+    getMethod : function(){
+        return (this.options.method || this.form.method || this.form.el.dom.method || 'POST').toUpperCase();
+    },
+
+    getParams : function(){
+        var bp = this.form.baseParams;
+        var p = this.options.params;
+        if(p){
+            if(typeof p == "object"){
+                p = Roo.urlEncode(Roo.applyIf(p, bp));
+            }else if(typeof p == 'string' && bp){
+                p += '&' + Roo.urlEncode(bp);
+            }
+        }else if(bp){
+            p = Roo.urlEncode(bp);
+        }
+        return p;
+    },
+
+    createCallback : function(){
+        return {
+            success: this.success,
+            failure: this.failure,
+            scope: this,
+            timeout: (this.form.timeout*1000),
+            upload: this.form.fileUpload ? this.success : undefined
+        };
+    }
+};
+
+Roo.form.Action.Submit = function(form, options){
+    Roo.form.Action.Submit.superclass.constructor.call(this, 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.
+        this.form.getValues();
+        
+        var o = this.options;
+        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),
+                method: method,
+                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;
+            this.form.afterAction(this, false);
+        }
+    },
+
+    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);
+            return;
+        }
+        if(result.errors){
+            this.form.markInvalid(result.errors);
+            this.failureType = Roo.form.Action.SERVER_INVALID;
+        }
+        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);
+            var errors = [];
+            if(rs.records){
+                for(var i = 0, len = rs.records.length; i < len; i++) {
+                    var r = rs.records[i];
+                    errors[i] = r.data;
+                }
+            }
+            if(errors.length < 1){
+                errors = null;
+            }
+            return {
+                success : rs.success,
+                errors : errors
+            };
+        }
+        var ret = false;
+        try {
+            ret = Roo.decode(response.responseText);
+        } catch (e) {
+            ret = {
+                success: false,
+                errorMsg: "Failed to read server message: " + (response ? response.responseText : ' - no message'),
+                errors : []
+            };
+        }
+        return ret;
+        
+    }
+});
+
+
+Roo.form.Action.Load = function(form, options){
+    Roo.form.Action.Load.superclass.constructor.call(this, form, options);
+    this.reader = this.form.reader;
+};
+
+Roo.extend(Roo.form.Action.Load, Roo.form.Action, {
+    type : 'load',
+
+    run : function(){
+        
+        Roo.Ajax.request(Roo.apply(
+                this.createCallback(), {
+                    method:this.getMethod(),
+                    url:this.getUrl(false),
+                    params:this.getParams()
+        }));
+    },
+
+    success : function(response){
+        
+        var result = this.processResponse(response);
+        if(result === true || !result.success || !result.data){
+            this.failureType = Roo.form.Action.LOAD_FAILURE;
+            this.form.afterAction(this, false);
+            return;
+        }
+        this.form.clearInvalid();
+        this.form.setValues(result.data);
+        this.form.afterAction(this, true);
+    },
+
+    handleResponse : function(response){
+        if(this.form.reader){
+            var rs = this.form.reader.read(response);
+            var data = rs.records && rs.records[0] ? rs.records[0].data : null;
+            return {
+                success : rs.success,
+                data : data
+            };
+        }
+        return Roo.decode(response.responseText);
+    }
+});
+
+Roo.form.Action.ACTION_TYPES = {
+    'load' : Roo.form.Action.Load,
+    'submit' : Roo.form.Action.Submit
+};/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+/**
+ * @class Roo.form.Layout
+ * @extends Roo.Component
+ * Creates a container for layout and rendering of fields in an {@link Roo.form.Form}.
+ * @constructor
+ * @param {Object} config Configuration options
+ */
+Roo.form.Layout = function(config){
+    var xitems = [];
+    if (config.items) {
+        xitems = config.items;
+        delete config.items;
+    }
+    Roo.form.Layout.superclass.constructor.call(this, config);
+    this.stack = [];
+    Roo.each(xitems, this.addxtype, this);
+     
+};
+
+Roo.extend(Roo.form.Layout, Roo.Component, {
+    /**
+     * @cfg {String/Object} autoCreate
+     * A DomHelper element spec used to autocreate the layout (defaults to {tag: 'div', cls: 'x-form-ct'})
+     */
+    /**
+     * @cfg {String/Object/Function} style
+     * A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
+     * a function which returns such a specification.
+     */
+    /**
+     * @cfg {String} labelAlign
+     * Valid values are "left," "top" and "right" (defaults to "left")
+     */
+    /**
+     * @cfg {Number} labelWidth
+     * Fixed width in pixels of all field labels (defaults to undefined)
+     */
+    /**
+     * @cfg {Boolean} clear
+     * True to add a clearing element at the end of this layout, equivalent to CSS clear: both (defaults to true)
+     */
+    clear : true,
+    /**
+     * @cfg {String} labelSeparator
+     * The separator to use after field labels (defaults to ':')
+     */
+    labelSeparator : ':',
+    /**
+     * @cfg {Boolean} hideLabels
+     * True to suppress the display of field labels in this layout (defaults to false)
+     */
+    hideLabels : false,
+
+    // private
+    defaultAutoCreate : {tag: 'div', cls: 'x-form-ct'},
+    
+    isLayout : true,
+    
+    // private
+    onRender : function(ct, position){
+        if(this.el){ // from markup
+            this.el = Roo.get(this.el);
+        }else {  // generate
+            var cfg = this.getAutoCreate();
+            this.el = ct.createChild(cfg, position);
+        }
+        if(this.style){
+            this.el.applyStyles(this.style);
+        }
+        if(this.labelAlign){
+            this.el.addClass('x-form-label-'+this.labelAlign);
+        }
+        if(this.hideLabels){
+            this.labelStyle = "display:none";
+            this.elementStyle = "padding-left:0;";
+        }else{
+            if(typeof this.labelWidth == 'number'){
+                this.labelStyle = "width:"+this.labelWidth+"px;";
+                this.elementStyle = "padding-left:"+((this.labelWidth+(typeof this.labelPad == 'number' ? this.labelPad : 5))+'px')+";";
+            }
+            if(this.labelAlign == 'top'){
+                this.labelStyle = "width:auto;";
+                this.elementStyle = "padding-left:0;";
+            }
+        }
+        var stack = this.stack;
+        var slen = stack.length;
+        if(slen > 0){
+            if(!this.fieldTpl){
+                var t = new Roo.Template(
+                    '<div class="x-form-item {5}">',
+                        '<label for="{0}" style="{2}">{1}{4}</label>',
+                        '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
+                        '</div>',
+                    '</div><div class="x-form-clear-left"></div>'
+                );
+                t.disableFormats = true;
+                t.compile();
+                Roo.form.Layout.prototype.fieldTpl = t;
+            }
+            for(var i = 0; i < slen; i++) {
+                if(stack[i].isFormField){
+                    this.renderField(stack[i]);
+                }else{
+                    this.renderComponent(stack[i]);
+                }
+            }
+        }
+        if(this.clear){
+            this.el.createChild({cls:'x-form-clear'});
+        }
+    },
+
+    // private
+    renderField : function(f){
+        f.fieldEl = Roo.get(this.fieldTpl.append(this.el, [
+               f.id, //0
+               f.fieldLabel, //1
+               f.labelStyle||this.labelStyle||'', //2
+               this.elementStyle||'', //3
+               typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator, //4
+               f.itemCls||this.itemCls||''  //5
+       ], true).getPrevSibling());
+    },
+
+    // private
+    renderComponent : function(c){
+        c.render(c.isLayout ? this.el : this.el.createChild());    
+    },
+    /**
+     * Adds a object form elements (using the xtype property as the factory method.)
+     * Valid xtypes are:  TextField, TextArea .... Button, Layout, FieldSet, Column
+     * @param {Object} config 
+     */
+    addxtype : function(o)
+    {
+        // create the lement.
+        o.form = this.form;
+        var fe = Roo.factory(o, Roo.form);
+        this.form.allItems.push(fe);
+        this.stack.push(fe);
+        
+        if (fe.isFormField) {
+            this.form.items.add(fe);
+        }
+         
+        return fe;
+    }
+});
+
+/**
+ * @class Roo.form.Column
+ * @extends Roo.form.Layout
+ * Creates a column container for layout and rendering of fields in an {@link Roo.form.Form}.
+ * @constructor
+ * @param {Object} config Configuration options
+ */
+Roo.form.Column = function(config){
+    Roo.form.Column.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.form.Column, Roo.form.Layout, {
+    /**
+     * @cfg {Number/String} width
+     * The fixed width of the column in pixels or CSS value (defaults to "auto")
+     */
+    /**
+     * @cfg {String/Object} autoCreate
+     * A DomHelper element spec used to autocreate the column (defaults to {tag: 'div', cls: 'x-form-ct x-form-column'})
+     */
+
+    // private
+    defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-column'},
+
+    // private
+    onRender : function(ct, position){
+        Roo.form.Column.superclass.onRender.call(this, ct, position);
+        if(this.width){
+            this.el.setWidth(this.width);
+        }
+    }
+});
+
+
+/**
+ * @class Roo.form.Row
+ * @extends Roo.form.Layout
+ * Creates a row container for layout and rendering of fields in an {@link Roo.form.Form}.
+ * @constructor
+ * @param {Object} config Configuration options
+ */
+
+ 
+Roo.form.Row = function(config){
+    Roo.form.Row.superclass.constructor.call(this, config);
+};
+ 
+Roo.extend(Roo.form.Row, Roo.form.Layout, {
+      /**
+     * @cfg {Number/String} width
+     * The fixed width of the column in pixels or CSS value (defaults to "auto")
+     */
+    /**
+     * @cfg {Number/String} height
+     * The fixed height of the column in pixels or CSS value (defaults to "auto")
+     */
+    defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-row'},
+    
+    padWidth : 20,
+    // private
+    onRender : function(ct, position){
+        //console.log('row render');
+        if(!this.rowTpl){
+            var t = new Roo.Template(
+                '<div class="x-form-item {5}" style="float:left;width:{6}px">',
+                    '<label for="{0}" style="{2}">{1}{4}</label>',
+                    '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
+                    '</div>',
+                '</div>'
+            );
+            t.disableFormats = true;
+            t.compile();
+            Roo.form.Layout.prototype.rowTpl = t;
+        }
+        this.fieldTpl = this.rowTpl;
+        
+        //console.log('lw' + this.labelWidth +', la:' + this.labelAlign);
+        var labelWidth = 100;
+        
+        if ((this.labelAlign != 'top')) {
+            if (typeof this.labelWidth == 'number') {
+                labelWidth = this.labelWidth
+            }
+            this.padWidth =  20 + labelWidth;
+            
+        }
+        
+        Roo.form.Column.superclass.onRender.call(this, ct, position);
+        if(this.width){
+            this.el.setWidth(this.width);
+        }
+        if(this.height){
+            this.el.setHeight(this.height);
+        }
+    },
+    
+    // private
+    renderField : function(f){
+        f.fieldEl = this.fieldTpl.append(this.el, [
+               f.id, f.fieldLabel,
+               f.labelStyle||this.labelStyle||'',
+               this.elementStyle||'',
+               typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator,
+               f.itemCls||this.itemCls||'',
+               f.width ? f.width + this.padWidth : 160 + this.padWidth
+       ],true);
+    }
+});
+ 
+
+/**
+ * @class Roo.form.FieldSet
+ * @extends Roo.form.Layout
+ * Creates a fieldset container for layout and rendering of fields in an {@link Roo.form.Form}.
+ * @constructor
+ * @param {Object} config Configuration options
+ */
+Roo.form.FieldSet = function(config){
+    Roo.form.FieldSet.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.form.FieldSet, Roo.form.Layout, {
+    /**
+     * @cfg {String} legend
+     * The text to display as the legend for the FieldSet (defaults to '')
+     */
+    /**
+     * @cfg {String/Object} autoCreate
+     * A DomHelper element spec used to autocreate the fieldset (defaults to {tag: 'fieldset', cn: {tag:'legend'}})
+     */
+
+    // private
+    defaultAutoCreate : {tag: 'fieldset', cn: {tag:'legend'}},
+
+    // private
+    onRender : function(ct, position){
+        Roo.form.FieldSet.superclass.onRender.call(this, ct, position);
+        if(this.legend){
+            this.setLegend(this.legend);
+        }
+    },
+
+    // private
+    setLegend : function(text){
+        if(this.rendered){
+            this.el.child('legend').update(text);
+        }
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.form.VTypes
+ * Overridable validation definitions. The validations provided are basic and intended to be easily customizable and extended.
+ * @singleton
+ */
+Roo.form.VTypes = function(){
+    // closure these in so they are only created once.
+    var alpha = /^[a-zA-Z_]+$/;
+    var alphanum = /^[a-zA-Z0-9_]+$/;
+    var email = /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/;
+    var url = /(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
+
+    // All these messages and functions are configurable
+    return {
+        /**
+         * The function used to validate email addresses
+         * @param {String} value The email address
+         */
+        'email' : function(v){
+            return email.test(v);
+        },
+        /**
+         * The error text to display when the email validation function returns false
+         * @type String
+         */
+        'emailText' : 'This field should be an e-mail address in the format "user@domain.com"',
+        /**
+         * The keystroke filter mask to be applied on email input
+         * @type RegExp
+         */
+        'emailMask' : /[a-z0-9_\.\-@]/i,
+
+        /**
+         * The function used to validate URLs
+         * @param {String} value The URL
+         */
+        'url' : function(v){
+            return url.test(v);
+        },
+        /**
+         * The error text to display when the url validation function returns false
+         * @type String
+         */
+        'urlText' : 'This field should be a URL in the format "http:/'+'/www.domain.com"',
+        
+        /**
+         * The function used to validate alpha values
+         * @param {String} value The value
+         */
+        'alpha' : function(v){
+            return alpha.test(v);
+        },
+        /**
+         * The error text to display when the alpha validation function returns false
+         * @type String
+         */
+        'alphaText' : 'This field should only contain letters and _',
+        /**
+         * The keystroke filter mask to be applied on alpha input
+         * @type RegExp
+         */
+        'alphaMask' : /[a-z_]/i,
+
+        /**
+         * The function used to validate alphanumeric values
+         * @param {String} value The value
+         */
+        'alphanum' : function(v){
+            return alphanum.test(v);
+        },
+        /**
+         * The error text to display when the alphanumeric validation function returns false
+         * @type String
+         */
+        'alphanumText' : 'This field should only contain letters, numbers and _',
+        /**
+         * The keystroke filter mask to be applied on alphanumeric input
+         * @type RegExp
+         */
+        'alphanumMask' : /[a-z0-9_]/i
+    };
+}();//<script type="text/javascript">
+
+/**
+ * @class Roo.form.FCKeditor
+ * @extends Roo.form.TextArea
+ * Wrapper around the FCKEditor http://www.fckeditor.net
+ * @constructor
+ * Creates a new FCKeditor
+ * @param {Object} config Configuration options
+ */
+Roo.form.FCKeditor = function(config){
+    Roo.form.FCKeditor.superclass.constructor.call(this, config);
+    this.addEvents({
+         /**
+         * @event editorinit
+         * Fired when the editor is initialized - you can add extra handlers here..
+         * @param {FCKeditor} this
+         * @param {Object} the FCK object.
+         */
+        editorinit : true
+    });
+    
+    
+};
+Roo.form.FCKeditor.editors = { };
+Roo.extend(Roo.form.FCKeditor, Roo.form.TextArea,
+{
+    //defaultAutoCreate : {
+    //    tag : "textarea",style   : "width:100px;height:60px;" ,autocomplete    : "off"
+    //},
+    // private
+    /**
+     * @cfg {Object} fck options - see fck manual for details.
+     */
+    fckconfig : false,
+    
+    /**
+     * @cfg {Object} fck toolbar set (Basic or Default)
+     */
+    toolbarSet : 'Basic',
+    /**
+     * @cfg {Object} fck BasePath
+     */ 
+    basePath : '/fckeditor/',
+    
+    
+    frame : false,
+    
+    value : '',
+    
+   
+    onRender : function(ct, position)
+    {
+        if(!this.el){
+            this.defaultAutoCreate = {
+                tag: "textarea",
+                style:"width:300px;height:60px;",
+                autocomplete: "off"
+            };
+        }
+        Roo.form.FCKeditor.superclass.onRender.call(this, ct, position);
+        /*
+        if(this.grow){
+            this.textSizeEl = Roo.DomHelper.append(document.body, {tag: "pre", cls: "x-form-grow-sizer"});
+            if(this.preventScrollbars){
+                this.el.setStyle("overflow", "hidden");
+            }
+            this.el.setHeight(this.growMin);
+        }
+        */
+        //console.log('onrender' + this.getId() );
+        Roo.form.FCKeditor.editors[this.getId()] = this;
+         
+
+        this.replaceTextarea() ;
+        
+    },
+    
+    getEditor : function() {
+        return this.fckEditor;
+    },
+    /**
+     * Sets a data value into the field and validates it.  To set the value directly without validation see {@link #setRawValue}.
+     * @param {Mixed} value The value to set
+     */
+    
+    
+    setValue : function(value)
+    {
+        //console.log('setValue: ' + value);
+        
+        if(typeof(value) == 'undefined') { // not sure why this is happending...
+            return;
+        }
+        Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
+        
+        //if(!this.el || !this.getEditor()) {
+        //    this.value = value;
+            //this.setValue.defer(100,this,[value]);    
+        //    return;
+        //} 
+        
+        if(!this.getEditor()) {
+            return;
+        }
+        
+        this.getEditor().SetData(value);
+        
+        //
+
+    },
+
+    /**
+     * Returns the normalized data value (undefined or emptyText will be returned as '').  To return the raw value see {@link #getRawValue}.
+     * @return {Mixed} value The field value
+     */
+    getValue : function()
+    {
+        
+        if (this.frame && this.frame.dom.style.display == 'none') {
+            return Roo.form.FCKeditor.superclass.getValue.call(this);
+        }
+        
+        if(!this.el || !this.getEditor()) {
+           
+           // this.getValue.defer(100,this); 
+            return this.value;
+        }
+       
+        
+        var value=this.getEditor().GetData();
+        Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
+        return Roo.form.FCKeditor.superclass.getValue.call(this);
+        
+
+    },
+
+    /**
+     * Returns the raw data value which may or may not be a valid, defined value.  To return a normalized value see {@link #getValue}.
+     * @return {Mixed} value The field value
+     */
+    getRawValue : function()
+    {
+        if (this.frame && this.frame.dom.style.display == 'none') {
+            return Roo.form.FCKeditor.superclass.getRawValue.call(this);
+        }
+        
+        if(!this.el || !this.getEditor()) {
+            //this.getRawValue.defer(100,this); 
+            return this.value;
+            return;
+        }
+        
+        
+        
+        var value=this.getEditor().GetData();
+        Roo.form.FCKeditor.superclass.setRawValue.apply(this,[value]);
+        return Roo.form.FCKeditor.superclass.getRawValue.call(this);
+         
+    },
+    
+    setSize : function(w,h) {
+        
+        
+        
+        //if (this.frame && this.frame.dom.style.display == 'none') {
+        //    Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
+        //    return;
+        //}
+        //if(!this.el || !this.getEditor()) {
+        //    this.setSize.defer(100,this, [w,h]); 
+        //    return;
+        //}
+        
+        
+        
+        Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
+        
+        this.frame.dom.setAttribute('width', w);
+        this.frame.dom.setAttribute('height', h);
+        this.frame.setSize(w,h);
+        
+    },
+    
+    toggleSourceEdit : function(value) {
+        
+      
+         
+        this.el.dom.style.display = value ? '' : 'none';
+        this.frame.dom.style.display = value ?  'none' : '';
+        
+    },
+    
+    
+    focus: function(tag)
+    {
+        if (this.frame.dom.style.display == 'none') {
+            return Roo.form.FCKeditor.superclass.focus.call(this);
+        }
+        if(!this.el || !this.getEditor()) {
+            this.focus.defer(100,this, [tag]); 
+            return;
+        }
+        
+        
+        
+        
+        var tgs = this.getEditor().EditorDocument.getElementsByTagName(tag);
+        this.getEditor().Focus();
+        if (tgs.length) {
+            if (!this.getEditor().Selection.GetSelection()) {
+                this.focus.defer(100,this, [tag]); 
+                return;
+            }
+            
+            
+            var r = this.getEditor().EditorDocument.createRange();
+            r.setStart(tgs[0],0);
+            r.setEnd(tgs[0],0);
+            this.getEditor().Selection.GetSelection().removeAllRanges();
+            this.getEditor().Selection.GetSelection().addRange(r);
+            this.getEditor().Focus();
+        }
+        
+    },
+    
+    
+    
+    replaceTextarea : function()
+    {
+        if ( document.getElementById( this.getId() + '___Frame' ) )
+            return ;
+        //if ( !this.checkBrowser || this._isCompatibleBrowser() )
+        //{
+            // We must check the elements firstly using the Id and then the name.
+        var oTextarea = document.getElementById( this.getId() );
+        
+        var colElementsByName = document.getElementsByName( this.getId() ) ;
+         
+        oTextarea.style.display = 'none' ;
+
+        if ( oTextarea.tabIndex ) {            
+            this.TabIndex = oTextarea.tabIndex ;
+        }
+        
+        this._insertHtmlBefore( this._getConfigHtml(), oTextarea ) ;
+        this._insertHtmlBefore( this._getIFrameHtml(), oTextarea ) ;
+        this.frame = Roo.get(this.getId() + '___Frame')
+    },
+    
+    _getConfigHtml : function()
+    {
+        var sConfig = '' ;
+
+        for ( var o in this.fckconfig ) {
+            sConfig += sConfig.length > 0  ? '&amp;' : '';
+            sConfig += encodeURIComponent( o ) + '=' + encodeURIComponent( this.fckconfig[o] ) ;
+        }
+
+        return '<input type="hidden" id="' + this.getId() + '___Config" value="' + sConfig + '" style="display:none" />' ;
+    },
+    
+    
+    _getIFrameHtml : function()
+    {
+        var sFile = 'fckeditor.html' ;
+        /* no idea what this is about..
+        try
+        {
+            if ( (/fcksource=true/i).test( window.top.location.search ) )
+                sFile = 'fckeditor.original.html' ;
+        }
+        catch (e) { 
+        */
+
+        var sLink = this.basePath + 'editor/' + sFile + '?InstanceName=' + encodeURIComponent( this.getId() ) ;
+        sLink += this.toolbarSet ? ( '&amp;Toolbar=' + this.toolbarSet)  : '';
+        
+        
+        var html = '<iframe id="' + this.getId() +
+            '___Frame" src="' + sLink +
+            '" width="' + this.width +
+            '" height="' + this.height + '"' +
+            (this.tabIndex ?  ' tabindex="' + this.tabIndex + '"' :'' ) +
+            ' frameborder="0" scrolling="no"></iframe>' ;
+
+        return html ;
+    },
+    
+    _insertHtmlBefore : function( html, element )
+    {
+        if ( element.insertAdjacentHTML )	{
+            // IE
+            element.insertAdjacentHTML( 'beforeBegin', html ) ;
+        } else { // Gecko
+            var oRange = document.createRange() ;
+            oRange.setStartBefore( element ) ;
+            var oFragment = oRange.createContextualFragment( html );
+            element.parentNode.insertBefore( oFragment, element ) ;
+        }
+    }
+    
+    
+  
+    
+    
+    
+    
+
+});
+
+//Roo.reg('fckeditor', Roo.form.FCKeditor);
+
+function FCKeditor_OnComplete(editorInstance){
+    var f = Roo.form.FCKeditor.editors[editorInstance.Name];
+    f.fckEditor = editorInstance;
+    //console.log("loaded");
+    f.fireEvent('editorinit', f, editorInstance);
+} 
+  
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//<script type="text/javascript">
+/**
+ * @class Roo.form.GridField
+ * @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
+ */
+Roo.form.GridField = function(config){
+    Roo.form.GridField.superclass.constructor.call(this, config);
+     
+};
+
+Roo.extend(Roo.form.GridField, Roo.form.Field,  {
+    /**
+     * @cfg {Number} width  - used to restrict width of grid..
+     */
+    width : 100,
+    /**
+     * @cfg {Number} height - used to restrict height of grid..
+     */
+    height : 50,
+     /**
+     * @cfg {Object} xgrid (xtype'd description of grid) { xtype : 'Grid', dataSource: .... }
+         * 
+         *}
+     */
+    xgrid : false, 
+    /**
+     * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+     * {tag: "input", type: "checkbox", autocomplete: "off"})
+     */
+   // defaultAutoCreate : { tag: 'div' },
+    defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'off'},
+    /**
+     * @cfg {String} addTitle Text to include for adding a title.
+     */
+    addTitle : false,
+    //
+    onResize : function(){
+        Roo.form.Field.superclass.onResize.apply(this, arguments);
+    },
+
+    initEvents : function(){
+        // Roo.form.Checkbox.superclass.initEvents.call(this);
+        // has no events...
+       
+    },
+
+
+    getResizeEl : function(){
+        return this.wrap;
+    },
+
+    getPositionEl : function(){
+        return this.wrap;
+    },
+
+    // private
+    onRender : function(ct, position){
+        
+        this.style = this.style || 'overflow: hidden; border:1px solid #c3daf9;';
+        var style = this.style;
+        delete this.style;
+        
+        Roo.form.GridField.superclass.onRender.call(this, ct, position);
+        this.wrap = this.el.wrap({cls: ''}); // not sure why ive done thsi...
+        this.viewEl = this.wrap.createChild({ tag: 'div' });
+        if (style) {
+            this.viewEl.applyStyles(style);
+        }
+        if (this.width) {
+            this.viewEl.setWidth(this.width);
+        }
+        if (this.height) {
+            this.viewEl.setHeight(this.height);
+        }
+        //if(this.inputValue !== undefined){
+        //this.setValue(this.value);
+        
+        
+        this.grid = new Roo.grid[this.xgrid.xtype](this.viewEl, this.xgrid);
+        
+        
+        this.grid.render();
+        this.grid.getDataSource().on('remove', this.refreshValue, this);
+        this.grid.getDataSource().on('update', this.refreshValue, this);
+        this.grid.on('afteredit', this.refreshValue, this);
+ 
+    },
+     
+    
+    /**
+     * Sets the value of the item. 
+     * @param {String} either an object  or a string..
+     */
+    setValue : function(v){
+        //this.value = v;
+        v = v || []; // empty set..
+        // this does not seem smart - it really only affects memoryproxy grids..
+        if (this.grid && this.grid.getDataSource() && typeof(v) != 'undefined') {
+            var ds = this.grid.getDataSource();
+            // assumes a json reader..
+            var data = {}
+            data[ds.reader.meta.root ] =  typeof(v) == 'string' ? Roo.decode(v) : v;
+            ds.loadData( data);
+        }
+        Roo.form.GridField.superclass.setValue.call(this, v);
+        this.refreshValue();
+        // should load data in the grid really....
+    },
+    
+    // private
+    refreshValue: function() {
+         var val = [];
+        this.grid.getDataSource().each(function(r) {
+            val.push(r.data);
+        });
+        this.el.dom.value = Roo.encode(val);
+    }
+    
+     
+    
+    
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.form.DisplayField
+ * @extends Roo.form.Field
+ * A generic Field to display non-editable data.
+ * @constructor
+ * Creates a new Display Field item.
+ * @param {Object} config Configuration options
+ */
+Roo.form.DisplayField = function(config){
+    Roo.form.DisplayField.superclass.constructor.call(this, config);
+    
+};
+
+Roo.extend(Roo.form.DisplayField, Roo.form.TextField,  {
+    inputType:      'hidden',
+    allowBlank:     true,
+    readOnly:         true,
+    
+ 
+    /**
+     * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
+     */
+    focusClass : undefined,
+    /**
+     * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
+     */
+    fieldClass: 'x-form-field',
+    
+     /**
+     * @cfg {Function} valueRenderer The renderer for the field (so you can reformat output). should return raw HTML
+     */
+    valueRenderer: undefined,
+    
+    width: 100,
+    /**
+     * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+     * {tag: "input", type: "checkbox", autocomplete: "off"})
+     */
+     
+ //   defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'off'},
+
+    onResize : function(){
+        Roo.form.DisplayField.superclass.onResize.apply(this, arguments);
+        
+    },
+
+    initEvents : function(){
+        // Roo.form.Checkbox.superclass.initEvents.call(this);
+        // has no events...
+       
+    },
+
+
+    getResizeEl : function(){
+        return this.wrap;
+    },
+
+    getPositionEl : function(){
+        return this.wrap;
+    },
+
+    // private
+    onRender : function(ct, position){
+        
+        Roo.form.DisplayField.superclass.onRender.call(this, ct, position);
+        //if(this.inputValue !== undefined){
+        this.wrap = this.el.wrap();
+        
+        this.viewEl = this.wrap.createChild({ tag: 'div'});
+        
+        if (this.bodyStyle) {
+            this.viewEl.applyStyles(this.bodyStyle);
+        }
+        //this.viewEl.setStyle('padding', '2px');
+        
+        this.setValue(this.value);
+        
+    },
+/*
+    // private
+    initValue : Roo.emptyFn,
+
+  */
+
+	// private
+    onClick : function(){
+        
+    },
+
+    /**
+     * Sets the checked state of the checkbox.
+     * @param {Boolean/String} checked True, 'true', '1', or 'on' to check the checkbox, any other value will uncheck it.
+     */
+    setValue : function(v){
+        this.value = v;
+        var html = this.valueRenderer ?  this.valueRenderer(v) : String.format('{0}', v);
+        // this might be called before we have a dom element..
+        if (!this.viewEl) {
+            return;
+        }
+        this.viewEl.dom.innerHTML = html;
+        Roo.form.DisplayField.superclass.setValue.call(this, v);
+
+    }
+});//<script type="text/javasscript">
+ 
+
+/**
+ * @class Roo.DDView
+ * A DnD enabled version of Roo.View.
+ * @param {Element/String} container The Element in which to create the View.
+ * @param {String} tpl The template string used to create the markup for each element of the View
+ * @param {Object} config The configuration properties. These include all the config options of
+ * {@link Roo.View} plus some specific to this class.<br>
+ * <p>
+ * Drag/drop is implemented by adding {@link Roo.data.Record}s to the target DDView. If copying is
+ * not being performed, the original {@link Roo.data.Record} is removed from the source DDView.<br>
+ * <p>
+ * The following extra CSS rules are needed to provide insertion point highlighting:<pre><code>
+.x-view-drag-insert-above {
+	border-top:1px dotted #3366cc;
+}
+.x-view-drag-insert-below {
+	border-bottom:1px dotted #3366cc;
+}
+</code></pre>
+ * 
+ */
+ 
+Roo.DDView = function(container, tpl, config) {
+    Roo.DDView.superclass.constructor.apply(this, arguments);
+    this.getEl().setStyle("outline", "0px none");
+    this.getEl().unselectable();
+    if (this.dragGroup) {
+		this.setDraggable(this.dragGroup.split(","));
+    }
+    if (this.dropGroup) {
+		this.setDroppable(this.dropGroup.split(","));
+    }
+    if (this.deletable) {
+    	this.setDeletable();
+    }
+    this.isDirtyFlag = false;
+	this.addEvents({
+		"drop" : true
+	});
+};
+
+Roo.extend(Roo.DDView, Roo.View, {
+/**	@cfg {String/Array} dragGroup The ddgroup name(s) for the View's DragZone. */
+/**	@cfg {String/Array} dropGroup The ddgroup name(s) for the View's DropZone. */
+/**	@cfg {Boolean} copy Causes drag operations to copy nodes rather than move. */
+/**	@cfg {Boolean} allowCopy Causes ctrl/drag operations to copy nodes rather than move. */
+
+	isFormField: true,
+
+	reset: Roo.emptyFn,
+	
+	clearInvalid: Roo.form.Field.prototype.clearInvalid,
+
+	validate: function() {
+		return true;
+	},
+	
+	destroy: function() {
+		this.purgeListeners();
+		this.getEl.removeAllListeners();
+		this.getEl().remove();
+		if (this.dragZone) {
+			if (this.dragZone.destroy) {
+				this.dragZone.destroy();
+			}
+		}
+		if (this.dropZone) {
+			if (this.dropZone.destroy) {
+				this.dropZone.destroy();
+			}
+		}
+	},
+
+/**	Allows this class to be an Roo.form.Field so it can be found using {@link Roo.form.BasicForm#findField}. */
+	getName: function() {
+		return this.name;
+	},
+
+/**	Loads the View from a JSON string representing the Records to put into the Store. */
+	setValue: function(v) {
+		if (!this.store) {
+			throw "DDView.setValue(). DDView must be constructed with a valid Store";
+		}
+		var data = {};
+		data[this.store.reader.meta.root] = v ? [].concat(v) : [];
+		this.store.proxy = new Roo.data.MemoryProxy(data);
+		this.store.load();
+	},
+
+/**	@return {String} a parenthesised list of the ids of the Records in the View. */
+	getValue: function() {
+		var result = '(';
+		this.store.each(function(rec) {
+			result += rec.id + ',';
+		});
+		return result.substr(0, result.length - 1) + ')';
+	},
+	
+	getIds: function() {
+		var i = 0, result = new Array(this.store.getCount());
+		this.store.each(function(rec) {
+			result[i++] = rec.id;
+		});
+		return result;
+	},
+	
+	isDirty: function() {
+		return this.isDirtyFlag;
+	},
+
+/**
+ *	Part of the Roo.dd.DropZone interface. If no target node is found, the
+ *	whole Element becomes the target, and this causes the drop gesture to append.
+ */
+    getTargetFromEvent : function(e) {
+		var target = e.getTarget();
+		while ((target !== null) && (target.parentNode != this.el.dom)) {
+    		target = target.parentNode;
+		}
+		if (!target) {
+			target = this.el.dom.lastChild || this.el.dom;
+		}
+		return target;
+    },
+
+/**
+ *	Create the drag data which consists of an object which has the property "ddel" as
+ *	the drag proxy element. 
+ */
+    getDragData : function(e) {
+        var target = this.findItemFromChild(e.getTarget());
+		if(target) {
+			this.handleSelection(e);
+			var selNodes = this.getSelectedNodes();
+            var dragData = {
+                source: this,
+                copy: this.copy || (this.allowCopy && e.ctrlKey),
+                nodes: selNodes,
+                records: []
+			};
+			var selectedIndices = this.getSelectedIndexes();
+			for (var i = 0; i < selectedIndices.length; i++) {
+				dragData.records.push(this.store.getAt(selectedIndices[i]));
+			}
+			if (selNodes.length == 1) {
+				dragData.ddel = target.cloneNode(true);	// the div element
+			} else {
+				var div = document.createElement('div'); // create the multi element drag "ghost"
+				div.className = 'multi-proxy';
+				for (var i = 0, len = selNodes.length; i < len; i++) {
+					div.appendChild(selNodes[i].cloneNode(true));
+				}
+				dragData.ddel = div;
+			}
+            //console.log(dragData)
+            //console.log(dragData.ddel.innerHTML)
+			return dragData;
+		}
+        //console.log('nodragData')
+		return false;
+    },
+    
+/**	Specify to which ddGroup items in this DDView may be dragged. */
+    setDraggable: function(ddGroup) {
+    	if (ddGroup instanceof Array) {
+    		Roo.each(ddGroup, this.setDraggable, this);
+    		return;
+    	}
+    	if (this.dragZone) {
+    		this.dragZone.addToGroup(ddGroup);
+    	} else {
+			this.dragZone = new Roo.dd.DragZone(this.getEl(), {
+				containerScroll: true,
+				ddGroup: ddGroup 
+
+			});
+//			Draggability implies selection. DragZone's mousedown selects the element.
+			if (!this.multiSelect) { this.singleSelect = true; }
+
+//			Wire the DragZone's handlers up to methods in *this*
+			this.dragZone.getDragData = this.getDragData.createDelegate(this);
+		}
+    },
+
+/**	Specify from which ddGroup this DDView accepts drops. */
+    setDroppable: function(ddGroup) {
+    	if (ddGroup instanceof Array) {
+    		Roo.each(ddGroup, this.setDroppable, this);
+    		return;
+    	}
+    	if (this.dropZone) {
+    		this.dropZone.addToGroup(ddGroup);
+    	} else {
+			this.dropZone = new Roo.dd.DropZone(this.getEl(), {
+				containerScroll: true,
+				ddGroup: ddGroup
+			});
+
+//			Wire the DropZone's handlers up to methods in *this*
+			this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this);
+			this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this);
+			this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this);
+			this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this);
+			this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this);
+		}
+    },
+
+/**	Decide whether to drop above or below a View node. */
+    getDropPoint : function(e, n, dd){
+    	if (n == this.el.dom) { return "above"; }
+		var t = Roo.lib.Dom.getY(n), b = t + n.offsetHeight;
+		var c = t + (b - t) / 2;
+		var y = Roo.lib.Event.getPageY(e);
+		if(y <= c) {
+			return "above";
+		}else{
+			return "below";
+		}
+    },
+
+    onNodeEnter : function(n, dd, e, data){
+		return false;
+    },
+    
+    onNodeOver : function(n, dd, e, data){
+		var pt = this.getDropPoint(e, n, dd);
+		// set the insert point style on the target node
+		var dragElClass = this.dropNotAllowed;
+		if (pt) {
+			var targetElClass;
+			if (pt == "above"){
+				dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";
+				targetElClass = "x-view-drag-insert-above";
+			} else {
+				dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";
+				targetElClass = "x-view-drag-insert-below";
+			}
+			if (this.lastInsertClass != targetElClass){
+				Roo.fly(n).replaceClass(this.lastInsertClass, targetElClass);
+				this.lastInsertClass = targetElClass;
+			}
+		}
+		return dragElClass;
+	},
+
+    onNodeOut : function(n, dd, e, data){
+		this.removeDropIndicators(n);
+    },
+
+    onNodeDrop : function(n, dd, e, data){
+    	if (this.fireEvent("drop", this, n, dd, e, data) === false) {
+    		return false;
+    	}
+    	var pt = this.getDropPoint(e, n, dd);
+		var insertAt = (n == this.el.dom) ? this.nodes.length : n.nodeIndex;
+		if (pt == "below") { insertAt++; }
+		for (var i = 0; i < data.records.length; i++) {
+			var r = data.records[i];
+			var dup = this.store.getById(r.id);
+			if (dup && (dd != this.dragZone)) {
+				Roo.fly(this.getNode(this.store.indexOf(dup))).frame("red", 1);
+			} else {
+				if (data.copy) {
+					this.store.insert(insertAt++, r.copy());
+				} else {
+					data.source.isDirtyFlag = true;
+					r.store.remove(r);
+					this.store.insert(insertAt++, r);
+				}
+				this.isDirtyFlag = true;
+			}
+		}
+		this.dragZone.cachedTarget = null;
+		return true;
+    },
+
+    removeDropIndicators : function(n){
+		if(n){
+			Roo.fly(n).removeClass([
+				"x-view-drag-insert-above",
+				"x-view-drag-insert-below"]);
+			this.lastInsertClass = "_noclass";
+		}
+    },
+
+/**
+ *	Utility method. Add a delete option to the DDView's context menu.
+ *	@param {String} imageUrl The URL of the "delete" icon image.
+ */
+	setDeletable: function(imageUrl) {
+		if (!this.singleSelect && !this.multiSelect) {
+			this.singleSelect = true;
+		}
+		var c = this.getContextMenu();
+		this.contextMenu.on("itemclick", function(item) {
+			switch (item.id) {
+				case "delete":
+					this.remove(this.getSelectedIndexes());
+					break;
+			}
+		}, this);
+		this.contextMenu.add({
+			icon: imageUrl,
+			id: "delete",
+			text: 'Delete'
+		});
+	},
+	
+/**	Return the context menu for this DDView. */
+	getContextMenu: function() {
+		if (!this.contextMenu) {
+//			Create the View's context menu
+			this.contextMenu = new Roo.menu.Menu({
+				id: this.id + "-contextmenu"
+			});
+			this.el.on("contextmenu", this.showContextMenu, this);
+		}
+		return this.contextMenu;
+	},
+	
+	disableContextMenu: function() {
+		if (this.contextMenu) {
+			this.el.un("contextmenu", this.showContextMenu, this);
+		}
+	},
+
+	showContextMenu: function(e, item) {
+        item = this.findItemFromChild(e.getTarget());
+		if (item) {
+			e.stopEvent();
+			this.select(this.getNode(item), this.multiSelect && e.ctrlKey, true);
+			this.contextMenu.showAt(e.getXY());
+	    }
+    },
+
+/**
+ *	Remove {@link Roo.data.Record}s at the specified indices.
+ *	@param {Array/Number} selectedIndices The index (or Array of indices) of Records to remove.
+ */
+    remove: function(selectedIndices) {
+		selectedIndices = [].concat(selectedIndices);
+		for (var i = 0; i < selectedIndices.length; i++) {
+			var rec = this.store.getAt(selectedIndices[i]);
+			this.store.remove(rec);
+		}
+    },
+
+/**
+ *	Double click fires the event, but also, if this is draggable, and there is only one other
+ *	related DropZone, it transfers the selected node.
+ */
+    onDblClick : function(e){
+        var item = this.findItemFromChild(e.getTarget());
+        if(item){
+            if (this.fireEvent("dblclick", this, this.indexOf(item), item, e) === false) {
+            	return false;
+            }
+            if (this.dragGroup) {
+	            var targets = Roo.dd.DragDropMgr.getRelated(this.dragZone, true);
+	            while (targets.indexOf(this.dropZone) > -1) {
+		            targets.remove(this.dropZone);
+				}
+	            if (targets.length == 1) {
+					this.dragZone.cachedTarget = null;
+	            	var el = Roo.get(targets[0].getEl());
+	            	var box = el.getBox(true);
+	            	targets[0].onNodeDrop(el.dom, {
+	            		target: el.dom,
+	            		xy: [box.x, box.y + box.height - 1]
+	            	}, null, this.getDragData(e));
+	            }
+	        }
+        }
+    },
+    
+    handleSelection: function(e) {
+		this.dragZone.cachedTarget = null;
+        var item = this.findItemFromChild(e.getTarget());
+        if (!item) {
+        	this.clearSelections(true);
+        	return;
+        }
+		if (item && (this.multiSelect || this.singleSelect)){
+			if(this.multiSelect && e.shiftKey && (!e.ctrlKey) && this.lastSelection){
+				this.select(this.getNodes(this.indexOf(this.lastSelection), item.nodeIndex), false);
+			}else if (this.isSelected(this.getNode(item)) && e.ctrlKey){
+				this.unselect(item);
+			} else {
+				this.select(item, this.multiSelect && e.ctrlKey);
+				this.lastSelection = item;
+			}
+		}
+    },
+
+    onItemClick : function(item, index, e){
+		if(this.fireEvent("beforeclick", this, index, item, e) === false){
+			return false;
+		}
+		return true;
+    },
+
+    unselect : function(nodeInfo, suppressEvent){
+		var node = this.getNode(nodeInfo);
+		if(node && this.isSelected(node)){
+			if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
+				Roo.fly(node).removeClass(this.selectedClass);
+				this.selections.remove(node);
+				if(!suppressEvent){
+					this.fireEvent("selectionchange", this, this.selections);
+				}
+			}
+		}
+    }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+/**
+ * @class Roo.LayoutManager
+ * @extends Roo.util.Observable
+ * Base class for layout managers.
+ */
+Roo.LayoutManager = function(container, config){
+    Roo.LayoutManager.superclass.constructor.call(this);
+    this.el = Roo.get(container);
+    // ie scrollbar fix
+    if(this.el.dom == document.body && Roo.isIE && !config.allowScroll){
+        document.body.scroll = "no";
+    }else if(this.el.dom != document.body && this.el.getStyle('position') == 'static'){
+        this.el.position('relative');
+    }
+    this.id = this.el.id;
+    this.el.addClass("x-layout-container");
+    /** false to disable window resize monitoring @type Boolean */
+    this.monitorWindowResize = true;
+    this.regions = {};
+    this.addEvents({
+        /**
+         * @event layout
+         * Fires when a layout is performed. 
+         * @param {Roo.LayoutManager} this
+         */
+        "layout" : true,
+        /**
+         * @event regionresized
+         * Fires when the user resizes a region. 
+         * @param {Roo.LayoutRegion} region The resized region
+         * @param {Number} newSize The new size (width for east/west, height for north/south)
+         */
+        "regionresized" : true,
+        /**
+         * @event regioncollapsed
+         * Fires when a region is collapsed. 
+         * @param {Roo.LayoutRegion} region The collapsed region
+         */
+        "regioncollapsed" : true,
+        /**
+         * @event regionexpanded
+         * Fires when a region is expanded.  
+         * @param {Roo.LayoutRegion} region The expanded region
+         */
+        "regionexpanded" : true
+    });
+    this.updating = false;
+    Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
+};
+
+Roo.extend(Roo.LayoutManager, Roo.util.Observable, {
+    /**
+     * Returns true if this layout is currently being updated
+     * @return {Boolean}
+     */
+    isUpdating : function(){
+        return this.updating; 
+    },
+    
+    /**
+     * Suspend the LayoutManager from doing auto-layouts while
+     * making multiple add or remove calls
+     */
+    beginUpdate : function(){
+        this.updating = true;    
+    },
+    
+    /**
+     * Restore auto-layouts and optionally disable the manager from performing a layout
+     * @param {Boolean} noLayout true to disable a layout update 
+     */
+    endUpdate : function(noLayout){
+        this.updating = false;
+        if(!noLayout){
+            this.layout();
+        }    
+    },
+    
+    layout: function(){
+        
+    },
+    
+    onRegionResized : function(region, newSize){
+        this.fireEvent("regionresized", region, newSize);
+        this.layout();
+    },
+    
+    onRegionCollapsed : function(region){
+        this.fireEvent("regioncollapsed", region);
+    },
+    
+    onRegionExpanded : function(region){
+        this.fireEvent("regionexpanded", region);
+    },
+        
+    /**
+     * Returns the size of the current view. This method normalizes document.body and element embedded layouts and
+     * performs box-model adjustments.
+     * @return {Object} The size as an object {width: (the width), height: (the height)}
+     */
+    getViewSize : function(){
+        var size;
+        if(this.el.dom != document.body){
+            size = this.el.getSize();
+        }else{
+            size = {width: Roo.lib.Dom.getViewWidth(), height: Roo.lib.Dom.getViewHeight()};
+        }
+        size.width -= this.el.getBorderWidth("lr")-this.el.getPadding("lr");
+        size.height -= this.el.getBorderWidth("tb")-this.el.getPadding("tb");
+        return size;
+    },
+    
+    /**
+     * Returns the Element this layout is bound to.
+     * @return {Roo.Element}
+     */
+    getEl : function(){
+        return this.el;
+    },
+    
+    /**
+     * Returns the specified region.
+     * @param {String} target The region key ('center', 'north', 'south', 'east' or 'west')
+     * @return {Roo.LayoutRegion}
+     */
+    getRegion : function(target){
+        return this.regions[target.toLowerCase()];
+    },
+    
+    onWindowResize : function(){
+        if(this.monitorWindowResize){
+            this.layout();
+        }
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.BorderLayout
+ * @extends Roo.LayoutManager
+ * This class represents a common layout manager used in desktop applications. For screenshots and more details,
+ * please see: <br><br>
+ * <a href="http://www.jackslocum.com/yui/2006/10/19/cross-browser-web-20-layouts-with-yahoo-ui/">Cross Browser Layouts - Part 1</a><br>
+ * <a href="http://www.jackslocum.com/yui/2006/10/28/cross-browser-web-20-layouts-part-2-ajax-feed-viewer-20/">Cross Browser Layouts - Part 2</a><br><br>
+ * Example:
+ <pre><code>
+ var layout = new Roo.BorderLayout(document.body, {
+    north: {
+        initialSize: 25,
+        titlebar: false
+    },
+    west: {
+        split:true,
+        initialSize: 200,
+        minSize: 175,
+        maxSize: 400,
+        titlebar: true,
+        collapsible: true
+    },
+    east: {
+        split:true,
+        initialSize: 202,
+        minSize: 175,
+        maxSize: 400,
+        titlebar: true,
+        collapsible: true
+    },
+    south: {
+        split:true,
+        initialSize: 100,
+        minSize: 100,
+        maxSize: 200,
+        titlebar: true,
+        collapsible: true
+    },
+    center: {
+        titlebar: true,
+        autoScroll:true,
+        resizeTabs: true,
+        minTabWidth: 50,
+        preferredTabWidth: 150
+    }
+});
+
+// shorthand
+var CP = Roo.ContentPanel;
+
+layout.beginUpdate();
+layout.add("north", new CP("north", "North"));
+layout.add("south", new CP("south", {title: "South", closable: true}));
+layout.add("west", new CP("west", {title: "West"}));
+layout.add("east", new CP("autoTabs", {title: "Auto Tabs", closable: true}));
+layout.add("center", new CP("center1", {title: "Close Me", closable: true}));
+layout.add("center", new CP("center2", {title: "Center Panel", closable: false}));
+layout.getRegion("center").showPanel("center1");
+layout.endUpdate();
+</code></pre>
+
+<b>The container the layout is rendered into can be either the body element or any other element.
+If it is not the body element, the container needs to either be an absolute positioned element,
+or you will need to add "position:relative" to the css of the container.  You will also need to specify
+the container size if it is not the body element.</b>
+
+* @constructor
+* Create a new BorderLayout
+* @param {String/HTMLElement/Element} container The container this layout is bound to
+* @param {Object} config Configuration options
+ */
+Roo.BorderLayout = function(container, config){
+    config = config || {};
+    Roo.BorderLayout.superclass.constructor.call(this, container, config);
+    this.factory = config.factory || Roo.BorderLayout.RegionFactory;
+    for(var i = 0, len = this.factory.validRegions.length; i < len; i++) {
+    	var target = this.factory.validRegions[i];
+    	if(config[target]){
+    	    this.addRegion(target, config[target]);
+    	}
+    }
+};
+
+Roo.extend(Roo.BorderLayout, Roo.LayoutManager, {
+    /**
+     * Creates and adds a new region if it doesn't already exist.
+     * @param {String} target The target region key (north, south, east, west or center).
+     * @param {Object} config The regions config object
+     * @return {BorderLayoutRegion} The new region
+     */
+    addRegion : function(target, config){
+        if(!this.regions[target]){
+            var r = this.factory.create(target, this, config);
+    	    this.bindRegion(target, r);
+        }
+        return this.regions[target];
+    },
+
+    // private (kinda)
+    bindRegion : function(name, r){
+        this.regions[name] = r;
+        r.on("visibilitychange", this.layout, this);
+        r.on("paneladded", this.layout, this);
+        r.on("panelremoved", this.layout, this);
+        r.on("invalidated", this.layout, this);
+        r.on("resized", this.onRegionResized, this);
+        r.on("collapsed", this.onRegionCollapsed, this);
+        r.on("expanded", this.onRegionExpanded, this);
+    },
+
+    /**
+     * Performs a layout update.
+     */
+    layout : function(){
+        if(this.updating) return;
+        var size = this.getViewSize();
+        var w = size.width;
+        var h = size.height;
+        var centerW = w;
+        var centerH = h;
+        var centerY = 0;
+        var centerX = 0;
+        //var x = 0, y = 0;
+
+        var rs = this.regions;
+        var north = rs["north"];
+        var south = rs["south"]; 
+        var west = rs["west"];
+        var east = rs["east"];
+        var center = rs["center"];
+        //if(this.hideOnLayout){ // not supported anymore
+            //c.el.setStyle("display", "none");
+        //}
+        if(north && north.isVisible()){
+            var b = north.getBox();
+            var m = north.getMargins();
+            b.width = w - (m.left+m.right);
+            b.x = m.left;
+            b.y = m.top;
+            centerY = b.height + b.y + m.bottom;
+            centerH -= centerY;
+            north.updateBox(this.safeBox(b));
+        }
+        if(south && south.isVisible()){
+            var b = south.getBox();
+            var m = south.getMargins();
+            b.width = w - (m.left+m.right);
+            b.x = m.left;
+            var totalHeight = (b.height + m.top + m.bottom);
+            b.y = h - totalHeight + m.top;
+            centerH -= totalHeight;
+            south.updateBox(this.safeBox(b));
+        }
+        if(west && west.isVisible()){
+            var b = west.getBox();
+            var m = west.getMargins();
+            b.height = centerH - (m.top+m.bottom);
+            b.x = m.left;
+            b.y = centerY + m.top;
+            var totalWidth = (b.width + m.left + m.right);
+            centerX += totalWidth;
+            centerW -= totalWidth;
+            west.updateBox(this.safeBox(b));
+        }
+        if(east && east.isVisible()){
+            var b = east.getBox();
+            var m = east.getMargins();
+            b.height = centerH - (m.top+m.bottom);
+            var totalWidth = (b.width + m.left + m.right);
+            b.x = w - totalWidth + m.left;
+            b.y = centerY + m.top;
+            centerW -= totalWidth;
+            east.updateBox(this.safeBox(b));
+        }
+        if(center){
+            var m = center.getMargins();
+            var centerBox = {
+                x: centerX + m.left,
+                y: centerY + m.top,
+                width: centerW - (m.left+m.right),
+                height: centerH - (m.top+m.bottom)
+            };
+            //if(this.hideOnLayout){
+                //center.el.setStyle("display", "block");
+            //}
+            center.updateBox(this.safeBox(centerBox));
+        }
+        this.el.repaint();
+        this.fireEvent("layout", this);
+    },
+
+    // private
+    safeBox : function(box){
+        box.width = Math.max(0, box.width);
+        box.height = Math.max(0, box.height);
+        return box;
+    },
+
+    /**
+     * Adds a ContentPanel (or subclass) to this layout.
+     * @param {String} target The target region key (north, south, east, west or center).
+     * @param {Roo.ContentPanel} panel The panel to add
+     * @return {Roo.ContentPanel} The added panel
+     */
+    add : function(target, panel){
+         
+        target = target.toLowerCase();
+        return this.regions[target].add(panel);
+    },
+
+    /**
+     * Remove a ContentPanel (or subclass) to this layout.
+     * @param {String} target The target region key (north, south, east, west or center).
+     * @param {Number/String/Roo.ContentPanel} panel The index, id or panel to remove
+     * @return {Roo.ContentPanel} The removed panel
+     */
+    remove : function(target, panel){
+        target = target.toLowerCase();
+        return this.regions[target].remove(panel);
+    },
+
+    /**
+     * Searches all regions for a panel with the specified id
+     * @param {String} panelId
+     * @return {Roo.ContentPanel} The panel or null if it wasn't found
+     */
+    findPanel : function(panelId){
+        var rs = this.regions;
+        for(var target in rs){
+            if(typeof rs[target] != "function"){
+                var p = rs[target].getPanel(panelId);
+                if(p){
+                    return p;
+                }
+            }
+        }
+        return null;
+    },
+
+    /**
+     * Searches all regions for a panel with the specified id and activates (shows) it.
+     * @param {String/ContentPanel} panelId The panels id or the panel itself
+     * @return {Roo.ContentPanel} The shown panel or null
+     */
+    showPanel : function(panelId) {
+      var rs = this.regions;
+      for(var target in rs){
+         var r = rs[target];
+         if(typeof r != "function"){
+            if(r.hasPanel(panelId)){
+               return r.showPanel(panelId);
+            }
+         }
+      }
+      return null;
+   },
+
+   /**
+     * Restores this layout's state using Roo.state.Manager or the state provided by the passed provider.
+     * @param {Roo.state.Provider} provider (optional) An alternate state provider
+     */
+    restoreState : function(provider){
+        if(!provider){
+            provider = Roo.state.Manager;
+        }
+        var sm = new Roo.LayoutStateManager();
+        sm.init(this, provider);
+    },
+
+    /**
+     * Adds a batch of multiple ContentPanels dynamically by passing a special regions config object.  This config
+     * object should contain properties for each region to add ContentPanels to, and each property's value should be
+     * a valid ContentPanel config object.  Example:
+     * <pre><code>
+// Create the main layout
+var layout = new Roo.BorderLayout('main-ct', {
+    west: {
+        split:true,
+        minSize: 175,
+        titlebar: true
+    },
+    center: {
+        title:'Components'
+    }
+}, 'main-ct');
+
+// Create and add multiple ContentPanels at once via configs
+layout.batchAdd({
+   west: {
+       id: 'source-files',
+       autoCreate:true,
+       title:'Ext Source Files',
+       autoScroll:true,
+       fitToFrame:true
+   },
+   center : {
+       el: cview,
+       autoScroll:true,
+       fitToFrame:true,
+       toolbar: tb,
+       resizeEl:'cbody'
+   }
+});
+</code></pre>
+     * @param {Object} regions An object containing ContentPanel configs by region name
+     */
+    batchAdd : function(regions){
+        this.beginUpdate();
+        for(var rname in regions){
+            var lr = this.regions[rname];
+            if(lr){
+                this.addTypedPanels(lr, regions[rname]);
+            }
+        }
+        this.endUpdate();
+    },
+
+    // private
+    addTypedPanels : function(lr, ps){
+        if(typeof ps == 'string'){
+            lr.add(new Roo.ContentPanel(ps));
+        }
+        else if(ps instanceof Array){
+            for(var i =0, len = ps.length; i < len; i++){
+                this.addTypedPanels(lr, ps[i]);
+            }
+        }
+        else if(!ps.events){ // raw config?
+            var el = ps.el;
+            delete ps.el; // prevent conflict
+            lr.add(new Roo.ContentPanel(el || Roo.id(), ps));
+        }
+        else {  // panel object assumed!
+            lr.add(ps);
+        }
+    },
+    /**
+     * Adds a xtype elements to the layout.
+     * <pre><code>
+
+layout.addxtype({
+       xtype : 'ContentPanel',
+       region: 'west',
+       items: [ .... ]
+   }
+);
+
+layout.addxtype({
+        xtype : 'NestedLayoutPanel',
+        region: 'west',
+        layout: {
+           center: { },
+           west: { }   
+        },
+        items : [ ... list of content panels or nested layout panels.. ]
+   }
+);
+</code></pre>
+     * @param {Object} cfg Xtype definition of item to add.
+     */
+    addxtype : function(cfg)
+    {
+        // basically accepts a pannel...
+        // can accept a layout region..!?!?
+       // console.log('BorderLayout add ' + cfg.xtype)
+        
+        if (!cfg.xtype.match(/Panel$/)) {
+            return false;
+        }
+        var ret = false;
+        var region = cfg.region;
+        delete cfg.region;
+        
+          
+        var xitems = [];
+        if (cfg.items) {
+            xitems = cfg.items;
+            delete cfg.items;
+        }
+        
+        
+        switch(cfg.xtype) 
+        {
+            case 'ContentPanel':  // ContentPanel (el, cfg)
+            case 'ScrollPanel':  // ContentPanel (el, cfg)
+                if(cfg.autoCreate) {
+                    ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
+                } else {
+                    var el = this.el.createChild();
+                    ret = new Roo[cfg.xtype](el, cfg); // new panel!!!!!
+                }
+                
+                this.add(region, ret);
+                break;
+            
+            
+            case 'TreePanel': // our new panel!
+                cfg.el = this.el.createChild();
+                ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
+                this.add(region, ret);
+                break;
+            
+            case 'NestedLayoutPanel': 
+                // create a new Layout (which is  a Border Layout...
+                var el = this.el.createChild();
+                var clayout = cfg.layout;
+                delete cfg.layout;
+                clayout.items   = clayout.items  || [];
+                // replace this exitems with the clayout ones..
+                xitems = clayout.items;
+                 
+                
+                if (region == 'center' && this.active && this.getRegion('center').panels.length < 1) {
+                    cfg.background = false;
+                }
+                var layout = new Roo.BorderLayout(el, clayout);
+                
+                ret = new Roo[cfg.xtype](layout, cfg); // new panel!!!!!
+                //console.log('adding nested layout panel '  + cfg.toSource());
+                this.add(region, ret);
+                
+                break;
+                
+            case 'GridPanel': 
+            
+                // needs grid and region
+                
+                //var el = this.getRegion(region).el.createChild();
+                var el = this.el.createChild();
+                // create the grid first...
+                
+                var grid = new Roo.grid[cfg.grid.xtype](el, cfg.grid);
+                delete cfg.grid;
+                if (region == 'center' && this.active ) {
+                    cfg.background = false;
+                }
+                ret = new Roo[cfg.xtype](grid, cfg); // new panel!!!!!
+                
+                this.add(region, ret);
+                if (cfg.background) {
+                    ret.on('activate', function(gp) {
+                        if (!gp.grid.rendered) {
+                            gp.grid.render();
+                        }
+                    });
+                } else {
+                    grid.render();
+                }
+                break;
+           
+               
+                
+                
+            default: 
+                alert("Can not add '" + cfg.xtype + "' to BorderLayout");
+                return;
+             // GridPanel (grid, cfg)
+            
+        }
+        this.beginUpdate();
+        // add children..
+        Roo.each(xitems, function(i)  {
+            ret.addxtype(i);
+        });
+        this.endUpdate();
+        return ret;
+        
+    }
+});
+
+/**
+ * Shortcut for creating a new BorderLayout object and adding one or more ContentPanels to it in a single step, handling
+ * the beginUpdate and endUpdate calls internally.  The key to this method is the <b>panels</b> property that can be
+ * provided with each region config, which allows you to add ContentPanel configs in addition to the region configs
+ * during creation.  The following code is equivalent to the constructor-based example at the beginning of this class:
+ * <pre><code>
+// shorthand
+var CP = Roo.ContentPanel;
+
+var layout = Roo.BorderLayout.create({
+    north: {
+        initialSize: 25,
+        titlebar: false,
+        panels: [new CP("north", "North")]
+    },
+    west: {
+        split:true,
+        initialSize: 200,
+        minSize: 175,
+        maxSize: 400,
+        titlebar: true,
+        collapsible: true,
+        panels: [new CP("west", {title: "West"})]
+    },
+    east: {
+        split:true,
+        initialSize: 202,
+        minSize: 175,
+        maxSize: 400,
+        titlebar: true,
+        collapsible: true,
+        panels: [new CP("autoTabs", {title: "Auto Tabs", closable: true})]
+    },
+    south: {
+        split:true,
+        initialSize: 100,
+        minSize: 100,
+        maxSize: 200,
+        titlebar: true,
+        collapsible: true,
+        panels: [new CP("south", {title: "South", closable: true})]
+    },
+    center: {
+        titlebar: true,
+        autoScroll:true,
+        resizeTabs: true,
+        minTabWidth: 50,
+        preferredTabWidth: 150,
+        panels: [
+            new CP("center1", {title: "Close Me", closable: true}),
+            new CP("center2", {title: "Center Panel", closable: false})
+        ]
+    }
+}, document.body);
+
+layout.getRegion("center").showPanel("center1");
+</code></pre>
+ * @param config
+ * @param targetEl
+ */
+Roo.BorderLayout.create = function(config, targetEl){
+    var layout = new Roo.BorderLayout(targetEl || document.body, config);
+    layout.beginUpdate();
+    var regions = Roo.BorderLayout.RegionFactory.validRegions;
+    for(var j = 0, jlen = regions.length; j < jlen; j++){
+        var lr = regions[j];
+        if(layout.regions[lr] && config[lr].panels){
+            var r = layout.regions[lr];
+            var ps = config[lr].panels;
+            layout.addTypedPanels(r, ps);
+        }
+    }
+    layout.endUpdate();
+    return layout;
+};
+
+// private
+Roo.BorderLayout.RegionFactory = {
+    // private
+    validRegions : ["north","south","east","west","center"],
+
+    // private
+    create : function(target, mgr, config){
+        target = target.toLowerCase();
+        if(config.lightweight || config.basic){
+            return new Roo.BasicLayoutRegion(mgr, config, target);
+        }
+        switch(target){
+            case "north":
+                return new Roo.NorthLayoutRegion(mgr, config);
+            case "south":
+                return new Roo.SouthLayoutRegion(mgr, config);
+            case "east":
+                return new Roo.EastLayoutRegion(mgr, config);
+            case "west":
+                return new Roo.WestLayoutRegion(mgr, config);
+            case "center":
+                return new Roo.CenterLayoutRegion(mgr, config);
+        }
+        throw 'Layout region "'+target+'" not supported.';
+    }
+};/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+/**
+ * @class Roo.BasicLayoutRegion
+ * @extends Roo.util.Observable
+ * This class represents a lightweight region in a layout manager. This region does not move dom nodes
+ * and does not have a titlebar, tabs or any other features. All it does is size and position 
+ * panels. To create a BasicLayoutRegion, add lightweight:true or basic:true to your regions config.
+ */
+Roo.BasicLayoutRegion = function(mgr, config, pos, skipConfig){
+    this.mgr = mgr;
+    this.position  = pos;
+    this.events = {
+        /**
+         * @scope Roo.BasicLayoutRegion
+         */
+        
+        /**
+         * @event beforeremove
+         * Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
+         * @param {Roo.LayoutRegion} this
+         * @param {Roo.ContentPanel} panel The panel
+         * @param {Object} e The cancel event object
+         */
+        "beforeremove" : true,
+        /**
+         * @event invalidated
+         * Fires when the layout for this region is changed.
+         * @param {Roo.LayoutRegion} this
+         */
+        "invalidated" : true,
+        /**
+         * @event visibilitychange
+         * Fires when this region is shown or hidden 
+         * @param {Roo.LayoutRegion} this
+         * @param {Boolean} visibility true or false
+         */
+        "visibilitychange" : true,
+        /**
+         * @event paneladded
+         * Fires when a panel is added. 
+         * @param {Roo.LayoutRegion} this
+         * @param {Roo.ContentPanel} panel The panel
+         */
+        "paneladded" : true,
+        /**
+         * @event panelremoved
+         * Fires when a panel is removed. 
+         * @param {Roo.LayoutRegion} this
+         * @param {Roo.ContentPanel} panel The panel
+         */
+        "panelremoved" : true,
+        /**
+         * @event collapsed
+         * Fires when this region is collapsed.
+         * @param {Roo.LayoutRegion} this
+         */
+        "collapsed" : true,
+        /**
+         * @event expanded
+         * Fires when this region is expanded.
+         * @param {Roo.LayoutRegion} this
+         */
+        "expanded" : true,
+        /**
+         * @event slideshow
+         * Fires when this region is slid into view.
+         * @param {Roo.LayoutRegion} this
+         */
+        "slideshow" : true,
+        /**
+         * @event slidehide
+         * Fires when this region slides out of view. 
+         * @param {Roo.LayoutRegion} this
+         */
+        "slidehide" : true,
+        /**
+         * @event panelactivated
+         * Fires when a panel is activated. 
+         * @param {Roo.LayoutRegion} this
+         * @param {Roo.ContentPanel} panel The activated panel
+         */
+        "panelactivated" : true,
+        /**
+         * @event resized
+         * Fires when the user resizes this region. 
+         * @param {Roo.LayoutRegion} this
+         * @param {Number} newSize The new size (width for east/west, height for north/south)
+         */
+        "resized" : true
+    };
+    /** A collection of panels in this region. @type Roo.util.MixedCollection */
+    this.panels = new Roo.util.MixedCollection();
+    this.panels.getKey = this.getPanelId.createDelegate(this);
+    this.box = null;
+    this.activePanel = null;
+    // ensure listeners are added...
+    
+    if (config.listeners || config.events) {
+        Roo.BasicLayoutRegion.superclass.constructor.call(this, {
+            listeners : config.listeners || {},
+            events : config.events || {}
+        });
+    }
+    
+    if(skipConfig !== true){
+        this.applyConfig(config);
+    }
+};
+
+Roo.extend(Roo.BasicLayoutRegion, Roo.util.Observable, {
+    getPanelId : function(p){
+        return p.getId();
+    },
+    
+    applyConfig : function(config){
+        this.margins = config.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
+        this.config = config;
+        
+    },
+    
+    /**
+     * Resizes the region to the specified size. For vertical regions (west, east) this adjusts 
+     * the width, for horizontal (north, south) the height.
+     * @param {Number} newSize The new width or height
+     */
+    resizeTo : function(newSize){
+        var el = this.el ? this.el :
+                 (this.activePanel ? this.activePanel.getEl() : null);
+        if(el){
+            switch(this.position){
+                case "east":
+                case "west":
+                    el.setWidth(newSize);
+                    this.fireEvent("resized", this, newSize);
+                break;
+                case "north":
+                case "south":
+                    el.setHeight(newSize);
+                    this.fireEvent("resized", this, newSize);
+                break;                
+            }
+        }
+    },
+    
+    getBox : function(){
+        return this.activePanel ? this.activePanel.getEl().getBox(false, true) : null;
+    },
+    
+    getMargins : function(){
+        return this.margins;
+    },
+    
+    updateBox : function(box){
+        this.box = box;
+        var el = this.activePanel.getEl();
+        el.dom.style.left = box.x + "px";
+        el.dom.style.top = box.y + "px";
+        this.activePanel.setSize(box.width, box.height);
+    },
+    
+    /**
+     * Returns the container element for this region.
+     * @return {Roo.Element}
+     */
+    getEl : function(){
+        return this.activePanel;
+    },
+    
+    /**
+     * Returns true if this region is currently visible.
+     * @return {Boolean}
+     */
+    isVisible : function(){
+        return this.activePanel ? true : false;
+    },
+    
+    setActivePanel : function(panel){
+        panel = this.getPanel(panel);
+        if(this.activePanel && this.activePanel != panel){
+            this.activePanel.setActiveState(false);
+            this.activePanel.getEl().setLeftTop(-10000,-10000);
+        }
+        this.activePanel = panel;
+        panel.setActiveState(true);
+        if(this.box){
+            panel.setSize(this.box.width, this.box.height);
+        }
+        this.fireEvent("panelactivated", this, panel);
+        this.fireEvent("invalidated");
+    },
+    
+    /**
+     * Show the specified panel.
+     * @param {Number/String/ContentPanel} panelId The panels index, id or the panel itself
+     * @return {Roo.ContentPanel} The shown panel or null
+     */
+    showPanel : function(panel){
+        if(panel = this.getPanel(panel)){
+            this.setActivePanel(panel);
+        }
+        return panel;
+    },
+    
+    /**
+     * Get the active panel for this region.
+     * @return {Roo.ContentPanel} The active panel or null
+     */
+    getActivePanel : function(){
+        return this.activePanel;
+    },
+    
+    /**
+     * Add the passed ContentPanel(s)
+     * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
+     * @return {Roo.ContentPanel} The panel added (if only one was added)
+     */
+    add : function(panel){
+        if(arguments.length > 1){
+            for(var i = 0, len = arguments.length; i < len; i++) {
+            	this.add(arguments[i]);
+            }
+            return null;
+        }
+        if(this.hasPanel(panel)){
+            this.showPanel(panel);
+            return panel;
+        }
+        var el = panel.getEl();
+        if(el.dom.parentNode != this.mgr.el.dom){
+            this.mgr.el.dom.appendChild(el.dom);
+        }
+        if(panel.setRegion){
+            panel.setRegion(this);
+        }
+        this.panels.add(panel);
+        el.setStyle("position", "absolute");
+        if(!panel.background){
+            this.setActivePanel(panel);
+            if(this.config.initialSize && this.panels.getCount()==1){
+                this.resizeTo(this.config.initialSize);
+            }
+        }
+        this.fireEvent("paneladded", this, panel);
+        return panel;
+    },
+    
+    /**
+     * Returns true if the panel is in this region.
+     * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
+     * @return {Boolean}
+     */
+    hasPanel : function(panel){
+        if(typeof panel == "object"){ // must be panel obj
+            panel = panel.getId();
+        }
+        return this.getPanel(panel) ? true : false;
+    },
+    
+    /**
+     * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
+     * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
+     * @param {Boolean} preservePanel Overrides the config preservePanel option
+     * @return {Roo.ContentPanel} The panel that was removed
+     */
+    remove : function(panel, preservePanel){
+        panel = this.getPanel(panel);
+        if(!panel){
+            return null;
+        }
+        var e = {};
+        this.fireEvent("beforeremove", this, panel, e);
+        if(e.cancel === true){
+            return null;
+        }
+        var panelId = panel.getId();
+        this.panels.removeKey(panelId);
+        return panel;
+    },
+    
+    /**
+     * Returns the panel specified or null if it's not in this region.
+     * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
+     * @return {Roo.ContentPanel}
+     */
+    getPanel : function(id){
+        if(typeof id == "object"){ // must be panel obj
+            return id;
+        }
+        return this.panels.get(id);
+    },
+    
+    /**
+     * Returns this regions position (north/south/east/west/center).
+     * @return {String} 
+     */
+    getPosition: function(){
+        return this.position;    
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+/**
+ * @class Roo.LayoutRegion
+ * @extends Roo.BasicLayoutRegion
+ * This class represents a region in a layout manager.
+ * @cfg {Boolean} collapsible False to disable collapsing (defaults to true)
+ * @cfg {Boolean} collapsed True to set the initial display to collapsed (defaults to false)
+ * @cfg {Boolean} floatable False to disable floating (defaults to true)
+ * @cfg {Object} margins Margins for the element (defaults to {top: 0, left: 0, right:0, bottom: 0})
+ * @cfg {Object} cmargins Margins for the element when collapsed (defaults to: north/south {top: 2, left: 0, right:0, bottom: 2} or east/west {top: 0, left: 2, right:2, bottom: 0})
+ * @cfg {String} tabPosition "top" or "bottom" (defaults to "bottom")
+ * @cfg {String} collapsedTitle Optional string message to display in the collapsed block of a north or south region
+ * @cfg {Boolean} alwaysShowTabs True to always display tabs even when there is only 1 panel (defaults to false)
+ * @cfg {Boolean} autoScroll True to enable overflow scrolling (defaults to false)
+ * @cfg {Boolean} titlebar True to display a title bar (defaults to true)
+ * @cfg {String} title The title for the region (overrides panel titles)
+ * @cfg {Boolean} animate True to animate expand/collapse (defaults to false)
+ * @cfg {Boolean} autoHide False to disable auto hiding when the mouse leaves the "floated" region (defaults to true)
+ * @cfg {Boolean} preservePanels True to preserve removed panels so they can be readded later (defaults to false)
+ * @cfg {Boolean} closeOnTab True to place the close icon on the tabs instead of the region titlebar (defaults to false)
+ * @cfg {Boolean} hideTabs True to hide the tab strip (defaults to false)
+ * @cfg {Boolean} resizeTabs True to enable automatic tab resizing. This will resize the tabs so they are all the same size and fit within
+ * the space available, similar to FireFox 1.5 tabs (defaults to false)
+ * @cfg {Number} minTabWidth The minimum tab width (defaults to 40)
+ * @cfg {Number} preferredTabWidth The preferred tab width (defaults to 150)
+ * @cfg {Boolean} showPin True to show a pin button
+* @cfg {Boolean} hidden True to start the region hidden (defaults to false)
+* @cfg {Boolean} hideWhenEmpty True to hide the region when it has no panels
+* @cfg {Boolean} disableTabTips True to disable tab tooltips
+* @cfg {Number} width  For East/West panels
+* @cfg {Number} height For North/South panels
+* @cfg {Boolean} split To show the splitter
+ */
+Roo.LayoutRegion = function(mgr, config, pos){
+    Roo.LayoutRegion.superclass.constructor.call(this, mgr, config, pos, true);
+    var dh = Roo.DomHelper;
+    /** This region's container element 
+    * @type Roo.Element */
+    this.el = dh.append(mgr.el.dom, {tag: "div", cls: "x-layout-panel x-layout-panel-" + this.position}, true);
+    /** This region's title element 
+    * @type Roo.Element */
+
+    this.titleEl = dh.append(this.el.dom, {tag: "div", unselectable: "on", cls: "x-unselectable x-layout-panel-hd x-layout-title-"+this.position, children:[
+        {tag: "span", cls: "x-unselectable x-layout-panel-hd-text", unselectable: "on", html: "&#160;"},
+        {tag: "div", cls: "x-unselectable x-layout-panel-hd-tools", unselectable: "on"}
+    ]}, true);
+    this.titleEl.enableDisplayMode();
+    /** This region's title text element 
+    * @type HTMLElement */
+    this.titleTextEl = this.titleEl.dom.firstChild;
+    this.tools = Roo.get(this.titleEl.dom.childNodes[1], true);
+    this.closeBtn = this.createTool(this.tools.dom, "x-layout-close");
+    this.closeBtn.enableDisplayMode();
+    this.closeBtn.on("click", this.closeClicked, this);
+    this.closeBtn.hide();
+
+    this.createBody(config);
+    this.visible = true;
+    this.collapsed = false;
+
+    if(config.hideWhenEmpty){
+        this.hide();
+        this.on("paneladded", this.validateVisibility, this);
+        this.on("panelremoved", this.validateVisibility, this);
+    }
+    this.applyConfig(config);
+};
+
+Roo.extend(Roo.LayoutRegion, Roo.BasicLayoutRegion, {
+
+    createBody : function(){
+        /** This region's body element 
+        * @type Roo.Element */
+        this.bodyEl = this.el.createChild({tag: "div", cls: "x-layout-panel-body"});
+    },
+
+    applyConfig : function(c){
+        if(c.collapsible && this.position != "center" && !this.collapsedEl){
+            var dh = Roo.DomHelper;
+            if(c.titlebar !== false){
+                this.collapseBtn = this.createTool(this.tools.dom, "x-layout-collapse-"+this.position);
+                this.collapseBtn.on("click", this.collapse, this);
+                this.collapseBtn.enableDisplayMode();
+
+                if(c.showPin === true || this.showPin){
+                    this.stickBtn = this.createTool(this.tools.dom, "x-layout-stick");
+                    this.stickBtn.enableDisplayMode();
+                    this.stickBtn.on("click", this.expand, this);
+                    this.stickBtn.hide();
+                }
+            }
+            /** This region's collapsed element
+            * @type Roo.Element */
+            this.collapsedEl = dh.append(this.mgr.el.dom, {cls: "x-layout-collapsed x-layout-collapsed-"+this.position, children:[
+                {cls: "x-layout-collapsed-tools", children:[{cls: "x-layout-ctools-inner"}]}
+            ]}, true);
+            if(c.floatable !== false){
+               this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
+               this.collapsedEl.on("click", this.collapseClick, this);
+            }
+
+            if(c.collapsedTitle && (this.position == "north" || this.position== "south")) {
+                this.collapsedTitleTextEl = dh.append(this.collapsedEl.dom, {tag: "div", cls: "x-unselectable x-layout-panel-hd-text",
+                   id: "message", unselectable: "on", style:{"float":"left"}});
+               this.collapsedTitleTextEl.innerHTML = c.collapsedTitle;
+             }
+            this.expandBtn = this.createTool(this.collapsedEl.dom.firstChild.firstChild, "x-layout-expand-"+this.position);
+            this.expandBtn.on("click", this.expand, this);
+        }
+        if(this.collapseBtn){
+            this.collapseBtn.setVisible(c.collapsible == true);
+        }
+        this.cmargins = c.cmargins || this.cmargins ||
+                         (this.position == "west" || this.position == "east" ?
+                             {top: 0, left: 2, right:2, bottom: 0} :
+                             {top: 2, left: 0, right:0, bottom: 2});
+        this.margins = c.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
+        this.bottomTabs = c.tabPosition != "top";
+        this.autoScroll = c.autoScroll || false;
+        if(this.autoScroll){
+            this.bodyEl.setStyle("overflow", "auto");
+        }else{
+            this.bodyEl.setStyle("overflow", "hidden");
+        }
+        //if(c.titlebar !== false){
+            if((!c.titlebar && !c.title) || c.titlebar === false){
+                this.titleEl.hide();
+            }else{
+                this.titleEl.show();
+                if(c.title){
+                    this.titleTextEl.innerHTML = c.title;
+                }
+            }
+        //}
+        this.duration = c.duration || .30;
+        this.slideDuration = c.slideDuration || .45;
+        this.config = c;
+        if(c.collapsed){
+            this.collapse(true);
+        }
+        if(c.hidden){
+            this.hide();
+        }
+    },
+    /**
+     * Returns true if this region is currently visible.
+     * @return {Boolean}
+     */
+    isVisible : function(){
+        return this.visible;
+    },
+
+    /**
+     * Updates the title for collapsed north/south regions (used with {@link #collapsedTitle} config option)
+     * @param {String} title (optional) The title text (accepts HTML markup, defaults to the numeric character reference for a non-breaking space, "&amp;#160;")
+     */
+    setCollapsedTitle : function(title){
+        title = title || "&#160;";
+        if(this.collapsedTitleTextEl){
+            this.collapsedTitleTextEl.innerHTML = title;
+        }
+    },
+
+    getBox : function(){
+        var b;
+        if(!this.collapsed){
+            b = this.el.getBox(false, true);
+        }else{
+            b = this.collapsedEl.getBox(false, true);
+        }
+        return b;
+    },
+
+    getMargins : function(){
+        return this.collapsed ? this.cmargins : this.margins;
+    },
+
+    highlight : function(){
+        this.el.addClass("x-layout-panel-dragover");
+    },
+
+    unhighlight : function(){
+        this.el.removeClass("x-layout-panel-dragover");
+    },
+
+    updateBox : function(box){
+        this.box = box;
+        if(!this.collapsed){
+            this.el.dom.style.left = box.x + "px";
+            this.el.dom.style.top = box.y + "px";
+            this.updateBody(box.width, box.height);
+        }else{
+            this.collapsedEl.dom.style.left = box.x + "px";
+            this.collapsedEl.dom.style.top = box.y + "px";
+            this.collapsedEl.setSize(box.width, box.height);
+        }
+        if(this.tabs){
+            this.tabs.autoSizeTabs();
+        }
+    },
+
+    updateBody : function(w, h){
+        if(w !== null){
+            this.el.setWidth(w);
+            w -= this.el.getBorderWidth("rl");
+            if(this.config.adjustments){
+                w += this.config.adjustments[0];
+            }
+        }
+        if(h !== null){
+            this.el.setHeight(h);
+            h = this.titleEl && this.titleEl.isDisplayed() ? h - (this.titleEl.getHeight()||0) : h;
+            h -= this.el.getBorderWidth("tb");
+            if(this.config.adjustments){
+                h += this.config.adjustments[1];
+            }
+            this.bodyEl.setHeight(h);
+            if(this.tabs){
+                h = this.tabs.syncHeight(h);
+            }
+        }
+        if(this.panelSize){
+            w = w !== null ? w : this.panelSize.width;
+            h = h !== null ? h : this.panelSize.height;
+        }
+        if(this.activePanel){
+            var el = this.activePanel.getEl();
+            w = w !== null ? w : el.getWidth();
+            h = h !== null ? h : el.getHeight();
+            this.panelSize = {width: w, height: h};
+            this.activePanel.setSize(w, h);
+        }
+        if(Roo.isIE && this.tabs){
+            this.tabs.el.repaint();
+        }
+    },
+
+    /**
+     * Returns the container element for this region.
+     * @return {Roo.Element}
+     */
+    getEl : function(){
+        return this.el;
+    },
+
+    /**
+     * Hides this region.
+     */
+    hide : function(){
+        if(!this.collapsed){
+            this.el.dom.style.left = "-2000px";
+            this.el.hide();
+        }else{
+            this.collapsedEl.dom.style.left = "-2000px";
+            this.collapsedEl.hide();
+        }
+        this.visible = false;
+        this.fireEvent("visibilitychange", this, false);
+    },
+
+    /**
+     * Shows this region if it was previously hidden.
+     */
+    show : function(){
+        if(!this.collapsed){
+            this.el.show();
+        }else{
+            this.collapsedEl.show();
+        }
+        this.visible = true;
+        this.fireEvent("visibilitychange", this, true);
+    },
+
+    closeClicked : function(){
+        if(this.activePanel){
+            this.remove(this.activePanel);
+        }
+    },
+
+    collapseClick : function(e){
+        if(this.isSlid){
+           e.stopPropagation();
+           this.slideIn();
+        }else{
+           e.stopPropagation();
+           this.slideOut();
+        }
+    },
+
+    /**
+     * Collapses this region.
+     * @param {Boolean} skipAnim (optional) true to collapse the element without animation (if animate is true)
+     */
+    collapse : function(skipAnim){
+        if(this.collapsed) return;
+        this.collapsed = true;
+        if(this.split){
+            this.split.el.hide();
+        }
+        if(this.config.animate && skipAnim !== true){
+            this.fireEvent("invalidated", this);
+            this.animateCollapse();
+        }else{
+            this.el.setLocation(-20000,-20000);
+            this.el.hide();
+            this.collapsedEl.show();
+            this.fireEvent("collapsed", this);
+            this.fireEvent("invalidated", this);
+        }
+    },
+
+    animateCollapse : function(){
+        // overridden
+    },
+
+    /**
+     * Expands this region if it was previously collapsed.
+     * @param {Roo.EventObject} e The event that triggered the expand (or null if calling manually)
+     * @param {Boolean} skipAnim (optional) true to expand the element without animation (if animate is true)
+     */
+    expand : function(e, skipAnim){
+        if(e) e.stopPropagation();
+        if(!this.collapsed || this.el.hasActiveFx()) return;
+        if(this.isSlid){
+            this.afterSlideIn();
+            skipAnim = true;
+        }
+        this.collapsed = false;
+        if(this.config.animate && skipAnim !== true){
+            this.animateExpand();
+        }else{
+            this.el.show();
+            if(this.split){
+                this.split.el.show();
+            }
+            this.collapsedEl.setLocation(-2000,-2000);
+            this.collapsedEl.hide();
+            this.fireEvent("invalidated", this);
+            this.fireEvent("expanded", this);
+        }
+    },
+
+    animateExpand : function(){
+        // overridden
+    },
+
+    initTabs : function(){
+        this.bodyEl.setStyle("overflow", "hidden");
+        var ts = new Roo.TabPanel(this.bodyEl.dom, {
+            tabPosition: this.bottomTabs ? 'bottom' : 'top',
+            disableTooltips: this.config.disableTabTips
+        });
+        if(this.config.hideTabs){
+            ts.stripWrap.setDisplayed(false);
+        }
+        this.tabs = ts;
+        ts.resizeTabs = this.config.resizeTabs === true;
+        ts.minTabWidth = this.config.minTabWidth || 40;
+        ts.maxTabWidth = this.config.maxTabWidth || 250;
+        ts.preferredTabWidth = this.config.preferredTabWidth || 150;
+        ts.monitorResize = false;
+        ts.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
+        ts.bodyEl.addClass('x-layout-tabs-body');
+        this.panels.each(this.initPanelAsTab, this);
+    },
+
+    initPanelAsTab : function(panel){
+        var ti = this.tabs.addTab(panel.getEl().id, panel.getTitle(), null,
+                    this.config.closeOnTab && panel.isClosable());
+        if(panel.tabTip !== undefined){
+            ti.setTooltip(panel.tabTip);
+        }
+        ti.on("activate", function(){
+              this.setActivePanel(panel);
+        }, this);
+        if(this.config.closeOnTab){
+            ti.on("beforeclose", function(t, e){
+                e.cancel = true;
+                this.remove(panel);
+            }, this);
+        }
+        return ti;
+    },
+
+    updatePanelTitle : function(panel, title){
+        if(this.activePanel == panel){
+            this.updateTitle(title);
+        }
+        if(this.tabs){
+            var ti = this.tabs.getTab(panel.getEl().id);
+            ti.setText(title);
+            if(panel.tabTip !== undefined){
+                ti.setTooltip(panel.tabTip);
+            }
+        }
+    },
+
+    updateTitle : function(title){
+        if(this.titleTextEl && !this.config.title){
+            this.titleTextEl.innerHTML = (typeof title != "undefined" && title.length > 0 ? title : "&#160;");
+        }
+    },
+
+    setActivePanel : function(panel){
+        panel = this.getPanel(panel);
+        if(this.activePanel && this.activePanel != panel){
+            this.activePanel.setActiveState(false);
+        }
+        this.activePanel = panel;
+        panel.setActiveState(true);
+        if(this.panelSize){
+            panel.setSize(this.panelSize.width, this.panelSize.height);
+        }
+        if(this.closeBtn){
+            this.closeBtn.setVisible(!this.config.closeOnTab && !this.isSlid && panel.isClosable());
+        }
+        this.updateTitle(panel.getTitle());
+        if(this.tabs){
+            this.fireEvent("invalidated", this);
+        }
+        this.fireEvent("panelactivated", this, panel);
+    },
+
+    /**
+     * Shows the specified panel.
+     * @param {Number/String/ContentPanel} panelId The panel's index, id or the panel itself
+     * @return {Roo.ContentPanel} The shown panel, or null if a panel could not be found from panelId
+     */
+    showPanel : function(panel){
+        if(panel = this.getPanel(panel)){
+            if(this.tabs){
+                var tab = this.tabs.getTab(panel.getEl().id);
+                if(tab.isHidden()){
+                    this.tabs.unhideTab(tab.id);
+                }
+                tab.activate();
+            }else{
+                this.setActivePanel(panel);
+            }
+        }
+        return panel;
+    },
+
+    /**
+     * Get the active panel for this region.
+     * @return {Roo.ContentPanel} The active panel or null
+     */
+    getActivePanel : function(){
+        return this.activePanel;
+    },
+
+    validateVisibility : function(){
+        if(this.panels.getCount() < 1){
+            this.updateTitle("&#160;");
+            this.closeBtn.hide();
+            this.hide();
+        }else{
+            if(!this.isVisible()){
+                this.show();
+            }
+        }
+    },
+
+    /**
+     * Adds the passed ContentPanel(s) to this region.
+     * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
+     * @return {Roo.ContentPanel} The panel added (if only one was added; null otherwise)
+     */
+    add : function(panel){
+        if(arguments.length > 1){
+            for(var i = 0, len = arguments.length; i < len; i++) {
+                this.add(arguments[i]);
+            }
+            return null;
+        }
+        if(this.hasPanel(panel)){
+            this.showPanel(panel);
+            return panel;
+        }
+        panel.setRegion(this);
+        this.panels.add(panel);
+        if(this.panels.getCount() == 1 && !this.config.alwaysShowTabs){
+            this.bodyEl.dom.appendChild(panel.getEl().dom);
+            if(panel.background !== true){
+                this.setActivePanel(panel);
+            }
+            this.fireEvent("paneladded", this, panel);
+            return panel;
+        }
+        if(!this.tabs){
+            this.initTabs();
+        }else{
+            this.initPanelAsTab(panel);
+        }
+        if(panel.background !== true){
+            this.tabs.activate(panel.getEl().id);
+        }
+        this.fireEvent("paneladded", this, panel);
+        return panel;
+    },
+
+    /**
+     * Hides the tab for the specified panel.
+     * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
+     */
+    hidePanel : function(panel){
+        if(this.tabs && (panel = this.getPanel(panel))){
+            this.tabs.hideTab(panel.getEl().id);
+        }
+    },
+
+    /**
+     * Unhides the tab for a previously hidden panel.
+     * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
+     */
+    unhidePanel : function(panel){
+        if(this.tabs && (panel = this.getPanel(panel))){
+            this.tabs.unhideTab(panel.getEl().id);
+        }
+    },
+
+    clearPanels : function(){
+        while(this.panels.getCount() > 0){
+             this.remove(this.panels.first());
+        }
+    },
+
+    /**
+     * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
+     * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
+     * @param {Boolean} preservePanel Overrides the config preservePanel option
+     * @return {Roo.ContentPanel} The panel that was removed
+     */
+    remove : function(panel, preservePanel){
+        panel = this.getPanel(panel);
+        if(!panel){
+            return null;
+        }
+        var e = {};
+        this.fireEvent("beforeremove", this, panel, e);
+        if(e.cancel === true){
+            return null;
+        }
+        preservePanel = (typeof preservePanel != "undefined" ? preservePanel : (this.config.preservePanels === true || panel.preserve === true));
+        var panelId = panel.getId();
+        this.panels.removeKey(panelId);
+        if(preservePanel){
+            document.body.appendChild(panel.getEl().dom);
+        }
+        if(this.tabs){
+            this.tabs.removeTab(panel.getEl().id);
+        }else if (!preservePanel){
+            this.bodyEl.dom.removeChild(panel.getEl().dom);
+        }
+        if(this.panels.getCount() == 1 && this.tabs && !this.config.alwaysShowTabs){
+            var p = this.panels.first();
+            var tempEl = document.createElement("div"); // temp holder to keep IE from deleting the node
+            tempEl.appendChild(p.getEl().dom);
+            this.bodyEl.update("");
+            this.bodyEl.dom.appendChild(p.getEl().dom);
+            tempEl = null;
+            this.updateTitle(p.getTitle());
+            this.tabs = null;
+            this.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
+            this.setActivePanel(p);
+        }
+        panel.setRegion(null);
+        if(this.activePanel == panel){
+            this.activePanel = null;
+        }
+        if(this.config.autoDestroy !== false && preservePanel !== true){
+            try{panel.destroy();}catch(e){}
+        }
+        this.fireEvent("panelremoved", this, panel);
+        return panel;
+    },
+
+    /**
+     * Returns the TabPanel component used by this region
+     * @return {Roo.TabPanel}
+     */
+    getTabs : function(){
+        return this.tabs;
+    },
+
+    createTool : function(parentEl, className){
+        var btn = Roo.DomHelper.append(parentEl, {tag: "div", cls: "x-layout-tools-button",
+            children: [{tag: "div", cls: "x-layout-tools-button-inner " + className, html: "&#160;"}]}, true);
+        btn.addClassOnOver("x-layout-tools-button-over");
+        return btn;
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+
+
+/**
+ * @class Roo.SplitLayoutRegion
+ * @extends Roo.LayoutRegion
+ * Adds a splitbar and other (private) useful functionality to a {@link Roo.LayoutRegion}.
+ */
+Roo.SplitLayoutRegion = function(mgr, config, pos, cursor){
+    this.cursor = cursor;
+    Roo.SplitLayoutRegion.superclass.constructor.call(this, mgr, config, pos);
+};
+
+Roo.extend(Roo.SplitLayoutRegion, Roo.LayoutRegion, {
+    splitTip : "Drag to resize.",
+    collapsibleSplitTip : "Drag to resize. Double click to hide.",
+    useSplitTips : false,
+
+    applyConfig : function(config){
+        Roo.SplitLayoutRegion.superclass.applyConfig.call(this, config);
+        if(config.split){
+            if(!this.split){
+                var splitEl = Roo.DomHelper.append(this.mgr.el.dom, 
+                        {tag: "div", id: this.el.id + "-split", cls: "x-layout-split x-layout-split-"+this.position, html: "&#160;"});
+                /** The SplitBar for this region 
+                * @type Roo.SplitBar */
+                this.split = new Roo.SplitBar(splitEl, this.el, this.orientation);
+                this.split.on("moved", this.onSplitMove, this);
+                this.split.useShim = config.useShim === true;
+                this.split.getMaximumSize = this[this.position == 'north' || this.position == 'south' ? 'getVMaxSize' : 'getHMaxSize'].createDelegate(this);
+                if(this.useSplitTips){
+                    this.split.el.dom.title = config.collapsible ? this.collapsibleSplitTip : this.splitTip;
+                }
+                if(config.collapsible){
+                    this.split.el.on("dblclick", this.collapse,  this);
+                }
+            }
+            if(typeof config.minSize != "undefined"){
+                this.split.minSize = config.minSize;
+            }
+            if(typeof config.maxSize != "undefined"){
+                this.split.maxSize = config.maxSize;
+            }
+            if(config.hideWhenEmpty || config.hidden || config.collapsed){
+                this.hideSplitter();
+            }
+        }
+    },
+
+    getHMaxSize : function(){
+         var cmax = this.config.maxSize || 10000;
+         var center = this.mgr.getRegion("center");
+         return Math.min(cmax, (this.el.getWidth()+center.getEl().getWidth())-center.getMinWidth());
+    },
+
+    getVMaxSize : function(){
+         var cmax = this.config.maxSize || 10000;
+         var center = this.mgr.getRegion("center");
+         return Math.min(cmax, (this.el.getHeight()+center.getEl().getHeight())-center.getMinHeight());
+    },
+
+    onSplitMove : function(split, newSize){
+        this.fireEvent("resized", this, newSize);
+    },
+    
+    /** 
+     * Returns the {@link Roo.SplitBar} for this region.
+     * @return {Roo.SplitBar}
+     */
+    getSplitBar : function(){
+        return this.split;
+    },
+    
+    hide : function(){
+        this.hideSplitter();
+        Roo.SplitLayoutRegion.superclass.hide.call(this);
+    },
+
+    hideSplitter : function(){
+        if(this.split){
+            this.split.el.setLocation(-2000,-2000);
+            this.split.el.hide();
+        }
+    },
+
+    show : function(){
+        if(this.split){
+            this.split.el.show();
+        }
+        Roo.SplitLayoutRegion.superclass.show.call(this);
+    },
+    
+    beforeSlide: function(){
+        if(Roo.isGecko){// firefox overflow auto bug workaround
+            this.bodyEl.clip();
+            if(this.tabs) this.tabs.bodyEl.clip();
+            if(this.activePanel){
+                this.activePanel.getEl().clip();
+                
+                if(this.activePanel.beforeSlide){
+                    this.activePanel.beforeSlide();
+                }
+            }
+        }
+    },
+    
+    afterSlide : function(){
+        if(Roo.isGecko){// firefox overflow auto bug workaround
+            this.bodyEl.unclip();
+            if(this.tabs) this.tabs.bodyEl.unclip();
+            if(this.activePanel){
+                this.activePanel.getEl().unclip();
+                if(this.activePanel.afterSlide){
+                    this.activePanel.afterSlide();
+                }
+            }
+        }
+    },
+
+    initAutoHide : function(){
+        if(this.autoHide !== false){
+            if(!this.autoHideHd){
+                var st = new Roo.util.DelayedTask(this.slideIn, this);
+                this.autoHideHd = {
+                    "mouseout": function(e){
+                        if(!e.within(this.el, true)){
+                            st.delay(500);
+                        }
+                    },
+                    "mouseover" : function(e){
+                        st.cancel();
+                    },
+                    scope : this
+                };
+            }
+            this.el.on(this.autoHideHd);
+        }
+    },
+
+    clearAutoHide : function(){
+        if(this.autoHide !== false){
+            this.el.un("mouseout", this.autoHideHd.mouseout);
+            this.el.un("mouseover", this.autoHideHd.mouseover);
+        }
+    },
+
+    clearMonitor : function(){
+        Roo.get(document).un("click", this.slideInIf, this);
+    },
+
+    // these names are backwards but not changed for compat
+    slideOut : function(){
+        if(this.isSlid || this.el.hasActiveFx()){
+            return;
+        }
+        this.isSlid = true;
+        if(this.collapseBtn){
+            this.collapseBtn.hide();
+        }
+        this.closeBtnState = this.closeBtn.getStyle('display');
+        this.closeBtn.hide();
+        if(this.stickBtn){
+            this.stickBtn.show();
+        }
+        this.el.show();
+        this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
+        this.beforeSlide();
+        this.el.setStyle("z-index", 10001);
+        this.el.slideIn(this.getSlideAnchor(), {
+            callback: function(){
+                this.afterSlide();
+                this.initAutoHide();
+                Roo.get(document).on("click", this.slideInIf, this);
+                this.fireEvent("slideshow", this);
+            },
+            scope: this,
+            block: true
+        });
+    },
+
+    afterSlideIn : function(){
+        this.clearAutoHide();
+        this.isSlid = false;
+        this.clearMonitor();
+        this.el.setStyle("z-index", "");
+        if(this.collapseBtn){
+            this.collapseBtn.show();
+        }
+        this.closeBtn.setStyle('display', this.closeBtnState);
+        if(this.stickBtn){
+            this.stickBtn.hide();
+        }
+        this.fireEvent("slidehide", this);
+    },
+
+    slideIn : function(cb){
+        if(!this.isSlid || this.el.hasActiveFx()){
+            Roo.callback(cb);
+            return;
+        }
+        this.isSlid = false;
+        this.beforeSlide();
+        this.el.slideOut(this.getSlideAnchor(), {
+            callback: function(){
+                this.el.setLeftTop(-10000, -10000);
+                this.afterSlide();
+                this.afterSlideIn();
+                Roo.callback(cb);
+            },
+            scope: this,
+            block: true
+        });
+    },
+    
+    slideInIf : function(e){
+        if(!e.within(this.el)){
+            this.slideIn();
+        }
+    },
+
+    animateCollapse : function(){
+        this.beforeSlide();
+        this.el.setStyle("z-index", 20000);
+        var anchor = this.getSlideAnchor();
+        this.el.slideOut(anchor, {
+            callback : function(){
+                this.el.setStyle("z-index", "");
+                this.collapsedEl.slideIn(anchor, {duration:.3});
+                this.afterSlide();
+                this.el.setLocation(-10000,-10000);
+                this.el.hide();
+                this.fireEvent("collapsed", this);
+            },
+            scope: this,
+            block: true
+        });
+    },
+
+    animateExpand : function(){
+        this.beforeSlide();
+        this.el.alignTo(this.collapsedEl, this.getCollapseAnchor(), this.getExpandAdj());
+        this.el.setStyle("z-index", 20000);
+        this.collapsedEl.hide({
+            duration:.1
+        });
+        this.el.slideIn(this.getSlideAnchor(), {
+            callback : function(){
+                this.el.setStyle("z-index", "");
+                this.afterSlide();
+                if(this.split){
+                    this.split.el.show();
+                }
+                this.fireEvent("invalidated", this);
+                this.fireEvent("expanded", this);
+            },
+            scope: this,
+            block: true
+        });
+    },
+
+    anchors : {
+        "west" : "left",
+        "east" : "right",
+        "north" : "top",
+        "south" : "bottom"
+    },
+
+    sanchors : {
+        "west" : "l",
+        "east" : "r",
+        "north" : "t",
+        "south" : "b"
+    },
+
+    canchors : {
+        "west" : "tl-tr",
+        "east" : "tr-tl",
+        "north" : "tl-bl",
+        "south" : "bl-tl"
+    },
+
+    getAnchor : function(){
+        return this.anchors[this.position];
+    },
+
+    getCollapseAnchor : function(){
+        return this.canchors[this.position];
+    },
+
+    getSlideAnchor : function(){
+        return this.sanchors[this.position];
+    },
+
+    getAlignAdj : function(){
+        var cm = this.cmargins;
+        switch(this.position){
+            case "west":
+                return [0, 0];
+            break;
+            case "east":
+                return [0, 0];
+            break;
+            case "north":
+                return [0, 0];
+            break;
+            case "south":
+                return [0, 0];
+            break;
+        }
+    },
+
+    getExpandAdj : function(){
+        var c = this.collapsedEl, cm = this.cmargins;
+        switch(this.position){
+            case "west":
+                return [-(cm.right+c.getWidth()+cm.left), 0];
+            break;
+            case "east":
+                return [cm.right+c.getWidth()+cm.left, 0];
+            break;
+            case "north":
+                return [0, -(cm.top+cm.bottom+c.getHeight())];
+            break;
+            case "south":
+                return [0, cm.top+cm.bottom+c.getHeight()];
+            break;
+        }
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/*
+ * These classes are private internal classes
+ */
+Roo.CenterLayoutRegion = function(mgr, config){
+    Roo.LayoutRegion.call(this, mgr, config, "center");
+    this.visible = true;
+    this.minWidth = config.minWidth || 20;
+    this.minHeight = config.minHeight || 20;
+};
+
+Roo.extend(Roo.CenterLayoutRegion, Roo.LayoutRegion, {
+    hide : function(){
+        // center panel can't be hidden
+    },
+    
+    show : function(){
+        // center panel can't be hidden
+    },
+    
+    getMinWidth: function(){
+        return this.minWidth;
+    },
+    
+    getMinHeight: function(){
+        return this.minHeight;
+    }
+});
+
+
+Roo.NorthLayoutRegion = function(mgr, config){
+    Roo.LayoutRegion.call(this, mgr, config, "north", "n-resize");
+    if(this.split){
+        this.split.placement = Roo.SplitBar.TOP;
+        this.split.orientation = Roo.SplitBar.VERTICAL;
+        this.split.el.addClass("x-layout-split-v");
+    }
+    var size = config.initialSize || config.height;
+    if(typeof size != "undefined"){
+        this.el.setHeight(size);
+    }
+};
+Roo.extend(Roo.NorthLayoutRegion, Roo.SplitLayoutRegion, {
+    orientation: Roo.SplitBar.VERTICAL,
+    getBox : function(){
+        if(this.collapsed){
+            return this.collapsedEl.getBox();
+        }
+        var box = this.el.getBox();
+        if(this.split){
+            box.height += this.split.el.getHeight();
+        }
+        return box;
+    },
+    
+    updateBox : function(box){
+        if(this.split && !this.collapsed){
+            box.height -= this.split.el.getHeight();
+            this.split.el.setLeft(box.x);
+            this.split.el.setTop(box.y+box.height);
+            this.split.el.setWidth(box.width);
+        }
+        if(this.collapsed){
+            this.updateBody(box.width, null);
+        }
+        Roo.LayoutRegion.prototype.updateBox.call(this, box);
+    }
+});
+
+Roo.SouthLayoutRegion = function(mgr, config){
+    Roo.SplitLayoutRegion.call(this, mgr, config, "south", "s-resize");
+    if(this.split){
+        this.split.placement = Roo.SplitBar.BOTTOM;
+        this.split.orientation = Roo.SplitBar.VERTICAL;
+        this.split.el.addClass("x-layout-split-v");
+    }
+    var size = config.initialSize || config.height;
+    if(typeof size != "undefined"){
+        this.el.setHeight(size);
+    }
+};
+Roo.extend(Roo.SouthLayoutRegion, Roo.SplitLayoutRegion, {
+    orientation: Roo.SplitBar.VERTICAL,
+    getBox : function(){
+        if(this.collapsed){
+            return this.collapsedEl.getBox();
+        }
+        var box = this.el.getBox();
+        if(this.split){
+            var sh = this.split.el.getHeight();
+            box.height += sh;
+            box.y -= sh;
+        }
+        return box;
+    },
+    
+    updateBox : function(box){
+        if(this.split && !this.collapsed){
+            var sh = this.split.el.getHeight();
+            box.height -= sh;
+            box.y += sh;
+            this.split.el.setLeft(box.x);
+            this.split.el.setTop(box.y-sh);
+            this.split.el.setWidth(box.width);
+        }
+        if(this.collapsed){
+            this.updateBody(box.width, null);
+        }
+        Roo.LayoutRegion.prototype.updateBox.call(this, box);
+    }
+});
+
+Roo.EastLayoutRegion = function(mgr, config){
+    Roo.SplitLayoutRegion.call(this, mgr, config, "east", "e-resize");
+    if(this.split){
+        this.split.placement = Roo.SplitBar.RIGHT;
+        this.split.orientation = Roo.SplitBar.HORIZONTAL;
+        this.split.el.addClass("x-layout-split-h");
+    }
+    var size = config.initialSize || config.width;
+    if(typeof size != "undefined"){
+        this.el.setWidth(size);
+    }
+};
+Roo.extend(Roo.EastLayoutRegion, Roo.SplitLayoutRegion, {
+    orientation: Roo.SplitBar.HORIZONTAL,
+    getBox : function(){
+        if(this.collapsed){
+            return this.collapsedEl.getBox();
+        }
+        var box = this.el.getBox();
+        if(this.split){
+            var sw = this.split.el.getWidth();
+            box.width += sw;
+            box.x -= sw;
+        }
+        return box;
+    },
+
+    updateBox : function(box){
+        if(this.split && !this.collapsed){
+            var sw = this.split.el.getWidth();
+            box.width -= sw;
+            this.split.el.setLeft(box.x);
+            this.split.el.setTop(box.y);
+            this.split.el.setHeight(box.height);
+            box.x += sw;
+        }
+        if(this.collapsed){
+            this.updateBody(null, box.height);
+        }
+        Roo.LayoutRegion.prototype.updateBox.call(this, box);
+    }
+});
+
+Roo.WestLayoutRegion = function(mgr, config){
+    Roo.SplitLayoutRegion.call(this, mgr, config, "west", "w-resize");
+    if(this.split){
+        this.split.placement = Roo.SplitBar.LEFT;
+        this.split.orientation = Roo.SplitBar.HORIZONTAL;
+        this.split.el.addClass("x-layout-split-h");
+    }
+    var size = config.initialSize || config.width;
+    if(typeof size != "undefined"){
+        this.el.setWidth(size);
+    }
+};
+Roo.extend(Roo.WestLayoutRegion, Roo.SplitLayoutRegion, {
+    orientation: Roo.SplitBar.HORIZONTAL,
+    getBox : function(){
+        if(this.collapsed){
+            return this.collapsedEl.getBox();
+        }
+        var box = this.el.getBox();
+        if(this.split){
+            box.width += this.split.el.getWidth();
+        }
+        return box;
+    },
+    
+    updateBox : function(box){
+        if(this.split && !this.collapsed){
+            var sw = this.split.el.getWidth();
+            box.width -= sw;
+            this.split.el.setLeft(box.x+box.width);
+            this.split.el.setTop(box.y);
+            this.split.el.setHeight(box.height);
+        }
+        if(this.collapsed){
+            this.updateBody(null, box.height);
+        }
+        Roo.LayoutRegion.prototype.updateBox.call(this, box);
+    }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+ 
+/*
+ * Private internal class for reading and applying state
+ */
+Roo.LayoutStateManager = function(layout){
+     // default empty state
+     this.state = {
+        north: {},
+        south: {},
+        east: {},
+        west: {}       
+    };
+};
+
+Roo.LayoutStateManager.prototype = {
+    init : function(layout, provider){
+        this.provider = provider;
+        var state = provider.get(layout.id+"-layout-state");
+        if(state){
+            var wasUpdating = layout.isUpdating();
+            if(!wasUpdating){
+                layout.beginUpdate();
+            }
+            for(var key in state){
+                if(typeof state[key] != "function"){
+                    var rstate = state[key];
+                    var r = layout.getRegion(key);
+                    if(r && rstate){
+                        if(rstate.size){
+                            r.resizeTo(rstate.size);
+                        }
+                        if(rstate.collapsed == true){
+                            r.collapse(true);
+                        }else{
+                            r.expand(null, true);
+                        }
+                    }
+                }
+            }
+            if(!wasUpdating){
+                layout.endUpdate();
+            }
+            this.state = state; 
+        }
+        this.layout = layout;
+        layout.on("regionresized", this.onRegionResized, this);
+        layout.on("regioncollapsed", this.onRegionCollapsed, this);
+        layout.on("regionexpanded", this.onRegionExpanded, this);
+    },
+    
+    storeState : function(){
+        this.provider.set(this.layout.id+"-layout-state", this.state);
+    },
+    
+    onRegionResized : function(region, newSize){
+        this.state[region.getPosition()].size = newSize;
+        this.storeState();
+    },
+    
+    onRegionCollapsed : function(region){
+        this.state[region.getPosition()].collapsed = true;
+        this.storeState();
+    },
+    
+    onRegionExpanded : function(region){
+        this.state[region.getPosition()].collapsed = false;
+        this.storeState();
+    }
+};/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.ContentPanel
+ * @extends Roo.util.Observable
+ * A basic ContentPanel element.
+ * @cfg {Boolean} fitToFrame True for this panel to adjust its size to fit when the region resizes  (defaults to false)
+ * @cfg {Boolean} fitContainer When using {@link #fitToFrame} and {@link #resizeEl}, you can also fit the parent container  (defaults to false)
+ * @cfg {Boolean/Object} autoCreate True to auto generate the DOM element for this panel, or a {@link Roo.DomHelper} config of the element to create
+ * @cfg {Boolean} closable True if the panel can be closed/removed
+ * @cfg {Boolean} background True if the panel should not be activated when it is added (defaults to false)
+ * @cfg {String/HTMLElement/Element} resizeEl An element to resize if {@link #fitToFrame} is true (instead of this panel's element)
+ * @cfg {Toolbar} toolbar A toolbar for this panel
+ * @cfg {Boolean} autoScroll True to scroll overflow in this panel (use with {@link #fitToFrame})
+ * @cfg {String} title The title for this panel
+ * @cfg {Array} adjustments Values to <b>add</b> to the width/height when doing a {@link #fitToFrame} (default is [0, 0])
+ * @cfg {String} url Calls {@link #setUrl} with this value
+ * @cfg {String} region (center|north|south|east|west) which region to put this panel on (when used with xtype constructors)
+ * @cfg {String/Object} params When used with {@link #url}, calls {@link #setUrl} with this value
+ * @cfg {Boolean} loadOnce When used with {@link #url}, calls {@link #setUrl} with this value
+ * @constructor
+ * Create a new ContentPanel.
+ * @param {String/HTMLElement/Roo.Element} el The container element for this panel
+ * @param {String/Object} config A string to set only the title or a config object
+ * @param {String} content (optional) Set the HTML content for this panel
+ * @param {String} region (optional) Used by xtype constructors to add to regions. (values center,east,west,south,north)
+ */
+Roo.ContentPanel = function(el, config, content){
+    
+     
+    /*
+    if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory
+        config = el;
+        el = Roo.id();
+    }
+    if (config && config.parentLayout) { 
+        el = config.parentLayout.el.createChild(); 
+    }
+    */
+    if(el.autoCreate){ // xtype is available if this is called from factory
+        config = el;
+        el = Roo.id();
+    }
+    this.el = Roo.get(el);
+    if(!this.el && config && config.autoCreate){
+        if(typeof config.autoCreate == "object"){
+            if(!config.autoCreate.id){
+                config.autoCreate.id = config.id||el;
+            }
+            this.el = Roo.DomHelper.append(document.body,
+                        config.autoCreate, true);
+        }else{
+            this.el = Roo.DomHelper.append(document.body,
+                        {tag: "div", cls: "x-layout-inactive-content", id: config.id||el}, true);
+        }
+    }
+    this.closable = false;
+    this.loaded = false;
+    this.active = false;
+    if(typeof config == "string"){
+        this.title = config;
+    }else{
+        Roo.apply(this, config);
+    }
+    
+    if (this.toolbar && !this.toolbar.el && this.toolbar.xtype) {
+        this.wrapEl = this.el.wrap();    
+        this.toolbar = new Roo.Toolbar(this.el.insertSibling(false, 'before'), [] , this.toolbar);
+        
+    }
+    
+    
+    
+    if(this.resizeEl){
+        this.resizeEl = Roo.get(this.resizeEl, true);
+    }else{
+        this.resizeEl = this.el;
+    }
+    this.addEvents({
+        /**
+         * @event activate
+         * Fires when this panel is activated. 
+         * @param {Roo.ContentPanel} this
+         */
+        "activate" : true,
+        /**
+         * @event deactivate
+         * Fires when this panel is activated. 
+         * @param {Roo.ContentPanel} this
+         */
+        "deactivate" : true,
+
+        /**
+         * @event resize
+         * Fires when this panel is resized if fitToFrame is true.
+         * @param {Roo.ContentPanel} this
+         * @param {Number} width The width after any component adjustments
+         * @param {Number} height The height after any component adjustments
+         */
+        "resize" : true
+    });
+    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){
+        this.setContent(content);
+    }
+    if(config && config.url){
+        this.setUrl(this.url, this.params, this.loadOnce);
+    }
+    
+    
+    
+    Roo.ContentPanel.superclass.constructor.call(this);
+};
+
+Roo.extend(Roo.ContentPanel, Roo.util.Observable, {
+    tabTip:'',
+    setRegion : function(region){
+        this.region = region;
+        if(region){
+           this.el.replaceClass("x-layout-inactive-content", "x-layout-active-content");
+        }else{
+           this.el.replaceClass("x-layout-active-content", "x-layout-inactive-content");
+        } 
+    },
+    
+    /**
+     * Returns the toolbar for this Panel if one was configured. 
+     * @return {Roo.Toolbar} 
+     */
+    getToolbar : function(){
+        return this.toolbar;
+    },
+    
+    setActiveState : function(active){
+        this.active = active;
+        if(!active){
+            this.fireEvent("deactivate", this);
+        }else{
+            this.fireEvent("activate", this);
+        }
+    },
+    /**
+     * Updates this panel's element
+     * @param {String} content The new content
+     * @param {Boolean} loadScripts (optional) true to look for and process scripts
+    */
+    setContent : function(content, loadScripts){
+        this.el.update(content, loadScripts);
+    },
+
+    ignoreResize : function(w, h){
+        if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
+            return true;
+        }else{
+            this.lastSize = {width: w, height: h};
+            return false;
+        }
+    },
+    /**
+     * Get the {@link Roo.UpdateManager} for this panel. Enables you to perform Ajax updates.
+     * @return {Roo.UpdateManager} The UpdateManager
+     */
+    getUpdateManager : function(){
+        return this.el.getUpdateManager();
+    },
+     /**
+     * Loads this content panel immediately with content from XHR. Note: to delay loading until the panel is activated, use {@link #setUrl}.
+     * @param {Object/String/Function} url The url for this request or a function to call to get the url or a config object containing any of the following options:
+<pre><code>
+panel.load({
+    url: "your-url.php",
+    params: {param1: "foo", param2: "bar"}, // or a URL encoded string
+    callback: yourFunction,
+    scope: yourObject, //(optional scope)
+    discardUrl: false,
+    nocache: false,
+    text: "Loading...",
+    timeout: 30,
+    scripts: false
+});
+</code></pre>
+     * The only required property is <i>url</i>. The optional properties <i>nocache</i>, <i>text</i> and <i>scripts</i>
+     * are shorthand for <i>disableCaching</i>, <i>indicatorText</i> and <i>loadScripts</i> and are used to set their associated property on this panel UpdateManager instance.
+     * @param {String/Object} params (optional) The parameters to pass as either a URL encoded string "param1=1&amp;param2=2" or an object {param1: 1, param2: 2}
+     * @param {Function} callback (optional) Callback when transaction is complete -- called with signature (oElement, bSuccess, oResponse)
+     * @param {Boolean} discardUrl (optional) By default when you execute an update the defaultUrl is changed to the last used URL. If true, it will not store the URL.
+     * @return {Roo.ContentPanel} this
+     */
+    load : function(){
+        var um = this.el.getUpdateManager();
+        um.update.apply(um, arguments);
+        return this;
+    },
+
+
+    /**
+     * Set a URL to be used to load the content for this panel. When this panel is activated, the content will be loaded from that URL.
+     * @param {String/Function} url The URL to load the content from or a function to call to get the URL
+     * @param {String/Object} params (optional) The string params for the update call or an object of the params. See {@link Roo.UpdateManager#update} for more details. (Defaults to null)
+     * @param {Boolean} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this panel is activated. (Defaults to false)
+     * @return {Roo.UpdateManager} The UpdateManager
+     */
+    setUrl : function(url, params, loadOnce){
+        if(this.refreshDelegate){
+            this.removeListener("activate", this.refreshDelegate);
+        }
+        this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
+        this.on("activate", this.refreshDelegate);
+        return this.el.getUpdateManager();
+    },
+    
+    _handleRefresh : function(url, params, loadOnce){
+        if(!loadOnce || !this.loaded){
+            var updater = this.el.getUpdateManager();
+            updater.update(url, params, this._setLoaded.createDelegate(this));
+        }
+    },
+    
+    _setLoaded : function(){
+        this.loaded = true;
+    }, 
+    
+    /**
+     * Returns this panel's id
+     * @return {String} 
+     */
+    getId : function(){
+        return this.el.id;
+    },
+    
+    /** 
+     * Returns this panel's element - used by regiosn to add.
+     * @return {Roo.Element} 
+     */
+    getEl : function(){
+        return this.wrapEl || this.el;
+    },
+    
+    adjustForComponents : function(width, height){
+        if(this.resizeEl != this.el){
+            width -= this.el.getFrameWidth('lr');
+            height -= this.el.getFrameWidth('tb');
+        }
+        if(this.toolbar){
+            var te = this.toolbar.getEl();
+            height -= te.getHeight();
+            te.setWidth(width);
+        }
+        if(this.adjustments){
+            width += this.adjustments[0];
+            height += this.adjustments[1];
+        }
+        return {"width": width, "height": height};
+    },
+    
+    setSize : function(width, height){
+        if(this.fitToFrame && !this.ignoreResize(width, height)){
+            if(this.fitContainer && this.resizeEl != this.el){
+                this.el.setSize(width, height);
+            }
+            var size = this.adjustForComponents(width, height);
+            this.resizeEl.setSize(this.autoWidth ? "auto" : size.width, this.autoHeight ? "auto" : size.height);
+            this.fireEvent('resize', this, size.width, size.height);
+        }
+    },
+    
+    /**
+     * Returns this panel's title
+     * @return {String} 
+     */
+    getTitle : function(){
+        return this.title;
+    },
+    
+    /**
+     * Set this panel's title
+     * @param {String} title
+     */
+    setTitle : function(title){
+        this.title = title;
+        if(this.region){
+            this.region.updatePanelTitle(this, title);
+        }
+    },
+    
+    /**
+     * Returns true is this panel was configured to be closable
+     * @return {Boolean} 
+     */
+    isClosable : function(){
+        return this.closable;
+    },
+    
+    beforeSlide : function(){
+        this.el.clip();
+        this.resizeEl.clip();
+    },
+    
+    afterSlide : function(){
+        this.el.unclip();
+        this.resizeEl.unclip();
+    },
+    
+    /**
+     *   Force a content refresh from the URL specified in the {@link #setUrl} method.
+     *   Will fail silently if the {@link #setUrl} method has not been called.
+     *   This does not activate the panel, just updates its content.
+     */
+    refresh : function(){
+        if(this.refreshDelegate){
+           this.loaded = false;
+           this.refreshDelegate();
+        }
+    },
+    
+    /**
+     * Destroys this panel
+     */
+    destroy : function(){
+        this.el.removeAllListeners();
+        var tempEl = document.createElement("span");
+        tempEl.appendChild(this.el.dom);
+        tempEl.innerHTML = "";
+        this.el.remove();
+        this.el = null;
+    },
+    
+      /**
+     * Adds a xtype elements to the panel - currently only supports Forms, View, JsonView.
+     * <pre><code>
+
+layout.addxtype({
+       xtype : 'Form',
+       items: [ .... ]
+   }
+);
+
+</code></pre>
+     * @param {Object} cfg Xtype definition of item to add.
+     */
+    
+    addxtype : function(cfg) {
+        // add form..
+        if (cfg.xtype.match(/^Form$/)) {
+            var el = this.el.createChild();
+
+            this.form = new  Roo.form.Form(cfg);
+            
+            
+            if ( this.form.allItems.length) this.form.render(el.dom);
+            return this.form;
+        }
+        if (['View', 'JsonView'].indexOf(cfg.xtype) > -1) {
+            // views..
+            cfg.el = this.el.appendChild(document.createElement("div"));
+            // factory?
+            var ret = new Roo[cfg.xtype](cfg);
+            ret.render(false, ''); // render blank..
+            return ret;
+            
+        }
+        return false;
+        
+    }
+});
+
+/**
+ * @class Roo.GridPanel
+ * @extends Roo.ContentPanel
+ * @constructor
+ * Create a new GridPanel.
+ * @param {Roo.grid.Grid} grid The grid for this panel
+ * @param {String/Object} config A string to set only the panel's title, or a config object
+ */
+Roo.GridPanel = function(grid, config){
+    
+  
+    this.wrapper = Roo.DomHelper.append(document.body, // wrapper for IE7 strict & safari scroll issue
+        {tag: "div", cls: "x-layout-grid-wrapper x-layout-inactive-content"}, true);
+        
+    this.wrapper.dom.appendChild(grid.getGridEl().dom);
+    
+    Roo.GridPanel.superclass.constructor.call(this, this.wrapper, config);
+    
+    if(this.toolbar){
+        this.toolbar.el.insertBefore(this.wrapper.dom.firstChild);
+    }
+    // xtype created footer. - not sure if will work as we normally have to render first..
+    if (this.footer && !this.footer.el && this.footer.xtype) {
+        
+        this.footer.container = this.grid.getView().getFooterPanel(true);
+        this.footer.dataSource = this.grid.dataSource;
+        this.footer = Roo.factory(this.footer, Roo);
+        
+    }
+    
+    grid.monitorWindowResize = false; // turn off autosizing
+    grid.autoHeight = false;
+    grid.autoWidth = false;
+    this.grid = grid;
+    this.grid.getGridEl().replaceClass("x-layout-inactive-content", "x-layout-component-panel");
+};
+
+Roo.extend(Roo.GridPanel, Roo.ContentPanel, {
+    getId : function(){
+        return this.grid.id;
+    },
+    
+    /**
+     * Returns the grid for this panel
+     * @return {Roo.grid.Grid} 
+     */
+    getGrid : function(){
+        return this.grid;    
+    },
+    
+    setSize : function(width, height){
+        if(!this.ignoreResize(width, height)){
+            var grid = this.grid;
+            var size = this.adjustForComponents(width, height);
+            grid.getGridEl().setSize(size.width, size.height);
+            grid.autoSize();
+        }
+    },
+    
+    beforeSlide : function(){
+        this.grid.getView().scroller.clip();
+    },
+    
+    afterSlide : function(){
+        this.grid.getView().scroller.unclip();
+    },
+    
+    destroy : function(){
+        this.grid.destroy();
+        delete this.grid;
+        Roo.GridPanel.superclass.destroy.call(this); 
+    }
+});
+
+
+/**
+ * @class Roo.NestedLayoutPanel
+ * @extends Roo.ContentPanel
+ * @constructor
+ * Create a new NestedLayoutPanel.
+ * 
+ * 
+ * @param {Roo.BorderLayout} layout The layout for this panel
+ * @param {String/Object} config A string to set only the title or a config object
+ */
+Roo.NestedLayoutPanel = function(layout, config)
+{
+    // construct with only one argument..
+    /* FIXME - implement nicer consturctors
+    if (layout.layout) {
+        config = layout;
+        layout = config.layout;
+        delete config.layout;
+    }
+    if (layout.xtype && !layout.getEl) {
+        // then layout needs constructing..
+        layout = Roo.factory(layout, Roo);
+    }
+    */
+    
+    
+    Roo.NestedLayoutPanel.superclass.constructor.call(this, layout.getEl(), config);
+    
+    layout.monitorWindowResize = false; // turn off autosizing
+    this.layout = layout;
+    this.layout.getEl().addClass("x-layout-nested-layout");
+    
+    
+    
+    
+};
+
+Roo.extend(Roo.NestedLayoutPanel, Roo.ContentPanel, {
+
+    setSize : function(width, height){
+        if(!this.ignoreResize(width, height)){
+            var size = this.adjustForComponents(width, height);
+            var el = this.layout.getEl();
+            el.setSize(size.width, size.height);
+            var touch = el.dom.offsetWidth;
+            this.layout.layout();
+            // ie requires a double layout on the first pass
+            if(Roo.isIE && !this.initialized){
+                this.initialized = true;
+                this.layout.layout();
+            }
+        }
+    },
+    
+    // activate all subpanels if not currently active..
+    
+    setActiveState : function(active){
+        this.active = active;
+        if(!active){
+            this.fireEvent("deactivate", this);
+            return;
+        }
+        
+        this.fireEvent("activate", this);
+        // not sure if this should happen before or after..
+        if (!this.layout) {
+            return; // should not happen..
+        }
+        var reg = false;
+        for (var r in this.layout.regions) {
+            reg = this.layout.getRegion(r);
+            if (reg.getActivePanel()) {
+                //reg.showPanel(reg.getActivePanel()); // force it to activate.. 
+                reg.setActivePanel(reg.getActivePanel());
+                continue;
+            }
+            if (!reg.panels.length) {
+                continue;
+            }
+            reg.showPanel(reg.getPanel(0));
+        }
+        
+        
+        
+        
+    },
+    
+    /**
+     * Returns the nested BorderLayout for this panel
+     * @return {Roo.BorderLayout} 
+     */
+    getLayout : function(){
+        return this.layout;
+    },
+    
+     /**
+     * Adds a xtype elements to the layout of the nested panel
+     * <pre><code>
+
+panel.addxtype({
+       xtype : 'ContentPanel',
+       region: 'west',
+       items: [ .... ]
+   }
+);
+
+panel.addxtype({
+        xtype : 'NestedLayoutPanel',
+        region: 'west',
+        layout: {
+           center: { },
+           west: { }   
+        },
+        items : [ ... list of content panels or nested layout panels.. ]
+   }
+);
+</code></pre>
+     * @param {Object} cfg Xtype definition of item to add.
+     */
+    addxtype : function(cfg) {
+        return this.layout.addxtype(cfg);
+    
+    }
+});
+
+Roo.ScrollPanel = function(el, config, content){
+    config = config || {};
+    config.fitToFrame = true;
+    Roo.ScrollPanel.superclass.constructor.call(this, el, config, content);
+    
+    this.el.dom.style.overflow = "hidden";
+    var wrap = this.el.wrap({cls: "x-scroller x-layout-inactive-content"});
+    this.el.removeClass("x-layout-inactive-content");
+    this.el.on("mousewheel", this.onWheel, this);
+
+    var up = wrap.createChild({cls: "x-scroller-up", html: "&#160;"}, this.el.dom);
+    var down = wrap.createChild({cls: "x-scroller-down", html: "&#160;"});
+    up.unselectable(); down.unselectable();
+    up.on("click", this.scrollUp, this);
+    down.on("click", this.scrollDown, this);
+    up.addClassOnOver("x-scroller-btn-over");
+    down.addClassOnOver("x-scroller-btn-over");
+    up.addClassOnClick("x-scroller-btn-click");
+    down.addClassOnClick("x-scroller-btn-click");
+    this.adjustments = [0, -(up.getHeight() + down.getHeight())];
+
+    this.resizeEl = this.el;
+    this.el = wrap; this.up = up; this.down = down;
+};
+
+Roo.extend(Roo.ScrollPanel, Roo.ContentPanel, {
+    increment : 100,
+    wheelIncrement : 5,
+    scrollUp : function(){
+        this.resizeEl.scroll("up", this.increment, {callback: this.afterScroll, scope: this});
+    },
+
+    scrollDown : function(){
+        this.resizeEl.scroll("down", this.increment, {callback: this.afterScroll, scope: this});
+    },
+
+    afterScroll : function(){
+        var el = this.resizeEl;
+        var t = el.dom.scrollTop, h = el.dom.scrollHeight, ch = el.dom.clientHeight;
+        this.up[t == 0 ? "addClass" : "removeClass"]("x-scroller-btn-disabled");
+        this.down[h - t <= ch ? "addClass" : "removeClass"]("x-scroller-btn-disabled");
+    },
+
+    setSize : function(){
+        Roo.ScrollPanel.superclass.setSize.apply(this, arguments);
+        this.afterScroll();
+    },
+
+    onWheel : function(e){
+        var d = e.getWheelDelta();
+        this.resizeEl.dom.scrollTop -= (d*this.wheelIncrement);
+        this.afterScroll();
+        e.stopEvent();
+    },
+
+    setContent : function(content, loadScripts){
+        this.resizeEl.update(content, loadScripts);
+    }
+
+});
+
+
+
+
+
+
+
+
+
+/**
+ * @class Roo.TreePanel
+ * @extends Roo.ContentPanel
+ * @constructor
+ * Create a new TreePanel. - defaults to fit/scoll contents.
+ * @param {String/Object} config A string to set only the panel's title, or a config object
+ * @cfg {Roo.tree.TreePanel} tree The tree TreePanel, with config etc.
+ */
+Roo.TreePanel = function(config){
+    var el = config.el;
+    var tree = config.tree;
+    delete config.tree; 
+    delete config.el; // hopefull!
+    
+    // wrapper for IE7 strict & safari scroll issue
+    
+    var treeEl = el.createChild();
+    config.resizeEl = treeEl;
+    
+    
+    
+    Roo.TreePanel.superclass.constructor.call(this, el, config);
+ 
+ 
+    this.tree = new Roo.tree.TreePanel(treeEl , tree);
+    //console.log(tree);
+    this.on('activate', function()
+    {
+        if (this.tree.rendered) {
+            return;
+        }
+        //console.log('render tree');
+        this.tree.render();
+    });
+    
+    this.on('resize',  function (cp, w, h) {
+            this.tree.innerCt.setWidth(w);
+            this.tree.innerCt.setHeight(h);
+            this.tree.innerCt.setStyle('overflow-y', 'auto');
+    });
+
+        
+    
+};
+
+Roo.extend(Roo.TreePanel, Roo.ContentPanel, {   
+    fitToFrame : true,
+    autoScroll : true
+});
+
+
+
+
+
+
+
+
+
+
+
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+
+/**
+ * @class Roo.ReaderLayout
+ * @extends Roo.BorderLayout
+ * This is a pre-built layout that represents a classic, 5-pane application.  It consists of a header, a primary
+ * center region containing two nested regions (a top one for a list view and one for item preview below),
+ * and regions on either side that can be used for navigation, application commands, informational displays, etc.
+ * The setup and configuration work exactly the same as it does for a {@link Roo.BorderLayout} - this class simply
+ * expedites the setup of the overall layout and regions for this common application style.
+ * Example:
+ <pre><code>
+var reader = new Roo.ReaderLayout();
+var CP = Roo.ContentPanel;  // shortcut for adding
+
+reader.beginUpdate();
+reader.add("north", new CP("north", "North"));
+reader.add("west", new CP("west", {title: "West"}));
+reader.add("east", new CP("east", {title: "East"}));
+
+reader.regions.listView.add(new CP("listView", "List"));
+reader.regions.preview.add(new CP("preview", "Preview"));
+reader.endUpdate();
+</code></pre>
+* @constructor
+* Create a new ReaderLayout
+* @param {Object} config Configuration options
+* @param {String/HTMLElement/Element} container (optional) The container this layout is bound to (defaults to
+* document.body if omitted)
+*/
+Roo.ReaderLayout = function(config, renderTo){
+    var c = config || {size:{}};
+    Roo.ReaderLayout.superclass.constructor.call(this, renderTo || document.body, {
+        north: c.north !== false ? Roo.apply({
+            split:false,
+            initialSize: 32,
+            titlebar: false
+        }, c.north) : false,
+        west: c.west !== false ? Roo.apply({
+            split:true,
+            initialSize: 200,
+            minSize: 175,
+            maxSize: 400,
+            titlebar: true,
+            collapsible: true,
+            animate: true,
+            margins:{left:5,right:0,bottom:5,top:5},
+            cmargins:{left:5,right:5,bottom:5,top:5}
+        }, c.west) : false,
+        east: c.east !== false ? Roo.apply({
+            split:true,
+            initialSize: 200,
+            minSize: 175,
+            maxSize: 400,
+            titlebar: true,
+            collapsible: true,
+            animate: true,
+            margins:{left:0,right:5,bottom:5,top:5},
+            cmargins:{left:5,right:5,bottom:5,top:5}
+        }, c.east) : false,
+        center: Roo.apply({
+            tabPosition: 'top',
+            autoScroll:false,
+            closeOnTab: true,
+            titlebar:false,
+            margins:{left:c.west!==false ? 0 : 5,right:c.east!==false ? 0 : 5,bottom:5,top:2}
+        }, c.center)
+    });
+
+    this.el.addClass('x-reader');
+
+    this.beginUpdate();
+
+    var inner = new Roo.BorderLayout(Roo.get(document.body).createChild(), {
+        south: c.preview !== false ? Roo.apply({
+            split:true,
+            initialSize: 200,
+            minSize: 100,
+            autoScroll:true,
+            collapsible:true,
+            titlebar: true,
+            cmargins:{top:5,left:0, right:0, bottom:0}
+        }, c.preview) : false,
+        center: Roo.apply({
+            autoScroll:false,
+            titlebar:false,
+            minHeight:200
+        }, c.listView)
+    });
+    this.add('center', new Roo.NestedLayoutPanel(inner,
+            Roo.apply({title: c.mainTitle || '',tabTip:''},c.innerPanelCfg)));
+
+    this.endUpdate();
+
+    this.regions.preview = inner.getRegion('south');
+    this.regions.listView = inner.getRegion('center');
+};
+
+Roo.extend(Roo.ReaderLayout, Roo.BorderLayout);/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+/**
+ * @class Roo.grid.Grid
+ * @extends Roo.util.Observable
+ * This class represents the primary interface of a component based grid control.
+ * <br><br>Usage:<pre><code>
+ var grid = new Roo.grid.Grid("my-container-id", {
+     ds: myDataStore,
+     cm: myColModel,
+     selModel: mySelectionModel,
+     autoSizeColumns: true,
+     monitorWindowResize: false,
+     trackMouseOver: true
+ });
+ // set any options
+ grid.render();
+ * </code></pre>
+ * <b>Common Problems:</b><br/>
+ * - Grid does not resize properly when going smaller: Setting overflow hidden on the container
+ * element will correct this<br/>
+ * - If you get el.style[camel]= NaNpx or -2px or something related, be certain you have given your container element
+ * dimensions. The grid adapts to your container's size, if your container has no size defined then the results
+ * are unpredictable.<br/>
+ * - Do not render the grid into an element with display:none. Try using visibility:hidden. Otherwise there is no way for the
+ * grid to calculate dimensions/offsets.<br/>
+  * @constructor
+ * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
+ * The container MUST have some type of size defined for the grid to fill. The container will be
+ * automatically set to position relative if it isn't already.
+ * @param {Object} config A config object that sets properties on this grid.
+ */
+Roo.grid.Grid = function(container, config){
+	// initialize the container
+	this.container = Roo.get(container);
+	this.container.update("");
+	this.container.setStyle("overflow", "hidden");
+    this.container.addClass('x-grid-container');
+
+    this.id = this.container.id;
+
+    Roo.apply(this, config);
+    // check and correct shorthanded configs
+    if(this.ds){
+        this.dataSource = this.ds;
+        delete this.ds;
+    }
+    if(this.cm){
+        this.colModel = this.cm;
+        delete this.cm;
+    }
+    if(this.sm){
+        this.selModel = this.sm;
+        delete this.sm;
+    }
+
+    if (this.selModel) {
+        this.selModel = Roo.factory(this.selModel, Roo.grid);
+        this.sm = this.selModel;
+        this.sm.xmodule = this.xmodule || false;
+    }
+    if (typeof(this.colModel.config) == 'undefined') {
+        this.colModel = new Roo.grid.ColumnModel(this.colModel);
+        this.cm = this.colModel;
+        this.cm.xmodule = this.xmodule || false;
+    }
+    if (this.dataSource) {
+        this.dataSource= Roo.factory(this.dataSource, Roo.data);
+        this.ds = this.dataSource;
+        this.ds.xmodule = this.xmodule || false;
+        
+    }
+    
+    
+    
+    if(this.width){
+        this.container.setWidth(this.width);
+    }
+
+    if(this.height){
+        this.container.setHeight(this.height);
+    }
+    /** @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,
+
+        // 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 cellcontextmenu
+         * Fires when a cell is right clicked
+         * @param {Grid} this
+         * @param {Number} rowIndex
+         * @param {Number} cellIndex
+         * @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 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
+    });
+
+    Roo.grid.Grid.superclass.constructor.call(this);
+};
+Roo.extend(Roo.grid.Grid, Roo.util.Observable, {
+    
+    /**
+     * @cfg {String} ddGroup - drag drop group.
+	 */
+    
+    /**
+     * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Default is 25.
+	 */
+	minColumnWidth : 25,
+
+    /**
+	 * @cfg {Boolean} autoSizeColumns True to automatically resize the columns to fit their content
+	 * <b>on initial render.</b> It is more efficient to explicitly size the columns
+	 * through the ColumnModel's {@link Roo.grid.ColumnModel#width} config option.  Default is false.
+	 */
+	autoSizeColumns : false,
+
+	/**
+	 * @cfg {Boolean} autoSizeHeaders True to measure headers with column data when auto sizing columns. Default is true.
+	 */
+	autoSizeHeaders : true,
+
+	/**
+	 * @cfg {Boolean} monitorWindowResize True to autoSize the grid when the window resizes. Default is true.
+	 */
+	monitorWindowResize : true,
+
+	/**
+	 * @cfg {Boolean} maxRowsToMeasure If autoSizeColumns is on, maxRowsToMeasure can be used to limit the number of
+	 * rows measured to get a columns size. Default is 0 (all rows).
+	 */
+	maxRowsToMeasure : 0,
+
+	/**
+	 * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is true.
+	 */
+	trackMouseOver : true,
+
+    /**
+	 * @cfg {Boolean} enableDrag  True to enable drag of rows. Default is false. (double check if this is needed?)
+	 */
+    
+	/**
+	 * @cfg {Boolean} enableDragDrop True to enable drag and drop of rows. Default is false.
+	 */
+	enableDragDrop : false,
+
+	/**
+	 * @cfg {Boolean} enableColumnMove True to enable drag and drop reorder of columns. Default is true.
+	 */
+	enableColumnMove : true,
+
+	/**
+	 * @cfg {Boolean} enableColumnHide True to enable hiding of columns with the header context menu. Default is true.
+	 */
+	enableColumnHide : true,
+
+	/**
+	 * @cfg {Boolean} enableRowHeightSync True to manually sync row heights across locked and not locked rows. Default is false.
+	 */
+	enableRowHeightSync : false,
+
+	/**
+	 * @cfg {Boolean} stripeRows True to stripe the rows.  Default is true.
+	 */
+	stripeRows : true,
+
+	/**
+	 * @cfg {Boolean} autoHeight True to fit the height of the grid container to the height of the data. Default is false.
+	 */
+	autoHeight : false,
+
+    /**
+     * @cfg {String} autoExpandColumn The id (or dataIndex) of a column in this grid that should expand to fill unused space. This id can not be 0. Default is false.
+     */
+    autoExpandColumn : false,
+
+    /**
+    * @cfg {Number} autoExpandMin The minimum width the autoExpandColumn can have (if enabled).
+    * Default is 50.
+    */
+    autoExpandMin : 50,
+
+    /**
+    * @cfg {Number} autoExpandMax The maximum width the autoExpandColumn can have (if enabled). Default is 1000.
+    */
+    autoExpandMax : 1000,
+
+    /**
+	 * @cfg {Object} view The {@link Roo.grid.GridView} used by the grid. This can be set before a call to render().
+	 */
+	view : null,
+
+	/**
+     * @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,
+
+    /**
+    * @cfg {Boolean} autoWidth True to set the grid's width to the default total width of the grid's columns instead
+    * of a fixed width. Default is false.
+    */
+    /**
+    * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if autoHeight is not on.
+    */
+    /**
+     * Called once after all setup has been completed and the grid is ready to be rendered.
+     * @return {Roo.grid.Grid} this
+     */
+    render : function(){
+        var c = this.container;
+        // try to detect autoHeight/width mode
+        if((!c.dom.offsetHeight || c.dom.offsetHeight < 20) || c.getStyle("height") == "auto"){
+    	    this.autoHeight = true;
+    	}
+    	var view = this.getView();
+        view.init(this);
+
+        c.on("click", this.onClick, this);
+        c.on("dblclick", this.onDblClick, this);
+        c.on("contextmenu", this.onContextMenu, this);
+        c.on("keydown", this.onKeyDown, this);
+
+        this.relayEvents(c, ["mousedown","mouseup","mouseover","mouseout","keypress"]);
+
+        this.getSelectionModel().init(this);
+
+        view.render();
+
+        if(this.loadMask){
+            this.loadMask = new Roo.LoadMask(this.container,
+                    Roo.apply({store:this.dataSource}, this.loadMask));
+        }
+        
+        
+        if (this.toolbar && this.toolbar.xtype) {
+            this.toolbar.container = this.getView().getHeaderPanel(true);
+            this.toolbar = new Ext.Toolbar(this.toolbar);
+        }
+        if (this.footer && this.footer.xtype) {
+            this.footer.dataSource = this.getDataSource();
+            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;
+    },
+
+	/**
+	 * Reconfigures the grid to use a different Store and Column Model.
+	 * The View will be bound to the new objects and refreshed.
+	 * @param {Roo.data.Store} dataSource The new {@link Roo.data.Store} object
+	 * @param {Roo.grid.ColumnModel} The new {@link Roo.grid.ColumnModel} object
+	 */
+    reconfigure : function(dataSource, colModel){
+        if(this.loadMask){
+            this.loadMask.destroy();
+            this.loadMask = new Roo.LoadMask(this.container,
+                    Roo.apply({store:dataSource}, this.loadMask));
+        }
+        this.view.bind(dataSource, colModel);
+        this.dataSource = dataSource;
+        this.colModel = colModel;
+        this.view.refresh(true);
+    },
+
+    // private
+    onKeyDown : function(e){
+        this.fireEvent("keydown", e);
+    },
+
+    /**
+     * Destroy this grid.
+     * @param {Boolean} removeEl True to remove the element
+     */
+    destroy : function(removeEl, keepListeners){
+        if(this.loadMask){
+            this.loadMask.destroy();
+        }
+        var c = this.container;
+        c.removeAllListeners();
+        this.view.destroy();
+        this.colModel.purgeListeners();
+        if(!keepListeners){
+            this.purgeListeners();
+        }
+        c.update("");
+        if(removeEl === true){
+            c.remove();
+        }
+    },
+
+    // private
+    processEvent : function(name, e){
+        this.fireEvent(name, e);
+        var t = e.getTarget();
+        var v = this.view;
+        var header = v.findHeaderIndex(t);
+        if(header !== false){
+            this.fireEvent("header" + name, this, header, e);
+        }else{
+            var row = v.findRowIndex(t);
+            var cell = v.findCellIndex(t);
+            if(row !== false){
+                this.fireEvent("row" + name, this, row, e);
+                if(cell !== false){
+                    this.fireEvent("cell" + name, this, row, cell, e);
+                }
+            }
+        }
+    },
+
+    // private
+    onClick : function(e){
+        this.processEvent("click", e);
+    },
+
+    // private
+    onContextMenu : function(e, t){
+        this.processEvent("contextmenu", e);
+    },
+
+    // private
+    onDblClick : function(e){
+        this.processEvent("dblclick", e);
+    },
+
+    // private
+    walkCells : function(row, col, step, fn, scope){
+        var cm = this.colModel, clen = cm.getColumnCount();
+        var ds = this.dataSource, rlen = ds.getCount(), first = true;
+        if(step < 0){
+            if(col < 0){
+                row--;
+                first = false;
+            }
+            while(row >= 0){
+                if(!first){
+                    col = clen-1;
+                }
+                first = false;
+                while(col >= 0){
+                    if(fn.call(scope || this, row, col, cm) === true){
+                        return [row, col];
+                    }
+                    col--;
+                }
+                row--;
+            }
+        } else {
+            if(col >= clen){
+                row++;
+                first = false;
+            }
+            while(row < rlen){
+                if(!first){
+                    col = 0;
+                }
+                first = false;
+                while(col < clen){
+                    if(fn.call(scope || this, row, col, cm) === true){
+                        return [row, col];
+                    }
+                    col++;
+                }
+                row++;
+            }
+        }
+        return null;
+    },
+
+    // private
+    getSelections : function(){
+        return this.selModel.getSelections();
+    },
+
+    /**
+     * Causes the grid to manually recalculate its dimensions. Generally this is done automatically,
+     * but if manual update is required this method will initiate it.
+     */
+    autoSize : function(){
+        if(this.rendered){
+            this.view.layout();
+            if(this.view.adjustForScroll){
+                this.view.adjustForScroll();
+            }
+        }
+    },
+
+    /**
+     * Returns the grid's underlying element.
+     * @return {Element} The element
+     */
+    getGridEl : function(){
+        return this.container;
+    },
+
+    // private for compatibility, overridden by editor grid
+    stopEditing : function(){},
+
+    /**
+     * Returns the grid's SelectionModel.
+     * @return {SelectionModel}
+     */
+    getSelectionModel : function(){
+        if(!this.selModel){
+            this.selModel = new Roo.grid.RowSelectionModel();
+        }
+        return this.selModel;
+    },
+
+    /**
+     * Returns the grid's DataSource.
+     * @return {DataSource}
+     */
+    getDataSource : function(){
+        return this.dataSource;
+    },
+
+    /**
+     * Returns the grid's ColumnModel.
+     * @return {ColumnModel}
+     */
+    getColumnModel : function(){
+        return this.colModel;
+    },
+
+    /**
+     * Returns the grid's GridView object.
+     * @return {GridView}
+     */
+    getView : function(){
+        if(!this.view){
+            this.view = new Roo.grid.GridView(this.viewConfig);
+        }
+        return this.view;
+    },
+    /**
+     * Called to get grid's drag proxy text, by default returns this.ddText.
+     * @return {String}
+     */
+    getDragDropText : function(){
+        var count = this.selModel.getCount();
+        return String.format(this.ddText, count, count == 1 ? '' : 's');
+    }
+});
+/**
+ * Configures the text is the drag proxy (defaults to "%0 selected row(s)").
+ * %0 is replaced with the number of selected rows.
+ * @type String
+ */
+Roo.grid.Grid.prototype.ddText = "{0} selected row{1}";/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+Roo.grid.AbstractGridView = function(){
+	this.grid = null;
+	
+	this.events = {
+	    "beforerowremoved" : true,
+	    "beforerowsinserted" : true,
+	    "beforerefresh" : true,
+	    "rowremoved" : true,
+	    "rowsinserted" : true,
+	    "rowupdated" : true,
+	    "refresh" : true
+	};
+    Roo.grid.AbstractGridView.superclass.constructor.call(this);
+};
+
+Roo.extend(Roo.grid.AbstractGridView, Roo.util.Observable, {
+    rowClass : "x-grid-row",
+    cellClass : "x-grid-cell",
+    tdClass : "x-grid-td",
+    hdClass : "x-grid-hd",
+    splitClass : "x-grid-hd-split",
+    
+	init: function(grid){
+        this.grid = grid;
+		var cid = this.grid.getGridEl().id;
+        this.colSelector = "#" + cid + " ." + this.cellClass + "-";
+        this.tdSelector = "#" + cid + " ." + this.tdClass + "-";
+        this.hdSelector = "#" + cid + " ." + this.hdClass + "-";
+        this.splitSelector = "#" + cid + " ." + this.splitClass + "-";
+	},
+	
+	getColumnRenderers : function(){
+    	var renderers = [];
+    	var cm = this.grid.colModel;
+        var colCount = cm.getColumnCount();
+        for(var i = 0; i < colCount; i++){
+            renderers[i] = cm.getRenderer(i);
+        }
+        return renderers;
+    },
+    
+    getColumnIds : function(){
+    	var ids = [];
+    	var cm = this.grid.colModel;
+        var colCount = cm.getColumnCount();
+        for(var i = 0; i < colCount; i++){
+            ids[i] = cm.getColumnId(i);
+        }
+        return ids;
+    },
+    
+    getDataIndexes : function(){
+    	if(!this.indexMap){
+            this.indexMap = this.buildIndexMap();
+        }
+        return this.indexMap.colToData;
+    },
+    
+    getColumnIndexByDataIndex : function(dataIndex){
+        if(!this.indexMap){
+            this.indexMap = this.buildIndexMap();
+        }
+    	return this.indexMap.dataToCol[dataIndex];
+    },
+    
+    /**
+     * Set a css style for a column dynamically. 
+     * @param {Number} colIndex The index of the column
+     * @param {String} name The css property name
+     * @param {String} value The css value
+     */
+    setCSSStyle : function(colIndex, name, value){
+        var selector = "#" + this.grid.id + " .x-grid-col-" + colIndex;
+        Roo.util.CSS.updateRule(selector, name, value);
+    },
+    
+    generateRules : function(cm){
+        var ruleBuf = [], rulesId = this.grid.id + '-cssrules';
+        Roo.util.CSS.removeStyleSheet(rulesId);
+        for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+            var cid = cm.getColumnId(i);
+            ruleBuf.push(this.colSelector, cid, " {\n", cm.config[i].css, "}\n",
+                         this.tdSelector, cid, " {\n}\n",
+                         this.hdSelector, cid, " {\n}\n",
+                         this.splitSelector, cid, " {\n}\n");
+        }
+        return Roo.util.CSS.createStyleSheet(ruleBuf.join(""), rulesId);
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+// private
+// This is a support class used internally by the Grid components
+Roo.grid.HeaderDragZone = function(grid, hd, hd2){
+    this.grid = grid;
+    this.view = grid.getView();
+    this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
+    Roo.grid.HeaderDragZone.superclass.constructor.call(this, hd);
+    if(hd2){
+        this.setHandleElId(Roo.id(hd));
+        this.setOuterHandleElId(Roo.id(hd2));
+    }
+    this.scroll = false;
+};
+Roo.extend(Roo.grid.HeaderDragZone, Roo.dd.DragZone, {
+    maxDragWidth: 120,
+    getDragData : function(e){
+        var t = Roo.lib.Event.getTarget(e);
+        var h = this.view.findHeaderCell(t);
+        if(h){
+            return {ddel: h.firstChild, header:h};
+        }
+        return false;
+    },
+
+    onInitDrag : function(e){
+        this.view.headersDisabled = true;
+        var clone = this.dragData.ddel.cloneNode(true);
+        clone.id = Roo.id();
+        clone.style.width = Math.min(this.dragData.header.offsetWidth,this.maxDragWidth) + "px";
+        this.proxy.update(clone);
+        return true;
+    },
+
+    afterValidDrop : function(){
+        var v = this.view;
+        setTimeout(function(){
+            v.headersDisabled = false;
+        }, 50);
+    },
+
+    afterInvalidDrop : function(){
+        var v = this.view;
+        setTimeout(function(){
+            v.headersDisabled = false;
+        }, 50);
+    }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+// private
+// This is a support class used internally by the Grid components
+Roo.grid.HeaderDropZone = function(grid, hd, hd2){
+    this.grid = grid;
+    this.view = grid.getView();
+    // split the proxies so they don't interfere with mouse events
+    this.proxyTop = Roo.DomHelper.append(document.body, {
+        cls:"col-move-top", html:"&#160;"
+    }, true);
+    this.proxyBottom = Roo.DomHelper.append(document.body, {
+        cls:"col-move-bottom", html:"&#160;"
+    }, true);
+    this.proxyTop.hide = this.proxyBottom.hide = function(){
+        this.setLeftTop(-100,-100);
+        this.setStyle("visibility", "hidden");
+    };
+    this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
+    // temporarily disabled
+    //Roo.dd.ScrollManager.register(this.view.scroller.dom);
+    Roo.grid.HeaderDropZone.superclass.constructor.call(this, grid.getGridEl().dom);
+};
+Roo.extend(Roo.grid.HeaderDropZone, Roo.dd.DropZone, {
+    proxyOffsets : [-4, -9],
+    fly: Roo.Element.fly,
+
+    getTargetFromEvent : function(e){
+        var t = Roo.lib.Event.getTarget(e);
+        var cindex = this.view.findCellIndex(t);
+        if(cindex !== false){
+            return this.view.getHeaderCell(cindex);
+        }
+    },
+
+    nextVisible : function(h){
+        var v = this.view, cm = this.grid.colModel;
+        h = h.nextSibling;
+        while(h){
+            if(!cm.isHidden(v.getCellIndex(h))){
+                return h;
+            }
+            h = h.nextSibling;
+        }
+        return null;
+    },
+
+    prevVisible : function(h){
+        var v = this.view, cm = this.grid.colModel;
+        h = h.prevSibling;
+        while(h){
+            if(!cm.isHidden(v.getCellIndex(h))){
+                return h;
+            }
+            h = h.prevSibling;
+        }
+        return null;
+    },
+
+    positionIndicator : function(h, n, e){
+        var x = Roo.lib.Event.getPageX(e);
+        var r = Roo.lib.Dom.getRegion(n.firstChild);
+        var px, pt, py = r.top + this.proxyOffsets[1];
+        if((r.right - x) <= (r.right-r.left)/2){
+            px = r.right+this.view.borderWidth;
+            pt = "after";
+        }else{
+            px = r.left;
+            pt = "before";
+        }
+        var oldIndex = this.view.getCellIndex(h);
+        var newIndex = this.view.getCellIndex(n);
+
+        if(this.grid.colModel.isFixed(newIndex)){
+            return false;
+        }
+
+        var locked = this.grid.colModel.isLocked(newIndex);
+
+        if(pt == "after"){
+            newIndex++;
+        }
+        if(oldIndex < newIndex){
+            newIndex--;
+        }
+        if(oldIndex == newIndex && (locked == this.grid.colModel.isLocked(oldIndex))){
+            return false;
+        }
+        px +=  this.proxyOffsets[0];
+        this.proxyTop.setLeftTop(px, py);
+        this.proxyTop.show();
+        if(!this.bottomOffset){
+            this.bottomOffset = this.view.mainHd.getHeight();
+        }
+        this.proxyBottom.setLeftTop(px, py+this.proxyTop.dom.offsetHeight+this.bottomOffset);
+        this.proxyBottom.show();
+        return pt;
+    },
+
+    onNodeEnter : function(n, dd, e, data){
+        if(data.header != n){
+            this.positionIndicator(data.header, n, e);
+        }
+    },
+
+    onNodeOver : function(n, dd, e, data){
+        var result = false;
+        if(data.header != n){
+            result = this.positionIndicator(data.header, n, e);
+        }
+        if(!result){
+            this.proxyTop.hide();
+            this.proxyBottom.hide();
+        }
+        return result ? this.dropAllowed : this.dropNotAllowed;
+    },
+
+    onNodeOut : function(n, dd, e, data){
+        this.proxyTop.hide();
+        this.proxyBottom.hide();
+    },
+
+    onNodeDrop : function(n, dd, e, data){
+        var h = data.header;
+        if(h != n){
+            var cm = this.grid.colModel;
+            var x = Roo.lib.Event.getPageX(e);
+            var r = Roo.lib.Dom.getRegion(n.firstChild);
+            var pt = (r.right - x) <= ((r.right-r.left)/2) ? "after" : "before";
+            var oldIndex = this.view.getCellIndex(h);
+            var newIndex = this.view.getCellIndex(n);
+            var locked = cm.isLocked(newIndex);
+            if(pt == "after"){
+                newIndex++;
+            }
+            if(oldIndex < newIndex){
+                newIndex--;
+            }
+            if(oldIndex == newIndex && (locked == cm.isLocked(oldIndex))){
+                return false;
+            }
+            cm.setLocked(oldIndex, locked, true);
+            cm.moveColumn(oldIndex, newIndex);
+            this.grid.fireEvent("columnmove", oldIndex, newIndex);
+            return true;
+        }
+        return false;
+    }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+  
+/**
+ * @class Roo.grid.GridView
+ * @extends Roo.util.Observable
+ *
+ * @constructor
+ * @param {Object} config
+ */
+Roo.grid.GridView = function(config){
+    Roo.grid.GridView.superclass.constructor.call(this);
+    this.el = null;
+
+    Roo.apply(this, config);
+};
+
+Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
+
+    /**
+     * Override this function to apply custom css classes to rows during rendering
+     * @param {Record} record The record
+     * @param {Number} index
+     * @method getRowClass
+     */
+    rowClass : "x-grid-row",
+
+    cellClass : "x-grid-col",
+
+    tdClass : "x-grid-td",
+
+    hdClass : "x-grid-hd",
+
+    splitClass : "x-grid-split",
+
+    sortClasses : ["sort-asc", "sort-desc"],
+
+    enableMoveAnim : false,
+
+    hlColor: "C3DAF9",
+
+    dh : Roo.DomHelper,
+
+    fly : Roo.Element.fly,
+
+    css : Roo.util.CSS,
+
+    borderWidth: 1,
+
+    splitOffset: 3,
+
+    scrollIncrement : 22,
+
+    cellRE: /(?:.*?)x-grid-(?:hd|cell|csplit)-(?:[\d]+)-([\d]+)(?:.*?)/,
+
+    findRE: /\s?(?:x-grid-hd|x-grid-col|x-grid-csplit)\s/,
+
+    bind : function(ds, cm){
+        if(this.ds){
+            this.ds.un("load", this.onLoad, this);
+            this.ds.un("datachanged", this.onDataChange, this);
+            this.ds.un("add", this.onAdd, this);
+            this.ds.un("remove", this.onRemove, this);
+            this.ds.un("update", this.onUpdate, this);
+            this.ds.un("clear", this.onClear, this);
+        }
+        if(ds){
+            ds.on("load", this.onLoad, this);
+            ds.on("datachanged", this.onDataChange, this);
+            ds.on("add", this.onAdd, this);
+            ds.on("remove", this.onRemove, this);
+            ds.on("update", this.onUpdate, this);
+            ds.on("clear", this.onClear, this);
+        }
+        this.ds = ds;
+
+        if(this.cm){
+            this.cm.un("widthchange", this.onColWidthChange, this);
+            this.cm.un("headerchange", this.onHeaderChange, this);
+            this.cm.un("hiddenchange", this.onHiddenChange, this);
+            this.cm.un("columnmoved", this.onColumnMove, this);
+            this.cm.un("columnlockchange", this.onColumnLock, this);
+        }
+        if(cm){
+            this.generateRules(cm);
+            cm.on("widthchange", this.onColWidthChange, this);
+            cm.on("headerchange", this.onHeaderChange, this);
+            cm.on("hiddenchange", this.onHiddenChange, this);
+            cm.on("columnmoved", this.onColumnMove, this);
+            cm.on("columnlockchange", this.onColumnLock, this);
+        }
+        this.cm = cm;
+    },
+
+    init: function(grid){
+		Roo.grid.GridView.superclass.init.call(this, grid);
+
+		this.bind(grid.dataSource, grid.colModel);
+
+	    grid.on("headerclick", this.handleHeaderClick, this);
+
+        if(grid.trackMouseOver){
+            grid.on("mouseover", this.onRowOver, this);
+	        grid.on("mouseout", this.onRowOut, this);
+	    }
+	    grid.cancelTextSelection = function(){};
+		this.gridId = grid.id;
+
+		var tpls = this.templates || {};
+
+		if(!tpls.master){
+		    tpls.master = new Roo.Template(
+		       '<div class="x-grid" hidefocus="true">',
+		          '<div class="x-grid-topbar"></div>',
+		          '<div class="x-grid-scroller"><div></div></div>',
+		          '<div class="x-grid-locked">',
+		              '<div class="x-grid-header">{lockedHeader}</div>',
+		              '<div class="x-grid-body">{lockedBody}</div>',
+		          "</div>",
+		          '<div class="x-grid-viewport">',
+		              '<div class="x-grid-header">{header}</div>',
+		              '<div class="x-grid-body">{body}</div>',
+		          "</div>",
+		          '<div class="x-grid-bottombar"></div>',
+		          '<a href="#" class="x-grid-focus" tabIndex="-1"></a>',
+		          '<div class="x-grid-resize-proxy">&#160;</div>',
+		       "</div>"
+		    );
+		    tpls.master.disableformats = true;
+		}
+
+		if(!tpls.header){
+		    tpls.header = new Roo.Template(
+		       '<table border="0" cellspacing="0" cellpadding="0">',
+		       '<tbody><tr class="x-grid-hd-row">{cells}</tr></tbody>',
+		       "</table>{splits}"
+		    );
+		    tpls.header.disableformats = true;
+		}
+		tpls.header.compile();
+
+		if(!tpls.hcell){
+		    tpls.hcell = new Roo.Template(
+		        '<td class="x-grid-hd x-grid-td-{id} {cellId}"><div title="{title}" class="x-grid-hd-inner x-grid-hd-{id}">',
+		        '<div class="x-grid-hd-text" unselectable="on">{value}<img class="x-grid-sort-icon" src="', Roo.BLANK_IMAGE_URL, '" /></div>',
+		        "</div></td>"
+		     );
+		     tpls.hcell.disableFormats = true;
+		}
+		tpls.hcell.compile();
+
+		if(!tpls.hsplit){
+		    tpls.hsplit = new Roo.Template('<div class="x-grid-split {splitId} x-grid-split-{id}" style="{style}" unselectable="on">&#160;</div>');
+		    tpls.hsplit.disableFormats = true;
+		}
+		tpls.hsplit.compile();
+
+		if(!tpls.body){
+		    tpls.body = new Roo.Template(
+		       '<table border="0" cellspacing="0" cellpadding="0">',
+		       "<tbody>{rows}</tbody>",
+		       "</table>"
+		    );
+		    tpls.body.disableFormats = true;
+		}
+		tpls.body.compile();
+
+		if(!tpls.row){
+		    tpls.row = new Roo.Template('<tr class="x-grid-row {alt}">{cells}</tr>');
+		    tpls.row.disableFormats = true;
+		}
+		tpls.row.compile();
+
+		if(!tpls.cell){
+		    tpls.cell = new Roo.Template(
+		        '<td class="x-grid-col x-grid-td-{id} {cellId} {css}" tabIndex="0">',
+		        '<div class="x-grid-col-{id} x-grid-cell-inner"><div class="x-grid-cell-text" unselectable="on" {attr}>{value}</div></div>',
+		        "</td>"
+		    );
+            tpls.cell.disableFormats = true;
+        }
+		tpls.cell.compile();
+
+		this.templates = tpls;
+	},
+
+	// remap these for backwards compat
+    onColWidthChange : function(){
+        this.updateColumns.apply(this, arguments);
+    },
+    onHeaderChange : function(){
+        this.updateHeaders.apply(this, arguments);
+    }, 
+    onHiddenChange : function(){
+        this.handleHiddenChange.apply(this, arguments);
+    },
+    onColumnMove : function(){
+        this.handleColumnMove.apply(this, arguments);
+    },
+    onColumnLock : function(){
+        this.handleLockChange.apply(this, arguments);
+    },
+
+    onDataChange : function(){
+        this.refresh();
+        this.updateHeaderSortState();
+    },
+
+	onClear : function(){
+        this.refresh();
+    },
+
+	onUpdate : function(ds, record){
+        this.refreshRow(record);
+    },
+
+    refreshRow : function(record){
+        var ds = this.ds, index;
+        if(typeof record == 'number'){
+            index = record;
+            record = ds.getAt(index);
+        }else{
+            index = ds.indexOf(record);
+        }
+        this.insertRows(ds, index, index, true);
+        this.onRemove(ds, record, index+1, true);
+        this.syncRowHeights(index, index);
+        this.layout();
+        this.fireEvent("rowupdated", this, index, record);
+    },
+
+    onAdd : function(ds, records, index){
+        this.insertRows(ds, index, index + (records.length-1));
+    },
+
+    onRemove : function(ds, record, index, isUpdate){
+        if(isUpdate !== true){
+            this.fireEvent("beforerowremoved", this, index, record);
+        }
+        var bt = this.getBodyTable(), lt = this.getLockedTable();
+        if(bt.rows[index]){
+            bt.firstChild.removeChild(bt.rows[index]);
+        }
+        if(lt.rows[index]){
+            lt.firstChild.removeChild(lt.rows[index]);
+        }
+        if(isUpdate !== true){
+            this.stripeRows(index);
+            this.syncRowHeights(index, index);
+            this.layout();
+            this.fireEvent("rowremoved", this, index, record);
+        }
+    },
+
+    onLoad : function(){
+        this.scrollToTop();
+    },
+
+    /**
+     * Scrolls the grid to the top
+     */
+    scrollToTop : function(){
+        if(this.scroller){
+            this.scroller.dom.scrollTop = 0;
+            this.syncScroll();
+        }
+    },
+
+    /**
+     * Gets a panel in the header of the grid that can be used for toolbars etc.
+     * After modifying the contents of this panel a call to grid.autoSize() may be
+     * required to register any changes in size.
+     * @param {Boolean} doShow By default the header is hidden. Pass true to show the panel
+     * @return Roo.Element
+     */
+    getHeaderPanel : function(doShow){
+        if(doShow){
+            this.headerPanel.show();
+        }
+        return this.headerPanel;
+	},
+
+	/**
+     * Gets a panel in the footer of the grid that can be used for toolbars etc.
+     * After modifying the contents of this panel a call to grid.autoSize() may be
+     * required to register any changes in size.
+     * @param {Boolean} doShow By default the footer is hidden. Pass true to show the panel
+     * @return Roo.Element
+     */
+    getFooterPanel : function(doShow){
+        if(doShow){
+            this.footerPanel.show();
+        }
+        return this.footerPanel;
+	},
+
+	initElements : function(){
+	    var E = Roo.Element;
+	    var el = this.grid.getGridEl().dom.firstChild;
+	    var cs = el.childNodes;
+
+	    this.el = new E(el);
+	    this.headerPanel = new E(el.firstChild);
+	    this.headerPanel.enableDisplayMode("block");
+
+        this.scroller = new E(cs[1]);
+	    this.scrollSizer = new E(this.scroller.dom.firstChild);
+
+	    this.lockedWrap = new E(cs[2]);
+	    this.lockedHd = new E(this.lockedWrap.dom.firstChild);
+	    this.lockedBody = new E(this.lockedWrap.dom.childNodes[1]);
+
+	    this.mainWrap = new E(cs[3]);
+	    this.mainHd = new E(this.mainWrap.dom.firstChild);
+	    this.mainBody = new E(this.mainWrap.dom.childNodes[1]);
+
+	    this.footerPanel = new E(cs[4]);
+	    this.footerPanel.enableDisplayMode("block");
+
+        this.focusEl = new E(cs[5]);
+        this.focusEl.swallowEvent("click", true);
+        this.resizeProxy = new E(cs[6]);
+
+	    this.headerSelector = String.format(
+	       '#{0} td.x-grid-hd, #{1} td.x-grid-hd',
+	       this.lockedHd.id, this.mainHd.id
+	    );
+
+	    this.splitterSelector = String.format(
+	       '#{0} div.x-grid-split, #{1} div.x-grid-split',
+	       this.idToCssName(this.lockedHd.id), this.idToCssName(this.mainHd.id)
+	    );
+    },
+    idToCssName : function(s)
+    {
+        return s.replace(/[^a-z0-9]+/ig, '-');
+    },
+
+	getHeaderCell : function(index){
+	    return Roo.DomQuery.select(this.headerSelector)[index];
+	},
+
+	getHeaderCellMeasure : function(index){
+	    return this.getHeaderCell(index).firstChild;
+	},
+
+	getHeaderCellText : function(index){
+	    return this.getHeaderCell(index).firstChild.firstChild;
+	},
+
+	getLockedTable : function(){
+	    return this.lockedBody.dom.firstChild;
+	},
+
+	getBodyTable : function(){
+	    return this.mainBody.dom.firstChild;
+	},
+
+	getLockedRow : function(index){
+	    return this.getLockedTable().rows[index];
+	},
+
+	getRow : function(index){
+	    return this.getBodyTable().rows[index];
+	},
+
+	getRowComposite : function(index){
+	    if(!this.rowEl){
+	        this.rowEl = new Roo.CompositeElementLite();
+	    }
+        var els = [], lrow, mrow;
+        if(lrow = this.getLockedRow(index)){
+            els.push(lrow);
+        }
+        if(mrow = this.getRow(index)){
+            els.push(mrow);
+        }
+        this.rowEl.elements = els;
+	    return this.rowEl;
+	},
+
+	getCell : function(rowIndex, colIndex){
+	    var locked = this.cm.getLockedCount();
+	    var source;
+	    if(colIndex < locked){
+	        source = this.lockedBody.dom.firstChild;
+	    }else{
+	        source = this.mainBody.dom.firstChild;
+	        colIndex -= locked;
+	    }
+        return source.rows[rowIndex].childNodes[colIndex];
+	},
+
+	getCellText : function(rowIndex, colIndex){
+	    return this.getCell(rowIndex, colIndex).firstChild.firstChild;
+	},
+
+	getCellBox : function(cell){
+	    var b = this.fly(cell).getBox();
+        if(Roo.isOpera){ // opera fails to report the Y
+            b.y = cell.offsetTop + this.mainBody.getY();
+        }
+        return b;
+    },
+
+    getCellIndex : function(cell){
+        var id = String(cell.className).match(this.cellRE);
+        if(id){
+            return parseInt(id[1], 10);
+        }
+        return 0;
+    },
+
+    findHeaderIndex : function(n){
+        var r = Roo.fly(n).findParent("td." + this.hdClass, 6);
+        return r ? this.getCellIndex(r) : false;
+    },
+
+    findHeaderCell : function(n){
+        var r = Roo.fly(n).findParent("td." + this.hdClass, 6);
+        return r ? r : false;
+    },
+
+    findRowIndex : function(n){
+        if(!n){
+            return false;
+        }
+        var r = Roo.fly(n).findParent("tr." + this.rowClass, 6);
+        return r ? r.rowIndex : false;
+    },
+
+    findCellIndex : function(node){
+        var stop = this.el.dom;
+        while(node && node != stop){
+            if(this.findRE.test(node.className)){
+                return this.getCellIndex(node);
+            }
+            node = node.parentNode;
+        }
+        return false;
+    },
+
+    getColumnId : function(index){
+	    return this.cm.getColumnId(index);
+	},
+
+	getSplitters : function(){
+	    if(this.splitterSelector){
+	       return Roo.DomQuery.select(this.splitterSelector);
+	    }else{
+	        return null;
+	    }
+	},
+
+	getSplitter : function(index){
+	    return this.getSplitters()[index];
+	},
+
+    onRowOver : function(e, t){
+        var row;
+        if((row = this.findRowIndex(t)) !== false){
+            this.getRowComposite(row).addClass("x-grid-row-over");
+        }
+    },
+
+    onRowOut : function(e, t){
+        var row;
+        if((row = this.findRowIndex(t)) !== false && row !== this.findRowIndex(e.getRelatedTarget())){
+            this.getRowComposite(row).removeClass("x-grid-row-over");
+        }
+    },
+
+    renderHeaders : function(){
+	    var cm = this.cm;
+        var ct = this.templates.hcell, ht = this.templates.header, st = this.templates.hsplit;
+        var cb = [], lb = [], sb = [], lsb = [], p = {};
+        for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+            p.cellId = "x-grid-hd-0-" + i;
+            p.splitId = "x-grid-csplit-0-" + i;
+            p.id = cm.getColumnId(i);
+            p.title = cm.getColumnTooltip(i) || "";
+            p.value = cm.getColumnHeader(i) || "";
+            p.style = (this.grid.enableColumnResize === false || !cm.isResizable(i) || cm.isFixed(i)) ? 'cursor:default' : '';
+            if(!cm.isLocked(i)){
+                cb[cb.length] = ct.apply(p);
+                sb[sb.length] = st.apply(p);
+            }else{
+                lb[lb.length] = ct.apply(p);
+                lsb[lsb.length] = st.apply(p);
+            }
+        }
+        return [ht.apply({cells: lb.join(""), splits:lsb.join("")}),
+                ht.apply({cells: cb.join(""), splits:sb.join("")})];
+	},
+
+	updateHeaders : function(){
+        var html = this.renderHeaders();
+        this.lockedHd.update(html[0]);
+        this.mainHd.update(html[1]);
+    },
+
+    /**
+     * Focuses the specified row.
+     * @param {Number} row The row index
+     */
+    focusRow : function(row){
+        var x = this.scroller.dom.scrollLeft;
+        this.focusCell(row, 0, false);
+        this.scroller.dom.scrollLeft = x;
+    },
+
+    /**
+     * Focuses the specified cell.
+     * @param {Number} row The row index
+     * @param {Number} col The column index
+     * @param {Boolean} hscroll false to disable horizontal scrolling
+     */
+    focusCell : function(row, col, hscroll){
+        var el = this.ensureVisible(row, col, hscroll);
+        this.focusEl.alignTo(el, "tl-tl");
+        if(Roo.isGecko){
+            this.focusEl.focus();
+        }else{
+            this.focusEl.focus.defer(1, this.focusEl);
+        }
+    },
+
+    /**
+     * Scrolls the specified cell into view
+     * @param {Number} row The row index
+     * @param {Number} col The column index
+     * @param {Boolean} hscroll false to disable horizontal scrolling
+     */
+    ensureVisible : function(row, col, hscroll){
+        if(typeof row != "number"){
+            row = row.rowIndex;
+        }
+        if(row < 0 && row >= this.ds.getCount()){
+            return;
+        }
+        col = (col !== undefined ? col : 0);
+        var cm = this.grid.colModel;
+        while(cm.isHidden(col)){
+            col++;
+        }
+
+        var el = this.getCell(row, col);
+        if(!el){
+            return;
+        }
+        var c = this.scroller.dom;
+
+        var ctop = parseInt(el.offsetTop, 10);
+        var cleft = parseInt(el.offsetLeft, 10);
+        var cbot = ctop + el.offsetHeight;
+        var cright = cleft + el.offsetWidth;
+
+        var ch = c.clientHeight - this.mainHd.dom.offsetHeight;
+        var stop = parseInt(c.scrollTop, 10);
+        var sleft = parseInt(c.scrollLeft, 10);
+        var sbot = stop + ch;
+        var sright = sleft + c.clientWidth;
+
+        if(ctop < stop){
+        	c.scrollTop = ctop;
+        }else if(cbot > sbot){
+            c.scrollTop = cbot-ch;
+        }
+
+        if(hscroll !== false){
+            if(cleft < sleft){
+                c.scrollLeft = cleft;
+            }else if(cright > sright){
+                c.scrollLeft = cright-c.clientWidth;
+            }
+        }
+        return el;
+    },
+
+    updateColumns : function(){
+        this.grid.stopEditing();
+        var cm = this.grid.colModel, colIds = this.getColumnIds();
+        //var totalWidth = cm.getTotalWidth();
+        var pos = 0;
+        for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+            //if(cm.isHidden(i)) continue;
+            var w = cm.getColumnWidth(i);
+            this.css.updateRule(this.colSelector+this.idToCssName(colIds[i]), "width", (w - this.borderWidth) + "px");
+            this.css.updateRule(this.hdSelector+this.idToCssName(colIds[i]), "width", (w - this.borderWidth) + "px");
+        }
+        this.updateSplitters();
+    },
+
+    generateRules : function(cm){
+        var ruleBuf = [], rulesId = this.idToCssName(this.grid.id)+ '-cssrules';
+        Roo.util.CSS.removeStyleSheet(rulesId);
+        for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+            var cid = cm.getColumnId(i);
+            var align = '';
+            if(cm.config[i].align){
+                align = 'text-align:'+cm.config[i].align+';';
+            }
+            var hidden = '';
+            if(cm.isHidden(i)){
+                hidden = 'display:none;';
+            }
+            var width = "width:" + (cm.getColumnWidth(i) - this.borderWidth) + "px;";
+            ruleBuf.push(
+                    this.colSelector, cid, " {\n", cm.config[i].css, align, width, "\n}\n",
+                    this.hdSelector, cid, " {\n", align, width, "}\n",
+                    this.tdSelector, cid, " {\n",hidden,"\n}\n",
+                    this.splitSelector, cid, " {\n", hidden , "\n}\n");
+        }
+        return Roo.util.CSS.createStyleSheet(ruleBuf.join(""), rulesId);
+    },
+
+    updateSplitters : function(){
+        var cm = this.cm, s = this.getSplitters();
+        if(s){ // splitters not created yet
+            var pos = 0, locked = true;
+            for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+                if(cm.isHidden(i)) continue;
+                var w = cm.getColumnWidth(i);
+                if(!cm.isLocked(i) && locked){
+                    pos = 0;
+                    locked = false;
+                }
+                pos += w;
+                s[i].style.left = (pos-this.splitOffset) + "px";
+            }
+        }
+    },
+
+    handleHiddenChange : function(colModel, colIndex, hidden){
+        if(hidden){
+            this.hideColumn(colIndex);
+        }else{
+            this.unhideColumn(colIndex);
+        }
+    },
+
+    hideColumn : function(colIndex){
+        var cid = this.getColumnId(colIndex);
+        this.css.updateRule(this.tdSelector+this.idToCssName(cid), "display", "none");
+        this.css.updateRule(this.splitSelector+this.idToCssName(cid), "display", "none");
+        if(Roo.isSafari){
+            this.updateHeaders();
+        }
+        this.updateSplitters();
+        this.layout();
+    },
+
+    unhideColumn : function(colIndex){
+        var cid = this.getColumnId(colIndex);
+        this.css.updateRule(this.tdSelector+this.idToCssName(cid), "display", "");
+        this.css.updateRule(this.splitSelector+this.idToCssName(cid), "display", "");
+
+        if(Roo.isSafari){
+            this.updateHeaders();
+        }
+        this.updateSplitters();
+        this.layout();
+    },
+
+    insertRows : function(dm, firstRow, lastRow, isUpdate){
+        if(firstRow == 0 && lastRow == dm.getCount()-1){
+            this.refresh();
+        }else{
+            if(!isUpdate){
+                this.fireEvent("beforerowsinserted", this, firstRow, lastRow);
+            }
+            var s = this.getScrollState();
+            var markup = this.renderRows(firstRow, lastRow);
+            this.bufferRows(markup[0], this.getLockedTable(), firstRow);
+            this.bufferRows(markup[1], this.getBodyTable(), firstRow);
+            this.restoreScroll(s);
+            if(!isUpdate){
+                this.fireEvent("rowsinserted", this, firstRow, lastRow);
+                this.syncRowHeights(firstRow, lastRow);
+                this.stripeRows(firstRow);
+                this.layout();
+            }
+        }
+    },
+
+    bufferRows : function(markup, target, index){
+        var before = null, trows = target.rows, tbody = target.tBodies[0];
+        if(index < trows.length){
+            before = trows[index];
+        }
+        var b = document.createElement("div");
+        b.innerHTML = "<table><tbody>"+markup+"</tbody></table>";
+        var rows = b.firstChild.rows;
+        for(var i = 0, len = rows.length; i < len; i++){
+            if(before){
+                tbody.insertBefore(rows[0], before);
+            }else{
+                tbody.appendChild(rows[0]);
+            }
+        }
+        b.innerHTML = "";
+        b = null;
+    },
+
+    deleteRows : function(dm, firstRow, lastRow){
+        if(dm.getRowCount()<1){
+            this.fireEvent("beforerefresh", this);
+            this.mainBody.update("");
+            this.lockedBody.update("");
+            this.fireEvent("refresh", this);
+        }else{
+            this.fireEvent("beforerowsdeleted", this, firstRow, lastRow);
+            var bt = this.getBodyTable();
+            var tbody = bt.firstChild;
+            var rows = bt.rows;
+            for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){
+                tbody.removeChild(rows[firstRow]);
+            }
+            this.stripeRows(firstRow);
+            this.fireEvent("rowsdeleted", this, firstRow, lastRow);
+        }
+    },
+
+    updateRows : function(dataSource, firstRow, lastRow){
+        var s = this.getScrollState();
+        this.refresh();
+        this.restoreScroll(s);
+    },
+
+    handleSort : function(dataSource, sortColumnIndex, sortDir, noRefresh){
+        if(!noRefresh){
+           this.refresh();
+        }
+        this.updateHeaderSortState();
+    },
+
+    getScrollState : function(){
+        var sb = this.scroller.dom;
+        return {left: sb.scrollLeft, top: sb.scrollTop};
+    },
+
+    stripeRows : function(startRow){
+        if(!this.grid.stripeRows || this.ds.getCount() < 1){
+            return;
+        }
+        startRow = startRow || 0;
+        var rows = this.getBodyTable().rows;
+        var lrows = this.getLockedTable().rows;
+        var cls = ' x-grid-row-alt ';
+        for(var i = startRow, len = rows.length; i < len; i++){
+            var row = rows[i], lrow = lrows[i];
+            var isAlt = ((i+1) % 2 == 0);
+            var hasAlt = (' '+row.className + ' ').indexOf(cls) != -1;
+            if(isAlt == hasAlt){
+                continue;
+            }
+            if(isAlt){
+                row.className += " x-grid-row-alt";
+            }else{
+                row.className = row.className.replace("x-grid-row-alt", "");
+            }
+            if(lrow){
+                lrow.className = row.className;
+            }
+        }
+    },
+
+    restoreScroll : function(state){
+        var sb = this.scroller.dom;
+        sb.scrollLeft = state.left;
+        sb.scrollTop = state.top;
+        this.syncScroll();
+    },
+
+    syncScroll : function(){
+        var sb = this.scroller.dom;
+        var sh = this.mainHd.dom;
+        var bs = this.mainBody.dom;
+        var lv = this.lockedBody.dom;
+        sh.scrollLeft = bs.scrollLeft = sb.scrollLeft;
+        lv.scrollTop = bs.scrollTop = sb.scrollTop;
+    },
+
+    handleScroll : function(e){
+        this.syncScroll();
+        var sb = this.scroller.dom;
+        this.grid.fireEvent("bodyscroll", sb.scrollLeft, sb.scrollTop);
+        e.stopEvent();
+    },
+
+    handleWheel : function(e){
+        var d = e.getWheelDelta();
+        this.scroller.dom.scrollTop -= d*22;
+        // set this here to prevent jumpy scrolling on large tables
+        this.lockedBody.dom.scrollTop = this.mainBody.dom.scrollTop = this.scroller.dom.scrollTop;
+        e.stopEvent();
+    },
+
+    renderRows : function(startRow, endRow){
+        // pull in all the crap needed to render rows
+        var g = this.grid, cm = g.colModel, ds = g.dataSource, stripe = g.stripeRows;
+        var colCount = cm.getColumnCount();
+
+        if(ds.getCount() < 1){
+            return ["", ""];
+        }
+
+        // build a map for all the columns
+        var cs = [];
+        for(var i = 0; i < colCount; i++){
+            var name = cm.getDataIndex(i);
+            cs[i] = {
+                name : typeof name == 'undefined' ? ds.fields.get(i).name : name,
+                renderer : cm.getRenderer(i),
+                id : cm.getColumnId(i),
+                locked : cm.isLocked(i)
+            };
+        }
+
+        startRow = startRow || 0;
+        endRow = typeof endRow == "undefined"? ds.getCount()-1 : endRow;
+
+        // records to render
+        var rs = ds.getRange(startRow, endRow);
+
+        return this.doRender(cs, rs, ds, startRow, colCount, stripe);
+    },
+
+    // As much as I hate to duplicate code, this was branched because FireFox really hates
+    // [].join("") on strings. The performance difference was substantial enough to
+    // branch this function
+    doRender : Roo.isGecko ?
+            function(cs, rs, ds, startRow, colCount, stripe){
+                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++){
+                        c = cs[i];
+                        p.cellId = "x-grid-cell-" + rowIndex + "-" + i;
+                        p.id = c.id;
+                        p.css = p.attr = "";
+                        p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
+                        if(p.value == undefined || p.value === "") p.value = "&#160;";
+                        if(r.dirty && typeof r.modified[c.name] !== 'undefined'){
+                            p.css += p.css ? ' x-grid-dirty-cell' : 'x-grid-dirty-cell';
+                        }
+                        var markup = ct.apply(p);
+                        if(!c.locked){
+                            cb+= markup;
+                        }else{
+                            lcb+= markup;
+                        }
+                    }
+                    var alt = [];
+                    if(stripe && ((rowIndex+1) % 2 == 0)){
+                        alt.push("x-grid-row-alt")
+                    }
+                    if(r.dirty){
+                        alt.push(  " x-grid-dirty-row");
+                    }
+                    rp.cells = lcb;
+                    if(this.getRowClass){
+                        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);
+                    rp.cells = cb;
+                    buf+=  rt.apply(rp);
+                }
+                return [lbuf, buf];
+            } :
+            function(cs, rs, ds, startRow, colCount, stripe){
+                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++){
+                        c = cs[i];
+                        p.cellId = "x-grid-cell-" + rowIndex + "-" + i;
+                        p.id = c.id;
+                        p.css = p.attr = "";
+                        p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
+                        if(p.value == undefined || p.value === "") p.value = "&#160;";
+                        if(r.dirty && typeof r.modified[c.name] !== 'undefined'){
+                            p.css += p.css ? ' x-grid-dirty-cell' : 'x-grid-dirty-cell';
+                        }
+                        var markup = ct.apply(p);
+                        if(!c.locked){
+                            cb[cb.length] = markup;
+                        }else{
+                            lcb[lcb.length] = markup;
+                        }
+                    }
+                    var alt = [];
+                    if(stripe && ((rowIndex+1) % 2 == 0)){
+                        alt.push( "x-grid-row-alt");
+                    }
+                    if(r.dirty){
+                        alt.push(" x-grid-dirty-row");
+                    }
+                    rp.cells = lcb;
+                    if(this.getRowClass){
+                        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("");
+                    lbuf[lbuf.length] = rt.apply(rp);
+                    rp.cells = cb.join("");
+                    buf[buf.length] =  rt.apply(rp);
+                }
+                return [lbuf.join(""), buf.join("")];
+            },
+
+    renderBody : function(){
+        var markup = this.renderRows();
+        var bt = this.templates.body;
+        return [bt.apply({rows: markup[0]}), bt.apply({rows: markup[1]})];
+    },
+
+    /**
+     * Refreshes the grid
+     * @param {Boolean} headersToo
+     */
+    refresh : function(headersToo){
+        this.fireEvent("beforerefresh", this);
+        this.grid.stopEditing();
+        var result = this.renderBody();
+        this.lockedBody.update(result[0]);
+        this.mainBody.update(result[1]);
+        if(headersToo === true){
+            this.updateHeaders();
+            this.updateColumns();
+            this.updateSplitters();
+            this.updateHeaderSortState();
+        }
+        this.syncRowHeights();
+        this.layout();
+        this.fireEvent("refresh", this);
+    },
+
+    handleColumnMove : function(cm, oldIndex, newIndex){
+        this.indexMap = null;
+        var s = this.getScrollState();
+        this.refresh(true);
+        this.restoreScroll(s);
+        this.afterMove(newIndex);
+    },
+
+    afterMove : function(colIndex){
+        if(this.enableMoveAnim && Roo.enableFx){
+            this.fly(this.getHeaderCell(colIndex).firstChild).highlight(this.hlColor);
+        }
+    },
+
+    updateCell : function(dm, rowIndex, dataIndex){
+        var colIndex = this.getColumnIndexByDataIndex(dataIndex);
+        if(typeof colIndex == "undefined"){ // not present in grid
+            return;
+        }
+        var cm = this.grid.colModel;
+        var cell = this.getCell(rowIndex, colIndex);
+        var cellText = this.getCellText(rowIndex, colIndex);
+
+        var p = {
+            cellId : "x-grid-cell-" + rowIndex + "-" + colIndex,
+            id : cm.getColumnId(colIndex),
+            css: colIndex == cm.getColumnCount()-1 ? "x-grid-col-last" : ""
+        };
+        var renderer = cm.getRenderer(colIndex);
+        var val = renderer(dm.getValueAt(rowIndex, dataIndex), p, rowIndex, colIndex, dm);
+        if(typeof val == "undefined" || val === "") val = "&#160;";
+        cellText.innerHTML = val;
+        cell.className = this.cellClass + " " + this.idToCssName(p.cellId) + " " + p.css;
+        this.syncRowHeights(rowIndex, rowIndex);
+    },
+
+    calcColumnWidth : function(colIndex, maxRowsToMeasure){
+        var maxWidth = 0;
+        if(this.grid.autoSizeHeaders){
+            var h = this.getHeaderCellMeasure(colIndex);
+            maxWidth = Math.max(maxWidth, h.scrollWidth);
+        }
+        var tb, index;
+        if(this.cm.isLocked(colIndex)){
+            tb = this.getLockedTable();
+            index = colIndex;
+        }else{
+            tb = this.getBodyTable();
+            index = colIndex - this.cm.getLockedCount();
+        }
+        if(tb && tb.rows){
+            var rows = tb.rows;
+            var stopIndex = Math.min(maxRowsToMeasure || rows.length, rows.length);
+            for(var i = 0; i < stopIndex; i++){
+                var cell = rows[i].childNodes[index].firstChild;
+                maxWidth = Math.max(maxWidth, cell.scrollWidth);
+            }
+        }
+        return maxWidth + /*margin for error in IE*/ 5;
+    },
+    /**
+     * Autofit a column to its content.
+     * @param {Number} colIndex
+     * @param {Boolean} forceMinSize true to force the column to go smaller if possible
+     */
+     autoSizeColumn : function(colIndex, forceMinSize, suppressEvent){
+         if(this.cm.isHidden(colIndex)){
+             return; // can't calc a hidden column
+         }
+        if(forceMinSize){
+            var cid = this.cm.getColumnId(colIndex);
+            this.css.updateRule(this.colSelector +this.idToCssName( cid), "width", this.grid.minColumnWidth + "px");
+           if(this.grid.autoSizeHeaders){
+               this.css.updateRule(this.hdSelector + this.idToCssName(cid), "width", this.grid.minColumnWidth + "px");
+           }
+        }
+        var newWidth = this.calcColumnWidth(colIndex);
+        this.cm.setColumnWidth(colIndex,
+            Math.max(this.grid.minColumnWidth, newWidth), suppressEvent);
+        if(!suppressEvent){
+            this.grid.fireEvent("columnresize", colIndex, newWidth);
+        }
+    },
+
+    /**
+     * Autofits all columns to their content and then expands to fit any extra space in the grid
+     */
+     autoSizeColumns : function(){
+        var cm = this.grid.colModel;
+        var colCount = cm.getColumnCount();
+        for(var i = 0; i < colCount; i++){
+            this.autoSizeColumn(i, true, true);
+        }
+        if(cm.getTotalWidth() < this.scroller.dom.clientWidth){
+            this.fitColumns();
+        }else{
+            this.updateColumns();
+            this.layout();
+        }
+    },
+
+    /**
+     * Autofits all columns to the grid's width proportionate with their current size
+     * @param {Boolean} reserveScrollSpace Reserve space for a scrollbar
+     */
+    fitColumns : function(reserveScrollSpace){
+        var cm = this.grid.colModel;
+        var colCount = cm.getColumnCount();
+        var cols = [];
+        var width = 0;
+        var i, w;
+        for (i = 0; i < colCount; i++){
+            if(!cm.isHidden(i) && !cm.isFixed(i)){
+                w = cm.getColumnWidth(i);
+                cols.push(i);
+                cols.push(w);
+                width += w;
+            }
+        }
+        var avail = Math.min(this.scroller.dom.clientWidth, this.el.getWidth());
+        if(reserveScrollSpace){
+            avail -= 17;
+        }
+        var frac = (avail - cm.getTotalWidth())/width;
+        while (cols.length){
+            w = cols.pop();
+            i = cols.pop();
+            cm.setColumnWidth(i, Math.floor(w + w*frac), true);
+        }
+        this.updateColumns();
+        this.layout();
+    },
+
+    onRowSelect : function(rowIndex){
+        var row = this.getRowComposite(rowIndex);
+        row.addClass("x-grid-row-selected");
+    },
+
+    onRowDeselect : function(rowIndex){
+        var row = this.getRowComposite(rowIndex);
+        row.removeClass("x-grid-row-selected");
+    },
+
+    onCellSelect : function(row, col){
+        var cell = this.getCell(row, col);
+        if(cell){
+            Roo.fly(cell).addClass("x-grid-cell-selected");
+        }
+    },
+
+    onCellDeselect : function(row, col){
+        var cell = this.getCell(row, col);
+        if(cell){
+            Roo.fly(cell).removeClass("x-grid-cell-selected");
+        }
+    },
+
+    updateHeaderSortState : function(){
+        var state = this.ds.getSortState();
+        if(!state){
+            return;
+        }
+        this.sortState = state;
+        var sortColumn = this.cm.findColumnIndex(state.field);
+        if(sortColumn != -1){
+            var sortDir = state.direction;
+            var sc = this.sortClasses;
+            var hds = this.el.select(this.headerSelector).removeClass(sc);
+            hds.item(sortColumn).addClass(sc[sortDir == "DESC" ? 1 : 0]);
+        }
+    },
+
+    handleHeaderClick : function(g, index){
+        if(this.headersDisabled){
+            return;
+        }
+        var dm = g.dataSource, cm = g.colModel;
+	    if(!cm.isSortable(index)){
+            return;
+        }
+	    g.stopEditing();
+        dm.sort(cm.getDataIndex(index));
+    },
+
+
+    destroy : function(){
+        if(this.colMenu){
+            this.colMenu.removeAll();
+            Roo.menu.MenuMgr.unregister(this.colMenu);
+            this.colMenu.getEl().remove();
+            delete this.colMenu;
+        }
+        if(this.hmenu){
+            this.hmenu.removeAll();
+            Roo.menu.MenuMgr.unregister(this.hmenu);
+            this.hmenu.getEl().remove();
+            delete this.hmenu;
+        }
+        if(this.grid.enableColumnMove){
+            var dds = Roo.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
+            if(dds){
+                for(var dd in dds){
+                    if(!dds[dd].config.isTarget && dds[dd].dragElId){
+                        var elid = dds[dd].dragElId;
+                        dds[dd].unreg();
+                        Roo.get(elid).remove();
+                    } else if(dds[dd].config.isTarget){
+                        dds[dd].proxyTop.remove();
+                        dds[dd].proxyBottom.remove();
+                        dds[dd].unreg();
+                    }
+                    if(Roo.dd.DDM.locationCache[dd]){
+                        delete Roo.dd.DDM.locationCache[dd];
+                    }
+                }
+                delete Roo.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
+            }
+        }
+        Roo.util.CSS.removeStyleSheet(this.idToCssName(this.grid.id) + '-cssrules');
+        this.bind(null, null);
+        Roo.EventManager.removeResizeListener(this.onWindowResize, this);
+    },
+
+    handleLockChange : function(){
+        this.refresh(true);
+    },
+
+    onDenyColumnLock : function(){
+
+    },
+
+    onDenyColumnHide : function(){
+
+    },
+
+    handleHdMenuClick : function(item){
+        var index = this.hdCtxIndex;
+        var cm = this.cm, ds = this.ds;
+        switch(item.id){
+            case "asc":
+                ds.sort(cm.getDataIndex(index), "ASC");
+                break;
+            case "desc":
+                ds.sort(cm.getDataIndex(index), "DESC");
+                break;
+            case "lock":
+                var lc = cm.getLockedCount();
+                if(cm.getColumnCount(true) <= lc+1){
+                    this.onDenyColumnLock();
+                    return;
+                }
+                if(lc != index){
+                    cm.setLocked(index, true, true);
+                    cm.moveColumn(index, lc);
+                    this.grid.fireEvent("columnmove", index, lc);
+                }else{
+                    cm.setLocked(index, true);
+                }
+            break;
+            case "unlock":
+                var lc = cm.getLockedCount();
+                if((lc-1) != index){
+                    cm.setLocked(index, false, true);
+                    cm.moveColumn(index, lc-1);
+                    this.grid.fireEvent("columnmove", index, lc-1);
+                }else{
+                    cm.setLocked(index, false);
+                }
+            break;
+            default:
+                index = cm.getIndexById(item.id.substr(4));
+                if(index != -1){
+                    if(item.checked && cm.getColumnCount(true) <= 1){
+                        this.onDenyColumnHide();
+                        return false;
+                    }
+                    cm.setHidden(index, item.checked);
+                }
+        }
+        return true;
+    },
+
+    beforeColMenuShow : function(){
+        var cm = this.cm,  colCount = cm.getColumnCount();
+        this.colMenu.removeAll();
+        for(var i = 0; i < colCount; i++){
+            this.colMenu.add(new Roo.menu.CheckItem({
+                id: "col-"+cm.getColumnId(i),
+                text: cm.getColumnHeader(i),
+                checked: !cm.isHidden(i),
+                hideOnClick:false
+            }));
+        }
+    },
+
+    handleHdCtx : function(g, index, e){
+        e.stopEvent();
+        var hd = this.getHeaderCell(index);
+        this.hdCtxIndex = index;
+        var ms = this.hmenu.items, cm = this.cm;
+        ms.get("asc").setDisabled(!cm.isSortable(index));
+        ms.get("desc").setDisabled(!cm.isSortable(index));
+        if(this.grid.enableColLock !== false){
+            ms.get("lock").setDisabled(cm.isLocked(index));
+            ms.get("unlock").setDisabled(!cm.isLocked(index));
+        }
+        this.hmenu.show(hd, "tl-bl");
+    },
+
+    handleHdOver : function(e){
+        var hd = this.findHeaderCell(e.getTarget());
+        if(hd && !this.headersDisabled){
+            if(this.grid.colModel.isSortable(this.getCellIndex(hd))){
+               this.fly(hd).addClass("x-grid-hd-over");
+            }
+        }
+    },
+
+    handleHdOut : function(e){
+        var hd = this.findHeaderCell(e.getTarget());
+        if(hd){
+            this.fly(hd).removeClass("x-grid-hd-over");
+        }
+    },
+
+    handleSplitDblClick : function(e, t){
+        var i = this.getCellIndex(t);
+        if(this.grid.enableColumnResize !== false && this.cm.isResizable(i) && !this.cm.isFixed(i)){
+            this.autoSizeColumn(i, true);
+            this.layout();
+        }
+    },
+
+    render : function(){
+
+        var cm = this.cm;
+        var colCount = cm.getColumnCount();
+
+        if(this.grid.monitorWindowResize === true){
+            Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
+        }
+        var header = this.renderHeaders();
+        var body = this.templates.body.apply({rows:""});
+        var html = this.templates.master.apply({
+            lockedBody: body,
+            body: body,
+            lockedHeader: header[0],
+            header: header[1]
+        });
+
+        //this.updateColumns();
+
+        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);
+        this.mainBody.on("mousewheel", this.handleWheel, this);
+
+        this.mainHd.on("mouseover", this.handleHdOver, this);
+        this.mainHd.on("mouseout", this.handleHdOut, this);
+        this.mainHd.on("dblclick", this.handleSplitDblClick, this,
+                {delegate: "."+this.splitClass});
+
+        this.lockedHd.on("mouseover", this.handleHdOver, this);
+        this.lockedHd.on("mouseout", this.handleHdOut, this);
+        this.lockedHd.on("dblclick", this.handleSplitDblClick, this,
+                {delegate: "."+this.splitClass});
+
+        if(this.grid.enableColumnResize !== false && Roo.grid.SplitDragZone){
+            new Roo.grid.SplitDragZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
+        }
+
+        this.updateSplitters();
+
+        if(this.grid.enableColumnMove && Roo.grid.HeaderDragZone){
+            new Roo.grid.HeaderDragZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
+            new Roo.grid.HeaderDropZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
+        }
+
+        if(this.grid.enableCtxMenu !== false && Roo.menu.Menu){
+            this.hmenu = new Roo.menu.Menu({id: this.grid.id + "-hctx"});
+            this.hmenu.add(
+                {id:"asc", text: this.sortAscText, cls: "xg-hmenu-sort-asc"},
+                {id:"desc", text: this.sortDescText, cls: "xg-hmenu-sort-desc"}
+            );
+            if(this.grid.enableColLock !== false){
+                this.hmenu.add('-',
+                    {id:"lock", text: this.lockText, cls: "xg-hmenu-lock"},
+                    {id:"unlock", text: this.unlockText, cls: "xg-hmenu-unlock"}
+                );
+            }
+            if(this.grid.enableColumnHide !== false){
+
+                this.colMenu = new Roo.menu.Menu({id:this.grid.id + "-hcols-menu"});
+                this.colMenu.on("beforeshow", this.beforeColMenuShow, this);
+                this.colMenu.on("itemclick", this.handleHdMenuClick, this);
+
+                this.hmenu.add('-',
+                    {id:"columns", text: this.columnsText, menu: this.colMenu}
+                );
+            }
+            this.hmenu.on("itemclick", this.handleHdMenuClick, this);
+
+            this.grid.on("headercontextmenu", this.handleHdCtx, this);
+        }
+
+        if((this.grid.enableDragDrop || this.grid.enableDrag) && Roo.grid.GridDragZone){
+            this.dd = new Roo.grid.GridDragZone(this.grid, {
+                ddGroup : this.grid.ddGroup || 'GridDD'
+            });
+        }
+
+        /*
+        for(var i = 0; i < colCount; i++){
+            if(cm.isHidden(i)){
+                this.hideColumn(i);
+            }
+            if(cm.config[i].align){
+                this.css.updateRule(this.colSelector + i, "textAlign", cm.config[i].align);
+                this.css.updateRule(this.hdSelector + i, "textAlign", cm.config[i].align);
+            }
+        }*/
+        
+        this.updateHeaderSortState();
+
+        this.beforeInitialResize();
+        this.layout(true);
+
+        // two part rendering gives faster view to the user
+        this.renderPhase2.defer(1, this);
+    },
+
+    renderPhase2 : function(){
+        // render the rows now
+        this.refresh();
+        if(this.grid.autoSizeColumns){
+            this.autoSizeColumns();
+        }
+    },
+
+    beforeInitialResize : function(){
+
+    },
+
+    onColumnSplitterMoved : function(i, w){
+        this.userResized = true;
+        var cm = this.grid.colModel;
+        cm.setColumnWidth(i, w, true);
+        var cid = cm.getColumnId(i);
+        this.css.updateRule(this.colSelector + this.idToCssName(cid), "width", (w-this.borderWidth) + "px");
+        this.css.updateRule(this.hdSelector + this.idToCssName(cid), "width", (w-this.borderWidth) + "px");
+        this.updateSplitters();
+        this.layout();
+        this.grid.fireEvent("columnresize", i, w);
+    },
+
+    syncRowHeights : function(startIndex, endIndex){
+        if(this.grid.enableRowHeightSync === true && this.cm.getLockedCount() > 0){
+            startIndex = startIndex || 0;
+            var mrows = this.getBodyTable().rows;
+            var lrows = this.getLockedTable().rows;
+            var len = mrows.length-1;
+            endIndex = Math.min(endIndex || len, len);
+            for(var i = startIndex; i <= endIndex; i++){
+                var m = mrows[i], l = lrows[i];
+                var h = Math.max(m.offsetHeight, l.offsetHeight);
+                m.style.height = l.style.height = h + "px";
+            }
+        }
+    },
+
+    layout : function(initialRender, is2ndPass){
+        var g = this.grid;
+        var auto = g.autoHeight;
+        var scrollOffset = 16;
+        var c = g.getGridEl(), cm = this.cm,
+                expandCol = g.autoExpandColumn,
+                gv = this;
+        //c.beginMeasure();
+
+        if(!c.dom.offsetWidth){ // display:none?
+            if(initialRender){
+                this.lockedWrap.show();
+                this.mainWrap.show();
+            }
+            return;
+        }
+
+        var hasLock = this.cm.isLocked(0);
+
+        var tbh = this.headerPanel.getHeight();
+        var bbh = this.footerPanel.getHeight();
+
+        if(auto){
+            var ch = this.getBodyTable().offsetHeight + tbh + bbh + this.mainHd.getHeight();
+            var newHeight = ch + c.getBorderWidth("tb");
+            if(g.maxHeight){
+                newHeight = Math.min(g.maxHeight, newHeight);
+            }
+            c.setHeight(newHeight);
+        }
+
+        if(g.autoWidth){
+            c.setWidth(cm.getTotalWidth()+c.getBorderWidth('lr'));
+        }
+
+        var s = this.scroller;
+
+        var csize = c.getSize(true);
+
+        this.el.setSize(csize.width, csize.height);
+
+        this.headerPanel.setWidth(csize.width);
+        this.footerPanel.setWidth(csize.width);
+
+        var hdHeight = this.mainHd.getHeight();
+        var vw = csize.width;
+        var vh = csize.height - (tbh + bbh);
+
+        s.setSize(vw, vh);
+
+        var bt = this.getBodyTable();
+        var ltWidth = hasLock ?
+                      Math.max(this.getLockedTable().offsetWidth, this.lockedHd.dom.firstChild.offsetWidth) : 0;
+
+        var scrollHeight = bt.offsetHeight;
+        var scrollWidth = ltWidth + bt.offsetWidth;
+        var vscroll = false, hscroll = false;
+
+        this.scrollSizer.setSize(scrollWidth, scrollHeight+hdHeight);
+
+        var lw = this.lockedWrap, mw = this.mainWrap;
+        var lb = this.lockedBody, mb = this.mainBody;
+
+        setTimeout(function(){
+            var t = s.dom.offsetTop;
+            var w = s.dom.clientWidth,
+                h = s.dom.clientHeight;
+
+            lw.setTop(t);
+            lw.setSize(ltWidth, h);
+
+            mw.setLeftTop(ltWidth, t);
+            mw.setSize(w-ltWidth, h);
+
+            lb.setHeight(h-hdHeight);
+            mb.setHeight(h-hdHeight);
+
+            if(is2ndPass !== true && !gv.userResized && expandCol){
+                // high speed resize without full column calculation
+                
+                var ci = cm.getIndexById(expandCol);
+                if (ci < 0) {
+                    ci = cm.findColumnIndex(expandCol);
+                }
+                ci = Math.max(0, ci); // make sure it's got at least the first col.
+                var expandId = cm.getColumnId(ci);
+                var  tw = cm.getTotalWidth(false);
+                var currentWidth = cm.getColumnWidth(ci);
+                var cw = Math.min(Math.max(((w-tw)+currentWidth-2)-/*scrollbar*/(w <= s.dom.offsetWidth ? 0 : 18), g.autoExpandMin), g.autoExpandMax);
+                if(currentWidth != cw){
+                    cm.setColumnWidth(ci, cw, true);
+                    gv.css.updateRule(gv.colSelector+gv.idToCssName(expandId), "width", (cw - gv.borderWidth) + "px");
+                    gv.css.updateRule(gv.hdSelector+gv.idToCssName(expandId), "width", (cw - gv.borderWidth) + "px");
+                    gv.updateSplitters();
+                    gv.layout(false, true);
+                }
+            }
+
+            if(initialRender){
+                lw.show();
+                mw.show();
+            }
+            //c.endMeasure();
+        }, 10);
+    },
+
+    onWindowResize : function(){
+        if(!this.grid.monitorWindowResize || this.grid.autoHeight){
+            return;
+        }
+        this.layout();
+    },
+
+    appendFooter : function(parentEl){
+        return null;
+    },
+
+    sortAscText : "Sort Ascending",
+    sortDescText : "Sort Descending",
+    lockText : "Lock Column",
+    unlockText : "Unlock Column",
+    columnsText : "Columns"
+});
+
+
+Roo.grid.GridView.ColumnDragZone = function(grid, hd){
+    Roo.grid.GridView.ColumnDragZone.superclass.constructor.call(this, grid, hd, null);
+    this.proxy.el.addClass('x-grid3-col-dd');
+};
+
+Roo.extend(Roo.grid.GridView.ColumnDragZone, Roo.grid.HeaderDragZone, {
+    handleMouseDown : function(e){
+
+    },
+
+    callHandleMouseDown : function(e){
+        Roo.grid.GridView.ColumnDragZone.superclass.handleMouseDown.call(this, e);
+    }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+// private
+// This is a support class used internally by the Grid components
+Roo.grid.SplitDragZone = function(grid, hd, hd2){
+    this.grid = grid;
+    this.view = grid.getView();
+    this.proxy = this.view.resizeProxy;
+    Roo.grid.SplitDragZone.superclass.constructor.call(this, hd,
+        "gridSplitters" + this.grid.getGridEl().id, {
+        dragElId : Roo.id(this.proxy.dom), resizeFrame:false
+    });
+    this.setHandleElId(Roo.id(hd));
+    this.setOuterHandleElId(Roo.id(hd2));
+    this.scroll = false;
+};
+Roo.extend(Roo.grid.SplitDragZone, Roo.dd.DDProxy, {
+    fly: Roo.Element.fly,
+
+    b4StartDrag : function(x, y){
+        this.view.headersDisabled = true;
+        this.proxy.setHeight(this.view.mainWrap.getHeight());
+        var w = this.cm.getColumnWidth(this.cellIndex);
+        var minw = Math.max(w-this.grid.minColumnWidth, 0);
+        this.resetConstraints();
+        this.setXConstraint(minw, 1000);
+        this.setYConstraint(0, 0);
+        this.minX = x - minw;
+        this.maxX = x + 1000;
+        this.startPos = x;
+        Roo.dd.DDProxy.prototype.b4StartDrag.call(this, x, y);
+    },
+
+
+    handleMouseDown : function(e){
+        ev = Roo.EventObject.setEvent(e);
+        var t = this.fly(ev.getTarget());
+        if(t.hasClass("x-grid-split")){
+            this.cellIndex = this.view.getCellIndex(t.dom);
+            this.split = t.dom;
+            this.cm = this.grid.colModel;
+            if(this.cm.isResizable(this.cellIndex) && !this.cm.isFixed(this.cellIndex)){
+                Roo.grid.SplitDragZone.superclass.handleMouseDown.apply(this, arguments);
+            }
+        }
+    },
+
+    endDrag : function(e){
+        this.view.headersDisabled = false;
+        var endX = Math.max(this.minX, Roo.lib.Event.getPageX(e));
+        var diff = endX - this.startPos;
+        this.view.onColumnSplitterMoved(this.cellIndex, this.cm.getColumnWidth(this.cellIndex)+diff);
+    },
+
+    autoOffset : function(){
+        this.setDelta(0,0);
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+// private
+// This is a support class used internally by the Grid components
+Roo.grid.GridDragZone = function(grid, config){
+    this.view = grid.getView();
+    Roo.grid.GridDragZone.superclass.constructor.call(this, this.view.mainBody.dom, config);
+    if(this.view.lockedBody){
+        this.setHandleElId(Roo.id(this.view.mainBody.dom));
+        this.setOuterHandleElId(Roo.id(this.view.lockedBody.dom));
+    }
+    this.scroll = false;
+    this.grid = grid;
+    this.ddel = document.createElement('div');
+    this.ddel.className = 'x-grid-dd-wrap';
+};
+
+Roo.extend(Roo.grid.GridDragZone, Roo.dd.DragZone, {
+    ddGroup : "GridDD",
+
+    getDragData : function(e){
+        var t = Roo.lib.Event.getTarget(e);
+        var rowIndex = this.view.findRowIndex(t);
+        if(rowIndex !== false){
+            var sm = this.grid.selModel;
+            //if(!sm.isSelected(rowIndex) || e.hasModifier()){
+              //  sm.mouseDown(e, t);
+            //}
+            if (e.hasModifier()){
+                sm.handleMouseDown(e, t); // non modifier buttons are handled by row select.
+            }
+            return {grid: this.grid, ddel: this.ddel, rowIndex: rowIndex, selections:sm.getSelections()};
+        }
+        return false;
+    },
+
+    onInitDrag : function(e){
+        var data = this.dragData;
+        this.ddel.innerHTML = this.grid.getDragDropText();
+        this.proxy.update(this.ddel);
+        // fire start drag?
+    },
+
+    afterRepair : function(){
+        this.dragging = false;
+    },
+
+    getRepairXY : function(e, data){
+        return false;
+    },
+
+    onEndDrag : function(data, e){
+        // fire end drag?
+    },
+
+    onValidDrop : function(dd, e, id){
+        // fire drag drop?
+        this.hideProxy();
+    },
+
+    beforeInvalidDrop : function(e, id){
+
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+
+/**
+ * @class Roo.grid.ColumnModel
+ * @extends Roo.util.Observable
+ * This is the default implementation of a ColumnModel used by the Grid. It defines
+ * the columns in the grid.
+ * <br>Usage:<br>
+ <pre><code>
+ var colModel = new Roo.grid.ColumnModel([
+	{header: "Ticker", width: 60, sortable: true, locked: true},
+	{header: "Company Name", width: 150, sortable: true},
+	{header: "Market Cap.", width: 100, sortable: true},
+	{header: "$ Sales", width: 100, sortable: true, renderer: money},
+	{header: "Employees", width: 100, sortable: true, resizable: false}
+ ]);
+ </code></pre>
+ * <p>
+ 
+ * The config options listed for this class are options which may appear in each
+ * individual column definition.
+ * <br/>RooJS Fix - column id's are not sequential but use Roo.id() - fixes bugs with layouts.
+ * @constructor
+ * @param {Object} config An Array of column config objects. See this class's
+ * config objects for details.
+*/
+Roo.grid.ColumnModel = function(config){
+	/**
+     * The config passed into the constructor
+     */
+    this.config = config;
+    this.lookup = {};
+
+    // if no id, create one
+    // if the column does not have a dataIndex mapping,
+    // map it to the order it is in the config
+    for(var i = 0, len = config.length; i < len; i++){
+        var c = config[i];
+        if(typeof c.dataIndex == "undefined"){
+            c.dataIndex = i;
+        }
+        if(typeof c.renderer == "string"){
+            c.renderer = Roo.util.Format[c.renderer];
+        }
+        if(typeof c.id == "undefined"){
+            c.id = Roo.id();
+        }
+        if(c.editor && c.editor.xtype){
+            c.editor  = Roo.factory(c.editor, Roo.grid);
+        }
+        if(c.editor && c.editor.isFormField){
+            c.editor = new Roo.grid.GridEditor(c.editor);
+        }
+        this.lookup[c.id] = c;
+    }
+
+    /**
+     * The width of columns which have no width specified (defaults to 100)
+     * @type Number
+     */
+    this.defaultWidth = 100;
+
+    /**
+     * Default sortable of columns which have no sortable specified (defaults to false)
+     * @type Boolean
+     */
+    this.defaultSortable = false;
+
+    this.addEvents({
+        /**
+	     * @event widthchange
+	     * Fires when the width of a column changes.
+	     * @param {ColumnModel} this
+	     * @param {Number} columnIndex The column index
+	     * @param {Number} newWidth The new width
+	     */
+	    "widthchange": true,
+        /**
+	     * @event headerchange
+	     * Fires when the text of a header changes.
+	     * @param {ColumnModel} this
+	     * @param {Number} columnIndex The column index
+	     * @param {Number} newText The new header text
+	     */
+	    "headerchange": true,
+        /**
+	     * @event hiddenchange
+	     * Fires when a column is hidden or "unhidden".
+	     * @param {ColumnModel} this
+	     * @param {Number} columnIndex The column index
+	     * @param {Boolean} hidden true if hidden, false otherwise
+	     */
+	    "hiddenchange": true,
+	    /**
+         * @event columnmoved
+         * Fires when a column is moved.
+         * @param {ColumnModel} this
+         * @param {Number} oldIndex
+         * @param {Number} newIndex
+         */
+        "columnmoved" : true,
+        /**
+         * @event columlockchange
+         * Fires when a column's locked state is changed
+         * @param {ColumnModel} this
+         * @param {Number} colIndex
+         * @param {Boolean} locked true if locked
+         */
+        "columnlockchange" : true
+    });
+    Roo.grid.ColumnModel.superclass.constructor.call(this);
+};
+Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
+    /**
+     * @cfg {String} header The header text to display in the Grid view.
+     */
+    /**
+     * @cfg {String} dataIndex (Optional) The name of the field in the grid's {@link Roo.data.Store}'s
+     * {@link Roo.data.Record} definition from which to draw the column's value. If not
+     * specified, the column's index is used as an index into the Record's data Array.
+     */
+    /**
+     * @cfg {Number} width (Optional) The initial width in pixels of the column. Using this
+     * instead of {@link Roo.grid.Grid#autoSizeColumns} is more efficient.
+     */
+    /**
+     * @cfg {Boolean} sortable (Optional) True if sorting is to be allowed on this column.
+     * Defaults to the value of the {@link #defaultSortable} property.
+     * Whether local/remote sorting is used is specified in {@link Roo.data.Store#remoteSort}.
+     */
+    /**
+     * @cfg {Boolean} locked (Optional) True to lock the column in place while scrolling the Grid.  Defaults to false.
+     */
+    /**
+     * @cfg {Boolean} fixed (Optional) True if the column width cannot be changed.  Defaults to false.
+     */
+    /**
+     * @cfg {Boolean} resizable (Optional) False to disable column resizing. Defaults to true.
+     */
+    /**
+     * @cfg {Boolean} hidden (Optional) True to hide the column. Defaults to false.
+     */
+    /**
+     * @cfg {Function} renderer (Optional) A function used to generate HTML markup for a cell
+     * given the cell's data value. See {@link #setRenderer}. If not specified, the
+     * default renderer uses the raw data value.
+     */
+       /**
+     * @cfg {Roo.grid.GridEditor} editor (Optional) For grid editors - returns the grid editor 
+     */
+    /**
+     * @cfg {String} align (Optional) Set the CSS text-align property of the column.  Defaults to undefined.
+     */
+
+    /**
+     * Returns the id of the column at the specified index.
+     * @param {Number} index The column index
+     * @return {String} the id
+     */
+    getColumnId : function(index){
+        return this.config[index].id;
+    },
+
+    /**
+     * Returns the column for a specified id.
+     * @param {String} id The column id
+     * @return {Object} the column
+     */
+    getColumnById : function(id){
+        return this.lookup[id];
+    },
+
+    
+    /**
+     * Returns the column for a specified dataIndex.
+     * @param {String} dataIndex The column dataIndex
+     * @return {Object|Boolean} the column or false if not found
+     */
+    getColumnByDataIndex: function(dataIndex){
+        var index = this.findColumnIndex(dataIndex);
+        return index > -1 ? this.config[index] : false;
+    },
+    
+    /**
+     * Returns the index for a specified column id.
+     * @param {String} id The column id
+     * @return {Number} the index, or -1 if not found
+     */
+    getIndexById : function(id){
+        for(var i = 0, len = this.config.length; i < len; i++){
+            if(this.config[i].id == id){
+                return i;
+            }
+        }
+        return -1;
+    },
+    
+    /**
+     * Returns the index for a specified column dataIndex.
+     * @param {String} dataIndex The column dataIndex
+     * @return {Number} the index, or -1 if not found
+     */
+    
+    findColumnIndex : function(dataIndex){
+        for(var i = 0, len = this.config.length; i < len; i++){
+            if(this.config[i].dataIndex == dataIndex){
+                return i;
+            }
+        }
+        return -1;
+    },
+    
+    
+    moveColumn : function(oldIndex, newIndex){
+        var c = this.config[oldIndex];
+        this.config.splice(oldIndex, 1);
+        this.config.splice(newIndex, 0, c);
+        this.dataMap = null;
+        this.fireEvent("columnmoved", this, oldIndex, newIndex);
+    },
+
+    isLocked : function(colIndex){
+        return this.config[colIndex].locked === true;
+    },
+
+    setLocked : function(colIndex, value, suppressEvent){
+        if(this.isLocked(colIndex) == value){
+            return;
+        }
+        this.config[colIndex].locked = value;
+        if(!suppressEvent){
+            this.fireEvent("columnlockchange", this, colIndex, value);
+        }
+    },
+
+    getTotalLockedWidth : function(){
+        var totalWidth = 0;
+        for(var i = 0; i < this.config.length; i++){
+            if(this.isLocked(i) && !this.isHidden(i)){
+                this.totalWidth += this.getColumnWidth(i);
+            }
+        }
+        return totalWidth;
+    },
+
+    getLockedCount : function(){
+        for(var i = 0, len = this.config.length; i < len; i++){
+            if(!this.isLocked(i)){
+                return i;
+            }
+        }
+    },
+
+    /**
+     * Returns the number of columns.
+     * @return {Number}
+     */
+    getColumnCount : function(visibleOnly){
+        if(visibleOnly === true){
+            var c = 0;
+            for(var i = 0, len = this.config.length; i < len; i++){
+                if(!this.isHidden(i)){
+                    c++;
+                }
+            }
+            return c;
+        }
+        return this.config.length;
+    },
+
+    /**
+     * Returns the column configs that return true by the passed function that is called with (columnConfig, index)
+     * @param {Function} fn
+     * @param {Object} scope (optional)
+     * @return {Array} result
+     */
+    getColumnsBy : function(fn, scope){
+        var r = [];
+        for(var i = 0, len = this.config.length; i < len; i++){
+            var c = this.config[i];
+            if(fn.call(scope||this, c, i) === true){
+                r[r.length] = c;
+            }
+        }
+        return r;
+    },
+
+    /**
+     * Returns true if the specified column is sortable.
+     * @param {Number} col The column index
+     * @return {Boolean}
+     */
+    isSortable : function(col){
+        if(typeof this.config[col].sortable == "undefined"){
+            return this.defaultSortable;
+        }
+        return this.config[col].sortable;
+    },
+
+    /**
+     * Returns the rendering (formatting) function defined for the column.
+     * @param {Number} col The column index.
+     * @return {Function} The function used to render the cell. See {@link #setRenderer}.
+     */
+    getRenderer : function(col){
+        if(!this.config[col].renderer){
+            return Roo.grid.ColumnModel.defaultRenderer;
+        }
+        return this.config[col].renderer;
+    },
+
+    /**
+     * Sets the rendering (formatting) function for a column.
+     * @param {Number} col The column index
+     * @param {Function} fn The function to use to process the cell's raw data
+     * to return HTML markup for the grid view. The render function is called with
+     * the following parameters:<ul>
+     * <li>Data value.</li>
+     * <li>Cell metadata. An object in which you may set the following attributes:<ul>
+     * <li>css A CSS style string to apply to the table cell.</li>
+     * <li>attr An HTML attribute definition string to apply to the data container element <i>within</i> the table cell.</li></ul>
+     * <li>The {@link Roo.data.Record} from which the data was extracted.</li>
+     * <li>Row index</li>
+     * <li>Column index</li>
+     * <li>The {@link Roo.data.Store} object from which the Record was extracted</li></ul>
+     */
+    setRenderer : function(col, fn){
+        this.config[col].renderer = fn;
+    },
+
+    /**
+     * Returns the width for the specified column.
+     * @param {Number} col The column index
+     * @return {Number}
+     */
+    getColumnWidth : function(col){
+        return this.config[col].width || this.defaultWidth;
+    },
+
+    /**
+     * Sets the width for a column.
+     * @param {Number} col The column index
+     * @param {Number} width The new width
+     */
+    setColumnWidth : function(col, width, suppressEvent){
+        this.config[col].width = width;
+        this.totalWidth = null;
+        if(!suppressEvent){
+             this.fireEvent("widthchange", this, col, width);
+        }
+    },
+
+    /**
+     * Returns the total width of all columns.
+     * @param {Boolean} includeHidden True to include hidden column widths
+     * @return {Number}
+     */
+    getTotalWidth : function(includeHidden){
+        if(!this.totalWidth){
+            this.totalWidth = 0;
+            for(var i = 0, len = this.config.length; i < len; i++){
+                if(includeHidden || !this.isHidden(i)){
+                    this.totalWidth += this.getColumnWidth(i);
+                }
+            }
+        }
+        return this.totalWidth;
+    },
+
+    /**
+     * Returns the header for the specified column.
+     * @param {Number} col The column index
+     * @return {String}
+     */
+    getColumnHeader : function(col){
+        return this.config[col].header;
+    },
+
+    /**
+     * Sets the header for a column.
+     * @param {Number} col The column index
+     * @param {String} header The new header
+     */
+    setColumnHeader : function(col, header){
+        this.config[col].header = header;
+        this.fireEvent("headerchange", this, col, header);
+    },
+
+    /**
+     * Returns the tooltip for the specified column.
+     * @param {Number} col The column index
+     * @return {String}
+     */
+    getColumnTooltip : function(col){
+            return this.config[col].tooltip;
+    },
+    /**
+     * Sets the tooltip for a column.
+     * @param {Number} col The column index
+     * @param {String} tooltip The new tooltip
+     */
+    setColumnTooltip : function(col, tooltip){
+            this.config[col].tooltip = tooltip;
+    },
+
+    /**
+     * Returns the dataIndex for the specified column.
+     * @param {Number} col The column index
+     * @return {Number}
+     */
+    getDataIndex : function(col){
+        return this.config[col].dataIndex;
+    },
+
+    /**
+     * Sets the dataIndex for a column.
+     * @param {Number} col The column index
+     * @param {Number} dataIndex The new dataIndex
+     */
+    setDataIndex : function(col, dataIndex){
+        this.config[col].dataIndex = dataIndex;
+    },
+
+    
+    
+    /**
+     * Returns true if the cell is editable.
+     * @param {Number} colIndex The column index
+     * @param {Number} rowIndex The row index
+     * @return {Boolean}
+     */
+    isCellEditable : function(colIndex, rowIndex){
+        return (this.config[colIndex].editable || (typeof this.config[colIndex].editable == "undefined" && this.config[colIndex].editor)) ? true : false;
+    },
+
+    /**
+     * Returns the editor defined for the cell/column.
+     * return false or null to disable editing.
+     * @param {Number} colIndex The column index
+     * @param {Number} rowIndex The row index
+     * @return {Object}
+     */
+    getCellEditor : function(colIndex, rowIndex){
+        return this.config[colIndex].editor;
+    },
+
+    /**
+     * Sets if a column is editable.
+     * @param {Number} col The column index
+     * @param {Boolean} editable True if the column is editable
+     */
+    setEditable : function(col, editable){
+        this.config[col].editable = editable;
+    },
+
+
+    /**
+     * Returns true if the column is hidden.
+     * @param {Number} colIndex The column index
+     * @return {Boolean}
+     */
+    isHidden : function(colIndex){
+        return this.config[colIndex].hidden;
+    },
+
+
+    /**
+     * Returns true if the column width cannot be changed
+     */
+    isFixed : function(colIndex){
+        return this.config[colIndex].fixed;
+    },
+
+    /**
+     * Returns true if the column can be resized
+     * @return {Boolean}
+     */
+    isResizable : function(colIndex){
+        return colIndex >= 0 && this.config[colIndex].resizable !== false && this.config[colIndex].fixed !== true;
+    },
+    /**
+     * Sets if a column is hidden.
+     * @param {Number} colIndex The column index
+     * @param {Boolean} hidden True if the column is hidden
+     */
+    setHidden : function(colIndex, hidden){
+        this.config[colIndex].hidden = hidden;
+        this.totalWidth = null;
+        this.fireEvent("hiddenchange", this, colIndex, hidden);
+    },
+
+    /**
+     * Sets the editor for a column.
+     * @param {Number} col The column index
+     * @param {Object} editor The editor object
+     */
+    setEditor : function(col, editor){
+        this.config[col].editor = editor;
+    }
+});
+
+Roo.grid.ColumnModel.defaultRenderer = function(value){
+	if(typeof value == "string" && value.length < 1){
+	    return "&#160;";
+	}
+	return value;
+};
+
+// Alias for backwards compatibility
+Roo.grid.DefaultColumnModel = Roo.grid.ColumnModel;
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.grid.AbstractSelectionModel
+ * @extends Roo.util.Observable
+ * Abstract base class for grid SelectionModels.  It provides the interface that should be
+ * implemented by descendant classes.  This class should not be directly instantiated.
+ * @constructor
+ */
+Roo.grid.AbstractSelectionModel = function(){
+    this.locked = false;
+    Roo.grid.AbstractSelectionModel.superclass.constructor.call(this);
+};
+
+Roo.extend(Roo.grid.AbstractSelectionModel, Roo.util.Observable,  {
+    /** @ignore Called by the grid automatically. Do not call directly. */
+    init : function(grid){
+        this.grid = grid;
+        this.initEvents();
+    },
+
+    /**
+     * Locks the selections.
+     */
+    lock : function(){
+        this.locked = true;
+    },
+
+    /**
+     * Unlocks the selections.
+     */
+    unlock : function(){
+        this.locked = false;
+    },
+
+    /**
+     * Returns true if the selections are locked.
+     * @return {Boolean}
+     */
+    isLocked : function(){
+        return this.locked;
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @extends Roo.grid.AbstractSelectionModel
+ * @class Roo.grid.RowSelectionModel
+ * The default SelectionModel used by {@link Roo.grid.Grid}.
+ * It supports multiple selections and keyboard selection/navigation. 
+ * @constructor
+ * @param {Object} config
+ */
+Roo.grid.RowSelectionModel = function(config){
+    Roo.apply(this, config);
+    this.selections = new Roo.util.MixedCollection(false, function(o){
+        return o.id;
+    });
+
+    this.last = false;
+    this.lastActive = false;
+
+    this.addEvents({
+        /**
+	     * @event selectionchange
+	     * Fires when the selection changes
+	     * @param {SelectionModel} this
+	     */
+	    "selectionchange" : true,
+        /**
+	     * @event afterselectionchange
+	     * Fires after the selection changes (eg. by key press or clicking)
+	     * @param {SelectionModel} this
+	     */
+	    "afterselectionchange" : true,
+        /**
+	     * @event beforerowselect
+	     * Fires when a row is selected being selected, return false to cancel.
+	     * @param {SelectionModel} this
+	     * @param {Number} rowIndex The selected index
+	     * @param {Boolean} keepExisting False if other selections will be cleared
+	     */
+	    "beforerowselect" : true,
+        /**
+	     * @event rowselect
+	     * Fires when a row is selected.
+	     * @param {SelectionModel} this
+	     * @param {Number} rowIndex The selected index
+	     * @param {Roo.data.Record} r The record
+	     */
+	    "rowselect" : true,
+        /**
+	     * @event rowdeselect
+	     * Fires when a row is deselected.
+	     * @param {SelectionModel} this
+	     * @param {Number} rowIndex The selected index
+	     */
+        "rowdeselect" : true
+    });
+    Roo.grid.RowSelectionModel.superclass.constructor.call(this);
+    this.locked = false;
+};
+
+Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
+    /**
+     * @cfg {Boolean} singleSelect
+     * True to allow selection of only one row at a time (defaults to false)
+     */
+    singleSelect : false,
+
+    // private
+    initEvents : function(){
+
+        if(!this.grid.enableDragDrop && !this.grid.enableDrag){
+            this.grid.on("mousedown", this.handleMouseDown, this);
+        }else{ // allow click to work like normal
+            this.grid.on("rowclick", this.handleDragableRowClick, this);
+        }
+
+        this.rowNav = new Roo.KeyNav(this.grid.getGridEl(), {
+            "up" : function(e){
+                if(!e.shiftKey){
+                    this.selectPrevious(e.shiftKey);
+                }else if(this.last !== false && this.lastActive !== false){
+                    var last = this.last;
+                    this.selectRange(this.last,  this.lastActive-1);
+                    this.grid.getView().focusRow(this.lastActive);
+                    if(last !== false){
+                        this.last = last;
+                    }
+                }else{
+                    this.selectFirstRow();
+                }
+                this.fireEvent("afterselectionchange", this);
+            },
+            "down" : function(e){
+                if(!e.shiftKey){
+                    this.selectNext(e.shiftKey);
+                }else if(this.last !== false && this.lastActive !== false){
+                    var last = this.last;
+                    this.selectRange(this.last,  this.lastActive+1);
+                    this.grid.getView().focusRow(this.lastActive);
+                    if(last !== false){
+                        this.last = last;
+                    }
+                }else{
+                    this.selectFirstRow();
+                }
+                this.fireEvent("afterselectionchange", this);
+            },
+            scope: this
+        });
+
+        var view = this.grid.view;
+        view.on("refresh", this.onRefresh, this);
+        view.on("rowupdated", this.onRowUpdated, this);
+        view.on("rowremoved", this.onRemove, this);
+    },
+
+    // private
+    onRefresh : function(){
+        var ds = this.grid.dataSource, i, v = this.grid.view;
+        var s = this.selections;
+        s.each(function(r){
+            if((i = ds.indexOfId(r.id)) != -1){
+                v.onRowSelect(i);
+            }else{
+                s.remove(r);
+            }
+        });
+    },
+
+    // private
+    onRemove : function(v, index, r){
+        this.selections.remove(r);
+    },
+
+    // private
+    onRowUpdated : function(v, index, r){
+        if(this.isSelected(r)){
+            v.onRowSelect(index);
+        }
+    },
+
+    /**
+     * Select records.
+     * @param {Array} records The records to select
+     * @param {Boolean} keepExisting (optional) True to keep existing selections
+     */
+    selectRecords : function(records, keepExisting){
+        if(!keepExisting){
+            this.clearSelections();
+        }
+        var ds = this.grid.dataSource;
+        for(var i = 0, len = records.length; i < len; i++){
+            this.selectRow(ds.indexOf(records[i]), true);
+        }
+    },
+
+    /**
+     * Gets the number of selected rows.
+     * @return {Number}
+     */
+    getCount : function(){
+        return this.selections.length;
+    },
+
+    /**
+     * Selects the first row in the grid.
+     */
+    selectFirstRow : function(){
+        this.selectRow(0);
+    },
+
+    /**
+     * Select the last row.
+     * @param {Boolean} keepExisting (optional) True to keep existing selections
+     */
+    selectLastRow : function(keepExisting){
+        this.selectRow(this.grid.dataSource.getCount() - 1, keepExisting);
+    },
+
+    /**
+     * Selects the row immediately following the last selected row.
+     * @param {Boolean} keepExisting (optional) True to keep existing selections
+     */
+    selectNext : function(keepExisting){
+        if(this.last !== false && (this.last+1) < this.grid.dataSource.getCount()){
+            this.selectRow(this.last+1, keepExisting);
+            this.grid.getView().focusRow(this.last);
+        }
+    },
+
+    /**
+     * Selects the row that precedes the last selected row.
+     * @param {Boolean} keepExisting (optional) True to keep existing selections
+     */
+    selectPrevious : function(keepExisting){
+        if(this.last){
+            this.selectRow(this.last-1, keepExisting);
+            this.grid.getView().focusRow(this.last);
+        }
+    },
+
+    /**
+     * Returns the selected records
+     * @return {Array} Array of selected records
+     */
+    getSelections : function(){
+        return [].concat(this.selections.items);
+    },
+
+    /**
+     * Returns the first selected record.
+     * @return {Record}
+     */
+    getSelected : function(){
+        return this.selections.itemAt(0);
+    },
+
+
+    /**
+     * Clears all selections.
+     */
+    clearSelections : function(fast){
+        if(this.locked) return;
+        if(fast !== true){
+            var ds = this.grid.dataSource;
+            var s = this.selections;
+            s.each(function(r){
+                this.deselectRow(ds.indexOfId(r.id));
+            }, this);
+            s.clear();
+        }else{
+            this.selections.clear();
+        }
+        this.last = false;
+    },
+
+
+    /**
+     * Selects all rows.
+     */
+    selectAll : function(){
+        if(this.locked) return;
+        this.selections.clear();
+        for(var i = 0, len = this.grid.dataSource.getCount(); i < len; i++){
+            this.selectRow(i, true);
+        }
+    },
+
+    /**
+     * Returns True if there is a selection.
+     * @return {Boolean}
+     */
+    hasSelection : function(){
+        return this.selections.length > 0;
+    },
+
+    /**
+     * Returns True if the specified row is selected.
+     * @param {Number/Record} record The record or index of the record to check
+     * @return {Boolean}
+     */
+    isSelected : function(index){
+        var r = typeof index == "number" ? this.grid.dataSource.getAt(index) : index;
+        return (r && this.selections.key(r.id) ? true : false);
+    },
+
+    /**
+     * Returns True if the specified record id is selected.
+     * @param {String} id The id of record to check
+     * @return {Boolean}
+     */
+    isIdSelected : function(id){
+        return (this.selections.key(id) ? true : false);
+    },
+
+    // private
+    handleMouseDown : function(e, t){
+        var view = this.grid.getView(), rowIndex;
+        if(this.isLocked() || (rowIndex = view.findRowIndex(t)) === false){
+            return;
+        };
+        if(e.shiftKey && this.last !== false){
+            var last = this.last;
+            this.selectRange(last, rowIndex, e.ctrlKey);
+            this.last = last; // reset the last
+            view.focusRow(rowIndex);
+        }else{
+            var isSelected = this.isSelected(rowIndex);
+            if(e.button !== 0 && isSelected){
+                view.focusRow(rowIndex);
+            }else if(e.ctrlKey && isSelected){
+                this.deselectRow(rowIndex);
+            }else if(!isSelected){
+                this.selectRow(rowIndex, e.button === 0 && (e.ctrlKey || e.shiftKey));
+                view.focusRow(rowIndex);
+            }
+        }
+        this.fireEvent("afterselectionchange", this);
+    },
+    // private
+    handleDragableRowClick :  function(grid, rowIndex, e) 
+    {
+        if(e.button === 0 && !e.shiftKey && !e.ctrlKey) {
+            this.selectRow(rowIndex, false);
+            grid.view.focusRow(rowIndex);
+             this.fireEvent("afterselectionchange", this);
+        }
+    },
+    
+    /**
+     * Selects multiple rows.
+     * @param {Array} rows Array of the indexes of the row to select
+     * @param {Boolean} keepExisting (optional) True to keep existing selections
+     */
+    selectRows : function(rows, keepExisting){
+        if(!keepExisting){
+            this.clearSelections();
+        }
+        for(var i = 0, len = rows.length; i < len; i++){
+            this.selectRow(rows[i], true);
+        }
+    },
+
+    /**
+     * Selects a range of rows. All rows in between startRow and endRow are also selected.
+     * @param {Number} startRow The index of the first row in the range
+     * @param {Number} endRow The index of the last row in the range
+     * @param {Boolean} keepExisting (optional) True to retain existing selections
+     */
+    selectRange : function(startRow, endRow, keepExisting){
+        if(this.locked) return;
+        if(!keepExisting){
+            this.clearSelections();
+        }
+        if(startRow <= endRow){
+            for(var i = startRow; i <= endRow; i++){
+                this.selectRow(i, true);
+            }
+        }else{
+            for(var i = startRow; i >= endRow; i--){
+                this.selectRow(i, true);
+            }
+        }
+    },
+
+    /**
+     * Deselects a range of rows. All rows in between startRow and endRow are also deselected.
+     * @param {Number} startRow The index of the first row in the range
+     * @param {Number} endRow The index of the last row in the range
+     */
+    deselectRange : function(startRow, endRow, preventViewNotify){
+        if(this.locked) return;
+        for(var i = startRow; i <= endRow; i++){
+            this.deselectRow(i, preventViewNotify);
+        }
+    },
+
+    /**
+     * Selects a row.
+     * @param {Number} row The index of the row to select
+     * @param {Boolean} keepExisting (optional) True to keep existing selections
+     */
+    selectRow : function(index, keepExisting, preventViewNotify){
+        if(this.locked || (index < 0 || index >= this.grid.dataSource.getCount())) return;
+        if(this.fireEvent("beforerowselect", this, index, keepExisting) !== false){
+            if(!keepExisting || this.singleSelect){
+                this.clearSelections();
+            }
+            var r = this.grid.dataSource.getAt(index);
+            this.selections.add(r);
+            this.last = this.lastActive = index;
+            if(!preventViewNotify){
+                this.grid.getView().onRowSelect(index);
+            }
+            this.fireEvent("rowselect", this, index, r);
+            this.fireEvent("selectionchange", this);
+        }
+    },
+
+    /**
+     * Deselects a row.
+     * @param {Number} row The index of the row to deselect
+     */
+    deselectRow : function(index, preventViewNotify){
+        if(this.locked) return;
+        if(this.last == index){
+            this.last = false;
+        }
+        if(this.lastActive == index){
+            this.lastActive = false;
+        }
+        var r = this.grid.dataSource.getAt(index);
+        this.selections.remove(r);
+        if(!preventViewNotify){
+            this.grid.getView().onRowDeselect(index);
+        }
+        this.fireEvent("rowdeselect", this, index);
+        this.fireEvent("selectionchange", this);
+    },
+
+    // private
+    restoreLast : function(){
+        if(this._last){
+            this.last = this._last;
+        }
+    },
+
+    // private
+    acceptsNav : function(row, col, cm){
+        return !cm.isHidden(col) && cm.isCellEditable(col, row);
+    },
+
+    // private
+    onEditorKey : function(field, e){
+        var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
+        if(k == e.TAB){
+            e.stopEvent();
+            ed.completeEdit();
+            if(e.shiftKey){
+                newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
+            }else{
+                newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
+            }
+        }else if(k == e.ENTER && !e.ctrlKey){
+            e.stopEvent();
+            ed.completeEdit();
+            if(e.shiftKey){
+                newCell = g.walkCells(ed.row-1, ed.col, -1, this.acceptsNav, this);
+            }else{
+                newCell = g.walkCells(ed.row+1, ed.col, 1, this.acceptsNav, this);
+            }
+        }else if(k == e.ESC){
+            ed.cancelEdit();
+        }
+        if(newCell){
+            g.startEditing(newCell[0], newCell[1]);
+        }
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.grid.CellSelectionModel
+ * @extends Roo.grid.AbstractSelectionModel
+ * This class provides the basic implementation for cell selection in a grid.
+ * @constructor
+ * @param {Object} config The object containing the configuration of this model.
+ */
+Roo.grid.CellSelectionModel = function(config){
+    Roo.apply(this, config);
+
+    this.selection = null;
+
+    this.addEvents({
+        /**
+	     * @event beforerowselect
+	     * Fires before a cell is selected.
+	     * @param {SelectionModel} this
+	     * @param {Number} rowIndex The selected row index
+	     * @param {Number} colIndex The selected cell index
+	     */
+	    "beforecellselect" : true,
+        /**
+	     * @event cellselect
+	     * Fires when a cell is selected.
+	     * @param {SelectionModel} this
+	     * @param {Number} rowIndex The selected row index
+	     * @param {Number} colIndex The selected cell index
+	     */
+	    "cellselect" : true,
+        /**
+	     * @event selectionchange
+	     * Fires when the active selection changes.
+	     * @param {SelectionModel} this
+	     * @param {Object} selection null for no selection or an object (o) with two properties
+	        <ul>
+	        <li>o.record: the record object for the row the selection is in</li>
+	        <li>o.cell: An array of [rowIndex, columnIndex]</li>
+	        </ul>
+	     */
+	    "selectionchange" : true
+    });
+    Roo.grid.CellSelectionModel.superclass.constructor.call(this);
+};
+
+Roo.extend(Roo.grid.CellSelectionModel, Roo.grid.AbstractSelectionModel,  {
+
+    /** @ignore */
+    initEvents : function(){
+        this.grid.on("mousedown", this.handleMouseDown, this);
+        this.grid.getGridEl().on(Roo.isIE ? "keydown" : "keypress", this.handleKeyDown, this);
+        var view = this.grid.view;
+        view.on("refresh", this.onViewChange, this);
+        view.on("rowupdated", this.onRowUpdated, this);
+        view.on("beforerowremoved", this.clearSelections, this);
+        view.on("beforerowsinserted", this.clearSelections, this);
+        if(this.grid.isEditor){
+            this.grid.on("beforeedit", this.beforeEdit,  this);
+        }
+    },
+
+	//private
+    beforeEdit : function(e){
+        this.select(e.row, e.column, false, true, e.record);
+    },
+
+	//private
+    onRowUpdated : function(v, index, r){
+        if(this.selection && this.selection.record == r){
+            v.onCellSelect(index, this.selection.cell[1]);
+        }
+    },
+
+	//private
+    onViewChange : function(){
+        this.clearSelections(true);
+    },
+
+	/**
+	 * Returns the currently selected cell,.
+	 * @return {Array} The selected cell (row, column) or null if none selected.
+	 */
+    getSelectedCell : function(){
+        return this.selection ? this.selection.cell : null;
+    },
+
+    /**
+     * Clears all selections.
+     * @param {Boolean} true to prevent the gridview from being notified about the change.
+     */
+    clearSelections : function(preventNotify){
+        var s = this.selection;
+        if(s){
+            if(preventNotify !== true){
+                this.grid.view.onCellDeselect(s.cell[0], s.cell[1]);
+            }
+            this.selection = null;
+            this.fireEvent("selectionchange", this, null);
+        }
+    },
+
+    /**
+     * Returns true if there is a selection.
+     * @return {Boolean}
+     */
+    hasSelection : function(){
+        return this.selection ? true : false;
+    },
+
+    /** @ignore */
+    handleMouseDown : function(e, t){
+        var v = this.grid.getView();
+        if(this.isLocked()){
+            return;
+        };
+        var row = v.findRowIndex(t);
+        var cell = v.findCellIndex(t);
+        if(row !== false && cell !== false){
+            this.select(row, cell);
+        }
+    },
+
+    /**
+     * Selects a cell.
+     * @param {Number} rowIndex
+     * @param {Number} collIndex
+     */
+    select : function(rowIndex, colIndex, preventViewNotify, preventFocus, /*internal*/ r){
+        if(this.fireEvent("beforecellselect", this, rowIndex, colIndex) !== false){
+            this.clearSelections();
+            r = r || this.grid.dataSource.getAt(rowIndex);
+            this.selection = {
+                record : r,
+                cell : [rowIndex, colIndex]
+            };
+            if(!preventViewNotify){
+                var v = this.grid.getView();
+                v.onCellSelect(rowIndex, colIndex);
+                if(preventFocus !== true){
+                    v.focusCell(rowIndex, colIndex);
+                }
+            }
+            this.fireEvent("cellselect", this, rowIndex, colIndex);
+            this.fireEvent("selectionchange", this, this.selection);
+        }
+    },
+
+	//private
+    isSelectable : function(rowIndex, colIndex, cm){
+        return !cm.isHidden(colIndex);
+    },
+
+    /** @ignore */
+    handleKeyDown : function(e){
+        Roo.log('Cell Sel Model handleKeyDown');
+        if(!e.isNavKeyPress()){
+            return;
+        }
+        var g = this.grid, s = this.selection;
+        if(!s){
+            e.stopEvent();
+            var cell = g.walkCells(0, 0, 1, this.isSelectable,  this);
+            if(cell){
+                this.select(cell[0], cell[1]);
+            }
+            return;
+        }
+        var sm = this;
+        var walk = function(row, col, step){
+            return g.walkCells(row, col, step, sm.isSelectable,  sm);
+        };
+        var k = e.getKey(), r = s.cell[0], c = s.cell[1];
+        var newCell;
+
+        switch(k){
+            case e.TAB:
+                // handled by onEditorKey
+                if (g.isEditor && g.editing) {
+                    return;
+                }
+                if(e.shiftKey){
+                     newCell = walk(r, c-1, -1);
+                }else{
+                     newCell = walk(r, c+1, 1);
+                }
+             break;
+             case e.DOWN:
+                 newCell = walk(r+1, c, 1);
+             break;
+             case e.UP:
+                 newCell = walk(r-1, c, -1);
+             break;
+             case e.RIGHT:
+                 newCell = walk(r, c+1, 1);
+             break;
+             case e.LEFT:
+                 newCell = walk(r, c-1, -1);
+             break;
+             case e.ENTER:
+                 if(g.isEditor && !g.editing){
+                    g.startEditing(r, c);
+                    e.stopEvent();
+                    return;
+                }
+             break;
+        };
+        if(newCell){
+            this.select(newCell[0], newCell[1]);
+            e.stopEvent();
+        }
+    },
+
+    acceptsNav : function(row, col, cm){
+        return !cm.isHidden(col) && cm.isCellEditable(col, row);
+    },
+
+    onEditorKey : function(field, e){
+        
+        var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
+        ///Roo.log('onEditorKey' + k);
+        
+        if(k == e.TAB){
+            if(e.shiftKey){
+                newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
+            }else{
+                newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
+            }
+            e.stopEvent();
+        }else if(k == e.ENTER && !e.ctrlKey){
+            ed.completeEdit();
+            e.stopEvent();
+            newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
+        }else if(k == e.ESC){
+            ed.cancelEdit();
+        }
+        
+        
+        if(newCell){
+            //Roo.log('next cell after edit');
+            g.startEditing.defer(100, g, [newCell[0], newCell[1]]);
+        }
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+/**
+ * @class Roo.grid.EditorGrid
+ * @extends Roo.grid.Grid
+ * Class for creating and editable grid.
+ * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered - 
+ * The container MUST have some type of size defined for the grid to fill. The container will be 
+ * automatically set to position relative if it isn't already.
+ * @param {Object} dataSource The data model to bind to
+ * @param {Object} colModel The column model with info about this grid's columns
+ */
+Roo.grid.EditorGrid = function(container, config){
+    Roo.grid.EditorGrid.superclass.constructor.call(this, container, config);
+    this.getGridEl().addClass("xedit-grid");
+
+    if(!this.selModel){
+        this.selModel = new Roo.grid.CellSelectionModel();
+    }
+
+    this.activeEditor = null;
+
+	this.addEvents({
+	    /**
+	     * @event beforeedit
+	     * Fires before cell editing is triggered. The edit event object has the following properties <br />
+	     * <ul style="padding:5px;padding-left:16px;">
+	     * <li>grid - This grid</li>
+	     * <li>record - The record being edited</li>
+	     * <li>field - The field name being edited</li>
+	     * <li>value - The value for the field being edited.</li>
+	     * <li>row - The grid row index</li>
+	     * <li>column - The grid column index</li>
+	     * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
+	     * </ul>
+	     * @param {Object} e An edit event (see above for description)
+	     */
+	    "beforeedit" : true,
+	    /**
+	     * @event afteredit
+	     * Fires after a cell is edited. <br />
+	     * <ul style="padding:5px;padding-left:16px;">
+	     * <li>grid - This grid</li>
+	     * <li>record - The record being edited</li>
+	     * <li>field - The field name being edited</li>
+	     * <li>value - The value being set</li>
+	     * <li>originalValue - The original value for the field, before the edit.</li>
+	     * <li>row - The grid row index</li>
+	     * <li>column - The grid column index</li>
+	     * </ul>
+	     * @param {Object} e An edit event (see above for description)
+	     */
+	    "afteredit" : true,
+	    /**
+	     * @event validateedit
+	     * Fires after a cell is edited, but before the value is set in the record. 
+         * You can use this to modify the value being set in the field, Return false
+	     * to cancel the change. The edit event object has the following properties <br />
+	     * <ul style="padding:5px;padding-left:16px;">
+         * <li>editor - This editor</li>
+	     * <li>grid - This grid</li>
+	     * <li>record - The record being edited</li>
+	     * <li>field - The field name being edited</li>
+	     * <li>value - The value being set</li>
+	     * <li>originalValue - The original value for the field, before the edit.</li>
+	     * <li>row - The grid row index</li>
+	     * <li>column - The grid column index</li>
+	     * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
+	     * </ul>
+	     * @param {Object} e An edit event (see above for description)
+	     */
+	    "validateedit" : true
+	});
+    this.on("bodyscroll", this.stopEditing,  this);
+    this.on(this.clicksToEdit == 1 ? "cellclick" : "celldblclick", this.onCellDblClick,  this);
+};
+
+Roo.extend(Roo.grid.EditorGrid, Roo.grid.Grid, {
+    /**
+     * @cfg {Number} clicksToEdit
+     * The number of clicks on a cell required to display the cell's editor (defaults to 2)
+     */
+    clicksToEdit: 2,
+
+    // private
+    isEditor : true,
+    // private
+    trackMouseOver: false, // causes very odd FF errors
+
+    onCellDblClick : function(g, row, col){
+        this.startEditing(row, col);
+    },
+
+    onEditComplete : function(ed, value, startValue){
+        this.editing = false;
+        this.activeEditor = null;
+        ed.un("specialkey", this.selModel.onEditorKey, this.selModel);
+        var r = ed.record;
+        var field = this.colModel.getDataIndex(ed.col);
+        var e = {
+            grid: this,
+            record: r,
+            field: field,
+            originalValue: startValue,
+            value: value,
+            row: ed.row,
+            column: ed.col,
+            cancel:false,
+            editor: ed
+        };
+        if(String(value) !== String(startValue)){
+            
+            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 fire it!
+        }
+        this.view.focusCell(ed.row, ed.col);
+    },
+
+    /**
+     * Starts editing the specified for the specified row/column
+     * @param {Number} rowIndex
+     * @param {Number} colIndex
+     */
+    startEditing : function(row, col){
+        this.stopEditing();
+        if(this.colModel.isCellEditable(col, row)){
+            this.view.ensureVisible(row, col, true);
+            var r = this.dataSource.getAt(row);
+            var field = this.colModel.getDataIndex(col);
+            var e = {
+                grid: this,
+                record: r,
+                field: field,
+                value: r.data[field],
+                row: row,
+                column: col,
+                cancel:false
+            };
+            if(this.fireEvent("beforeedit", e) !== false && !e.cancel){
+                this.editing = true;
+                var ed = this.colModel.getCellEditor(col, row);
+                
+                if (!ed) {
+                    return;
+                }
+                if(!ed.rendered){
+                    ed.render(ed.parentEl || document.body);
+                }
+                ed.field.reset();
+                (function(){ // complex but required for focus issues in safari, ie and opera
+                    ed.row = row;
+                    ed.col = col;
+                    ed.record = r;
+                    ed.on("complete", this.onEditComplete, this, {single: true});
+                    ed.on("specialkey", this.selModel.onEditorKey, this.selModel);
+                    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);
+            }
+        }
+    },
+        
+    /**
+     * Stops any active editing
+     */
+    stopEditing : function(){
+        if(this.activeEditor){
+            this.activeEditor.completeEdit();
+        }
+        this.activeEditor = null;
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+// private - not really -- you end up using it !
+// This is a support class used internally by the Grid components
+
+/**
+ * @class Roo.grid.GridEditor
+ * @extends Roo.Editor
+ * Class for creating and editable grid elements.
+ * @param {Object} config any settings (must include field)
+ */
+Roo.grid.GridEditor = function(field, config){
+    if (!config && field.field) {
+        config = field;
+        field = Roo.factory(config.field, Roo.form);
+    }
+    Roo.grid.GridEditor.superclass.constructor.call(this, field, config);
+    field.monitorTab = false;
+};
+
+Roo.extend(Roo.grid.GridEditor, Roo.Editor, {
+    
+    /**
+     * @cfg {Roo.form.Field} field Field to wrap (or xtyped)
+     */
+    
+    alignment: "tl-tl",
+    autoSize: "width",
+    hideEl : false,
+    cls: "x-small-editor x-grid-editor",
+    shim:false,
+    shadow:"frame"
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+  
+
+  
+Roo.grid.PropertyRecord = Roo.data.Record.create([
+    {name:'name',type:'string'},  'value'
+]);
+
+
+Roo.grid.PropertyStore = function(grid, source){
+    this.grid = grid;
+    this.store = new Roo.data.Store({
+        recordType : Roo.grid.PropertyRecord
+    });
+    this.store.on('update', this.onUpdate,  this);
+    if(source){
+        this.setSource(source);
+    }
+    Roo.grid.PropertyStore.superclass.constructor.call(this);
+};
+
+
+
+Roo.extend(Roo.grid.PropertyStore, Roo.util.Observable, {
+    setSource : function(o){
+        this.source = o;
+        this.store.removeAll();
+        var data = [];
+        for(var k in o){
+            if(this.isEditableValue(o[k])){
+                data.push(new Roo.grid.PropertyRecord({name: k, value: o[k]}, k));
+            }
+        }
+        this.store.loadRecords({records: data}, {}, true);
+    },
+
+    onUpdate : function(ds, record, type){
+        if(type == Roo.data.Record.EDIT){
+            var v = record.data['value'];
+            var oldValue = record.modified['value'];
+            if(this.grid.fireEvent('beforepropertychange', this.source, record.id, v, oldValue) !== false){
+                this.source[record.id] = v;
+                record.commit();
+                this.grid.fireEvent('propertychange', this.source, record.id, v, oldValue);
+            }else{
+                record.reject();
+            }
+        }
+    },
+
+    getProperty : function(row){
+       return this.store.getAt(row);
+    },
+
+    isEditableValue: function(val){
+        if(val && val instanceof Date){
+            return true;
+        }else if(typeof val == 'object' || typeof val == 'function'){
+            return false;
+        }
+        return true;
+    },
+
+    setValue : function(prop, value){
+        this.source[prop] = value;
+        this.store.getById(prop).set('value', value);
+    },
+
+    getSource : function(){
+        return this.source;
+    }
+});
+
+Roo.grid.PropertyColumnModel = function(grid, store){
+    this.grid = grid;
+    var g = Roo.grid;
+    g.PropertyColumnModel.superclass.constructor.call(this, [
+        {header: this.nameText, sortable: true, dataIndex:'name', id: 'name'},
+        {header: this.valueText, resizable:false, dataIndex: 'value', id: 'value'}
+    ]);
+    this.store = store;
+    this.bselect = Roo.DomHelper.append(document.body, {
+        tag: 'select', style:'display:none', cls: 'x-grid-editor', children: [
+            {tag: 'option', value: 'true', html: 'true'},
+            {tag: 'option', value: 'false', html: 'false'}
+        ]
+    });
+    Roo.id(this.bselect);
+    var f = Roo.form;
+    this.editors = {
+        'date' : new g.GridEditor(new f.DateField({selectOnFocus:true})),
+        'string' : new g.GridEditor(new f.TextField({selectOnFocus:true})),
+        'number' : new g.GridEditor(new f.NumberField({selectOnFocus:true, style:'text-align:left;'})),
+        'int' : new g.GridEditor(new f.NumberField({selectOnFocus:true, allowDecimals:false, style:'text-align:left;'})),
+        'boolean' : new g.GridEditor(new f.Field({el:this.bselect,selectOnFocus:true}))
+    };
+    this.renderCellDelegate = this.renderCell.createDelegate(this);
+    this.renderPropDelegate = this.renderProp.createDelegate(this);
+};
+
+Roo.extend(Roo.grid.PropertyColumnModel, Roo.grid.ColumnModel, {
+    
+    
+    nameText : 'Name',
+    valueText : 'Value',
+    
+    dateFormat : 'm/j/Y',
+    
+    
+    renderDate : function(dateVal){
+        return dateVal.dateFormat(this.dateFormat);
+    },
+
+    renderBool : function(bVal){
+        return bVal ? 'true' : 'false';
+    },
+
+    isCellEditable : function(colIndex, rowIndex){
+        return colIndex == 1;
+    },
+
+    getRenderer : function(col){
+        return col == 1 ?
+            this.renderCellDelegate : this.renderPropDelegate;
+    },
+
+    renderProp : function(v){
+        return this.getPropertyName(v);
+    },
+
+    renderCell : function(val){
+        var rv = val;
+        if(val instanceof Date){
+            rv = this.renderDate(val);
+        }else if(typeof val == 'boolean'){
+            rv = this.renderBool(val);
+        }
+        return Roo.util.Format.htmlEncode(rv);
+    },
+
+    getPropertyName : function(name){
+        var pn = this.grid.propertyNames;
+        return pn && pn[name] ? pn[name] : name;
+    },
+
+    getCellEditor : function(colIndex, rowIndex){
+        var p = this.store.getProperty(rowIndex);
+        var n = p.data['name'], val = p.data['value'];
+        
+        if(typeof(this.grid.customEditors[n]) == 'string'){
+            return this.editors[this.grid.customEditors[n]];
+        }
+        if(typeof(this.grid.customEditors[n]) != 'undefined'){
+            return this.grid.customEditors[n];
+        }
+        if(val instanceof Date){
+            return this.editors['date'];
+        }else if(typeof val == 'number'){
+            return this.editors['number'];
+        }else if(typeof val == 'boolean'){
+            return this.editors['boolean'];
+        }else{
+            return this.editors['string'];
+        }
+    }
+});
+
+/**
+ * @class Roo.grid.PropertyGrid
+ * @extends Roo.grid.EditorGrid
+ * This class represents the  interface of a component based property grid control.
+ * <br><br>Usage:<pre><code>
+ var grid = new Roo.grid.PropertyGrid("my-container-id", {
+      
+ });
+ // set any options
+ grid.render();
+ * </code></pre>
+  
+ * @constructor
+ * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
+ * The container MUST have some type of size defined for the grid to fill. The container will be
+ * automatically set to position relative if it isn't already.
+ * @param {Object} config A config object that sets properties on this grid.
+ */
+Roo.grid.PropertyGrid = function(container, config){
+    config = config || {};
+    var store = new Roo.grid.PropertyStore(this);
+    this.store = store;
+    var cm = new Roo.grid.PropertyColumnModel(this, store);
+    store.store.sort('name', 'ASC');
+    Roo.grid.PropertyGrid.superclass.constructor.call(this, container, Roo.apply({
+        ds: store.store,
+        cm: cm,
+        enableColLock:false,
+        enableColumnMove:false,
+        stripeRows:false,
+        trackMouseOver: false,
+        clicksToEdit:1
+    }, config));
+    this.getGridEl().addClass('x-props-grid');
+    this.lastEditRow = null;
+    this.on('columnresize', this.onColumnResize, this);
+    this.addEvents({
+         /**
+	     * @event beforepropertychange
+	     * Fires before a property changes (return false to stop?)
+	     * @param {Roo.grid.PropertyGrid} grid property grid? (check could be store)
+	     * @param {String} id Record Id
+	     * @param {String} newval New Value
+         * @param {String} oldval Old Value
+	     */
+        "beforepropertychange": true,
+        /**
+	     * @event propertychange
+	     * Fires after a property changes
+	     * @param {Roo.grid.PropertyGrid} grid property grid? (check could be store)
+	     * @param {String} id Record Id
+	     * @param {String} newval New Value
+         * @param {String} oldval Old Value
+	     */
+        "propertychange": true
+    });
+    this.customEditors = this.customEditors || {};
+};
+Roo.extend(Roo.grid.PropertyGrid, Roo.grid.EditorGrid, {
+    
+     /**
+     * @cfg {Object} customEditors map of colnames=> custom editors.
+     * the custom editor can be one of the standard ones (date|string|number|int|boolean), or a
+     * grid editor eg. Roo.grid.GridEditor(new Roo.form.TextArea({selectOnFocus:true})),
+     * false disables editing of the field.
+	 */
+    
+      /**
+     * @cfg {Object} propertyNames map of property Names to their displayed value
+	 */
+    
+    render : function(){
+        Roo.grid.PropertyGrid.superclass.render.call(this);
+        this.autoSize.defer(100, this);
+    },
+
+    autoSize : function(){
+        Roo.grid.PropertyGrid.superclass.autoSize.call(this);
+        if(this.view){
+            this.view.fitColumns();
+        }
+    },
+
+    onColumnResize : function(){
+        this.colModel.setColumnWidth(1, this.container.getWidth(true)-this.colModel.getColumnWidth(0));
+        this.autoSize();
+    },
+    /**
+     * Sets the data for the Grid
+     * accepts a Key => Value object of all the elements avaiable.
+     * @param {Object} data  to appear in grid.
+     */
+    setSource : function(source){
+        this.store.setSource(source);
+        //this.autoSize();
+    },
+    /**
+     * Gets all the data from the grid.
+     * @return {Object} data  data stored in grid
+     */
+    getSource : function(){
+        return this.store.getSource();
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+/**
+ * @class Roo.LoadMask
+ * A simple utility class for generically masking elements while loading data.  If the element being masked has
+ * an underlying {@link Roo.data.Store}, the masking will be automatically synchronized with the store's loading
+ * process and the mask element will be cached for reuse.  For all other elements, this mask will replace the
+ * element's UpdateManager load indicator and will be destroyed after the initial load.
+ * @constructor
+ * Create a new LoadMask
+ * @param {String/HTMLElement/Roo.Element} el The element or DOM node, or its id
+ * @param {Object} config The config object
+ */
+Roo.LoadMask = function(el, config){
+    this.el = Roo.get(el);
+    Roo.apply(this, config);
+    if(this.store){
+        this.store.on('beforeload', this.onBeforeLoad, this);
+        this.store.on('load', this.onLoad, this);
+        this.store.on('loadexception', this.onLoad, this);
+        this.removeMask = false;
+    }else{
+        var um = this.el.getUpdateManager();
+        um.showLoadIndicator = false; // disable the default indicator
+        um.on('beforeupdate', this.onBeforeLoad, this);
+        um.on('update', this.onLoad, this);
+        um.on('failure', this.onLoad, this);
+        this.removeMask = true;
+    }
+};
+
+Roo.LoadMask.prototype = {
+    /**
+     * @cfg {Boolean} removeMask
+     * True to create a single-use mask that is automatically destroyed after loading (useful for page loads),
+     * False to persist the mask element reference for multiple uses (e.g., for paged data widgets).  Defaults to false.
+     */
+    /**
+     * @cfg {String} msg
+     * The text to display in a centered loading message box (defaults to 'Loading...')
+     */
+    msg : 'Loading...',
+    /**
+     * @cfg {String} msgCls
+     * The CSS class to apply to the loading message element (defaults to "x-mask-loading")
+     */
+    msgCls : 'x-mask-loading',
+
+    /**
+     * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false)
+     * @type Boolean
+     */
+    disabled: false,
+
+    /**
+     * Disables the mask to prevent it from being displayed
+     */
+    disable : function(){
+       this.disabled = true;
+    },
+
+    /**
+     * Enables the mask so that it can be displayed
+     */
+    enable : function(){
+        this.disabled = false;
+    },
+
+    // private
+    onLoad : function(){
+        this.el.unmask(this.removeMask);
+    },
+
+    // private
+    onBeforeLoad : function(){
+        if(!this.disabled){
+            this.el.mask(this.msg, this.msgCls);
+        }
+    },
+
+    // private
+    destroy : function(){
+        if(this.store){
+            this.store.un('beforeload', this.onBeforeLoad, this);
+            this.store.un('load', this.onLoad, this);
+            this.store.un('loadexception', this.onLoad, this);
+        }else{
+            var um = this.el.getUpdateManager();
+            um.un('beforeupdate', this.onBeforeLoad, this);
+            um.un('update', this.onLoad, this);
+            um.un('failure', this.onLoad, this);
+        }
+    }
+};/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+Roo.XTemplate = function(){
+    Roo.XTemplate.superclass.constructor.apply(this, arguments);
+    var s = this.html;
+
+    s = ['<tpl>', s, '</tpl>'].join('');
+
+    var re = /<tpl\b[^>]*>((?:(?=([^<]+))\2|<(?!tpl\b[^>]*>))*?)<\/tpl>/;
+
+    var nameRe = /^<tpl\b[^>]*?for="(.*?)"/;
+    var ifRe = /^<tpl\b[^>]*?if="(.*?)"/;
+    var execRe = /^<tpl\b[^>]*?exec="(.*?)"/;
+    var m, id = 0;
+    var tpls = [];
+
+    while(m = s.match(re)){
+       var m2 = m[0].match(nameRe);
+       var m3 = m[0].match(ifRe);
+       var m4 = m[0].match(execRe);
+       var exp = null, fn = null, exec = null;
+       var name = m2 && m2[1] ? m2[1] : '';
+       if(m3){
+           exp = m3 && m3[1] ? m3[1] : null;
+           if(exp){
+               fn = new Function('values', 'parent', 'with(values){ return '+(Roo.util.Format.htmlDecode(exp))+'; }');
+           }
+       }
+       if(m4){
+           exp = m4 && m4[1] ? m4[1] : null;
+           if(exp){
+               exec = new Function('values', 'parent', 'with(values){ '+(Roo.util.Format.htmlDecode(exp))+'; }');
+           }
+       }
+       if(name){
+           switch(name){
+               case '.': name = new Function('values', 'parent', 'with(values){ return values; }'); break;
+               case '..': name = new Function('values', 'parent', 'with(values){ return parent; }'); break;
+               default: name = new Function('values', 'parent', 'with(values){ return '+name+'; }');
+           }
+       }
+       tpls.push({
+            id: id,
+            target: name,
+            exec: exec,
+            test: fn,
+            body: m[1]||''
+        });
+       s = s.replace(m[0], '{xtpl'+ id + '}');
+       ++id;
+    }
+    for(var i = tpls.length-1; i >= 0; --i){
+        this.compileTpl(tpls[i]);
+    }
+    this.master = tpls[tpls.length-1];
+    this.tpls = tpls;
+};
+Roo.extend(Roo.XTemplate, Roo.Template, {
+
+    re : /\{([\w-\.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
+
+    applySubTemplate : function(id, values, parent){
+        var t = this.tpls[id];
+        if(t.test && !t.test.call(this, values, parent)){
+            return '';
+        }
+        if(t.exec && t.exec.call(this, values, parent)){
+            return '';
+        }
+        var vs = t.target ? t.target.call(this, values, parent) : values;
+        parent = t.target ? values : parent;
+        if(t.target && vs instanceof Array){
+            var buf = [];
+            for(var i = 0, len = vs.length; i < len; i++){
+                buf[buf.length] = t.compiled.call(this, vs[i], parent);
+            }
+            return buf.join('');
+        }
+        return t.compiled.call(this, vs, parent);
+    },
+
+    compileTpl : function(tpl){
+        var fm = Roo.util.Format;
+        var useF = this.disableFormats !== true;
+        var sep = Roo.isGecko ? "+" : ",";
+        var fn = function(m, name, format, args){
+            if(name.substr(0, 4) == 'xtpl'){
+                return "'"+ sep +'this.applySubTemplate('+name.substr(4)+', values, parent)'+sep+"'";
+            }
+            var v;
+            if(name.indexOf('.') != -1){
+                v = name;
+            }else{
+                v = "values['" + name + "']";
+            }
+            if(format && useF){
+                args = args ? ',' + args : "";
+                if(format.substr(0, 5) != "this."){
+                    format = "fm." + format + '(';
+                }else{
+                    format = 'this.call("'+ format.substr(5) + '", ';
+                    args = ", values";
+                }
+            }else{
+                args= ''; format = "("+v+" === undefined ? '' : ";
+            }
+            return "'"+ sep + format + v + args + ")"+sep+"'";
+        };
+        var body;
+        // branched to use + in gecko and [].join() in others
+        if(Roo.isGecko){
+            body = "tpl.compiled = function(values, parent){ return '" +
+                   tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
+                    "';};";
+        }else{
+            body = ["tpl.compiled = function(values, parent){ return ['"];
+            body.push(tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn));
+            body.push("'].join('');};");
+            body = body.join('');
+        }
+        /** eval:var:zzzzzzz */
+        eval(body);
+        return this;
+    },
+
+    applyTemplate : function(values){
+        return this.master.compiled.call(this, values, {});
+        var s = this.subs;
+    },
+
+    apply : function(){
+        return this.applyTemplate.apply(this, arguments);
+    },
+
+    compile : function(){return this;}
+});
+
+Roo.XTemplate.from = function(el){
+    el = Roo.getDom(el);
+    return new Roo.XTemplate(el.value || el.innerHTML);
+};/*
+ * Original code for Roojs - LGPL
+ * <script type="text/javascript">
+ */
+ 
+/**
+ * @class Roo.XComponent
+ * A delayed Element creator...
+ * 
+ * Mypart.xyx = new Roo.XComponent({
+
+    parent : 'Mypart.xyz', // empty == document.element.!!
+    order : '001',
+    name : 'xxxx'
+    region : 'xxxx'
+    disabled : function() {} 
+     
+    tree : function() { // return an tree of xtype declared components
+        var MODULE = this;
+        return 
+        {
+            xtype : 'NestedLayoutPanel',
+            // technicall
+        }
+     ]
+ *})
+ * @extends Roo.util.Observable
+ * @constructor
+ * @param cfg {Object} configuration of component
+ * 
+ */
+Roo.XComponent = function(cfg) {
+    Roo.apply(this, cfg);
+    this.addEvents({ 
+        /**
+	     * @event built
+	     * Fires when this the componnt is built
+	     * @param {Roo.XComponent} c the component
+	     */
+        'built' : true,
+        /**
+	     * @event buildcomplete
+	     * Fires on the top level element when all elements have been built
+	     * @param {Roo.XComponent} c the top level component.
+         */
+        'buildcomplete' : true
+        
+    });
+    
+    Roo.XComponent.register(this);
+    this.modules = false;
+    this.el = false; // where the layout goes..
+    
+    
+}
+Roo.extend(Roo.XComponent, Roo.util.Observable, {
+    /**
+     * @property el
+     * The created element (with Roo.factory())
+     * @type {Roo.Layout}
+     */
+    el  : false,
+    
+    /**
+     * @property el
+     * for BC  - use el in new code
+     * @type {Roo.Layout}
+     */
+    panel : false,
+    
+    /**
+     * @property layout
+     * for BC  - use el in new code
+     * @type {Roo.Layout}
+     */
+    layout : false,
+    
+     /**
+     * @cfg {Function|boolean} disabled
+     * If this module is disabled by some rule, return true from the funtion
+     */
+    disabled : false,
+    
+    /**
+     * @cfg {String} parent 
+     * Name of parent element which it get xtype added to..
+     */
+    parent: false,
+    
+    /**
+     * @cfg {String} order
+     * Used to set the order in which elements are created (usefull for multiple tabs)
+     */
+    
+    order : false,
+    /**
+     * @cfg {String} name
+     * String to display while loading.
+     */
+    name : false,
+    /**
+     * @cfg {Array} items
+     * A single item array - the first element is the root of the tree..
+     * It's done this way to stay compatible with the Xtype system...
+     */
+    items : false
+     
+     
+    
+});
+
+Roo.apply(Roo.XComponent, {
+    
+    /**
+     * @property  buildCompleted
+     * True when the builder has completed building the interface.
+     * @type Boolean
+     */
+    buildCompleted : false,
+     
+    /**
+     * @property  topModule
+     * the upper most module - uses document.element as it's constructor.
+     * @type Object
+     */
+     
+    topModule  : false,
+      
+    /**
+     * @property  modules
+     * array of modules to be created by registration system.
+     * @type Roo.XComponent
+     */
+    
+    modules : [],
+      
+    
+    /**
+     * Register components to be built later.
+     *
+     * This solves the following issues
+     * - Building is not done on page load, but after an authentication process has occured.
+     * - Interface elements are registered on page load
+     * - Parent Interface elements may not be loaded before child, so this handles that..
+     * 
+     *
+     * example:
+     * 
+     * MyApp.register({
+          order : '000001',
+          module : 'Pman.Tab.projectMgr',
+          region : 'center',
+          parent : 'Pman.layout',
+          disabled : false,  // or use a function..
+        })
+     
+     * * @param {Object} details about module
+     */
+    register : function(obj) {
+        this.modules.push(obj);
+         
+    },
+    /**
+     * convert a string to an object..
+     * 
+     */
+    
+    toObject : function(str)
+    {
+        if (!str || typeof(str) == 'object') {
+            return str;
+        }
+        var ar = str.split('.');
+        var rt, o;
+        rt = ar.shift();
+            /** eval:var:o */
+        eval('if (typeof ' + rt + ' == "undefined"){ o = false;} o = ' + rt + ';');
+        if (o === false) {
+            throw "Module not found : " + str;
+        }
+        Roo.each(ar, function(e) {
+            if (typeof(o[e]) == 'undefined') {
+                throw "Module not found : " + str;
+            }
+            o = o[e];
+        });
+        return o;
+        
+    },
+    
+    
+    /**
+     * move modules into their correct place in the tree..
+     * 
+     */
+    preBuild : function ()
+    {
+        
+        Roo.each(this.modules , function (obj)
+        {
+            obj.parent = this.toObject(obj.parent);
+            
+            if (!obj.parent) {
+                this.topModule = obj;
+                return;
+            }
+            
+            if (!obj.parent.modules) {
+                obj.parent.modules = new Roo.util.MixedCollection(false, 
+                    function(o) { return o.order + '' }
+                );
+            }
+            
+            obj.parent.modules.add(obj);
+        }, this);
+    },
+    
+     /**
+     * make a list of modules to build.
+     * @return {Array} list of modules. 
+     */ 
+    
+    buildOrder : function()
+    {
+        var _this = this;
+        var cmp = function(a,b) {   
+            return String(a).toUpperCase() > String(b).toUpperCase() ? 1 : -1;
+        };
+        
+        if (!this.topModule || !this.topModule.modules) {
+            throw "No top level modules to build";
+        }
+       
+        // make a flat list in order of modules to build.
+        var mods = [ this.topModule ];
+        
+        
+        // add modules to their parents..
+        var addMod = function(m) {
+           // Roo.debug && Roo.log(m.modKey);
+            
+            mods.push(m);
+            if (m.modules) {
+                m.modules.keySort('ASC',  cmp );
+                m.modules.each(addMod);
+            }
+            // not sure if this is used any more..
+            if (m.finalize) {
+                m.finalize.name = m.name + " (clean up) ";
+                mods.push(m.finalize);
+            }
+            
+        }
+        this.topModule.modules.keySort('ASC',  cmp );
+        this.topModule.modules.each(addMod);
+        return mods;
+    },
+    
+     /**
+     * Build the registered modules.
+     * @param {Object} parent element.
+     * @param {Function} optional method to call after module has been added.
+     * 
+     */ 
+   
+    build : function() 
+    {
+        
+        this.preBuild();
+        var mods = this.buildOrder();
+      
+        //this.allmods = mods;
+        //Roo.debug && Roo.log(mods);
+        //return;
+        if (!mods.length) { // should not happen
+            throw "NO modules!!!";
+        }
+        
+        
+        
+        // flash it up as modal - so we store the mask!?
+        Roo.MessageBox.show({ title: 'loading' });
+        Roo.MessageBox.show({
+           title: "Please wait...",
+           msg: "Building Interface...",
+           width:450,
+           progress:true,
+           closable:false,
+           modal: false
+          
+        });
+        var total = mods.length;
+        
+        var _this = this;
+        var progressRun = function() {
+            if (!mods.length) {
+                Roo.debug && Roo.log('hide?');
+                Roo.MessageBox.hide();
+                _this.topModule.fireEvent('buildcomplete', _this.topModule);
+                return;    
+            }
+            
+            var m = mods.shift();
+            Roo.debug && Roo.log(m);
+            if (typeof(m) == 'function') { // not sure if this is supported any more..
+                m.call(this);
+                return progressRun.defer(10, _this);
+            } 
+            
+            Roo.MessageBox.updateProgress(
+                (total  - mods.length)/total,  "Building Interface " + (total  - mods.length) + 
+                    " of " + total + 
+                    (m.name ? (' - ' + m.name) : '')
+                    );
+            
+         
+            
+            var disabled = (typeof(m.disabled) == 'function') ?
+                m.disabled.call(m.module.disabled) : m.disabled;    
+            
+            
+            if (disabled) {
+                return progressRun(); // we do not update the display!
+            }
+            
+            if (!m.parent) {
+                // it's a top level one..
+                var layoutbase = new Ext.BorderLayout(document.body, {
+               
+                    center: {
+                         titlebar: false,
+                         autoScroll:false,
+                         closeOnTab: true,
+                         tabPosition: 'top',
+                         //resizeTabs: true,
+                         alwaysShowTabs: true,
+                         minTabWidth: 140
+                    }
+                });
+                var tree = m.tree();
+                tree.region = 'center';
+                m.el = layoutbase.addxtype(tree);
+                m.panel = m.el;
+                m.layout = m.panel.layout;    
+                return progressRun.defer(10, _this);
+            }
+            
+            var tree = m.tree();
+            tree.region = tree.region || m.region;
+            m.el = m.parent.el.addxtype(tree);
+            m.fireEvent('built', m);
+            m.panel = m.el;
+            m.layout = m.panel.layout;    
+            progressRun.defer(10, _this); 
+            
+        }
+        progressRun.defer(1, _this);
+     
+        
+        
+    }
+     
+   
+    
+    
+});
+ //<script type="text/javascript">
+
+
+/**
+ * @class Roo.Login
+ * @extends Roo.LayoutDialog
+ * A generic Login Dialog..... - only one needed in theory!?!?
+ *
+ * Fires XComponent builder on success...
+ * 
+ * Sends 
+ *    username,password, lang = for login actions.
+ *    check = 1 for periodic checking that sesion is valid.
+ *    passwordRequest = email request password
+ *    logout = 1 = to logout
+ * 
+ * Affects: (this id="????" elements)
+ *   loading  (removed) (used to indicate application is loading)
+ *   loading-mask (hides) (used to hide application when it's building loading)
+ *   
+ * 
+ * Usage: 
+ *    
+ * 
+ * Myapp.login = Roo.Login({
+     url: xxxx,
+   
+     realm : 'Myapp', 
+     
+     
+     method : 'POST',
+     
+     
+     * 
+ })
+ * 
+ * 
+ * 
+ **/
+ 
+Roo.Login = function(cfg)
+{
+    this.addEvents({
+        'refreshed' : true
+    });
+    
+    Roo.apply(this,cfg);
+    
+    Roo.onReady(function() {
+        this.onLoad();
+    }, this);
+    // call parent..
+    
+   
+    Roo.Login.superclass.constructor.call(this, this);
+    //this.addxtype(this.items[0]);
+    
+    
+}
+
+
+Roo.extend(Roo.Login, Roo.LayoutDialog, {
+    
+    /**
+     * @cfg {String} method
+     * Method used to query for login details.
+     */
+    
+    method : 'POST',
+    /**
+     * @cfg {String} url
+     * URL to query login data. - eg. baseURL + '/Login.php'
+     */
+    url : '',
+    
+    /**
+     * @property user
+     * The user data - if user.id < 0 then login will be bypassed. (used for inital setup situation.
+     * @type {Object} 
+     */
+    user : false,
+    /**
+     * @property checkFails
+     * Number of times we have attempted to get authentication check, and failed.
+     * @type {Number} 
+     */
+    checkFails : 0,
+      /**
+     * @property intervalID
+     * The window interval that does the constant login checking.
+     * @type {Number} 
+     */
+    intervalID : 0,
+    
+    
+    onLoad : function() // called on page load...
+    {
+        // load 
+         
+        if (Roo.get('loading')) { // clear any loading indicator..
+            Roo.get('loading').remove();
+        }
+        
+        //this.switchLang('en'); // set the language to english..
+       
+        this.check({
+            success:  function(response, opts)  {  // check successfull...
+            
+                var res = this.processResponse(response);
+                this.checkFails =0;
+                if (!res.success) { // error!
+                    this.checkFails = 5;
+                    //console.log('call failure');
+                    return this.failure(response,opts);
+                }
+                
+                if (!res.data.id) { // id=0 == login failure.
+                    return this.show();
+                }
+                
+                              
+                        //console.log(success);
+                this.fillAuth(res.data);   
+                this.checkFails =0;
+                Roo.XComponent.build();
+            },
+            failure : this.show
+        });
+        
+    }, 
+    
+    
+    check: function(cfg) // called every so often to refresh cookie etc..
+    {
+        if (cfg.again) { // could be undefined..
+            this.checkFails++;
+        } else {
+            this.checkFails = 0;
+        }
+        var _this = this;
+        if (this.sending) {
+            if ( this.checkFails > 4) {
+                Roo.MessageBox.alert("Error",  
+                    "Error getting authentication status. - try reloading, or wait a while", function() {
+                        _this.sending = false;
+                    }); 
+                return;
+            }
+            cfg.again = true;
+            _this.check.defer(10000, _this, [ cfg ]); // check in 10 secs.
+            return;
+        }
+        this.sending = true;
+        
+        Roo.Ajax.request({  
+            url: this.url,
+            params: {
+                getAuthUser: true
+            },  
+            method: this.method,
+            success:  cfg.success || this.success,
+            failure : cfg.failure || this.failure,
+            scope : this,
+            callCfg : cfg
+              
+        });  
+    }, 
+    
+    
+    logout: function()
+    {
+        window.onbeforeunload = function() { }; // false does not work for IE..
+        this.user = false;
+        var _this = this;
+        
+        Roo.Ajax.request({  
+            url: this.url,
+            params: {
+                logout: 1
+            },  
+            method: 'GET',
+            failure : function() {
+                Roo.MessageBox.alert("Error", "Error logging out. - continuing anyway.", function() {
+                    document.location = document.location.toString() + '?ts=' + Math.random();
+                });
+                
+            },
+            success : function() {
+                _this.user = false;
+                this.checkFails =0;
+                // fixme..
+                document.location = document.location.toString() + '?ts=' + Math.random();
+            }
+              
+              
+        }); 
+    },
+    
+    processResponse : function (response)
+    {
+        var res = '';
+        try {
+            res = Roo.decode(response.responseText);
+            // oops...
+            if (typeof(res) != 'object') {
+                res = { success : false, errorMsg : res, errors : true };
+            }
+            if (typeof(res.success) == 'undefined') {
+                res.success = false;
+            }
+            
+        } catch(e) {
+            res = { success : false,  errorMsg : response.responseText, errors : true };
+        }
+        return res;
+    },
+    
+    success : function(response, opts)  // check successfull...
+    {  
+        this.sending = false;
+        var res = this.processResponse(response);
+        if (!res.success) {
+            return this.failure(response, opts);
+        }
+        if (!res.data || !res.data.id) {
+            return this.failure(response,opts);
+        }
+        //console.log(res);
+        this.fillAuth(res.data);
+        
+        this.checkFails =0;
+        
+    },
+    
+    
+    failure : function (response, opts) // called if login 'check' fails.. (causes re-check)
+    {
+        this.authUser = -1;
+        this.sending = false;
+        var res = this.processResponse(response);
+        //console.log(res);
+        if ( this.checkFails > 2) {
+        
+            Roo.MessageBox.alert("Error", res.errorMsg ? res.errorMsg : 
+                "Error getting authentication status. - try reloading"); 
+            return;
+        }
+        opts.callCfg.again = true;
+        this.check.defer(1000, this, [ opts.callCfg ]);
+        return;  
+    },
+    
+    
+    
+    fillAuth: function(au) {
+        this.startAuthCheck();
+        this.authUserId = au.id;
+        this.authUser = au;
+        this.lastChecked = new Date();
+        this.fireEvent('refreshed', au);
+        //Pman.Tab.FaxQueue.newMaxId(au.faxMax);
+        //Pman.Tab.FaxTab.setTitle(au.faxNumPending);
+        au.lang = au.lang || 'en';
+        //this.switchLang(Roo.state.Manager.get('Pman.Login.lang', 'en'));
+        Roo.state.Manager.set( this.realm + 'lang' , au.lang);
+        this.switchLang(au.lang );
+        
+     
+        // open system... - -on setyp..
+        if (this.authUserId  < 0) {
+            Roo.MessageBox.alert("Warning", 
+                "This is an open system - please set up a admin user with a password.");  
+        }
+         
+        //Pman.onload(); // which should do nothing if it's a re-auth result...
+        
+             
+    },
+    
+    startAuthCheck : function() // starter for timeout checking..
+    {
+        if (this.intervalID) { // timer already in place...
+            return false;
+        }
+        var _this = this;
+        this.intervalID =  window.setInterval(function() {
+              _this.check(false);
+            }, 120000); // every 120 secs = 2mins..
+        
+        
+    },
+         
+    
+    switchLang : function (lang) 
+    {
+        _T = typeof(_T) == 'undefined' ? false : _T;
+          if (!_T || !lang.length) {
+            return;
+        }
+        
+        if (!_T && lang != 'en') {
+            Roo.MessageBox.alert("Sorry", "Language not available yet (" + lang +')');
+            return;
+        }
+        
+        if (typeof(_T.en) == 'undefined') {
+            _T.en = {};
+            Roo.apply(_T.en, _T);
+        }
+        
+        if (typeof(_T[lang]) == 'undefined') {
+            Roo.MessageBox.alert("Sorry", "Language not available yet (" + lang +')');
+            return;
+        }
+        
+        
+        Roo.apply(_T, _T[lang]);
+        // just need to set the text values for everything...
+        var _this = this;
+        /* this will not work ...
+        if (this.form) { 
+            
+               
+            function formLabel(name, val) {
+                _this.form.findField(name).fieldEl.child('label').dom.innerHTML  = val;
+            }
+            
+            formLabel('password', "Password"+':');
+            formLabel('username', "Email Address"+':');
+            formLabel('lang', "Language"+':');
+            this.dialog.setTitle("Login");
+            this.dialog.buttons[0].setText("Forgot Password");
+            this.dialog.buttons[1].setText("Login");
+        }
+        */
+        
+        
+    },
+    
+    
+    title: "Login",
+    modal: true,
+    width:  350,
+    //height: 230,
+    height: 180,
+    shadow: true,
+    minWidth:200,
+    minHeight:180,
+    //proxyDrag: true,
+    closable: false,
+    draggable: false,
+    collapsible: false,
+    resizable: false,
+    center: {  // needed??
+        autoScroll:false,
+        titlebar: false,
+       // tabPosition: 'top',
+        hideTabs: true,
+        closeOnTab: true,
+        alwaysShowTabs: false
+    } ,
+    listeners : {
+        
+        show  : function(dlg)
+        {
+            //console.log(this);
+            this.form = this.layout.getRegion('center').activePanel.form;
+            this.form.dialog = dlg;
+            this.buttons[0].form = this.form;
+            this.buttons[0].dialog = dlg;
+            this.buttons[1].form = this.form;
+            this.buttons[1].dialog = dlg;
+           
+           //this.resizeToLogo.defer(1000,this);
+            // this is all related to resizing for logos..
+            //var sz = Roo.get(Pman.Login.form.el.query('img')[0]).getSize();
+           //// if (!sz) {
+             //   this.resizeToLogo.defer(1000,this);
+             //   return;
+           // }
+            //var w = Ext.lib.Dom.getViewWidth() - 100;
+            //var h = Ext.lib.Dom.getViewHeight() - 100;
+            //this.resizeTo(Math.max(350, Math.min(sz.width + 30, w)),Math.min(sz.height+200, h));
+            //this.center();
+            if (this.disabled) {
+                this.hide();
+                return;
+            }
+            
+            if (this.user.id < 0) { // used for inital setup situations.
+                return;
+            }
+            
+            if (this.intervalID) {
+                // remove the timer
+                window.clearInterval(this.intervalID);
+                this.intervalID = false;
+            }
+            
+            
+            if (Roo.get('loading')) {
+                Roo.get('loading').remove();
+            }
+            if (Roo.get('loading-mask')) {
+                Roo.get('loading-mask').hide();
+            }
+            
+            //incomming._node = tnode;
+            this.form.reset();
+            //this.dialog.modal = !modal;
+            //this.dialog.show();
+            this.el.unmask(); 
+            
+            
+            this.form.setValues({
+                'username' : Roo.state.Manager.get(this.realm + '.username', ''),
+                'lang' : Roo.state.Manager.get(this.realm + '.lang', 'en')
+            });
+            
+            this.switchLang(Roo.state.Manager.get(this.realm + '.lang', 'en'));
+            if (this.form.findField('username').getValue().length > 0 ){
+                this.form.findField('password').focus();
+            } else {
+               this.form.findField('username').focus();
+            }
+    
+        }
+    },
+    items : [
+         {
+       
+            xtype : 'ContentPanel',
+            xns : Roo,
+            region: 'center',
+            fitToFrame : true,
+            
+            items : [
+    
+                {
+               
+                    xtype : 'Form',
+                    xns : Roo.form,
+                    labelWidth: 100,
+                    style : 'margin: 10px;',
+                    
+                    listeners : {
+                        actionfailed : function(f, act) {
+                            // form can return { errors: .... }
+                                
+                            //act.result.errors // invalid form element list...
+                            //act.result.errorMsg// invalid form element list...
+                            
+                            this.dialog.el.unmask();
+                            Roo.MessageBox.alert("Error", act.result.errorMsg ? act.result.errorMsg : 
+                                        "Login failed - communication error - try again.");
+                                      
+                        },
+                        actioncomplete: function(re, act) {
+                             
+                            Roo.state.Manager.set(
+                                this.dialog.realm + '.username',  
+                                    this.findField('username').getValue()
+                            );
+                            Roo.state.Manager.set(
+                                this.dialog.realm + '.lang',  
+                                this.findField('lang').getValue() 
+                            );
+                            
+                            this.dialog.fillAuth(act.result.data);
+                              
+                            this.dialog.hide();
+                            
+                            if (Roo.get('loading-mask')) {
+                                Roo.get('loading-mask').show();
+                            }
+                            Roo.XComponent.build();
+                            
+                             
+                            
+                        }
+                    },
+                    items : [
+                        {
+                            xtype : 'TextField',
+                            xns : Roo.form,
+                            fieldLabel: "Email Address",
+                            name: 'username',
+                            width:200,
+                            autoCreate : {tag: "input", type: "text", size: "20"}
+                        },
+                        {
+                            xtype : 'TextField',
+                            xns : Roo.form,
+                            fieldLabel: "Password",
+                            inputType: 'password',
+                            name: 'password',
+                            width:200,
+                            autoCreate : {tag: "input", type: "text", size: "20"},
+                            listeners : {
+                                specialkey : function(e,ev) {
+                                    if (ev.keyCode == 13) {
+                                        this.form.dialog.el.mask("Logging in");
+                                        this.form.doAction('submit', {
+                                            url: this.form.dialog.url,
+                                            method: this.form.dialog.method
+                                        });
+                                    }
+                                }
+                            }  
+                        },
+                        {
+                            xtype : 'ComboBox',
+                            xns : Roo.form,
+                            fieldLabel: "Language",
+                            name : 'langdisp',
+                            store: {
+                                xtype : 'SimpleStore',
+                                fields: ['lang', 'ldisp'],
+                                data : [
+                                    [ 'en', 'English' ],
+                                    [ 'zh_HK' , '\u7E41\u4E2D' ],
+                                    [ 'zh_CN', '\u7C21\u4E2D' ]
+                                ]
+                            },
+                            
+                            valueField : 'lang',
+                            hiddenName:  'lang',
+                            width: 200,
+                            displayField:'ldisp',
+                            typeAhead: false,
+                            editable: false,
+                            mode: 'local',
+                            triggerAction: 'all',
+                            emptyText:'Select a Language...',
+                            selectOnFocus:true,
+                            listeners : {
+                                select :  function(cb, rec, ix) {
+                                    this.form.switchLang(rec.data.lang);
+                                }
+                            }
+                        
+                        }
+                    ]
+                }
+                  
+                
+            ]
+        }
+    ],
+    buttons : [
+        {
+            xtype : 'Button',
+            xns : 'Roo',
+            text : "Forgot Password",
+            listeners : {
+                click : function() {
+                    //console.log(this);
+                    var n = this.form.findField('username').getValue();
+                    if (!n.length) {
+                        Roo.MessageBox.alert("Error", "Fill in your email address");
+                        return;
+                    }
+                    Roo.Ajax.request({
+                        url: this.dialog.url,
+                        params: {
+                            passwordRequest: n
+                        },
+                        method: this.dialog.method,
+                        success:  function(response, opts)  {  // check successfull...
+                        
+                            var res = this.dialog.processResponse(response);
+                            if (!res.success) { // error!
+                               Roo.MessageBox.alert("Error" ,
+                                    res.errorMsg ? res.errorMsg  : "Problem Requesting Password Reset");
+                               return;
+                            }
+                            Roo.MessageBox.alert("Notice" ,
+                                "Please check you email for the Password Reset message");
+                        },
+                        failure : function() {
+                            Roo.MessageBox.alert("Error" , "Problem Requesting Password Reset");
+                        }
+                        
+                    });
+                }
+            }
+        },
+        {
+            xtype : 'Button',
+            xns : 'Roo',
+            text : "Login",
+            listeners : {
+                
+                click : function () {
+                        
+                    this.dialog.el.mask("Logging in");
+                    this.form.doAction('submit', {
+                            url: this.dialog.url,
+                            method: this.dialog.method
+                    });
+                }
+            }
+        }
+    ]
+  
+  
+})
+ 
+
+
+   
\ No newline at end of file