X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=roojs-ui-debug.js;h=7064634aaa09939211ccdb5080118d9a0f71f728;hb=4ed79f6289ef64f2f5b81ce2f0816e9883777ec0;hp=a7f7e9aa9b45c0a53133f40c48c29221aa5f54a8;hpb=37e1a1577754d049ea95bb158b3a8dcb11383dc3;p=roojs1

diff --git a/roojs-ui-debug.js b/roojs-ui-debug.js
index a7f7e9aa9b..7064634aaa 100644
--- a/roojs-ui-debug.js
+++ b/roojs-ui-debug.js
@@ -10,1174 +10,1089 @@
  */
 
 
-
-/*
- * These classes are derivatives of the similarly named classes in the YUI Library.
- * The original license:
- * Copyright (c) 2006, Yahoo! Inc. All rights reserved.
- * Code licensed under the BSD License:
- * http://developer.yahoo.net/yui/license.txt
- */
-
-(function() {
-
-var Event=Roo.EventManager;
-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.
- * Up to three html elements can be associated with a DragDrop instance:
- * <ul>
- * <li>linked element: the element that is passed into the constructor.
- * This is the element which defines the boundaries for interaction with
- * other DragDrop objects.</li>
- * <li>handle element(s): The drag operation only occurs if the element that
- * was clicked matches a handle element.  By default this is the linked
- * element, but there are times that you will want only a portion of the
- * linked element to initiate the drag operation, and the setHandleElId()
- * method provides a way to define this.</li>
- * <li>drag element: this represents the element that would be moved along
- * with the cursor during a drag operation.  By default, this is the linked
- * element itself as in {@link Roo.dd.DD}.  setDragElId() lets you define
- * a separate element that would be moved, as in {@link Roo.dd.DDProxy}.
- * </li>
- * </ul>
- * This class should not be instantiated until the onload event to ensure that
- * the associated elements are available.
- * The following would define a DragDrop obj that would interact with any
- * other DragDrop obj in the "group1" group:
- * <pre>
- *  dd = new Roo.dd.DragDrop("div1", "group1");
- * </pre>
- * Since none of the event handlers have been implemented, nothing would
- * actually happen if you were to run the code above.  Normally you would
- * override this class or one of the default implementations, but you can
- * also override the methods you want on an instance of the class...
- * <pre>
- *  dd.onDragDrop = function(e, id) {
- *  &nbsp;&nbsp;alert("dd was dropped on " + id);
- *  }
- * </pre>
- * @constructor
- * @param {String} id of the element that is linked to this instance
- * @param {String} sGroup the group of related DragDrop objects
- * @param {object} config an object containing configurable attributes
- *                Valid properties for DragDrop:
- *                    padding, isTarget, maintainOffset, primaryButtonOnly
+ * @class Roo.data.SortTypes
+ * @static
+ * Defines the default sorting (casting?) comparison functions used when sorting data.
  */
-Roo.dd.DragDrop = function(id, sGroup, config) {
-    if (id) {
-        this.init(id, sGroup, config);
-    }
-    
-};
-
-Roo.extend(Roo.dd.DragDrop, Roo.util.Observable , {
-
-    /**
-     * The id of the element associated with this object.  This is what we
-     * refer to as the "linked element" because the size and position of
-     * this element is used to determine when the drag and drop objects have
-     * interacted.
-     * @property id
-     * @type String
-     */
-    id: null,
-
-    /**
-     * Configuration attributes passed into the constructor
-     * @property config
-     * @type object
-     */
-    config: null,
-
-    /**
-     * The id of the element that will be dragged.  By default this is same
-     * as the linked element , but could be changed to another element. Ex:
-     * Roo.dd.DDProxy
-     * @property dragElId
-     * @type String
-     * @private
-     */
-    dragElId: null,
-
-    /**
-     * the id of the element that initiates the drag operation.  By default
-     * this is the linked element, but could be changed to be a child of this
-     * element.  This lets us do things like only starting the drag when the
-     * header element within the linked html element is clicked.
-     * @property handleElId
-     * @type String
-     * @private
-     */
-    handleElId: null,
-
-    /**
-     * An associative array of HTML tags that will be ignored if clicked.
-     * @property invalidHandleTypes
-     * @type {string: string}
-     */
-    invalidHandleTypes: null,
-
-    /**
-     * An associative array of ids for elements that will be ignored if clicked
-     * @property invalidHandleIds
-     * @type {string: string}
-     */
-    invalidHandleIds: null,
-
-    /**
-     * An indexted array of css class names for elements that will be ignored
-     * if clicked.
-     * @property invalidHandleClasses
-     * @type string[]
-     */
-    invalidHandleClasses: null,
-
-    /**
-     * The linked element's absolute X position at the time the drag was
-     * started
-     * @property startPageX
-     * @type int
-     * @private
-     */
-    startPageX: 0,
-
-    /**
-     * The linked element's absolute X position at the time the drag was
-     * started
-     * @property startPageY
-     * @type int
-     * @private
-     */
-    startPageY: 0,
-
-    /**
-     * The group defines a logical collection of DragDrop objects that are
-     * related.  Instances only get events when interacting with other
-     * DragDrop object in the same group.  This lets us define multiple
-     * groups using a single DragDrop subclass if we want.
-     * @property groups
-     * @type {string: string}
-     */
-    groups: null,
-
-    /**
-     * Individual drag/drop instances can be locked.  This will prevent
-     * onmousedown start drag.
-     * @property locked
-     * @type boolean
-     * @private
-     */
-    locked: false,
-
-    /**
-     * Lock this instance
-     * @method lock
-     */
-    lock: function() { this.locked = true; },
-
-    /**
-     * Unlock this instace
-     * @method unlock
-     */
-    unlock: function() { this.locked = false; },
-
-    /**
-     * By default, all insances can be a drop target.  This can be disabled by
-     * setting isTarget to false.
-     * @method isTarget
-     * @type boolean
-     */
-    isTarget: true,
-
-    /**
-     * The padding configured for this drag and drop object for calculating
-     * the drop zone intersection with this object.
-     * @method padding
-     * @type int[]
-     */
-    padding: null,
-
-    /**
-     * Cached reference to the linked element
-     * @property _domRef
-     * @private
-     */
-    _domRef: null,
-
-    /**
-     * Internal typeof flag
-     * @property __ygDragDrop
-     * @private
-     */
-    __ygDragDrop: true,
-
-    /**
-     * Set to true when horizontal contraints are applied
-     * @property constrainX
-     * @type boolean
-     * @private
-     */
-    constrainX: false,
-
-    /**
-     * Set to true when vertical contraints are applied
-     * @property constrainY
-     * @type boolean
-     * @private
-     */
-    constrainY: false,
-
-    /**
-     * The left constraint
-     * @property minX
-     * @type int
-     * @private
-     */
-    minX: 0,
-
-    /**
-     * The right constraint
-     * @property maxX
-     * @type int
-     * @private
-     */
-    maxX: 0,
-
-    /**
-     * The up constraint
-     * @property minY
-     * @type int
-     * @type int
-     * @private
-     */
-    minY: 0,
-
-    /**
-     * The down constraint
-     * @property maxY
-     * @type int
-     * @private
-     */
-    maxY: 0,
-
-    /**
-     * Maintain offsets when we resetconstraints.  Set to true when you want
-     * the position of the element relative to its parent to stay the same
-     * when the page changes
-     *
-     * @property maintainOffset
-     * @type boolean
-     */
-    maintainOffset: false,
-
-    /**
-     * Array of pixel locations the element will snap to if we specified a
-     * horizontal graduation/interval.  This array is generated automatically
-     * when you define a tick interval.
-     * @property xTicks
-     * @type int[]
-     */
-    xTicks: null,
-
-    /**
-     * Array of pixel locations the element will snap to if we specified a
-     * vertical graduation/interval.  This array is generated automatically
-     * when you define a tick interval.
-     * @property yTicks
-     * @type int[]
-     */
-    yTicks: null,
-
-    /**
-     * By default the drag and drop instance will only respond to the primary
-     * button click (left button for a right-handed mouse).  Set to true to
-     * allow drag and drop to start with any mouse click that is propogated
-     * by the browser
-     * @property primaryButtonOnly
-     * @type boolean
-     */
-    primaryButtonOnly: true,
-
-    /**
-     * The availabe property is false until the linked dom element is accessible.
-     * @property available
-     * @type boolean
-     */
-    available: false,
-
-    /**
-     * By default, drags can only be initiated if the mousedown occurs in the
-     * region the linked element is.  This is done in part to work around a
-     * bug in some browsers that mis-report the mousedown if the previous
-     * mouseup happened outside of the window.  This property is set to true
-     * if outer handles are defined.
-     *
-     * @property hasOuterHandles
-     * @type boolean
-     * @default false
-     */
-    hasOuterHandles: false,
-
-    /**
-     * Code that executes immediately before the startDrag event
-     * @method b4StartDrag
-     * @private
-     */
-    b4StartDrag: function(x, y) { },
-
-    /**
-     * Abstract method called after a drag/drop object is clicked
-     * and the drag or mousedown time thresholds have beeen met.
-     * @method startDrag
-     * @param {int} X click location
-     * @param {int} Y click location
-     */
-    startDrag: function(x, y) { /* override this */ },
-
-    /**
-     * Code that executes immediately before the onDrag event
-     * @method b4Drag
-     * @private
-     */
-    b4Drag: function(e) { },
-
-    /**
-     * Abstract method called during the onMouseMove event while dragging an
-     * object.
-     * @method onDrag
-     * @param {Event} e the mousemove event
-     */
-    onDrag: function(e) { /* override this */ },
-
-    /**
-     * Abstract method called when this element fist begins hovering over
-     * another DragDrop obj
-     * @method onDragEnter
-     * @param {Event} e the mousemove event
-     * @param {String|DragDrop[]} id In POINT mode, the element
-     * id this is hovering over.  In INTERSECT mode, an array of one or more
-     * dragdrop items being hovered over.
-     */
-    onDragEnter: function(e, id) { /* override this */ },
-
-    /**
-     * Code that executes immediately before the onDragOver event
-     * @method b4DragOver
-     * @private
-     */
-    b4DragOver: function(e) { },
-
-    /**
-     * Abstract method called when this element is hovering over another
-     * DragDrop obj
-     * @method onDragOver
-     * @param {Event} e the mousemove event
-     * @param {String|DragDrop[]} id In POINT mode, the element
-     * id this is hovering over.  In INTERSECT mode, an array of dd items
-     * being hovered over.
-     */
-    onDragOver: function(e, id) { /* override this */ },
-
-    /**
-     * Code that executes immediately before the onDragOut event
-     * @method b4DragOut
-     * @private
-     */
-    b4DragOut: function(e) { },
-
-    /**
-     * Abstract method called when we are no longer hovering over an element
-     * @method onDragOut
-     * @param {Event} e the mousemove event
-     * @param {String|DragDrop[]} id In POINT mode, the element
-     * id this was hovering over.  In INTERSECT mode, an array of dd items
-     * that the mouse is no longer over.
-     */
-    onDragOut: function(e, id) { /* override this */ },
-
-    /**
-     * Code that executes immediately before the onDragDrop event
-     * @method b4DragDrop
-     * @private
-     */
-    b4DragDrop: function(e) { },
-
-    /**
-     * Abstract method called when this item is dropped on another DragDrop
-     * obj
-     * @method onDragDrop
-     * @param {Event} e the mouseup event
-     * @param {String|DragDrop[]} id In POINT mode, the element
-     * id this was dropped on.  In INTERSECT mode, an array of dd items this
-     * was dropped on.
-     */
-    onDragDrop: function(e, id) { /* override this */ },
-
-    /**
-     * Abstract method called when this item is dropped on an area with no
-     * drop target
-     * @method onInvalidDrop
-     * @param {Event} e the mouseup event
-     */
-    onInvalidDrop: function(e) { /* override this */ },
-
-    /**
-     * Code that executes immediately before the endDrag event
-     * @method b4EndDrag
-     * @private
-     */
-    b4EndDrag: function(e) { },
-
-    /**
-     * Fired when we are done dragging the object
-     * @method endDrag
-     * @param {Event} e the mouseup event
-     */
-    endDrag: function(e) { /* override this */ },
-
-    /**
-     * Code executed immediately before the onMouseDown event
-     * @method b4MouseDown
-     * @param {Event} e the mousedown event
-     * @private
-     */
-    b4MouseDown: function(e) {  },
-
+Roo.data.SortTypes = {
     /**
-     * Event handler that fires when a drag/drop obj gets a mousedown
-     * @method onMouseDown
-     * @param {Event} e the mousedown event
+     * Default sort that does nothing
+     * @param {Mixed} s The value being converted
+     * @return {Mixed} The comparison value
      */
-    onMouseDown: function(e) { /* override this */ },
-
+    none : function(s){
+        return s;
+    },
+    
     /**
-     * Event handler that fires when a drag/drop obj gets a mouseup
-     * @method onMouseUp
-     * @param {Event} e the mouseup event
+     * The regular expression used to strip tags
+     * @type {RegExp}
+     * @property
      */
-    onMouseUp: function(e) { /* override this */ },
-
+    stripTagsRE : /<\/?[^>]+>/gi,
+    
     /**
-     * Override the onAvailable method to do what is needed after the initial
-     * position was determined.
-     * @method onAvailable
+     * Strips all HTML tags to sort on text only
+     * @param {Mixed} s The value being converted
+     * @return {String} The comparison value
      */
-    onAvailable: function () {
+    asText : function(s){
+        return String(s).replace(this.stripTagsRE, "");
     },
-
-    /*
-     * Provides default constraint padding to "constrainTo" elements (defaults to {left: 0, right:0, top:0, bottom:0}).
-     * @type Object
+    
+    /**
+     * Strips all HTML tags to sort on text only - Case insensitive
+     * @param {Mixed} s The value being converted
+     * @return {String} The comparison value
      */
-    defaultPadding : {left:0, right:0, top:0, bottom:0},
-
-    /*
-     * Initializes the drag drop object's constraints to restrict movement to a certain element.
- *
- * Usage:
- <pre><code>
- var dd = new Roo.dd.DDProxy("dragDiv1", "proxytest",
-                { dragElId: "existingProxyDiv" });
- dd.startDrag = function(){
-     this.constrainTo("parent-id");
- };
- </code></pre>
- * Or you can initalize it using the {@link Roo.Element} object:
- <pre><code>
- Roo.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
-     startDrag : function(){
-         this.constrainTo("parent-id");
-     }
- });
- </code></pre>
-     * @param {String/HTMLElement/Element} constrainTo The element to constrain to.
-     * @param {Object/Number} pad (optional) Pad provides a way to specify "padding" of the constraints,
-     * and can be either a number for symmetrical padding (4 would be equal to {left:4, right:4, top:4, bottom:4}) or
-     * an object containing the sides to pad. For example: {right:10, bottom:10}
-     * @param {Boolean} inContent (optional) Constrain the draggable in the content box of the element (inside padding and borders)
-     */
-    constrainTo : function(constrainTo, pad, inContent){
-        if(typeof pad == "number"){
-            pad = {left: pad, right:pad, top:pad, bottom:pad};
-        }
-        pad = pad || this.defaultPadding;
-        var b = Roo.get(this.getEl()).getBox();
-        var ce = Roo.get(constrainTo);
-        var s = ce.getScroll();
-        var c, cd = ce.dom;
-        if(cd == document.body){
-            c = { x: s.left, y: s.top, width: Roo.lib.Dom.getViewWidth(), height: Roo.lib.Dom.getViewHeight()};
-        }else{
-            xy = ce.getXY();
-            c = {x : xy[0]+s.left, y: xy[1]+s.top, width: cd.clientWidth, height: cd.clientHeight};
-        }
-
-
-        var topSpace = b.y - c.y;
-        var leftSpace = b.x - c.x;
-
-        this.resetConstraints();
-        this.setXConstraint(leftSpace - (pad.left||0), // left
-                c.width - leftSpace - b.width - (pad.right||0) //right
-        );
-        this.setYConstraint(topSpace - (pad.top||0), //top
-                c.height - topSpace - b.height - (pad.bottom||0) //bottom
-        );
+    asUCText : function(s){
+        return String(s).toUpperCase().replace(this.stripTagsRE, "");
     },
-
+    
     /**
-     * Returns a reference to the linked element
-     * @method getEl
-     * @return {HTMLElement} the html element
+     * Case insensitive string
+     * @param {Mixed} s The value being converted
+     * @return {String} The comparison value
      */
-    getEl: function() {
-        if (!this._domRef) {
-            this._domRef = Roo.getDom(this.id);
-        }
-
-        return this._domRef;
+    asUCString : function(s) {
+    	return String(s).toUpperCase();
     },
-
+    
     /**
-     * Returns a reference to the actual element to drag.  By default this is
-     * the same as the html element, but it can be assigned to another
-     * element. An example of this can be found in Roo.dd.DDProxy
-     * @method getDragEl
-     * @return {HTMLElement} the html element
+     * Date sorting
+     * @param {Mixed} s The value being converted
+     * @return {Number} The comparison value
      */
-    getDragEl: function() {
-        return Roo.getDom(this.dragElId);
+    asDate : function(s) {
+        if(!s){
+            return 0;
+        }
+        if(s instanceof Date){
+            return s.getTime();
+        }
+    	return Date.parse(String(s));
     },
-
+    
     /**
-     * Sets up the DragDrop object.  Must be called in the constructor of any
-     * Roo.dd.DragDrop subclass
-     * @method init
-     * @param id the id of the linked element
-     * @param {String} sGroup the group of related items
-     * @param {object} config configuration attributes
+     * Float sorting
+     * @param {Mixed} s The value being converted
+     * @return {Float} The comparison value
      */
-    init: function(id, sGroup, config) {
-        this.initTarget(id, sGroup, config);
-        if (!Roo.isTouch) {
-            Event.on(this.id, "mousedown", this.handleMouseDown, this);
+    asFloat : function(s) {
+    	var val = parseFloat(String(s).replace(/,/g, ""));
+        if(isNaN(val)) {
+            val = 0;
         }
-        Event.on(this.id, "touchstart", this.handleMouseDown, this);
-        // Event.on(this.id, "selectstart", Event.preventDefault);
+    	return val;
     },
-
+    
     /**
-     * Initializes Targeting functionality only... the object does not
-     * get a mousedown handler.
-     * @method initTarget
-     * @param id the id of the linked element
-     * @param {String} sGroup the group of related items
-     * @param {object} config configuration attributes
+     * Integer sorting
+     * @param {Mixed} s The value being converted
+     * @return {Number} The comparison value
      */
-    initTarget: function(id, sGroup, config) {
-
-        // configuration attributes
-        this.config = config || {};
-
-        // create a local reference to the drag and drop manager
-        this.DDM = Roo.dd.DDM;
-        // initialize the groups array
-        this.groups = {};
-
-        // assume that we have an element reference instead of an id if the
-        // parameter is not a string
-        if (typeof id !== "string") {
-            id = Roo.id(id);
+    asInt : function(s) {
+        var val = parseInt(String(s).replace(/,/g, ""));
+        if(isNaN(val)) {
+            val = 0;
         }
+    	return 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">
+ */
 
-        // set the id
-        this.id = id;
-
-        // add to an interaction group
-        this.addToGroup((sGroup) ? sGroup : "default");
-
-        // We don't want to register this as the handle with the manager
-        // so we just set the id rather than calling the setter.
-        this.handleElId = id;
-
-        // the linked element is the element that gets dragged by default
-        this.setDragElId(id);
-
-        // by default, clicked anchors will not start drag operations.
-        this.invalidHandleTypes = { A: "A" };
-        this.invalidHandleIds = {};
-        this.invalidHandleClasses = [];
-
-        this.applyConfig();
-
-        this.handleOnAvailable();
-    },
+/**
+* @class Roo.data.Record
+ * Instances of this class encapsulate both record <em>definition</em> information, and record
+ * <em>value</em> information for use in {@link Roo.data.Store} objects, or any code which needs
+ * to access Records cached in an {@link Roo.data.Store} object.<br>
+ * <p>
+ * Constructors for this class are generated by passing an Array of field definition objects to {@link #create}.
+ * Instances are usually only created by {@link Roo.data.Reader} implementations when processing unformatted data
+ * objects.<br>
+ * <p>
+ * Record objects generated by this constructor inherit all the methods of Roo.data.Record listed below.
+ * @constructor
+ * This constructor should not be used to create Record objects. Instead, use the constructor generated by
+ * {@link #create}. The parameters are the same.
+ * @param {Array} data An associative Array of data values keyed by the field name.
+ * @param {Object} id (Optional) The id of the record. This id should be unique, and is used by the
+ * {@link Roo.data.Store} object which owns the Record to index its collection of Records. If
+ * not specified an integer id is generated.
+ */
+Roo.data.Record = function(data, id){
+    this.id = (id || id === 0) ? id : ++Roo.data.Record.AUTO_ID;
+    this.data = data;
+};
 
-    /**
-     * Applies the configuration parameters that were passed into the constructor.
-     * This is supposed to happen at each level through the inheritance chain.  So
-     * a DDProxy implentation will execute apply config on DDProxy, DD, and
-     * DragDrop in order to get all of the parameters that are available in
-     * each object.
-     * @method applyConfig
-     */
-    applyConfig: function() {
+/**
+ * Generate a constructor for a specific record layout.
+ * @param {Array} o An Array of field definition objects which specify field names, and optionally,
+ * data types, and a mapping for an {@link Roo.data.Reader} to extract the field's value from a data object.
+ * Each field definition object may contain the following properties: <ul>
+ * <li><b>name</b> : String<p style="margin-left:1em">The name by which the field is referenced within the Record. This is referenced by,
+ * for example the <em>dataIndex</em> property in column definition objects passed to {@link Roo.grid.ColumnModel}</p></li>
+ * <li><b>mapping</b> : String<p style="margin-left:1em">(Optional) A path specification for use by the {@link Roo.data.Reader} implementation
+ * that is creating the Record to access the data value from the data object. If an {@link Roo.data.JsonReader}
+ * is being used, then this is a string containing the javascript expression to reference the data relative to 
+ * the record item's root. If an {@link Roo.data.XmlReader} is being used, this is an {@link Roo.DomQuery} path
+ * to the data item relative to the record element. If the mapping expression is the same as the field name,
+ * this may be omitted.</p></li>
+ * <li><b>type</b> : String<p style="margin-left:1em">(Optional) The data type for conversion to displayable value. Possible values are
+ * <ul><li>auto (Default, implies no conversion)</li>
+ * <li>string</li>
+ * <li>int</li>
+ * <li>float</li>
+ * <li>boolean</li>
+ * <li>date</li></ul></p></li>
+ * <li><b>sortType</b> : Mixed<p style="margin-left:1em">(Optional) A member of {@link Roo.data.SortTypes}.</p></li>
+ * <li><b>sortDir</b> : String<p style="margin-left:1em">(Optional) Initial direction to sort. "ASC" or "DESC"</p></li>
+ * <li><b>convert</b> : Function<p style="margin-left:1em">(Optional) A function which converts the value provided
+ * by the Reader into an object that will be stored in the Record. It is passed the
+ * following parameters:<ul>
+ * <li><b>v</b> : Mixed<p style="margin-left:1em">The data value as read by the Reader.</p></li>
+ * </ul></p></li>
+ * <li><b>dateFormat</b> : String<p style="margin-left:1em">(Optional) A format String for the Date.parseDate function.</p></li>
+ * </ul>
+ * <br>usage:<br><pre><code>
+var TopicRecord = Roo.data.Record.create(
+    {name: 'title', mapping: 'topic_title'},
+    {name: 'author', mapping: 'username'},
+    {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
+    {name: 'lastPost', mapping: 'post_time', type: 'date'},
+    {name: 'lastPoster', mapping: 'user2'},
+    {name: 'excerpt', mapping: 'post_text'}
+);
 
-        // configurable properties:
-        //    padding, isTarget, maintainOffset, primaryButtonOnly
-        this.padding           = this.config.padding || [0, 0, 0, 0];
-        this.isTarget          = (this.config.isTarget !== false);
-        this.maintainOffset    = (this.config.maintainOffset);
-        this.primaryButtonOnly = (this.config.primaryButtonOnly !== false);
+var myNewRecord = new TopicRecord({
+    title: 'Do my job please',
+    author: 'noobie',
+    totalPosts: 1,
+    lastPost: new Date(),
+    lastPoster: 'Animal',
+    excerpt: 'No way dude!'
+});
+myStore.add(myNewRecord);
+</code></pre>
+ * @method create
+ * @static
+ */
+Roo.data.Record.create = function(o){
+    var f = function(){
+        f.superclass.constructor.apply(this, arguments);
+    };
+    Roo.extend(f, Roo.data.Record);
+    var p = f.prototype;
+    p.fields = new Roo.util.MixedCollection(false, function(field){
+        return field.name;
+    });
+    for(var i = 0, len = o.length; i < len; i++){
+        p.fields.add(new Roo.data.Field(o[i]));
+    }
+    f.getField = function(name){
+        return p.fields.get(name);  
+    };
+    return f;
+};
 
-    },
+Roo.data.Record.AUTO_ID = 1000;
+Roo.data.Record.EDIT = 'edit';
+Roo.data.Record.REJECT = 'reject';
+Roo.data.Record.COMMIT = 'commit';
 
+Roo.data.Record.prototype = {
     /**
-     * Executed when the linked element is available
-     * @method handleOnAvailable
-     * @private
+     * Readonly flag - true if this record has been modified.
+     * @type Boolean
      */
-    handleOnAvailable: function() {
-        this.available = true;
-        this.resetConstraints();
-        this.onAvailable();
-    },
+    dirty : false,
+    editing : false,
+    error: null,
+    modified: null,
 
-     /**
-     * Configures the padding for the target zone in px.  Effectively expands
-     * (or reduces) the virtual object size for targeting calculations.
-     * Supports css-style shorthand; if only one parameter is passed, all sides
-     * will have that padding, and if only two are passed, the top and bottom
-     * will have the first param, the left and right the second.
-     * @method setPadding
-     * @param {int} iTop    Top pad
-     * @param {int} iRight  Right pad
-     * @param {int} iBot    Bot pad
-     * @param {int} iLeft   Left pad
-     */
-    setPadding: function(iTop, iRight, iBot, iLeft) {
-        // this.padding = [iLeft, iRight, iTop, iBot];
-        if (!iRight && 0 !== iRight) {
-            this.padding = [iTop, iTop, iTop, iTop];
-        } else if (!iBot && 0 !== iBot) {
-            this.padding = [iTop, iRight, iTop, iRight];
-        } else {
-            this.padding = [iTop, iRight, iBot, iLeft];
-        }
+    // private
+    join : function(store){
+        this.store = store;
     },
 
     /**
-     * Stores the initial placement of the linked element.
-     * @method setInitialPosition
-     * @param {int} diffX   the X offset, default 0
-     * @param {int} diffY   the Y offset, default 0
+     * Set the named field to the specified value.
+     * @param {String} name The name of the field to set.
+     * @param {Object} value The value to set the field to.
      */
-    setInitPosition: function(diffX, diffY) {
-        var el = this.getEl();
-
-        if (!this.DDM.verifyEl(el)) {
+    set : function(name, value){
+        if(this.data[name] == value){
             return;
         }
-
-        var dx = diffX || 0;
-        var dy = diffY || 0;
-
-        var p = Dom.getXY( el );
-
-        this.initPageX = p[0] - dx;
-        this.initPageY = p[1] - dy;
-
-        this.lastPageX = p[0];
-        this.lastPageY = p[1];
-
-
-        this.setStartPosition(p);
+        this.dirty = true;
+        if(!this.modified){
+            this.modified = {};
+        }
+        if(typeof this.modified[name] == 'undefined'){
+            this.modified[name] = this.data[name];
+        }
+        this.data[name] = value;
+        if(!this.editing && this.store){
+            this.store.afterEdit(this);
+        }       
     },
 
     /**
-     * Sets the start position of the element.  This is set when the obj
-     * is initialized, the reset when a drag is started.
-     * @method setStartPosition
-     * @param pos current position (from previous lookup)
-     * @private
+     * Get the value of the named field.
+     * @param {String} name The name of the field to get the value of.
+     * @return {Object} The value of the field.
      */
-    setStartPosition: function(pos) {
-        var p = pos || Dom.getXY( this.getEl() );
-        this.deltaSetXY = null;
-
-        this.startPageX = p[0];
-        this.startPageY = p[1];
+    get : function(name){
+        return this.data[name]; 
     },
 
-    /**
-     * Add this instance to a group of related drag/drop objects.  All
-     * instances belong to at least one group, and can belong to as many
-     * groups as needed.
-     * @method addToGroup
-     * @param sGroup {string} the name of the group
-     */
-    addToGroup: function(sGroup) {
-        this.groups[sGroup] = true;
-        this.DDM.regDragDrop(this, sGroup);
+    // private
+    beginEdit : function(){
+        this.editing = true;
+        this.modified = {}; 
     },
 
-    /**
-     * Remove's this instance from the supplied interaction group
-     * @method removeFromGroup
-     * @param {string}  sGroup  The group to drop
-     */
-    removeFromGroup: function(sGroup) {
-        if (this.groups[sGroup]) {
-            delete this.groups[sGroup];
-        }
-
-        this.DDM.removeDDFromGroup(this, sGroup);
+    // private
+    cancelEdit : function(){
+        this.editing = false;
+        delete this.modified;
     },
 
-    /**
-     * Allows you to specify that an element other than the linked element
-     * will be moved with the cursor during a drag
-     * @method setDragElId
-     * @param id {string} the id of the element that will be used to initiate the drag
-     */
-    setDragElId: function(id) {
-        this.dragElId = id;
+    // private
+    endEdit : function(){
+        this.editing = false;
+        if(this.dirty && this.store){
+            this.store.afterEdit(this);
+        }
     },
 
     /**
-     * Allows you to specify a child of the linked element that should be
-     * used to initiate the drag operation.  An example of this would be if
-     * you have a content div with text and links.  Clicking anywhere in the
-     * content area would normally start the drag operation.  Use this method
-     * to specify that an element inside of the content div is the element
-     * that starts the drag operation.
-     * @method setHandleElId
-     * @param id {string} the id of the element that will be used to
-     * initiate the drag.
+     * Usually called by the {@link Roo.data.Store} which owns the Record.
+     * Rejects all changes made to the Record since either creation, or the last commit operation.
+     * Modified fields are reverted to their original values.
+     * <p>
+     * Developers should subscribe to the {@link Roo.data.Store#update} event to have their code notified
+     * of reject operations.
      */
-    setHandleElId: function(id) {
-        if (typeof id !== "string") {
-            id = Roo.id(id);
+    reject : function(){
+        var m = this.modified;
+        for(var n in m){
+            if(typeof m[n] != "function"){
+                this.data[n] = m[n];
+            }
+        }
+        this.dirty = false;
+        delete this.modified;
+        this.editing = false;
+        if(this.store){
+            this.store.afterReject(this);
         }
-        this.handleElId = id;
-        this.DDM.regHandle(this.id, id);
     },
 
     /**
-     * Allows you to set an element outside of the linked element as a drag
-     * handle
-     * @method setOuterHandleElId
-     * @param id the id of the element that will be used to initiate the drag
+     * Usually called by the {@link Roo.data.Store} which owns the Record.
+     * Commits all changes made to the Record since either creation, or the last commit operation.
+     * <p>
+     * Developers should subscribe to the {@link Roo.data.Store#update} event to have their code notified
+     * of commit operations.
      */
-    setOuterHandleElId: function(id) {
-        if (typeof id !== "string") {
-            id = Roo.id(id);
+    commit : function(){
+        this.dirty = false;
+        delete this.modified;
+        this.editing = false;
+        if(this.store){
+            this.store.afterCommit(this);
         }
-        Event.on(id, "mousedown",
-                this.handleMouseDown, this);
-        this.setHandleElId(id);
-
-        this.hasOuterHandles = true;
     },
 
-    /**
-     * Remove all drag and drop hooks for this element
-     * @method unreg
-     */
-    unreg: function() {
-        Event.un(this.id, "mousedown",
-                this.handleMouseDown);
-        Event.un(this.id, "touchstart",
-                this.handleMouseDown);
-        this._domRef = null;
-        this.DDM._remove(this);
+    // private
+    hasError : function(){
+        return this.error != null;
     },
 
-    destroy : function(){
-        this.unreg();
+    // private
+    clearError : function(){
+        this.error = null;
     },
 
     /**
-     * Returns true if this instance is locked, or the drag drop mgr is locked
-     * (meaning that all drag/drop is disabled on the page.)
-     * @method isLocked
-     * @return {boolean} true if this obj or all drag/drop is locked, else
-     * false
+     * Creates a copy of this record.
+     * @param {String} id (optional) A new record id if you don't want to use this record's id
+     * @return {Record}
      */
-    isLocked: function() {
-        return (this.DDM.isLocked() || this.locked);
-    },
+    copy : function(newId) {
+        return new this.constructor(Roo.apply({}, this.data), newId || this.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">
+ */
 
-    /**
-     * Fired when this object is clicked
-     * @method handleMouseDown
-     * @param {Event} e
-     * @param {Roo.dd.DragDrop} oDD the clicked dd object (this dd obj)
-     * @private
-     */
-    handleMouseDown: function(e, oDD){
-     
-        if (!Roo.isTouch && this.primaryButtonOnly && e.button != 0) {
-            //Roo.log('not touch/ button !=0');
-            return;
+
+
+/**
+ * @class Roo.data.Store
+ * @extends Roo.util.Observable
+ * The Store class encapsulates a client side cache of {@link Roo.data.Record} objects which provide input data
+ * for widgets such as the Roo.grid.Grid, or the Roo.form.ComboBox.<br>
+ * <p>
+ * A Store object uses an implementation of {@link Roo.data.DataProxy} to access a data object unless you call loadData() directly and pass in your data. The Store object
+ * has no knowledge of the format of the data returned by the Proxy.<br>
+ * <p>
+ * A Store object uses its configured implementation of {@link Roo.data.DataReader} to create {@link Roo.data.Record}
+ * instances from the data object. These records are cached and made available through accessor functions.
+ * @constructor
+ * Creates a new Store.
+ * @param {Object} config A config object containing the objects needed for the Store to access data,
+ * and read the data into Records.
+ */
+Roo.data.Store = function(config){
+    this.data = new Roo.util.MixedCollection(false);
+    this.data.getKey = function(o){
+        return o.id;
+    };
+    this.baseParams = {};
+    // private
+    this.paramNames = {
+        "start" : "start",
+        "limit" : "limit",
+        "sort" : "sort",
+        "dir" : "dir",
+        "multisort" : "_multisort"
+    };
+
+    if(config && config.data){
+        this.inlineData = config.data;
+        delete config.data;
+    }
+
+    Roo.apply(this, config);
+    
+    if(this.reader){ // reader passed
+        this.reader = Roo.factory(this.reader, Roo.data);
+        this.reader.xmodule = this.xmodule || false;
+        if(!this.recordType){
+            this.recordType = this.reader.recordType;
         }
-        if (e.browserEvent.touches && e.browserEvent.touches.length != 1) {
-            return; // double touch..
+        if(this.reader.onMetaChange){
+            this.reader.onMetaChange = this.onMetaChange.createDelegate(this);
         }
-        
+    }
 
-        if (this.isLocked()) {
-            //Roo.log('locked');
-            return;
-        }
+    if(this.recordType){
+        this.fields = this.recordType.prototype.fields;
+    }
+    this.modified = [];
 
-        this.DDM.refreshCache(this.groups);
-//        Roo.log([Roo.lib.Event.getPageX(e), Roo.lib.Event.getPageY(e)]);
-        var pt = new Roo.lib.Point(Roo.lib.Event.getPageX(e), Roo.lib.Event.getPageY(e));
-        if (!this.hasOuterHandles && !this.DDM.isOverTarget(pt, this) )  {
-            //Roo.log('no outer handes or not over target');
-                // do nothing.
-        } else {
-//            Roo.log('check validator');
-            if (this.clickValidator(e)) {
-//                Roo.log('validate success');
-                // set the initial element position
-                this.setStartPosition();
+    this.addEvents({
+        /**
+         * @event datachanged
+         * Fires when the data cache has changed, and a widget which is using this Store
+         * as a Record cache should refresh its view.
+         * @param {Store} this
+         */
+        datachanged : true,
+        /**
+         * @event metachange
+         * Fires when this store's reader provides new metadata (fields). This is currently only support for JsonReaders.
+         * @param {Store} this
+         * @param {Object} meta The JSON metadata
+         */
+        metachange : true,
+        /**
+         * @event add
+         * Fires when Records have been added to the Store
+         * @param {Store} this
+         * @param {Roo.data.Record[]} records The array of Records added
+         * @param {Number} index The index at which the record(s) were added
+         */
+        add : true,
+        /**
+         * @event remove
+         * Fires when a Record has been removed from the Store
+         * @param {Store} this
+         * @param {Roo.data.Record} record The Record that was removed
+         * @param {Number} index The index at which the record was removed
+         */
+        remove : true,
+        /**
+         * @event update
+         * Fires when a Record has been updated
+         * @param {Store} this
+         * @param {Roo.data.Record} record The Record that was updated
+         * @param {String} operation The update operation being performed.  Value may be one of:
+         * <pre><code>
+ Roo.data.Record.EDIT
+ Roo.data.Record.REJECT
+ Roo.data.Record.COMMIT
+         * </code></pre>
+         */
+        update : true,
+        /**
+         * @event clear
+         * Fires when the data cache has been cleared.
+         * @param {Store} this
+         */
+        clear : true,
+        /**
+         * @event beforeload
+         * Fires before a request is made for a new data object.  If the beforeload handler returns false
+         * the load action will be canceled.
+         * @param {Store} this
+         * @param {Object} options The loading options that were specified (see {@link #load} for details)
+         */
+        beforeload : true,
+        /**
+         * @event beforeloadadd
+         * Fires after a new set of Records has been loaded.
+         * @param {Store} this
+         * @param {Roo.data.Record[]} records The Records that were loaded
+         * @param {Object} options The loading options that were specified (see {@link #load} for details)
+         */
+        beforeloadadd : true,
+        /**
+         * @event load
+         * Fires after a new set of Records has been loaded, before they are added to the store.
+         * @param {Store} this
+         * @param {Roo.data.Record[]} records The Records that were loaded
+         * @param {Object} options The loading options that were specified (see {@link #load} for details)
+         * @params {Object} return from reader
+         */
+        load : true,
+        /**
+         * @event loadexception
+         * Fires if an exception occurs in the Proxy during loading.
+         * Called with the signature of the Proxy's "loadexception" event.
+         * If you return Json { data: [] , success: false, .... } then this will be thrown with the following args
+         * 
+         * @param {Proxy} 
+         * @param {Object} return from JsonData.reader() - success, totalRecords, records
+         * @param {Object} load options 
+         * @param {Object} jsonData from your request (normally this contains the Exception)
+         */
+        loadexception : true
+    });
+    
+    if(this.proxy){
+        this.proxy = Roo.factory(this.proxy, Roo.data);
+        this.proxy.xmodule = this.xmodule || false;
+        this.relayEvents(this.proxy,  ["loadexception"]);
+    }
+    this.sortToggle = {};
+    this.sortOrder = []; // array of order of sorting - updated by grid if multisort is enabled.
 
+    Roo.data.Store.superclass.constructor.call(this);
 
-                this.b4MouseDown(e);
-                this.onMouseDown(e);
+    if(this.inlineData){
+        this.loadData(this.inlineData);
+        delete this.inlineData;
+    }
+};
 
-                this.DDM.handleMouseDown(e, this);
+Roo.extend(Roo.data.Store, Roo.util.Observable, {
+     /**
+    * @cfg {boolean} isLocal   flag if data is locally available (and can be always looked up
+    * without a remote query - used by combo/forms at present.
+    */
+    
+    /**
+    * @cfg {Roo.data.DataProxy} proxy [required] The Proxy object which provides access to a data object.
+    */
+    /**
+    * @cfg {Array} data Inline data to be loaded when the store is initialized.
+    */
+    /**
+    * @cfg {Roo.data.DataReader} reader [required]  The Reader object which processes the data object and returns
+    * an Array of Roo.data.record objects which are cached keyed by their <em>id</em> property.
+    */
+    /**
+    * @cfg {Object} baseParams An object containing properties which are to be sent as parameters
+    * on any HTTP request
+    */
+    /**
+    * @cfg {Object} sortInfo A config object in the format: {field: "fieldName", direction: "ASC|DESC"}
+    */
+    /**
+    * @cfg {Boolean} multiSort enable multi column sorting (sort is based on the order of columns, remote only at present)
+    */
+    multiSort: false,
+    /**
+    * @cfg {boolean} remoteSort True if sorting is to be handled by requesting the Proxy to provide a refreshed
+    * version of the data object in sorted order, as opposed to sorting the Record cache in place (defaults to false).
+    */
+    remoteSort : false,
 
-                this.DDM.stopEvent(e);
-            } else {
+    /**
+    * @cfg {boolean} pruneModifiedRecords True to clear all modified record information each time the store is
+     * loaded or when a record is removed. (defaults to false).
+    */
+    pruneModifiedRecords : false,
 
+    // private
+    lastOptions : null,
 
-            }
+    /**
+     * Add Records to the Store and fires the add event.
+     * @param {Roo.data.Record[]} records An Array of Roo.data.Record objects to add to the cache.
+     */
+    add : function(records){
+        records = [].concat(records);
+        for(var i = 0, len = records.length; i < len; i++){
+            records[i].join(this);
         }
+        var index = this.data.length;
+        this.data.addAll(records);
+        this.fireEvent("add", this, records, index);
     },
 
-    clickValidator: function(e) {
-        var target = e.getTarget();
-        return ( this.isValidHandleChild(target) &&
-                    (this.id == this.handleElId ||
-                        this.DDM.handleWasClicked(target, this.id)) );
+    /**
+     * Remove a Record from the Store and fires the remove event.
+     * @param {Ext.data.Record} record The Roo.data.Record object to remove from the cache.
+     */
+    remove : function(record){
+        var index = this.data.indexOf(record);
+        this.data.removeAt(index);
+ 
+        if(this.pruneModifiedRecords){
+            this.modified.remove(record);
+        }
+        this.fireEvent("remove", this, record, index);
     },
 
     /**
-     * Allows you to specify a tag name that should not start a drag operation
-     * when clicked.  This is designed to facilitate embedding links within a
-     * drag handle that do something other than start the drag.
-     * @method addInvalidHandleType
-     * @param {string} tagName the type of element to exclude
+     * Remove all Records from the Store and fires the clear event.
      */
-    addInvalidHandleType: function(tagName) {
-        var type = tagName.toUpperCase();
-        this.invalidHandleTypes[type] = type;
+    removeAll : function(){
+        this.data.clear();
+        if(this.pruneModifiedRecords){
+            this.modified = [];
+        }
+        this.fireEvent("clear", this);
     },
 
     /**
-     * Lets you to specify an element id for a child of a drag handle
-     * that should not initiate a drag
-     * @method addInvalidHandleId
-     * @param {string} id the element id of the element you wish to ignore
+     * Inserts Records to the Store at the given index and fires the add event.
+     * @param {Number} index The start index at which to insert the passed Records.
+     * @param {Roo.data.Record[]} records An Array of Roo.data.Record objects to add to the cache.
      */
-    addInvalidHandleId: function(id) {
-        if (typeof id !== "string") {
-            id = Roo.id(id);
+    insert : function(index, records){
+        records = [].concat(records);
+        for(var i = 0, len = records.length; i < len; i++){
+            this.data.insert(index, records[i]);
+            records[i].join(this);
         }
-        this.invalidHandleIds[id] = id;
+        this.fireEvent("add", this, records, index);
     },
 
     /**
-     * Lets you specify a css class of elements that will not initiate a drag
-     * @method addInvalidHandleClass
-     * @param {string} cssClass the class of the elements you wish to ignore
+     * Get the index within the cache of the passed Record.
+     * @param {Roo.data.Record} record The Roo.data.Record object to to find.
+     * @return {Number} The index of the passed Record. Returns -1 if not found.
      */
-    addInvalidHandleClass: function(cssClass) {
-        this.invalidHandleClasses.push(cssClass);
+    indexOf : function(record){
+        return this.data.indexOf(record);
     },
 
     /**
-     * Unsets an excluded tag name set by addInvalidHandleType
-     * @method removeInvalidHandleType
-     * @param {string} tagName the type of element to unexclude
+     * Get the index within the cache of the Record with the passed id.
+     * @param {String} id The id of the Record to find.
+     * @return {Number} The index of the Record. Returns -1 if not found.
      */
-    removeInvalidHandleType: function(tagName) {
-        var type = tagName.toUpperCase();
-        // this.invalidHandleTypes[type] = null;
-        delete this.invalidHandleTypes[type];
+    indexOfId : function(id){
+        return this.data.indexOfKey(id);
     },
 
     /**
-     * Unsets an invalid handle id
-     * @method removeInvalidHandleId
-     * @param {string} id the id of the element to re-enable
+     * Get the Record with the specified id.
+     * @param {String} id The id of the Record to find.
+     * @return {Roo.data.Record} The Record with the passed id. Returns undefined if not found.
      */
-    removeInvalidHandleId: function(id) {
-        if (typeof id !== "string") {
-            id = Roo.id(id);
-        }
-        delete this.invalidHandleIds[id];
+    getById : function(id){
+        return this.data.key(id);
     },
 
     /**
-     * Unsets an invalid css class
-     * @method removeInvalidHandleClass
-     * @param {string} cssClass the class of the element(s) you wish to
-     * re-enable
+     * Get the Record at the specified index.
+     * @param {Number} index The index of the Record to find.
+     * @return {Roo.data.Record} The Record at the passed index. Returns undefined if not found.
      */
-    removeInvalidHandleClass: function(cssClass) {
-        for (var i=0, len=this.invalidHandleClasses.length; i<len; ++i) {
-            if (this.invalidHandleClasses[i] == cssClass) {
-                delete this.invalidHandleClasses[i];
-            }
-        }
+    getAt : function(index){
+        return this.data.itemAt(index);
     },
 
     /**
-     * Checks the tag exclusion list to see if this click should be ignored
-     * @method isValidHandleChild
-     * @param {HTMLElement} node the HTMLElement to evaluate
-     * @return {boolean} true if this is a valid tag type, false if not
+     * Returns a range of Records between specified indices.
+     * @param {Number} startIndex (optional) The starting index (defaults to 0)
+     * @param {Number} endIndex (optional) The ending index (defaults to the last Record in the Store)
+     * @return {Roo.data.Record[]} An array of Records
      */
-    isValidHandleChild: function(node) {
-
-        var valid = true;
-        // var n = (node.nodeName == "#text") ? node.parentNode : node;
-        var nodeName;
-        try {
-            nodeName = node.nodeName.toUpperCase();
-        } catch(e) {
-            nodeName = node.nodeName;
-        }
-        valid = valid && !this.invalidHandleTypes[nodeName];
-        valid = valid && !this.invalidHandleIds[node.id];
-
-        for (var i=0, len=this.invalidHandleClasses.length; valid && i<len; ++i) {
-            valid = !Dom.hasClass(node, this.invalidHandleClasses[i]);
-        }
-
-
-        return valid;
+    getRange : function(start, end){
+        return this.data.getRange(start, end);
+    },
 
+    // private
+    storeOptions : function(o){
+        o = Roo.apply({}, o);
+        delete o.callback;
+        delete o.scope;
+        this.lastOptions = o;
     },
 
     /**
-     * Create the array of horizontal tick marks if an interval was specified
-     * in setXConstraint().
-     * @method setXTicks
-     * @private
+     * Loads the Record cache from the configured Proxy using the configured Reader.
+     * <p>
+     * If using remote paging, then the first load call must specify the <em>start</em>
+     * and <em>limit</em> properties in the options.params property to establish the initial
+     * position within the dataset, and the number of Records to cache on each read from the Proxy.
+     * <p>
+     * <strong>It is important to note that for remote data sources, loading is asynchronous,
+     * and this call will return before the new data has been loaded. Perform any post-processing
+     * in a callback function, or in a "load" event handler.</strong>
+     * <p>
+     * @param {Object} options An object containing properties which control loading options:<ul>
+     * <li>params {Object} An object containing properties to pass as HTTP parameters to a remote data source.</li>
+     * <li>params.data {Object} if you are using a MemoryProxy / JsonReader, use this as the data to load stuff..
+     * <pre>
+                {
+                    data : data,  // array of key=>value data like JsonReader
+                    total : data.length,
+                    success : true
+                    
+                }
+        </pre>
+            }.</li>
+     * <li>callback {Function} A function to be called after the Records have been loaded. The callback is
+     * passed the following arguments:<ul>
+     * <li>r : Roo.data.Record[]</li>
+     * <li>options: Options object from the load call</li>
+     * <li>success: Boolean success indicator</li></ul></li>
+     * <li>scope {Object} Scope with which to call the callback (defaults to the Store object)</li>
+     * <li>add {Boolean} indicator to append loaded records rather than replace the current cache.</li>
+     * </ul>
      */
-    setXTicks: function(iStartX, iTickSize) {
-        this.xTicks = [];
-        this.xTickSize = iTickSize;
-
-        var tickMap = {};
-
-        for (var i = this.initPageX; i >= this.minX; i = i - iTickSize) {
-            if (!tickMap[i]) {
-                this.xTicks[this.xTicks.length] = i;
-                tickMap[i] = true;
+    load : function(options){
+        options = options || {};
+        if(this.fireEvent("beforeload", this, options) !== false){
+            this.storeOptions(options);
+            var p = Roo.apply(options.params || {}, this.baseParams);
+            // if meta was not loaded from remote source.. try requesting it.
+            if (!this.reader.metaFromRemote) {
+                p._requestMeta = 1;
             }
-        }
-
-        for (i = this.initPageX; i <= this.maxX; i = i + iTickSize) {
-            if (!tickMap[i]) {
-                this.xTicks[this.xTicks.length] = i;
-                tickMap[i] = true;
+            if(this.sortInfo && this.remoteSort){
+                var pn = this.paramNames;
+                p[pn["sort"]] = this.sortInfo.field;
+                p[pn["dir"]] = this.sortInfo.direction;
+            }
+            if (this.multiSort) {
+                var pn = this.paramNames;
+                p[pn["multisort"]] = Roo.encode( { sort : this.sortToggle, order: this.sortOrder });
             }
+            
+            this.proxy.load(p, this.reader, this.loadRecords, this, options);
         }
-
-        this.xTicks.sort(this.DDM.numericSort) ;
     },
 
     /**
-     * Create the array of vertical tick marks if an interval was specified in
-     * setYConstraint().
-     * @method setYTicks
-     * @private
+     * Reloads the Record cache from the configured Proxy using the configured Reader and
+     * the options from the last load operation performed.
+     * @param {Object} options (optional) An object containing properties which may override the options
+     * used in the last load operation. See {@link #load} for details (defaults to null, in which case
+     * the most recently used options are reused).
      */
-    setYTicks: function(iStartY, iTickSize) {
-        this.yTicks = [];
-        this.yTickSize = iTickSize;
-
-        var tickMap = {};
+    reload : function(options){
+        this.load(Roo.applyIf(options||{}, this.lastOptions));
+    },
 
-        for (var i = this.initPageY; i >= this.minY; i = i - iTickSize) {
-            if (!tickMap[i]) {
-                this.yTicks[this.yTicks.length] = i;
-                tickMap[i] = true;
+    // private
+    // Called as a callback by the Reader during a load operation.
+    loadRecords : function(o, options, success){
+         
+        if(!o){
+            if(success !== false){
+                this.fireEvent("load", this, [], options, o);
+            }
+            if(options.callback){
+                options.callback.call(options.scope || this, [], options, false);
             }
+            return;
         }
-
-        for (i = this.initPageY; i <= this.maxY; i = i + iTickSize) {
-            if (!tickMap[i]) {
-                this.yTicks[this.yTicks.length] = i;
-                tickMap[i] = true;
+        // if data returned failure - throw an exception.
+        if (o.success === false) {
+            // show a message if no listener is registered.
+            if (!this.hasListener('loadexception') && typeof(o.raw.errorMsg) != 'undefined') {
+                    Roo.MessageBox.alert("Error loading",o.raw.errorMsg);
+            }
+            // loadmask wil be hooked into this..
+            this.fireEvent("loadexception", this, o, options, o.raw.errorMsg);
+            return;
+        }
+        var r = o.records, t = o.totalRecords || r.length;
+        
+        this.fireEvent("beforeloadadd", this, r, options, o);
+        
+        if(!options || options.add !== true){
+            if(this.pruneModifiedRecords){
+                this.modified = [];
+            }
+            for(var i = 0, len = r.length; i < len; i++){
+                r[i].join(this);
+            }
+            if(this.snapshot){
+                this.data = this.snapshot;
+                delete this.snapshot;
             }
+            this.data.clear();
+            this.data.addAll(r);
+            this.totalLength = t;
+            this.applySort();
+            this.fireEvent("datachanged", this);
+        }else{
+            this.totalLength = Math.max(t, this.data.length+r.length);
+            this.add(r);
         }
+        
+        if(this.parent && !Roo.isIOS && !this.useNativeIOS && this.parent.emptyTitle.length) {
+                
+            var e = new Roo.data.Record({});
 
-        this.yTicks.sort(this.DDM.numericSort) ;
+            e.set(this.parent.displayField, this.parent.emptyTitle);
+            e.set(this.parent.valueField, '');
+
+            this.insert(0, e);
+        }
+            
+        this.fireEvent("load", this, r, options, o);
+        if(options.callback){
+            options.callback.call(options.scope || this, r, options, true);
+        }
     },
 
+
     /**
-     * By default, the element can be dragged any place on the screen.  Use
-     * this method to limit the horizontal travel of the element.  Pass in
-     * 0,0 for the parameters if you want to lock the drag to the y axis.
-     * @method setXConstraint
-     * @param {int} iLeft the number of pixels the element can move to the left
-     * @param {int} iRight the number of pixels the element can move to the
-     * right
-     * @param {int} iTickSize optional parameter for specifying that the
-     * element
-     * should move iTickSize pixels at a time.
+     * Loads data from a passed data block. A Reader which understands the format of the data
+     * must have been configured in the constructor.
+     * @param {Object} data The data block from which to read the Records.  The format of the data expected
+     * is dependent on the type of Reader that is configured and should correspond to that Reader's readRecords parameter.
+     * @param {Boolean} append (Optional) True to append the new Records rather than replace the existing cache.
      */
-    setXConstraint: function(iLeft, iRight, iTickSize) {
-        this.leftConstraint = iLeft;
-        this.rightConstraint = iRight;
-
-        this.minX = this.initPageX - iLeft;
-        this.maxX = this.initPageX + iRight;
-        if (iTickSize) { this.setXTicks(this.initPageX, iTickSize); }
-
-        this.constrainX = true;
+    loadData : function(o, append){
+        var r = this.reader.readRecords(o);
+        this.loadRecords(r, {add: append}, true);
+    },
+    
+     /**
+     * using 'cn' the nested child reader read the child array into it's child stores.
+     * @param {Object} rec The record with a 'children array
+     */
+    loadDataFromChildren : function(rec)
+    {
+        this.loadData(this.reader.toLoadData(rec));
     },
+    
 
     /**
-     * Clears any constraints applied to this instance.  Also clears ticks
-     * since they can't exist independent of a constraint at this time.
-     * @method clearConstraints
+     * Gets the number of cached records.
+     * <p>
+     * <em>If using paging, this may not be the total size of the dataset. If the data object
+     * used by the Reader contains the dataset size, then the getTotalCount() function returns
+     * the data set size</em>
      */
-    clearConstraints: function() {
-        this.constrainX = false;
-        this.constrainY = false;
-        this.clearTicks();
+    getCount : function(){
+        return this.data.length || 0;
     },
 
     /**
-     * Clears any tick interval defined for this instance
-     * @method clearTicks
+     * Gets the total number of records in the dataset as returned by the server.
+     * <p>
+     * <em>If using paging, for this to be accurate, the data object used by the Reader must contain
+     * the dataset size</em>
      */
-    clearTicks: function() {
-        this.xTicks = null;
-        this.yTicks = null;
-        this.xTickSize = 0;
-        this.yTickSize = 0;
+    getTotalCount : function(){
+        return this.totalLength || 0;
     },
 
     /**
-     * By default, the element can be dragged any place on the screen.  Set
-     * this to limit the vertical travel of the element.  Pass in 0,0 for the
-     * parameters if you want to lock the drag to the x axis.
-     * @method setYConstraint
-     * @param {int} iUp the number of pixels the element can move up
-     * @param {int} iDown the number of pixels the element can move down
-     * @param {int} iTickSize optional parameter for specifying that the
-     * element should move iTickSize pixels at a time.
+     * Returns the sort state of the Store as an object with two properties:
+     * <pre><code>
+ field {String} The name of the field by which the Records are sorted
+ direction {String} The sort order, "ASC" or "DESC"
+     * </code></pre>
      */
-    setYConstraint: function(iUp, iDown, iTickSize) {
-        this.topConstraint = iUp;
-        this.bottomConstraint = iDown;
-
-        this.minY = this.initPageY - iUp;
-        this.maxY = this.initPageY + iDown;
-        if (iTickSize) { this.setYTicks(this.initPageY, iTickSize); }
-
-        this.constrainY = true;
+    getSortState : function(){
+        return this.sortInfo;
+    },
 
+    // private
+    applySort : function(){
+        if(this.sortInfo && !this.remoteSort){
+            var s = this.sortInfo, f = s.field;
+            var st = this.fields.get(f).sortType;
+            var fn = function(r1, r2){
+                var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
+                return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
+            };
+            this.data.sort(s.direction, fn);
+            if(this.snapshot && this.snapshot != this.data){
+                this.snapshot.sort(s.direction, fn);
+            }
+        }
     },
 
     /**
-     * resetConstraints must be called if you manually reposition a dd element.
-     * @method resetConstraints
-     * @param {boolean} maintainOffset
+     * Sets the default sort column and order to be used by the next load operation.
+     * @param {String} fieldName The name of the field to sort by.
+     * @param {String} dir (optional) The sort order, "ASC" or "DESC" (defaults to "ASC")
      */
-    resetConstraints: function() {
-
-
-        // Maintain offsets if necessary
-        if (this.initPageX || this.initPageX === 0) {
-            // figure out how much this thing has moved
-            var dx = (this.maintainOffset) ? this.lastPageX - this.initPageX : 0;
-            var dy = (this.maintainOffset) ? this.lastPageY - this.initPageY : 0;
-
-            this.setInitPosition(dx, dy);
+    setDefaultSort : function(field, dir){
+        this.sortInfo = {field: field, direction: dir ? dir.toUpperCase() : "ASC"};
+    },
 
-        // This is the first time we have detected the element's position
-        } else {
-            this.setInitPosition();
+    /**
+     * Sort the Records.
+     * If remote sorting is used, the sort is performed on the server, and the cache is
+     * reloaded. If local sorting is used, the cache is sorted internally.
+     * @param {String} fieldName The name of the field to sort by.
+     * @param {String} dir (optional) The sort order, "ASC" or "DESC" (defaults to "ASC")
+     */
+    sort : function(fieldName, dir){
+        var f = this.fields.get(fieldName);
+        if(!dir){
+            this.sortToggle[f.name] = this.sortToggle[f.name] || f.sortDir;
+            
+            if(this.multiSort || (this.sortInfo && this.sortInfo.field == f.name) ){ // toggle sort dir
+                dir = (this.sortToggle[f.name] || "ASC").toggle("ASC", "DESC");
+            }else{
+                dir = f.sortDir;
+            }
         }
-
-        if (this.constrainX) {
-            this.setXConstraint( this.leftConstraint,
-                                 this.rightConstraint,
-                                 this.xTickSize        );
+        this.sortToggle[f.name] = dir;
+        this.sortInfo = {field: f.name, direction: dir};
+        if(!this.remoteSort){
+            this.applySort();
+            this.fireEvent("datachanged", this);
+        }else{
+            this.load(this.lastOptions);
         }
+    },
 
-        if (this.constrainY) {
-            this.setYConstraint( this.topConstraint,
-                                 this.bottomConstraint,
-                                 this.yTickSize         );
-        }
+    /**
+     * Calls the specified function for each of the Records in the cache.
+     * @param {Function} fn The function to call. The Record is passed as the first parameter.
+     * Returning <em>false</em> aborts and exits the iteration.
+     * @param {Object} scope (optional) The scope in which to call the function (defaults to the Record).
+     */
+    each : function(fn, scope){
+        this.data.each(fn, scope);
     },
 
     /**
-     * Normally the drag element is moved pixel by pixel, but we can specify
-     * that it move a number of pixels at a time.  This method resolves the
-     * location when we have it set up like this.
-     * @method getTick
-     * @param {int} val where we want to place the object
-     * @param {int[]} tickArray sorted array of valid points
-     * @return {int} the closest tick
-     * @private
+     * Gets all records modified since the last commit.  Modified records are persisted across load operations
+     * (e.g., during paging).
+     * @return {Roo.data.Record[]} An array of Records containing outstanding modifications.
      */
-    getTick: function(val, tickArray) {
+    getModifiedRecords : function(){
+        return this.modified;
+    },
 
-        if (!tickArray) {
-            // If tick interval is not defined, it is effectively 1 pixel,
-            // so we return the value passed to us.
-            return val;
-        } else if (tickArray[0] >= val) {
-            // The value is lower than the first tick, so we return the first
-            // tick.
-            return tickArray[0];
-        } else {
-            for (var i=0, len=tickArray.length; i<len; ++i) {
-                var next = i + 1;
-                if (tickArray[next] && tickArray[next] >= val) {
-                    var diff1 = val - tickArray[i];
-                    var diff2 = tickArray[next] - val;
-                    return (diff2 > diff1) ? tickArray[i] : tickArray[next];
-                }
+    // private
+    createFilterFn : function(property, value, anyMatch){
+        if(!value.exec){ // not a regex
+            value = String(value);
+            if(value.length == 0){
+                return false;
             }
-
-            // The value is larger than the last tick, so we return the last
-            // tick.
-            return tickArray[tickArray.length - 1];
+            value = new RegExp((anyMatch === true ? '' : '^') + Roo.escapeRe(value), "i");
         }
+        return function(r){
+            return value.test(r.data[property]);
+        };
     },
 
     /**
-     * toString method
-     * @method toString
-     * @return {string} string representation of the dd obj
+     * Sums the value of <i>property</i> for each record between start and end and returns the result.
+     * @param {String} property A field on your records
+     * @param {Number} start The record index to start at (defaults to 0)
+     * @param {Number} end The last record index to include (defaults to length - 1)
+     * @return {Number} The sum
      */
-    toString: function() {
-        return ("DragDrop " + this.id);
-    }
+    sum : function(property, start, end){
+        var rs = this.data.items, v = 0;
+        start = start || 0;
+        end = (end || end === 0) ? end : rs.length-1;
 
-});
+        for(var i = start; i <= end; i++){
+            v += (rs[i].data[property] || 0);
+        }
+        return v;
+    },
 
-})();
-/*
+    /**
+     * Filter the records by a specified property.
+     * @param {String} field A field on your records
+     * @param {String/RegExp} value Either a string that the field
+     * should start with or a RegExp to test against the field
+     * @param {Boolean} anyMatch True to match any part not just the beginning
+     */
+    filter : function(property, value, anyMatch){
+        var fn = this.createFilterFn(property, value, anyMatch);
+        return fn ? this.filterBy(fn) : this.clearFilter();
+    },
+
+    /**
+     * Filter by a function. The specified function will be called with each
+     * record in this data source. If the function returns true the record is included,
+     * otherwise it is filtered.
+     * @param {Function} fn The function to be called, it will receive 2 args (record, id)
+     * @param {Object} scope (optional) The scope of the function (defaults to this)
+     */
+    filterBy : function(fn, scope){
+        this.snapshot = this.snapshot || this.data;
+        this.data = this.queryBy(fn, scope||this);
+        this.fireEvent("datachanged", this);
+    },
+
+    /**
+     * Query the records by a specified property.
+     * @param {String} field A field on your records
+     * @param {String/RegExp} value Either a string that the field
+     * should start with or a RegExp to test against the field
+     * @param {Boolean} anyMatch True to match any part not just the beginning
+     * @return {MixedCollection} Returns an Roo.util.MixedCollection of the matched records
+     */
+    query : function(property, value, anyMatch){
+        var fn = this.createFilterFn(property, value, anyMatch);
+        return fn ? this.queryBy(fn) : this.data.clone();
+    },
+
+    /**
+     * Query by a function. The specified function will be called with each
+     * record in this data source. If the function returns true the record is included
+     * in the results.
+     * @param {Function} fn The function to be called, it will receive 2 args (record, id)
+     * @param {Object} scope (optional) The scope of the function (defaults to this)
+      @return {MixedCollection} Returns an Roo.util.MixedCollection of the matched records
+     **/
+    queryBy : function(fn, scope){
+        var data = this.snapshot || this.data;
+        return data.filterBy(fn, scope||this);
+    },
+
+    /**
+     * Collects unique values for a particular dataIndex from this store.
+     * @param {String} dataIndex The property to collect
+     * @param {Boolean} allowNull (optional) Pass true to allow null, undefined or empty string values
+     * @param {Boolean} bypassFilter (optional) Pass true to collect from all records, even ones which are filtered
+     * @return {Array} An array of the unique values
+     **/
+    collect : function(dataIndex, allowNull, bypassFilter){
+        var d = (bypassFilter === true && this.snapshot) ?
+                this.snapshot.items : this.data.items;
+        var v, sv, r = [], l = {};
+        for(var i = 0, len = d.length; i < len; i++){
+            v = d[i].data[dataIndex];
+            sv = String(v);
+            if((allowNull || !Roo.isEmpty(v)) && !l[sv]){
+                l[sv] = true;
+                r[r.length] = v;
+            }
+        }
+        return r;
+    },
+
+    /**
+     * Revert to a view of the Record cache with no filtering applied.
+     * @param {Boolean} suppressEvent If true the filter is cleared silently without notifying listeners
+     */
+    clearFilter : function(suppressEvent){
+        if(this.snapshot && this.snapshot != this.data){
+            this.data = this.snapshot;
+            delete this.snapshot;
+            if(suppressEvent !== true){
+                this.fireEvent("datachanged", this);
+            }
+        }
+    },
+
+    // private
+    afterEdit : function(record){
+        if(this.modified.indexOf(record) == -1){
+            this.modified.push(record);
+        }
+        this.fireEvent("update", this, record, Roo.data.Record.EDIT);
+    },
+    
+    // private
+    afterReject : function(record){
+        this.modified.remove(record);
+        this.fireEvent("update", this, record, Roo.data.Record.REJECT);
+    },
+
+    // private
+    afterCommit : function(record){
+        this.modified.remove(record);
+        this.fireEvent("update", this, record, Roo.data.Record.COMMIT);
+    },
+
+    /**
+     * Commit all Records with outstanding changes. To handle updates for changes, subscribe to the
+     * Store's "update" event, and perform updating when the third parameter is Roo.data.Record.COMMIT.
+     */
+    commitChanges : function(){
+        var m = this.modified.slice(0);
+        this.modified = [];
+        for(var i = 0, len = m.length; i < len; i++){
+            m[i].commit();
+        }
+    },
+
+    /**
+     * Cancel outstanding changes on all changed records.
+     */
+    rejectChanges : function(){
+        var m = this.modified.slice(0);
+        this.modified = [];
+        for(var i = 0, len = m.length; i < len; i++){
+            m[i].reject();
+        }
+    },
+
+    onMetaChange : function(meta, rtype, o){
+        this.recordType = rtype;
+        this.fields = rtype.prototype.fields;
+        delete this.snapshot;
+        this.sortInfo = meta.sortInfo || this.sortInfo;
+        this.modified = [];
+        this.fireEvent('metachange', this, this.reader.meta);
+    },
+    
+    moveIndex : function(data, type)
+    {
+        var index = this.indexOf(data);
+        
+        var newIndex = index + type;
+        
+        this.remove(data);
+        
+        this.insert(newIndex, data);
+        
+    }
+});/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -1188,1303 +1103,347 @@ Roo.extend(Roo.dd.DragDrop, Roo.util.Observable , {
  * <script type="text/javascript">
  */
 
-
 /**
- * The drag and drop utility provides a framework for building drag and drop
- * applications.  In addition to enabling drag and drop for specific elements,
- * the drag and drop elements are tracked by the manager class, and the
- * interactions between the various elements are tracked during the drag and
- * the implementing code is notified about these important moments.
+ * @class Roo.data.SimpleStore
+ * @extends Roo.data.Store
+ * Small helper class to make creating Stores from Array data easier.
+ * @cfg {Number} id The array index of the record id. Leave blank to auto generate ids.
+ * @cfg {Array} fields An array of field definition objects, or field name strings.
+ * @cfg {Object} an existing reader (eg. copied from another store)
+ * @cfg {Array} data The multi-dimensional array of data
+ * @cfg {Roo.data.DataProxy} proxy [not-required]  
+ * @cfg {Roo.data.Reader} reader  [not-required] 
+ * @constructor
+ * @param {Object} config
+ */
+Roo.data.SimpleStore = function(config)
+{
+    Roo.data.SimpleStore.superclass.constructor.call(this, {
+        isLocal : true,
+        reader: typeof(config.reader) != 'undefined' ? config.reader : new Roo.data.ArrayReader({
+                id: config.id
+            },
+            Roo.data.Record.create(config.fields)
+        ),
+        proxy : new Roo.data.MemoryProxy(config.data)
+    });
+    this.load();
+};
+Roo.extend(Roo.data.SimpleStore, Roo.data.Store);/*
+ * 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">
  */
 
-// Only load the library once.  Rewriting the manager class would orphan
-// existing drag and drop instances.
-if (!Roo.dd.DragDropMgr) {
-
 /**
- * @class Roo.dd.DragDropMgr
- * DragDropMgr is a singleton that tracks the element interaction for
- * all DragDrop items in the window.  Generally, you will not call
- * this class directly, but it does have helper methods that could
- * be useful in your DragDrop implementations.
- * @singleton
+/**
+ * @extends Roo.data.Store
+ * @class Roo.data.JsonStore
+ * Small helper class to make creating Stores for JSON data easier. <br/>
+<pre><code>
+var store = new Roo.data.JsonStore({
+    url: 'get-images.php',
+    root: 'images',
+    fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
+});
+</code></pre>
+ * <b>Note: Although they are not listed, this class inherits all of the config options of Store,
+ * JsonReader and HttpProxy (unless inline data is provided).</b>
+ * @cfg {Array} fields An array of field definition objects, or field name strings.
+ * @constructor
+ * @param {Object} config
+ */
+Roo.data.JsonStore = function(c){
+    Roo.data.JsonStore.superclass.constructor.call(this, Roo.apply(c, {
+        proxy: !c.data ? new Roo.data.HttpProxy({url: c.url}) : undefined,
+        reader: new Roo.data.JsonReader(c, c.fields)
+    }));
+};
+Roo.extend(Roo.data.JsonStore, Roo.data.Store);/*
+ * 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.dd.DragDropMgr = function() {
-
-    var Event = Roo.EventManager;
-
-    return {
-
-        /**
-         * Two dimensional Array of registered DragDrop objects.  The first
-         * dimension is the DragDrop item group, the second the DragDrop
-         * object.
-         * @property ids
-         * @type {string: string}
-         * @private
-         * @static
-         */
-        ids: {},
-
-        /**
-         * Array of element ids defined as drag handles.  Used to determine
-         * if the element that generated the mousedown event is actually the
-         * handle and not the html element itself.
-         * @property handleIds
-         * @type {string: string}
-         * @private
-         * @static
-         */
-        handleIds: {},
-
-        /**
-         * the DragDrop object that is currently being dragged
-         * @property dragCurrent
-         * @type DragDrop
-         * @private
-         * @static
-         **/
-        dragCurrent: null,
-
-        /**
-         * the DragDrop object(s) that are being hovered over
-         * @property dragOvers
-         * @type Array
-         * @private
-         * @static
-         */
-        dragOvers: {},
-
-        /**
-         * the X distance between the cursor and the object being dragged
-         * @property deltaX
-         * @type int
-         * @private
-         * @static
-         */
-        deltaX: 0,
-
-        /**
-         * the Y distance between the cursor and the object being dragged
-         * @property deltaY
-         * @type int
-         * @private
-         * @static
-         */
-        deltaY: 0,
-
-        /**
-         * Flag to determine if we should prevent the default behavior of the
-         * events we define. By default this is true, but this can be set to
-         * false if you need the default behavior (not recommended)
-         * @property preventDefault
-         * @type boolean
-         * @static
-         */
-        preventDefault: true,
-
-        /**
-         * Flag to determine if we should stop the propagation of the events
-         * we generate. This is true by default but you may want to set it to
-         * false if the html element contains other features that require the
-         * mouse click.
-         * @property stopPropagation
-         * @type boolean
-         * @static
-         */
-        stopPropagation: true,
-
-        /**
-         * Internal flag that is set to true when drag and drop has been
-         * intialized
-         * @property initialized
-         * @private
-         * @static
-         */
-        initalized: false,
-
-        /**
-         * All drag and drop can be disabled.
-         * @property locked
-         * @private
-         * @static
-         */
-        locked: false,
-
-        /**
-         * Called the first time an element is registered.
-         * @method init
-         * @private
-         * @static
-         */
-        init: function() {
-            this.initialized = true;
-        },
-
-        /**
-         * In point mode, drag and drop interaction is defined by the
-         * location of the cursor during the drag/drop
-         * @property POINT
-         * @type int
-         * @static
-         */
-        POINT: 0,
 
-        /**
-         * In intersect mode, drag and drop interactio nis defined by the
-         * overlap of two or more drag and drop objects.
-         * @property INTERSECT
-         * @type int
-         * @static
-         */
-        INTERSECT: 1,
+ 
+Roo.data.Field = function(config){
+    if(typeof config == "string"){
+        config = {name: config};
+    }
+    Roo.apply(this, config);
+    
+    if(!this.type){
+        this.type = "auto";
+    }
+    
+    var st = Roo.data.SortTypes;
+    // named sortTypes are supported, here we look them up
+    if(typeof this.sortType == "string"){
+        this.sortType = st[this.sortType];
+    }
+    
+    // set default sortType for strings and dates
+    if(!this.sortType){
+        switch(this.type){
+            case "string":
+                this.sortType = st.asUCString;
+                break;
+            case "date":
+                this.sortType = st.asDate;
+                break;
+            default:
+                this.sortType = st.none;
+        }
+    }
 
-        /**
-         * The current drag and drop mode.  Default: POINT
-         * @property mode
-         * @type int
-         * @static
-         */
-        mode: 0,
+    // define once
+    var stripRe = /[\$,%]/g;
 
-        /**
-         * Runs method on all drag and drop objects
-         * @method _execOnAll
-         * @private
-         * @static
-         */
-        _execOnAll: function(sMethod, args) {
-            for (var i in this.ids) {
-                for (var j in this.ids[i]) {
-                    var oDD = this.ids[i][j];
-                    if (! this.isTypeOfDD(oDD)) {
-                        continue;
+    // prebuilt conversion function for this field, instead of
+    // switching every time we're reading a value
+    if(!this.convert){
+        var cv, dateFormat = this.dateFormat;
+        switch(this.type){
+            case "":
+            case "auto":
+            case undefined:
+                cv = function(v){ return v; };
+                break;
+            case "string":
+                cv = function(v){ return (v === undefined || v === null) ? '' : String(v); };
+                break;
+            case "int":
+                cv = function(v){
+                    return v !== undefined && v !== null && v !== '' ?
+                           parseInt(String(v).replace(stripRe, ""), 10) : '';
+                    };
+                break;
+            case "float":
+                cv = function(v){
+                    return v !== undefined && v !== null && v !== '' ?
+                           parseFloat(String(v).replace(stripRe, ""), 10) : ''; 
+                    };
+                break;
+            case "bool":
+            case "boolean":
+                cv = function(v){ return v === true || v === "true" || v == 1; };
+                break;
+            case "date":
+                cv = function(v){
+                    if(!v){
+                        return '';
                     }
-                    oDD[sMethod].apply(oDD, args);
-                }
-            }
-        },
-
-        /**
-         * Drag and drop initialization.  Sets up the global event handlers
-         * @method _onLoad
-         * @private
-         * @static
-         */
-        _onLoad: function() {
-
-            this.init();
-
-            if (!Roo.isTouch) {
-                Event.on(document, "mouseup",   this.handleMouseUp, this, true);
-                Event.on(document, "mousemove", this.handleMouseMove, this, true);
-            }
-            Event.on(document, "touchend",   this.handleMouseUp, this, true);
-            Event.on(document, "touchmove", this.handleMouseMove, this, true);
+                    if(v instanceof Date){
+                        return v;
+                    }
+                    if(dateFormat){
+                        if(dateFormat == "timestamp"){
+                            return new Date(v*1000);
+                        }
+                        return Date.parseDate(v, dateFormat);
+                    }
+                    var parsed = Date.parse(v);
+                    return parsed ? new Date(parsed) : null;
+                };
+             break;
             
-            Event.on(window,   "unload",    this._onUnload, this, true);
-            Event.on(window,   "resize",    this._onResize, this, true);
-            // Event.on(window,   "mouseout",    this._test);
+        }
+        this.convert = cv;
+    }
+};
 
-        },
+Roo.data.Field.prototype = {
+    dateFormat: null,
+    defaultValue: "",
+    mapping: null,
+    sortType : null,
+    sortDir : "ASC"
+};/*
+ * 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">
+ */
+ 
+// Base class for reading structured data from a data source.  This class is intended to be
+// extended (see ArrayReader, JsonReader and XmlReader) and should not be created directly.
 
-        /**
-         * Reset constraints on all drag and drop objs
-         * @method _onResize
-         * @private
-         * @static
-         */
-        _onResize: function(e) {
-            this._execOnAll("resetConstraints", []);
-        },
+/**
+ * @class Roo.data.DataReader
+ * @abstract
+ * Base class for reading structured data from a data source.  This class is intended to be
+ * extended (see {Roo.data.ArrayReader}, {Roo.data.JsonReader} and {Roo.data.XmlReader}) and should not be created directly.
+ */
 
-        /**
-         * Lock all drag and drop functionality
-         * @method lock
-         * @static
-         */
-        lock: function() { this.locked = true; },
+Roo.data.DataReader = function(meta, recordType){
+    
+    this.meta = meta;
+    
+    this.recordType = recordType instanceof Array ? 
+        Roo.data.Record.create(recordType) : recordType;
+};
 
-        /**
-         * Unlock all drag and drop functionality
-         * @method unlock
-         * @static
-         */
-        unlock: function() { this.locked = false; },
+Roo.data.DataReader.prototype = {
+    
+    
+    readerType : 'Data',
+     /**
+     * Create an empty record
+     * @param {Object} data (optional) - overlay some values
+     * @return {Roo.data.Record} record created.
+     */
+    newRow :  function(d) {
+        var da =  {};
+        this.recordType.prototype.fields.each(function(c) {
+            switch( c.type) {
+                case 'int' : da[c.name] = 0; break;
+                case 'date' : da[c.name] = new Date(); break;
+                case 'float' : da[c.name] = 0.0; break;
+                case 'boolean' : da[c.name] = false; break;
+                default : da[c.name] = ""; break;
+            }
+            
+        });
+        return new this.recordType(Roo.apply(da, d));
+    }
+    
+    
+};/*
+ * 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.data.DataProxy
+ * @extends Roo.util.Observable
+ * @abstract
+ * This class is an abstract base class for implementations which provide retrieval of
+ * unformatted data objects.<br>
+ * <p>
+ * DataProxy implementations are usually used in conjunction with an implementation of Roo.data.DataReader
+ * (of the appropriate type which knows how to parse the data object) to provide a block of
+ * {@link Roo.data.Records} to an {@link Roo.data.Store}.<br>
+ * <p>
+ * Custom implementations must implement the load method as described in
+ * {@link Roo.data.HttpProxy#load}.
+ */
+Roo.data.DataProxy = function(){
+    this.addEvents({
         /**
-         * Is drag and drop locked?
-         * @method isLocked
-         * @return {boolean} True if drag and drop is locked, false otherwise.
-         * @static
+         * @event beforeload
+         * Fires before a network request is made to retrieve a data object.
+         * @param {Object} This DataProxy object.
+         * @param {Object} params The params parameter to the load function.
          */
-        isLocked: function() { return this.locked; },
-
+        beforeload : true,
         /**
-         * Location cache that is set for all drag drop objects when a drag is
-         * initiated, cleared when the drag is finished.
-         * @property locationCache
-         * @private
-         * @static
+         * @event load
+         * Fires before the load method's callback is called.
+         * @param {Object} This DataProxy object.
+         * @param {Object} o The data object.
+         * @param {Object} arg The callback argument object passed to the load function.
          */
-        locationCache: {},
-
+        load : true,
         /**
-         * Set useCache to false if you want to force object the lookup of each
-         * drag and drop linked element constantly during a drag.
-         * @property useCache
-         * @type boolean
-         * @static
+         * @event loadexception
+         * Fires if an Exception occurs during data retrieval.
+         * @param {Object} This DataProxy object.
+         * @param {Object} o The data object.
+         * @param {Object} arg The callback argument object passed to the load function.
+         * @param {Object} e The Exception.
          */
-        useCache: true,
+        loadexception : true
+    });
+    Roo.data.DataProxy.superclass.constructor.call(this);
+};
 
-        /**
-         * The number of pixels that the mouse needs to move after the
-         * mousedown before the drag is initiated.  Default=3;
-         * @property clickPixelThresh
-         * @type int
-         * @static
-         */
-        clickPixelThresh: 3,
+Roo.extend(Roo.data.DataProxy, Roo.util.Observable);
 
-        /**
-         * The number of milliseconds after the mousedown event to initiate the
-         * drag if we don't get a mouseup event. Default=1000
-         * @property clickTimeThresh
-         * @type int
-         * @static
-         */
-        clickTimeThresh: 350,
+    /**
+     * @cfg {void} listeners (Not available) Constructor blocks listeners from being set
+     */
+/*
+ * 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.data.MemoryProxy
+ * An implementation of Roo.data.DataProxy that simply passes the data specified in its constructor
+ * to the Reader when its load method is called.
+ * @constructor
+ * @param {Object} data The data object which the Reader uses to construct a block of Roo.data.Records.
+ */
+Roo.data.MemoryProxy = function(data){
+    if (data.data) {
+        data = data.data;
+    }
+    Roo.data.MemoryProxy.superclass.constructor.call(this);
+    this.data = data;
+};
 
-        /**
-         * Flag that indicates that either the drag pixel threshold or the
-         * mousdown time threshold has been met
-         * @property dragThreshMet
-         * @type boolean
-         * @private
-         * @static
-         */
-        dragThreshMet: false,
-
-        /**
-         * Timeout used for the click time threshold
-         * @property clickTimeout
-         * @type Object
-         * @private
-         * @static
-         */
-        clickTimeout: null,
-
-        /**
-         * The X position of the mousedown event stored for later use when a
-         * drag threshold is met.
-         * @property startX
-         * @type int
-         * @private
-         * @static
-         */
-        startX: 0,
-
-        /**
-         * The Y position of the mousedown event stored for later use when a
-         * drag threshold is met.
-         * @property startY
-         * @type int
-         * @private
-         * @static
-         */
-        startY: 0,
-
-        /**
-         * Each DragDrop instance must be registered with the DragDropMgr.
-         * This is executed in DragDrop.init()
-         * @method regDragDrop
-         * @param {DragDrop} oDD the DragDrop object to register
-         * @param {String} sGroup the name of the group this element belongs to
-         * @static
-         */
-        regDragDrop: function(oDD, sGroup) {
-            if (!this.initialized) { this.init(); }
-
-            if (!this.ids[sGroup]) {
-                this.ids[sGroup] = {};
-            }
-            this.ids[sGroup][oDD.id] = oDD;
-        },
-
-        /**
-         * Removes the supplied dd instance from the supplied group. Executed
-         * by DragDrop.removeFromGroup, so don't call this function directly.
-         * @method removeDDFromGroup
-         * @private
-         * @static
-         */
-        removeDDFromGroup: function(oDD, sGroup) {
-            if (!this.ids[sGroup]) {
-                this.ids[sGroup] = {};
-            }
-
-            var obj = this.ids[sGroup];
-            if (obj && obj[oDD.id]) {
-                delete obj[oDD.id];
-            }
-        },
-
-        /**
-         * Unregisters a drag and drop item.  This is executed in
-         * DragDrop.unreg, use that method instead of calling this directly.
-         * @method _remove
-         * @private
-         * @static
-         */
-        _remove: function(oDD) {
-            for (var g in oDD.groups) {
-                if (g && this.ids[g][oDD.id]) {
-                    delete this.ids[g][oDD.id];
-                }
-            }
-            delete this.handleIds[oDD.id];
-        },
-
-        /**
-         * Each DragDrop handle element must be registered.  This is done
-         * automatically when executing DragDrop.setHandleElId()
-         * @method regHandle
-         * @param {String} sDDId the DragDrop id this element is a handle for
-         * @param {String} sHandleId the id of the element that is the drag
-         * handle
-         * @static
-         */
-        regHandle: function(sDDId, sHandleId) {
-            if (!this.handleIds[sDDId]) {
-                this.handleIds[sDDId] = {};
-            }
-            this.handleIds[sDDId][sHandleId] = sHandleId;
-        },
-
-        /**
-         * Utility function to determine if a given element has been
-         * registered as a drag drop item.
-         * @method isDragDrop
-         * @param {String} id the element id to check
-         * @return {boolean} true if this element is a DragDrop item,
-         * false otherwise
-         * @static
-         */
-        isDragDrop: function(id) {
-            return ( this.getDDById(id) ) ? true : false;
-        },
-
-        /**
-         * Returns the drag and drop instances that are in all groups the
-         * passed in instance belongs to.
-         * @method getRelated
-         * @param {DragDrop} p_oDD the obj to get related data for
-         * @param {boolean} bTargetsOnly if true, only return targetable objs
-         * @return {DragDrop[]} the related instances
-         * @static
-         */
-        getRelated: function(p_oDD, bTargetsOnly) {
-            var oDDs = [];
-            for (var i in p_oDD.groups) {
-                for (j in this.ids[i]) {
-                    var dd = this.ids[i][j];
-                    if (! this.isTypeOfDD(dd)) {
-                        continue;
-                    }
-                    if (!bTargetsOnly || dd.isTarget) {
-                        oDDs[oDDs.length] = dd;
-                    }
-                }
-            }
-
-            return oDDs;
-        },
-
-        /**
-         * Returns true if the specified dd target is a legal target for
-         * the specifice drag obj
-         * @method isLegalTarget
-         * @param {DragDrop} the drag obj
-         * @param {DragDrop} the target
-         * @return {boolean} true if the target is a legal target for the
-         * dd obj
-         * @static
-         */
-        isLegalTarget: function (oDD, oTargetDD) {
-            var targets = this.getRelated(oDD, true);
-            for (var i=0, len=targets.length;i<len;++i) {
-                if (targets[i].id == oTargetDD.id) {
-                    return true;
-                }
-            }
-
-            return false;
-        },
-
-        /**
-         * My goal is to be able to transparently determine if an object is
-         * typeof DragDrop, and the exact subclass of DragDrop.  typeof
-         * returns "object", oDD.constructor.toString() always returns
-         * "DragDrop" and not the name of the subclass.  So for now it just
-         * evaluates a well-known variable in DragDrop.
-         * @method isTypeOfDD
-         * @param {Object} the object to evaluate
-         * @return {boolean} true if typeof oDD = DragDrop
-         * @static
-         */
-        isTypeOfDD: function (oDD) {
-            return (oDD && oDD.__ygDragDrop);
-        },
-
-        /**
-         * Utility function to determine if a given element has been
-         * registered as a drag drop handle for the given Drag Drop object.
-         * @method isHandle
-         * @param {String} id the element id to check
-         * @return {boolean} true if this element is a DragDrop handle, false
-         * otherwise
-         * @static
-         */
-        isHandle: function(sDDId, sHandleId) {
-            return ( this.handleIds[sDDId] &&
-                            this.handleIds[sDDId][sHandleId] );
-        },
-
-        /**
-         * Returns the DragDrop instance for a given id
-         * @method getDDById
-         * @param {String} id the id of the DragDrop object
-         * @return {DragDrop} the drag drop object, null if it is not found
-         * @static
-         */
-        getDDById: function(id) {
-            for (var i in this.ids) {
-                if (this.ids[i][id]) {
-                    return this.ids[i][id];
-                }
-            }
-            return null;
-        },
-
-        /**
-         * Fired after a registered DragDrop object gets the mousedown event.
-         * Sets up the events required to track the object being dragged
-         * @method handleMouseDown
-         * @param {Event} e the event
-         * @param oDD the DragDrop object being dragged
-         * @private
-         * @static
-         */
-        handleMouseDown: function(e, oDD) {
-            if(Roo.QuickTips){
-                Roo.QuickTips.disable();
-            }
-            this.currentTarget = e.getTarget();
-
-            this.dragCurrent = oDD;
-
-            var el = oDD.getEl();
-
-            // track start position
-            this.startX = e.getPageX();
-            this.startY = e.getPageY();
-
-            this.deltaX = this.startX - el.offsetLeft;
-            this.deltaY = this.startY - el.offsetTop;
-
-            this.dragThreshMet = false;
-
-            this.clickTimeout = setTimeout(
-                    function() {
-                        var DDM = Roo.dd.DDM;
-                        DDM.startDrag(DDM.startX, DDM.startY);
-                    },
-                    this.clickTimeThresh );
-        },
-
-        /**
-         * Fired when either the drag pixel threshol or the mousedown hold
-         * time threshold has been met.
-         * @method startDrag
-         * @param x {int} the X position of the original mousedown
-         * @param y {int} the Y position of the original mousedown
-         * @static
-         */
-        startDrag: function(x, y) {
-            clearTimeout(this.clickTimeout);
-            if (this.dragCurrent) {
-                this.dragCurrent.b4StartDrag(x, y);
-                this.dragCurrent.startDrag(x, y);
-            }
-            this.dragThreshMet = true;
-        },
-
-        /**
-         * Internal function to handle the mouseup event.  Will be invoked
-         * from the context of the document.
-         * @method handleMouseUp
-         * @param {Event} e the event
-         * @private
-         * @static
-         */
-        handleMouseUp: function(e) {
-
-            if(Roo.QuickTips){
-                Roo.QuickTips.enable();
-            }
-            if (! this.dragCurrent) {
-                return;
-            }
-
-            clearTimeout(this.clickTimeout);
-
-            if (this.dragThreshMet) {
-                this.fireEvents(e, true);
-            } else {
-            }
-
-            this.stopDrag(e);
-
-            this.stopEvent(e);
-        },
-
-        /**
-         * Utility to stop event propagation and event default, if these
-         * features are turned on.
-         * @method stopEvent
-         * @param {Event} e the event as returned by this.getEvent()
-         * @static
-         */
-        stopEvent: function(e){
-            if(this.stopPropagation) {
-                e.stopPropagation();
-            }
-
-            if (this.preventDefault) {
-                e.preventDefault();
-            }
-        },
-
-        /**
-         * Internal function to clean up event handlers after the drag
-         * operation is complete
-         * @method stopDrag
-         * @param {Event} e the event
-         * @private
-         * @static
-         */
-        stopDrag: function(e) {
-            // Fire the drag end event for the item that was dragged
-            if (this.dragCurrent) {
-                if (this.dragThreshMet) {
-                    this.dragCurrent.b4EndDrag(e);
-                    this.dragCurrent.endDrag(e);
-                }
-
-                this.dragCurrent.onMouseUp(e);
-            }
-
-            this.dragCurrent = null;
-            this.dragOvers = {};
-        },
-
-        /**
-         * Internal function to handle the mousemove event.  Will be invoked
-         * from the context of the html element.
-         *
-         * @TODO figure out what we can do about mouse events lost when the
-         * user drags objects beyond the window boundary.  Currently we can
-         * detect this in internet explorer by verifying that the mouse is
-         * down during the mousemove event.  Firefox doesn't give us the
-         * button state on the mousemove event.
-         * @method handleMouseMove
-         * @param {Event} e the event
-         * @private
-         * @static
-         */
-        handleMouseMove: function(e) {
-            if (! this.dragCurrent) {
-                return true;
-            }
-
-            // var button = e.which || e.button;
-
-            // check for IE mouseup outside of page boundary
-            if (Roo.isIE && (e.button !== 0 && e.button !== 1 && e.button !== 2)) {
-                this.stopEvent(e);
-                return this.handleMouseUp(e);
-            }
-
-            if (!this.dragThreshMet) {
-                var diffX = Math.abs(this.startX - e.getPageX());
-                var diffY = Math.abs(this.startY - e.getPageY());
-                if (diffX > this.clickPixelThresh ||
-                            diffY > this.clickPixelThresh) {
-                    this.startDrag(this.startX, this.startY);
-                }
-            }
-
-            if (this.dragThreshMet) {
-                this.dragCurrent.b4Drag(e);
-                this.dragCurrent.onDrag(e);
-                if(!this.dragCurrent.moveOnly){
-                    this.fireEvents(e, false);
-                }
-            }
-
-            this.stopEvent(e);
-
-            return true;
-        },
-
-        /**
-         * Iterates over all of the DragDrop elements to find ones we are
-         * hovering over or dropping on
-         * @method fireEvents
-         * @param {Event} e the event
-         * @param {boolean} isDrop is this a drop op or a mouseover op?
-         * @private
-         * @static
-         */
-        fireEvents: function(e, isDrop) {
-            var dc = this.dragCurrent;
-
-            // If the user did the mouse up outside of the window, we could
-            // get here even though we have ended the drag.
-            if (!dc || dc.isLocked()) {
-                return;
-            }
-
-            var pt = e.getPoint();
-
-            // cache the previous dragOver array
-            var oldOvers = [];
-
-            var outEvts   = [];
-            var overEvts  = [];
-            var dropEvts  = [];
-            var enterEvts = [];
-
-            // Check to see if the object(s) we were hovering over is no longer
-            // being hovered over so we can fire the onDragOut event
-            for (var i in this.dragOvers) {
-
-                var ddo = this.dragOvers[i];
-
-                if (! this.isTypeOfDD(ddo)) {
-                    continue;
-                }
-
-                if (! this.isOverTarget(pt, ddo, this.mode)) {
-                    outEvts.push( ddo );
-                }
-
-                oldOvers[i] = true;
-                delete this.dragOvers[i];
-            }
-
-            for (var sGroup in dc.groups) {
-
-                if ("string" != typeof sGroup) {
-                    continue;
-                }
-
-                for (i in this.ids[sGroup]) {
-                    var oDD = this.ids[sGroup][i];
-                    if (! this.isTypeOfDD(oDD)) {
-                        continue;
-                    }
-
-                    if (oDD.isTarget && !oDD.isLocked() && oDD != dc) {
-                        if (this.isOverTarget(pt, oDD, this.mode)) {
-                            // look for drop interactions
-                            if (isDrop) {
-                                dropEvts.push( oDD );
-                            // look for drag enter and drag over interactions
-                            } else {
-
-                                // initial drag over: dragEnter fires
-                                if (!oldOvers[oDD.id]) {
-                                    enterEvts.push( oDD );
-                                // subsequent drag overs: dragOver fires
-                                } else {
-                                    overEvts.push( oDD );
-                                }
-
-                                this.dragOvers[oDD.id] = oDD;
-                            }
-                        }
-                    }
-                }
-            }
-
-            if (this.mode) {
-                if (outEvts.length) {
-                    dc.b4DragOut(e, outEvts);
-                    dc.onDragOut(e, outEvts);
-                }
-
-                if (enterEvts.length) {
-                    dc.onDragEnter(e, enterEvts);
-                }
-
-                if (overEvts.length) {
-                    dc.b4DragOver(e, overEvts);
-                    dc.onDragOver(e, overEvts);
-                }
-
-                if (dropEvts.length) {
-                    dc.b4DragDrop(e, dropEvts);
-                    dc.onDragDrop(e, dropEvts);
-                }
-
-            } else {
-                // fire dragout events
-                var len = 0;
-                for (i=0, len=outEvts.length; i<len; ++i) {
-                    dc.b4DragOut(e, outEvts[i].id);
-                    dc.onDragOut(e, outEvts[i].id);
-                }
-
-                // fire enter events
-                for (i=0,len=enterEvts.length; i<len; ++i) {
-                    // dc.b4DragEnter(e, oDD.id);
-                    dc.onDragEnter(e, enterEvts[i].id);
-                }
-
-                // fire over events
-                for (i=0,len=overEvts.length; i<len; ++i) {
-                    dc.b4DragOver(e, overEvts[i].id);
-                    dc.onDragOver(e, overEvts[i].id);
-                }
-
-                // fire drop events
-                for (i=0, len=dropEvts.length; i<len; ++i) {
-                    dc.b4DragDrop(e, dropEvts[i].id);
-                    dc.onDragDrop(e, dropEvts[i].id);
-                }
-
-            }
-
-            // notify about a drop that did not find a target
-            if (isDrop && !dropEvts.length) {
-                dc.onInvalidDrop(e);
-            }
-
-        },
-
-        /**
-         * Helper function for getting the best match from the list of drag
-         * and drop objects returned by the drag and drop events when we are
-         * in INTERSECT mode.  It returns either the first object that the
-         * cursor is over, or the object that has the greatest overlap with
-         * the dragged element.
-         * @method getBestMatch
-         * @param  {DragDrop[]} dds The array of drag and drop objects
-         * targeted
-         * @return {DragDrop}       The best single match
-         * @static
-         */
-        getBestMatch: function(dds) {
-            var winner = null;
-            // Return null if the input is not what we expect
-            //if (!dds || !dds.length || dds.length == 0) {
-               // winner = null;
-            // If there is only one item, it wins
-            //} else if (dds.length == 1) {
-
-            var len = dds.length;
-
-            if (len == 1) {
-                winner = dds[0];
-            } else {
-                // Loop through the targeted items
-                for (var i=0; i<len; ++i) {
-                    var dd = dds[i];
-                    // If the cursor is over the object, it wins.  If the
-                    // cursor is over multiple matches, the first one we come
-                    // to wins.
-                    if (dd.cursorIsOver) {
-                        winner = dd;
-                        break;
-                    // Otherwise the object with the most overlap wins
-                    } else {
-                        if (!winner ||
-                            winner.overlap.getArea() < dd.overlap.getArea()) {
-                            winner = dd;
-                        }
-                    }
-                }
-            }
-
-            return winner;
-        },
-
-        /**
-         * Refreshes the cache of the top-left and bottom-right points of the
-         * drag and drop objects in the specified group(s).  This is in the
-         * format that is stored in the drag and drop instance, so typical
-         * usage is:
-         * <code>
-         * Roo.dd.DragDropMgr.refreshCache(ddinstance.groups);
-         * </code>
-         * Alternatively:
-         * <code>
-         * Roo.dd.DragDropMgr.refreshCache({group1:true, group2:true});
-         * </code>
-         * @TODO this really should be an indexed array.  Alternatively this
-         * method could accept both.
-         * @method refreshCache
-         * @param {Object} groups an associative array of groups to refresh
-         * @static
-         */
-        refreshCache: function(groups) {
-            for (var sGroup in groups) {
-                if ("string" != typeof sGroup) {
-                    continue;
-                }
-                for (var i in this.ids[sGroup]) {
-                    var oDD = this.ids[sGroup][i];
-
-                    if (this.isTypeOfDD(oDD)) {
-                    // if (this.isTypeOfDD(oDD) && oDD.isTarget) {
-                        var loc = this.getLocation(oDD);
-                        if (loc) {
-                            this.locationCache[oDD.id] = loc;
-                        } else {
-                            delete this.locationCache[oDD.id];
-                            // this will unregister the drag and drop object if
-                            // the element is not in a usable state
-                            // oDD.unreg();
-                        }
-                    }
-                }
-            }
-        },
-
-        /**
-         * This checks to make sure an element exists and is in the DOM.  The
-         * main purpose is to handle cases where innerHTML is used to remove
-         * drag and drop objects from the DOM.  IE provides an 'unspecified
-         * error' when trying to access the offsetParent of such an element
-         * @method verifyEl
-         * @param {HTMLElement} el the element to check
-         * @return {boolean} true if the element looks usable
-         * @static
-         */
-        verifyEl: function(el) {
-            if (el) {
-                var parent;
-                if(Roo.isIE){
-                    try{
-                        parent = el.offsetParent;
-                    }catch(e){}
-                }else{
-                    parent = el.offsetParent;
-                }
-                if (parent) {
-                    return true;
-                }
-            }
-
-            return false;
-        },
-
-        /**
-         * Returns a Region object containing the drag and drop element's position
-         * and size, including the padding configured for it
-         * @method getLocation
-         * @param {DragDrop} oDD the drag and drop object to get the
-         *                       location for
-         * @return {Roo.lib.Region} a Region object representing the total area
-         *                             the element occupies, including any padding
-         *                             the instance is configured for.
-         * @static
-         */
-        getLocation: function(oDD) {
-            if (! this.isTypeOfDD(oDD)) {
-                return null;
-            }
-
-            var el = oDD.getEl(), pos, x1, x2, y1, y2, t, r, b, l;
-
-            try {
-                pos= Roo.lib.Dom.getXY(el);
-            } catch (e) { }
-
-            if (!pos) {
-                return null;
-            }
-
-            x1 = pos[0];
-            x2 = x1 + el.offsetWidth;
-            y1 = pos[1];
-            y2 = y1 + el.offsetHeight;
-
-            t = y1 - oDD.padding[0];
-            r = x2 + oDD.padding[1];
-            b = y2 + oDD.padding[2];
-            l = x1 - oDD.padding[3];
-
-            return new Roo.lib.Region( t, r, b, l );
-        },
-
-        /**
-         * Checks the cursor location to see if it over the target
-         * @method isOverTarget
-         * @param {Roo.lib.Point} pt The point to evaluate
-         * @param {DragDrop} oTarget the DragDrop object we are inspecting
-         * @return {boolean} true if the mouse is over the target
-         * @private
-         * @static
-         */
-        isOverTarget: function(pt, oTarget, intersect) {
-            // use cache if available
-            var loc = this.locationCache[oTarget.id];
-            if (!loc || !this.useCache) {
-                loc = this.getLocation(oTarget);
-                this.locationCache[oTarget.id] = loc;
-
-            }
-
-            if (!loc) {
-                return false;
-            }
-
-            oTarget.cursorIsOver = loc.contains( pt );
-
-            // DragDrop is using this as a sanity check for the initial mousedown
-            // in this case we are done.  In POINT mode, if the drag obj has no
-            // contraints, we are also done. Otherwise we need to evaluate the
-            // location of the target as related to the actual location of the
-            // dragged element.
-            var dc = this.dragCurrent;
-            if (!dc || !dc.getTargetCoord ||
-                    (!intersect && !dc.constrainX && !dc.constrainY)) {
-                return oTarget.cursorIsOver;
-            }
-
-            oTarget.overlap = null;
-
-            // Get the current location of the drag element, this is the
-            // location of the mouse event less the delta that represents
-            // where the original mousedown happened on the element.  We
-            // need to consider constraints and ticks as well.
-            var pos = dc.getTargetCoord(pt.x, pt.y);
-
-            var el = dc.getDragEl();
-            var curRegion = new Roo.lib.Region( pos.y,
-                                                   pos.x + el.offsetWidth,
-                                                   pos.y + el.offsetHeight,
-                                                   pos.x );
-
-            var overlap = curRegion.intersect(loc);
-
-            if (overlap) {
-                oTarget.overlap = overlap;
-                return (intersect) ? true : oTarget.cursorIsOver;
-            } else {
-                return false;
-            }
-        },
-
-        /**
-         * unload event handler
-         * @method _onUnload
-         * @private
-         * @static
-         */
-        _onUnload: function(e, me) {
-            Roo.dd.DragDropMgr.unregAll();
-        },
-
-        /**
-         * Cleans up the drag and drop events and objects.
-         * @method unregAll
-         * @private
-         * @static
-         */
-        unregAll: function() {
-
-            if (this.dragCurrent) {
-                this.stopDrag();
-                this.dragCurrent = null;
-            }
-
-            this._execOnAll("unreg", []);
-
-            for (i in this.elementCache) {
-                delete this.elementCache[i];
-            }
-
-            this.elementCache = {};
-            this.ids = {};
-        },
-
-        /**
-         * A cache of DOM elements
-         * @property elementCache
-         * @private
-         * @static
-         */
-        elementCache: {},
-
-        /**
-         * Get the wrapper for the DOM element specified
-         * @method getElWrapper
-         * @param {String} id the id of the element to get
-         * @return {Roo.dd.DDM.ElementWrapper} the wrapped element
-         * @private
-         * @deprecated This wrapper isn't that useful
-         * @static
-         */
-        getElWrapper: function(id) {
-            var oWrapper = this.elementCache[id];
-            if (!oWrapper || !oWrapper.el) {
-                oWrapper = this.elementCache[id] =
-                    new this.ElementWrapper(Roo.getDom(id));
-            }
-            return oWrapper;
-        },
-
-        /**
-         * Returns the actual DOM element
-         * @method getElement
-         * @param {String} id the id of the elment to get
-         * @return {Object} The element
-         * @deprecated use Roo.getDom instead
-         * @static
-         */
-        getElement: function(id) {
-            return Roo.getDom(id);
-        },
-
-        /**
-         * Returns the style property for the DOM element (i.e.,
-         * document.getElById(id).style)
-         * @method getCss
-         * @param {String} id the id of the elment to get
-         * @return {Object} The style property of the element
-         * @deprecated use Roo.getDom instead
-         * @static
-         */
-        getCss: function(id) {
-            var el = Roo.getDom(id);
-            return (el) ? el.style : null;
-        },
-
-        /**
-         * Inner class for cached elements
-         * @class DragDropMgr.ElementWrapper
-         * @for DragDropMgr
-         * @private
-         * @deprecated
-         */
-        ElementWrapper: function(el) {
-                /**
-                 * The element
-                 * @property el
-                 */
-                this.el = el || null;
-                /**
-                 * The element id
-                 * @property id
-                 */
-                this.id = this.el && el.id;
-                /**
-                 * A reference to the style property
-                 * @property css
-                 */
-                this.css = this.el && el.style;
-            },
-
-        /**
-         * Returns the X position of an html element
-         * @method getPosX
-         * @param el the element for which to get the position
-         * @return {int} the X coordinate
-         * @for DragDropMgr
-         * @deprecated use Roo.lib.Dom.getX instead
-         * @static
-         */
-        getPosX: function(el) {
-            return Roo.lib.Dom.getX(el);
-        },
-
-        /**
-         * Returns the Y position of an html element
-         * @method getPosY
-         * @param el the element for which to get the position
-         * @return {int} the Y coordinate
-         * @deprecated use Roo.lib.Dom.getY instead
-         * @static
-         */
-        getPosY: function(el) {
-            return Roo.lib.Dom.getY(el);
-        },
-
-        /**
-         * Swap two nodes.  In IE, we use the native method, for others we
-         * emulate the IE behavior
-         * @method swapNode
-         * @param n1 the first node to swap
-         * @param n2 the other node to swap
-         * @static
-         */
-        swapNode: function(n1, n2) {
-            if (n1.swapNode) {
-                n1.swapNode(n2);
-            } else {
-                var p = n2.parentNode;
-                var s = n2.nextSibling;
-
-                if (s == n1) {
-                    p.insertBefore(n1, n2);
-                } else if (n2 == n1.nextSibling) {
-                    p.insertBefore(n2, n1);
-                } else {
-                    n1.parentNode.replaceChild(n2, n1);
-                    p.insertBefore(n1, s);
-                }
-            }
-        },
-
-        /**
-         * Returns the current scroll position
-         * @method getScroll
-         * @private
-         * @static
-         */
-        getScroll: function () {
-            var t, l, dde=document.documentElement, db=document.body;
-            if (dde && (dde.scrollTop || dde.scrollLeft)) {
-                t = dde.scrollTop;
-                l = dde.scrollLeft;
-            } else if (db) {
-                t = db.scrollTop;
-                l = db.scrollLeft;
-            } else {
-
-            }
-            return { top: t, left: l };
-        },
-
-        /**
-         * Returns the specified element style property
-         * @method getStyle
-         * @param {HTMLElement} el          the element
-         * @param {string}      styleProp   the style property
-         * @return {string} The value of the style property
-         * @deprecated use Roo.lib.Dom.getStyle
-         * @static
-         */
-        getStyle: function(el, styleProp) {
-            return Roo.fly(el).getStyle(styleProp);
-        },
-
-        /**
-         * Gets the scrollTop
-         * @method getScrollTop
-         * @return {int} the document's scrollTop
-         * @static
-         */
-        getScrollTop: function () { return this.getScroll().top; },
-
-        /**
-         * Gets the scrollLeft
-         * @method getScrollLeft
-         * @return {int} the document's scrollTop
-         * @static
-         */
-        getScrollLeft: function () { return this.getScroll().left; },
-
-        /**
-         * Sets the x/y position of an element to the location of the
-         * target element.
-         * @method moveToEl
-         * @param {HTMLElement} moveEl      The element to move
-         * @param {HTMLElement} targetEl    The position reference element
-         * @static
-         */
-        moveToEl: function (moveEl, targetEl) {
-            var aCoord = Roo.lib.Dom.getXY(targetEl);
-            Roo.lib.Dom.setXY(moveEl, aCoord);
-        },
-
-        /**
-         * Numeric array sort function
-         * @method numericSort
-         * @static
-         */
-        numericSort: function(a, b) { return (a - b); },
-
-        /**
-         * Internal counter
-         * @property _timeoutCount
-         * @private
-         * @static
-         */
-        _timeoutCount: 0,
-
-        /**
-         * Trying to make the load order less important.  Without this we get
-         * an error if this file is loaded before the Event Utility.
-         * @method _addListeners
-         * @private
-         * @static
-         */
-        _addListeners: function() {
-            var DDM = Roo.dd.DDM;
-            if ( Roo.lib.Event && document ) {
-                DDM._onLoad();
-            } else {
-                if (DDM._timeoutCount > 2000) {
-                } else {
-                    setTimeout(DDM._addListeners, 10);
-                    if (document && document.body) {
-                        DDM._timeoutCount += 1;
-                    }
-                }
-            }
-        },
-
-        /**
-         * Recursively searches the immediate parent and all child nodes for
-         * the handle element in order to determine wheter or not it was
-         * clicked.
-         * @method handleWasClicked
-         * @param node the html element to inspect
-         * @static
-         */
-        handleWasClicked: function(node, id) {
-            if (this.isHandle(id, node.id)) {
-                return true;
-            } else {
-                // check to see if this is a text node child of the one we want
-                var p = node.parentNode;
-
-                while (p) {
-                    if (this.isHandle(id, p.id)) {
-                        return true;
-                    } else {
-                        p = p.parentNode;
-                    }
-                }
-            }
-
-            return false;
+Roo.extend(Roo.data.MemoryProxy, Roo.data.DataProxy, {
+    
+    /**
+     * Load data from the requested source (in this case an in-memory
+     * data object passed to the constructor), read the data object into
+     * a block of Roo.data.Records using the passed Roo.data.DataReader implementation, and
+     * process that block using the passed callback.
+     * @param {Object} params This parameter is not used by the MemoryProxy class.
+     * @param {Roo.data.DataReader} reader The Reader object which converts the data
+     * object into a block of Roo.data.Records.
+     * @param {Function} callback The function into which to pass the block of Roo.data.records.
+     * The function must be passed <ul>
+     * <li>The Record block object</li>
+     * <li>The "arg" argument from the load function</li>
+     * <li>A boolean success indicator</li>
+     * </ul>
+     * @param {Object} scope The scope in which to call the callback
+     * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
+     */
+    load : function(params, reader, callback, scope, arg){
+        params = params || {};
+        var result;
+        try {
+            result = reader.readRecords(params.data ? params.data :this.data);
+        }catch(e){
+            this.fireEvent("loadexception", this, arg, null, e);
+            callback.call(scope, null, arg, false);
+            return;
         }
-
-    };
-
-}();
-
-// shorter alias, save a few bytes
-Roo.dd.DDM = Roo.dd.DragDropMgr;
-Roo.dd.DDM._addListeners();
-
-}/*
+        callback.call(scope, result, arg, true);
+    },
+    
+    // private
+    update : function(params, records){
+        
+    }
+});/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -2494,295 +1453,147 @@ Roo.dd.DDM._addListeners();
  * Fork - LGPL
  * <script type="text/javascript">
  */
-
 /**
- * @class Roo.dd.DD
- * A DragDrop implementation where the linked element follows the
- * mouse cursor during a drag.
- * @extends Roo.dd.DragDrop
+ * @class Roo.data.HttpProxy
+ * @extends Roo.data.DataProxy
+ * An implementation of {@link Roo.data.DataProxy} that reads a data object from an {@link Roo.data.Connection} object
+ * configured to reference a certain URL.<br><br>
+ * <p>
+ * <em>Note that this class cannot be used to retrieve data from a domain other than the domain
+ * from which the running page was served.<br><br>
+ * <p>
+ * For cross-domain access to remote data, use an {@link Roo.data.ScriptTagProxy}.</em><br><br>
+ * <p>
+ * Be aware that to enable the browser to parse an XML document, the server must set
+ * the Content-Type header in the HTTP response to "text/xml".
  * @constructor
- * @param {String} id the id of the linked element
- * @param {String} sGroup the group of related DragDrop items
- * @param {object} config an object containing configurable attributes
- *                Valid properties for DD:
- *                    scroll
+ * @param {Object} conn Connection config options to add to each request (e.g. {url: 'foo.php'} or
+ * an {@link Roo.data.Connection} object.  If a Connection config is passed, the singleton {@link Roo.Ajax} object
+ * will be used to make the request.
  */
-Roo.dd.DD = function(id, sGroup, config) {
-    if (id) {
-        this.init(id, sGroup, config);
-    }
+Roo.data.HttpProxy = function(conn){
+    Roo.data.HttpProxy.superclass.constructor.call(this);
+    // is conn a conn config or a real conn?
+    this.conn = conn;
+    this.useAjax = !conn || !conn.events;
+  
 };
 
-Roo.extend(Roo.dd.DD, Roo.dd.DragDrop, {
-
+Roo.extend(Roo.data.HttpProxy, Roo.data.DataProxy, {
+    // thse are take from connection...
+    
     /**
-     * When set to true, the utility automatically tries to scroll the browser
-     * window wehn a drag and drop element is dragged near the viewport boundary.
-     * Defaults to true.
-     * @property scroll
-     * @type boolean
+     * @cfg {String} url (Optional) The default URL to be used for requests to the server. (defaults to undefined)
      */
-    scroll: true,
-
     /**
-     * Sets the pointer offset to the distance between the linked element's top
-     * left corner and the location the element was clicked
-     * @method autoOffset
-     * @param {int} iPageX the X coordinate of the click
-     * @param {int} iPageY the Y coordinate of the click
+     * @cfg {Object} extraParams (Optional) An object containing properties which are used as
+     * extra parameters to each request made by this object. (defaults to undefined)
      */
-    autoOffset: function(iPageX, iPageY) {
-        var x = iPageX - this.startPageX;
-        var y = iPageY - this.startPageY;
-        this.setDelta(x, y);
-    },
-
     /**
-     * Sets the pointer offset.  You can call this directly to force the
-     * offset to be in a particular location (e.g., pass in 0,0 to set it
-     * to the center of the object)
-     * @method setDelta
-     * @param {int} iDeltaX the distance from the left
-     * @param {int} iDeltaY the distance from the top
+     * @cfg {Object} defaultHeaders (Optional) An object containing request headers which are added
+     *  to each request made by this object. (defaults to undefined)
      */
-    setDelta: function(iDeltaX, iDeltaY) {
-        this.deltaX = iDeltaX;
-        this.deltaY = iDeltaY;
-    },
-
     /**
-     * Sets the drag element to the location of the mousedown or click event,
-     * maintaining the cursor location relative to the location on the element
-     * that was clicked.  Override this if you want to place the element in a
-     * location other than where the cursor is.
-     * @method setDragElPos
-     * @param {int} iPageX the X coordinate of the mousedown or drag event
-     * @param {int} iPageY the Y coordinate of the mousedown or drag event
+     * @cfg {String} method (Optional) The default HTTP method to be used for requests. (defaults to undefined; if not set but parms are present will use POST, otherwise GET)
      */
-    setDragElPos: function(iPageX, iPageY) {
-        // the first time we do this, we are going to check to make sure
-        // the element has css positioning
-
-        var el = this.getDragEl();
-        this.alignElWithMouse(el, iPageX, iPageY);
-    },
-
     /**
-     * Sets the element to the location of the mousedown or click event,
-     * maintaining the cursor location relative to the location on the element
-     * that was clicked.  Override this if you want to place the element in a
-     * location other than where the cursor is.
-     * @method alignElWithMouse
-     * @param {HTMLElement} el the element to move
-     * @param {int} iPageX the X coordinate of the mousedown or drag event
-     * @param {int} iPageY the Y coordinate of the mousedown or drag event
+     * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
      */
-    alignElWithMouse: function(el, iPageX, iPageY) {
-        var oCoord = this.getTargetCoord(iPageX, iPageY);
-        var fly = el.dom ? el : Roo.fly(el);
-        if (!this.deltaSetXY) {
-            var aCoord = [oCoord.x, oCoord.y];
-            fly.setXY(aCoord);
-            var newLeft = fly.getLeft(true);
-            var newTop  = fly.getTop(true);
-            this.deltaSetXY = [ newLeft - oCoord.x, newTop - oCoord.y ];
-        } else {
-            fly.setLeftTop(oCoord.x + this.deltaSetXY[0], oCoord.y + this.deltaSetXY[1]);
-        }
-
-        this.cachePosition(oCoord.x, oCoord.y);
-        this.autoScroll(oCoord.x, oCoord.y, el.offsetHeight, el.offsetWidth);
-        return oCoord;
-    },
+     /**
+     * @cfg {Boolean} autoAbort (Optional) Whether this request should abort any pending requests. (defaults to false)
+     * @type Boolean
+     */
+  
 
     /**
-     * Saves the most recent position so that we can reset the constraints and
-     * tick marks on-demand.  We need to know this so that we can calculate the
-     * number of pixels the element is offset from its original position.
-     * @method cachePosition
-     * @param iPageX the current x position (optional, this just makes it so we
-     * don't have to look it up again)
-     * @param iPageY the current y position (optional, this just makes it so we
-     * don't have to look it up again)
+     * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)
+     * @type Boolean
      */
-    cachePosition: function(iPageX, iPageY) {
-        if (iPageX) {
-            this.lastPageX = iPageX;
-            this.lastPageY = iPageY;
-        } else {
-            var aCoord = Roo.lib.Dom.getXY(this.getEl());
-            this.lastPageX = aCoord[0];
-            this.lastPageY = aCoord[1];
-        }
-    },
-
     /**
-     * Auto-scroll the window if the dragged object has been moved beyond the
-     * visible window boundary.
-     * @method autoScroll
-     * @param {int} x the drag element's x position
-     * @param {int} y the drag element's y position
-     * @param {int} h the height of the drag element
-     * @param {int} w the width of the drag element
-     * @private
+     * Return the {@link Roo.data.Connection} object being used by this Proxy.
+     * @return {Connection} The Connection object. This object may be used to subscribe to events on
+     * a finer-grained basis than the DataProxy events.
      */
-    autoScroll: function(x, y, h, w) {
-
-        if (this.scroll) {
-            // The client height
-            var clientH = Roo.lib.Dom.getViewWidth();
-
-            // The client width
-            var clientW = Roo.lib.Dom.getViewHeight();
-
-            // The amt scrolled down
-            var st = this.DDM.getScrollTop();
-
-            // The amt scrolled right
-            var sl = this.DDM.getScrollLeft();
-
-            // Location of the bottom of the element
-            var bot = h + y;
-
-            // Location of the right of the element
-            var right = w + x;
-
-            // The distance from the cursor to the bottom of the visible area,
-            // adjusted so that we don't scroll if the cursor is beyond the
-            // element drag constraints
-            var toBot = (clientH + st - y - this.deltaY);
-
-            // The distance from the cursor to the right of the visible area
-            var toRight = (clientW + sl - x - this.deltaX);
-
-
-            // How close to the edge the cursor must be before we scroll
-            // var thresh = (document.all) ? 100 : 40;
-            var thresh = 40;
-
-            // How many pixels to scroll per autoscroll op.  This helps to reduce
-            // clunky scrolling. IE is more sensitive about this ... it needs this
-            // value to be higher.
-            var scrAmt = (document.all) ? 80 : 30;
-
-            // Scroll down if we are near the bottom of the visible page and the
-            // obj extends below the crease
-            if ( bot > clientH && toBot < thresh ) {
-                window.scrollTo(sl, st + scrAmt);
-            }
-
-            // Scroll up if the window is scrolled down and the top of the object
-            // goes above the top border
-            if ( y < st && st > 0 && y - st < thresh ) {
-                window.scrollTo(sl, st - scrAmt);
-            }
-
-            // Scroll right if the obj is beyond the right border and the cursor is
-            // near the border.
-            if ( right > clientW && toRight < thresh ) {
-                window.scrollTo(sl + scrAmt, st);
-            }
-
-            // Scroll left if the window has been scrolled to the right and the obj
-            // extends past the left border
-            if ( x < sl && sl > 0 && x - sl < thresh ) {
-                window.scrollTo(sl - scrAmt, st);
-            }
-        }
+    getConnection : function(){
+        return this.useAjax ? Roo.Ajax : this.conn;
     },
 
     /**
-     * Finds the location the element should be placed if we want to move
-     * it to where the mouse location less the click offset would place us.
-     * @method getTargetCoord
-     * @param {int} iPageX the X coordinate of the click
-     * @param {int} iPageY the Y coordinate of the click
-     * @return an object that contains the coordinates (Object.x and Object.y)
-     * @private
+     * Load data from the configured {@link Roo.data.Connection}, read the data object into
+     * a block of Roo.data.Records using the passed {@link Roo.data.DataReader} implementation, and
+     * process that block using the passed callback.
+     * @param {Object} params An object containing properties which are to be used as HTTP parameters
+     * for the request to the remote server.
+     * @param {Roo.data.DataReader} reader The Reader object which converts the data
+     * object into a block of Roo.data.Records.
+     * @param {Function} callback The function into which to pass the block of Roo.data.Records.
+     * The function must be passed <ul>
+     * <li>The Record block object</li>
+     * <li>The "arg" argument from the load function</li>
+     * <li>A boolean success indicator</li>
+     * </ul>
+     * @param {Object} scope The scope in which to call the callback
+     * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
      */
-    getTargetCoord: function(iPageX, iPageY) {
-
-
-        var x = iPageX - this.deltaX;
-        var y = iPageY - this.deltaY;
-
-        if (this.constrainX) {
-            if (x < this.minX) { x = this.minX; }
-            if (x > this.maxX) { x = this.maxX; }
-        }
-
-        if (this.constrainY) {
-            if (y < this.minY) { y = this.minY; }
-            if (y > this.maxY) { y = this.maxY; }
-        }
-
-        x = this.getTick(x, this.xTicks);
-        y = this.getTick(y, this.yTicks);
-
-
-        return {x:x, y:y};
-    },
-
-    /*
-     * Sets up config options specific to this class. Overrides
-     * Roo.dd.DragDrop, but all versions of this method through the
-     * inheritance chain are called
-     */
-    applyConfig: function() {
-        Roo.dd.DD.superclass.applyConfig.call(this);
-        this.scroll = (this.config.scroll !== false);
-    },
-
-    /*
-     * Event that fires prior to the onMouseDown event.  Overrides
-     * Roo.dd.DragDrop.
-     */
-    b4MouseDown: function(e) {
-        // this.resetConstraints();
-        this.autoOffset(e.getPageX(),
-                            e.getPageY());
-    },
-
-    /*
-     * Event that fires prior to the onDrag event.  Overrides
-     * Roo.dd.DragDrop.
-     */
-    b4Drag: function(e) {
-        this.setDragElPos(e.getPageX(),
-                            e.getPageY());
-    },
-
-    toString: function() {
-        return ("DD " + this.id);
-    }
-
-    //////////////////////////////////////////////////////////////////////////
-    // Debugging ygDragDrop events that can be overridden
-    //////////////////////////////////////////////////////////////////////////
-    /*
-    startDrag: function(x, y) {
-    },
-
-    onDrag: function(e) {
+    load : function(params, reader, callback, scope, arg){
+        if(this.fireEvent("beforeload", this, params) !== false){
+            var  o = {
+                params : params || {},
+                request: {
+                    callback : callback,
+                    scope : scope,
+                    arg : arg
+                },
+                reader: reader,
+                callback : this.loadResponse,
+                scope: this
+            };
+            if(this.useAjax){
+                Roo.applyIf(o, this.conn);
+                if(this.activeRequest){
+                    Roo.Ajax.abort(this.activeRequest);
+                }
+                this.activeRequest = Roo.Ajax.request(o);
+            }else{
+                this.conn.request(o);
+            }
+        }else{
+            callback.call(scope||this, null, arg, false);
+        }
     },
 
-    onDragEnter: function(e, id) {
+    // private
+    loadResponse : function(o, success, response){
+        delete this.activeRequest;
+        if(!success){
+            this.fireEvent("loadexception", this, o, response);
+            o.request.callback.call(o.request.scope, null, o.request.arg, false);
+            return;
+        }
+        var result;
+        try {
+            result = o.reader.read(response);
+        }catch(e){
+            o.success = false;
+            o.raw = { errorMsg : response.responseText };
+            this.fireEvent("loadexception", this, o, response, e);
+            o.request.callback.call(o.request.scope, o, o.request.arg, false);
+            return;
+        }
+        
+        this.fireEvent("load", this, o, o.request.arg);
+        o.request.callback.call(o.request.scope, result, o.request.arg, true);
     },
 
-    onDragOver: function(e, id) {
-    },
+    // private
+    update : function(dataSet){
 
-    onDragOut: function(e, id) {
     },
 
-    onDragDrop: function(e, id) {
-    },
+    // private
+    updateResponse : function(dataSet){
 
-    endDrag: function(e) {
     }
-
-    */
-
 });/*
  * Based on:
  * Ext JS Library 1.1.1
@@ -2795,247 +1606,195 @@ Roo.extend(Roo.dd.DD, Roo.dd.DragDrop, {
  */
 
 /**
- * @class Roo.dd.DDProxy
- * A DragDrop implementation that inserts an empty, bordered div into
- * the document that follows the cursor during drag operations.  At the time of
- * the click, the frame div is resized to the dimensions of the linked html
- * element, and moved to the exact location of the linked element.
- *
- * References to the "frame" element refer to the single proxy element that
- * was created to be dragged in place of all DDProxy elements on the
- * page.
+ * @class Roo.data.ScriptTagProxy
+ * An implementation of Roo.data.DataProxy that reads a data object from a URL which may be in a domain
+ * other than the originating domain of the running page.<br><br>
+ * <p>
+ * <em>Note that if you are retrieving data from a page that is in a domain that is NOT the same as the originating domain
+ * of the running page, you must use this class, rather than DataProxy.</em><br><br>
+ * <p>
+ * The content passed back from a server resource requested by a ScriptTagProxy is executable JavaScript
+ * source code that is used as the source inside a &lt;script> tag.<br><br>
+ * <p>
+ * In order for the browser to process the returned data, the server must wrap the data object
+ * with a call to a callback function, the name of which is passed as a parameter by the ScriptTagProxy.
+ * Below is a Java example for a servlet which returns data for either a ScriptTagProxy, or an HttpProxy
+ * depending on whether the callback name was passed:
+ * <p>
+ * <pre><code>
+boolean scriptTag = false;
+String cb = request.getParameter("callback");
+if (cb != null) {
+    scriptTag = true;
+    response.setContentType("text/javascript");
+} else {
+    response.setContentType("application/x-json");
+}
+Writer out = response.getWriter();
+if (scriptTag) {
+    out.write(cb + "(");
+}
+out.print(dataBlock.toJsonString());
+if (scriptTag) {
+    out.write(");");
+}
+</pre></code>
  *
- * @extends Roo.dd.DD
  * @constructor
- * @param {String} id the id of the linked html element
- * @param {String} sGroup the group of related DragDrop objects
- * @param {object} config an object containing configurable attributes
- *                Valid properties for DDProxy in addition to those in DragDrop:
- *                   resizeFrame, centerFrame, dragElId
+ * @param {Object} config A configuration object.
  */
-Roo.dd.DDProxy = function(id, sGroup, config) {
-    if (id) {
-        this.init(id, sGroup, config);
-        this.initFrame();
-    }
+Roo.data.ScriptTagProxy = function(config){
+    Roo.data.ScriptTagProxy.superclass.constructor.call(this);
+    Roo.apply(this, config);
+    this.head = document.getElementsByTagName("head")[0];
 };
 
-/**
- * The default drag frame div id
- * @property Roo.dd.DDProxy.dragElId
- * @type String
- * @static
- */
-Roo.dd.DDProxy.dragElId = "ygddfdiv";
-
-Roo.extend(Roo.dd.DDProxy, Roo.dd.DD, {
+Roo.data.ScriptTagProxy.TRANS_ID = 1000;
 
+Roo.extend(Roo.data.ScriptTagProxy, Roo.data.DataProxy, {
     /**
-     * By default we resize the drag frame to be the same size as the element
-     * we want to drag (this is to get the frame effect).  We can turn it off
-     * if we want a different behavior.
-     * @property resizeFrame
-     * @type boolean
+     * @cfg {String} url The URL from which to request the data object.
      */
-    resizeFrame: true,
-
     /**
-     * By default the frame is positioned exactly where the drag element is, so
-     * we use the cursor offset provided by Roo.dd.DD.  Another option that works only if
-     * you do not have constraints on the obj is to have the drag frame centered
-     * around the cursor.  Set centerFrame to true for this effect.
-     * @property centerFrame
-     * @type boolean
+     * @cfg {Number} timeout (Optional) The number of milliseconds to wait for a response. Defaults to 30 seconds.
      */
-    centerFrame: false,
-
+    timeout : 30000,
     /**
-     * Creates the proxy element if it does not yet exist
-     * @method createFrame
+     * @cfg {String} callbackParam (Optional) The name of the parameter to pass to the server which tells
+     * the server the name of the callback function set up by the load call to process the returned data object.
+     * Defaults to "callback".<p>The server-side processing must read this parameter value, and generate
+     * javascript output which calls this named function passing the data object as its only parameter.
      */
-    createFrame: function() {
-        var self = this;
-        var body = document.body;
-
-        if (!body || !body.firstChild) {
-            setTimeout( function() { self.createFrame(); }, 50 );
-            return;
-        }
-
-        var div = this.getDragEl();
-
-        if (!div) {
-            div    = document.createElement("div");
-            div.id = this.dragElId;
-            var s  = div.style;
-
-            s.position   = "absolute";
-            s.visibility = "hidden";
-            s.cursor     = "move";
-            s.border     = "2px solid #aaa";
-            s.zIndex     = 999;
-
-            // appendChild can blow up IE if invoked prior to the window load event
-            // while rendering a table.  It is possible there are other scenarios
-            // that would cause this to happen as well.
-            body.insertBefore(div, body.firstChild);
-        }
-    },
-
+    callbackParam : "callback",
     /**
-     * Initialization for the drag frame element.  Must be called in the
-     * constructor of all subclasses
-     * @method initFrame
+     *  @cfg {Boolean} nocache (Optional) Defaults to true. Disable cacheing by adding a unique parameter
+     * name to the request.
      */
-    initFrame: function() {
-        this.createFrame();
-    },
-
-    applyConfig: function() {
-        Roo.dd.DDProxy.superclass.applyConfig.call(this);
-
-        this.resizeFrame = (this.config.resizeFrame !== false);
-        this.centerFrame = (this.config.centerFrame);
-        this.setDragElId(this.config.dragElId || Roo.dd.DDProxy.dragElId);
-    },
+    nocache : true,
 
     /**
-     * Resizes the drag frame to the dimensions of the clicked object, positions
-     * it over the object, and finally displays it
-     * @method showFrame
-     * @param {int} iPageX X click position
-     * @param {int} iPageY Y click position
-     * @private
+     * Load data from the configured URL, read the data object into
+     * a block of Roo.data.Records using the passed Roo.data.DataReader implementation, and
+     * process that block using the passed callback.
+     * @param {Object} params An object containing properties which are to be used as HTTP parameters
+     * for the request to the remote server.
+     * @param {Roo.data.DataReader} reader The Reader object which converts the data
+     * object into a block of Roo.data.Records.
+     * @param {Function} callback The function into which to pass the block of Roo.data.Records.
+     * The function must be passed <ul>
+     * <li>The Record block object</li>
+     * <li>The "arg" argument from the load function</li>
+     * <li>A boolean success indicator</li>
+     * </ul>
+     * @param {Object} scope The scope in which to call the callback
+     * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
      */
-    showFrame: function(iPageX, iPageY) {
-        var el = this.getEl();
-        var dragEl = this.getDragEl();
-        var s = dragEl.style;
+    load : function(params, reader, callback, scope, arg){
+        if(this.fireEvent("beforeload", this, params) !== false){
 
-        this._resizeProxy();
+            var p = Roo.urlEncode(Roo.apply(params, this.extraParams));
 
-        if (this.centerFrame) {
-            this.setDelta( Math.round(parseInt(s.width,  10)/2),
-                           Math.round(parseInt(s.height, 10)/2) );
-        }
+            var url = this.url;
+            url += (url.indexOf("?") != -1 ? "&" : "?") + p;
+            if(this.nocache){
+                url += "&_dc=" + (new Date().getTime());
+            }
+            var transId = ++Roo.data.ScriptTagProxy.TRANS_ID;
+            var trans = {
+                id : transId,
+                cb : "stcCallback"+transId,
+                scriptId : "stcScript"+transId,
+                params : params,
+                arg : arg,
+                url : url,
+                callback : callback,
+                scope : scope,
+                reader : reader
+            };
+            var conn = this;
 
-        this.setDragElPos(iPageX, iPageY);
+            window[trans.cb] = function(o){
+                conn.handleResponse(o, trans);
+            };
 
-        Roo.fly(dragEl).show();
-    },
+            url += String.format("&{0}={1}", this.callbackParam, trans.cb);
 
-    /**
-     * The proxy is automatically resized to the dimensions of the linked
-     * element when a drag is initiated, unless resizeFrame is set to false
-     * @method _resizeProxy
-     * @private
-     */
-    _resizeProxy: function() {
-        if (this.resizeFrame) {
-            var el = this.getEl();
-            Roo.fly(this.getDragEl()).setSize(el.offsetWidth, el.offsetHeight);
-        }
-    },
+            if(this.autoAbort !== false){
+                this.abort();
+            }
 
-    // overrides Roo.dd.DragDrop
-    b4MouseDown: function(e) {
-        var x = e.getPageX();
-        var y = e.getPageY();
-        this.autoOffset(x, y);
-        this.setDragElPos(x, y);
-    },
+            trans.timeoutId = this.handleFailure.defer(this.timeout, this, [trans]);
 
-    // overrides Roo.dd.DragDrop
-    b4StartDrag: function(x, y) {
-        // show the drag frame
-        this.showFrame(x, y);
-    },
+            var script = document.createElement("script");
+            script.setAttribute("src", url);
+            script.setAttribute("type", "text/javascript");
+            script.setAttribute("id", trans.scriptId);
+            this.head.appendChild(script);
 
-    // overrides Roo.dd.DragDrop
-    b4EndDrag: function(e) {
-        Roo.fly(this.getDragEl()).hide();
+            this.trans = trans;
+        }else{
+            callback.call(scope||this, null, arg, false);
+        }
     },
 
-    // overrides Roo.dd.DragDrop
-    // By default we try to move the element to the last location of the frame.
-    // This is so that the default behavior mirrors that of Roo.dd.DD.
-    endDrag: function(e) {
-
-        var lel = this.getEl();
-        var del = this.getDragEl();
-
-        // Show the drag frame briefly so we can get its position
-        del.style.visibility = "";
-
-        this.beforeMove();
-        // Hide the linked element before the move to get around a Safari
-        // rendering bug.
-        lel.style.visibility = "hidden";
-        Roo.dd.DDM.moveToEl(lel, del);
-        del.style.visibility = "hidden";
-        lel.style.visibility = "";
-
-        this.afterDrag();
+    // private
+    isLoading : function(){
+        return this.trans ? true : false;
     },
 
-    beforeMove : function(){
-
+    /**
+     * Abort the current server request.
+     */
+    abort : function(){
+        if(this.isLoading()){
+            this.destroyTrans(this.trans);
+        }
     },
 
-    afterDrag : function(){
-
+    // private
+    destroyTrans : function(trans, isLoaded){
+        this.head.removeChild(document.getElementById(trans.scriptId));
+        clearTimeout(trans.timeoutId);
+        if(isLoaded){
+            window[trans.cb] = undefined;
+            try{
+                delete window[trans.cb];
+            }catch(e){}
+        }else{
+            // if hasn't been loaded, wait for load to remove it to prevent script error
+            window[trans.cb] = function(){
+                window[trans.cb] = undefined;
+                try{
+                    delete window[trans.cb];
+                }catch(e){}
+            };
+        }
     },
 
-    toString: function() {
-        return ("DDProxy " + this.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.dd.DDTarget
- * A DragDrop implementation that does not move, but can be a drop
- * target.  You would get the same result by simply omitting implementation
- * for the event callbacks, but this way we reduce the processing cost of the
- * event listener and the callbacks.
- * @extends Roo.dd.DragDrop
- * @constructor
- * @param {String} id the id of the element that is a drop target
- * @param {String} sGroup the group of related DragDrop objects
- * @param {object} config an object containing configurable attributes
- *                 Valid properties for DDTarget in addition to those in
- *                 DragDrop:
- *                    none
- */
-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 || {} 
-        });    
-    }
-};
+    // private
+    handleResponse : function(o, trans){
+        this.trans = false;
+        this.destroyTrans(trans, true);
+        var result;
+        try {
+            result = trans.reader.readRecords(o);
+        }catch(e){
+            this.fireEvent("loadexception", this, o, trans.arg, e);
+            trans.callback.call(trans.scope||window, null, trans.arg, false);
+            return;
+        }
+        this.fireEvent("load", this, o, trans.arg);
+        trans.callback.call(trans.scope||window, result, trans.arg, true);
+    },
 
-// Roo.dd.DDTarget.prototype = new Roo.dd.DragDrop();
-Roo.extend(Roo.dd.DDTarget, Roo.dd.DragDrop, {
-    toString: function() {
-        return ("DDTarget " + this.id);
+    // private
+    handleFailure : function(trans){
+        this.trans = false;
+        this.destroyTrans(trans, false);
+        this.fireEvent("loadexception", this, null, trans.arg);
+        trans.callback.call(trans.scope||window, null, trans.arg, false);
     }
-});
-/*
+});/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -3045,491 +1804,457 @@ Roo.extend(Roo.dd.DDTarget, Roo.dd.DragDrop, {
  * Fork - LGPL
  * <script type="text/javascript">
  */
- 
 
 /**
- * @class Roo.dd.ScrollManager
- * Provides automatic scrolling of overflow regions in the page during drag operations.<br><br>
- * <b>Note: This class uses "Point Mode" and is untested in "Intersect Mode".</b>
- * @singleton
+ * @class Roo.data.JsonReader
+ * @extends Roo.data.DataReader
+ * Data reader class to create an Array of Roo.data.Record objects from a JSON response
+ * based on mappings in a provided Roo.data.Record constructor.
+ * 
+ * The default behaviour of a store is to send ?_requestMeta=1, unless the class has recieved 'metaData' property
+ * in the reply previously. 
+ * 
+ * <p>
+ * Example code:
+ * <pre><code>
+var RecordDef = Roo.data.Record.create([
+    {name: 'name', mapping: 'name'},     // "mapping" property not needed if it's the same as "name"
+    {name: 'occupation'}                 // This field will use "occupation" as the mapping.
+]);
+var myReader = new Roo.data.JsonReader({
+    totalProperty: "results",    // The property which contains the total dataset size (optional)
+    root: "rows",                // The property which contains an Array of row objects
+    id: "id"                     // The property within each row object that provides an ID for the record (optional)
+}, RecordDef);
+</code></pre>
+ * <p>
+ * This would consume a JSON file like this:
+ * <pre><code>
+{ 'results': 2, 'rows': [
+    { 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
+    { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ]
+}
+</code></pre>
+ * @cfg {String} totalProperty Name of the property from which to retrieve the total number of records
+ * in the dataset. This is only needed if the whole dataset is not passed in one go, but is being
+ * paged from the remote server.
+ * @cfg {String} successProperty Name of the property from which to retrieve the success attribute used by forms.
+ * @cfg {String} root name of the property which contains the Array of row objects.
+ * @cfg {String} id Name of the property within a row object that contains a record identifier value.
+ * @cfg {Array} fields Array of field definition objects
+ * @constructor
+ * Create a new JsonReader
+ * @param {Object} meta Metadata configuration options
+ * @param {Object} recordType Either an Array of field definition objects,
+ * or an {@link Roo.data.Record} object created using {@link Roo.data.Record#create}.
  */
-Roo.dd.ScrollManager = function(){
-    var ddm = Roo.dd.DragDropMgr;
-    var els = {};
-    var dragEl = null;
-    var proc = {};
-    
-    
-    
-    var onStop = function(e){
-        dragEl = null;
-        clearProc();
-    };
-    
-    var triggerRefresh = function(){
-        if(ddm.dragCurrent){
-             ddm.refreshCache(ddm.dragCurrent.groups);
-        }
-    };
+Roo.data.JsonReader = function(meta, recordType){
     
-    var doScroll = function(){
-        if(ddm.dragCurrent){
-            var dds = Roo.dd.ScrollManager;
-            if(!dds.animate){
-                if(proc.el.scroll(proc.dir, dds.increment)){
-                    triggerRefresh();
-                }
-            }else{
-                proc.el.scroll(proc.dir, dds.increment, true, dds.animDuration, triggerRefresh);
-            }
-        }
-    };
+    meta = meta || {};
+    // set some defaults:
+    Roo.applyIf(meta, {
+        totalProperty: 'total',
+        successProperty : 'success',
+        root : 'data',
+        id : 'id'
+    });
     
-    var clearProc = function(){
-        if(proc.id){
-            clearInterval(proc.id);
-        }
-        proc.id = 0;
-        proc.el = null;
-        proc.dir = "";
-    };
+    Roo.data.JsonReader.superclass.constructor.call(this, meta, recordType||meta.fields);
+};
+Roo.extend(Roo.data.JsonReader, Roo.data.DataReader, {
     
-    var startProc = function(el, dir){
-         Roo.log('scroll startproc');
-        clearProc();
-        proc.el = el;
-        proc.dir = dir;
-        proc.id = setInterval(doScroll, Roo.dd.ScrollManager.frequency);
-    };
+    readerType : 'Json',
     
-    var onFire = function(e, isDrop){
+    /**
+     * @prop {Boolean} metaFromRemote  - if the meta data was loaded from the remote source.
+     * Used by Store query builder to append _requestMeta to params.
+     * 
+     */
+    metaFromRemote : false,
+    /**
+     * This method is only used by a DataProxy which has retrieved data from a remote server.
+     * @param {Object} response The XHR object which contains the JSON data in its responseText.
+     * @return {Object} data A data block which is used by an Roo.data.Store object as
+     * a cache of Roo.data.Records.
+     */
+    read : function(response){
+        var json = response.responseText;
        
-        if(isDrop || !ddm.dragCurrent){ return; }
-        var dds = Roo.dd.ScrollManager;
-        if(!dragEl || dragEl != ddm.dragCurrent){
-            dragEl = ddm.dragCurrent;
-            // refresh regions on drag start
-            dds.refreshCache();
-        }
-        
-        var xy = Roo.lib.Event.getXY(e);
-        var pt = new Roo.lib.Point(xy[0], xy[1]);
-        for(var id in els){
-            var el = els[id], r = el._region;
-            if(r && r.contains(pt) && el.isScrollable()){
-                if(r.bottom - pt.y <= dds.thresh){
-                    if(proc.el != el){
-                        startProc(el, "down");
-                    }
-                    return;
-                }else if(r.right - pt.x <= dds.thresh){
-                    if(proc.el != el){
-                        startProc(el, "left");
-                    }
-                    return;
-                }else if(pt.y - r.top <= dds.thresh){
-                    if(proc.el != el){
-                        startProc(el, "up");
-                    }
-                    return;
-                }else if(pt.x - r.left <= dds.thresh){
-                    if(proc.el != el){
-                        startProc(el, "right");
-                    }
-                    return;
-                }
-            }
+        var o = /* eval:var:o */ eval("("+json+")");
+        if(!o) {
+            throw {message: "JsonReader.read: Json object not found"};
         }
-        clearProc();
-    };
-    
-    ddm.fireEvents = ddm.fireEvents.createSequence(onFire, ddm);
-    ddm.stopDrag = ddm.stopDrag.createSequence(onStop, ddm);
-    
-    return {
-        /**
-         * Registers new overflow element(s) to auto scroll
-         * @param {String/HTMLElement/Element/Array} el The id of or the element to be scrolled or an array of either
-         */
-        register : function(el){
-            if(el instanceof Array){
-                for(var i = 0, len = el.length; i < len; i++) {
-                	this.register(el[i]);
-                }
-            }else{
-                el = Roo.get(el);
-                els[el.id] = el;
-            }
-            Roo.dd.ScrollManager.els = els;
-        },
-        
-        /**
-         * Unregisters overflow element(s) so they are no longer scrolled
-         * @param {String/HTMLElement/Element/Array} el The id of or the element to be removed or an array of either
-         */
-        unregister : function(el){
-            if(el instanceof Array){
-                for(var i = 0, len = el.length; i < len; i++) {
-                	this.unregister(el[i]);
-                }
-            }else{
-                el = Roo.get(el);
-                delete els[el.id];
-            }
-        },
-        
-        /**
-         * The number of pixels from the edge of a container the pointer needs to be to 
-         * trigger scrolling (defaults to 25)
-         * @type Number
-         */
-        thresh : 25,
-        
-        /**
-         * The number of pixels to scroll in each scroll increment (defaults to 50)
-         * @type Number
-         */
-        increment : 100,
-        
-        /**
-         * The frequency of scrolls in milliseconds (defaults to 500)
-         * @type Number
-         */
-        frequency : 500,
-        
-        /**
-         * True to animate the scroll (defaults to true)
-         * @type Boolean
-         */
-        animate: true,
-        
-        /**
-         * The animation duration in seconds - 
-         * MUST BE less than Roo.dd.ScrollManager.frequency! (defaults to .4)
-         * @type Number
-         */
-        animDuration: .4,
         
-        /**
-         * Manually trigger a cache refresh.
-         */
-        refreshCache : function(){
-            for(var id in els){
-                if(typeof els[id] == 'object'){ // for people extending the object prototype
-                    els[id]._region = els[id].getRegion();
-                }
-            }
+        if(o.metaData){
+            
+            delete this.ef;
+            this.metaFromRemote = true;
+            this.meta = o.metaData;
+            this.recordType = Roo.data.Record.create(o.metaData.fields);
+            this.onMetaChange(this.meta, this.recordType, o);
         }
-    };
-}();/*
- * 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">
- */
- 
+        return this.readRecords(o);
+    },
 
-/**
- * @class Roo.dd.Registry
- * Provides easy access to all drag drop components that are registered on a page.  Items can be retrieved either
- * directly by DOM node id, or by passing in the drag drop event that occurred and looking up the event target.
- * @singleton
- */
-Roo.dd.Registry = function(){
-    var elements = {}; 
-    var handles = {}; 
-    var autoIdSeed = 0;
-
-    var getId = function(el, autogen){
-        if(typeof el == "string"){
-            return el;
-        }
-        var id = el.id;
-        if(!id && autogen !== false){
-            id = "roodd-" + (++autoIdSeed);
-            el.id = id;
-        }
-        return id;
-    };
-    
-    return {
-    /**
-     * Register a drag drop element
-     * @param {String|HTMLElement} element The id or DOM node to register
-     * @param {Object} data (optional) A custom data object that will be passed between the elements that are involved
-     * in drag drop operations.  You can populate this object with any arbitrary properties that your own code
-     * knows how to interpret, plus there are some specific properties known to the Registry that should be
-     * populated in the data object (if applicable):
-     * <pre>
-Value      Description<br />
----------  ------------------------------------------<br />
-handles    Array of DOM nodes that trigger dragging<br />
-           for the element being registered<br />
-isHandle   True if the element passed in triggers<br />
-           dragging itself, else false
-</pre>
-     */
-        register : function(el, data){
-            data = data || {};
-            if(typeof el == "string"){
-                el = document.getElementById(el);
-            }
-            data.ddel = el;
-            elements[getId(el)] = data;
-            if(data.isHandle !== false){
-                handles[data.ddel.id] = data;
-            }
-            if(data.handles){
-                var hs = data.handles;
-                for(var i = 0, len = hs.length; i < len; i++){
-                	handles[getId(hs[i])] = data;
-                }
-            }
-        },
+    // private function a store will implement
+    onMetaChange : function(meta, recordType, o){
 
-    /**
-     * Unregister a drag drop element
-     * @param {String|HTMLElement}  element The id or DOM node to unregister
-     */
-        unregister : function(el){
-            var id = getId(el, false);
-            var data = elements[id];
-            if(data){
-                delete elements[id];
-                if(data.handles){
-                    var hs = data.handles;
-                    for(var i = 0, len = hs.length; i < len; i++){
-                    	delete handles[getId(hs[i], false)];
-                    }
-                }
-            }
-        },
+    },
 
     /**
-     * Returns the handle registered for a DOM Node by id
-     * @param {String|HTMLElement} id The DOM node or id to look up
-     * @return {Object} handle The custom handle data
-     */
-        getHandle : function(id){
-            if(typeof id != "string"){ // must be element?
-                id = id.id;
-            }
-            return handles[id];
-        },
+	 * @ignore
+	 */
+    simpleAccess: function(obj, subsc) {
+    	return obj[subsc];
+    },
 
-    /**
-     * Returns the handle that is registered for the DOM node that is the target of the event
-     * @param {Event} e The event
-     * @return {Object} handle The custom handle data
-     */
-        getHandleFromEvent : function(e){
-            var t = Roo.lib.Event.getTarget(e);
-            return t ? handles[t.id] : null;
-        },
+	/**
+	 * @ignore
+	 */
+    getJsonAccessor: function(){
+        var re = /[\[\.]/;
+        return function(expr) {
+            try {
+                return(re.test(expr))
+                    ? new Function("obj", "return obj." + expr)
+                    : function(obj){
+                        return obj[expr];
+                    };
+            } catch(e){}
+            return Roo.emptyFn;
+        };
+    }(),
 
     /**
-     * Returns a custom data object that is registered for a DOM node by id
-     * @param {String|HTMLElement} id The DOM node or id to look up
-     * @return {Object} data The custom data
+     * Create a data block containing Roo.data.Records from an XML document.
+     * @param {Object} o An object which contains an Array of row objects in the property specified
+     * in the config as 'root, and optionally a property, specified in the config as 'totalProperty'
+     * which contains the total size of the dataset.
+     * @return {Object} data A data block which is used by an Roo.data.Store object as
+     * a cache of Roo.data.Records.
      */
-        getTarget : function(id){
-            if(typeof id != "string"){ // must be element?
-                id = id.id;
-            }
-            return elements[id];
-        },
+    readRecords : function(o){
+        /**
+         * After any data loads, the raw JSON data is available for further custom processing.
+         * @type Object
+         */
+        this.o = o;
+        var s = this.meta, Record = this.recordType,
+            f = Record ? Record.prototype.fields : null, fi = f ? f.items : [], fl = f ? f.length : 0;
 
-    /**
-     * Returns a custom data object that is registered for the DOM node that is the target of the event
-     * @param {Event} e The event
-     * @return {Object} data The custom data
-     */
-        getTargetFromEvent : function(e){
-            var t = Roo.lib.Event.getTarget(e);
-            return t ? elements[t.id] || handles[t.id] : null;
-        }
-    };
-}();/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
+//      Generate extraction functions for the totalProperty, the root, the id, and for each field
+        if (!this.ef) {
+            if(s.totalProperty) {
+	            this.getTotal = this.getJsonAccessor(s.totalProperty);
+	        }
+	        if(s.successProperty) {
+	            this.getSuccess = this.getJsonAccessor(s.successProperty);
+	        }
+	        this.getRoot = s.root ? this.getJsonAccessor(s.root) : function(p){return p;};
+	        if (s.id) {
+	        	var g = this.getJsonAccessor(s.id);
+	        	this.getId = function(rec) {
+	        		var r = g(rec);  
+		        	return (r === undefined || r === "") ? null : r;
+	        	};
+	        } else {
+	        	this.getId = function(){return null;};
+	        }
+            this.ef = [];
+            for(var jj = 0; jj < fl; jj++){
+                f = fi[jj];
+                var map = (f.mapping !== undefined && f.mapping !== null) ? f.mapping : f.name;
+                this.ef[jj] = this.getJsonAccessor(map);
+            }
+        }
+
+    	var root = this.getRoot(o), c = root.length, totalRecords = c, success = true;
+    	if(s.totalProperty){
+            var vt = parseInt(this.getTotal(o), 10);
+            if(!isNaN(vt)){
+                totalRecords = vt;
+            }
+        }
+        if(s.successProperty){
+            var vs = this.getSuccess(o);
+            if(vs === false || vs === 'false'){
+                success = false;
+            }
+        }
+        var records = [];
+        for(var i = 0; i < c; i++){
+            var n = root[i];
+            var values = {};
+            var id = this.getId(n);
+            for(var j = 0; j < fl; j++){
+                f = fi[j];
+				var v = this.ef[j](n);
+				if (!f.convert) {
+					Roo.log('missing convert for ' + f.name);
+					Roo.log(f);
+					continue;
+				}
+				values[f.name] = f.convert((v !== undefined) ? v : f.defaultValue);
+            }
+			if (!Record) {
+				return {
+					raw : { errorMsg : "JSON Reader Error: fields or metadata not available to create Record" },
+					success : false,
+					records : [],
+					totalRecords : 0
+				};
+			}
+            var record = new Record(values, id);
+            record.json = n;
+            records[i] = record;
+        }
+        return {
+            raw : o,
+            success : success,
+            records : records,
+            totalRecords : totalRecords
+        };
+    },
+    // used when loading children.. @see loadDataFromChildren
+    toLoadData: function(rec)
+    {
+	// expect rec just to be an array.. eg [a,b,c, [...] << cn ]
+	var data = typeof(rec.data.cn) == 'undefined' ? [] : rec.data.cn;
+	return { data : data, total : data.length };
+	
+    }
+});/*
+ * 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.dd.StatusProxy
- * A specialized drag proxy that supports a drop status icon, {@link Roo.Layer} styles and auto-repair.  This is the
- * default drag proxy used by all Roo.dd components.
+ * @class Roo.data.XmlReader
+ * @extends Roo.data.DataReader
+ * Data reader class to create an Array of {@link Roo.data.Record} objects from an XML document
+ * based on mappings in a provided Roo.data.Record constructor.<br><br>
+ * <p>
+ * <em>Note that in order for the browser to parse a returned XML document, the Content-Type
+ * header in the HTTP response must be set to "text/xml".</em>
+ * <p>
+ * Example code:
+ * <pre><code>
+var RecordDef = Roo.data.Record.create([
+   {name: 'name', mapping: 'name'},     // "mapping" property not needed if it's the same as "name"
+   {name: 'occupation'}                 // This field will use "occupation" as the mapping.
+]);
+var myReader = new Roo.data.XmlReader({
+   totalRecords: "results", // The element which contains the total dataset size (optional)
+   record: "row",           // The repeated element which contains row information
+   id: "id"                 // The element within the row that provides an ID for the record (optional)
+}, RecordDef);
+</code></pre>
+ * <p>
+ * This would consume an XML file like this:
+ * <pre><code>
+&lt;?xml?>
+&lt;dataset>
+ &lt;results>2&lt;/results>
+ &lt;row>
+   &lt;id>1&lt;/id>
+   &lt;name>Bill&lt;/name>
+   &lt;occupation>Gardener&lt;/occupation>
+ &lt;/row>
+ &lt;row>
+   &lt;id>2&lt;/id>
+   &lt;name>Ben&lt;/name>
+   &lt;occupation>Horticulturalist&lt;/occupation>
+ &lt;/row>
+&lt;/dataset>
+</code></pre>
+ * @cfg {String} totalRecords The DomQuery path from which to retrieve the total number of records
+ * in the dataset. This is only needed if the whole dataset is not passed in one go, but is being
+ * paged from the remote server.
+ * @cfg {String} record The DomQuery path to the repeated element which contains record information.
+ * @cfg {String} success The DomQuery path to the success attribute used by forms.
+ * @cfg {String} id The DomQuery path relative from the record element to the element that contains
+ * a record identifier value.
  * @constructor
- * @param {Object} config
+ * Create a new XmlReader
+ * @param {Object} meta Metadata configuration options
+ * @param {Mixed} recordType The definition of the data record type to produce.  This can be either a valid
+ * Record subclass created with {@link Roo.data.Record#create}, or an array of objects with which to call
+ * Roo.data.Record.create.  See the {@link Roo.data.Record} class for more details.
  */
-Roo.dd.StatusProxy = function(config){
-    Roo.apply(this, config);
-    this.id = this.id || Roo.id();
-    this.el = new Roo.Layer({
-        dh: {
-            id: this.id, tag: "div", cls: "x-dd-drag-proxy "+this.dropNotAllowed, children: [
-                {tag: "div", cls: "x-dd-drop-icon"},
-                {tag: "div", cls: "x-dd-drag-ghost"}
-            ]
-        }, 
-        shadow: !config || config.shadow !== false
-    });
-    this.ghost = Roo.get(this.el.dom.childNodes[1]);
-    this.dropStatus = this.dropNotAllowed;
+Roo.data.XmlReader = function(meta, recordType){
+    meta = meta || {};
+    Roo.data.XmlReader.superclass.constructor.call(this, meta, recordType||meta.fields);
 };
-
-Roo.dd.StatusProxy.prototype = {
-    /**
-     * @cfg {String} dropAllowed
-     * The CSS class to apply to the status element when drop is allowed (defaults to "x-dd-drop-ok").
-     */
-    dropAllowed : "x-dd-drop-ok",
-    /**
-     * @cfg {String} dropNotAllowed
-     * The CSS class to apply to the status element when drop is not allowed (defaults to "x-dd-drop-nodrop").
-     */
-    dropNotAllowed : "x-dd-drop-nodrop",
-
-    /**
-     * Updates the proxy's visual element to indicate the status of whether or not drop is allowed
-     * over the current target element.
-     * @param {String} cssClass The css class for the new drop status indicator image
-     */
-    setStatus : function(cssClass){
-        cssClass = cssClass || this.dropNotAllowed;
-        if(this.dropStatus != cssClass){
-            this.el.replaceClass(this.dropStatus, cssClass);
-            this.dropStatus = cssClass;
-        }
-    },
-
-    /**
-     * Resets the status indicator to the default dropNotAllowed value
-     * @param {Boolean} clearGhost True to also remove all content from the ghost, false to preserve it
-     */
-    reset : function(clearGhost){
-        this.el.dom.className = "x-dd-drag-proxy " + this.dropNotAllowed;
-        this.dropStatus = this.dropNotAllowed;
-        if(clearGhost){
-            this.ghost.update("");
-        }
-    },
-
-    /**
-     * Updates the contents of the ghost element
-     * @param {String} html The html that will replace the current innerHTML of the ghost element
-     */
-    update : function(html){
-        if(typeof html == "string"){
-            this.ghost.update(html);
-        }else{
-            this.ghost.update("");
-            html.style.margin = "0";
-            this.ghost.dom.appendChild(html);
-        }
-        // ensure float = none set?? cant remember why though.
-        var el = this.ghost.dom.firstChild;
-		if(el){
-			Roo.fly(el).setStyle('float', 'none');
-		}
-    },
+Roo.extend(Roo.data.XmlReader, Roo.data.DataReader, {
+    
+    readerType : 'Xml',
     
     /**
-     * Returns the underlying proxy {@link Roo.Layer}
-     * @return {Roo.Layer} el
-    */
-    getEl : function(){
-        return this.el;
-    },
-
-    /**
-     * Returns the ghost element
-     * @return {Roo.Element} el
-     */
-    getGhost : function(){
-        return this.ghost;
-    },
-
-    /**
-     * Hides the proxy
-     * @param {Boolean} clear True to reset the status and clear the ghost contents, false to preserve them
+     * This method is only used by a DataProxy which has retrieved data from a remote server.
+	 * @param {Object} response The XHR object which contains the parsed XML document.  The response is expected
+	 * to contain a method called 'responseXML' that returns an XML document object.
+     * @return {Object} records A data block which is used by an {@link Roo.data.Store} as
+     * a cache of Roo.data.Records.
      */
-    hide : function(clear){
-        this.el.hide();
-        if(clear){
-            this.reset(true);
+    read : function(response){
+        var doc = response.responseXML;
+        if(!doc) {
+            throw {message: "XmlReader.read: XML Document not available"};
         }
+        return this.readRecords(doc);
     },
 
     /**
-     * Stops the repair animation if it's currently running
+     * Create a data block containing Roo.data.Records from an XML document.
+	 * @param {Object} doc A parsed XML document.
+     * @return {Object} records A data block which is used by an {@link Roo.data.Store} as
+     * a cache of Roo.data.Records.
      */
-    stop : function(){
-        if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){
-            this.anim.stop();
-        }
-    },
+    readRecords : function(doc){
+        /**
+         * After any data loads/reads, the raw XML Document is available for further custom processing.
+         * @type XMLDocument
+         */
+        this.xmlData = doc;
+        var root = doc.documentElement || doc;
+    	var q = Roo.DomQuery;
+    	var recordType = this.recordType, fields = recordType.prototype.fields;
+    	var sid = this.meta.id;
+    	var totalRecords = 0, success = true;
+    	if(this.meta.totalRecords){
+    	    totalRecords = q.selectNumber(this.meta.totalRecords, root, 0);
+    	}
+        
+        if(this.meta.success){
+            var sv = q.selectValue(this.meta.success, root, true);
+            success = sv !== false && sv !== 'false';
+    	}
+    	var records = [];
+    	var ns = q.select(this.meta.record, root);
+        for(var i = 0, len = ns.length; i < len; i++) {
+	        var n = ns[i];
+	        var values = {};
+	        var id = sid ? q.selectValue(sid, n) : undefined;
+	        for(var j = 0, jlen = fields.length; j < jlen; j++){
+	            var f = fields.items[j];
+                var v = q.selectValue(f.mapping || f.name, n, f.defaultValue);
+	            v = f.convert(v);
+	            values[f.name] = v;
+	        }
+	        var record = new recordType(values, id);
+	        record.node = n;
+	        records[records.length] = record;
+	    }
 
-    /**
-     * Displays this proxy
-     */
-    show : function(){
-        this.el.show();
-    },
+	    return {
+	        success : success,
+	        records : records,
+	        totalRecords : totalRecords || records.length
+	    };
+    }
+});/*
+ * 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">
+ */
 
-    /**
-     * Force the Layer to sync its shadow and shim positions to the element
-     */
-    sync : function(){
-        this.el.sync();
-    },
+/**
+ * @class Roo.data.ArrayReader
+ * @extends Roo.data.DataReader
+ * Data reader class to create an Array of Roo.data.Record objects from an Array.
+ * Each element of that Array represents a row of data fields. The
+ * fields are pulled into a Record object using as a subscript, the <em>mapping</em> property
+ * of the field definition if it exists, or the field's ordinal position in the definition.<br>
+ * <p>
+ * Example code:.
+ * <pre><code>
+var RecordDef = Roo.data.Record.create([
+    {name: 'name', mapping: 1},         // "mapping" only needed if an "id" field is present which
+    {name: 'occupation', mapping: 2}    // precludes using the ordinal position as the index.
+]);
+var myReader = new Roo.data.ArrayReader({
+    id: 0                     // The subscript within row Array that provides an ID for the Record (optional)
+}, RecordDef);
+</code></pre>
+ * <p>
+ * This would consume an Array like this:
+ * <pre><code>
+[ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]
+  </code></pre>
+ 
+ * @constructor
+ * Create a new JsonReader
+ * @param {Object} meta Metadata configuration options.
+ * @param {Object|Array} recordType Either an Array of field definition objects
+ * 
+ * @cfg {Array} fields Array of field definition objects
+ * @cfg {String} id Name of the property within a row object that contains a record identifier value.
+ * as specified to {@link Roo.data.Record#create},
+ * or an {@link Roo.data.Record} object
+ *
+ * 
+ * created using {@link Roo.data.Record#create}.
+ */
+Roo.data.ArrayReader = function(meta, recordType)
+{    
+    Roo.data.ArrayReader.superclass.constructor.call(this, meta, recordType||meta.fields);
+};
 
-    /**
-     * Causes the proxy to return to its position of origin via an animation.  Should be called after an
-     * invalid drop operation by the item being dragged.
-     * @param {Array} xy The XY position of the element ([x, y])
-     * @param {Function} callback The function to call after the repair is complete
-     * @param {Object} scope The scope in which to execute the callback
+Roo.extend(Roo.data.ArrayReader, Roo.data.JsonReader, {
+    
+      /**
+     * Create a data block containing Roo.data.Records from an XML document.
+     * @param {Object} o An Array of row objects which represents the dataset.
+     * @return {Object} A data block which is used by an {@link Roo.data.Store} object as
+     * a cache of Roo.data.Records.
      */
-    repair : function(xy, callback, scope){
-        this.callback = callback;
-        this.scope = scope;
-        if(xy && this.animRepair !== false){
-            this.el.addClass("x-dd-drag-repair");
-            this.el.hideUnders(true);
-            this.anim = this.el.shift({
-                duration: this.repairDuration || .5,
-                easing: 'easeOut',
-                xy: xy,
-                stopFx: true,
-                callback: this.afterRepair,
-                scope: this
-            });
-        }else{
-            this.afterRepair();
+    readRecords : function(o)
+    {
+        var sid = this.meta ? this.meta.id : null;
+        var recordType = this.recordType, fields = recordType.prototype.fields;
+        var records = [];
+        var root = o;
+        for(var i = 0; i < root.length; i++){
+            var n = root[i];
+            var values = {};
+            var id = ((sid || sid === 0) && n[sid] !== undefined && n[sid] !== "" ? n[sid] : null);
+            for(var j = 0, jlen = fields.length; j < jlen; j++){
+                var f = fields.items[j];
+                var k = f.mapping !== undefined && f.mapping !== null ? f.mapping : j;
+                var v = n[k] !== undefined ? n[k] : f.defaultValue;
+                v = f.convert(v);
+                values[f.name] = v;
+            }
+            var record = new recordType(values, id);
+            record.json = n;
+            records[records.length] = record;
         }
+        return {
+            records : records,
+            totalRecords : records.length
+        };
     },
-
-    // private
-    afterRepair : function(){
-        this.hide(true);
-        if(typeof this.callback == "function"){
-            this.callback.call(this.scope || this);
-        }
-        this.callback = null;
-        this.scope = null;
+    // used when loading children.. @see loadDataFromChildren
+    toLoadData: function(rec)
+    {
+        // expect rec just to be an array.. eg [a,b,c, [...] << cn ]
+        return typeof(rec.data.cn) == 'undefined' ? [] : rec.data.cn;
+        
     }
-};/*
+    
+    
+});/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -3540,943 +2265,741 @@ Roo.dd.StatusProxy.prototype = {
  * <script type="text/javascript">
  */
 
+
 /**
- * @class Roo.dd.DragSource
- * @extends Roo.dd.DDProxy
- * A simple class that provides the basic implementation needed to make any element draggable.
+ * @class Roo.data.Tree
+ * @extends Roo.util.Observable
+ * Represents a tree data structure and bubbles all the events for its nodes. The nodes
+ * in the tree have most standard DOM functionality.
  * @constructor
- * @param {String/HTMLElement/Element} el The container element
- * @param {Object} config
+ * @param {Node} root (optional) The root node
  */
-Roo.dd.DragSource = function(el, config){
-    this.el = Roo.get(el);
-    this.dragData = {};
-    
-    Roo.apply(this, config);
-    
-    if(!this.proxy){
-        this.proxy = new Roo.dd.StatusProxy();
-    }
+Roo.data.Tree = function(root){
+   this.nodeHash = {};
+   /**
+    * The root node for this tree
+    * @type Node
+    */
+   this.root = null;
+   if(root){
+       this.setRootNode(root);
+   }
+   this.addEvents({
+       /**
+        * @event append
+        * Fires when a new child node is appended to a node in this tree.
+        * @param {Tree} tree The owner tree
+        * @param {Node} parent The parent node
+        * @param {Node} node The newly appended node
+        * @param {Number} index The index of the newly appended node
+        */
+       "append" : true,
+       /**
+        * @event remove
+        * Fires when a child node is removed from a node in this tree.
+        * @param {Tree} tree The owner tree
+        * @param {Node} parent The parent node
+        * @param {Node} node The child node removed
+        */
+       "remove" : true,
+       /**
+        * @event move
+        * Fires when a node is moved to a new location in the tree
+        * @param {Tree} tree The owner tree
+        * @param {Node} node The node moved
+        * @param {Node} oldParent The old parent of this node
+        * @param {Node} newParent The new parent of this node
+        * @param {Number} index The index it was moved to
+        */
+       "move" : true,
+       /**
+        * @event insert
+        * Fires when a new child node is inserted in a node in this tree.
+        * @param {Tree} tree The owner tree
+        * @param {Node} parent The parent node
+        * @param {Node} node The child node inserted
+        * @param {Node} refNode The child node the node was inserted before
+        */
+       "insert" : true,
+       /**
+        * @event beforeappend
+        * Fires before a new child is appended to a node in this tree, return false to cancel the append.
+        * @param {Tree} tree The owner tree
+        * @param {Node} parent The parent node
+        * @param {Node} node The child node to be appended
+        */
+       "beforeappend" : true,
+       /**
+        * @event beforeremove
+        * Fires before a child is removed from a node in this tree, return false to cancel the remove.
+        * @param {Tree} tree The owner tree
+        * @param {Node} parent The parent node
+        * @param {Node} node The child node to be removed
+        */
+       "beforeremove" : true,
+       /**
+        * @event beforemove
+        * Fires before a node is moved to a new location in the tree. Return false to cancel the move.
+        * @param {Tree} tree The owner tree
+        * @param {Node} node The node being moved
+        * @param {Node} oldParent The parent of the node
+        * @param {Node} newParent The new parent the node is moving to
+        * @param {Number} index The index it is being moved to
+        */
+       "beforemove" : true,
+       /**
+        * @event beforeinsert
+        * Fires before a new child is inserted in a node in this tree, return false to cancel the insert.
+        * @param {Tree} tree The owner tree
+        * @param {Node} parent The parent node
+        * @param {Node} node The child node to be inserted
+        * @param {Node} refNode The child node the node is being inserted before
+        */
+       "beforeinsert" : true
+   });
 
-    Roo.dd.DragSource.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group,
-          {dragElId : this.proxy.id, resizeFrame: false, isTarget: false, scroll: this.scroll === true});
-    
-    this.dragging = false;
+    Roo.data.Tree.superclass.constructor.call(this);
 };
 
-Roo.extend(Roo.dd.DragSource, Roo.dd.DDProxy, {
-    /**
-     * @cfg {String} dropAllowed
-     * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
-     */
-    dropAllowed : "x-dd-drop-ok",
-    /**
-     * @cfg {String} dropNotAllowed
-     * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
-     */
-    dropNotAllowed : "x-dd-drop-nodrop",
+Roo.extend(Roo.data.Tree, Roo.util.Observable, {
+    pathSeparator: "/",
+
+    proxyNodeEvent : function(){
+        return this.fireEvent.apply(this, arguments);
+    },
 
     /**
-     * Returns the data object associated with this drag source
-     * @return {Object} data An object containing arbitrary data
+     * Returns the root node for this tree.
+     * @return {Node}
      */
-    getDragData : function(e){
-        return this.dragData;
+    getRootNode : function(){
+        return this.root;
     },
 
-    // private
-    onDragEnter : function(e, id){
-        var target = Roo.dd.DragDropMgr.getDDById(id);
-        this.cachedTarget = target;
-        if(this.beforeDragEnter(target, e, id) !== false){
-            if(target.isNotifyTarget){
-                var status = target.notifyEnter(this, e, this.dragData);
-                this.proxy.setStatus(status);
-            }else{
-                this.proxy.setStatus(this.dropAllowed);
-            }
-            
-            if(this.afterDragEnter){
-                /**
-                 * An empty function by default, but provided so that you can perform a custom action
-                 * when the dragged item enters the drop target by providing an implementation.
-                 * @param {Roo.dd.DragDrop} target The drop target
-                 * @param {Event} e The event object
-                 * @param {String} id The id of the dragged element
-                 * @method afterDragEnter
-                 */
-                this.afterDragEnter(target, e, id);
-            }
-        }
+    /**
+     * Sets the root node for this tree.
+     * @param {Node} node
+     * @return {Node}
+     */
+    setRootNode : function(node){
+        this.root = node;
+        node.ownerTree = this;
+        node.isRoot = true;
+        this.registerNode(node);
+        return node;
     },
 
     /**
-     * An empty function by default, but provided so that you can perform a custom action
-     * before the dragged item enters the drop target and optionally cancel the onDragEnter.
-     * @param {Roo.dd.DragDrop} target The drop target
-     * @param {Event} e The event object
-     * @param {String} id The id of the dragged element
-     * @return {Boolean} isValid True if the drag event is valid, else false to cancel
+     * Gets a node in this tree by its id.
+     * @param {String} id
+     * @return {Node}
      */
-    beforeDragEnter : function(target, e, id){
-        return true;
+    getNodeById : function(id){
+        return this.nodeHash[id];
     },
 
-    // private
-    alignElWithMouse: function() {
-        Roo.dd.DragSource.superclass.alignElWithMouse.apply(this, arguments);
-        this.proxy.sync();
+    registerNode : function(node){
+        this.nodeHash[node.id] = node;
     },
 
-    // private
-    onDragOver : function(e, id){
-        var target = this.cachedTarget || Roo.dd.DragDropMgr.getDDById(id);
-        if(this.beforeDragOver(target, e, id) !== false){
-            if(target.isNotifyTarget){
-                var status = target.notifyOver(this, e, this.dragData);
-                this.proxy.setStatus(status);
-            }
-
-            if(this.afterDragOver){
-                /**
-                 * An empty function by default, but provided so that you can perform a custom action
-                 * while the dragged item is over the drop target by providing an implementation.
-                 * @param {Roo.dd.DragDrop} target The drop target
-                 * @param {Event} e The event object
-                 * @param {String} id The id of the dragged element
-                 * @method afterDragOver
-                 */
-                this.afterDragOver(target, e, id);
-            }
-        }
+    unregisterNode : function(node){
+        delete this.nodeHash[node.id];
     },
 
+    toString : function(){
+        return "[Tree"+(this.id?" "+this.id:"")+"]";
+    }
+});
+
+/**
+ * @class Roo.data.Node
+ * @extends Roo.util.Observable
+ * @cfg {Boolean} leaf true if this node is a leaf and does not have children
+ * @cfg {String} id The id for this node. If one is not specified, one is generated.
+ * @constructor
+ * @param {Object} attributes The attributes/config for the node
+ */
+Roo.data.Node = function(attributes){
     /**
-     * An empty function by default, but provided so that you can perform a custom action
-     * while the dragged item is over the drop target and optionally cancel the onDragOver.
-     * @param {Roo.dd.DragDrop} target The drop target
-     * @param {Event} e The event object
-     * @param {String} id The id of the dragged element
-     * @return {Boolean} isValid True if the drag event is valid, else false to cancel
+     * The attributes supplied for the node. You can use this property to access any custom attributes you supplied.
+     * @type {Object}
      */
-    beforeDragOver : function(target, e, id){
-        return true;
-    },
-
-    // private
-    onDragOut : function(e, id){
-        var target = this.cachedTarget || Roo.dd.DragDropMgr.getDDById(id);
-        if(this.beforeDragOut(target, e, id) !== false){
-            if(target.isNotifyTarget){
-                target.notifyOut(this, e, this.dragData);
-            }
-            this.proxy.reset();
-            if(this.afterDragOut){
-                /**
-                 * An empty function by default, but provided so that you can perform a custom action
-                 * after the dragged item is dragged out of the target without dropping.
-                 * @param {Roo.dd.DragDrop} target The drop target
-                 * @param {Event} e The event object
-                 * @param {String} id The id of the dragged element
-                 * @method afterDragOut
-                 */
-                this.afterDragOut(target, e, id);
-            }
-        }
-        this.cachedTarget = null;
-    },
-
+    this.attributes = attributes || {};
+    this.leaf = this.attributes.leaf;
     /**
-     * An empty function by default, but provided so that you can perform a custom action before the dragged
-     * item is dragged out of the target without dropping, and optionally cancel the onDragOut.
-     * @param {Roo.dd.DragDrop} target The drop target
-     * @param {Event} e The event object
-     * @param {String} id The id of the dragged element
-     * @return {Boolean} isValid True if the drag event is valid, else false to cancel
+     * The node id. @type String
      */
-    beforeDragOut : function(target, e, id){
-        return true;
-    },
+    this.id = this.attributes.id;
+    if(!this.id){
+        this.id = Roo.id(null, "ynode-");
+        this.attributes.id = this.id;
+    }
+     
     
-    // private
-    onDragDrop : function(e, id){
-        var target = this.cachedTarget || Roo.dd.DragDropMgr.getDDById(id);
-        if(this.beforeDragDrop(target, e, id) !== false){
-            if(target.isNotifyTarget){
-                if(target.notifyDrop(this, e, this.dragData)){ // valid drop?
-                    this.onValidDrop(target, e, id);
-                }else{
-                    this.onInvalidDrop(target, e, id);
+    /**
+     * All child nodes of this node. @type Array
+     */
+    this.childNodes = [];
+    if(!this.childNodes.indexOf){ // indexOf is a must
+        this.childNodes.indexOf = function(o){
+            for(var i = 0, len = this.length; i < len; i++){
+                if(this[i] == o) {
+                    return i;
                 }
-            }else{
-                this.onValidDrop(target, e, id);
             }
-            
-            if(this.afterDragDrop){
-                /**
-                 * An empty function by default, but provided so that you can perform a custom action
-                 * after a valid drag drop has occurred by providing an implementation.
-                 * @param {Roo.dd.DragDrop} target The drop target
-                 * @param {Event} e The event object
-                 * @param {String} id The id of the dropped element
-                 * @method afterDragDrop
-                 */
-                this.afterDragDrop(target, e, id);
-            }
-        }
-        delete this.cachedTarget;
-    },
-
+            return -1;
+        };
+    }
     /**
-     * An empty function by default, but provided so that you can perform a custom action before the dragged
-     * item is dropped onto the target and optionally cancel the onDragDrop.
-     * @param {Roo.dd.DragDrop} target The drop target
-     * @param {Event} e The event object
-     * @param {String} id The id of the dragged element
-     * @return {Boolean} isValid True if the drag drop event is valid, else false to cancel
+     * The parent node for this node. @type Node
      */
-    beforeDragDrop : function(target, e, id){
-        return true;
-    },
-
-    // private
-    onValidDrop : function(target, e, id){
-        this.hideProxy();
-        if(this.afterValidDrop){
-            /**
-             * An empty function by default, but provided so that you can perform a custom action
-             * after a valid drop has occurred by providing an implementation.
-             * @param {Object} target The target DD 
-             * @param {Event} e The event object
-             * @param {String} id The id of the dropped element
-             * @method afterInvalidDrop
-             */
-            this.afterValidDrop(target, e, id);
-        }
-    },
-
-    // private
-    getRepairXY : function(e, data){
-        return this.el.getXY();  
-    },
-
-    // private
-    onInvalidDrop : function(target, e, id){
-        this.beforeInvalidDrop(target, e, id);
-        if(this.cachedTarget){
-            if(this.cachedTarget.isNotifyTarget){
-                this.cachedTarget.notifyOut(this, e, this.dragData);
-            }
-            this.cacheTarget = null;
-        }
-        this.proxy.repair(this.getRepairXY(e, this.dragData), this.afterRepair, this);
-
-        if(this.afterInvalidDrop){
-            /**
-             * An empty function by default, but provided so that you can perform a custom action
-             * after an invalid drop has occurred by providing an implementation.
-             * @param {Event} e The event object
-             * @param {String} id The id of the dropped element
-             * @method afterInvalidDrop
-             */
-            this.afterInvalidDrop(e, id);
-        }
-    },
-
-    // private
-    afterRepair : function(){
-        if(Roo.enableFx){
-            this.el.highlight(this.hlColor || "c3daf9");
-        }
-        this.dragging = false;
-    },
-
+    this.parentNode = null;
     /**
-     * An empty function by default, but provided so that you can perform a custom action after an invalid
-     * drop has occurred.
-     * @param {Roo.dd.DragDrop} target The drop target
-     * @param {Event} e The event object
-     * @param {String} id The id of the dragged element
-     * @return {Boolean} isValid True if the invalid drop should proceed, else false to cancel
+     * The first direct child node of this node, or null if this node has no child nodes. @type Node
      */
-    beforeInvalidDrop : function(target, e, id){
-        return true;
-    },
-
-    // private
-    handleMouseDown : function(e){
-        if(this.dragging) {
-            return;
-        }
-        var data = this.getDragData(e);
-        if(data && this.onBeforeDrag(data, e) !== false){
-            this.dragData = data;
-            this.proxy.stop();
-            Roo.dd.DragSource.superclass.handleMouseDown.apply(this, arguments);
-        } 
-    },
-
+    this.firstChild = null;
     /**
-     * An empty function by default, but provided so that you can perform a custom action before the initial
-     * drag event begins and optionally cancel it.
-     * @param {Object} data An object containing arbitrary data to be shared with drop targets
-     * @param {Event} e The event object
-     * @return {Boolean} isValid True if the drag event is valid, else false to cancel
+     * The last direct child node of this node, or null if this node has no child nodes. @type Node
      */
-    onBeforeDrag : function(data, e){
-        return true;
-    },
-
+    this.lastChild = null;
+    /**
+     * The node immediately preceding this node in the tree, or null if there is no sibling node. @type Node
+     */
+    this.previousSibling = null;
     /**
-     * An empty function by default, but provided so that you can perform a custom action once the initial
-     * drag event has begun.  The drag cannot be canceled from this function.
-     * @param {Number} x The x position of the click on the dragged object
-     * @param {Number} y The y position of the click on the dragged object
+     * The node immediately following this node in the tree, or null if there is no sibling node. @type Node
      */
-    onStartDrag : Roo.emptyFn,
+    this.nextSibling = null;
 
-    // private - YUI override
-    startDrag : function(x, y){
-        this.proxy.reset();
-        this.dragging = true;
-        this.proxy.update("");
-        this.onInitDrag(x, y);
-        this.proxy.show();
-    },
+    this.addEvents({
+       /**
+        * @event append
+        * Fires when a new child node is appended
+        * @param {Tree} tree The owner tree
+        * @param {Node} this This node
+        * @param {Node} node The newly appended node
+        * @param {Number} index The index of the newly appended node
+        */
+       "append" : true,
+       /**
+        * @event remove
+        * Fires when a child node is removed
+        * @param {Tree} tree The owner tree
+        * @param {Node} this This node
+        * @param {Node} node The removed node
+        */
+       "remove" : true,
+       /**
+        * @event move
+        * Fires when this node is moved to a new location in the tree
+        * @param {Tree} tree The owner tree
+        * @param {Node} this This node
+        * @param {Node} oldParent The old parent of this node
+        * @param {Node} newParent The new parent of this node
+        * @param {Number} index The index it was moved to
+        */
+       "move" : true,
+       /**
+        * @event insert
+        * Fires when a new child node is inserted.
+        * @param {Tree} tree The owner tree
+        * @param {Node} this This node
+        * @param {Node} node The child node inserted
+        * @param {Node} refNode The child node the node was inserted before
+        */
+       "insert" : true,
+       /**
+        * @event beforeappend
+        * Fires before a new child is appended, return false to cancel the append.
+        * @param {Tree} tree The owner tree
+        * @param {Node} this This node
+        * @param {Node} node The child node to be appended
+        */
+       "beforeappend" : true,
+       /**
+        * @event beforeremove
+        * Fires before a child is removed, return false to cancel the remove.
+        * @param {Tree} tree The owner tree
+        * @param {Node} this This node
+        * @param {Node} node The child node to be removed
+        */
+       "beforeremove" : true,
+       /**
+        * @event beforemove
+        * Fires before this node is moved to a new location in the tree. Return false to cancel the move.
+        * @param {Tree} tree The owner tree
+        * @param {Node} this This node
+        * @param {Node} oldParent The parent of this node
+        * @param {Node} newParent The new parent this node is moving to
+        * @param {Number} index The index it is being moved to
+        */
+       "beforemove" : true,
+       /**
+        * @event beforeinsert
+        * Fires before a new child is inserted, return false to cancel the insert.
+        * @param {Tree} tree The owner tree
+        * @param {Node} this This node
+        * @param {Node} node The child node to be inserted
+        * @param {Node} refNode The child node the node is being inserted before
+        */
+       "beforeinsert" : true
+   });
+    this.listeners = this.attributes.listeners;
+    Roo.data.Node.superclass.constructor.call(this);
+};
 
-    // private
-    onInitDrag : function(x, y){
-        var clone = this.el.dom.cloneNode(true);
-        clone.id = Roo.id(); // prevent duplicate ids
-        this.proxy.update(clone);
-        this.onStartDrag(x, y);
+Roo.extend(Roo.data.Node, Roo.util.Observable, {
+    fireEvent : function(evtName){
+        // first do standard event for this node
+        if(Roo.data.Node.superclass.fireEvent.apply(this, arguments) === false){
+            return false;
+        }
+        // then bubble it up to the tree if the event wasn't cancelled
+        var ot = this.getOwnerTree();
+        if(ot){
+            if(ot.proxyNodeEvent.apply(ot, arguments) === false){
+                return false;
+            }
+        }
         return true;
     },
 
     /**
-     * Returns the drag source's underlying {@link Roo.dd.StatusProxy}
-     * @return {Roo.dd.StatusProxy} proxy The StatusProxy
-     */
-    getProxy : function(){
-        return this.proxy;  
-    },
-
-    /**
-     * Hides the drag source's {@link Roo.dd.StatusProxy}
+     * Returns true if this node is a leaf
+     * @return {Boolean}
      */
-    hideProxy : function(){
-        this.proxy.hide();  
-        this.proxy.reset(true);
-        this.dragging = false;
+    isLeaf : function(){
+        return this.leaf === true;
     },
 
     // private
-    triggerCacheRefresh : function(){
-        Roo.dd.DDM.refreshCache(this.groups);
-    },
-
-    // private - override to prevent hiding
-    b4EndDrag: function(e) {
-    },
-
-    // private - override to prevent moving
-    endDrag : function(e){
-        this.onEndDrag(this.dragData, e);
+    setFirstChild : function(node){
+        this.firstChild = node;
     },
 
-    // private
-    onEndDrag : function(data, e){
+    //private
+    setLastChild : function(node){
+        this.lastChild = node;
     },
-    
-    // private - pin to cursor
-    autoOffset : function(x, y) {
-        this.setDelta(-12, -20);
-    }    
-});/*
- * 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.dd.DropTarget
- * @extends Roo.dd.DDTarget
- * A simple class that provides the basic implementation needed to make any element a drop target that can have
- * draggable items dropped onto it.  The drop has no effect until an implementation of notifyDrop is provided.
- * @constructor
- * @param {String/HTMLElement/Element} el The container element
- * @param {Object} config
- */
-Roo.dd.DropTarget = function(el, config){
-    this.el = Roo.get(el);
-    
-    var listeners = false; ;
-    if (config && config.listeners) {
-        listeners= config.listeners;
-        delete config.listeners;
-    }
-    Roo.apply(this, config);
-    
-    if(this.containerScroll){
-        Roo.dd.ScrollManager.register(this.el);
-    }
-    this.addEvents( {
-         /**
-         * @scope Roo.dd.DropTarget
-         */
-         
-         /**
-         * @event enter
-         * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the source is now over the
-         * target.  This default implementation adds the CSS class specified by overClass (if any) to the drop element
-         * and returns the dropAllowed config value.  This method should be overridden if drop validation is required.
-         * 
-         * IMPORTANT : it should set this.overClass and this.dropAllowed
-         * 
-         * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
-         * @param {Event} e The event
-         * @param {Object} data An object containing arbitrary data supplied by the drag source
-         */
-        "enter" : true,
-        
-         /**
-         * @event over
-         * The function a {@link Roo.dd.DragSource} calls continuously while it is being dragged over the target.
-         * This method will be called on every mouse movement while the drag source is over the drop target.
-         * This default implementation simply returns the dropAllowed config value.
-         * 
-         * IMPORTANT : it should set this.dropAllowed
-         * 
-         * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
-         * @param {Event} e The event
-         * @param {Object} data An object containing arbitrary data supplied by the drag source
-         
-         */
-        "over" : true,
-        /**
-         * @event out
-         * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the source has been dragged
-         * out of the target without dropping.  This default implementation simply removes the CSS class specified by
-         * overClass (if any) from the drop element.
-         * 
-         * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
-         * @param {Event} e The event
-         * @param {Object} data An object containing arbitrary data supplied by the drag source
-         */
-         "out" : true,
-         
-        /**
-         * @event drop
-         * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the dragged item has
-         * been dropped on it.  This method has no default implementation and returns false, so you must provide an
-         * implementation that does something to process the drop event and returns true so that the drag source's
-         * repair action does not run.
-         * 
-         * IMPORTANT : it should set this.success
-         * 
-         * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
-         * @param {Event} e The event
-         * @param {Object} data An object containing arbitrary data supplied by the drag source
-        */
-         "drop" : true
-    });
-            
-     
-    Roo.dd.DropTarget.superclass.constructor.call(  this, 
-        this.el.dom, 
-        this.ddGroup || this.group,
-        {
-            isTarget: true,
-            listeners : listeners || {} 
-           
-        
-        }
-    );
 
-};
 
-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").
-     */
-    dropAllowed : "x-dd-drop-ok",
-    /**
-     * @cfg {String} dropNotAllowed
-     * 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..
+     * Returns true if this node is the last child of its parent
+     * @return {Boolean}
      */
-    valid : false,
-    // private
-    isTarget : true,
+    isLast : function(){
+       return (!this.parentNode ? true : this.parentNode.lastChild == this);
+    },
 
-    // private
-    isNotifyTarget : true,
-    
     /**
-     * @hide
+     * Returns true if this node is the first child of its parent
+     * @return {Boolean}
      */
-    notifyEnter : function(dd, e, data)
-    {
-        this.valid = true;
-        this.fireEvent('enter', dd, e, data);
-        if(this.overClass){
-            this.el.addClass(this.overClass);
-        }
-        return typeof(this.valid) == 'string' ? 'x-dd-drop-' + this.valid : (
-            this.valid ? this.dropAllowed : this.dropNotAllowed
-        );
+    isFirst : function(){
+       return (!this.parentNode ? true : this.parentNode.firstChild == this);
     },
 
-    /**
-     * @hide
-     */
-    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
-        );
+    hasChildNodes : function(){
+        return !this.isLeaf() && this.childNodes.length > 0;
     },
 
     /**
-     * @hide
+     * Insert node(s) as the last child node of this node.
+     * @param {Node/Array} node The node or Array of nodes to append
+     * @return {Node} The appended node if single append, or null if an array was passed
      */
-    notifyOut : function(dd, e, data)
-    {
-        this.fireEvent('out', dd, e, data);
-        if(this.overClass){
-            this.el.removeClass(this.overClass);
+    appendChild : function(node){
+        var multi = false;
+        if(node instanceof Array){
+            multi = node;
+        }else if(arguments.length > 1){
+            multi = arguments;
+        }
+        
+        // if passed an array or multiple args do them one by one
+        if(multi){
+            for(var i = 0, len = multi.length; i < len; i++) {
+            	this.appendChild(multi[i]);
+            }
+        }else{
+            if(this.fireEvent("beforeappend", this.ownerTree, this, node) === false){
+                return false;
+            }
+            var index = this.childNodes.length;
+            var oldParent = node.parentNode;
+            // it's a move, make sure we move it cleanly
+            if(oldParent){
+                if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index) === false){
+                    return false;
+                }
+                oldParent.removeChild(node);
+            }
+            
+            index = this.childNodes.length;
+            if(index == 0){
+                this.setFirstChild(node);
+            }
+            this.childNodes.push(node);
+            node.parentNode = this;
+            var ps = this.childNodes[index-1];
+            if(ps){
+                node.previousSibling = ps;
+                ps.nextSibling = node;
+            }else{
+                node.previousSibling = null;
+            }
+            node.nextSibling = null;
+            this.setLastChild(node);
+            node.setOwnerTree(this.getOwnerTree());
+            this.fireEvent("append", this.ownerTree, this, node, index);
+            if(this.ownerTree) {
+                this.ownerTree.fireEvent("appendnode", this, node, index);
+            }
+            if(oldParent){
+                node.fireEvent("move", this.ownerTree, node, oldParent, this, index);
+            }
+            return node;
         }
     },
 
     /**
-     * @hide
+     * Removes a child node from this node.
+     * @param {Node} node The node to remove
+     * @return {Node} The removed node
      */
-    notifyDrop : function(dd, e, data)
-    {
-        this.success = false;
-        this.fireEvent('drop', dd, e, data);
-        return this.success;
-    }
-});/*
- * 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.dd.DragZone
- * @extends Roo.dd.DragSource
- * This class provides a container DD instance that proxies for multiple child node sources.<br />
- * By default, this class requires that draggable child nodes are registered with {@link Roo.dd.Registry}.
- * @constructor
- * @param {String/HTMLElement/Element} el The container element
- * @param {Object} config
- */
-Roo.dd.DragZone = function(el, config){
-    Roo.dd.DragZone.superclass.constructor.call(this, el, config);
-    if(this.containerScroll){
-        Roo.dd.ScrollManager.register(this.el);
-    }
-};
+    removeChild : function(node){
+        var index = this.childNodes.indexOf(node);
+        if(index == -1){
+            return false;
+        }
+        if(this.fireEvent("beforeremove", this.ownerTree, this, node) === false){
+            return false;
+        }
 
-Roo.extend(Roo.dd.DragZone, Roo.dd.DragSource, {
-    /**
-     * @cfg {Boolean} containerScroll True to register this container with the Scrollmanager
-     * for auto scrolling during drag operations.
-     */
-    /**
-     * @cfg {String} hlColor The color to use when visually highlighting the drag source in the afterRepair
-     * method after a failed drop (defaults to "c3daf9" - light blue)
-     */
+        // remove it from childNodes collection
+        this.childNodes.splice(index, 1);
 
-    /**
-     * Called when a mousedown occurs in this container. Looks in {@link Roo.dd.Registry}
-     * for a valid target to drag based on the mouse down. Override this method
-     * to provide your own lookup logic (e.g. finding a child by class name). Make sure your returned
-     * object has a "ddel" attribute (with an HTML Element) for other functions to work.
-     * @param {EventObject} e The mouse down event
-     * @return {Object} The dragData
-     */
-    getDragData : function(e){
-        return Roo.dd.Registry.getHandleFromEvent(e);
-    },
-    
-    /**
-     * Called once drag threshold has been reached to initialize the proxy element. By default, it clones the
-     * this.dragData.ddel
-     * @param {Number} x The x position of the click on the dragged object
-     * @param {Number} y The y position of the click on the dragged object
-     * @return {Boolean} true to continue the drag, false to cancel
-     */
-    onInitDrag : function(x, y){
-        this.proxy.update(this.dragData.ddel.cloneNode(true));
-        this.onStartDrag(x, y);
-        return true;
-    },
-    
-    /**
-     * Called after a repair of an invalid drop. By default, highlights this.dragData.ddel 
-     */
-    afterRepair : function(){
-        if(Roo.enableFx){
-            Roo.Element.fly(this.dragData.ddel).highlight(this.hlColor || "c3daf9");
+        // update siblings
+        if(node.previousSibling){
+            node.previousSibling.nextSibling = node.nextSibling;
+        }
+        if(node.nextSibling){
+            node.nextSibling.previousSibling = node.previousSibling;
         }
-        this.dragging = false;
-    },
 
-    /**
-     * Called before a repair of an invalid drop to get the XY to animate to. By default returns
-     * the XY of this.dragData.ddel
-     * @param {EventObject} e The mouse up event
-     * @return {Array} The xy location (e.g. [100, 200])
-     */
-    getRepairXY : function(e){
-        return Roo.Element.fly(this.dragData.ddel).getXY();  
-    }
-});/*
- * 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.dd.DropZone
- * @extends Roo.dd.DropTarget
- * This class provides a container DD instance that proxies for multiple child node targets.<br />
- * By default, this class requires that child nodes accepting drop are registered with {@link Roo.dd.Registry}.
- * @constructor
- * @param {String/HTMLElement/Element} el The container element
- * @param {Object} config
- */
-Roo.dd.DropZone = function(el, config){
-    Roo.dd.DropZone.superclass.constructor.call(this, el, config);
-};
+        // update child refs
+        if(this.firstChild == node){
+            this.setFirstChild(node.nextSibling);
+        }
+        if(this.lastChild == node){
+            this.setLastChild(node.previousSibling);
+        }
 
-Roo.extend(Roo.dd.DropZone, Roo.dd.DropTarget, {
-    /**
-     * Returns a custom data object associated with the DOM node that is the target of the event.  By default
-     * this looks up the event target in the {@link Roo.dd.Registry}, although you can override this method to
-     * provide your own custom lookup.
-     * @param {Event} e The event
-     * @return {Object} data The custom data
-     */
-    getTargetFromEvent : function(e){
-        return Roo.dd.Registry.getTargetFromEvent(e);
+        node.setOwnerTree(null);
+        // clear any references from the node
+        node.parentNode = null;
+        node.previousSibling = null;
+        node.nextSibling = null;
+        this.fireEvent("remove", this.ownerTree, this, node);
+        return node;
     },
 
     /**
-     * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has entered a drop node
-     * that it has registered.  This method has no default implementation and should be overridden to provide
-     * node-specific processing if necessary.
-     * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from 
-     * {@link #getTargetFromEvent} for this node)
-     * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
-     * @param {Event} e The event
-     * @param {Object} data An object containing arbitrary data supplied by the drag source
+     * Inserts the first node before the second node in this nodes childNodes collection.
+     * @param {Node} node The node to insert
+     * @param {Node} refNode The node to insert before (if null the node is appended)
+     * @return {Node} The inserted node
      */
-    onNodeEnter : function(n, dd, e, data){
-        
-    },
+    insertBefore : function(node, refNode){
+        if(!refNode){ // like standard Dom, refNode can be null for append
+            return this.appendChild(node);
+        }
+        // nothing to do
+        if(node == refNode){
+            return false;
+        }
 
-    /**
-     * Called internally while the DropZone determines that a {@link Roo.dd.DragSource} is over a drop node
-     * that it has registered.  The default implementation returns this.dropNotAllowed, so it should be
-     * overridden to provide the proper feedback.
-     * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
-     * {@link #getTargetFromEvent} for this node)
-     * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
-     * @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
-     */
-    onNodeOver : function(n, dd, e, data){
-        return this.dropAllowed;
-    },
+        if(this.fireEvent("beforeinsert", this.ownerTree, this, node, refNode) === false){
+            return false;
+        }
+        var index = this.childNodes.indexOf(refNode);
+        var oldParent = node.parentNode;
+        var refIndex = index;
 
-    /**
-     * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has been dragged out of
-     * the drop node without dropping.  This method has no default implementation and should be overridden to provide
-     * node-specific processing if necessary.
-     * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
-     * {@link #getTargetFromEvent} for this node)
-     * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
-     * @param {Event} e The event
-     * @param {Object} data An object containing arbitrary data supplied by the drag source
-     */
-    onNodeOut : function(n, dd, e, data){
-        
-    },
+        // when moving internally, indexes will change after remove
+        if(oldParent == this && this.childNodes.indexOf(node) < index){
+            refIndex--;
+        }
 
-    /**
-     * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has been dropped onto
-     * the drop node.  The default implementation returns false, so it should be overridden to provide the
-     * appropriate processing of the drop event and return true so that the drag source's repair action does not run.
-     * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
-     * {@link #getTargetFromEvent} for this node)
-     * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
-     * @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
-     */
-    onNodeDrop : function(n, dd, e, data){
-        return false;
+        // it's a move, make sure we move it cleanly
+        if(oldParent){
+            if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index, refNode) === false){
+                return false;
+            }
+            oldParent.removeChild(node);
+        }
+        if(refIndex == 0){
+            this.setFirstChild(node);
+        }
+        this.childNodes.splice(refIndex, 0, node);
+        node.parentNode = this;
+        var ps = this.childNodes[refIndex-1];
+        if(ps){
+            node.previousSibling = ps;
+            ps.nextSibling = node;
+        }else{
+            node.previousSibling = null;
+        }
+        node.nextSibling = refNode;
+        refNode.previousSibling = node;
+        node.setOwnerTree(this.getOwnerTree());
+        this.fireEvent("insert", this.ownerTree, this, node, refNode);
+        if(oldParent){
+            node.fireEvent("move", this.ownerTree, node, oldParent, this, refIndex, refNode);
+        }
+        return node;
     },
 
     /**
-     * Called internally while the DropZone determines that a {@link Roo.dd.DragSource} is being dragged over it,
-     * but not over any of its registered drop nodes.  The default implementation returns this.dropNotAllowed, so
-     * it should be overridden to provide the proper feedback if necessary.
-     * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
-     * @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
+     * Returns the child node at the specified index.
+     * @param {Number} index
+     * @return {Node}
      */
-    onContainerOver : function(dd, e, data){
-        return this.dropNotAllowed;
+    item : function(index){
+        return this.childNodes[index];
     },
 
     /**
-     * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has been dropped on it,
-     * but not on any of its registered drop nodes.  The default implementation returns false, so it should be
-     * overridden to provide the appropriate processing of the drop event if you need the drop zone itself to
-     * be able to accept drops.  It should return true when valid 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 zone
-     * @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
+     * Replaces one child node in this node with another.
+     * @param {Node} newChild The replacement node
+     * @param {Node} oldChild The node to replace
+     * @return {Node} The replaced node
      */
-    onContainerDrop : function(dd, e, data){
-        return false;
+    replaceChild : function(newChild, oldChild){
+        this.insertBefore(newChild, oldChild);
+        this.removeChild(oldChild);
+        return oldChild;
     },
 
     /**
-     * The function a {@link Roo.dd.DragSource} calls once to notify this drop zone that the source is now over
-     * the zone.  The default implementation returns this.dropNotAllowed and expects that only registered drop
-     * nodes can process drag drop operations, so if you need the drop zone itself to be able to process drops
-     * you should override this method and provide a custom implementation.
-     * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
-     * @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
+     * Returns the index of a child node
+     * @param {Node} node
+     * @return {Number} The index of the node or -1 if it was not found
      */
-    notifyEnter : function(dd, e, data){
-        return this.dropNotAllowed;
+    indexOf : function(child){
+        return this.childNodes.indexOf(child);
     },
 
     /**
-     * The function a {@link Roo.dd.DragSource} calls continuously while it is being dragged over the drop zone.
-     * This method will be called on every mouse movement while the drag source is over the drop zone.
-     * It will call {@link #onNodeOver} while the drag source is over a registered node, and will also automatically
-     * delegate to the appropriate node-specific methods as necessary when the drag source enters and exits
-     * registered nodes ({@link #onNodeEnter}, {@link #onNodeOut}). If the drag source is not currently over a
-     * registered node, it will call {@link #onContainerOver}.
-     * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
-     * @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
+     * Returns the tree this node is in.
+     * @return {Tree}
      */
-    notifyOver : function(dd, e, data){
-        var n = this.getTargetFromEvent(e);
-        if(!n){ // not over valid drop target
-            if(this.lastOverNode){
-                this.onNodeOut(this.lastOverNode, dd, e, data);
-                this.lastOverNode = null;
-            }
-            return this.onContainerOver(dd, e, data);
-        }
-        if(this.lastOverNode != n){
-            if(this.lastOverNode){
-                this.onNodeOut(this.lastOverNode, dd, e, data);
+    getOwnerTree : function(){
+        // if it doesn't have one, look for one
+        if(!this.ownerTree){
+            var p = this;
+            while(p){
+                if(p.ownerTree){
+                    this.ownerTree = p.ownerTree;
+                    break;
+                }
+                p = p.parentNode;
             }
-            this.onNodeEnter(n, dd, e, data);
-            this.lastOverNode = n;
         }
-        return this.onNodeOver(n, dd, e, data);
+        return this.ownerTree;
     },
 
     /**
-     * The function a {@link Roo.dd.DragSource} calls once to notify this drop zone that the source has been dragged
-     * out of the zone without dropping.  If the drag source is currently over a registered node, the notification
-     * will be delegated to {@link #onNodeOut} for node-specific handling, otherwise it will be ignored.
-     * @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 zone
+     * Returns depth of this node (the root node has a depth of 0)
+     * @return {Number}
      */
-    notifyOut : function(dd, e, data){
-        if(this.lastOverNode){
-            this.onNodeOut(this.lastOverNode, dd, e, data);
-            this.lastOverNode = null;
+    getDepth : function(){
+        var depth = 0;
+        var p = this;
+        while(p.parentNode){
+            ++depth;
+            p = p.parentNode;
+        }
+        return depth;
+    },
+
+    // private
+    setOwnerTree : function(tree){
+        // if it's move, we need to update everyone
+        if(tree != this.ownerTree){
+            if(this.ownerTree){
+                this.ownerTree.unregisterNode(this);
+            }
+            this.ownerTree = tree;
+            var cs = this.childNodes;
+            for(var i = 0, len = cs.length; i < len; i++) {
+            	cs[i].setOwnerTree(tree);
+            }
+            if(tree){
+                tree.registerNode(this);
+            }
         }
     },
 
     /**
-     * The function a {@link Roo.dd.DragSource} calls once to notify this drop zone that the dragged item has
-     * been dropped on it.  The drag zone will look up the target node based on the event passed in, and if there
-     * is a node registered for that event, it will delegate to {@link #onNodeDrop} for node-specific handling,
-     * otherwise it will call {@link #onContainerDrop}.
-     * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
-     * @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
+     * Returns the path for this node. The path can be used to expand or select this node programmatically.
+     * @param {String} attr (optional) The attr to use for the path (defaults to the node's id)
+     * @return {String} The path
      */
-    notifyDrop : function(dd, e, data){
-        if(this.lastOverNode){
-            this.onNodeOut(this.lastOverNode, dd, e, data);
-            this.lastOverNode = null;
+    getPath : function(attr){
+        attr = attr || "id";
+        var p = this.parentNode;
+        var b = [this.attributes[attr]];
+        while(p){
+            b.unshift(p.attributes[attr]);
+            p = p.parentNode;
         }
-        var n = this.getTargetFromEvent(e);
-        return n ?
-            this.onNodeDrop(n, dd, e, data) :
-            this.onContainerDrop(dd, e, data);
+        var sep = this.getOwnerTree().pathSeparator;
+        return sep + b.join(sep);
     },
 
-    // private
-    triggerCacheRefresh : function(){
-        Roo.dd.DDM.refreshCache(this.groups);
-    }  
-});/*
- * 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.data.SortTypes
- * @singleton
- * Defines the default sorting (casting?) comparison functions used when sorting data.
- */
-Roo.data.SortTypes = {
     /**
-     * Default sort that does nothing
-     * @param {Mixed} s The value being converted
-     * @return {Mixed} The comparison value
+     * Bubbles up the tree from this node, calling the specified function with each node. The scope (<i>this</i>) of
+     * function call will be the scope provided or the current node. The arguments to the function
+     * will be the args provided or the current node. If the function returns false at any point,
+     * the bubble is stopped.
+     * @param {Function} fn The function to call
+     * @param {Object} scope (optional) The scope of the function (defaults to current node)
+     * @param {Array} args (optional) The args to call the function with (default to passing the current node)
      */
-    none : function(s){
-        return s;
+    bubble : function(fn, scope, args){
+        var p = this;
+        while(p){
+            if(fn.call(scope || p, args || p) === false){
+                break;
+            }
+            p = p.parentNode;
+        }
     },
-    
+
     /**
-     * The regular expression used to strip tags
-     * @type {RegExp}
-     * @property
+     * Cascades down the tree from this node, calling the specified function with each node. The scope (<i>this</i>) of
+     * function call will be the scope provided or the current node. The arguments to the function
+     * will be the args provided or the current node. If the function returns false at any point,
+     * the cascade is stopped on that branch.
+     * @param {Function} fn The function to call
+     * @param {Object} scope (optional) The scope of the function (defaults to current node)
+     * @param {Array} args (optional) The args to call the function with (default to passing the current node)
      */
-    stripTagsRE : /<\/?[^>]+>/gi,
-    
+    cascade : function(fn, scope, args){
+        if(fn.call(scope || this, args || this) !== false){
+            var cs = this.childNodes;
+            for(var i = 0, len = cs.length; i < len; i++) {
+            	cs[i].cascade(fn, scope, args);
+            }
+        }
+    },
+
     /**
-     * Strips all HTML tags to sort on text only
-     * @param {Mixed} s The value being converted
-     * @return {String} The comparison value
+     * Interates the child nodes of this node, calling the specified function with each node. The scope (<i>this</i>) of
+     * function call will be the scope provided or the current node. The arguments to the function
+     * will be the args provided or the current node. If the function returns false at any point,
+     * the iteration stops.
+     * @param {Function} fn The function to call
+     * @param {Object} scope (optional) The scope of the function (defaults to current node)
+     * @param {Array} args (optional) The args to call the function with (default to passing the current node)
      */
-    asText : function(s){
-        return String(s).replace(this.stripTagsRE, "");
+    eachChild : function(fn, scope, args){
+        var cs = this.childNodes;
+        for(var i = 0, len = cs.length; i < len; i++) {
+        	if(fn.call(scope || this, args || cs[i]) === false){
+        	    break;
+        	}
+        }
     },
-    
+
     /**
-     * Strips all HTML tags to sort on text only - Case insensitive
-     * @param {Mixed} s The value being converted
-     * @return {String} The comparison value
+     * Finds the first child that has the attribute with the specified value.
+     * @param {String} attribute The attribute name
+     * @param {Mixed} value The value to search for
+     * @return {Node} The found child or null if none was found
      */
-    asUCText : function(s){
-        return String(s).toUpperCase().replace(this.stripTagsRE, "");
+    findChild : function(attribute, value){
+        var cs = this.childNodes;
+        for(var i = 0, len = cs.length; i < len; i++) {
+        	if(cs[i].attributes[attribute] == value){
+        	    return cs[i];
+        	}
+        }
+        return null;
     },
-    
+
     /**
-     * Case insensitive string
-     * @param {Mixed} s The value being converted
-     * @return {String} The comparison value
+     * Finds the first child by a custom function. The child matches if the function passed
+     * returns true.
+     * @param {Function} fn
+     * @param {Object} scope (optional)
+     * @return {Node} The found child or null if none was found
      */
-    asUCString : function(s) {
-    	return String(s).toUpperCase();
+    findChildBy : function(fn, scope){
+        var cs = this.childNodes;
+        for(var i = 0, len = cs.length; i < len; i++) {
+        	if(fn.call(scope||cs[i], cs[i]) === true){
+        	    return cs[i];
+        	}
+        }
+        return null;
     },
-    
+
     /**
-     * Date sorting
-     * @param {Mixed} s The value being converted
-     * @return {Number} The comparison value
+     * Sorts this nodes children using the supplied sort function
+     * @param {Function} fn
+     * @param {Object} scope (optional)
      */
-    asDate : function(s) {
-        if(!s){
-            return 0;
-        }
-        if(s instanceof Date){
-            return s.getTime();
+    sort : function(fn, scope){
+        var cs = this.childNodes;
+        var len = cs.length;
+        if(len > 0){
+            var sortFn = scope ? function(){fn.apply(scope, arguments);} : fn;
+            cs.sort(sortFn);
+            for(var i = 0; i < len; i++){
+                var n = cs[i];
+                n.previousSibling = cs[i-1];
+                n.nextSibling = cs[i+1];
+                if(i == 0){
+                    this.setFirstChild(n);
+                }
+                if(i == len-1){
+                    this.setLastChild(n);
+                }
+            }
         }
-    	return Date.parse(String(s));
     },
-    
+
     /**
-     * Float sorting
-     * @param {Mixed} s The value being converted
-     * @return {Float} The comparison value
+     * Returns true if this node is an ancestor (at any point) of the passed node.
+     * @param {Node} node
+     * @return {Boolean}
      */
-    asFloat : function(s) {
-    	var val = parseFloat(String(s).replace(/,/g, ""));
-        if(isNaN(val)) {
-            val = 0;
-        }
-    	return val;
+    contains : function(node){
+        return node.isAncestor(this);
     },
-    
+
     /**
-     * Integer sorting
-     * @param {Mixed} s The value being converted
-     * @return {Number} The comparison value
+     * Returns true if the passed node is an ancestor (at any point) of this node.
+     * @param {Node} node
+     * @return {Boolean}
      */
-    asInt : function(s) {
-        var val = parseInt(String(s).replace(/,/g, ""));
-        if(isNaN(val)) {
-            val = 0;
+    isAncestor : function(node){
+        var p = this.parentNode;
+        while(p){
+            if(p == node){
+                return true;
+            }
+            p = p.parentNode;
         }
-    	return val;
+        return false;
+    },
+
+    toString : function(){
+        return "[Node"+(this.id?" "+this.id:"")+"]";
     }
-};/*
+});/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -4487,229 +3010,194 @@ Roo.data.SortTypes = {
  * <script type="text/javascript">
  */
 
-/**
-* @class Roo.data.Record
- * Instances of this class encapsulate both record <em>definition</em> information, and record
- * <em>value</em> information for use in {@link Roo.data.Store} objects, or any code which needs
- * to access Records cached in an {@link Roo.data.Store} object.<br>
- * <p>
- * Constructors for this class are generated by passing an Array of field definition objects to {@link #create}.
- * Instances are usually only created by {@link Roo.data.Reader} implementations when processing unformatted data
- * objects.<br>
- * <p>
- * Record objects generated by this constructor inherit all the methods of Roo.data.Record listed below.
- * @constructor
- * This constructor should not be used to create Record objects. Instead, use the constructor generated by
- * {@link #create}. The parameters are the same.
- * @param {Array} data An associative Array of data values keyed by the field name.
- * @param {Object} id (Optional) The id of the record. This id should be unique, and is used by the
- * {@link Roo.data.Store} object which owns the Record to index its collection of Records. If
- * not specified an integer id is generated.
- */
-Roo.data.Record = function(data, id){
-    this.id = (id || id === 0) ? id : ++Roo.data.Record.AUTO_ID;
-    this.data = data;
-};
 
 /**
- * Generate a constructor for a specific record layout.
- * @param {Array} o An Array of field definition objects which specify field names, and optionally,
- * data types, and a mapping for an {@link Roo.data.Reader} to extract the field's value from a data object.
- * Each field definition object may contain the following properties: <ul>
- * <li><b>name</b> : String<p style="margin-left:1em">The name by which the field is referenced within the Record. This is referenced by,
- * for example the <em>dataIndex</em> property in column definition objects passed to {@link Roo.grid.ColumnModel}</p></li>
- * <li><b>mapping</b> : String<p style="margin-left:1em">(Optional) A path specification for use by the {@link Roo.data.Reader} implementation
- * that is creating the Record to access the data value from the data object. If an {@link Roo.data.JsonReader}
- * is being used, then this is a string containing the javascript expression to reference the data relative to 
- * the record item's root. If an {@link Roo.data.XmlReader} is being used, this is an {@link Roo.DomQuery} path
- * to the data item relative to the record element. If the mapping expression is the same as the field name,
- * this may be omitted.</p></li>
- * <li><b>type</b> : String<p style="margin-left:1em">(Optional) The data type for conversion to displayable value. Possible values are
- * <ul><li>auto (Default, implies no conversion)</li>
- * <li>string</li>
- * <li>int</li>
- * <li>float</li>
- * <li>boolean</li>
- * <li>date</li></ul></p></li>
- * <li><b>sortType</b> : Mixed<p style="margin-left:1em">(Optional) A member of {@link Roo.data.SortTypes}.</p></li>
- * <li><b>sortDir</b> : String<p style="margin-left:1em">(Optional) Initial direction to sort. "ASC" or "DESC"</p></li>
- * <li><b>convert</b> : Function<p style="margin-left:1em">(Optional) A function which converts the value provided
- * by the Reader into an object that will be stored in the Record. It is passed the
- * following parameters:<ul>
- * <li><b>v</b> : Mixed<p style="margin-left:1em">The data value as read by the Reader.</p></li>
- * </ul></p></li>
- * <li><b>dateFormat</b> : String<p style="margin-left:1em">(Optional) A format String for the Date.parseDate function.</p></li>
- * </ul>
- * <br>usage:<br><pre><code>
-var TopicRecord = Roo.data.Record.create(
-    {name: 'title', mapping: 'topic_title'},
-    {name: 'author', mapping: 'username'},
-    {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
-    {name: 'lastPost', mapping: 'post_time', type: 'date'},
-    {name: 'lastPoster', mapping: 'user2'},
-    {name: 'excerpt', mapping: 'post_text'}
-);
-
-var myNewRecord = new TopicRecord({
-    title: 'Do my job please',
-    author: 'noobie',
-    totalPosts: 1,
-    lastPost: new Date(),
-    lastPoster: 'Animal',
-    excerpt: 'No way dude!'
-});
-myStore.add(myNewRecord);
-</code></pre>
- * @method create
- * @static
+ * @class Roo.Shadow
+ * Simple class that can provide a shadow effect for any element.  Note that the element MUST be absolutely positioned,
+ * and the shadow does not provide any shimming.  This should be used only in simple cases -- for more advanced
+ * functionality that can also provide the same shadow effect, see the {@link Roo.Layer} class.
+ * @constructor
+ * Create a new Shadow
+ * @param {Object} config The config object
  */
-Roo.data.Record.create = function(o){
-    var f = function(){
-        f.superclass.constructor.apply(this, arguments);
-    };
-    Roo.extend(f, Roo.data.Record);
-    var p = f.prototype;
-    p.fields = new Roo.util.MixedCollection(false, function(field){
-        return field.name;
-    });
-    for(var i = 0, len = o.length; i < len; i++){
-        p.fields.add(new Roo.data.Field(o[i]));
+Roo.Shadow = function(config){
+    Roo.apply(this, config);
+    if(typeof this.mode != "string"){
+        this.mode = this.defaultMode;
     }
-    f.getField = function(name){
-        return p.fields.get(name);  
+    var o = this.offset, a = {h: 0};
+    var rad = Math.floor(this.offset/2);
+    switch(this.mode.toLowerCase()){ // all this hideous nonsense calculates the various offsets for shadows
+        case "drop":
+            a.w = 0;
+            a.l = a.t = o;
+            a.t -= 1;
+            if(Roo.isIE){
+                a.l -= this.offset + rad;
+                a.t -= this.offset + rad;
+                a.w -= rad;
+                a.h -= rad;
+                a.t += 1;
+            }
+        break;
+        case "sides":
+            a.w = (o*2);
+            a.l = -o;
+            a.t = o-1;
+            if(Roo.isIE){
+                a.l -= (this.offset - rad);
+                a.t -= this.offset + rad;
+                a.l += 1;
+                a.w -= (this.offset - rad)*2;
+                a.w -= rad + 1;
+                a.h -= 1;
+            }
+        break;
+        case "frame":
+            a.w = a.h = (o*2);
+            a.l = a.t = -o;
+            a.t += 1;
+            a.h -= 2;
+            if(Roo.isIE){
+                a.l -= (this.offset - rad);
+                a.t -= (this.offset - rad);
+                a.l += 1;
+                a.w -= (this.offset + rad + 1);
+                a.h -= (this.offset + rad);
+                a.h += 1;
+            }
+        break;
     };
-    return f;
-};
 
-Roo.data.Record.AUTO_ID = 1000;
-Roo.data.Record.EDIT = 'edit';
-Roo.data.Record.REJECT = 'reject';
-Roo.data.Record.COMMIT = 'commit';
+    this.adjusts = a;
+};
 
-Roo.data.Record.prototype = {
+Roo.Shadow.prototype = {
     /**
-     * Readonly flag - true if this record has been modified.
-     * @type Boolean
+     * @cfg {String} mode
+     * The shadow display mode.  Supports the following options:<br />
+     * sides: Shadow displays on both sides and bottom only<br />
+     * frame: Shadow displays equally on all four sides<br />
+     * drop: Traditional bottom-right drop shadow (default)
      */
-    dirty : false,
-    editing : false,
-    error: null,
-    modified: null,
+    mode: false,
+    /**
+     * @cfg {String} offset
+     * The number of pixels to offset the shadow from the element (defaults to 4)
+     */
+    offset: 4,
 
     // private
-    join : function(store){
-        this.store = store;
-    },
+    defaultMode: "drop",
 
     /**
-     * Set the named field to the specified value.
-     * @param {String} name The name of the field to set.
-     * @param {Object} value The value to set the field to.
+     * Displays the shadow under the target element
+     * @param {String/HTMLElement/Element} targetEl The id or element under which the shadow should display
      */
-    set : function(name, value){
-        if(this.data[name] == value){
-            return;
-        }
-        this.dirty = true;
-        if(!this.modified){
-            this.modified = {};
+    show : function(target){
+        target = Roo.get(target);
+        if(!this.el){
+            this.el = Roo.Shadow.Pool.pull();
+            if(this.el.dom.nextSibling != target.dom){
+                this.el.insertBefore(target);
+            }
         }
-        if(typeof this.modified[name] == 'undefined'){
-            this.modified[name] = this.data[name];
+        this.el.setStyle("z-index", this.zIndex || parseInt(target.getStyle("z-index"), 10)-1);
+        if(Roo.isIE){
+            this.el.dom.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius="+(this.offset)+")";
         }
-        this.data[name] = value;
-        if(!this.editing && this.store){
-            this.store.afterEdit(this);
-        }       
+        this.realign(
+            target.getLeft(true),
+            target.getTop(true),
+            target.getWidth(),
+            target.getHeight()
+        );
+        this.el.dom.style.display = "block";
     },
 
     /**
-     * Get the value of the named field.
-     * @param {String} name The name of the field to get the value of.
-     * @return {Object} The value of the field.
+     * Returns true if the shadow is visible, else false
      */
-    get : function(name){
-        return this.data[name]; 
-    },
-
-    // private
-    beginEdit : function(){
-        this.editing = true;
-        this.modified = {}; 
-    },
-
-    // private
-    cancelEdit : function(){
-        this.editing = false;
-        delete this.modified;
+    isVisible : function(){
+        return this.el ? true : false;  
     },
 
-    // private
-    endEdit : function(){
-        this.editing = false;
-        if(this.dirty && this.store){
-            this.store.afterEdit(this);
+    /**
+     * Direct alignment when values are already available. Show must be called at least once before
+     * calling this method to ensure it is initialized.
+     * @param {Number} left The target element left position
+     * @param {Number} top The target element top position
+     * @param {Number} width The target element width
+     * @param {Number} height The target element height
+     */
+    realign : function(l, t, w, h){
+        if(!this.el){
+            return;
+        }
+        var a = this.adjusts, d = this.el.dom, s = d.style;
+        var iea = 0;
+        s.left = (l+a.l)+"px";
+        s.top = (t+a.t)+"px";
+        var sw = (w+a.w), sh = (h+a.h), sws = sw +"px", shs = sh + "px";
+ 
+        if(s.width != sws || s.height != shs){
+            s.width = sws;
+            s.height = shs;
+            if(!Roo.isIE){
+                var cn = d.childNodes;
+                var sww = Math.max(0, (sw-12))+"px";
+                cn[0].childNodes[1].style.width = sww;
+                cn[1].childNodes[1].style.width = sww;
+                cn[2].childNodes[1].style.width = sww;
+                cn[1].style.height = Math.max(0, (sh-12))+"px";
+            }
         }
     },
 
     /**
-     * Usually called by the {@link Roo.data.Store} which owns the Record.
-     * Rejects all changes made to the Record since either creation, or the last commit operation.
-     * Modified fields are reverted to their original values.
-     * <p>
-     * Developers should subscribe to the {@link Roo.data.Store#update} event to have their code notified
-     * of reject operations.
+     * Hides this shadow
      */
-    reject : function(){
-        var m = this.modified;
-        for(var n in m){
-            if(typeof m[n] != "function"){
-                this.data[n] = m[n];
-            }
-        }
-        this.dirty = false;
-        delete this.modified;
-        this.editing = false;
-        if(this.store){
-            this.store.afterReject(this);
+    hide : function(){
+        if(this.el){
+            this.el.dom.style.display = "none";
+            Roo.Shadow.Pool.push(this.el);
+            delete this.el;
         }
     },
 
     /**
-     * Usually called by the {@link Roo.data.Store} which owns the Record.
-     * Commits all changes made to the Record since either creation, or the last commit operation.
-     * <p>
-     * Developers should subscribe to the {@link Roo.data.Store#update} event to have their code notified
-     * of commit operations.
+     * Adjust the z-index of this shadow
+     * @param {Number} zindex The new z-index
      */
-    commit : function(){
-        this.dirty = false;
-        delete this.modified;
-        this.editing = false;
-        if(this.store){
-            this.store.afterCommit(this);
+    setZIndex : function(z){
+        this.zIndex = z;
+        if(this.el){
+            this.el.setStyle("z-index", z);
         }
-    },
-
-    // private
-    hasError : function(){
-        return this.error != null;
-    },
+    }
+};
 
-    // private
-    clearError : function(){
-        this.error = null;
-    },
+// Private utility class that manages the internal Shadow cache
+Roo.Shadow.Pool = function(){
+    var p = [];
+    var markup = Roo.isIE ?
+                 '<div class="x-ie-shadow"></div>' :
+                 '<div class="x-shadow"><div class="xst"><div class="xstl"></div><div class="xstc"></div><div class="xstr"></div></div><div class="xsc"><div class="xsml"></div><div class="xsmc"></div><div class="xsmr"></div></div><div class="xsb"><div class="xsbl"></div><div class="xsbc"></div><div class="xsbr"></div></div></div>';
+    return {
+        pull : function(){
+            var sh = p.shift();
+            if(!sh){
+                sh = Roo.get(Roo.DomHelper.insertHtml("beforeBegin", document.body.firstChild, markup));
+                sh.autoBoxAdjust = false;
+            }
+            return sh;
+        },
 
-    /**
-     * Creates a copy of this record.
-     * @param {String} id (optional) A new record id if you don't want to use this record's id
-     * @return {Record}
-     */
-    copy : function(newId) {
-        return new this.constructor(Roo.apply({}, this.data), newId || this.id);
-    }
-};/*
+        push : function(sh){
+            p.push(sh);
+        }
+    };
+}();/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -4721,755 +3209,436 @@ Roo.data.Record.prototype = {
  */
 
 
-
 /**
- * @class Roo.data.Store
+ * @class Roo.SplitBar
  * @extends Roo.util.Observable
- * The Store class encapsulates a client side cache of {@link Roo.data.Record} objects which provide input data
- * for widgets such as the Roo.grid.Grid, or the Roo.form.ComboBox.<br>
- * <p>
- * A Store object uses an implementation of {@link Roo.data.DataProxy} to access a data object unless you call loadData() directly and pass in your data. The Store object
- * has no knowledge of the format of the data returned by the Proxy.<br>
- * <p>
- * A Store object uses its configured implementation of {@link Roo.data.DataReader} to create {@link Roo.data.Record}
- * instances from the data object. These records are cached and made available through accessor functions.
+ * Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized).
+ * <br><br>
+ * Usage:
+ * <pre><code>
+var split = new Roo.SplitBar("elementToDrag", "elementToSize",
+                   Roo.SplitBar.HORIZONTAL, Roo.SplitBar.LEFT);
+split.setAdapter(new Roo.SplitBar.AbsoluteLayoutAdapter("container"));
+split.minSize = 100;
+split.maxSize = 600;
+split.animate = true;
+split.on('moved', splitterMoved);
+</code></pre>
  * @constructor
- * Creates a new Store.
- * @param {Object} config A config object containing the objects needed for the Store to access data,
- * and read the data into Records.
+ * Create a new SplitBar
+ * @param {String/HTMLElement/Roo.Element} dragElement The element to be dragged and act as the SplitBar. 
+ * @param {String/HTMLElement/Roo.Element} resizingElement The element to be resized based on where the SplitBar element is dragged 
+ * @param {Number} orientation (optional) Either Roo.SplitBar.HORIZONTAL or Roo.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
+ * @param {Number} placement (optional) Either Roo.SplitBar.LEFT or Roo.SplitBar.RIGHT for horizontal or  
+                        Roo.SplitBar.TOP or Roo.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the initial
+                        position of the SplitBar).
  */
-Roo.data.Store = function(config){
-    this.data = new Roo.util.MixedCollection(false);
-    this.data.getKey = function(o){
-        return o.id;
-    };
-    this.baseParams = {};
-    // private
-    this.paramNames = {
-        "start" : "start",
-        "limit" : "limit",
-        "sort" : "sort",
-        "dir" : "dir",
-        "multisort" : "_multisort"
-    };
-
-    if(config && config.data){
-        this.inlineData = config.data;
-        delete config.data;
-    }
+Roo.SplitBar = function(dragElement, resizingElement, orientation, placement, existingProxy){
+    
+    /** @private */
+    this.el = Roo.get(dragElement, true);
+    this.el.dom.unselectable = "on";
+    /** @private */
+    this.resizingEl = Roo.get(resizingElement, true);
 
-    Roo.apply(this, config);
+    /**
+     * @private
+     * The orientation of the split. Either Roo.SplitBar.HORIZONTAL or Roo.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
+     * Note: If this is changed after creating the SplitBar, the placement property must be manually updated
+     * @type Number
+     */
+    this.orientation = orientation || Roo.SplitBar.HORIZONTAL;
     
-    if(this.reader){ // reader passed
-        this.reader = Roo.factory(this.reader, Roo.data);
-        this.reader.xmodule = this.xmodule || false;
-        if(!this.recordType){
-            this.recordType = this.reader.recordType;
-        }
-        if(this.reader.onMetaChange){
-            this.reader.onMetaChange = this.onMetaChange.createDelegate(this);
-        }
+    /**
+     * The minimum size of the resizing element. (Defaults to 0)
+     * @type Number
+     */
+    this.minSize = 0;
+    
+    /**
+     * The maximum size of the resizing element. (Defaults to 2000)
+     * @type Number
+     */
+    this.maxSize = 2000;
+    
+    /**
+     * Whether to animate the transition to the new size
+     * @type Boolean
+     */
+    this.animate = false;
+    
+    /**
+     * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
+     * @type Boolean
+     */
+    this.useShim = false;
+    
+    /** @private */
+    this.shim = null;
+    
+    if(!existingProxy){
+        /** @private */
+        this.proxy = Roo.SplitBar.createProxy(this.orientation);
+    }else{
+        this.proxy = Roo.get(existingProxy).dom;
     }
-
-    if(this.recordType){
-        this.fields = this.recordType.prototype.fields;
+    /** @private */
+    this.dd = new Roo.dd.DDProxy(this.el.dom.id, "XSplitBars", {dragElId : this.proxy.id});
+    
+    /** @private */
+    this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);
+    
+    /** @private */
+    this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);
+    
+    /** @private */
+    this.dragSpecs = {};
+    
+    /**
+     * @private The adapter to use to positon and resize elements
+     */
+    this.adapter = new Roo.SplitBar.BasicLayoutAdapter();
+    this.adapter.init(this);
+    
+    if(this.orientation == Roo.SplitBar.HORIZONTAL){
+        /** @private */
+        this.placement = placement || (this.el.getX() > this.resizingEl.getX() ? Roo.SplitBar.LEFT : Roo.SplitBar.RIGHT);
+        this.el.addClass("x-splitbar-h");
+    }else{
+        /** @private */
+        this.placement = placement || (this.el.getY() > this.resizingEl.getY() ? Roo.SplitBar.TOP : Roo.SplitBar.BOTTOM);
+        this.el.addClass("x-splitbar-v");
     }
-    this.modified = [];
-
+    
     this.addEvents({
         /**
-         * @event datachanged
-         * Fires when the data cache has changed, and a widget which is using this Store
-         * as a Record cache should refresh its view.
-         * @param {Store} this
-         */
-        datachanged : true,
-        /**
-         * @event metachange
-         * Fires when this store's reader provides new metadata (fields). This is currently only support for JsonReaders.
-         * @param {Store} this
-         * @param {Object} meta The JSON metadata
-         */
-        metachange : true,
-        /**
-         * @event add
-         * Fires when Records have been added to the Store
-         * @param {Store} this
-         * @param {Roo.data.Record[]} records The array of Records added
-         * @param {Number} index The index at which the record(s) were added
-         */
-        add : true,
-        /**
-         * @event remove
-         * Fires when a Record has been removed from the Store
-         * @param {Store} this
-         * @param {Roo.data.Record} record The Record that was removed
-         * @param {Number} index The index at which the record was removed
-         */
-        remove : true,
-        /**
-         * @event update
-         * Fires when a Record has been updated
-         * @param {Store} this
-         * @param {Roo.data.Record} record The Record that was updated
-         * @param {String} operation The update operation being performed.  Value may be one of:
-         * <pre><code>
- Roo.data.Record.EDIT
- Roo.data.Record.REJECT
- Roo.data.Record.COMMIT
-         * </code></pre>
-         */
-        update : true,
-        /**
-         * @event clear
-         * Fires when the data cache has been cleared.
-         * @param {Store} this
-         */
-        clear : true,
-        /**
-         * @event beforeload
-         * Fires before a request is made for a new data object.  If the beforeload handler returns false
-         * the load action will be canceled.
-         * @param {Store} this
-         * @param {Object} options The loading options that were specified (see {@link #load} for details)
-         */
-        beforeload : true,
-        /**
-         * @event beforeloadadd
-         * Fires after a new set of Records has been loaded.
-         * @param {Store} this
-         * @param {Roo.data.Record[]} records The Records that were loaded
-         * @param {Object} options The loading options that were specified (see {@link #load} for details)
+         * @event resize
+         * Fires when the splitter is moved (alias for {@link #event-moved})
+         * @param {Roo.SplitBar} this
+         * @param {Number} newSize the new width or height
          */
-        beforeloadadd : true,
+        "resize" : true,
         /**
-         * @event load
-         * Fires after a new set of Records has been loaded, before they are added to the store.
-         * @param {Store} this
-         * @param {Roo.data.Record[]} records The Records that were loaded
-         * @param {Object} options The loading options that were specified (see {@link #load} for details)
-         * @params {Object} return from reader
+         * @event moved
+         * Fires when the splitter is moved
+         * @param {Roo.SplitBar} this
+         * @param {Number} newSize the new width or height
          */
-        load : true,
+        "moved" : true,
         /**
-         * @event loadexception
-         * Fires if an exception occurs in the Proxy during loading.
-         * Called with the signature of the Proxy's "loadexception" event.
-         * If you return Json { data: [] , success: false, .... } then this will be thrown with the following args
-         * 
-         * @param {Proxy} 
-         * @param {Object} return from JsonData.reader() - success, totalRecords, records
-         * @param {Object} load options 
-         * @param {Object} jsonData from your request (normally this contains the Exception)
+         * @event beforeresize
+         * Fires before the splitter is dragged
+         * @param {Roo.SplitBar} this
          */
-        loadexception : true
-    });
-    
-    if(this.proxy){
-        this.proxy = Roo.factory(this.proxy, Roo.data);
-        this.proxy.xmodule = this.xmodule || false;
-        this.relayEvents(this.proxy,  ["loadexception"]);
-    }
-    this.sortToggle = {};
-    this.sortOrder = []; // array of order of sorting - updated by grid if multisort is enabled.
+        "beforeresize" : true,
 
-    Roo.data.Store.superclass.constructor.call(this);
+        "beforeapply" : true
+    });
 
-    if(this.inlineData){
-        this.loadData(this.inlineData);
-        delete this.inlineData;
-    }
+    Roo.util.Observable.call(this);
 };
 
-Roo.extend(Roo.data.Store, Roo.util.Observable, {
-     /**
-    * @cfg {boolean} isLocal   flag if data is locally available (and can be always looked up
-    * without a remote query - used by combo/forms at present.
-    */
-    
-    /**
-    * @cfg {Roo.data.DataProxy} proxy The Proxy object which provides access to a data object.
-    */
-    /**
-    * @cfg {Array} data Inline data to be loaded when the store is initialized.
-    */
-    /**
-    * @cfg {Roo.data.Reader} reader The Reader object which processes the data object and returns
-    * an Array of Roo.data.record objects which are cached keyed by their <em>id</em> property.
-    */
-    /**
-    * @cfg {Object} baseParams An object containing properties which are to be sent as parameters
-    * on any HTTP request
-    */
-    /**
-    * @cfg {Object} sortInfo A config object in the format: {field: "fieldName", direction: "ASC|DESC"}
-    */
-    /**
-    * @cfg {Boolean} multiSort enable multi column sorting (sort is based on the order of columns, remote only at present)
-    */
-    multiSort: false,
-    /**
-    * @cfg {boolean} remoteSort True if sorting is to be handled by requesting the Proxy to provide a refreshed
-    * version of the data object in sorted order, as opposed to sorting the Record cache in place (defaults to false).
-    */
-    remoteSort : false,
-
-    /**
-    * @cfg {boolean} pruneModifiedRecords True to clear all modified record information each time the store is
-     * loaded or when a record is removed. (defaults to false).
-    */
-    pruneModifiedRecords : false,
-
-    // private
-    lastOptions : null,
-
-    /**
-     * Add Records to the Store and fires the add event.
-     * @param {Roo.data.Record[]} records An Array of Roo.data.Record objects to add to the cache.
-     */
-    add : function(records){
-        records = [].concat(records);
-        for(var i = 0, len = records.length; i < len; i++){
-            records[i].join(this);
+Roo.extend(Roo.SplitBar, Roo.util.Observable, {
+    onStartProxyDrag : function(x, y){
+        this.fireEvent("beforeresize", this);
+        if(!this.overlay){
+            var o = Roo.DomHelper.insertFirst(document.body,  {cls: "x-drag-overlay", html: "&#160;"}, true);
+            o.unselectable();
+            o.enableDisplayMode("block");
+            // all splitbars share the same overlay
+            Roo.SplitBar.prototype.overlay = o;
         }
-        var index = this.data.length;
-        this.data.addAll(records);
-        this.fireEvent("add", this, records, index);
+        this.overlay.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
+        this.overlay.show();
+        Roo.get(this.proxy).setDisplayed("block");
+        var size = this.adapter.getElementSize(this);
+        this.activeMinSize = this.getMinimumSize();;
+        this.activeMaxSize = this.getMaximumSize();;
+        var c1 = size - this.activeMinSize;
+        var c2 = Math.max(this.activeMaxSize - size, 0);
+        if(this.orientation == Roo.SplitBar.HORIZONTAL){
+            this.dd.resetConstraints();
+            this.dd.setXConstraint(
+                this.placement == Roo.SplitBar.LEFT ? c1 : c2, 
+                this.placement == Roo.SplitBar.LEFT ? c2 : c1
+            );
+            this.dd.setYConstraint(0, 0);
+        }else{
+            this.dd.resetConstraints();
+            this.dd.setXConstraint(0, 0);
+            this.dd.setYConstraint(
+                this.placement == Roo.SplitBar.TOP ? c1 : c2, 
+                this.placement == Roo.SplitBar.TOP ? c2 : c1
+            );
+         }
+        this.dragSpecs.startSize = size;
+        this.dragSpecs.startPoint = [x, y];
+        Roo.dd.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);
     },
-
-    /**
-     * Remove a Record from the Store and fires the remove event.
-     * @param {Ext.data.Record} record The Roo.data.Record object to remove from the cache.
+    
+    /** 
+     * @private Called after the drag operation by the DDProxy
      */
-    remove : function(record){
-        var index = this.data.indexOf(record);
-        this.data.removeAt(index);
-        if(this.pruneModifiedRecords){
-            this.modified.remove(record);
+    onEndProxyDrag : function(e){
+        Roo.get(this.proxy).setDisplayed(false);
+        var endPoint = Roo.lib.Event.getXY(e);
+        if(this.overlay){
+            this.overlay.hide();
+        }
+        var newSize;
+        if(this.orientation == Roo.SplitBar.HORIZONTAL){
+            newSize = this.dragSpecs.startSize + 
+                (this.placement == Roo.SplitBar.LEFT ?
+                    endPoint[0] - this.dragSpecs.startPoint[0] :
+                    this.dragSpecs.startPoint[0] - endPoint[0]
+                );
+        }else{
+            newSize = this.dragSpecs.startSize + 
+                (this.placement == Roo.SplitBar.TOP ?
+                    endPoint[1] - this.dragSpecs.startPoint[1] :
+                    this.dragSpecs.startPoint[1] - endPoint[1]
+                );
+        }
+        newSize = Math.min(Math.max(newSize, this.activeMinSize), this.activeMaxSize);
+        if(newSize != this.dragSpecs.startSize){
+            if(this.fireEvent('beforeapply', this, newSize) !== false){
+                this.adapter.setElementSize(this, newSize);
+                this.fireEvent("moved", this, newSize);
+                this.fireEvent("resize", this, newSize);
+            }
         }
-        this.fireEvent("remove", this, record, index);
     },
-
+    
     /**
-     * Remove all Records from the Store and fires the clear event.
+     * Get the adapter this SplitBar uses
+     * @return The adapter object
      */
-    removeAll : function(){
-        this.data.clear();
-        if(this.pruneModifiedRecords){
-            this.modified = [];
-        }
-        this.fireEvent("clear", this);
+    getAdapter : function(){
+        return this.adapter;
     },
-
+    
     /**
-     * Inserts Records to the Store at the given index and fires the add event.
-     * @param {Number} index The start index at which to insert the passed Records.
-     * @param {Roo.data.Record[]} records An Array of Roo.data.Record objects to add to the cache.
+     * Set the adapter this SplitBar uses
+     * @param {Object} adapter A SplitBar adapter object
      */
-    insert : function(index, records){
-        records = [].concat(records);
-        for(var i = 0, len = records.length; i < len; i++){
-            this.data.insert(index, records[i]);
-            records[i].join(this);
-        }
-        this.fireEvent("add", this, records, index);
+    setAdapter : function(adapter){
+        this.adapter = adapter;
+        this.adapter.init(this);
     },
-
+    
     /**
-     * Get the index within the cache of the passed Record.
-     * @param {Roo.data.Record} record The Roo.data.Record object to to find.
-     * @return {Number} The index of the passed Record. Returns -1 if not found.
+     * Gets the minimum size for the resizing element
+     * @return {Number} The minimum size
      */
-    indexOf : function(record){
-        return this.data.indexOf(record);
+    getMinimumSize : function(){
+        return this.minSize;
     },
-
+    
     /**
-     * Get the index within the cache of the Record with the passed id.
-     * @param {String} id The id of the Record to find.
-     * @return {Number} The index of the Record. Returns -1 if not found.
+     * Sets the minimum size for the resizing element
+     * @param {Number} minSize The minimum size
      */
-    indexOfId : function(id){
-        return this.data.indexOfKey(id);
+    setMinimumSize : function(minSize){
+        this.minSize = minSize;
     },
-
+    
     /**
-     * Get the Record with the specified id.
-     * @param {String} id The id of the Record to find.
-     * @return {Roo.data.Record} The Record with the passed id. Returns undefined if not found.
+     * Gets the maximum size for the resizing element
+     * @return {Number} The maximum size
      */
-    getById : function(id){
-        return this.data.key(id);
+    getMaximumSize : function(){
+        return this.maxSize;
     },
-
+    
     /**
-     * Get the Record at the specified index.
-     * @param {Number} index The index of the Record to find.
-     * @return {Roo.data.Record} The Record at the passed index. Returns undefined if not found.
+     * Sets the maximum size for the resizing element
+     * @param {Number} maxSize The maximum size
      */
-    getAt : function(index){
-        return this.data.itemAt(index);
+    setMaximumSize : function(maxSize){
+        this.maxSize = maxSize;
     },
-
+    
     /**
-     * Returns a range of Records between specified indices.
-     * @param {Number} startIndex (optional) The starting index (defaults to 0)
-     * @param {Number} endIndex (optional) The ending index (defaults to the last Record in the Store)
-     * @return {Roo.data.Record[]} An array of Records
+     * Sets the initialize size for the resizing element
+     * @param {Number} size The initial size
      */
-    getRange : function(start, end){
-        return this.data.getRange(start, end);
-    },
-
-    // private
-    storeOptions : function(o){
-        o = Roo.apply({}, o);
-        delete o.callback;
-        delete o.scope;
-        this.lastOptions = o;
-    },
-
-    /**
-     * Loads the Record cache from the configured Proxy using the configured Reader.
-     * <p>
-     * If using remote paging, then the first load call must specify the <em>start</em>
-     * and <em>limit</em> properties in the options.params property to establish the initial
-     * position within the dataset, and the number of Records to cache on each read from the Proxy.
-     * <p>
-     * <strong>It is important to note that for remote data sources, loading is asynchronous,
-     * and this call will return before the new data has been loaded. Perform any post-processing
-     * in a callback function, or in a "load" event handler.</strong>
-     * <p>
-     * @param {Object} options An object containing properties which control loading options:<ul>
-     * <li>params {Object} An object containing properties to pass as HTTP parameters to a remote data source.</li>
-     * <li>callback {Function} A function to be called after the Records have been loaded. The callback is
-     * passed the following arguments:<ul>
-     * <li>r : Roo.data.Record[]</li>
-     * <li>options: Options object from the load call</li>
-     * <li>success: Boolean success indicator</li></ul></li>
-     * <li>scope {Object} Scope with which to call the callback (defaults to the Store object)</li>
-     * <li>add {Boolean} indicator to append loaded records rather than replace the current cache.</li>
-     * </ul>
-     */
-    load : function(options){
-        options = options || {};
-        if(this.fireEvent("beforeload", this, options) !== false){
-            this.storeOptions(options);
-            var p = Roo.apply(options.params || {}, this.baseParams);
-            // if meta was not loaded from remote source.. try requesting it.
-            if (!this.reader.metaFromRemote) {
-                p._requestMeta = 1;
-            }
-            if(this.sortInfo && this.remoteSort){
-                var pn = this.paramNames;
-                p[pn["sort"]] = this.sortInfo.field;
-                p[pn["dir"]] = this.sortInfo.direction;
-            }
-            if (this.multiSort) {
-                var pn = this.paramNames;
-                p[pn["multisort"]] = Roo.encode( { sort : this.sortToggle, order: this.sortOrder });
-            }
-            
-            this.proxy.load(p, this.reader, this.loadRecords, this, options);
-        }
+    setCurrentSize : function(size){
+        var oldAnimate = this.animate;
+        this.animate = false;
+        this.adapter.setElementSize(this, size);
+        this.animate = oldAnimate;
     },
-
+    
     /**
-     * Reloads the Record cache from the configured Proxy using the configured Reader and
-     * the options from the last load operation performed.
-     * @param {Object} options (optional) An object containing properties which may override the options
-     * used in the last load operation. See {@link #load} for details (defaults to null, in which case
-     * the most recently used options are reused).
+     * Destroy this splitbar. 
+     * @param {Boolean} removeEl True to remove the element
      */
-    reload : function(options){
-        this.load(Roo.applyIf(options||{}, this.lastOptions));
-    },
-
-    // private
-    // Called as a callback by the Reader during a load operation.
-    loadRecords : function(o, options, success){
-        if(!o || success === false){
-            if(success !== false){
-                this.fireEvent("load", this, [], options, o);
-            }
-            if(options.callback){
-                options.callback.call(options.scope || this, [], options, false);
-            }
-            return;
-        }
-        // if data returned failure - throw an exception.
-        if (o.success === false) {
-            // show a message if no listener is registered.
-            if (!this.hasListener('loadexception') && typeof(o.raw.errorMsg) != 'undefined') {
-                    Roo.MessageBox.alert("Error loading",o.raw.errorMsg);
-            }
-            // loadmask wil be hooked into this..
-            this.fireEvent("loadexception", this, o, options, o.raw.errorMsg);
-            return;
-        }
-        var r = o.records, t = o.totalRecords || r.length;
-        
-        this.fireEvent("beforeloadadd", this, r, options, o);
-        
-        if(!options || options.add !== true){
-            if(this.pruneModifiedRecords){
-                this.modified = [];
-            }
-            for(var i = 0, len = r.length; i < len; i++){
-                r[i].join(this);
-            }
-            if(this.snapshot){
-                this.data = this.snapshot;
-                delete this.snapshot;
-            }
-            this.data.clear();
-            this.data.addAll(r);
-            this.totalLength = t;
-            this.applySort();
-            this.fireEvent("datachanged", this);
-        }else{
-            this.totalLength = Math.max(t, this.data.length+r.length);
-            this.add(r);
+    destroy : function(removeEl){
+        if(this.shim){
+            this.shim.remove();
         }
-        this.fireEvent("load", this, r, options, o);
-        if(options.callback){
-            options.callback.call(options.scope || this, r, options, true);
+        this.dd.unreg();
+        this.proxy.parentNode.removeChild(this.proxy);
+        if(removeEl){
+            this.el.remove();
         }
-    },
-
+    }
+});
 
-    /**
-     * Loads data from a passed data block. A Reader which understands the format of the data
-     * must have been configured in the constructor.
-     * @param {Object} data The data block from which to read the Records.  The format of the data expected
-     * is dependent on the type of Reader that is configured and should correspond to that Reader's readRecords parameter.
-     * @param {Boolean} append (Optional) True to append the new Records rather than replace the existing cache.
-     */
-    loadData : function(o, append){
-        var r = this.reader.readRecords(o);
-        this.loadRecords(r, {add: append}, true);
-    },
+/**
+ * @private static Create our own proxy element element. So it will be the same same size on all browsers, we won't use borders. Instead we use a background color.
+ */
+Roo.SplitBar.createProxy = function(dir){
+    var proxy = new Roo.Element(document.createElement("div"));
+    proxy.unselectable();
+    var cls = 'x-splitbar-proxy';
+    proxy.addClass(cls + ' ' + (dir == Roo.SplitBar.HORIZONTAL ? cls +'-h' : cls + '-v'));
+    document.body.appendChild(proxy.dom);
+    return proxy.dom;
+};
 
-    /**
-     * Gets the number of cached records.
-     * <p>
-     * <em>If using paging, this may not be the total size of the dataset. If the data object
-     * used by the Reader contains the dataset size, then the getTotalCount() function returns
-     * the data set size</em>
-     */
-    getCount : function(){
-        return this.data.length || 0;
-    },
+/** 
+ * @class Roo.SplitBar.BasicLayoutAdapter
+ * Default Adapter. It assumes the splitter and resizing element are not positioned
+ * elements and only gets/sets the width of the element. Generally used for table based layouts.
+ */
+Roo.SplitBar.BasicLayoutAdapter = function(){
+};
 
-    /**
-     * Gets the total number of records in the dataset as returned by the server.
-     * <p>
-     * <em>If using paging, for this to be accurate, the data object used by the Reader must contain
-     * the dataset size</em>
-     */
-    getTotalCount : function(){
-        return this.totalLength || 0;
+Roo.SplitBar.BasicLayoutAdapter.prototype = {
+    // do nothing for now
+    init : function(s){
+    
     },
-
     /**
-     * Returns the sort state of the Store as an object with two properties:
-     * <pre><code>
- field {String} The name of the field by which the Records are sorted
- direction {String} The sort order, "ASC" or "DESC"
-     * </code></pre>
+     * Called before drag operations to get the current size of the resizing element. 
+     * @param {Roo.SplitBar} s The SplitBar using this adapter
      */
-    getSortState : function(){
-        return this.sortInfo;
-    },
-
-    // private
-    applySort : function(){
-        if(this.sortInfo && !this.remoteSort){
-            var s = this.sortInfo, f = s.field;
-            var st = this.fields.get(f).sortType;
-            var fn = function(r1, r2){
-                var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
-                return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
-            };
-            this.data.sort(s.direction, fn);
-            if(this.snapshot && this.snapshot != this.data){
-                this.snapshot.sort(s.direction, fn);
-            }
+     getElementSize : function(s){
+        if(s.orientation == Roo.SplitBar.HORIZONTAL){
+            return s.resizingEl.getWidth();
+        }else{
+            return s.resizingEl.getHeight();
         }
     },
-
-    /**
-     * Sets the default sort column and order to be used by the next load operation.
-     * @param {String} fieldName The name of the field to sort by.
-     * @param {String} dir (optional) The sort order, "ASC" or "DESC" (defaults to "ASC")
-     */
-    setDefaultSort : function(field, dir){
-        this.sortInfo = {field: field, direction: dir ? dir.toUpperCase() : "ASC"};
-    },
-
+    
     /**
-     * Sort the Records.
-     * If remote sorting is used, the sort is performed on the server, and the cache is
-     * reloaded. If local sorting is used, the cache is sorted internally.
-     * @param {String} fieldName The name of the field to sort by.
-     * @param {String} dir (optional) The sort order, "ASC" or "DESC" (defaults to "ASC")
+     * Called after drag operations to set the size of the resizing element.
+     * @param {Roo.SplitBar} s The SplitBar using this adapter
+     * @param {Number} newSize The new size to set
+     * @param {Function} onComplete A function to be invoked when resizing is complete
      */
-    sort : function(fieldName, dir){
-        var f = this.fields.get(fieldName);
-        if(!dir){
-            this.sortToggle[f.name] = this.sortToggle[f.name] || f.sortDir;
-            
-            if(this.multiSort || (this.sortInfo && this.sortInfo.field == f.name) ){ // toggle sort dir
-                dir = (this.sortToggle[f.name] || "ASC").toggle("ASC", "DESC");
+    setElementSize : function(s, newSize, onComplete){
+        if(s.orientation == Roo.SplitBar.HORIZONTAL){
+            if(!s.animate){
+                s.resizingEl.setWidth(newSize);
+                if(onComplete){
+                    onComplete(s, newSize);
+                }
             }else{
-                dir = f.sortDir;
+                s.resizingEl.setWidth(newSize, true, .1, onComplete, 'easeOut');
             }
-        }
-        this.sortToggle[f.name] = dir;
-        this.sortInfo = {field: f.name, direction: dir};
-        if(!this.remoteSort){
-            this.applySort();
-            this.fireEvent("datachanged", this);
         }else{
-            this.load(this.lastOptions);
-        }
-    },
-
-    /**
-     * Calls the specified function for each of the Records in the cache.
-     * @param {Function} fn The function to call. The Record is passed as the first parameter.
-     * Returning <em>false</em> aborts and exits the iteration.
-     * @param {Object} scope (optional) The scope in which to call the function (defaults to the Record).
-     */
-    each : function(fn, scope){
-        this.data.each(fn, scope);
-    },
-
-    /**
-     * Gets all records modified since the last commit.  Modified records are persisted across load operations
-     * (e.g., during paging).
-     * @return {Roo.data.Record[]} An array of Records containing outstanding modifications.
-     */
-    getModifiedRecords : function(){
-        return this.modified;
-    },
-
-    // private
-    createFilterFn : function(property, value, anyMatch){
-        if(!value.exec){ // not a regex
-            value = String(value);
-            if(value.length == 0){
-                return false;
+            
+            if(!s.animate){
+                s.resizingEl.setHeight(newSize);
+                if(onComplete){
+                    onComplete(s, newSize);
+                }
+            }else{
+                s.resizingEl.setHeight(newSize, true, .1, onComplete, 'easeOut');
             }
-            value = new RegExp((anyMatch === true ? '' : '^') + Roo.escapeRe(value), "i");
-        }
-        return function(r){
-            return value.test(r.data[property]);
-        };
-    },
-
-    /**
-     * Sums the value of <i>property</i> for each record between start and end and returns the result.
-     * @param {String} property A field on your records
-     * @param {Number} start The record index to start at (defaults to 0)
-     * @param {Number} end The last record index to include (defaults to length - 1)
-     * @return {Number} The sum
-     */
-    sum : function(property, start, end){
-        var rs = this.data.items, v = 0;
-        start = start || 0;
-        end = (end || end === 0) ? end : rs.length-1;
-
-        for(var i = start; i <= end; i++){
-            v += (rs[i].data[property] || 0);
         }
-        return v;
-    },
+    }
+};
 
-    /**
-     * Filter the records by a specified property.
-     * @param {String} field A field on your records
-     * @param {String/RegExp} value Either a string that the field
-     * should start with or a RegExp to test against the field
-     * @param {Boolean} anyMatch True to match any part not just the beginning
-     */
-    filter : function(property, value, anyMatch){
-        var fn = this.createFilterFn(property, value, anyMatch);
-        return fn ? this.filterBy(fn) : this.clearFilter();
-    },
+/** 
+ *@class Roo.SplitBar.AbsoluteLayoutAdapter
+ * @extends Roo.SplitBar.BasicLayoutAdapter
+ * Adapter that  moves the splitter element to align with the resized sizing element. 
+ * Used with an absolute positioned SplitBar.
+ * @param {String/HTMLElement/Roo.Element} container The container that wraps around the absolute positioned content. If it's
+ * document.body, make sure you assign an id to the body element.
+ */
+Roo.SplitBar.AbsoluteLayoutAdapter = function(container){
+    this.basic = new Roo.SplitBar.BasicLayoutAdapter();
+    this.container = Roo.get(container);
+};
 
-    /**
-     * Filter by a function. The specified function will be called with each
-     * record in this data source. If the function returns true the record is included,
-     * otherwise it is filtered.
-     * @param {Function} fn The function to be called, it will receive 2 args (record, id)
-     * @param {Object} scope (optional) The scope of the function (defaults to this)
-     */
-    filterBy : function(fn, scope){
-        this.snapshot = this.snapshot || this.data;
-        this.data = this.queryBy(fn, scope||this);
-        this.fireEvent("datachanged", this);
+Roo.SplitBar.AbsoluteLayoutAdapter.prototype = {
+    init : function(s){
+        this.basic.init(s);
     },
-
-    /**
-     * Query the records by a specified property.
-     * @param {String} field A field on your records
-     * @param {String/RegExp} value Either a string that the field
-     * should start with or a RegExp to test against the field
-     * @param {Boolean} anyMatch True to match any part not just the beginning
-     * @return {MixedCollection} Returns an Roo.util.MixedCollection of the matched records
-     */
-    query : function(property, value, anyMatch){
-        var fn = this.createFilterFn(property, value, anyMatch);
-        return fn ? this.queryBy(fn) : this.data.clone();
+    
+    getElementSize : function(s){
+        return this.basic.getElementSize(s);
     },
-
-    /**
-     * Query by a function. The specified function will be called with each
-     * record in this data source. If the function returns true the record is included
-     * in the results.
-     * @param {Function} fn The function to be called, it will receive 2 args (record, id)
-     * @param {Object} scope (optional) The scope of the function (defaults to this)
-      @return {MixedCollection} Returns an Roo.util.MixedCollection of the matched records
-     **/
-    queryBy : function(fn, scope){
-        var data = this.snapshot || this.data;
-        return data.filterBy(fn, scope||this);
+    
+    setElementSize : function(s, newSize, onComplete){
+        this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s]));
     },
-
-    /**
-     * Collects unique values for a particular dataIndex from this store.
-     * @param {String} dataIndex The property to collect
-     * @param {Boolean} allowNull (optional) Pass true to allow null, undefined or empty string values
-     * @param {Boolean} bypassFilter (optional) Pass true to collect from all records, even ones which are filtered
-     * @return {Array} An array of the unique values
-     **/
-    collect : function(dataIndex, allowNull, bypassFilter){
-        var d = (bypassFilter === true && this.snapshot) ?
-                this.snapshot.items : this.data.items;
-        var v, sv, r = [], l = {};
-        for(var i = 0, len = d.length; i < len; i++){
-            v = d[i].data[dataIndex];
-            sv = String(v);
-            if((allowNull || !Roo.isEmpty(v)) && !l[sv]){
-                l[sv] = true;
-                r[r.length] = v;
-            }
+    
+    moveSplitter : function(s){
+        var yes = Roo.SplitBar;
+        switch(s.placement){
+            case yes.LEFT:
+                s.el.setX(s.resizingEl.getRight());
+                break;
+            case yes.RIGHT:
+                s.el.setStyle("right", (this.container.getWidth() - s.resizingEl.getLeft()) + "px");
+                break;
+            case yes.TOP:
+                s.el.setY(s.resizingEl.getBottom());
+                break;
+            case yes.BOTTOM:
+                s.el.setY(s.resizingEl.getTop() - s.el.getHeight());
+                break;
         }
-        return r;
-    },
+    }
+};
 
-    /**
-     * Revert to a view of the Record cache with no filtering applied.
-     * @param {Boolean} suppressEvent If true the filter is cleared silently without notifying listeners
-     */
-    clearFilter : function(suppressEvent){
-        if(this.snapshot && this.snapshot != this.data){
-            this.data = this.snapshot;
-            delete this.snapshot;
-            if(suppressEvent !== true){
-                this.fireEvent("datachanged", this);
-            }
-        }
-    },
+/**
+ * Orientation constant - Create a vertical SplitBar
+ * @static
+ * @type Number
+ */
+Roo.SplitBar.VERTICAL = 1;
 
-    // private
-    afterEdit : function(record){
-        if(this.modified.indexOf(record) == -1){
-            this.modified.push(record);
-        }
-        this.fireEvent("update", this, record, Roo.data.Record.EDIT);
-    },
-    
-    // private
-    afterReject : function(record){
-        this.modified.remove(record);
-        this.fireEvent("update", this, record, Roo.data.Record.REJECT);
-    },
+/**
+ * Orientation constant - Create a horizontal SplitBar
+ * @static
+ * @type Number
+ */
+Roo.SplitBar.HORIZONTAL = 2;
 
-    // private
-    afterCommit : function(record){
-        this.modified.remove(record);
-        this.fireEvent("update", this, record, Roo.data.Record.COMMIT);
-    },
+/**
+ * Placement constant - The resizing element is to the left of the splitter element
+ * @static
+ * @type Number
+ */
+Roo.SplitBar.LEFT = 1;
 
-    /**
-     * Commit all Records with outstanding changes. To handle updates for changes, subscribe to the
-     * Store's "update" event, and perform updating when the third parameter is Roo.data.Record.COMMIT.
-     */
-    commitChanges : function(){
-        var m = this.modified.slice(0);
-        this.modified = [];
-        for(var i = 0, len = m.length; i < len; i++){
-            m[i].commit();
-        }
-    },
+/**
+ * Placement constant - The resizing element is to the right of the splitter element
+ * @static
+ * @type Number
+ */
+Roo.SplitBar.RIGHT = 2;
 
-    /**
-     * Cancel outstanding changes on all changed records.
-     */
-    rejectChanges : function(){
-        var m = this.modified.slice(0);
-        this.modified = [];
-        for(var i = 0, len = m.length; i < len; i++){
-            m[i].reject();
-        }
-    },
-
-    onMetaChange : function(meta, rtype, o){
-        this.recordType = rtype;
-        this.fields = rtype.prototype.fields;
-        delete this.snapshot;
-        this.sortInfo = meta.sortInfo || this.sortInfo;
-        this.modified = [];
-        this.fireEvent('metachange', this, this.reader.meta);
-    },
-    
-    moveIndex : function(data, type)
-    {
-        var index = this.indexOf(data);
-        
-        var newIndex = index + type;
-        
-        this.remove(data);
-        
-        this.insert(newIndex, data);
-        
-    }
-});/*
- * 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">
- */
+/**
+ * Placement constant - The resizing element is positioned above the splitter element
+ * @static
+ * @type Number
+ */
+Roo.SplitBar.TOP = 3;
 
 /**
- * @class Roo.data.SimpleStore
- * @extends Roo.data.Store
- * Small helper class to make creating Stores from Array data easier.
- * @cfg {Number} id The array index of the record id. Leave blank to auto generate ids.
- * @cfg {Array} fields An array of field definition objects, or field name strings.
- * @cfg {Array} data The multi-dimensional array of data
- * @constructor
- * @param {Object} config
+ * Placement constant - The resizing element is positioned under splitter element
+ * @static
+ * @type Number
  */
-Roo.data.SimpleStore = function(config){
-    Roo.data.SimpleStore.superclass.constructor.call(this, {
-        isLocal : true,
-        reader: new Roo.data.ArrayReader({
-                id: config.id
-            },
-            Roo.data.Record.create(config.fields)
-        ),
-        proxy : new Roo.data.MemoryProxy(config.data)
-    });
-    this.load();
-};
-Roo.extend(Roo.data.SimpleStore, Roo.data.Store);/*
+Roo.SplitBar.BOTTOM = 4;
+/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -5481,862 +3650,691 @@ Roo.extend(Roo.data.SimpleStore, Roo.data.Store);/*
  */
 
 /**
-/**
- * @extends Roo.data.Store
- * @class Roo.data.JsonStore
- * Small helper class to make creating Stores for JSON data easier. <br/>
-<pre><code>
-var store = new Roo.data.JsonStore({
-    url: 'get-images.php',
-    root: 'images',
-    fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
-});
-</code></pre>
- * <b>Note: Although they are not listed, this class inherits all of the config options of Store,
- * JsonReader and HttpProxy (unless inline data is provided).</b>
- * @cfg {Array} fields An array of field definition objects, or field name strings.
- * @constructor
- * @param {Object} config
- */
-Roo.data.JsonStore = function(c){
-    Roo.data.JsonStore.superclass.constructor.call(this, Roo.apply(c, {
-        proxy: !c.data ? new Roo.data.HttpProxy({url: c.url}) : undefined,
-        reader: new Roo.data.JsonReader(c, c.fields)
-    }));
-};
-Roo.extend(Roo.data.JsonStore, Roo.data.Store);/*
- * 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.View
+ * @extends Roo.util.Observable
+ * Create a "View" for an element based on a data model or UpdateManager and the supplied DomHelper template. 
+ * This class also supports single and multi selection modes. <br>
+ * Create a data model bound view:
+ <pre><code>
+ var store = new Roo.data.Store(...);
 
+ var view = new Roo.View({
+    el : "my-element",
+    tpl : '&lt;div id="{0}"&gt;{2} - {1}&lt;/div&gt;', // auto create template
  
-Roo.data.Field = function(config){
-    if(typeof config == "string"){
-        config = {name: config};
-    }
-    Roo.apply(this, config);
+    singleSelect: true,
+    selectedClass: "ydataview-selected",
+    store: store
+ });
+
+ // listen for node click?
+ view.on("click", function(vw, index, node, e){
+ alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
+ });
+
+ // load XML data
+ dataModel.load("foobar.xml");
+ </code></pre>
+ For an example of creating a JSON/UpdateManager view, see {@link Roo.JsonView}.
+ * <br><br>
+ * <b>Note: The root of your template must be a single node. Table/row implementations may work but are not supported due to
+ * IE"s limited insertion support with tables and Opera"s faulty event bubbling.</b>
+ * 
+ * Note: old style constructor is still suported (container, template, config)
+ * 
+ * @constructor
+ * Create a new View
+ * @param {Object} config The config object
+ * 
+ */
+Roo.View = function(config, depreciated_tpl, depreciated_config){
     
-    if(!this.type){
-        this.type = "auto";
-    }
+    this.parent = false;
     
-    var st = Roo.data.SortTypes;
-    // named sortTypes are supported, here we look them up
-    if(typeof this.sortType == "string"){
-        this.sortType = st[this.sortType];
+    if (typeof(depreciated_tpl) == 'undefined') {
+        // new way.. - universal constructor.
+        Roo.apply(this, config);
+        this.el  = Roo.get(this.el);
+    } else {
+        // old format..
+        this.el  = Roo.get(config);
+        this.tpl = depreciated_tpl;
+        Roo.apply(this, depreciated_config);
     }
+    this.wrapEl  = this.el.wrap().wrap();
+    ///this.el = this.wrapEla.appendChild(document.createElement("div"));
     
-    // set default sortType for strings and dates
-    if(!this.sortType){
-        switch(this.type){
-            case "string":
-                this.sortType = st.asUCString;
-                break;
-            case "date":
-                this.sortType = st.asDate;
-                break;
-            default:
-                this.sortType = st.none;
-        }
-    }
-
-    // define once
-    var stripRe = /[\$,%]/g;
-
-    // prebuilt conversion function for this field, instead of
-    // switching every time we're reading a value
-    if(!this.convert){
-        var cv, dateFormat = this.dateFormat;
-        switch(this.type){
-            case "":
-            case "auto":
-            case undefined:
-                cv = function(v){ return v; };
-                break;
-            case "string":
-                cv = function(v){ return (v === undefined || v === null) ? '' : String(v); };
-                break;
-            case "int":
-                cv = function(v){
-                    return v !== undefined && v !== null && v !== '' ?
-                           parseInt(String(v).replace(stripRe, ""), 10) : '';
-                    };
-                break;
-            case "float":
-                cv = function(v){
-                    return v !== undefined && v !== null && v !== '' ?
-                           parseFloat(String(v).replace(stripRe, ""), 10) : ''; 
-                    };
-                break;
-            case "bool":
-            case "boolean":
-                cv = function(v){ return v === true || v === "true" || v == 1; };
-                break;
-            case "date":
-                cv = function(v){
-                    if(!v){
-                        return '';
-                    }
-                    if(v instanceof Date){
-                        return v;
-                    }
-                    if(dateFormat){
-                        if(dateFormat == "timestamp"){
-                            return new Date(v*1000);
-                        }
-                        return Date.parseDate(v, dateFormat);
-                    }
-                    var parsed = Date.parse(v);
-                    return parsed ? new Date(parsed) : null;
-                };
-             break;
-            
-        }
-        this.convert = cv;
+    
+    if(typeof(this.tpl) == "string"){
+        this.tpl = new Roo.Template(this.tpl);
+    } else {
+        // support xtype ctors..
+        this.tpl = new Roo.factory(this.tpl, Roo);
     }
-};
-
-Roo.data.Field.prototype = {
-    dateFormat: null,
-    defaultValue: "",
-    mapping: null,
-    sortType : null,
-    sortDir : "ASC"
-};/*
- * 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">
- */
- 
-// Base class for reading structured data from a data source.  This class is intended to be
-// extended (see ArrayReader, JsonReader and XmlReader) and should not be created directly.
-
-/**
- * @class Roo.data.DataReader
- * Base class for reading structured data from a data source.  This class is intended to be
- * extended (see {Roo.data.ArrayReader}, {Roo.data.JsonReader} and {Roo.data.XmlReader}) and should not be created directly.
- */
-
-Roo.data.DataReader = function(meta, recordType){
     
-    this.meta = meta;
     
-    this.recordType = recordType instanceof Array ? 
-        Roo.data.Record.create(recordType) : recordType;
-};
-
-Roo.data.DataReader.prototype = {
-     /**
-     * Create an empty record
-     * @param {Object} data (optional) - overlay some values
-     * @return {Roo.data.Record} record created.
-     */
-    newRow :  function(d) {
-        var da =  {};
-        this.recordType.prototype.fields.each(function(c) {
-            switch( c.type) {
-                case 'int' : da[c.name] = 0; break;
-                case 'date' : da[c.name] = new Date(); break;
-                case 'float' : da[c.name] = 0.0; break;
-                case 'boolean' : da[c.name] = false; break;
-                default : da[c.name] = ""; break;
-            }
-            
-        });
-        return new this.recordType(Roo.apply(da, d));
-    }
+    this.tpl.compile();
     
-};/*
- * 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.data.DataProxy
- * @extends Roo.data.Observable
- * This class is an abstract base class for implementations which provide retrieval of
- * unformatted data objects.<br>
- * <p>
- * DataProxy implementations are usually used in conjunction with an implementation of Roo.data.DataReader
- * (of the appropriate type which knows how to parse the data object) to provide a block of
- * {@link Roo.data.Records} to an {@link Roo.data.Store}.<br>
- * <p>
- * Custom implementations must implement the load method as described in
- * {@link Roo.data.HttpProxy#load}.
- */
-Roo.data.DataProxy = function(){
+    /** @private */
     this.addEvents({
         /**
-         * @event beforeload
-         * Fires before a network request is made to retrieve a data object.
-         * @param {Object} This DataProxy object.
-         * @param {Object} params The params parameter to the load function.
+         * @event beforeclick
+         * Fires before a click is processed. Returns false to cancel the default action.
+         * @param {Roo.View} this
+         * @param {Number} index The index of the target node
+         * @param {HTMLElement} node The target node
+         * @param {Roo.EventObject} e The raw event object
          */
-        beforeload : true,
+            "beforeclick" : true,
         /**
-         * @event load
-         * Fires before the load method's callback is called.
-         * @param {Object} This DataProxy object.
-         * @param {Object} o The data object.
-         * @param {Object} arg The callback argument object passed to the load function.
+         * @event click
+         * Fires when a template node is clicked.
+         * @param {Roo.View} this
+         * @param {Number} index The index of the target node
+         * @param {HTMLElement} node The target node
+         * @param {Roo.EventObject} e The raw event object
          */
-        load : true,
+            "click" : true,
         /**
-         * @event loadexception
-         * Fires if an Exception occurs during data retrieval.
-         * @param {Object} This DataProxy object.
-         * @param {Object} o The data object.
-         * @param {Object} arg The callback argument object passed to the load function.
-         * @param {Object} e The Exception.
+         * @event dblclick
+         * Fires when a template node is double clicked.
+         * @param {Roo.View} this
+         * @param {Number} index The index of the target node
+         * @param {HTMLElement} node The target node
+         * @param {Roo.EventObject} e The raw event object
          */
-        loadexception : true
-    });
-    Roo.data.DataProxy.superclass.constructor.call(this);
-};
+            "dblclick" : true,
+        /**
+         * @event contextmenu
+         * Fires when a template node is right clicked.
+         * @param {Roo.View} this
+         * @param {Number} index The index of the target node
+         * @param {HTMLElement} node The target node
+         * @param {Roo.EventObject} e The raw event object
+         */
+            "contextmenu" : true,
+        /**
+         * @event selectionchange
+         * Fires when the selected nodes change.
+         * @param {Roo.View} this
+         * @param {Array} selections Array of the selected nodes
+         */
+            "selectionchange" : true,
+    
+        /**
+         * @event beforeselect
+         * Fires before a selection is made. If any handlers return false, the selection is cancelled.
+         * @param {Roo.View} this
+         * @param {HTMLElement} node The node to be selected
+         * @param {Array} selections Array of currently selected nodes
+         */
+            "beforeselect" : true,
+        /**
+         * @event preparedata
+         * Fires on every row to render, to allow you to change the data.
+         * @param {Roo.View} this
+         * @param {Object} data to be rendered (change this)
+         */
+          "preparedata" : true
+          
+          
+        });
 
-Roo.extend(Roo.data.DataProxy, Roo.util.Observable);
 
-    /**
-     * @cfg {void} listeners (Not available) Constructor blocks listeners from being set
-     */
-/*
- * 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.data.MemoryProxy
- * An implementation of Roo.data.DataProxy that simply passes the data specified in its constructor
- * to the Reader when its load method is called.
- * @constructor
- * @param {Object} data The data object which the Reader uses to construct a block of Roo.data.Records.
- */
-Roo.data.MemoryProxy = function(data){
-    if (data.data) {
-        data = data.data;
-    }
-    Roo.data.MemoryProxy.superclass.constructor.call(this);
-    this.data = data;
-};
 
-Roo.extend(Roo.data.MemoryProxy, Roo.data.DataProxy, {
-    /**
-     * Load data from the requested source (in this case an in-memory
-     * data object passed to the constructor), read the data object into
-     * a block of Roo.data.Records using the passed Roo.data.DataReader implementation, and
-     * process that block using the passed callback.
-     * @param {Object} params This parameter is not used by the MemoryProxy class.
-     * @param {Roo.data.DataReader} reader The Reader object which converts the data
-     * object into a block of Roo.data.Records.
-     * @param {Function} callback The function into which to pass the block of Roo.data.records.
-     * The function must be passed <ul>
-     * <li>The Record block object</li>
-     * <li>The "arg" argument from the load function</li>
-     * <li>A boolean success indicator</li>
-     * </ul>
-     * @param {Object} scope The scope in which to call the callback
-     * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
-     */
-    load : function(params, reader, callback, scope, arg){
-        params = params || {};
-        var result;
-        try {
-            result = reader.readRecords(this.data);
-        }catch(e){
-            this.fireEvent("loadexception", this, arg, null, e);
-            callback.call(scope, null, arg, false);
-            return;
-        }
-        callback.call(scope, result, arg, true);
-    },
+    this.el.on({
+        "click": this.onClick,
+        "dblclick": this.onDblClick,
+        "contextmenu": this.onContextMenu,
+        scope:this
+    });
+
+    this.selections = [];
+    this.nodes = [];
+    this.cmp = new Roo.CompositeElementLite([]);
+    if(this.store){
+        this.store = Roo.factory(this.store, Roo.data);
+        this.setStore(this.store, true);
+    }
     
-    // private
-    update : function(params, records){
+    if ( this.footer && this.footer.xtype) {
+           
+         var fctr = this.wrapEl.appendChild(document.createElement("div"));
+        
+        this.footer.dataSource = this.store;
+        this.footer.container = fctr;
+        this.footer = Roo.factory(this.footer, Roo);
+        fctr.insertFirst(this.el);
         
+        // this is a bit insane - as the paging toolbar seems to detach the el..
+//        dom.parentNode.parentNode.parentNode
+         // they get detached?
     }
-});/*
- * 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.data.HttpProxy
- * @extends Roo.data.DataProxy
- * An implementation of {@link Roo.data.DataProxy} that reads a data object from an {@link Roo.data.Connection} object
- * configured to reference a certain URL.<br><br>
- * <p>
- * <em>Note that this class cannot be used to retrieve data from a domain other than the domain
- * from which the running page was served.<br><br>
- * <p>
- * For cross-domain access to remote data, use an {@link Roo.data.ScriptTagProxy}.</em><br><br>
- * <p>
- * Be aware that to enable the browser to parse an XML document, the server must set
- * the Content-Type header in the HTTP response to "text/xml".
- * @constructor
- * @param {Object} conn Connection config options to add to each request (e.g. {url: 'foo.php'} or
- * an {@link Roo.data.Connection} object.  If a Connection config is passed, the singleton {@link Roo.Ajax} object
- * will be used to make the request.
- */
-Roo.data.HttpProxy = function(conn){
-    Roo.data.HttpProxy.superclass.constructor.call(this);
-    // is conn a conn config or a real conn?
-    this.conn = conn;
-    this.useAjax = !conn || !conn.events;
-  
+    
+    
+    Roo.View.superclass.constructor.call(this);
+    
+    
 };
 
-Roo.extend(Roo.data.HttpProxy, Roo.data.DataProxy, {
-    // thse are take from connection...
+Roo.extend(Roo.View, Roo.util.Observable, {
     
-    /**
-     * @cfg {String} url (Optional) The default URL to be used for requests to the server. (defaults to undefined)
+     /**
+     * @cfg {Roo.data.Store} store Data store to load data from.
      */
+    store : false,
+    
     /**
-     * @cfg {Object} extraParams (Optional) An object containing properties which are used as
-     * extra parameters to each request made by this object. (defaults to undefined)
+     * @cfg {String|Roo.Element} el The container element.
      */
+    el : '',
+    
     /**
-     * @cfg {Object} defaultHeaders (Optional) An object containing request headers which are added
-     *  to each request made by this object. (defaults to undefined)
+     * @cfg {String|Roo.Template} tpl The template used by this View 
      */
+    tpl : false,
     /**
-     * @cfg {String} method (Optional) The default HTTP method to be used for requests. (defaults to undefined; if not set but parms are present will use POST, otherwise GET)
+     * @cfg {String} dataName the named area of the template to use as the data area
+     *                          Works with domtemplates roo-name="name"
      */
+    dataName: false,
     /**
-     * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
+     * @cfg {String} selectedClass The css class to add to selected nodes
      */
+    selectedClass : "x-view-selected",
      /**
-     * @cfg {Boolean} autoAbort (Optional) Whether this request should abort any pending requests. (defaults to false)
-     * @type Boolean
+     * @cfg {String} emptyText The empty text to show when nothing is loaded.
      */
-  
-
+    emptyText : "",
+    
     /**
-     * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)
-     * @type Boolean
+     * @cfg {String} text to display on mask (default Loading)
      */
+    mask : false,
     /**
-     * Return the {@link Roo.data.Connection} object being used by this Proxy.
-     * @return {Connection} The Connection object. This object may be used to subscribe to events on
-     * a finer-grained basis than the DataProxy events.
+     * @cfg {Boolean} multiSelect Allow multiple selection
      */
-    getConnection : function(){
-        return this.useAjax ? Roo.Ajax : this.conn;
-    },
-
+    multiSelect : false,
     /**
-     * Load data from the configured {@link Roo.data.Connection}, read the data object into
-     * a block of Roo.data.Records using the passed {@link Roo.data.DataReader} implementation, and
-     * process that block using the passed callback.
-     * @param {Object} params An object containing properties which are to be used as HTTP parameters
-     * for the request to the remote server.
-     * @param {Roo.data.DataReader} reader The Reader object which converts the data
-     * object into a block of Roo.data.Records.
-     * @param {Function} callback The function into which to pass the block of Roo.data.Records.
-     * The function must be passed <ul>
-     * <li>The Record block object</li>
-     * <li>The "arg" argument from the load function</li>
-     * <li>A boolean success indicator</li>
-     * </ul>
-     * @param {Object} scope The scope in which to call the callback
-     * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
+     * @cfg {Boolean} singleSelect Allow single selection
      */
-    load : function(params, reader, callback, scope, arg){
-        if(this.fireEvent("beforeload", this, params) !== false){
-            var  o = {
-                params : params || {},
-                request: {
-                    callback : callback,
-                    scope : scope,
-                    arg : arg
-                },
-                reader: reader,
-                callback : this.loadResponse,
-                scope: this
-            };
-            if(this.useAjax){
-                Roo.applyIf(o, this.conn);
-                if(this.activeRequest){
-                    Roo.Ajax.abort(this.activeRequest);
-                }
-                this.activeRequest = Roo.Ajax.request(o);
-            }else{
-                this.conn.request(o);
-            }
-        }else{
-            callback.call(scope||this, null, arg, false);
-        }
+    singleSelect:  false,
+    
+    /**
+     * @cfg {Boolean} toggleSelect - selecting 
+     */
+    toggleSelect : false,
+    
+    /**
+     * @cfg {Boolean} tickable - selecting 
+     */
+    tickable : false,
+    
+    /**
+     * Returns the element this view is bound to.
+     * @return {Roo.Element}
+     */
+    getEl : function(){
+        return this.wrapEl;
     },
+    
+    
 
-    // private
-    loadResponse : function(o, success, response){
-        delete this.activeRequest;
-        if(!success){
-            this.fireEvent("loadexception", this, o, response);
-            o.request.callback.call(o.request.scope, null, o.request.arg, false);
+    /**
+     * Refreshes the view. - called by datachanged on the store. - do not call directly.
+     */
+    refresh : function(){
+        //Roo.log('refresh');
+        var t = this.tpl;
+        
+        // if we are using something like 'domtemplate', then
+        // the what gets used is:
+        // t.applySubtemplate(NAME, data, wrapping data..)
+        // the outer template then get' applied with
+        //     the store 'extra data'
+        // and the body get's added to the
+        //      roo-name="data" node?
+        //      <span class='roo-tpl-{name}'></span> ?????
+        
+        
+        
+        this.clearSelections();
+        this.el.update("");
+        var html = [];
+        var records = this.store.getRange();
+        if(records.length < 1) {
+            
+            // is this valid??  = should it render a template??
+            
+            this.el.update(this.emptyText);
             return;
         }
-        var result;
-        try {
-            result = o.reader.read(response);
-        }catch(e){
-            this.fireEvent("loadexception", this, o, response, e);
-            o.request.callback.call(o.request.scope, null, o.request.arg, false);
-            return;
+        var el = this.el;
+        if (this.dataName) {
+            this.el.update(t.apply(this.store.meta)); //????
+            el = this.el.child('.roo-tpl-' + this.dataName);
         }
         
-        this.fireEvent("load", this, o, o.request.arg);
-        o.request.callback.call(o.request.scope, result, o.request.arg, true);
+        for(var i = 0, len = records.length; i < len; i++){
+            var data = this.prepareData(records[i].data, i, records[i]);
+            this.fireEvent("preparedata", this, data, i, records[i]);
+            
+            var d = Roo.apply({}, data);
+            
+            if(this.tickable){
+                Roo.apply(d, {'roo-id' : Roo.id()});
+                
+                var _this = this;
+            
+                Roo.each(this.parent.item, function(item){
+                    if(item[_this.parent.valueField] != data[_this.parent.valueField]){
+                        return;
+                    }
+                    Roo.apply(d, {'roo-data-checked' : 'checked'});
+                });
+            }
+            
+            html[html.length] = Roo.util.Format.trim(
+                this.dataName ?
+                    t.applySubtemplate(this.dataName, d, this.store.meta) :
+                    t.apply(d)
+            );
+        }
+        
+        
+        
+        el.update(html.join(""));
+        this.nodes = el.dom.childNodes;
+        this.updateIndexes(0);
     },
+    
 
-    // private
-    update : function(dataSet){
-
+    /**
+     * Function to override to reformat the data that is sent to
+     * the template for each node.
+     * DEPRICATED - use the preparedata event handler.
+     * @param {Array/Object} data The raw data (array of colData for a data model bound view or
+     * a JSON object for an UpdateManager bound view).
+     */
+    prepareData : function(data, index, record)
+    {
+        this.fireEvent("preparedata", this, data, index, record);
+        return data;
     },
 
-    // private
-    updateResponse : function(dataSet){
-
-    }
-});/*
- * 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">
- */
+    onUpdate : function(ds, record){
+        // Roo.log('on update');   
+        this.clearSelections();
+        var index = this.store.indexOf(record);
+        var n = this.nodes[index];
+        this.tpl.insertBefore(n, this.prepareData(record.data, index, record));
+        n.parentNode.removeChild(n);
+        this.updateIndexes(index, index);
+    },
 
-/**
- * @class Roo.data.ScriptTagProxy
- * An implementation of Roo.data.DataProxy that reads a data object from a URL which may be in a domain
- * other than the originating domain of the running page.<br><br>
- * <p>
- * <em>Note that if you are retrieving data from a page that is in a domain that is NOT the same as the originating domain
- * of the running page, you must use this class, rather than DataProxy.</em><br><br>
- * <p>
- * The content passed back from a server resource requested by a ScriptTagProxy is executable JavaScript
- * source code that is used as the source inside a &lt;script> tag.<br><br>
- * <p>
- * In order for the browser to process the returned data, the server must wrap the data object
- * with a call to a callback function, the name of which is passed as a parameter by the ScriptTagProxy.
- * Below is a Java example for a servlet which returns data for either a ScriptTagProxy, or an HttpProxy
- * depending on whether the callback name was passed:
- * <p>
- * <pre><code>
-boolean scriptTag = false;
-String cb = request.getParameter("callback");
-if (cb != null) {
-    scriptTag = true;
-    response.setContentType("text/javascript");
-} else {
-    response.setContentType("application/x-json");
-}
-Writer out = response.getWriter();
-if (scriptTag) {
-    out.write(cb + "(");
-}
-out.print(dataBlock.toJsonString());
-if (scriptTag) {
-    out.write(");");
-}
-</pre></code>
- *
- * @constructor
- * @param {Object} config A configuration object.
- */
-Roo.data.ScriptTagProxy = function(config){
-    Roo.data.ScriptTagProxy.superclass.constructor.call(this);
-    Roo.apply(this, config);
-    this.head = document.getElementsByTagName("head")[0];
-};
+    
+    
+// --------- FIXME     
+    onAdd : function(ds, records, index)
+    {
+        //Roo.log(['on Add', ds, records, index] );        
+        this.clearSelections();
+        if(this.nodes.length == 0){
+            this.refresh();
+            return;
+        }
+        var n = this.nodes[index];
+        for(var i = 0, len = records.length; i < len; i++){
+            var d = this.prepareData(records[i].data, i, records[i]);
+            if(n){
+                this.tpl.insertBefore(n, d);
+            }else{
+                
+                this.tpl.append(this.el, d);
+            }
+        }
+        this.updateIndexes(index);
+    },
 
-Roo.data.ScriptTagProxy.TRANS_ID = 1000;
+    onRemove : function(ds, record, index){
+       // Roo.log('onRemove');
+        this.clearSelections();
+        var el = this.dataName  ?
+            this.el.child('.roo-tpl-' + this.dataName) :
+            this.el; 
+        
+        el.dom.removeChild(this.nodes[index]);
+        this.updateIndexes(index);
+    },
 
-Roo.extend(Roo.data.ScriptTagProxy, Roo.data.DataProxy, {
     /**
-     * @cfg {String} url The URL from which to request the data object.
-     */
-    /**
-     * @cfg {Number} timeout (Optional) The number of milliseconds to wait for a response. Defaults to 30 seconds.
+     * Refresh an individual node.
+     * @param {Number} index
      */
-    timeout : 30000,
+    refreshNode : function(index){
+        this.onUpdate(this.store, this.store.getAt(index));
+    },
+
+    updateIndexes : function(startIndex, endIndex){
+        var ns = this.nodes;
+        startIndex = startIndex || 0;
+        endIndex = endIndex || ns.length - 1;
+        for(var i = startIndex; i <= endIndex; i++){
+            ns[i].nodeIndex = i;
+        }
+    },
+
     /**
-     * @cfg {String} callbackParam (Optional) The name of the parameter to pass to the server which tells
-     * the server the name of the callback function set up by the load call to process the returned data object.
-     * Defaults to "callback".<p>The server-side processing must read this parameter value, and generate
-     * javascript output which calls this named function passing the data object as its only parameter.
+     * Changes the data store this view uses and refresh the view.
+     * @param {Store} store
      */
-    callbackParam : "callback",
+    setStore : function(store, initial){
+        if(!initial && this.store){
+            this.store.un("datachanged", this.refresh);
+            this.store.un("add", this.onAdd);
+            this.store.un("remove", this.onRemove);
+            this.store.un("update", this.onUpdate);
+            this.store.un("clear", this.refresh);
+            this.store.un("beforeload", this.onBeforeLoad);
+            this.store.un("load", this.onLoad);
+            this.store.un("loadexception", this.onLoad);
+        }
+        if(store){
+          
+            store.on("datachanged", this.refresh, this);
+            store.on("add", this.onAdd, this);
+            store.on("remove", this.onRemove, this);
+            store.on("update", this.onUpdate, this);
+            store.on("clear", this.refresh, this);
+            store.on("beforeload", this.onBeforeLoad, this);
+            store.on("load", this.onLoad, this);
+            store.on("loadexception", this.onLoad, this);
+        }
+        
+        if(store){
+            this.refresh();
+        }
+    },
     /**
-     *  @cfg {Boolean} nocache (Optional) Defaults to true. Disable cacheing by adding a unique parameter
-     * name to the request.
+     * onbeforeLoad - masks the loading area.
+     *
      */
-    nocache : true,
+    onBeforeLoad : function(store,opts)
+    {
+         //Roo.log('onBeforeLoad');   
+        if (!opts.add) {
+            this.el.update("");
+        }
+        this.el.mask(this.mask ? this.mask : "Loading" ); 
+    },
+    onLoad : function ()
+    {
+        this.el.unmask();
+    },
+    
 
     /**
-     * Load data from the configured URL, read the data object into
-     * a block of Roo.data.Records using the passed Roo.data.DataReader implementation, and
-     * process that block using the passed callback.
-     * @param {Object} params An object containing properties which are to be used as HTTP parameters
-     * for the request to the remote server.
-     * @param {Roo.data.DataReader} reader The Reader object which converts the data
-     * object into a block of Roo.data.Records.
-     * @param {Function} callback The function into which to pass the block of Roo.data.Records.
-     * The function must be passed <ul>
-     * <li>The Record block object</li>
-     * <li>The "arg" argument from the load function</li>
-     * <li>A boolean success indicator</li>
-     * </ul>
-     * @param {Object} scope The scope in which to call the callback
-     * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
+     * Returns the template node the passed child belongs to or null if it doesn't belong to one.
+     * @param {HTMLElement} node
+     * @return {HTMLElement} The template node
      */
-    load : function(params, reader, callback, scope, arg){
-        if(this.fireEvent("beforeload", this, params) !== false){
-
-            var p = Roo.urlEncode(Roo.apply(params, this.extraParams));
-
-            var url = this.url;
-            url += (url.indexOf("?") != -1 ? "&" : "?") + p;
-            if(this.nocache){
-                url += "&_dc=" + (new Date().getTime());
+    findItemFromChild : function(node){
+        var el = this.dataName  ?
+            this.el.child('.roo-tpl-' + this.dataName,true) :
+            this.el.dom; 
+        
+        if(!node || node.parentNode == el){
+		    return node;
+	    }
+	    var p = node.parentNode;
+	    while(p && p != el){
+            if(p.parentNode == el){
+            	return p;
             }
-            var transId = ++Roo.data.ScriptTagProxy.TRANS_ID;
-            var trans = {
-                id : transId,
-                cb : "stcCallback"+transId,
-                scriptId : "stcScript"+transId,
-                params : params,
-                arg : arg,
-                url : url,
-                callback : callback,
-                scope : scope,
-                reader : reader
-            };
-            var conn = this;
-
-            window[trans.cb] = function(o){
-                conn.handleResponse(o, trans);
-            };
-
-            url += String.format("&{0}={1}", this.callbackParam, trans.cb);
+            p = p.parentNode;
+        }
+	    return null;
+    },
 
-            if(this.autoAbort !== false){
-                this.abort();
+    /** @ignore */
+    onClick : function(e){
+        var item = this.findItemFromChild(e.getTarget());
+        if(item){
+            var index = this.indexOf(item);
+            if(this.onItemClick(item, index, e) !== false){
+                this.fireEvent("click", this, index, item, e);
             }
-
-            trans.timeoutId = this.handleFailure.defer(this.timeout, this, [trans]);
-
-            var script = document.createElement("script");
-            script.setAttribute("src", url);
-            script.setAttribute("type", "text/javascript");
-            script.setAttribute("id", trans.scriptId);
-            this.head.appendChild(script);
-
-            this.trans = trans;
         }else{
-            callback.call(scope||this, null, arg, false);
+            this.clearSelections();
         }
     },
 
-    // private
-    isLoading : function(){
-        return this.trans ? true : false;
-    },
-
-    /**
-     * Abort the current server request.
-     */
-    abort : function(){
-        if(this.isLoading()){
-            this.destroyTrans(this.trans);
+    /** @ignore */
+    onContextMenu : function(e){
+        var item = this.findItemFromChild(e.getTarget());
+        if(item){
+            this.fireEvent("contextmenu", this, this.indexOf(item), item, e);
         }
     },
 
-    // private
-    destroyTrans : function(trans, isLoaded){
-        this.head.removeChild(document.getElementById(trans.scriptId));
-        clearTimeout(trans.timeoutId);
-        if(isLoaded){
-            window[trans.cb] = undefined;
-            try{
-                delete window[trans.cb];
-            }catch(e){}
-        }else{
-            // if hasn't been loaded, wait for load to remove it to prevent script error
-            window[trans.cb] = function(){
-                window[trans.cb] = undefined;
-                try{
-                    delete window[trans.cb];
-                }catch(e){}
-            };
+    /** @ignore */
+    onDblClick : function(e){
+        var item = this.findItemFromChild(e.getTarget());
+        if(item){
+            this.fireEvent("dblclick", this, this.indexOf(item), item, e);
         }
     },
 
-    // private
-    handleResponse : function(o, trans){
-        this.trans = false;
-        this.destroyTrans(trans, true);
-        var result;
-        try {
-            result = trans.reader.readRecords(o);
-        }catch(e){
-            this.fireEvent("loadexception", this, o, trans.arg, e);
-            trans.callback.call(trans.scope||window, null, trans.arg, false);
-            return;
+    onItemClick : function(item, index, e)
+    {
+        if(this.fireEvent("beforeclick", this, index, item, e) === false){
+            return false;
         }
-        this.fireEvent("load", this, o, trans.arg);
-        trans.callback.call(trans.scope||window, result, trans.arg, true);
+        if (this.toggleSelect) {
+            var m = this.isSelected(item) ? 'unselect' : 'select';
+            //Roo.log(m);
+            var _t = this;
+            _t[m](item, true, false);
+            return true;
+        }
+        if(this.multiSelect || this.singleSelect){
+            if(this.multiSelect && e.shiftKey && this.lastSelection){
+                this.select(this.getNodes(this.indexOf(this.lastSelection), index), false);
+            }else{
+                this.select(item, this.multiSelect && e.ctrlKey);
+                this.lastSelection = item;
+            }
+            
+            if(!this.tickable){
+                e.preventDefault();
+            }
+            
+        }
+        return true;
     },
 
-    // private
-    handleFailure : function(trans){
-        this.trans = false;
-        this.destroyTrans(trans, false);
-        this.fireEvent("loadexception", this, null, trans.arg);
-        trans.callback.call(trans.scope||window, null, trans.arg, 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">
- */
+    /**
+     * Get the number of selected nodes.
+     * @return {Number}
+     */
+    getSelectionCount : function(){
+        return this.selections.length;
+    },
 
-/**
- * @class Roo.data.JsonReader
- * @extends Roo.data.DataReader
- * Data reader class to create an Array of Roo.data.Record objects from a JSON response
- * based on mappings in a provided Roo.data.Record constructor.
- * 
- * The default behaviour of a store is to send ?_requestMeta=1, unless the class has recieved 'metaData' property
- * in the reply previously. 
- * 
- * <p>
- * Example code:
- * <pre><code>
-var RecordDef = Roo.data.Record.create([
-    {name: 'name', mapping: 'name'},     // "mapping" property not needed if it's the same as "name"
-    {name: 'occupation'}                 // This field will use "occupation" as the mapping.
-]);
-var myReader = new Roo.data.JsonReader({
-    totalProperty: "results",    // The property which contains the total dataset size (optional)
-    root: "rows",                // The property which contains an Array of row objects
-    id: "id"                     // The property within each row object that provides an ID for the record (optional)
-}, RecordDef);
-</code></pre>
- * <p>
- * This would consume a JSON file like this:
- * <pre><code>
-{ 'results': 2, 'rows': [
-    { 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
-    { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ]
-}
-</code></pre>
- * @cfg {String} totalProperty Name of the property from which to retrieve the total number of records
- * in the dataset. This is only needed if the whole dataset is not passed in one go, but is being
- * paged from the remote server.
- * @cfg {String} successProperty Name of the property from which to retrieve the success attribute used by forms.
- * @cfg {String} root name of the property which contains the Array of row objects.
- * @cfg {String} id Name of the property within a row object that contains a record identifier value.
- * @cfg {Array} fields Array of field definition objects
- * @constructor
- * Create a new JsonReader
- * @param {Object} meta Metadata configuration options
- * @param {Object} recordType Either an Array of field definition objects,
- * or an {@link Roo.data.Record} object created using {@link Roo.data.Record#create}.
- */
-Roo.data.JsonReader = function(meta, recordType){
-    
-    meta = meta || {};
-    // set some defaults:
-    Roo.applyIf(meta, {
-        totalProperty: 'total',
-        successProperty : 'success',
-        root : 'data',
-        id : 'id'
-    });
-    
-    Roo.data.JsonReader.superclass.constructor.call(this, meta, recordType||meta.fields);
-};
-Roo.extend(Roo.data.JsonReader, Roo.data.DataReader, {
-    
     /**
-     * @prop {Boolean} metaFromRemote  - if the meta data was loaded from the remote source.
-     * Used by Store query builder to append _requestMeta to params.
-     * 
+     * Get the currently selected nodes.
+     * @return {Array} An array of HTMLElements
      */
-    metaFromRemote : false,
+    getSelectedNodes : function(){
+        return this.selections;
+    },
+
     /**
-     * This method is only used by a DataProxy which has retrieved data from a remote server.
-     * @param {Object} response The XHR object which contains the JSON data in its responseText.
-     * @return {Object} data A data block which is used by an Roo.data.Store object as
-     * a cache of Roo.data.Records.
+     * Get the indexes of the selected nodes.
+     * @return {Array}
      */
-    read : function(response){
-        var json = response.responseText;
-       
-        var o = /* eval:var:o */ eval("("+json+")");
-        if(!o) {
-            throw {message: "JsonReader.read: Json object not found"};
-        }
-        
-        if(o.metaData){
-            
-            delete this.ef;
-            this.metaFromRemote = true;
-            this.meta = o.metaData;
-            this.recordType = Roo.data.Record.create(o.metaData.fields);
-            this.onMetaChange(this.meta, this.recordType, o);
+    getSelectedIndexes : function(){
+        var indexes = [], s = this.selections;
+        for(var i = 0, len = s.length; i < len; i++){
+            indexes.push(s[i].nodeIndex);
         }
-        return this.readRecords(o);
+        return indexes;
     },
 
-    // private function a store will implement
-    onMetaChange : function(meta, recordType, o){
-
+    /**
+     * Clear all selections
+     * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange event
+     */
+    clearSelections : function(suppressEvent){
+        if(this.nodes && (this.multiSelect || this.singleSelect) && this.selections.length > 0){
+            this.cmp.elements = this.selections;
+            this.cmp.removeClass(this.selectedClass);
+            this.selections = [];
+            if(!suppressEvent){
+                this.fireEvent("selectionchange", this, this.selections);
+            }
+        }
     },
 
     /**
-	 * @ignore
-	 */
-    simpleAccess: function(obj, subsc) {
-    	return obj[subsc];
+     * Returns true if the passed node is selected
+     * @param {HTMLElement/Number} node The node or node index
+     * @return {Boolean}
+     */
+    isSelected : function(node){
+        var s = this.selections;
+        if(s.length < 1){
+            return false;
+        }
+        node = this.getNode(node);
+        return s.indexOf(node) !== -1;
     },
 
-	/**
-	 * @ignore
-	 */
-    getJsonAccessor: function(){
-        var re = /[\[\.]/;
-        return function(expr) {
-            try {
-                return(re.test(expr))
-                    ? new Function("obj", "return obj." + expr)
-                    : function(obj){
-                        return obj[expr];
-                    };
-            } catch(e){}
-            return Roo.emptyFn;
-        };
-    }(),
-
     /**
-     * Create a data block containing Roo.data.Records from an XML document.
-     * @param {Object} o An object which contains an Array of row objects in the property specified
-     * in the config as 'root, and optionally a property, specified in the config as 'totalProperty'
-     * which contains the total size of the dataset.
-     * @return {Object} data A data block which is used by an Roo.data.Store object as
-     * a cache of Roo.data.Records.
+     * Selects nodes.
+     * @param {Array/HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node, id of a template node or an array of any of those to select
+     * @param {Boolean} keepExisting (optional) true to keep existing selections
+     * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
      */
-    readRecords : function(o){
-        /**
-         * After any data loads, the raw JSON data is available for further custom processing.
-         * @type Object
-         */
-        this.o = o;
-        var s = this.meta, Record = this.recordType,
-            f = Record ? Record.prototype.fields : null, fi = f ? f.items : [], fl = f ? f.length : 0;
-
-//      Generate extraction functions for the totalProperty, the root, the id, and for each field
-        if (!this.ef) {
-            if(s.totalProperty) {
-	            this.getTotal = this.getJsonAccessor(s.totalProperty);
-	        }
-	        if(s.successProperty) {
-	            this.getSuccess = this.getJsonAccessor(s.successProperty);
-	        }
-	        this.getRoot = s.root ? this.getJsonAccessor(s.root) : function(p){return p;};
-	        if (s.id) {
-	        	var g = this.getJsonAccessor(s.id);
-	        	this.getId = function(rec) {
-	        		var r = g(rec);  
-		        	return (r === undefined || r === "") ? null : r;
-	        	};
-	        } else {
-	        	this.getId = function(){return null;};
-	        }
-            this.ef = [];
-            for(var jj = 0; jj < fl; jj++){
-                f = fi[jj];
-                var map = (f.mapping !== undefined && f.mapping !== null) ? f.mapping : f.name;
-                this.ef[jj] = this.getJsonAccessor(map);
+    select : function(nodeInfo, keepExisting, suppressEvent){
+        if(nodeInfo instanceof Array){
+            if(!keepExisting){
+                this.clearSelections(true);
             }
+            for(var i = 0, len = nodeInfo.length; i < len; i++){
+                this.select(nodeInfo[i], true, true);
+            }
+            return;
+        } 
+        var node = this.getNode(nodeInfo);
+        if(!node || this.isSelected(node)){
+            return; // already selected.
         }
-
-    	var root = this.getRoot(o), c = root.length, totalRecords = c, success = true;
-    	if(s.totalProperty){
-            var vt = parseInt(this.getTotal(o), 10);
-            if(!isNaN(vt)){
-                totalRecords = vt;
+        if(!keepExisting){
+            this.clearSelections(true);
+        }
+        
+        if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
+            Roo.fly(node).addClass(this.selectedClass);
+            this.selections.push(node);
+            if(!suppressEvent){
+                this.fireEvent("selectionchange", this, this.selections);
             }
         }
-        if(s.successProperty){
-            var vs = this.getSuccess(o);
-            if(vs === false || vs === 'false'){
-                success = false;
+        
+        
+    },
+      /**
+     * Unselects nodes.
+     * @param {Array/HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node, id of a template node or an array of any of those to select
+     * @param {Boolean} keepExisting (optional) true IGNORED (for campatibility with select)
+     * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
+     */
+    unselect : function(nodeInfo, keepExisting, suppressEvent)
+    {
+        if(nodeInfo instanceof Array){
+            Roo.each(this.selections, function(s) {
+                this.unselect(s, nodeInfo);
+            }, this);
+            return;
+        }
+        var node = this.getNode(nodeInfo);
+        if(!node || !this.isSelected(node)){
+            //Roo.log("not selected");
+            return; // not selected.
+        }
+        // fireevent???
+        var ns = [];
+        Roo.each(this.selections, function(s) {
+            if (s == node ) {
+                Roo.fly(node).removeClass(this.selectedClass);
+
+                return;
             }
+            ns.push(s);
+        },this);
+        
+        this.selections= ns;
+        this.fireEvent("selectionchange", this, this.selections);
+    },
+
+    /**
+     * Gets a template node.
+     * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
+     * @return {HTMLElement} The node or null if it wasn't found
+     */
+    getNode : function(nodeInfo){
+        if(typeof nodeInfo == "string"){
+            return document.getElementById(nodeInfo);
+        }else if(typeof nodeInfo == "number"){
+            return this.nodes[nodeInfo];
         }
-        var records = [];
-        for(var i = 0; i < c; i++){
-                var n = root[i];
-            var values = {};
-            var id = this.getId(n);
-            for(var j = 0; j < fl; j++){
-                f = fi[j];
-            var v = this.ef[j](n);
-            if (!f.convert) {
-                Roo.log('missing convert for ' + f.name);
-                Roo.log(f);
-                continue;
+        return nodeInfo;
+    },
+
+    /**
+     * Gets a range template nodes.
+     * @param {Number} startIndex
+     * @param {Number} endIndex
+     * @return {Array} An array of nodes
+     */
+    getNodes : function(start, end){
+        var ns = this.nodes;
+        start = start || 0;
+        end = typeof end == "undefined" ? ns.length - 1 : end;
+        var nodes = [];
+        if(start <= end){
+            for(var i = start; i <= end; i++){
+                nodes.push(ns[i]);
             }
-            values[f.name] = f.convert((v !== undefined) ? v : f.defaultValue);
+        } else{
+            for(var i = start; i >= end; i--){
+                nodes.push(ns[i]);
             }
-            var record = new Record(values, id);
-            record.json = n;
-            records[i] = record;
         }
-        return {
-            raw : o,
-            success : success,
-            records : records,
-            totalRecords : totalRecords
-        };
+        return nodes;
+    },
+
+    /**
+     * Finds the index of the passed node
+     * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
+     * @return {Number} The index of the node or -1
+     */
+    indexOf : function(node){
+        node = this.getNode(node);
+        if(typeof node.nodeIndex == "number"){
+            return node.nodeIndex;
+        }
+        var ns = this.nodes;
+        for(var i = 0, len = ns.length; i < len; i++){
+            if(ns[i] == node){
+                return i;
+            }
+        }
+        return -1;
     }
-});/*
+});
+/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -6348,125 +4346,310 @@ Roo.extend(Roo.data.JsonReader, Roo.data.DataReader, {
  */
 
 /**
- * @class Roo.data.XmlReader
- * @extends Roo.data.DataReader
- * Data reader class to create an Array of {@link Roo.data.Record} objects from an XML document
- * based on mappings in a provided Roo.data.Record constructor.<br><br>
- * <p>
- * <em>Note that in order for the browser to parse a returned XML document, the Content-Type
- * header in the HTTP response must be set to "text/xml".</em>
- * <p>
- * Example code:
- * <pre><code>
-var RecordDef = Roo.data.Record.create([
-   {name: 'name', mapping: 'name'},     // "mapping" property not needed if it's the same as "name"
-   {name: 'occupation'}                 // This field will use "occupation" as the mapping.
-]);
-var myReader = new Roo.data.XmlReader({
-   totalRecords: "results", // The element which contains the total dataset size (optional)
-   record: "row",           // The repeated element which contains row information
-   id: "id"                 // The element within the row that provides an ID for the record (optional)
-}, RecordDef);
-</code></pre>
- * <p>
- * This would consume an XML file like this:
- * <pre><code>
-&lt;?xml?>
-&lt;dataset>
- &lt;results>2&lt;/results>
- &lt;row>
-   &lt;id>1&lt;/id>
-   &lt;name>Bill&lt;/name>
-   &lt;occupation>Gardener&lt;/occupation>
- &lt;/row>
- &lt;row>
-   &lt;id>2&lt;/id>
-   &lt;name>Ben&lt;/name>
-   &lt;occupation>Horticulturalist&lt;/occupation>
- &lt;/row>
-&lt;/dataset>
+ * @class Roo.JsonView
+ * @extends Roo.View
+ * Shortcut class to create a JSON + {@link Roo.UpdateManager} template view. Usage:
+<pre><code>
+var view = new Roo.JsonView({
+    container: "my-element",
+    tpl: '&lt;div id="{id}"&gt;{foo} - {bar}&lt;/div&gt;', // auto create template
+    multiSelect: true, 
+    jsonRoot: "data" 
+});
+
+// listen for node click?
+view.on("click", function(vw, index, node, e){
+    alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
+});
+
+// direct load of JSON data
+view.load("foobar.php");
+
+// Example from my blog list
+var tpl = new Roo.Template(
+    '&lt;div class="entry"&gt;' +
+    '&lt;a class="entry-title" href="{link}"&gt;{title}&lt;/a&gt;' +
+    "&lt;h4&gt;{date} by {author} | {comments} Comments&lt;/h4&gt;{description}" +
+    "&lt;/div&gt;&lt;hr /&gt;"
+);
+
+var moreView = new Roo.JsonView({
+    container :  "entry-list", 
+    template : tpl,
+    jsonRoot: "posts"
+});
+moreView.on("beforerender", this.sortEntries, this);
+moreView.load({
+    url: "/blog/get-posts.php",
+    params: "allposts=true",
+    text: "Loading Blog Entries..."
+});
 </code></pre>
- * @cfg {String} totalRecords The DomQuery path from which to retrieve the total number of records
- * in the dataset. This is only needed if the whole dataset is not passed in one go, but is being
- * paged from the remote server.
- * @cfg {String} record The DomQuery path to the repeated element which contains record information.
- * @cfg {String} success The DomQuery path to the success attribute used by forms.
- * @cfg {String} id The DomQuery path relative from the record element to the element that contains
- * a record identifier value.
+* 
+* Note: old code is supported with arguments : (container, template, config)
+* 
+* 
  * @constructor
- * Create a new XmlReader
- * @param {Object} meta Metadata configuration options
- * @param {Mixed} recordType The definition of the data record type to produce.  This can be either a valid
- * Record subclass created with {@link Roo.data.Record#create}, or an array of objects with which to call
- * Roo.data.Record.create.  See the {@link Roo.data.Record} class for more details.
+ * Create a new JsonView
+ * 
+ * @param {Object} config The config object
+ * 
  */
-Roo.data.XmlReader = function(meta, recordType){
-    meta = meta || {};
-    Roo.data.XmlReader.superclass.constructor.call(this, meta, recordType||meta.fields);
+Roo.JsonView = function(config, depreciated_tpl, depreciated_config){
+    
+    
+    Roo.JsonView.superclass.constructor.call(this, config, depreciated_tpl, depreciated_config);
+
+    var um = this.el.getUpdateManager();
+    um.setRenderer(this);
+    um.on("update", this.onLoad, this);
+    um.on("failure", this.onLoadException, this);
+
+    /**
+     * @event beforerender
+     * Fires before rendering of the downloaded JSON data.
+     * @param {Roo.JsonView} this
+     * @param {Object} data The JSON data loaded
+     */
+    /**
+     * @event load
+     * Fires when data is loaded.
+     * @param {Roo.JsonView} this
+     * @param {Object} data The JSON data loaded
+     * @param {Object} response The raw Connect response object
+     */
+    /**
+     * @event loadexception
+     * Fires when loading fails.
+     * @param {Roo.JsonView} this
+     * @param {Object} response The raw Connect response object
+     */
+    this.addEvents({
+        'beforerender' : true,
+        'load' : true,
+        'loadexception' : true
+    });
 };
-Roo.extend(Roo.data.XmlReader, Roo.data.DataReader, {
+Roo.extend(Roo.JsonView, Roo.View, {
     /**
-     * This method is only used by a DataProxy which has retrieved data from a remote server.
-	 * @param {Object} response The XHR object which contains the parsed XML document.  The response is expected
-	 * to contain a method called 'responseXML' that returns an XML document object.
-     * @return {Object} records A data block which is used by an {@link Roo.data.Store} as
-     * a cache of Roo.data.Records.
+     * @type {String} The root property in the loaded JSON object that contains the data
      */
-    read : function(response){
-        var doc = response.responseXML;
-        if(!doc) {
-            throw {message: "XmlReader.read: XML Document not available"};
+    jsonRoot : "",
+
+    /**
+     * Refreshes the view.
+     */
+    refresh : function(){
+        this.clearSelections();
+        this.el.update("");
+        var html = [];
+        var o = this.jsonData;
+        if(o && o.length > 0){
+            for(var i = 0, len = o.length; i < len; i++){
+                var data = this.prepareData(o[i], i, o);
+                html[html.length] = this.tpl.apply(data);
+            }
+        }else{
+            html.push(this.emptyText);
         }
-        return this.readRecords(doc);
+        this.el.update(html.join(""));
+        this.nodes = this.el.dom.childNodes;
+        this.updateIndexes(0);
     },
 
     /**
-     * Create a data block containing Roo.data.Records from an XML document.
-	 * @param {Object} doc A parsed XML document.
-     * @return {Object} records A data block which is used by an {@link Roo.data.Store} as
-     * a cache of Roo.data.Records.
+     * Performs an async HTTP request, and loads the JSON from the response. If <i>params</i> are specified it uses POST, otherwise it uses GET.
+     * @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>
+     view.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 respectively shorthand for <i>disableCaching</i>, <i>indicatorText</i>, and <i>loadScripts</i> and are used to set their associated property on this 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)
+     * @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.
      */
-    readRecords : function(doc){
+    load : function(){
+        var um = this.el.getUpdateManager();
+        um.update.apply(um, arguments);
+    },
+
+    // note - render is a standard framework call...
+    // using it for the response is really flaky... - it's called by UpdateManager normally, except when called by the XComponent/addXtype.
+    render : function(el, response){
+        
+        this.clearSelections();
+        this.el.update("");
+        var o;
+        try{
+            if (response != '') {
+                o = Roo.util.JSON.decode(response.responseText);
+                if(this.jsonRoot){
+                    
+                    o = o[this.jsonRoot];
+                }
+            }
+        } catch(e){
+        }
         /**
-         * After any data loads/reads, the raw XML Document is available for further custom processing.
-         * @type XMLDocument
+         * The current JSON data or null
          */
-        this.xmlData = doc;
-        var root = doc.documentElement || doc;
-    	var q = Roo.DomQuery;
-    	var recordType = this.recordType, fields = recordType.prototype.fields;
-    	var sid = this.meta.id;
-    	var totalRecords = 0, success = true;
-    	if(this.meta.totalRecords){
-    	    totalRecords = q.selectNumber(this.meta.totalRecords, root, 0);
-    	}
-        
-        if(this.meta.success){
-            var sv = q.selectValue(this.meta.success, root, true);
-            success = sv !== false && sv !== 'false';
-    	}
-    	var records = [];
-    	var ns = q.select(this.meta.record, root);
-        for(var i = 0, len = ns.length; i < len; i++) {
-	        var n = ns[i];
-	        var values = {};
-	        var id = sid ? q.selectValue(sid, n) : undefined;
-	        for(var j = 0, jlen = fields.length; j < jlen; j++){
-	            var f = fields.items[j];
-                var v = q.selectValue(f.mapping || f.name, n, f.defaultValue);
-	            v = f.convert(v);
-	            values[f.name] = v;
-	        }
-	        var record = new recordType(values, id);
-	        record.node = n;
-	        records[records.length] = record;
-	    }
+        this.jsonData = o;
+        this.beforeRender();
+        this.refresh();
+    },
 
-	    return {
-	        success : success,
-	        records : records,
-	        totalRecords : totalRecords || records.length
-	    };
+/**
+ * Get the number of records in the current JSON dataset
+ * @return {Number}
+ */
+    getCount : function(){
+        return this.jsonData ? this.jsonData.length : 0;
+    },
+
+/**
+ * Returns the JSON object for the specified node(s)
+ * @param {HTMLElement/Array} node The node or an array of nodes
+ * @return {Object/Array} If you pass in an array, you get an array back, otherwise
+ * you get the JSON object for the node
+ */
+    getNodeData : function(node){
+        if(node instanceof Array){
+            var data = [];
+            for(var i = 0, len = node.length; i < len; i++){
+                data.push(this.getNodeData(node[i]));
+            }
+            return data;
+        }
+        return this.jsonData[this.indexOf(node)] || null;
+    },
+
+    beforeRender : function(){
+        this.snapshot = this.jsonData;
+        if(this.sortInfo){
+            this.sort.apply(this, this.sortInfo);
+        }
+        this.fireEvent("beforerender", this, this.jsonData);
+    },
+
+    onLoad : function(el, o){
+        this.fireEvent("load", this, this.jsonData, o);
+    },
+
+    onLoadException : function(el, o){
+        this.fireEvent("loadexception", this, o);
+    },
+
+/**
+ * Filter the data by a specific property.
+ * @param {String} property A property on your JSON objects
+ * @param {String/RegExp} value Either string that the property values
+ * should start with, or a RegExp to test against the property
+ */
+    filter : function(property, value){
+        if(this.jsonData){
+            var data = [];
+            var ss = this.snapshot;
+            if(typeof value == "string"){
+                var vlen = value.length;
+                if(vlen == 0){
+                    this.clearFilter();
+                    return;
+                }
+                value = value.toLowerCase();
+                for(var i = 0, len = ss.length; i < len; i++){
+                    var o = ss[i];
+                    if(o[property].substr(0, vlen).toLowerCase() == value){
+                        data.push(o);
+                    }
+                }
+            } else if(value.exec){ // regex?
+                for(var i = 0, len = ss.length; i < len; i++){
+                    var o = ss[i];
+                    if(value.test(o[property])){
+                        data.push(o);
+                    }
+                }
+            } else{
+                return;
+            }
+            this.jsonData = data;
+            this.refresh();
+        }
+    },
+
+/**
+ * Filter by a function. The passed function will be called with each
+ * object in the current dataset. If the function returns true the value is kept,
+ * otherwise it is filtered.
+ * @param {Function} fn
+ * @param {Object} scope (optional) The scope of the function (defaults to this JsonView)
+ */
+    filterBy : function(fn, scope){
+        if(this.jsonData){
+            var data = [];
+            var ss = this.snapshot;
+            for(var i = 0, len = ss.length; i < len; i++){
+                var o = ss[i];
+                if(fn.call(scope || this, o)){
+                    data.push(o);
+                }
+            }
+            this.jsonData = data;
+            this.refresh();
+        }
+    },
+
+/**
+ * Clears the current filter.
+ */
+    clearFilter : function(){
+        if(this.snapshot && this.jsonData != this.snapshot){
+            this.jsonData = this.snapshot;
+            this.refresh();
+        }
+    },
+
+
+/**
+ * Sorts the data for this view and refreshes it.
+ * @param {String} property A property on your JSON objects to sort on
+ * @param {String} direction (optional) "desc" or "asc" (defaults to "asc")
+ * @param {Function} sortType (optional) A function to call to convert the data to a sortable value.
+ */
+    sort : function(property, dir, sortType){
+        this.sortInfo = Array.prototype.slice.call(arguments, 0);
+        if(this.jsonData){
+            var p = property;
+            var dsc = dir && dir.toLowerCase() == "desc";
+            var f = function(o1, o2){
+                var v1 = sortType ? sortType(o1[p]) : o1[p];
+                var v2 = sortType ? sortType(o2[p]) : o2[p];
+                ;
+                if(v1 < v2){
+                    return dsc ? +1 : -1;
+                } else if(v1 > v2){
+                    return dsc ? -1 : +1;
+                } else{
+                    return 0;
+                }
+            };
+            this.jsonData.sort(f);
+            this.refresh();
+            if(this.jsonData != this.snapshot){
+                this.snapshot.sort(f);
+            }
+        }
     }
 });/*
  * Based on:
@@ -6478,74 +4661,142 @@ Roo.extend(Roo.data.XmlReader, Roo.data.DataReader, {
  * Fork - LGPL
  * <script type="text/javascript">
  */
+ 
 
 /**
- * @class Roo.data.ArrayReader
- * @extends Roo.data.DataReader
- * Data reader class to create an Array of Roo.data.Record objects from an Array.
- * Each element of that Array represents a row of data fields. The
- * fields are pulled into a Record object using as a subscript, the <em>mapping</em> property
- * of the field definition if it exists, or the field's ordinal position in the definition.<br>
- * <p>
- * Example code:.
+ * @class Roo.ColorPalette
+ * @extends Roo.Component
+ * Simple color palette class for choosing colors.  The palette can be rendered to any container.<br />
+ * Here's an example of typical usage:
  * <pre><code>
-var RecordDef = Roo.data.Record.create([
-    {name: 'name', mapping: 1},         // "mapping" only needed if an "id" field is present which
-    {name: 'occupation', mapping: 2}    // precludes using the ordinal position as the index.
-]);
-var myReader = new Roo.data.ArrayReader({
-    id: 0                     // The subscript within row Array that provides an ID for the Record (optional)
-}, RecordDef);
+var cp = new Roo.ColorPalette({value:'993300'});  // initial selected color
+cp.render('my-div');
+
+cp.on('select', function(palette, selColor){
+    // do something with selColor
+});
 </code></pre>
- * <p>
- * This would consume an Array like this:
- * <pre><code>
-[ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]
-  </code></pre>
- * @cfg {String} id (optional) The subscript within row Array that provides an ID for the Record
  * @constructor
- * Create a new JsonReader
- * @param {Object} meta Metadata configuration options.
- * @param {Object} recordType Either an Array of field definition objects
- * as specified to {@link Roo.data.Record#create},
- * or an {@link Roo.data.Record} object
- * created using {@link Roo.data.Record#create}.
+ * Create a new ColorPalette
+ * @param {Object} config The config object
  */
-Roo.data.ArrayReader = function(meta, recordType){
-    Roo.data.ArrayReader.superclass.constructor.call(this, meta, recordType);
+Roo.ColorPalette = function(config){
+    Roo.ColorPalette.superclass.constructor.call(this, config);
+    this.addEvents({
+        /**
+	     * @event select
+	     * Fires when a color is selected
+	     * @param {ColorPalette} this
+	     * @param {String} color The 6-digit color hex code (without the # symbol)
+	     */
+        select: true
+    });
+
+    if(this.handler){
+        this.on("select", this.handler, this.scope, true);
+    }
 };
+Roo.extend(Roo.ColorPalette, Roo.Component, {
+    /**
+     * @cfg {String} itemCls
+     * The CSS class to apply to the containing element (defaults to "x-color-palette")
+     */
+    itemCls : "x-color-palette",
+    /**
+     * @cfg {String} value
+     * The initial color to highlight (should be a valid 6-digit color hex code without the # symbol).  Note that
+     * the hex codes are case-sensitive.
+     */
+    value : null,
+    clickEvent:'click',
+    // private
+    ctype: "Roo.ColorPalette",
 
-Roo.extend(Roo.data.ArrayReader, Roo.data.JsonReader, {
     /**
-     * Create a data block containing Roo.data.Records from an XML document.
-     * @param {Object} o An Array of row objects which represents the dataset.
-     * @return {Object} data A data block which is used by an Roo.data.Store object as
-     * a cache of Roo.data.Records.
+     * @cfg {Boolean} allowReselect If set to true then reselecting a color that is already selected fires the selection event
      */
-    readRecords : function(o){
-        var sid = this.meta ? this.meta.id : null;
-    	var recordType = this.recordType, fields = recordType.prototype.fields;
-    	var records = [];
-    	var root = o;
-	    for(var i = 0; i < root.length; i++){
-		    var n = root[i];
-	        var values = {};
-	        var id = ((sid || sid === 0) && n[sid] !== undefined && n[sid] !== "" ? n[sid] : null);
-	        for(var j = 0, jlen = fields.length; j < jlen; j++){
-                var f = fields.items[j];
-                var k = f.mapping !== undefined && f.mapping !== null ? f.mapping : j;
-                var v = n[k] !== undefined ? n[k] : f.defaultValue;
-                v = f.convert(v);
-                values[f.name] = v;
+    allowReselect : false,
+
+    /**
+     * <p>An array of 6-digit color hex code strings (without the # symbol).  This array can contain any number
+     * of colors, and each hex code should be unique.  The width of the palette is controlled via CSS by adjusting
+     * the width property of the 'x-color-palette' class (or assigning a custom class), so you can balance the number
+     * of colors with the width setting until the box is symmetrical.</p>
+     * <p>You can override individual colors if needed:</p>
+     * <pre><code>
+var cp = new Roo.ColorPalette();
+cp.colors[0] = "FF0000";  // change the first box to red
+</code></pre>
+
+Or you can provide a custom array of your own for complete control:
+<pre><code>
+var cp = new Roo.ColorPalette();
+cp.colors = ["000000", "993300", "333300"];
+</code></pre>
+     * @type Array
+     */
+    colors : [
+        "000000", "993300", "333300", "003300", "003366", "000080", "333399", "333333",
+        "800000", "FF6600", "808000", "008000", "008080", "0000FF", "666699", "808080",
+        "FF0000", "FF9900", "99CC00", "339966", "33CCCC", "3366FF", "800080", "969696",
+        "FF00FF", "FFCC00", "FFFF00", "00FF00", "00FFFF", "00CCFF", "993366", "C0C0C0",
+        "FF99CC", "FFCC99", "FFFF99", "CCFFCC", "CCFFFF", "99CCFF", "CC99FF", "FFFFFF"
+    ],
+
+    // private
+    onRender : function(container, position){
+        var t = new Roo.MasterTemplate(
+            '<tpl><a href="#" class="color-{0}" hidefocus="on"><em><span style="background:#{0}" unselectable="on">&#160;</span></em></a></tpl>'
+        );
+        var c = this.colors;
+        for(var i = 0, len = c.length; i < len; i++){
+            t.add([c[i]]);
+        }
+        var el = document.createElement("div");
+        el.className = this.itemCls;
+        t.overwrite(el);
+        container.dom.insertBefore(el, position);
+        this.el = Roo.get(el);
+        this.el.on(this.clickEvent, this.handleClick,  this, {delegate: "a"});
+        if(this.clickEvent != 'click'){
+            this.el.on('click', Roo.emptyFn,  this, {delegate: "a", preventDefault:true});
+        }
+    },
+
+    // private
+    afterRender : function(){
+        Roo.ColorPalette.superclass.afterRender.call(this);
+        if(this.value){
+            var s = this.value;
+            this.value = null;
+            this.select(s);
+        }
+    },
+
+    // private
+    handleClick : function(e, t){
+        e.preventDefault();
+        if(!this.disabled){
+            var c = t.className.match(/(?:^|\s)color-(.{6})(?:\s|$)/)[1];
+            this.select(c.toUpperCase());
+        }
+    },
+
+    /**
+     * Selects the specified color in the palette (fires the select event)
+     * @param {String} color A valid 6-digit color hex code (# will be stripped if included)
+     */
+    select : function(color){
+        color = color.replace("#", "");
+        if(color != this.value || this.allowReselect){
+            var el = this.el;
+            if(this.value){
+                el.child("a.color-"+this.value).removeClass("x-color-palette-sel");
             }
-	        var record = new recordType(values, id);
-	        record.json = n;
-	        records[records.length] = record;
-	    }
-	    return {
-	        records : records,
-	        totalRecords : records.length
-	    };
+            el.child("a.color-"+color).addClass("x-color-palette-sel");
+            this.value = color;
+            this.fireEvent("select", this, color);
+        }
     }
 });/*
  * Based on:
@@ -6557,1194 +4808,661 @@ Roo.extend(Roo.data.ArrayReader, Roo.data.JsonReader, {
  * Fork - LGPL
  * <script type="text/javascript">
  */
-
-
+ 
 /**
- * @class Roo.data.Tree
- * @extends Roo.util.Observable
- * Represents a tree data structure and bubbles all the events for its nodes. The nodes
- * in the tree have most standard DOM functionality.
+ * @class Roo.DatePicker
+ * @extends Roo.Component
+ * Simple date picker class.
  * @constructor
- * @param {Node} root (optional) The root node
+ * Create a new DatePicker
+ * @param {Object} config The config object
  */
-Roo.data.Tree = function(root){
-   this.nodeHash = {};
-   /**
-    * The root node for this tree
-    * @type Node
-    */
-   this.root = null;
-   if(root){
-       this.setRootNode(root);
-   }
-   this.addEvents({
-       /**
-        * @event append
-        * Fires when a new child node is appended to a node in this tree.
-        * @param {Tree} tree The owner tree
-        * @param {Node} parent The parent node
-        * @param {Node} node The newly appended node
-        * @param {Number} index The index of the newly appended node
-        */
-       "append" : true,
-       /**
-        * @event remove
-        * Fires when a child node is removed from a node in this tree.
-        * @param {Tree} tree The owner tree
-        * @param {Node} parent The parent node
-        * @param {Node} node The child node removed
-        */
-       "remove" : true,
-       /**
-        * @event move
-        * Fires when a node is moved to a new location in the tree
-        * @param {Tree} tree The owner tree
-        * @param {Node} node The node moved
-        * @param {Node} oldParent The old parent of this node
-        * @param {Node} newParent The new parent of this node
-        * @param {Number} index The index it was moved to
-        */
-       "move" : true,
-       /**
-        * @event insert
-        * Fires when a new child node is inserted in a node in this tree.
-        * @param {Tree} tree The owner tree
-        * @param {Node} parent The parent node
-        * @param {Node} node The child node inserted
-        * @param {Node} refNode The child node the node was inserted before
-        */
-       "insert" : true,
-       /**
-        * @event beforeappend
-        * Fires before a new child is appended to a node in this tree, return false to cancel the append.
-        * @param {Tree} tree The owner tree
-        * @param {Node} parent The parent node
-        * @param {Node} node The child node to be appended
-        */
-       "beforeappend" : true,
-       /**
-        * @event beforeremove
-        * Fires before a child is removed from a node in this tree, return false to cancel the remove.
-        * @param {Tree} tree The owner tree
-        * @param {Node} parent The parent node
-        * @param {Node} node The child node to be removed
-        */
-       "beforeremove" : true,
-       /**
-        * @event beforemove
-        * Fires before a node is moved to a new location in the tree. Return false to cancel the move.
-        * @param {Tree} tree The owner tree
-        * @param {Node} node The node being moved
-        * @param {Node} oldParent The parent of the node
-        * @param {Node} newParent The new parent the node is moving to
-        * @param {Number} index The index it is being moved to
-        */
-       "beforemove" : true,
-       /**
-        * @event beforeinsert
-        * Fires before a new child is inserted in a node in this tree, return false to cancel the insert.
-        * @param {Tree} tree The owner tree
-        * @param {Node} parent The parent node
-        * @param {Node} node The child node to be inserted
-        * @param {Node} refNode The child node the node is being inserted before
-        */
-       "beforeinsert" : true
-   });
-
-    Roo.data.Tree.superclass.constructor.call(this);
-};
-
-Roo.extend(Roo.data.Tree, Roo.util.Observable, {
-    pathSeparator: "/",
+Roo.DatePicker = function(config){
+    Roo.DatePicker.superclass.constructor.call(this, config);
 
-    proxyNodeEvent : function(){
-        return this.fireEvent.apply(this, arguments);
-    },
+    this.value = config && config.value ?
+                 config.value.clearTime() : new Date().clearTime();
 
-    /**
-     * Returns the root node for this tree.
-     * @return {Node}
-     */
-    getRootNode : function(){
-        return this.root;
-    },
+    this.addEvents({
+        /**
+	     * @event select
+	     * Fires when a date is selected
+	     * @param {DatePicker} this
+	     * @param {Date} date The selected date
+	     */
+        'select': true,
+        /**
+	     * @event monthchange
+	     * Fires when the displayed month changes 
+	     * @param {DatePicker} this
+	     * @param {Date} date The selected month
+	     */
+        'monthchange': true
+    });
+
+    if(this.handler){
+        this.on("select", this.handler,  this.scope || this);
+    }
+    // build the disabledDatesRE
+    if(!this.disabledDatesRE && 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.disabledDatesRE = new RegExp(re + ")");
+    }
+};
 
+Roo.extend(Roo.DatePicker, Roo.Component, {
     /**
-     * Sets the root node for this tree.
-     * @param {Node} node
-     * @return {Node}
+     * @cfg {String} todayText
+     * The text to display on the button that selects the current date (defaults to "Today")
      */
-    setRootNode : function(node){
-        this.root = node;
-        node.ownerTree = this;
-        node.isRoot = true;
-        this.registerNode(node);
-        return node;
-    },
-
+    todayText : "Today",
     /**
-     * Gets a node in this tree by its id.
-     * @param {String} id
-     * @return {Node}
+     * @cfg {String} okText
+     * The text to display on the ok button
      */
-    getNodeById : function(id){
-        return this.nodeHash[id];
-    },
-
-    registerNode : function(node){
-        this.nodeHash[node.id] = node;
-    },
-
-    unregisterNode : function(node){
-        delete this.nodeHash[node.id];
-    },
-
-    toString : function(){
-        return "[Tree"+(this.id?" "+this.id:"")+"]";
-    }
-});
-
-/**
- * @class Roo.data.Node
- * @extends Roo.util.Observable
- * @cfg {Boolean} leaf true if this node is a leaf and does not have children
- * @cfg {String} id The id for this node. If one is not specified, one is generated.
- * @constructor
- * @param {Object} attributes The attributes/config for the node
- */
-Roo.data.Node = function(attributes){
+    okText : "&#160;OK&#160;", // &#160; to give the user extra clicking room
     /**
-     * The attributes supplied for the node. You can use this property to access any custom attributes you supplied.
-     * @type {Object}
+     * @cfg {String} cancelText
+     * The text to display on the cancel button
      */
-    this.attributes = attributes || {};
-    this.leaf = this.attributes.leaf;
+    cancelText : "Cancel",
     /**
-     * The node id. @type String
+     * @cfg {String} todayTip
+     * The tooltip to display for the button that selects the current date (defaults to "{current date} (Spacebar)")
      */
-    this.id = this.attributes.id;
-    if(!this.id){
-        this.id = Roo.id(null, "ynode-");
-        this.attributes.id = this.id;
-    }
-     
-    
+    todayTip : "{0} (Spacebar)",
     /**
-     * All child nodes of this node. @type Array
+     * @cfg {Date} minDate
+     * Minimum allowable date (JavaScript date object, defaults to null)
      */
-    this.childNodes = [];
-    if(!this.childNodes.indexOf){ // indexOf is a must
-        this.childNodes.indexOf = function(o){
-            for(var i = 0, len = this.length; i < len; i++){
-                if(this[i] == o) {
-                    return i;
-                }
-            }
-            return -1;
-        };
-    }
+    minDate : null,
     /**
-     * The parent node for this node. @type Node
+     * @cfg {Date} maxDate
+     * Maximum allowable date (JavaScript date object, defaults to null)
      */
-    this.parentNode = null;
+    maxDate : null,
     /**
-     * The first direct child node of this node, or null if this node has no child nodes. @type Node
+     * @cfg {String} minText
+     * The error text to display if the minDate validation fails (defaults to "This date is before the minimum date")
      */
-    this.firstChild = null;
+    minText : "This date is before the minimum date",
     /**
-     * The last direct child node of this node, or null if this node has no child nodes. @type Node
+     * @cfg {String} maxText
+     * The error text to display if the maxDate validation fails (defaults to "This date is after the maximum date")
      */
-    this.lastChild = null;
+    maxText : "This date is after the maximum date",
     /**
-     * The node immediately preceding this node in the tree, or null if there is no sibling node. @type Node
+     * @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').
      */
-    this.previousSibling = null;
+    format : "m/d/y",
     /**
-     * The node immediately following this node in the tree, or null if there is no sibling node. @type Node
+     * @cfg {Array} disabledDays
+     * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
      */
-    this.nextSibling = null;
-
-    this.addEvents({
-       /**
-        * @event append
-        * Fires when a new child node is appended
-        * @param {Tree} tree The owner tree
-        * @param {Node} this This node
-        * @param {Node} node The newly appended node
-        * @param {Number} index The index of the newly appended node
-        */
-       "append" : true,
-       /**
-        * @event remove
-        * Fires when a child node is removed
-        * @param {Tree} tree The owner tree
-        * @param {Node} this This node
-        * @param {Node} node The removed node
-        */
-       "remove" : true,
-       /**
-        * @event move
-        * Fires when this node is moved to a new location in the tree
-        * @param {Tree} tree The owner tree
-        * @param {Node} this This node
-        * @param {Node} oldParent The old parent of this node
-        * @param {Node} newParent The new parent of this node
-        * @param {Number} index The index it was moved to
-        */
-       "move" : true,
-       /**
-        * @event insert
-        * Fires when a new child node is inserted.
-        * @param {Tree} tree The owner tree
-        * @param {Node} this This node
-        * @param {Node} node The child node inserted
-        * @param {Node} refNode The child node the node was inserted before
-        */
-       "insert" : true,
-       /**
-        * @event beforeappend
-        * Fires before a new child is appended, return false to cancel the append.
-        * @param {Tree} tree The owner tree
-        * @param {Node} this This node
-        * @param {Node} node The child node to be appended
-        */
-       "beforeappend" : true,
-       /**
-        * @event beforeremove
-        * Fires before a child is removed, return false to cancel the remove.
-        * @param {Tree} tree The owner tree
-        * @param {Node} this This node
-        * @param {Node} node The child node to be removed
-        */
-       "beforeremove" : true,
-       /**
-        * @event beforemove
-        * Fires before this node is moved to a new location in the tree. Return false to cancel the move.
-        * @param {Tree} tree The owner tree
-        * @param {Node} this This node
-        * @param {Node} oldParent The parent of this node
-        * @param {Node} newParent The new parent this node is moving to
-        * @param {Number} index The index it is being moved to
-        */
-       "beforemove" : true,
-       /**
-        * @event beforeinsert
-        * Fires before a new child is inserted, return false to cancel the insert.
-        * @param {Tree} tree The owner tree
-        * @param {Node} this This node
-        * @param {Node} node The child node to be inserted
-        * @param {Node} refNode The child node the node is being inserted before
-        */
-       "beforeinsert" : true
-   });
-    this.listeners = this.attributes.listeners;
-    Roo.data.Node.superclass.constructor.call(this);
-};
-
-Roo.extend(Roo.data.Node, Roo.util.Observable, {
-    fireEvent : function(evtName){
-        // first do standard event for this node
-        if(Roo.data.Node.superclass.fireEvent.apply(this, arguments) === false){
-            return false;
-        }
-        // then bubble it up to the tree if the event wasn't cancelled
-        var ot = this.getOwnerTree();
-        if(ot){
-            if(ot.proxyNodeEvent.apply(ot, arguments) === false){
-                return false;
-            }
-        }
-        return true;
-    },
-
+    disabledDays : null,
     /**
-     * Returns true if this node is a leaf
-     * @return {Boolean}
+     * @cfg {String} disabledDaysText
+     * The tooltip to display when the date falls on a disabled day (defaults to "")
      */
-    isLeaf : function(){
-        return this.leaf === true;
-    },
-
-    // private
-    setFirstChild : function(node){
-        this.firstChild = node;
-    },
-
-    //private
-    setLastChild : function(node){
-        this.lastChild = node;
-    },
-
-
+    disabledDaysText : "",
     /**
-     * Returns true if this node is the last child of its parent
-     * @return {Boolean}
+     * @cfg {RegExp} disabledDatesRE
+     * JavaScript regular expression used to disable a pattern of dates (defaults to null)
      */
-    isLast : function(){
-       return (!this.parentNode ? true : this.parentNode.lastChild == this);
-    },
-
+    disabledDatesRE : null,
     /**
-     * Returns true if this node is the first child of its parent
-     * @return {Boolean}
+     * @cfg {String} disabledDatesText
+     * The tooltip text to display when the date falls on a disabled date (defaults to "")
      */
-    isFirst : function(){
-       return (!this.parentNode ? true : this.parentNode.firstChild == this);
-    },
-
-    hasChildNodes : function(){
-        return !this.isLeaf() && this.childNodes.length > 0;
-    },
-
+    disabledDatesText : "",
     /**
-     * Insert node(s) as the last child node of this node.
-     * @param {Node/Array} node The node or Array of nodes to append
-     * @return {Node} The appended node if single append, or null if an array was passed
+     * @cfg {Boolean} constrainToViewport
+     * True to constrain the date picker to the viewport (defaults to true)
      */
-    appendChild : function(node){
-        var multi = false;
-        if(node instanceof Array){
-            multi = node;
-        }else if(arguments.length > 1){
-            multi = arguments;
-        }
-        // if passed an array or multiple args do them one by one
-        if(multi){
-            for(var i = 0, len = multi.length; i < len; i++) {
-            	this.appendChild(multi[i]);
-            }
-        }else{
-            if(this.fireEvent("beforeappend", this.ownerTree, this, node) === false){
-                return false;
-            }
-            var index = this.childNodes.length;
-            var oldParent = node.parentNode;
-            // it's a move, make sure we move it cleanly
-            if(oldParent){
-                if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index) === false){
-                    return false;
-                }
-                oldParent.removeChild(node);
-            }
-            index = this.childNodes.length;
-            if(index == 0){
-                this.setFirstChild(node);
-            }
-            this.childNodes.push(node);
-            node.parentNode = this;
-            var ps = this.childNodes[index-1];
-            if(ps){
-                node.previousSibling = ps;
-                ps.nextSibling = node;
-            }else{
-                node.previousSibling = null;
-            }
-            node.nextSibling = null;
-            this.setLastChild(node);
-            node.setOwnerTree(this.getOwnerTree());
-            this.fireEvent("append", this.ownerTree, this, node, index);
-            if(oldParent){
-                node.fireEvent("move", this.ownerTree, node, oldParent, this, index);
-            }
-            return node;
-        }
-    },
-
+    constrainToViewport : true,
     /**
-     * Removes a child node from this node.
-     * @param {Node} node The node to remove
-     * @return {Node} The removed node
+     * @cfg {Array} monthNames
+     * An array of textual month names which can be overriden for localization support (defaults to Date.monthNames)
      */
-    removeChild : function(node){
-        var index = this.childNodes.indexOf(node);
-        if(index == -1){
-            return false;
-        }
-        if(this.fireEvent("beforeremove", this.ownerTree, this, node) === false){
-            return false;
-        }
-
-        // remove it from childNodes collection
-        this.childNodes.splice(index, 1);
-
-        // update siblings
-        if(node.previousSibling){
-            node.previousSibling.nextSibling = node.nextSibling;
-        }
-        if(node.nextSibling){
-            node.nextSibling.previousSibling = node.previousSibling;
-        }
-
-        // update child refs
-        if(this.firstChild == node){
-            this.setFirstChild(node.nextSibling);
-        }
-        if(this.lastChild == node){
-            this.setLastChild(node.previousSibling);
-        }
-
-        node.setOwnerTree(null);
-        // clear any references from the node
-        node.parentNode = null;
-        node.previousSibling = null;
-        node.nextSibling = null;
-        this.fireEvent("remove", this.ownerTree, this, node);
-        return node;
-    },
-
+    monthNames : Date.monthNames,
     /**
-     * Inserts the first node before the second node in this nodes childNodes collection.
-     * @param {Node} node The node to insert
-     * @param {Node} refNode The node to insert before (if null the node is appended)
-     * @return {Node} The inserted node
+     * @cfg {Array} dayNames
+     * An array of textual day names which can be overriden for localization support (defaults to Date.dayNames)
      */
-    insertBefore : function(node, refNode){
-        if(!refNode){ // like standard Dom, refNode can be null for append
-            return this.appendChild(node);
-        }
-        // nothing to do
-        if(node == refNode){
-            return false;
-        }
-
-        if(this.fireEvent("beforeinsert", this.ownerTree, this, node, refNode) === false){
-            return false;
-        }
-        var index = this.childNodes.indexOf(refNode);
-        var oldParent = node.parentNode;
-        var refIndex = index;
-
-        // when moving internally, indexes will change after remove
-        if(oldParent == this && this.childNodes.indexOf(node) < index){
-            refIndex--;
-        }
-
-        // it's a move, make sure we move it cleanly
-        if(oldParent){
-            if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index, refNode) === false){
-                return false;
-            }
-            oldParent.removeChild(node);
-        }
-        if(refIndex == 0){
-            this.setFirstChild(node);
-        }
-        this.childNodes.splice(refIndex, 0, node);
-        node.parentNode = this;
-        var ps = this.childNodes[refIndex-1];
-        if(ps){
-            node.previousSibling = ps;
-            ps.nextSibling = node;
-        }else{
-            node.previousSibling = null;
-        }
-        node.nextSibling = refNode;
-        refNode.previousSibling = node;
-        node.setOwnerTree(this.getOwnerTree());
-        this.fireEvent("insert", this.ownerTree, this, node, refNode);
-        if(oldParent){
-            node.fireEvent("move", this.ownerTree, node, oldParent, this, refIndex, refNode);
-        }
-        return node;
-    },
-
+    dayNames : Date.dayNames,
     /**
-     * Returns the child node at the specified index.
-     * @param {Number} index
-     * @return {Node}
+     * @cfg {String} nextText
+     * The next month navigation button tooltip (defaults to 'Next Month (Control+Right)')
      */
-    item : function(index){
-        return this.childNodes[index];
-    },
-
+    nextText: 'Next Month (Control+Right)',
     /**
-     * Replaces one child node in this node with another.
-     * @param {Node} newChild The replacement node
-     * @param {Node} oldChild The node to replace
-     * @return {Node} The replaced node
+     * @cfg {String} prevText
+     * The previous month navigation button tooltip (defaults to 'Previous Month (Control+Left)')
      */
-    replaceChild : function(newChild, oldChild){
-        this.insertBefore(newChild, oldChild);
-        this.removeChild(oldChild);
-        return oldChild;
-    },
-
+    prevText: 'Previous Month (Control+Left)',
     /**
-     * Returns the index of a child node
-     * @param {Node} node
-     * @return {Number} The index of the node or -1 if it was not found
+     * @cfg {String} monthYearText
+     * The header month selector tooltip (defaults to 'Choose a month (Control+Up/Down to move years)')
      */
-    indexOf : function(child){
-        return this.childNodes.indexOf(child);
-    },
-
+    monthYearText: 'Choose a month (Control+Up/Down to move years)',
     /**
-     * Returns the tree this node is in.
-     * @return {Tree}
+     * @cfg {Number} startDay
+     * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
      */
-    getOwnerTree : function(){
-        // if it doesn't have one, look for one
-        if(!this.ownerTree){
-            var p = this;
-            while(p){
-                if(p.ownerTree){
-                    this.ownerTree = p.ownerTree;
-                    break;
-                }
-                p = p.parentNode;
-            }
+    startDay : 0,
+    /**
+     * @cfg {Bool} showClear
+     * Show a clear button (usefull for date form elements that can be blank.)
+     */
+    
+    showClear: false,
+    
+    /**
+     * Sets the value of the date field
+     * @param {Date} value The date to set
+     */
+    setValue : function(value){
+        var old = this.value;
+        
+        if (typeof(value) == 'string') {
+         
+            value = Date.parseDate(value, this.format);
+        }
+        if (!value) {
+            value = new Date();
+        }
+        
+        this.value = value.clearTime(true);
+        if(this.el){
+            this.update(this.value);
         }
-        return this.ownerTree;
     },
 
     /**
-     * Returns depth of this node (the root node has a depth of 0)
-     * @return {Number}
+     * Gets the current selected value of the date field
+     * @return {Date} The selected date
      */
-    getDepth : function(){
-        var depth = 0;
-        var p = this;
-        while(p.parentNode){
-            ++depth;
-            p = p.parentNode;
-        }
-        return depth;
+    getValue : function(){
+        return this.value;
     },
 
     // private
-    setOwnerTree : function(tree){
-        // if it's move, we need to update everyone
-        if(tree != this.ownerTree){
-            if(this.ownerTree){
-                this.ownerTree.unregisterNode(this);
-            }
-            this.ownerTree = tree;
-            var cs = this.childNodes;
-            for(var i = 0, len = cs.length; i < len; i++) {
-            	cs[i].setOwnerTree(tree);
-            }
-            if(tree){
-                tree.registerNode(this);
-            }
-        }
-    },
-
-    /**
-     * Returns the path for this node. The path can be used to expand or select this node programmatically.
-     * @param {String} attr (optional) The attr to use for the path (defaults to the node's id)
-     * @return {String} The path
-     */
-    getPath : function(attr){
-        attr = attr || "id";
-        var p = this.parentNode;
-        var b = [this.attributes[attr]];
-        while(p){
-            b.unshift(p.attributes[attr]);
-            p = p.parentNode;
+    focus : function(){
+        if(this.el){
+            this.update(this.activeDate);
         }
-        var sep = this.getOwnerTree().pathSeparator;
-        return sep + b.join(sep);
     },
 
-    /**
-     * Bubbles up the tree from this node, calling the specified function with each node. The scope (<i>this</i>) of
-     * function call will be the scope provided or the current node. The arguments to the function
-     * will be the args provided or the current node. If the function returns false at any point,
-     * the bubble is stopped.
-     * @param {Function} fn The function to call
-     * @param {Object} scope (optional) The scope of the function (defaults to current node)
-     * @param {Array} args (optional) The args to call the function with (default to passing the current node)
-     */
-    bubble : function(fn, scope, args){
-        var p = this;
-        while(p){
-            if(fn.call(scope || p, args || p) === false){
-                break;
+    // privateval
+    onRender : function(container, position){
+        
+        var m = [
+             '<table cellspacing="0">',
+                '<tr><td class="x-date-left"><a href="#" title="', this.prevText ,'">&#160;</a></td><td class="x-date-middle" align="center"></td><td class="x-date-right"><a href="#" title="', this.nextText ,'">&#160;</a></td></tr>',
+                '<tr><td colspan="3"><table class="x-date-inner" cellspacing="0"><thead><tr>'];
+        var dn = this.dayNames;
+        for(var i = 0; i < 7; i++){
+            var d = this.startDay+i;
+            if(d > 6){
+                d = d-7;
             }
-            p = p.parentNode;
+            m.push("<th><span>", dn[d].substr(0,1), "</span></th>");
         }
-    },
-
-    /**
-     * Cascades down the tree from this node, calling the specified function with each node. The scope (<i>this</i>) of
-     * function call will be the scope provided or the current node. The arguments to the function
-     * will be the args provided or the current node. If the function returns false at any point,
-     * the cascade is stopped on that branch.
-     * @param {Function} fn The function to call
-     * @param {Object} scope (optional) The scope of the function (defaults to current node)
-     * @param {Array} args (optional) The args to call the function with (default to passing the current node)
-     */
-    cascade : function(fn, scope, args){
-        if(fn.call(scope || this, args || this) !== false){
-            var cs = this.childNodes;
-            for(var i = 0, len = cs.length; i < len; i++) {
-            	cs[i].cascade(fn, scope, args);
+        m[m.length] = "</tr></thead><tbody><tr>";
+        for(var i = 0; i < 42; i++) {
+            if(i % 7 == 0 && i != 0){
+                m[m.length] = "</tr><tr>";
             }
+            m[m.length] = '<td><a href="#" hidefocus="on" class="x-date-date" tabIndex="1"><em><span></span></em></a></td>';
         }
-    },
+        m[m.length] = '</tr></tbody></table></td></tr><tr>'+
+            '<td colspan="3" class="x-date-bottom" align="center"></td></tr></table><div class="x-date-mp"></div>';
 
-    /**
-     * Interates the child nodes of this node, calling the specified function with each node. The scope (<i>this</i>) of
-     * function call will be the scope provided or the current node. The arguments to the function
-     * will be the args provided or the current node. If the function returns false at any point,
-     * the iteration stops.
-     * @param {Function} fn The function to call
-     * @param {Object} scope (optional) The scope of the function (defaults to current node)
-     * @param {Array} args (optional) The args to call the function with (default to passing the current node)
-     */
-    eachChild : function(fn, scope, args){
-        var cs = this.childNodes;
-        for(var i = 0, len = cs.length; i < len; i++) {
-        	if(fn.call(scope || this, args || cs[i]) === false){
-        	    break;
-        	}
-        }
-    },
+        var el = document.createElement("div");
+        el.className = "x-date-picker";
+        el.innerHTML = m.join("");
 
-    /**
-     * Finds the first child that has the attribute with the specified value.
-     * @param {String} attribute The attribute name
-     * @param {Mixed} value The value to search for
-     * @return {Node} The found child or null if none was found
-     */
-    findChild : function(attribute, value){
-        var cs = this.childNodes;
-        for(var i = 0, len = cs.length; i < len; i++) {
-        	if(cs[i].attributes[attribute] == value){
-        	    return cs[i];
-        	}
-        }
-        return null;
-    },
+        container.dom.insertBefore(el, position);
 
-    /**
-     * Finds the first child by a custom function. The child matches if the function passed
-     * returns true.
-     * @param {Function} fn
-     * @param {Object} scope (optional)
-     * @return {Node} The found child or null if none was found
-     */
-    findChildBy : function(fn, scope){
-        var cs = this.childNodes;
-        for(var i = 0, len = cs.length; i < len; i++) {
-        	if(fn.call(scope||cs[i], cs[i]) === true){
-        	    return cs[i];
-        	}
-        }
-        return null;
-    },
+        this.el = Roo.get(el);
+        this.eventEl = Roo.get(el.firstChild);
 
-    /**
-     * Sorts this nodes children using the supplied sort function
-     * @param {Function} fn
-     * @param {Object} scope (optional)
-     */
-    sort : function(fn, scope){
-        var cs = this.childNodes;
-        var len = cs.length;
-        if(len > 0){
-            var sortFn = scope ? function(){fn.apply(scope, arguments);} : fn;
-            cs.sort(sortFn);
-            for(var i = 0; i < len; i++){
-                var n = cs[i];
-                n.previousSibling = cs[i-1];
-                n.nextSibling = cs[i+1];
-                if(i == 0){
-                    this.setFirstChild(n);
-                }
-                if(i == len-1){
-                    this.setLastChild(n);
-                }
-            }
-        }
-    },
+        new Roo.util.ClickRepeater(this.el.child("td.x-date-left a"), {
+            handler: this.showPrevMonth,
+            scope: this,
+            preventDefault:true,
+            stopDefault:true
+        });
 
-    /**
-     * Returns true if this node is an ancestor (at any point) of the passed node.
-     * @param {Node} node
-     * @return {Boolean}
-     */
-    contains : function(node){
-        return node.isAncestor(this);
-    },
+        new Roo.util.ClickRepeater(this.el.child("td.x-date-right a"), {
+            handler: this.showNextMonth,
+            scope: this,
+            preventDefault:true,
+            stopDefault:true
+        });
 
-    /**
-     * Returns true if the passed node is an ancestor (at any point) of this node.
-     * @param {Node} node
-     * @return {Boolean}
-     */
-    isAncestor : function(node){
-        var p = this.parentNode;
-        while(p){
-            if(p == node){
-                return true;
-            }
-            p = p.parentNode;
-        }
-        return false;
-    },
+        this.eventEl.on("mousewheel", this.handleMouseWheel,  this);
 
-    toString : function(){
-        return "[Node"+(this.id?" "+this.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">
- */
- (function(){ 
-/**
- * @class Roo.Layer
- * @extends Roo.Element
- * An extended {@link Roo.Element} object that supports a shadow and shim, constrain to viewport and
- * automatic maintaining of shadow/shim positions.
- * @cfg {Boolean} shim False to disable the iframe shim in browsers which need one (defaults to true)
- * @cfg {String/Boolean} shadow True to create a shadow element with default class "x-layer-shadow", or
- * you can pass a string with a CSS class name. False turns off the shadow.
- * @cfg {Object} dh DomHelper object config to create element with (defaults to {tag: "div", cls: "x-layer"}).
- * @cfg {Boolean} constrain False to disable constrain to viewport (defaults to true)
- * @cfg {String} cls CSS class to add to the element
- * @cfg {Number} zindex Starting z-index (defaults to 11000)
- * @cfg {Number} shadowOffset Number of pixels to offset the shadow (defaults to 3)
- * @constructor
- * @param {Object} config An object with config options.
- * @param {String/HTMLElement} existingEl (optional) Uses an existing DOM element. If the element is not found it creates it.
- */
+        this.monthPicker = this.el.down('div.x-date-mp');
+        this.monthPicker.enableDisplayMode('block');
+        
+        var kn = new Roo.KeyNav(this.eventEl, {
+            "left" : function(e){
+                e.ctrlKey ?
+                    this.showPrevMonth() :
+                    this.update(this.activeDate.add("d", -1));
+            },
 
-Roo.Layer = function(config, existingEl){
-    config = config || {};
-    var dh = Roo.DomHelper;
-    var cp = config.parentEl, pel = cp ? Roo.getDom(cp) : document.body;
-    if(existingEl){
-        this.dom = Roo.getDom(existingEl);
-    }
-    if(!this.dom){
-        var o = config.dh || {tag: "div", cls: "x-layer"};
-        this.dom = dh.append(pel, o);
-    }
-    if(config.cls){
-        this.addClass(config.cls);
-    }
-    this.constrain = config.constrain !== false;
-    this.visibilityMode = Roo.Element.VISIBILITY;
-    if(config.id){
-        this.id = this.dom.id = config.id;
-    }else{
-        this.id = Roo.id(this.dom);
-    }
-    this.zindex = config.zindex || this.getZIndex();
-    this.position("absolute", this.zindex);
-    if(config.shadow){
-        this.shadowOffset = config.shadowOffset || 4;
-        this.shadow = new Roo.Shadow({
-            offset : this.shadowOffset,
-            mode : config.shadow
+            "right" : function(e){
+                e.ctrlKey ?
+                    this.showNextMonth() :
+                    this.update(this.activeDate.add("d", 1));
+            },
+
+            "up" : function(e){
+                e.ctrlKey ?
+                    this.showNextYear() :
+                    this.update(this.activeDate.add("d", -7));
+            },
+
+            "down" : function(e){
+                e.ctrlKey ?
+                    this.showPrevYear() :
+                    this.update(this.activeDate.add("d", 7));
+            },
+
+            "pageUp" : function(e){
+                this.showNextMonth();
+            },
+
+            "pageDown" : function(e){
+                this.showPrevMonth();
+            },
+
+            "enter" : function(e){
+                e.stopPropagation();
+                return true;
+            },
+
+            scope : this
         });
-    }else{
-        this.shadowOffset = 0;
-    }
-    this.useShim = config.shim !== false && Roo.useShims;
-    this.useDisplay = config.useDisplay;
-    this.hide();
-};
 
-var supr = Roo.Element.prototype;
+        this.eventEl.on("click", this.handleDateClick,  this, {delegate: "a.x-date-date"});
 
-// shims are shared among layer to keep from having 100 iframes
-var shims = [];
+        this.eventEl.addKeyListener(Roo.EventObject.SPACE, this.selectToday,  this);
 
-Roo.extend(Roo.Layer, Roo.Element, {
+        this.el.unselectable();
+        
+        this.cells = this.el.select("table.x-date-inner tbody td");
+        this.textNodes = this.el.query("table.x-date-inner tbody span");
 
-    getZIndex : function(){
-        return this.zindex || parseInt(this.getStyle("z-index"), 10) || 11000;
-    },
+        this.mbtn = new Roo.Button(this.el.child("td.x-date-middle", true), {
+            text: "&#160;",
+            tooltip: this.monthYearText
+        });
 
-    getShim : function(){
-        if(!this.useShim){
-            return null;
-        }
-        if(this.shim){
-            return this.shim;
+        this.mbtn.on('click', this.showMonthPicker, this);
+        this.mbtn.el.child(this.mbtn.menuClassTarget).addClass("x-btn-with-menu");
+
+
+        var today = (new Date()).dateFormat(this.format);
+        
+        var baseTb = new Roo.Toolbar(this.el.child("td.x-date-bottom", true));
+        if (this.showClear) {
+            baseTb.add( new Roo.Toolbar.Fill());
         }
-        var shim = shims.shift();
-        if(!shim){
-            shim = this.createShim();
-            shim.enableDisplayMode('block');
-            shim.dom.style.display = 'none';
-            shim.dom.style.visibility = 'visible';
+        baseTb.add({
+            text: String.format(this.todayText, today),
+            tooltip: String.format(this.todayTip, today),
+            handler: this.selectToday,
+            scope: this
+        });
+        
+        //var todayBtn = new Roo.Button(this.el.child("td.x-date-bottom", true), {
+            
+        //});
+        if (this.showClear) {
+            
+            baseTb.add( new Roo.Toolbar.Fill());
+            baseTb.add({
+                text: '&#160;',
+                cls: 'x-btn-icon x-btn-clear',
+                handler: function() {
+                    //this.value = '';
+                    this.fireEvent("select", this, '');
+                },
+                scope: this
+            });
         }
-        var pn = this.dom.parentNode;
-        if(shim.dom.parentNode != pn){
-            pn.insertBefore(shim.dom, this.dom);
+        
+        
+        if(Roo.isIE){
+            this.el.repaint();
         }
-        shim.setStyle('z-index', this.getZIndex()-2);
-        this.shim = shim;
-        return shim;
+        this.update(this.value);
     },
 
-    hideShim : function(){
-        if(this.shim){
-            this.shim.setDisplayed(false);
-            shims.push(this.shim);
-            delete this.shim;
+    createMonthPicker : function(){
+        if(!this.monthPicker.dom.firstChild){
+            var buf = ['<table border="0" cellspacing="0">'];
+            for(var i = 0; i < 6; i++){
+                buf.push(
+                    '<tr><td class="x-date-mp-month"><a href="#">', this.monthNames[i].substr(0, 3), '</a></td>',
+                    '<td class="x-date-mp-month x-date-mp-sep"><a href="#">', this.monthNames[i+6].substr(0, 3), '</a></td>',
+                    i == 0 ?
+                    '<td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-prev"></a></td><td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-next"></a></td></tr>' :
+                    '<td class="x-date-mp-year"><a href="#"></a></td><td class="x-date-mp-year"><a href="#"></a></td></tr>'
+                );
+            }
+            buf.push(
+                '<tr class="x-date-mp-btns"><td colspan="4"><button type="button" class="x-date-mp-ok">',
+                    this.okText,
+                    '</button><button type="button" class="x-date-mp-cancel">',
+                    this.cancelText,
+                    '</button></td></tr>',
+                '</table>'
+            );
+            this.monthPicker.update(buf.join(''));
+            this.monthPicker.on('click', this.onMonthClick, this);
+            this.monthPicker.on('dblclick', this.onMonthDblClick, this);
+
+            this.mpMonths = this.monthPicker.select('td.x-date-mp-month');
+            this.mpYears = this.monthPicker.select('td.x-date-mp-year');
+
+            this.mpMonths.each(function(m, a, i){
+                i += 1;
+                if((i%2) == 0){
+                    m.dom.xmonth = 5 + Math.round(i * .5);
+                }else{
+                    m.dom.xmonth = Math.round((i-1) * .5);
+                }
+            });
         }
     },
 
-    disableShadow : function(){
-        if(this.shadow){
-            this.shadowDisabled = true;
-            this.shadow.hide();
-            this.lastShadowOffset = this.shadowOffset;
-            this.shadowOffset = 0;
-        }
+    showMonthPicker : function(){
+        this.createMonthPicker();
+        var size = this.el.getSize();
+        this.monthPicker.setSize(size);
+        this.monthPicker.child('table').setSize(size);
+
+        this.mpSelMonth = (this.activeDate || this.value).getMonth();
+        this.updateMPMonth(this.mpSelMonth);
+        this.mpSelYear = (this.activeDate || this.value).getFullYear();
+        this.updateMPYear(this.mpSelYear);
+
+        this.monthPicker.slideIn('t', {duration:.2});
     },
 
-    enableShadow : function(show){
-        if(this.shadow){
-            this.shadowDisabled = false;
-            this.shadowOffset = this.lastShadowOffset;
-            delete this.lastShadowOffset;
-            if(show){
-                this.sync(true);
+    updateMPYear : function(y){
+        this.mpyear = y;
+        var ys = this.mpYears.elements;
+        for(var i = 1; i <= 10; i++){
+            var td = ys[i-1], y2;
+            if((i%2) == 0){
+                y2 = y + Math.round(i * .5);
+                td.firstChild.innerHTML = y2;
+                td.xyear = y2;
+            }else{
+                y2 = y - (5-Math.round(i * .5));
+                td.firstChild.innerHTML = y2;
+                td.xyear = y2;
             }
+            this.mpYears.item(i-1)[y2 == this.mpSelYear ? 'addClass' : 'removeClass']('x-date-mp-sel');
         }
     },
 
-    // private
-    // this code can execute repeatedly in milliseconds (i.e. during a drag) so
-    // code size was sacrificed for effeciency (e.g. no getBox/setBox, no XY calls)
-    sync : function(doShow){
-        var sw = this.shadow;
-        if(!this.updating && this.isVisible() && (sw || this.useShim)){
-            var sh = this.getShim();
-
-            var w = this.getWidth(),
-                h = this.getHeight();
+    updateMPMonth : function(sm){
+        this.mpMonths.each(function(m, a, i){
+            m[m.dom.xmonth == sm ? 'addClass' : 'removeClass']('x-date-mp-sel');
+        });
+    },
 
-            var l = this.getLeft(true),
-                t = this.getTop(true);
+    selectMPMonth: function(m){
+        
+    },
 
-            if(sw && !this.shadowDisabled){
-                if(doShow && !sw.isVisible()){
-                    sw.show(this);
-                }else{
-                    sw.realign(l, t, w, h);
-                }
-                if(sh){
-                    if(doShow){
-                       sh.show();
-                    }
-                    // fit the shim behind the shadow, so it is shimmed too
-                    var a = sw.adjusts, s = sh.dom.style;
-                    s.left = (Math.min(l, l+a.l))+"px";
-                    s.top = (Math.min(t, t+a.t))+"px";
-                    s.width = (w+a.w)+"px";
-                    s.height = (h+a.h)+"px";
-                }
-            }else if(sh){
-                if(doShow){
-                   sh.show();
-                }
-                sh.setSize(w, h);
-                sh.setLeftTop(l, t);
-            }
-            
+    onMonthClick : function(e, t){
+        e.stopEvent();
+        var el = new Roo.Element(t), pn;
+        if(el.is('button.x-date-mp-cancel')){
+            this.hideMonthPicker();
+        }
+        else if(el.is('button.x-date-mp-ok')){
+            this.update(new Date(this.mpSelYear, this.mpSelMonth, (this.activeDate || this.value).getDate()));
+            this.hideMonthPicker();
+        }
+        else if(pn = el.up('td.x-date-mp-month', 2)){
+            this.mpMonths.removeClass('x-date-mp-sel');
+            pn.addClass('x-date-mp-sel');
+            this.mpSelMonth = pn.dom.xmonth;
+        }
+        else if(pn = el.up('td.x-date-mp-year', 2)){
+            this.mpYears.removeClass('x-date-mp-sel');
+            pn.addClass('x-date-mp-sel');
+            this.mpSelYear = pn.dom.xyear;
+        }
+        else if(el.is('a.x-date-mp-prev')){
+            this.updateMPYear(this.mpyear-10);
+        }
+        else if(el.is('a.x-date-mp-next')){
+            this.updateMPYear(this.mpyear+10);
         }
     },
 
-    // private
-    destroy : function(){
-        this.hideShim();
-        if(this.shadow){
-            this.shadow.hide();
+    onMonthDblClick : function(e, t){
+        e.stopEvent();
+        var el = new Roo.Element(t), pn;
+        if(pn = el.up('td.x-date-mp-month', 2)){
+            this.update(new Date(this.mpSelYear, pn.dom.xmonth, (this.activeDate || this.value).getDate()));
+            this.hideMonthPicker();
         }
-        this.removeAllListeners();
-        var pn = this.dom.parentNode;
-        if(pn){
-            pn.removeChild(this.dom);
+        else if(pn = el.up('td.x-date-mp-year', 2)){
+            this.update(new Date(pn.dom.xyear, this.mpSelMonth, (this.activeDate || this.value).getDate()));
+            this.hideMonthPicker();
         }
-        Roo.Element.uncache(this.id);
     },
 
-    remove : function(){
-        this.destroy();
+    hideMonthPicker : function(disableAnim){
+        if(this.monthPicker){
+            if(disableAnim === true){
+                this.monthPicker.hide();
+            }else{
+                this.monthPicker.slideOut('t', {duration:.2});
+            }
+        }
     },
 
     // private
-    beginUpdate : function(){
-        this.updating = true;
+    showPrevMonth : function(e){
+        this.update(this.activeDate.add("mo", -1));
     },
 
     // private
-    endUpdate : function(){
-        this.updating = false;
-        this.sync(true);
+    showNextMonth : function(e){
+        this.update(this.activeDate.add("mo", 1));
     },
 
     // private
-    hideUnders : function(negOffset){
-        if(this.shadow){
-            this.shadow.hide();
-        }
-        this.hideShim();
+    showPrevYear : function(){
+        this.update(this.activeDate.add("y", -1));
     },
 
     // private
-    constrainXY : function(){
-        if(this.constrain){
-            var vw = Roo.lib.Dom.getViewWidth(),
-                vh = Roo.lib.Dom.getViewHeight();
-            var s = Roo.get(document).getScroll();
-
-            var xy = this.getXY();
-            var x = xy[0], y = xy[1];   
-            var w = this.dom.offsetWidth+this.shadowOffset, h = this.dom.offsetHeight+this.shadowOffset;
-            // only move it if it needs it
-            var moved = false;
-            // first validate right/bottom
-            if((x + w) > vw+s.left){
-                x = vw - w - this.shadowOffset;
-                moved = true;
-            }
-            if((y + h) > vh+s.top){
-                y = vh - h - this.shadowOffset;
-                moved = true;
-            }
-            // then make sure top/left isn't negative
-            if(x < s.left){
-                x = s.left;
-                moved = true;
-            }
-            if(y < s.top){
-                y = s.top;
-                moved = true;
-            }
-            if(moved){
-                if(this.avoidY){
-                    var ay = this.avoidY;
-                    if(y <= ay && (y+h) >= ay){
-                        y = ay-h-5;   
-                    }
-                }
-                xy = [x, y];
-                this.storeXY(xy);
-                supr.setXY.call(this, xy);
-                this.sync();
-            }
-        }
-    },
-
-    isVisible : function(){
-        return this.visible;    
+    showNextYear : function(){
+        this.update(this.activeDate.add("y", 1));
     },
 
     // private
-    showAction : function(){
-        this.visible = true; // track visibility to prevent getStyle calls
-        if(this.useDisplay === true){
-            this.setDisplayed("");
-        }else if(this.lastXY){
-            supr.setXY.call(this, this.lastXY);
-        }else if(this.lastLT){
-            supr.setLeftTop.call(this, this.lastLT[0], this.lastLT[1]);
+    handleMouseWheel : function(e){
+        var delta = e.getWheelDelta();
+        if(delta > 0){
+            this.showPrevMonth();
+            e.stopEvent();
+        } else if(delta < 0){
+            this.showNextMonth();
+            e.stopEvent();
         }
     },
 
     // private
-    hideAction : function(){
-        this.visible = false;
-        if(this.useDisplay === true){
-            this.setDisplayed(false);
-        }else{
-            this.setLeftTop(-10000,-10000);
-        }
-    },
-
-    // overridden Element method
-    setVisible : function(v, a, d, c, e){
-        if(v){
-            this.showAction();
-        }
-        if(a && v){
-            var cb = function(){
-                this.sync(true);
-                if(c){
-                    c();
-                }
-            }.createDelegate(this);
-            supr.setVisible.call(this, true, true, d, cb, e);
-        }else{
-            if(!v){
-                this.hideUnders(true);
-            }
-            var cb = c;
-            if(a){
-                cb = function(){
-                    this.hideAction();
-                    if(c){
-                        c();
-                    }
-                }.createDelegate(this);
-            }
-            supr.setVisible.call(this, v, a, d, cb, e);
-            if(v){
-                this.sync(true);
-            }else if(!a){
-                this.hideAction();
-            }
+    handleDateClick : function(e, t){
+        e.stopEvent();
+        if(t.dateValue && !Roo.fly(t.parentNode).hasClass("x-date-disabled")){
+            this.setValue(new Date(t.dateValue));
+            this.fireEvent("select", this, this.value);
         }
     },
 
-    storeXY : function(xy){
-        delete this.lastLT;
-        this.lastXY = xy;
-    },
-
-    storeLeftTop : function(left, top){
-        delete this.lastXY;
-        this.lastLT = [left, top];
-    },
-
-    // private
-    beforeFx : function(){
-        this.beforeAction();
-        return Roo.Layer.superclass.beforeFx.apply(this, arguments);
-    },
-
     // private
-    afterFx : function(){
-        Roo.Layer.superclass.afterFx.apply(this, arguments);
-        this.sync(this.isVisible());
+    selectToday : function(){
+        this.setValue(new Date().clearTime());
+        this.fireEvent("select", this, this.value);
     },
 
     // private
-    beforeAction : function(){
-        if(!this.updating && this.shadow){
-            this.shadow.hide();
+    update : function(date)
+    {
+        var vd = this.activeDate;
+        this.activeDate = date;
+        if(vd && this.el){
+            var t = date.getTime();
+            if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
+                this.cells.removeClass("x-date-selected");
+                this.cells.each(function(c){
+                   if(c.dom.firstChild.dateValue == t){
+                       c.addClass("x-date-selected");
+                       setTimeout(function(){
+                            try{c.dom.firstChild.focus();}catch(e){}
+                       }, 50);
+                       return false;
+                   }
+                });
+                return;
+            }
         }
-    },
+        
+        var days = date.getDaysInMonth();
+        var firstOfMonth = date.getFirstDateOfMonth();
+        var startingPos = firstOfMonth.getDay()-this.startDay;
 
-    // overridden Element method
-    setLeft : function(left){
-        this.storeLeftTop(left, this.getTop(true));
-        supr.setLeft.apply(this, arguments);
-        this.sync();
-    },
+        if(startingPos <= this.startDay){
+            startingPos += 7;
+        }
 
-    setTop : function(top){
-        this.storeLeftTop(this.getLeft(true), top);
-        supr.setTop.apply(this, arguments);
-        this.sync();
-    },
+        var pm = date.add("mo", -1);
+        var prevStart = pm.getDaysInMonth()-startingPos;
 
-    setLeftTop : function(left, top){
-        this.storeLeftTop(left, top);
-        supr.setLeftTop.apply(this, arguments);
-        this.sync();
-    },
+        var cells = this.cells.elements;
+        var textEls = this.textNodes;
+        days += startingPos;
 
-    setXY : function(xy, a, d, c, e){
-        this.fixDisplay();
-        this.beforeAction();
-        this.storeXY(xy);
-        var cb = this.createCB(c);
-        supr.setXY.call(this, xy, a, d, cb, e);
-        if(!a){
-            cb();
-        }
-    },
+        // convert everything to numbers so it's fast
+        var day = 86400000;
+        var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
+        var today = new Date().clearTime().getTime();
+        var sel = date.clearTime().getTime();
+        var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
+        var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
+        var ddMatch = this.disabledDatesRE;
+        var ddText = this.disabledDatesText;
+        var ddays = this.disabledDays ? this.disabledDays.join("") : false;
+        var ddaysText = this.disabledDaysText;
+        var format = this.format;
 
-    // private
-    createCB : function(c){
-        var el = this;
-        return function(){
-            el.constrainXY();
-            el.sync(true);
-            if(c){
-                c();
+        var setCellClass = function(cal, cell){
+            cell.title = "";
+            var t = d.getTime();
+            cell.firstChild.dateValue = t;
+            if(t == today){
+                cell.className += " x-date-today";
+                cell.title = cal.todayText;
+            }
+            if(t == sel){
+                cell.className += " x-date-selected";
+                setTimeout(function(){
+                    try{cell.firstChild.focus();}catch(e){}
+                }, 50);
+            }
+            // disabling
+            if(t < min) {
+                cell.className = " x-date-disabled";
+                cell.title = cal.minText;
+                return;
+            }
+            if(t > max) {
+                cell.className = " x-date-disabled";
+                cell.title = cal.maxText;
+                return;
+            }
+            if(ddays){
+                if(ddays.indexOf(d.getDay()) != -1){
+                    cell.title = ddaysText;
+                    cell.className = " x-date-disabled";
+                }
+            }
+            if(ddMatch && format){
+                var fvalue = d.dateFormat(format);
+                if(ddMatch.test(fvalue)){
+                    cell.title = ddText.replace("%0", fvalue);
+                    cell.className = " x-date-disabled";
+                }
             }
         };
-    },
-
-    // overridden Element method
-    setX : function(x, a, d, c, e){
-        this.setXY([x, this.getY()], a, d, c, e);
-    },
 
-    // overridden Element method
-    setY : function(y, a, d, c, e){
-        this.setXY([this.getX(), y], a, d, c, e);
-    },
-
-    // overridden Element method
-    setSize : function(w, h, a, d, c, e){
-        this.beforeAction();
-        var cb = this.createCB(c);
-        supr.setSize.call(this, w, h, a, d, cb, e);
-        if(!a){
-            cb();
+        var i = 0;
+        for(; i < startingPos; i++) {
+            textEls[i].innerHTML = (++prevStart);
+            d.setDate(d.getDate()+1);
+            cells[i].className = "x-date-prevday";
+            setCellClass(this, cells[i]);
         }
-    },
-
-    // overridden Element method
-    setWidth : function(w, a, d, c, e){
-        this.beforeAction();
-        var cb = this.createCB(c);
-        supr.setWidth.call(this, w, a, d, cb, e);
-        if(!a){
-            cb();
+        for(; i < days; i++){
+            intDay = i - startingPos + 1;
+            textEls[i].innerHTML = (intDay);
+            d.setDate(d.getDate()+1);
+            cells[i].className = "x-date-active";
+            setCellClass(this, cells[i]);
         }
-    },
-
-    // overridden Element method
-    setHeight : function(h, a, d, c, e){
-        this.beforeAction();
-        var cb = this.createCB(c);
-        supr.setHeight.call(this, h, a, d, cb, e);
-        if(!a){
-            cb();
+        var extraDays = 0;
+        for(; i < 42; i++) {
+             textEls[i].innerHTML = (++extraDays);
+             d.setDate(d.getDate()+1);
+             cells[i].className = "x-date-nextday";
+             setCellClass(this, cells[i]);
         }
-    },
 
-    // overridden Element method
-    setBounds : function(x, y, w, h, a, d, c, e){
-        this.beforeAction();
-        var cb = this.createCB(c);
-        if(!a){
-            this.storeXY([x, y]);
-            supr.setXY.call(this, [x, y]);
-            supr.setSize.call(this, w, h, a, d, cb, e);
-            cb();
-        }else{
-            supr.setBounds.call(this, x, y, w, h, a, d, cb, e);
-        }
-        return this;
-    },
-    
-    /**
-     * Sets the z-index of this layer and adjusts any shadow and shim z-indexes. The layer z-index is automatically
-     * incremented by two more than the value passed in so that it always shows above any shadow or shim (the shadow
-     * element, if any, will be assigned z-index + 1, and the shim element, if any, will be assigned the unmodified z-index).
-     * @param {Number} zindex The new z-index to set
-     * @return {this} The Layer
-     */
-    setZIndex : function(zindex){
-        this.zindex = zindex;
-        this.setStyle("z-index", zindex + 2);
-        if(this.shadow){
-            this.shadow.setZIndex(zindex + 1);
-        }
-        if(this.shim){
-            this.shim.setStyle("z-index", zindex);
+        this.mbtn.setText(this.monthNames[date.getMonth()] + " " + date.getFullYear());
+        this.fireEvent('monthchange', this, date);
+        
+        if(!this.internalRender){
+            var main = this.el.dom.firstChild;
+            var w = main.offsetWidth;
+            this.el.setWidth(w + this.el.getBorderWidth("lr"));
+            Roo.fly(main).setWidth(w);
+            this.internalRender = true;
+            // opera does not respect the auto grow header center column
+            // then, after it gets a width opera refuses to recalculate
+            // without a second pass
+            if(Roo.isOpera && !this.secondPass){
+                main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + "px";
+                this.secondPass = true;
+                this.update.defer(10, this, [date]);
+            }
         }
+        
+        
     }
-});
-})();/*
+});        /*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -7754,1648 +5472,1345 @@ Roo.extend(Roo.Layer, Roo.Element, {
  * Fork - LGPL
  * <script type="text/javascript">
  */
+/**
+ * @class Roo.TabPanel
+ * @extends Roo.util.Observable
+ * A lightweight tab container.
+ * <br><br>
+ * Usage:
+ * <pre><code>
+// basic tabs 1, built from existing content
+var tabs = new Roo.TabPanel("tabs1");
+tabs.addTab("script", "View Script");
+tabs.addTab("markup", "View Markup");
+tabs.activate("script");
 
+// more advanced tabs, built from javascript
+var jtabs = new Roo.TabPanel("jtabs");
+jtabs.addTab("jtabs-1", "Normal Tab", "My content was added during construction.");
 
-/**
- * @class Roo.Shadow
- * Simple class that can provide a shadow effect for any element.  Note that the element MUST be absolutely positioned,
- * and the shadow does not provide any shimming.  This should be used only in simple cases -- for more advanced
- * functionality that can also provide the same shadow effect, see the {@link Roo.Layer} class.
+// set up the UpdateManager
+var tab2 = jtabs.addTab("jtabs-2", "Ajax Tab 1");
+var updater = tab2.getUpdateManager();
+updater.setDefaultUrl("ajax1.htm");
+tab2.on('activate', updater.refresh, updater, true);
+
+// Use setUrl for Ajax loading
+var tab3 = jtabs.addTab("jtabs-3", "Ajax Tab 2");
+tab3.setUrl("ajax2.htm", null, true);
+
+// Disabled tab
+var tab4 = jtabs.addTab("tabs1-5", "Disabled Tab", "Can't see me cause I'm disabled");
+tab4.disable();
+
+jtabs.activate("jtabs-1");
+ * </code></pre>
  * @constructor
- * Create a new Shadow
- * @param {Object} config The config object
+ * Create a new TabPanel.
+ * @param {String/HTMLElement/Roo.Element} container The id, DOM element or Roo.Element container where this TabPanel is to be rendered.
+ * @param {Object/Boolean} config Config object to set any properties for this TabPanel, or true to render the tabs on the bottom.
  */
-Roo.Shadow = function(config){
-    Roo.apply(this, config);
-    if(typeof this.mode != "string"){
-        this.mode = this.defaultMode;
+Roo.TabPanel = function(container, config){
+    /**
+    * The container element for this TabPanel.
+    * @type Roo.Element
+    */
+    this.el = Roo.get(container, true);
+    if(config){
+        if(typeof config == "boolean"){
+            this.tabPosition = config ? "bottom" : "top";
+        }else{
+            Roo.apply(this, config);
+        }
     }
-    var o = this.offset, a = {h: 0};
-    var rad = Math.floor(this.offset/2);
-    switch(this.mode.toLowerCase()){ // all this hideous nonsense calculates the various offsets for shadows
-        case "drop":
-            a.w = 0;
-            a.l = a.t = o;
-            a.t -= 1;
-            if(Roo.isIE){
-                a.l -= this.offset + rad;
-                a.t -= this.offset + rad;
-                a.w -= rad;
-                a.h -= rad;
-                a.t += 1;
-            }
-        break;
-        case "sides":
-            a.w = (o*2);
-            a.l = -o;
-            a.t = o-1;
-            if(Roo.isIE){
-                a.l -= (this.offset - rad);
-                a.t -= this.offset + rad;
-                a.l += 1;
-                a.w -= (this.offset - rad)*2;
-                a.w -= rad + 1;
-                a.h -= 1;
-            }
-        break;
-        case "frame":
-            a.w = a.h = (o*2);
-            a.l = a.t = -o;
-            a.t += 1;
-            a.h -= 2;
-            if(Roo.isIE){
-                a.l -= (this.offset - rad);
-                a.t -= (this.offset - rad);
-                a.l += 1;
-                a.w -= (this.offset + rad + 1);
-                a.h -= (this.offset + rad);
-                a.h += 1;
-            }
-        break;
-    };
+    if(this.tabPosition == "bottom"){
+        this.bodyEl = Roo.get(this.createBody(this.el.dom));
+        this.el.addClass("x-tabs-bottom");
+    }
+    this.stripWrap = Roo.get(this.createStrip(this.el.dom), true);
+    this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
+    this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
+    if(Roo.isIE){
+        Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden");
+    }
+    if(this.tabPosition != "bottom"){
+        /** The body element that contains {@link Roo.TabPanelItem} bodies. +
+         * @type Roo.Element
+         */
+        this.bodyEl = Roo.get(this.createBody(this.el.dom));
+        this.el.addClass("x-tabs-top");
+    }
+    this.items = [];
 
-    this.adjusts = a;
+    this.bodyEl.setStyle("position", "relative");
+
+    this.active = null;
+    this.activateDelegate = this.activate.createDelegate(this);
+
+    this.addEvents({
+        /**
+         * @event tabchange
+         * Fires when the active tab changes
+         * @param {Roo.TabPanel} this
+         * @param {Roo.TabPanelItem} activePanel The new active tab
+         */
+        "tabchange": true,
+        /**
+         * @event beforetabchange
+         * Fires before the active tab changes, set cancel to true on the "e" parameter to cancel the change
+         * @param {Roo.TabPanel} this
+         * @param {Object} e Set cancel to true on this object to cancel the tab change
+         * @param {Roo.TabPanelItem} tab The tab being changed to
+         */
+        "beforetabchange" : true
+    });
+
+    Roo.EventManager.onWindowResize(this.onResize, this);
+    this.cpad = this.el.getPadding("lr");
+    this.hiddenCount = 0;
+
+
+    // toolbar on the tabbar support...
+    if (this.toolbar) {
+        var tcfg = this.toolbar;
+        tcfg.container = this.stripEl.child('td.x-tab-strip-toolbar');  
+        this.toolbar = new Roo.Toolbar(tcfg);
+        if (Roo.isSafari) {
+            var tbl = tcfg.container.child('table', true);
+            tbl.setAttribute('width', '100%');
+        }
+        
+    }
+   
+
+
+    Roo.TabPanel.superclass.constructor.call(this);
 };
 
-Roo.Shadow.prototype = {
-    /**
-     * @cfg {String} mode
-     * The shadow display mode.  Supports the following options:<br />
-     * sides: Shadow displays on both sides and bottom only<br />
-     * frame: Shadow displays equally on all four sides<br />
-     * drop: Traditional bottom-right drop shadow (default)
+Roo.extend(Roo.TabPanel, Roo.util.Observable, {
+    /*
+     *@cfg {String} tabPosition "top" or "bottom" (defaults to "top")
      */
-    /**
-     * @cfg {String} offset
-     * The number of pixels to offset the shadow from the element (defaults to 4)
+    tabPosition : "top",
+    /*
+     *@cfg {Number} currentTabWidth The width of the current tab (defaults to 0)
      */
-    offset: 4,
-
-    // private
-    defaultMode: "drop",
+    currentTabWidth : 0,
+    /*
+     *@cfg {Number} minTabWidth The minimum width of a tab (defaults to 40) (ignored if {@link #resizeTabs} is not true)
+     */
+    minTabWidth : 40,
+    /*
+     *@cfg {Number} maxTabWidth The maximum width of a tab (defaults to 250) (ignored if {@link #resizeTabs} is not true)
+     */
+    maxTabWidth : 250,
+    /*
+     *@cfg {Number} preferredTabWidth The preferred (default) width of a tab (defaults to 175) (ignored if {@link #resizeTabs} is not true)
+     */
+    preferredTabWidth : 175,
+    /*
+     *@cfg {Boolean} resizeTabs True to enable dynamic tab resizing (defaults to false)
+     */
+    resizeTabs : false,
+    /*
+     *@cfg {Boolean} monitorResize Set this to true to turn on window resize monitoring (ignored if {@link #resizeTabs} is not true) (defaults to true)
+     */
+    monitorResize : true,
+    /*
+     *@cfg {Object} toolbar xtype description of toolbar to show at the right of the tab bar. 
+     */
+    toolbar : false,
 
     /**
-     * Displays the shadow under the target element
-     * @param {String/HTMLElement/Element} targetEl The id or element under which the shadow should display
+     * Creates a new {@link Roo.TabPanelItem} by looking for an existing element with the provided id -- if it's not found it creates one.
+     * @param {String} id The id of the div to use <b>or create</b>
+     * @param {String} text The text for the tab
+     * @param {String} content (optional) Content to put in the TabPanelItem body
+     * @param {Boolean} closable (optional) True to create a close icon on the tab
+     * @return {Roo.TabPanelItem} The created TabPanelItem
      */
-    show : function(target){
-        target = Roo.get(target);
-        if(!this.el){
-            this.el = Roo.Shadow.Pool.pull();
-            if(this.el.dom.nextSibling != target.dom){
-                this.el.insertBefore(target);
-            }
-        }
-        this.el.setStyle("z-index", this.zIndex || parseInt(target.getStyle("z-index"), 10)-1);
-        if(Roo.isIE){
-            this.el.dom.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius="+(this.offset)+")";
+    addTab : function(id, text, content, closable){
+        var item = new Roo.TabPanelItem(this, id, text, closable);
+        this.addTabItem(item);
+        if(content){
+            item.setContent(content);
         }
-        this.realign(
-            target.getLeft(true),
-            target.getTop(true),
-            target.getWidth(),
-            target.getHeight()
-        );
-        this.el.dom.style.display = "block";
+        return item;
     },
 
     /**
-     * Returns true if the shadow is visible, else false
+     * Returns the {@link Roo.TabPanelItem} with the specified id/index
+     * @param {String/Number} id The id or index of the TabPanelItem to fetch.
+     * @return {Roo.TabPanelItem}
      */
-    isVisible : function(){
-        return this.el ? true : false;  
+    getTab : function(id){
+        return this.items[id];
     },
 
     /**
-     * Direct alignment when values are already available. Show must be called at least once before
-     * calling this method to ensure it is initialized.
-     * @param {Number} left The target element left position
-     * @param {Number} top The target element top position
-     * @param {Number} width The target element width
-     * @param {Number} height The target element height
+     * Hides the {@link Roo.TabPanelItem} with the specified id/index
+     * @param {String/Number} id The id or index of the TabPanelItem to hide.
      */
-    realign : function(l, t, w, h){
-        if(!this.el){
-            return;
-        }
-        var a = this.adjusts, d = this.el.dom, s = d.style;
-        var iea = 0;
-        s.left = (l+a.l)+"px";
-        s.top = (t+a.t)+"px";
-        var sw = (w+a.w), sh = (h+a.h), sws = sw +"px", shs = sh + "px";
- 
-        if(s.width != sws || s.height != shs){
-            s.width = sws;
-            s.height = shs;
-            if(!Roo.isIE){
-                var cn = d.childNodes;
-                var sww = Math.max(0, (sw-12))+"px";
-                cn[0].childNodes[1].style.width = sww;
-                cn[1].childNodes[1].style.width = sww;
-                cn[2].childNodes[1].style.width = sww;
-                cn[1].style.height = Math.max(0, (sh-12))+"px";
-            }
+    hideTab : function(id){
+        var t = this.items[id];
+        if(!t.isHidden()){
+           t.setHidden(true);
+           this.hiddenCount++;
+           this.autoSizeTabs();
         }
     },
 
     /**
-     * Hides this shadow
+     * "Unhides" the {@link Roo.TabPanelItem} with the specified id/index.
+     * @param {String/Number} id The id or index of the TabPanelItem to unhide.
      */
-    hide : function(){
-        if(this.el){
-            this.el.dom.style.display = "none";
-            Roo.Shadow.Pool.push(this.el);
-            delete this.el;
+    unhideTab : function(id){
+        var t = this.items[id];
+        if(t.isHidden()){
+           t.setHidden(false);
+           this.hiddenCount--;
+           this.autoSizeTabs();
         }
     },
 
     /**
-     * Adjust the z-index of this shadow
-     * @param {Number} zindex The new z-index
+     * Adds an existing {@link Roo.TabPanelItem}.
+     * @param {Roo.TabPanelItem} item The TabPanelItem to add
      */
-    setZIndex : function(z){
-        this.zIndex = z;
-        if(this.el){
-            this.el.setStyle("z-index", z);
+    addTabItem : function(item){
+        this.items[item.id] = item;
+        this.items.push(item);
+        if(this.resizeTabs){
+           item.setWidth(this.currentTabWidth || this.preferredTabWidth);
+           this.autoSizeTabs();
+        }else{
+            item.autoSize();
         }
-    }
-};
+    },
 
-// Private utility class that manages the internal Shadow cache
-Roo.Shadow.Pool = function(){
-    var p = [];
-    var markup = Roo.isIE ?
-                 '<div class="x-ie-shadow"></div>' :
-                 '<div class="x-shadow"><div class="xst"><div class="xstl"></div><div class="xstc"></div><div class="xstr"></div></div><div class="xsc"><div class="xsml"></div><div class="xsmc"></div><div class="xsmr"></div></div><div class="xsb"><div class="xsbl"></div><div class="xsbc"></div><div class="xsbr"></div></div></div>';
-    return {
-        pull : function(){
-            var sh = p.shift();
-            if(!sh){
-                sh = Roo.get(Roo.DomHelper.insertHtml("beforeBegin", document.body.firstChild, markup));
-                sh.autoBoxAdjust = false;
+    /**
+     * Removes a {@link Roo.TabPanelItem}.
+     * @param {String/Number} id The id or index of the TabPanelItem to remove.
+     */
+    removeTab : function(id){
+        var items = this.items;
+        var tab = items[id];
+        if(!tab) { return; }
+        var index = items.indexOf(tab);
+        if(this.active == tab && items.length > 1){
+            var newTab = this.getNextAvailable(index);
+            if(newTab) {
+                newTab.activate();
             }
-            return sh;
-        },
-
-        push : function(sh){
-            p.push(sh);
         }
-    };
-}();/*
- * 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">
- */
-
+        this.stripEl.dom.removeChild(tab.pnode.dom);
+        if(tab.bodyEl.dom.parentNode == this.bodyEl.dom){ // if it was moved already prevent error
+            this.bodyEl.dom.removeChild(tab.bodyEl.dom);
+        }
+        items.splice(index, 1);
+        delete this.items[tab.id];
+        tab.fireEvent("close", tab);
+        tab.purgeListeners();
+        this.autoSizeTabs();
+    },
 
-/**
- * @class Roo.SplitBar
- * @extends Roo.util.Observable
- * Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized).
- * <br><br>
- * Usage:
- * <pre><code>
-var split = new Roo.SplitBar("elementToDrag", "elementToSize",
-                   Roo.SplitBar.HORIZONTAL, Roo.SplitBar.LEFT);
-split.setAdapter(new Roo.SplitBar.AbsoluteLayoutAdapter("container"));
-split.minSize = 100;
-split.maxSize = 600;
-split.animate = true;
-split.on('moved', splitterMoved);
-</code></pre>
- * @constructor
- * Create a new SplitBar
- * @param {String/HTMLElement/Roo.Element} dragElement The element to be dragged and act as the SplitBar. 
- * @param {String/HTMLElement/Roo.Element} resizingElement The element to be resized based on where the SplitBar element is dragged 
- * @param {Number} orientation (optional) Either Roo.SplitBar.HORIZONTAL or Roo.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
- * @param {Number} placement (optional) Either Roo.SplitBar.LEFT or Roo.SplitBar.RIGHT for horizontal or  
-                        Roo.SplitBar.TOP or Roo.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the initial
-                        position of the SplitBar).
- */
-Roo.SplitBar = function(dragElement, resizingElement, orientation, placement, existingProxy){
-    
-    /** @private */
-    this.el = Roo.get(dragElement, true);
-    this.el.dom.unselectable = "on";
-    /** @private */
-    this.resizingEl = Roo.get(resizingElement, true);
+    getNextAvailable : function(start){
+        var items = this.items;
+        var index = start;
+        // look for a next tab that will slide over to
+        // replace the one being removed
+        while(index < items.length){
+            var item = items[++index];
+            if(item && !item.isHidden()){
+                return item;
+            }
+        }
+        // if one isn't found select the previous tab (on the left)
+        index = start;
+        while(index >= 0){
+            var item = items[--index];
+            if(item && !item.isHidden()){
+                return item;
+            }
+        }
+        return null;
+    },
 
     /**
-     * @private
-     * The orientation of the split. Either Roo.SplitBar.HORIZONTAL or Roo.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
-     * Note: If this is changed after creating the SplitBar, the placement property must be manually updated
-     * @type Number
-     */
-    this.orientation = orientation || Roo.SplitBar.HORIZONTAL;
-    
-    /**
-     * The minimum size of the resizing element. (Defaults to 0)
-     * @type Number
-     */
-    this.minSize = 0;
-    
-    /**
-     * The maximum size of the resizing element. (Defaults to 2000)
-     * @type Number
-     */
-    this.maxSize = 2000;
-    
-    /**
-     * Whether to animate the transition to the new size
-     * @type Boolean
-     */
-    this.animate = false;
-    
-    /**
-     * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
-     * @type Boolean
+     * Disables a {@link Roo.TabPanelItem}. It cannot be the active tab, if it is this call is ignored.
+     * @param {String/Number} id The id or index of the TabPanelItem to disable.
      */
-    this.useShim = false;
-    
-    /** @private */
-    this.shim = null;
-    
-    if(!existingProxy){
-        /** @private */
-        this.proxy = Roo.SplitBar.createProxy(this.orientation);
-    }else{
-        this.proxy = Roo.get(existingProxy).dom;
-    }
-    /** @private */
-    this.dd = new Roo.dd.DDProxy(this.el.dom.id, "XSplitBars", {dragElId : this.proxy.id});
-    
-    /** @private */
-    this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);
-    
-    /** @private */
-    this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);
-    
-    /** @private */
-    this.dragSpecs = {};
-    
+    disableTab : function(id){
+        var tab = this.items[id];
+        if(tab && this.active != tab){
+            tab.disable();
+        }
+    },
+
     /**
-     * @private The adapter to use to positon and resize elements
+     * Enables a {@link Roo.TabPanelItem} that is disabled.
+     * @param {String/Number} id The id or index of the TabPanelItem to enable.
      */
-    this.adapter = new Roo.SplitBar.BasicLayoutAdapter();
-    this.adapter.init(this);
-    
-    if(this.orientation == Roo.SplitBar.HORIZONTAL){
-        /** @private */
-        this.placement = placement || (this.el.getX() > this.resizingEl.getX() ? Roo.SplitBar.LEFT : Roo.SplitBar.RIGHT);
-        this.el.addClass("x-splitbar-h");
-    }else{
-        /** @private */
-        this.placement = placement || (this.el.getY() > this.resizingEl.getY() ? Roo.SplitBar.TOP : Roo.SplitBar.BOTTOM);
-        this.el.addClass("x-splitbar-v");
-    }
-    
-    this.addEvents({
-        /**
-         * @event resize
-         * Fires when the splitter is moved (alias for {@link #event-moved})
-         * @param {Roo.SplitBar} this
-         * @param {Number} newSize the new width or height
-         */
-        "resize" : true,
-        /**
-         * @event moved
-         * Fires when the splitter is moved
-         * @param {Roo.SplitBar} this
-         * @param {Number} newSize the new width or height
-         */
-        "moved" : true,
-        /**
-         * @event beforeresize
-         * Fires before the splitter is dragged
-         * @param {Roo.SplitBar} this
-         */
-        "beforeresize" : true,
-
-        "beforeapply" : true
-    });
-
-    Roo.util.Observable.call(this);
-};
-
-Roo.extend(Roo.SplitBar, Roo.util.Observable, {
-    onStartProxyDrag : function(x, y){
-        this.fireEvent("beforeresize", this);
-        if(!this.overlay){
-            var o = Roo.DomHelper.insertFirst(document.body,  {cls: "x-drag-overlay", html: "&#160;"}, true);
-            o.unselectable();
-            o.enableDisplayMode("block");
-            // all splitbars share the same overlay
-            Roo.SplitBar.prototype.overlay = o;
-        }
-        this.overlay.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
-        this.overlay.show();
-        Roo.get(this.proxy).setDisplayed("block");
-        var size = this.adapter.getElementSize(this);
-        this.activeMinSize = this.getMinimumSize();;
-        this.activeMaxSize = this.getMaximumSize();;
-        var c1 = size - this.activeMinSize;
-        var c2 = Math.max(this.activeMaxSize - size, 0);
-        if(this.orientation == Roo.SplitBar.HORIZONTAL){
-            this.dd.resetConstraints();
-            this.dd.setXConstraint(
-                this.placement == Roo.SplitBar.LEFT ? c1 : c2, 
-                this.placement == Roo.SplitBar.LEFT ? c2 : c1
-            );
-            this.dd.setYConstraint(0, 0);
-        }else{
-            this.dd.resetConstraints();
-            this.dd.setXConstraint(0, 0);
-            this.dd.setYConstraint(
-                this.placement == Roo.SplitBar.TOP ? c1 : c2, 
-                this.placement == Roo.SplitBar.TOP ? c2 : c1
-            );
-         }
-        this.dragSpecs.startSize = size;
-        this.dragSpecs.startPoint = [x, y];
-        Roo.dd.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);
+    enableTab : function(id){
+        var tab = this.items[id];
+        tab.enable();
     },
-    
-    /** 
-     * @private Called after the drag operation by the DDProxy
+
+    /**
+     * Activates a {@link Roo.TabPanelItem}. The currently active one will be deactivated.
+     * @param {String/Number} id The id or index of the TabPanelItem to activate.
+     * @return {Roo.TabPanelItem} The TabPanelItem.
      */
-    onEndProxyDrag : function(e){
-        Roo.get(this.proxy).setDisplayed(false);
-        var endPoint = Roo.lib.Event.getXY(e);
-        if(this.overlay){
-            this.overlay.hide();
+    activate : function(id){
+        var tab = this.items[id];
+        if(!tab){
+            return null;
         }
-        var newSize;
-        if(this.orientation == Roo.SplitBar.HORIZONTAL){
-            newSize = this.dragSpecs.startSize + 
-                (this.placement == Roo.SplitBar.LEFT ?
-                    endPoint[0] - this.dragSpecs.startPoint[0] :
-                    this.dragSpecs.startPoint[0] - endPoint[0]
-                );
-        }else{
-            newSize = this.dragSpecs.startSize + 
-                (this.placement == Roo.SplitBar.TOP ?
-                    endPoint[1] - this.dragSpecs.startPoint[1] :
-                    this.dragSpecs.startPoint[1] - endPoint[1]
-                );
+        if(tab == this.active || tab.disabled){
+            return tab;
         }
-        newSize = Math.min(Math.max(newSize, this.activeMinSize), this.activeMaxSize);
-        if(newSize != this.dragSpecs.startSize){
-            if(this.fireEvent('beforeapply', this, newSize) !== false){
-                this.adapter.setElementSize(this, newSize);
-                this.fireEvent("moved", this, newSize);
-                this.fireEvent("resize", this, newSize);
+        var e = {};
+        this.fireEvent("beforetabchange", this, e, tab);
+        if(e.cancel !== true && !tab.disabled){
+            if(this.active){
+                this.active.hide();
             }
+            this.active = this.items[id];
+            this.active.show();
+            this.fireEvent("tabchange", this, this.active);
         }
+        return tab;
     },
-    
+
     /**
-     * Get the adapter this SplitBar uses
-     * @return The adapter object
+     * Gets the active {@link Roo.TabPanelItem}.
+     * @return {Roo.TabPanelItem} The active TabPanelItem or null if none are active.
      */
-    getAdapter : function(){
-        return this.adapter;
+    getActiveTab : function(){
+        return this.active;
     },
-    
+
     /**
-     * Set the adapter this SplitBar uses
-     * @param {Object} adapter A SplitBar adapter object
+     * Updates the tab body element to fit the height of the container element
+     * for overflow scrolling
+     * @param {Number} targetHeight (optional) Override the starting height from the elements height
      */
-    setAdapter : function(adapter){
-        this.adapter = adapter;
-        this.adapter.init(this);
+    syncHeight : function(targetHeight){
+        var height = (targetHeight || this.el.getHeight())-this.el.getBorderWidth("tb")-this.el.getPadding("tb");
+        var bm = this.bodyEl.getMargins();
+        var newHeight = height-(this.stripWrap.getHeight()||0)-(bm.top+bm.bottom);
+        this.bodyEl.setHeight(newHeight);
+        return newHeight;
     },
-    
+
+    onResize : function(){
+        if(this.monitorResize){
+            this.autoSizeTabs();
+        }
+    },
+
     /**
-     * Gets the minimum size for the resizing element
-     * @return {Number} The minimum size
+     * Disables tab resizing while tabs are being added (if {@link #resizeTabs} is false this does nothing)
      */
-    getMinimumSize : function(){
-        return this.minSize;
+    beginUpdate : function(){
+        this.updating = true;
     },
-    
+
     /**
-     * Sets the minimum size for the resizing element
-     * @param {Number} minSize The minimum size
+     * Stops an update and resizes the tabs (if {@link #resizeTabs} is false this does nothing)
      */
-    setMinimumSize : function(minSize){
-        this.minSize = minSize;
+    endUpdate : function(){
+        this.updating = false;
+        this.autoSizeTabs();
     },
-    
+
     /**
-     * Gets the maximum size for the resizing element
-     * @return {Number} The maximum size
+     * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
      */
-    getMaximumSize : function(){
-        return this.maxSize;
+    autoSizeTabs : function(){
+        var count = this.items.length;
+        var vcount = count - this.hiddenCount;
+        if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) {
+            return;
+        }
+        var w = Math.max(this.el.getWidth() - this.cpad, 10);
+        var availWidth = Math.floor(w / vcount);
+        var b = this.stripBody;
+        if(b.getWidth() > w){
+            var tabs = this.items;
+            this.setTabWidth(Math.max(availWidth, this.minTabWidth)-2);
+            if(availWidth < this.minTabWidth){
+                /*if(!this.sleft){    // incomplete scrolling code
+                    this.createScrollButtons();
+                }
+                this.showScroll();
+                this.stripClip.setWidth(w - (this.sleft.getWidth()+this.sright.getWidth()));*/
+            }
+        }else{
+            if(this.currentTabWidth < this.preferredTabWidth){
+                this.setTabWidth(Math.min(availWidth, this.preferredTabWidth)-2);
+            }
+        }
     },
-    
+
     /**
-     * Sets the maximum size for the resizing element
-     * @param {Number} maxSize The maximum size
+     * Returns the number of tabs in this TabPanel.
+     * @return {Number}
      */
-    setMaximumSize : function(maxSize){
-        this.maxSize = maxSize;
-    },
-    
+     getCount : function(){
+         return this.items.length;
+     },
+
     /**
-     * Sets the initialize size for the resizing element
-     * @param {Number} size The initial size
+     * Resizes all the tabs to the passed width
+     * @param {Number} The new width
      */
-    setCurrentSize : function(size){
-        var oldAnimate = this.animate;
-        this.animate = false;
-        this.adapter.setElementSize(this, size);
-        this.animate = oldAnimate;
+    setTabWidth : function(width){
+        this.currentTabWidth = width;
+        for(var i = 0, len = this.items.length; i < len; i++) {
+        	if(!this.items[i].isHidden()) {
+                this.items[i].setWidth(width);
+            }
+        }
     },
-    
+
     /**
-     * Destroy this splitbar. 
-     * @param {Boolean} removeEl True to remove the element
+     * Destroys this TabPanel
+     * @param {Boolean} removeEl (optional) True to remove the element from the DOM as well (defaults to undefined)
      */
     destroy : function(removeEl){
-        if(this.shim){
-            this.shim.remove();
+        Roo.EventManager.removeResizeListener(this.onResize, this);
+        for(var i = 0, len = this.items.length; i < len; i++){
+            this.items[i].purgeListeners();
         }
-        this.dd.unreg();
-        this.proxy.parentNode.removeChild(this.proxy);
-        if(removeEl){
+        if(removeEl === true){
+            this.el.update("");
             this.el.remove();
         }
     }
 });
 
 /**
- * @private static Create our own proxy element element. So it will be the same same size on all browsers, we won't use borders. Instead we use a background color.
- */
-Roo.SplitBar.createProxy = function(dir){
-    var proxy = new Roo.Element(document.createElement("div"));
-    proxy.unselectable();
-    var cls = 'x-splitbar-proxy';
-    proxy.addClass(cls + ' ' + (dir == Roo.SplitBar.HORIZONTAL ? cls +'-h' : cls + '-v'));
-    document.body.appendChild(proxy.dom);
-    return proxy.dom;
-};
-
-/** 
- * @class Roo.SplitBar.BasicLayoutAdapter
- * Default Adapter. It assumes the splitter and resizing element are not positioned
- * elements and only gets/sets the width of the element. Generally used for table based layouts.
+ * @class Roo.TabPanelItem
+ * @extends Roo.util.Observable
+ * Represents an individual item (tab plus body) in a TabPanel.
+ * @param {Roo.TabPanel} tabPanel The {@link Roo.TabPanel} this TabPanelItem belongs to
+ * @param {String} id The id of this TabPanelItem
+ * @param {String} text The text for the tab of this TabPanelItem
+ * @param {Boolean} closable True to allow this TabPanelItem to be closable (defaults to false)
  */
-Roo.SplitBar.BasicLayoutAdapter = function(){
-};
-
-Roo.SplitBar.BasicLayoutAdapter.prototype = {
-    // do nothing for now
-    init : function(s){
-    
-    },
+Roo.TabPanelItem = function(tabPanel, id, text, closable){
     /**
-     * Called before drag operations to get the current size of the resizing element. 
-     * @param {Roo.SplitBar} s The SplitBar using this adapter
+     * The {@link Roo.TabPanel} this TabPanelItem belongs to
+     * @type Roo.TabPanel
      */
-     getElementSize : function(s){
-        if(s.orientation == Roo.SplitBar.HORIZONTAL){
-            return s.resizingEl.getWidth();
-        }else{
-            return s.resizingEl.getHeight();
-        }
-    },
-    
+    this.tabPanel = tabPanel;
     /**
-     * Called after drag operations to set the size of the resizing element.
-     * @param {Roo.SplitBar} s The SplitBar using this adapter
-     * @param {Number} newSize The new size to set
-     * @param {Function} onComplete A function to be invoked when resizing is complete
+     * The id for this TabPanelItem
+     * @type String
      */
-    setElementSize : function(s, newSize, onComplete){
-        if(s.orientation == Roo.SplitBar.HORIZONTAL){
-            if(!s.animate){
-                s.resizingEl.setWidth(newSize);
-                if(onComplete){
-                    onComplete(s, newSize);
-                }
-            }else{
-                s.resizingEl.setWidth(newSize, true, .1, onComplete, 'easeOut');
-            }
-        }else{
-            
-            if(!s.animate){
-                s.resizingEl.setHeight(newSize);
-                if(onComplete){
-                    onComplete(s, newSize);
-                }
-            }else{
-                s.resizingEl.setHeight(newSize, true, .1, onComplete, 'easeOut');
-            }
-        }
-    }
-};
+    this.id = id;
+    /** @private */
+    this.disabled = false;
+    /** @private */
+    this.text = text;
+    /** @private */
+    this.loaded = false;
+    this.closable = closable;
 
-/** 
- *@class Roo.SplitBar.AbsoluteLayoutAdapter
- * @extends Roo.SplitBar.BasicLayoutAdapter
- * Adapter that  moves the splitter element to align with the resized sizing element. 
- * Used with an absolute positioned SplitBar.
- * @param {String/HTMLElement/Roo.Element} container The container that wraps around the absolute positioned content. If it's
- * document.body, make sure you assign an id to the body element.
- */
-Roo.SplitBar.AbsoluteLayoutAdapter = function(container){
-    this.basic = new Roo.SplitBar.BasicLayoutAdapter();
-    this.container = Roo.get(container);
-};
+    /**
+     * The body element for this TabPanelItem.
+     * @type Roo.Element
+     */
+    this.bodyEl = Roo.get(tabPanel.createItemBody(tabPanel.bodyEl.dom, id));
+    this.bodyEl.setVisibilityMode(Roo.Element.VISIBILITY);
+    this.bodyEl.setStyle("display", "block");
+    this.bodyEl.setStyle("zoom", "1");
+    this.hideAction();
 
-Roo.SplitBar.AbsoluteLayoutAdapter.prototype = {
-    init : function(s){
-        this.basic.init(s);
-    },
-    
-    getElementSize : function(s){
-        return this.basic.getElementSize(s);
-    },
-    
-    setElementSize : function(s, newSize, onComplete){
-        this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s]));
-    },
-    
-    moveSplitter : function(s){
-        var yes = Roo.SplitBar;
-        switch(s.placement){
-            case yes.LEFT:
-                s.el.setX(s.resizingEl.getRight());
-                break;
-            case yes.RIGHT:
-                s.el.setStyle("right", (this.container.getWidth() - s.resizingEl.getLeft()) + "px");
-                break;
-            case yes.TOP:
-                s.el.setY(s.resizingEl.getBottom());
-                break;
-            case yes.BOTTOM:
-                s.el.setY(s.resizingEl.getTop() - s.el.getHeight());
-                break;
-        }
-    }
-};
-
-/**
- * Orientation constant - Create a vertical SplitBar
- * @static
- * @type Number
- */
-Roo.SplitBar.VERTICAL = 1;
-
-/**
- * Orientation constant - Create a horizontal SplitBar
- * @static
- * @type Number
- */
-Roo.SplitBar.HORIZONTAL = 2;
-
-/**
- * Placement constant - The resizing element is to the left of the splitter element
- * @static
- * @type Number
- */
-Roo.SplitBar.LEFT = 1;
-
-/**
- * Placement constant - The resizing element is to the right of the splitter element
- * @static
- * @type Number
- */
-Roo.SplitBar.RIGHT = 2;
-
-/**
- * Placement constant - The resizing element is positioned above the splitter element
- * @static
- * @type Number
- */
-Roo.SplitBar.TOP = 3;
-
-/**
- * Placement constant - The resizing element is positioned under splitter element
- * @static
- * @type Number
- */
-Roo.SplitBar.BOTTOM = 4;
-/*
- * 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.View
- * @extends Roo.util.Observable
- * Create a "View" for an element based on a data model or UpdateManager and the supplied DomHelper template. 
- * This class also supports single and multi selection modes. <br>
- * Create a data model bound view:
- <pre><code>
- var store = new Roo.data.Store(...);
-
- var view = new Roo.View({
-    el : "my-element",
-    tpl : '&lt;div id="{0}"&gt;{2} - {1}&lt;/div&gt;', // auto create template
- 
-    singleSelect: true,
-    selectedClass: "ydataview-selected",
-    store: store
- });
-
- // listen for node click?
- view.on("click", function(vw, index, node, e){
- alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
- });
-
- // load XML data
- dataModel.load("foobar.xml");
- </code></pre>
- For an example of creating a JSON/UpdateManager view, see {@link Roo.JsonView}.
- * <br><br>
- * <b>Note: The root of your template must be a single node. Table/row implementations may work but are not supported due to
- * IE"s limited insertion support with tables and Opera"s faulty event bubbling.</b>
- * 
- * Note: old style constructor is still suported (container, template, config)
- * 
- * @constructor
- * Create a new View
- * @param {Object} config The config object
- * 
- */
-Roo.View = function(config, depreciated_tpl, depreciated_config){
-    
-    this.parent = false;
-    
-    if (typeof(depreciated_tpl) == 'undefined') {
-        // new way.. - universal constructor.
-        Roo.apply(this, config);
-        this.el  = Roo.get(this.el);
-    } else {
-        // old format..
-        this.el  = Roo.get(config);
-        this.tpl = depreciated_tpl;
-        Roo.apply(this, depreciated_config);
-    }
-    this.wrapEl  = this.el.wrap().wrap();
-    ///this.el = this.wrapEla.appendChild(document.createElement("div"));
-    
-    
-    if(typeof(this.tpl) == "string"){
-        this.tpl = new Roo.Template(this.tpl);
-    } else {
-        // support xtype ctors..
-        this.tpl = new Roo.factory(this.tpl, Roo);
-    }
-    
-    
-    this.tpl.compile();
-    
+    var els = tabPanel.createStripElements(tabPanel.stripEl.dom, text, closable);
+    /** @private */
+    this.el = Roo.get(els.el, true);
+    this.inner = Roo.get(els.inner, true);
+    this.textEl = Roo.get(this.el.dom.firstChild.firstChild.firstChild, true);
+    this.pnode = Roo.get(els.el.parentNode, true);
+    this.el.on("mousedown", this.onTabMouseDown, this);
+    this.el.on("click", this.onTabClick, this);
     /** @private */
+    if(closable){
+        var c = Roo.get(els.close, true);
+        c.dom.title = this.closeText;
+        c.addClassOnOver("close-over");
+        c.on("click", this.closeClick, this);
+     }
+
     this.addEvents({
-        /**
-         * @event beforeclick
-         * Fires before a click is processed. Returns false to cancel the default action.
-         * @param {Roo.View} this
-         * @param {Number} index The index of the target node
-         * @param {HTMLElement} node The target node
-         * @param {Roo.EventObject} e The raw event object
-         */
-            "beforeclick" : true,
-        /**
-         * @event click
-         * Fires when a template node is clicked.
-         * @param {Roo.View} this
-         * @param {Number} index The index of the target node
-         * @param {HTMLElement} node The target node
-         * @param {Roo.EventObject} e The raw event object
-         */
-            "click" : true,
-        /**
-         * @event dblclick
-         * Fires when a template node is double clicked.
-         * @param {Roo.View} this
-         * @param {Number} index The index of the target node
-         * @param {HTMLElement} node The target node
-         * @param {Roo.EventObject} e The raw event object
-         */
-            "dblclick" : true,
-        /**
-         * @event contextmenu
-         * Fires when a template node is right clicked.
-         * @param {Roo.View} this
-         * @param {Number} index The index of the target node
-         * @param {HTMLElement} node The target node
-         * @param {Roo.EventObject} e The raw event object
+         /**
+         * @event activate
+         * Fires when this tab becomes the active tab.
+         * @param {Roo.TabPanel} tabPanel The parent TabPanel
+         * @param {Roo.TabPanelItem} this
          */
-            "contextmenu" : true,
+        "activate": true,
         /**
-         * @event selectionchange
-         * Fires when the selected nodes change.
-         * @param {Roo.View} this
-         * @param {Array} selections Array of the selected nodes
+         * @event beforeclose
+         * Fires before this tab is closed. To cancel the close, set cancel to true on e (e.cancel = true).
+         * @param {Roo.TabPanelItem} this
+         * @param {Object} e Set cancel to true on this object to cancel the close.
          */
-            "selectionchange" : true,
-    
+        "beforeclose": true,
         /**
-         * @event beforeselect
-         * Fires before a selection is made. If any handlers return false, the selection is cancelled.
-         * @param {Roo.View} this
-         * @param {HTMLElement} node The node to be selected
-         * @param {Array} selections Array of currently selected nodes
+         * @event close
+         * Fires when this tab is closed.
+         * @param {Roo.TabPanelItem} this
          */
-            "beforeselect" : true,
+         "close": true,
         /**
-         * @event preparedata
-         * Fires on every row to render, to allow you to change the data.
-         * @param {Roo.View} this
-         * @param {Object} data to be rendered (change this)
+         * @event deactivate
+         * Fires when this tab is no longer the active tab.
+         * @param {Roo.TabPanel} tabPanel The parent TabPanel
+         * @param {Roo.TabPanelItem} this
          */
-          "preparedata" : true
-          
-          
-        });
-
-
-
-    this.el.on({
-        "click": this.onClick,
-        "dblclick": this.onDblClick,
-        "contextmenu": this.onContextMenu,
-        scope:this
+         "deactivate" : true
     });
+    this.hidden = false;
 
-    this.selections = [];
-    this.nodes = [];
-    this.cmp = new Roo.CompositeElementLite([]);
-    if(this.store){
-        this.store = Roo.factory(this.store, Roo.data);
-        this.setStore(this.store, true);
-    }
-    
-    if ( this.footer && this.footer.xtype) {
-           
-         var fctr = this.wrapEl.appendChild(document.createElement("div"));
-        
-        this.footer.dataSource = this.store;
-        this.footer.container = fctr;
-        this.footer = Roo.factory(this.footer, Roo);
-        fctr.insertFirst(this.el);
-        
-        // this is a bit insane - as the paging toolbar seems to detach the el..
-//        dom.parentNode.parentNode.parentNode
-         // they get detached?
-    }
-    
-    
-    Roo.View.superclass.constructor.call(this);
-    
-    
+    Roo.TabPanelItem.superclass.constructor.call(this);
 };
 
-Roo.extend(Roo.View, Roo.util.Observable, {
-    
-     /**
-     * @cfg {Roo.data.Store} store Data store to load data from.
-     */
-    store : false,
-    
+Roo.extend(Roo.TabPanelItem, Roo.util.Observable, {
+    purgeListeners : function(){
+       Roo.util.Observable.prototype.purgeListeners.call(this);
+       this.el.removeAllListeners();
+    },
     /**
-     * @cfg {String|Roo.Element} el The container element.
+     * Shows this TabPanelItem -- this <b>does not</b> deactivate the currently active TabPanelItem.
      */
-    el : '',
-    
+    show : function(){
+        this.pnode.addClass("on");
+        this.showAction();
+        if(Roo.isOpera){
+            this.tabPanel.stripWrap.repaint();
+        }
+        this.fireEvent("activate", this.tabPanel, this);
+    },
+
     /**
-     * @cfg {String|Roo.Template} tpl The template used by this View 
+     * Returns true if this tab is the active tab.
+     * @return {Boolean}
      */
-    tpl : false,
+    isActive : function(){
+        return this.tabPanel.getActiveTab() == this;
+    },
+
     /**
-     * @cfg {String} dataName the named area of the template to use as the data area
-     *                          Works with domtemplates roo-name="name"
+     * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
      */
-    dataName: false,
+    hide : function(){
+        this.pnode.removeClass("on");
+        this.hideAction();
+        this.fireEvent("deactivate", this.tabPanel, this);
+    },
+
+    hideAction : function(){
+        this.bodyEl.hide();
+        this.bodyEl.setStyle("position", "absolute");
+        this.bodyEl.setLeft("-20000px");
+        this.bodyEl.setTop("-20000px");
+    },
+
+    showAction : function(){
+        this.bodyEl.setStyle("position", "relative");
+        this.bodyEl.setTop("");
+        this.bodyEl.setLeft("");
+        this.bodyEl.show();
+    },
+
     /**
-     * @cfg {String} selectedClass The css class to add to selected nodes
-     */
-    selectedClass : "x-view-selected",
-     /**
-     * @cfg {String} emptyText The empty text to show when nothing is loaded.
+     * Set the tooltip for the tab.
+     * @param {String} tooltip The tab's tooltip
      */
-    emptyText : "",
-    
+    setTooltip : function(text){
+        if(Roo.QuickTips && Roo.QuickTips.isEnabled()){
+            this.textEl.dom.qtip = text;
+            this.textEl.dom.removeAttribute('title');
+        }else{
+            this.textEl.dom.title = text;
+        }
+    },
+
+    onTabClick : function(e){
+        e.preventDefault();
+        this.tabPanel.activate(this.id);
+    },
+
+    onTabMouseDown : function(e){
+        e.preventDefault();
+        this.tabPanel.activate(this.id);
+    },
+
+    getWidth : function(){
+        return this.inner.getWidth();
+    },
+
+    setWidth : function(width){
+        var iwidth = width - this.pnode.getPadding("lr");
+        this.inner.setWidth(iwidth);
+        this.textEl.setWidth(iwidth-this.inner.getPadding("lr"));
+        this.pnode.setWidth(width);
+    },
+
     /**
-     * @cfg {String} text to display on mask (default Loading)
+     * Show or hide the tab
+     * @param {Boolean} hidden True to hide or false to show.
      */
-    mask : false,
+    setHidden : function(hidden){
+        this.hidden = hidden;
+        this.pnode.setStyle("display", hidden ? "none" : "");
+    },
+
     /**
-     * @cfg {Boolean} multiSelect Allow multiple selection
+     * Returns true if this tab is "hidden"
+     * @return {Boolean}
      */
-    multiSelect : false,
+    isHidden : function(){
+        return this.hidden;
+    },
+
     /**
-     * @cfg {Boolean} singleSelect Allow single selection
+     * Returns the text for this tab
+     * @return {String}
      */
-    singleSelect:  false,
-    
+    getText : function(){
+        return this.text;
+    },
+
+    autoSize : function(){
+        //this.el.beginMeasure();
+        this.textEl.setWidth(1);
+        /*
+         *  #2804 [new] Tabs in Roojs
+         *  increase the width by 2-4 pixels to prevent the ellipssis showing in chrome
+         */
+        this.setWidth(this.textEl.dom.scrollWidth+this.pnode.getPadding("lr")+this.inner.getPadding("lr") + 2);
+        //this.el.endMeasure();
+    },
+
     /**
-     * @cfg {Boolean} toggleSelect - selecting 
+     * Sets the text for the tab (Note: this also sets the tooltip text)
+     * @param {String} text The tab's text and tooltip
      */
-    toggleSelect : false,
-    
+    setText : function(text){
+        this.text = text;
+        this.textEl.update(text);
+        this.setTooltip(text);
+        if(!this.tabPanel.resizeTabs){
+            this.autoSize();
+        }
+    },
     /**
-     * @cfg {Boolean} tickable - selecting 
+     * Activates this TabPanelItem -- this <b>does</b> deactivate the currently active TabPanelItem.
      */
-    tickable : false,
-    
+    activate : function(){
+        this.tabPanel.activate(this.id);
+    },
+
     /**
-     * Returns the element this view is bound to.
-     * @return {Roo.Element}
+     * Disables this TabPanelItem -- this does nothing if this is the active TabPanelItem.
      */
-    getEl : function(){
-        return this.wrapEl;
+    disable : function(){
+        if(this.tabPanel.active != this){
+            this.disabled = true;
+            this.pnode.addClass("disabled");
+        }
     },
-    
-    
 
     /**
-     * Refreshes the view. - called by datachanged on the store. - do not call directly.
+     * Enables this TabPanelItem if it was previously disabled.
      */
-    refresh : function(){
-        //Roo.log('refresh');
-        var t = this.tpl;
-        
-        // if we are using something like 'domtemplate', then
-        // the what gets used is:
-        // t.applySubtemplate(NAME, data, wrapping data..)
-        // the outer template then get' applied with
-        //     the store 'extra data'
-        // and the body get's added to the
-        //      roo-name="data" node?
-        //      <span class='roo-tpl-{name}'></span> ?????
-        
-        
-        
-        this.clearSelections();
-        this.el.update("");
-        var html = [];
-        var records = this.store.getRange();
-        if(records.length < 1) {
-            
-            // is this valid??  = should it render a template??
-            
-            this.el.update(this.emptyText);
-            return;
-        }
-        var el = this.el;
-        if (this.dataName) {
-            this.el.update(t.apply(this.store.meta)); //????
-            el = this.el.child('.roo-tpl-' + this.dataName);
-        }
-        
-        for(var i = 0, len = records.length; i < len; i++){
-            var data = this.prepareData(records[i].data, i, records[i]);
-            this.fireEvent("preparedata", this, data, i, records[i]);
-            
-            var d = Roo.apply({}, data);
-            
-            if(this.tickable){
-                Roo.apply(d, {'roo-id' : Roo.id()});
-                
-                var _this = this;
-            
-                Roo.each(this.parent.item, function(item){
-                    if(item[_this.parent.valueField] != data[_this.parent.valueField]){
-                        return;
-                    }
-                    Roo.apply(d, {'roo-data-checked' : 'checked'});
-                });
-            }
-            
-            html[html.length] = Roo.util.Format.trim(
-                this.dataName ?
-                    t.applySubtemplate(this.dataName, d, this.store.meta) :
-                    t.apply(d)
-            );
-        }
-        
-        
-        
-        el.update(html.join(""));
-        this.nodes = el.dom.childNodes;
-        this.updateIndexes(0);
+    enable : function(){
+        this.disabled = false;
+        this.pnode.removeClass("disabled");
     },
-    
 
     /**
-     * Function to override to reformat the data that is sent to
-     * the template for each node.
-     * DEPRICATED - use the preparedata event handler.
-     * @param {Array/Object} data The raw data (array of colData for a data model bound view or
-     * a JSON object for an UpdateManager bound view).
+     * Sets the content for this TabPanelItem.
+     * @param {String} content The content
+     * @param {Boolean} loadScripts true to look for and load scripts
      */
-    prepareData : function(data, index, record)
-    {
-        this.fireEvent("preparedata", this, data, index, record);
-        return data;
-    },
-
-    onUpdate : function(ds, record){
-        // Roo.log('on update');   
-        this.clearSelections();
-        var index = this.store.indexOf(record);
-        var n = this.nodes[index];
-        this.tpl.insertBefore(n, this.prepareData(record.data, index, record));
-        n.parentNode.removeChild(n);
-        this.updateIndexes(index, index);
-    },
-
-    
-    
-// --------- FIXME     
-    onAdd : function(ds, records, index)
-    {
-        //Roo.log(['on Add', ds, records, index] );        
-        this.clearSelections();
-        if(this.nodes.length == 0){
-            this.refresh();
-            return;
-        }
-        var n = this.nodes[index];
-        for(var i = 0, len = records.length; i < len; i++){
-            var d = this.prepareData(records[i].data, i, records[i]);
-            if(n){
-                this.tpl.insertBefore(n, d);
-            }else{
-                
-                this.tpl.append(this.el, d);
-            }
-        }
-        this.updateIndexes(index);
-    },
-
-    onRemove : function(ds, record, index){
-       // Roo.log('onRemove');
-        this.clearSelections();
-        var el = this.dataName  ?
-            this.el.child('.roo-tpl-' + this.dataName) :
-            this.el; 
-        
-        el.dom.removeChild(this.nodes[index]);
-        this.updateIndexes(index);
+    setContent : function(content, loadScripts){
+        this.bodyEl.update(content, loadScripts);
     },
 
     /**
-     * Refresh an individual node.
-     * @param {Number} index
+     * Gets the {@link Roo.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
+     * @return {Roo.UpdateManager} The UpdateManager
      */
-    refreshNode : function(index){
-        this.onUpdate(this.store, this.store.getAt(index));
-    },
-
-    updateIndexes : function(startIndex, endIndex){
-        var ns = this.nodes;
-        startIndex = startIndex || 0;
-        endIndex = endIndex || ns.length - 1;
-        for(var i = startIndex; i <= endIndex; i++){
-            ns[i].nodeIndex = i;
-        }
+    getUpdateManager : function(){
+        return this.bodyEl.getUpdateManager();
     },
 
     /**
-     * Changes the data store this view uses and refresh the view.
-     * @param {Store} store
+     * Set a URL to be used to load the content for this TabPanelItem.
+     * @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 TabPanelItem is activated. (Defaults to false)
+     * @return {Roo.UpdateManager} The UpdateManager
      */
-    setStore : function(store, initial){
-        if(!initial && this.store){
-            this.store.un("datachanged", this.refresh);
-            this.store.un("add", this.onAdd);
-            this.store.un("remove", this.onRemove);
-            this.store.un("update", this.onUpdate);
-            this.store.un("clear", this.refresh);
-            this.store.un("beforeload", this.onBeforeLoad);
-            this.store.un("load", this.onLoad);
-            this.store.un("loadexception", this.onLoad);
-        }
-        if(store){
-          
-            store.on("datachanged", this.refresh, this);
-            store.on("add", this.onAdd, this);
-            store.on("remove", this.onRemove, this);
-            store.on("update", this.onUpdate, this);
-            store.on("clear", this.refresh, this);
-            store.on("beforeload", this.onBeforeLoad, this);
-            store.on("load", this.onLoad, this);
-            store.on("loadexception", this.onLoad, this);
-        }
-        
-        if(store){
-            this.refresh();
+    setUrl : function(url, params, loadOnce){
+        if(this.refreshDelegate){
+            this.un('activate', this.refreshDelegate);
         }
+        this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
+        this.on("activate", this.refreshDelegate);
+        return this.bodyEl.getUpdateManager();
     },
-    /**
-     * onbeforeLoad - masks the loading area.
-     *
-     */
-    onBeforeLoad : function(store,opts)
-    {
-         //Roo.log('onBeforeLoad');   
-        if (!opts.add) {
-            this.el.update("");
+
+    /** @private */
+    _handleRefresh : function(url, params, loadOnce){
+        if(!loadOnce || !this.loaded){
+            var updater = this.bodyEl.getUpdateManager();
+            updater.update(url, params, this._setLoaded.createDelegate(this));
         }
-        this.el.mask(this.mask ? this.mask : "Loading" ); 
-    },
-    onLoad : function ()
-    {
-        this.el.unmask();
     },
-    
 
     /**
-     * Returns the template node the passed child belongs to or null if it doesn't belong to one.
-     * @param {HTMLElement} node
-     * @return {HTMLElement} The template node
+     *   Forces a content refresh from the URL specified in the {@link #setUrl} method.
+     *   Will fail silently if the setUrl method has not been called.
+     *   This does not activate the panel, just updates its content.
      */
-    findItemFromChild : function(node){
-        var el = this.dataName  ?
-            this.el.child('.roo-tpl-' + this.dataName,true) :
-            this.el.dom; 
-        
-        if(!node || node.parentNode == el){
-		    return node;
-	    }
-	    var p = node.parentNode;
-	    while(p && p != el){
-            if(p.parentNode == el){
-            	return p;
-            }
-            p = p.parentNode;
-        }
-	    return null;
-    },
-
-    /** @ignore */
-    onClick : function(e){
-        var item = this.findItemFromChild(e.getTarget());
-        if(item){
-            var index = this.indexOf(item);
-            if(this.onItemClick(item, index, e) !== false){
-                this.fireEvent("click", this, index, item, e);
-            }
-        }else{
-            this.clearSelections();
+    refresh : function(){
+        if(this.refreshDelegate){
+           this.loaded = false;
+           this.refreshDelegate();
         }
     },
 
-    /** @ignore */
-    onContextMenu : function(e){
-        var item = this.findItemFromChild(e.getTarget());
-        if(item){
-            this.fireEvent("contextmenu", this, this.indexOf(item), item, e);
-        }
+    /** @private */
+    _setLoaded : function(){
+        this.loaded = true;
     },
 
-    /** @ignore */
-    onDblClick : function(e){
-        var item = this.findItemFromChild(e.getTarget());
-        if(item){
-            this.fireEvent("dblclick", this, this.indexOf(item), item, e);
+    /** @private */
+    closeClick : function(e){
+        var o = {};
+        e.stopEvent();
+        this.fireEvent("beforeclose", this, o);
+        if(o.cancel !== true){
+            this.tabPanel.removeTab(this.id);
         }
     },
+    /**
+     * The text displayed in the tooltip for the close icon.
+     * @type String
+     */
+    closeText : "Close this tab"
+});
 
-    onItemClick : function(item, index, e)
-    {
-        if(this.fireEvent("beforeclick", this, index, item, e) === false){
-            return false;
-        }
-        if (this.toggleSelect) {
-            var m = this.isSelected(item) ? 'unselect' : 'select';
-            //Roo.log(m);
-            var _t = this;
-            _t[m](item, true, false);
-            return true;
+/** @private */
+Roo.TabPanel.prototype.createStrip = function(container){
+    var strip = document.createElement("div");
+    strip.className = "x-tabs-wrap";
+    container.appendChild(strip);
+    return strip;
+};
+/** @private */
+Roo.TabPanel.prototype.createStripList = function(strip){
+    // div wrapper for retard IE
+    // returns the "tr" element.
+    strip.innerHTML = '<div class="x-tabs-strip-wrap">'+
+        '<table class="x-tabs-strip" cellspacing="0" cellpadding="0" border="0"><tbody><tr>'+
+        '<td class="x-tab-strip-toolbar"></td></tr></tbody></table></div>';
+    return strip.firstChild.firstChild.firstChild.firstChild;
+};
+/** @private */
+Roo.TabPanel.prototype.createBody = function(container){
+    var body = document.createElement("div");
+    Roo.id(body, "tab-body");
+    Roo.fly(body).addClass("x-tabs-body");
+    container.appendChild(body);
+    return body;
+};
+/** @private */
+Roo.TabPanel.prototype.createItemBody = function(bodyEl, id){
+    var body = Roo.getDom(id);
+    if(!body){
+        body = document.createElement("div");
+        body.id = id;
+    }
+    Roo.fly(body).addClass("x-tabs-item-body");
+    bodyEl.insertBefore(body, bodyEl.firstChild);
+    return body;
+};
+/** @private */
+Roo.TabPanel.prototype.createStripElements = function(stripEl, text, closable){
+    var td = document.createElement("td");
+    stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
+    //stripEl.appendChild(td);
+    if(closable){
+        td.className = "x-tabs-closable";
+        if(!this.closeTpl){
+            this.closeTpl = new Roo.Template(
+               '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
+               '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span>' +
+               '<div unselectable="on" class="close-icon">&#160;</div></em></span></a>'
+            );
         }
-        if(this.multiSelect || this.singleSelect){
-            if(this.multiSelect && e.shiftKey && this.lastSelection){
-                this.select(this.getNodes(this.indexOf(this.lastSelection), index), false);
-            }else{
-                this.select(item, this.multiSelect && e.ctrlKey);
-                this.lastSelection = item;
-            }
-            
-            if(!this.tickable){
-                e.preventDefault();
-            }
-            
+        var el = this.closeTpl.overwrite(td, {"text": text});
+        var close = el.getElementsByTagName("div")[0];
+        var inner = el.getElementsByTagName("em")[0];
+        return {"el": el, "close": close, "inner": inner};
+    } else {
+        if(!this.tabTpl){
+            this.tabTpl = new Roo.Template(
+               '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
+               '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span></em></span></a>'
+            );
         }
-        return true;
-    },
+        var el = this.tabTpl.overwrite(td, {"text": text});
+        var inner = el.getElementsByTagName("em")[0];
+        return {"el": el, "inner": inner};
+    }
+};/*
+ * 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.Button
+ * @extends Roo.util.Observable
+ * Simple Button class
+ * @cfg {String} text The button text
+ * @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image
+ * CSS property of the button by default, so if you want a mixed icon/text button, set cls:"x-btn-text-icon")
+ * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event)
+ * @cfg {Object} scope The scope of the handler
+ * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width)
+ * @cfg {String/Object} tooltip The tooltip for the button - can be a string or QuickTips config object
+ * @cfg {Boolean} hidden True to start hidden (defaults to false)
+ * @cfg {Boolean} disabled True to start disabled (defaults to false)
+ * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true)
+ * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed, only
+   applies if enableToggle = true)
+ * @cfg {String/HTMLElement/Element} renderTo The element to append the button to
+ * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be
+  an {@link Roo.util.ClickRepeater} config object (defaults to false).
+ * @constructor
+ * Create a new button
+ * @param {Object} config The config object
+ */
+Roo.Button = function(renderTo, config)
+{
+    if (!config) {
+        config = renderTo;
+        renderTo = config.renderTo || false;
+    }
+    
+    Roo.apply(this, config);
+    this.addEvents({
+        /**
+	     * @event click
+	     * Fires when this button is clicked
+	     * @param {Button} this
+	     * @param {EventObject} e The click event
+	     */
+	    "click" : true,
+        /**
+	     * @event toggle
+	     * Fires when the "pressed" state of this button changes (only if enableToggle = true)
+	     * @param {Button} this
+	     * @param {Boolean} pressed
+	     */
+	    "toggle" : true,
+        /**
+	     * @event mouseover
+	     * Fires when the mouse hovers over the button
+	     * @param {Button} this
+	     * @param {Event} e The event object
+	     */
+        'mouseover' : true,
+        /**
+	     * @event mouseout
+	     * Fires when the mouse exits the button
+	     * @param {Button} this
+	     * @param {Event} e The event object
+	     */
+        'mouseout': true,
+         /**
+	     * @event render
+	     * Fires when the button is rendered
+	     * @param {Button} this
+	     */
+        'render': true
+    });
+    if(this.menu){
+        this.menu = Roo.menu.MenuMgr.get(this.menu);
+    }
+    // register listeners first!!  - so render can be captured..
+    Roo.util.Observable.call(this);
+    if(renderTo){
+        this.render(renderTo);
+    }
+    
+  
+};
 
+Roo.extend(Roo.Button, Roo.util.Observable, {
     /**
-     * Get the number of selected nodes.
-     * @return {Number}
+     * 
      */
-    getSelectionCount : function(){
-        return this.selections.length;
-    },
-
+    
     /**
-     * Get the currently selected nodes.
-     * @return {Array} An array of HTMLElements
+     * Read-only. True if this button is hidden
+     * @type Boolean
      */
-    getSelectedNodes : function(){
-        return this.selections;
-    },
-
+    hidden : false,
     /**
-     * Get the indexes of the selected nodes.
-     * @return {Array}
+     * Read-only. True if this button is disabled
+     * @type Boolean
      */
-    getSelectedIndexes : function(){
-        var indexes = [], s = this.selections;
-        for(var i = 0, len = s.length; i < len; i++){
-            indexes.push(s[i].nodeIndex);
-        }
-        return indexes;
-    },
+    disabled : false,
+    /**
+     * Read-only. True if this button is pressed (only if enableToggle = true)
+     * @type Boolean
+     */
+    pressed : false,
 
     /**
-     * Clear all selections
-     * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange event
+     * @cfg {Number} tabIndex 
+     * The DOM tabIndex for this button (defaults to undefined)
      */
-    clearSelections : function(suppressEvent){
-        if(this.nodes && (this.multiSelect || this.singleSelect) && this.selections.length > 0){
-            this.cmp.elements = this.selections;
-            this.cmp.removeClass(this.selectedClass);
-            this.selections = [];
-            if(!suppressEvent){
-                this.fireEvent("selectionchange", this, this.selections);
-            }
-        }
-    },
+    tabIndex : undefined,
 
     /**
-     * Returns true if the passed node is selected
-     * @param {HTMLElement/Number} node The node or node index
-     * @return {Boolean}
+     * @cfg {Boolean} enableToggle
+     * True to enable pressed/not pressed toggling (defaults to false)
      */
-    isSelected : function(node){
-        var s = this.selections;
-        if(s.length < 1){
-            return false;
-        }
-        node = this.getNode(node);
-        return s.indexOf(node) !== -1;
-    },
+    enableToggle: false,
+    /**
+     * @cfg {Roo.menu.Menu} menu
+     * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
+     */
+    menu : undefined,
+    /**
+     * @cfg {String} menuAlign
+     * The position to align the menu to (see {@link Roo.Element#alignTo} for more details, defaults to 'tl-bl?').
+     */
+    menuAlign : "tl-bl?",
 
     /**
-     * Selects nodes.
-     * @param {Array/HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node, id of a template node or an array of any of those to select
-     * @param {Boolean} keepExisting (optional) true to keep existing selections
-     * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
+     * @cfg {String} iconCls
+     * A css class which sets a background image to be used as the icon for this button (defaults to undefined).
      */
-    select : function(nodeInfo, keepExisting, suppressEvent){
-        if(nodeInfo instanceof Array){
-            if(!keepExisting){
-                this.clearSelections(true);
-            }
-            for(var i = 0, len = nodeInfo.length; i < len; i++){
-                this.select(nodeInfo[i], true, true);
-            }
-            return;
-        } 
-        var node = this.getNode(nodeInfo);
-        if(!node || this.isSelected(node)){
-            return; // already selected.
-        }
-        if(!keepExisting){
-            this.clearSelections(true);
-        }
-        
-        if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
-            Roo.fly(node).addClass(this.selectedClass);
-            this.selections.push(node);
-            if(!suppressEvent){
-                this.fireEvent("selectionchange", this, this.selections);
-            }
-        }
-        
-        
-    },
-      /**
-     * Unselects nodes.
-     * @param {Array/HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node, id of a template node or an array of any of those to select
-     * @param {Boolean} keepExisting (optional) true IGNORED (for campatibility with select)
-     * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
+    iconCls : undefined,
+    /**
+     * @cfg {String} type
+     * The button's type, corresponding to the DOM input element type attribute.  Either "submit," "reset" or "button" (default).
      */
-    unselect : function(nodeInfo, keepExisting, suppressEvent)
-    {
-        if(nodeInfo instanceof Array){
-            Roo.each(this.selections, function(s) {
-                this.unselect(s, nodeInfo);
-            }, this);
-            return;
-        }
-        var node = this.getNode(nodeInfo);
-        if(!node || !this.isSelected(node)){
-            //Roo.log("not selected");
-            return; // not selected.
-        }
-        // fireevent???
-        var ns = [];
-        Roo.each(this.selections, function(s) {
-            if (s == node ) {
-                Roo.fly(node).removeClass(this.selectedClass);
+    type : 'button',
 
-                return;
-            }
-            ns.push(s);
-        },this);
-        
-        this.selections= ns;
-        this.fireEvent("selectionchange", this, this.selections);
-    },
+    // private
+    menuClassTarget: 'tr',
 
     /**
-     * Gets a template node.
-     * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
-     * @return {HTMLElement} The node or null if it wasn't found
+     * @cfg {String} clickEvent
+     * The type of event to map to the button's event handler (defaults to 'click')
      */
-    getNode : function(nodeInfo){
-        if(typeof nodeInfo == "string"){
-            return document.getElementById(nodeInfo);
-        }else if(typeof nodeInfo == "number"){
-            return this.nodes[nodeInfo];
-        }
-        return nodeInfo;
-    },
+    clickEvent : 'click',
 
     /**
-     * Gets a range template nodes.
-     * @param {Number} startIndex
-     * @param {Number} endIndex
-     * @return {Array} An array of nodes
+     * @cfg {Boolean} handleMouseEvents
+     * False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
      */
-    getNodes : function(start, end){
-        var ns = this.nodes;
-        start = start || 0;
-        end = typeof end == "undefined" ? ns.length - 1 : end;
-        var nodes = [];
-        if(start <= end){
-            for(var i = start; i <= end; i++){
-                nodes.push(ns[i]);
+    handleMouseEvents : true,
+
+    /**
+     * @cfg {String} tooltipType
+     * The type of tooltip to use. Either "qtip" (default) for QuickTips or "title" for title attribute.
+     */
+    tooltipType : 'qtip',
+
+    /**
+     * @cfg {String} cls
+     * A CSS class to apply to the button's main element.
+     */
+    
+    /**
+     * @cfg {Roo.Template} template (Optional)
+     * An {@link Roo.Template} with which to create the Button's main element. This Template must
+     * contain numeric substitution parameter 0 if it is to display the tRoo property. Changing the template could
+     * require code modifications if required elements (e.g. a button) aren't present.
+     */
+
+    // private
+    render : function(renderTo){
+        var btn;
+        if(this.hideParent){
+            this.parentEl = Roo.get(renderTo);
+        }
+        if(!this.dhconfig){
+            if(!this.template){
+                if(!Roo.Button.buttonTemplate){
+                    // hideous table template
+                    Roo.Button.buttonTemplate = new Roo.Template(
+                        '<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
+                        '<td class="x-btn-left"><i>&#160;</i></td><td class="x-btn-center"><em unselectable="on"><button class="x-btn-text" type="{1}">{0}</button></em></td><td class="x-btn-right"><i>&#160;</i></td>',
+                        "</tr></tbody></table>");
+                }
+                this.template = Roo.Button.buttonTemplate;
             }
-        } else{
-            for(var i = start; i >= end; i--){
-                nodes.push(ns[i]);
+            btn = this.template.append(renderTo, [this.text || '&#160;', this.type], true);
+            var btnEl = btn.child("button:first");
+            btnEl.on('focus', this.onFocus, this);
+            btnEl.on('blur', this.onBlur, this);
+            if(this.cls){
+                btn.addClass(this.cls);
+            }
+            if(this.icon){
+                btnEl.setStyle('background-image', 'url(' +this.icon +')');
+            }
+            if(this.iconCls){
+                btnEl.addClass(this.iconCls);
+                if(!this.cls){
+                    btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
+                }
+            }
+            if(this.tabIndex !== undefined){
+                btnEl.dom.tabIndex = this.tabIndex;
             }
+            if(this.tooltip){
+                if(typeof this.tooltip == 'object'){
+                    Roo.QuickTips.tips(Roo.apply({
+                          target: btnEl.id
+                    }, this.tooltip));
+                } else {
+                    btnEl.dom[this.tooltipType] = this.tooltip;
+                }
+            }
+        }else{
+            btn = Roo.DomHelper.append(Roo.get(renderTo).dom, this.dhconfig, true);
         }
-        return nodes;
+        this.el = btn;
+        if(this.id){
+            this.el.dom.id = this.el.id = this.id;
+        }
+        if(this.menu){
+            this.el.child(this.menuClassTarget).addClass("x-btn-with-menu");
+            this.menu.on("show", this.onMenuShow, this);
+            this.menu.on("hide", this.onMenuHide, this);
+        }
+        btn.addClass("x-btn");
+        if(Roo.isIE && !Roo.isIE7){
+            this.autoWidth.defer(1, this);
+        }else{
+            this.autoWidth();
+        }
+        if(this.handleMouseEvents){
+            btn.on("mouseover", this.onMouseOver, this);
+            btn.on("mouseout", this.onMouseOut, this);
+            btn.on("mousedown", this.onMouseDown, this);
+        }
+        btn.on(this.clickEvent, this.onClick, this);
+        //btn.on("mouseup", this.onMouseUp, this);
+        if(this.hidden){
+            this.hide();
+        }
+        if(this.disabled){
+            this.disable();
+        }
+        Roo.ButtonToggleMgr.register(this);
+        if(this.pressed){
+            this.el.addClass("x-btn-pressed");
+        }
+        if(this.repeat){
+            var repeater = new Roo.util.ClickRepeater(btn,
+                typeof this.repeat == "object" ? this.repeat : {}
+            );
+            repeater.on("click", this.onClick,  this);
+        }
+        
+        this.fireEvent('render', this);
+        
     },
-
     /**
-     * Finds the index of the passed node
-     * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
-     * @return {Number} The index of the node or -1
+     * Returns the button's underlying element
+     * @return {Roo.Element} The element
      */
-    indexOf : function(node){
-        node = this.getNode(node);
-        if(typeof node.nodeIndex == "number"){
-            return node.nodeIndex;
-        }
-        var ns = this.nodes;
-        for(var i = 0, len = ns.length; i < len; i++){
-            if(ns[i] == node){
-                return i;
+    getEl : function(){
+        return this.el;  
+    },
+    
+    /**
+     * Destroys this Button and removes any listeners.
+     */
+    destroy : function(){
+        Roo.ButtonToggleMgr.unregister(this);
+        this.el.removeAllListeners();
+        this.purgeListeners();
+        this.el.remove();
+    },
+
+    // private
+    autoWidth : function(){
+        if(this.el){
+            this.el.setWidth("auto");
+            if(Roo.isIE7 && Roo.isStrict){
+                var ib = this.el.child('button');
+                if(ib && ib.getWidth() > 20){
+                    ib.clip();
+                    ib.setWidth(Roo.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
+                }
+            }
+            if(this.minWidth){
+                if(this.hidden){
+                    this.el.beginMeasure();
+                }
+                if(this.el.getWidth() < this.minWidth){
+                    this.el.setWidth(this.minWidth);
+                }
+                if(this.hidden){
+                    this.el.endMeasure();
+                }
             }
         }
-        return -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.JsonView
- * @extends Roo.View
- * Shortcut class to create a JSON + {@link Roo.UpdateManager} template view. Usage:
-<pre><code>
-var view = new Roo.JsonView({
-    container: "my-element",
-    tpl: '&lt;div id="{id}"&gt;{foo} - {bar}&lt;/div&gt;', // auto create template
-    multiSelect: true, 
-    jsonRoot: "data" 
-});
-
-// listen for node click?
-view.on("click", function(vw, index, node, e){
-    alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
-});
-
-// direct load of JSON data
-view.load("foobar.php");
-
-// Example from my blog list
-var tpl = new Roo.Template(
-    '&lt;div class="entry"&gt;' +
-    '&lt;a class="entry-title" href="{link}"&gt;{title}&lt;/a&gt;' +
-    "&lt;h4&gt;{date} by {author} | {comments} Comments&lt;/h4&gt;{description}" +
-    "&lt;/div&gt;&lt;hr /&gt;"
-);
+    },
 
-var moreView = new Roo.JsonView({
-    container :  "entry-list", 
-    template : tpl,
-    jsonRoot: "posts"
-});
-moreView.on("beforerender", this.sortEntries, this);
-moreView.load({
-    url: "/blog/get-posts.php",
-    params: "allposts=true",
-    text: "Loading Blog Entries..."
-});
-</code></pre>
-* 
-* Note: old code is supported with arguments : (container, template, config)
-* 
-* 
- * @constructor
- * Create a new JsonView
- * 
- * @param {Object} config The config object
- * 
- */
-Roo.JsonView = function(config, depreciated_tpl, depreciated_config){
+    /**
+     * Assigns this button's click handler
+     * @param {Function} handler The function to call when the button is clicked
+     * @param {Object} scope (optional) Scope for the function passed in
+     */
+    setHandler : function(handler, scope){
+        this.handler = handler;
+        this.scope = scope;  
+    },
     
+    /**
+     * Sets this button's text
+     * @param {String} text The button text
+     */
+    setText : function(text){
+        this.text = text;
+        if(this.el){
+            this.el.child("td.x-btn-center button.x-btn-text").update(text);
+        }
+        this.autoWidth();
+    },
     
-    Roo.JsonView.superclass.constructor.call(this, config, depreciated_tpl, depreciated_config);
-
-    var um = this.el.getUpdateManager();
-    um.setRenderer(this);
-    um.on("update", this.onLoad, this);
-    um.on("failure", this.onLoadException, this);
-
     /**
-     * @event beforerender
-     * Fires before rendering of the downloaded JSON data.
-     * @param {Roo.JsonView} this
-     * @param {Object} data The JSON data loaded
+     * Gets the text for this button
+     * @return {String} The button text
      */
+    getText : function(){
+        return this.text;  
+    },
+    
     /**
-     * @event load
-     * Fires when data is loaded.
-     * @param {Roo.JsonView} this
-     * @param {Object} data The JSON data loaded
-     * @param {Object} response The raw Connect response object
+     * Show this button
      */
+    show: function(){
+        this.hidden = false;
+        if(this.el){
+            this[this.hideParent? 'parentEl' : 'el'].setStyle("display", "");
+        }
+    },
+    
     /**
-     * @event loadexception
-     * Fires when loading fails.
-     * @param {Roo.JsonView} this
-     * @param {Object} response The raw Connect response object
+     * Hide this button
      */
-    this.addEvents({
-        'beforerender' : true,
-        'load' : true,
-        'loadexception' : true
-    });
-};
-Roo.extend(Roo.JsonView, Roo.View, {
+    hide: function(){
+        this.hidden = true;
+        if(this.el){
+            this[this.hideParent? 'parentEl' : 'el'].setStyle("display", "none");
+        }
+    },
+    
     /**
-     * @type {String} The root property in the loaded JSON object that contains the data
+     * Convenience function for boolean show/hide
+     * @param {Boolean} visible True to show, false to hide
      */
-    jsonRoot : "",
-
+    setVisible: function(visible){
+        if(visible) {
+            this.show();
+        }else{
+            this.hide();
+        }
+    },
+    
     /**
-     * Refreshes the view.
+     * If a state it passed, it becomes the pressed state otherwise the current state is toggled.
+     * @param {Boolean} state (optional) Force a particular state
      */
-    refresh : function(){
-        this.clearSelections();
-        this.el.update("");
-        var html = [];
-        var o = this.jsonData;
-        if(o && o.length > 0){
-            for(var i = 0, len = o.length; i < len; i++){
-                var data = this.prepareData(o[i], i, o);
-                html[html.length] = this.tpl.apply(data);
+    toggle : function(state){
+        state = state === undefined ? !this.pressed : state;
+        if(state != this.pressed){
+            if(state){
+                this.el.addClass("x-btn-pressed");
+                this.pressed = true;
+                this.fireEvent("toggle", this, true);
+            }else{
+                this.el.removeClass("x-btn-pressed");
+                this.pressed = false;
+                this.fireEvent("toggle", this, false);
+            }
+            if(this.toggleHandler){
+                this.toggleHandler.call(this.scope || this, this, state);
             }
-        }else{
-            html.push(this.emptyText);
         }
-        this.el.update(html.join(""));
-        this.nodes = this.el.dom.childNodes;
-        this.updateIndexes(0);
     },
-
+    
     /**
-     * Performs an async HTTP request, and loads the JSON from the response. If <i>params</i> are specified it uses POST, otherwise it uses GET.
-     * @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>
-     view.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 respectively shorthand for <i>disableCaching</i>, <i>indicatorText</i>, and <i>loadScripts</i> and are used to set their associated property on this 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)
-     * @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.
+     * Focus the button
      */
-    load : function(){
-        var um = this.el.getUpdateManager();
-        um.update.apply(um, arguments);
+    focus : function(){
+        this.el.child('button:first').focus();
     },
-
-    // note - render is a standard framework call...
-    // using it for the response is really flaky... - it's called by UpdateManager normally, except when called by the XComponent/addXtype.
-    render : function(el, response){
-        
-        this.clearSelections();
-        this.el.update("");
-        var o;
-        try{
-            if (response != '') {
-                o = Roo.util.JSON.decode(response.responseText);
-                if(this.jsonRoot){
-                    
-                    o = o[this.jsonRoot];
-                }
-            }
-        } catch(e){
+    
+    /**
+     * Disable this button
+     */
+    disable : function(){
+        if(this.el){
+            this.el.addClass("x-btn-disabled");
         }
-        /**
-         * The current JSON data or null
-         */
-        this.jsonData = o;
-        this.beforeRender();
-        this.refresh();
+        this.disabled = true;
+    },
+    
+    /**
+     * Enable this button
+     */
+    enable : function(){
+        if(this.el){
+            this.el.removeClass("x-btn-disabled");
+        }
+        this.disabled = false;
     },
 
-/**
- * Get the number of records in the current JSON dataset
- * @return {Number}
- */
-    getCount : function(){
-        return this.jsonData ? this.jsonData.length : 0;
+    /**
+     * Convenience function for boolean enable/disable
+     * @param {Boolean} enabled True to enable, false to disable
+     */
+    setDisabled : function(v){
+        this[v !== true ? "enable" : "disable"]();
     },
 
-/**
- * Returns the JSON object for the specified node(s)
- * @param {HTMLElement/Array} node The node or an array of nodes
- * @return {Object/Array} If you pass in an array, you get an array back, otherwise
- * you get the JSON object for the node
- */
-    getNodeData : function(node){
-        if(node instanceof Array){
-            var data = [];
-            for(var i = 0, len = node.length; i < len; i++){
-                data.push(this.getNodeData(node[i]));
+    // private
+    onClick : function(e)
+    {
+        if(e){
+            e.preventDefault();
+        }
+        if(e.button != 0){
+            return;
+        }
+        if(!this.disabled){
+            if(this.enableToggle){
+                this.toggle();
+            }
+            if(this.menu && !this.menu.isVisible()){
+                this.menu.show(this.el, this.menuAlign);
+            }
+            this.fireEvent("click", this, e);
+            if(this.handler){
+                this.el.removeClass("x-btn-over");
+                this.handler.call(this.scope || this, this, e);
             }
-            return data;
         }
-        return this.jsonData[this.indexOf(node)] || null;
     },
-
-    beforeRender : function(){
-        this.snapshot = this.jsonData;
-        if(this.sortInfo){
-            this.sort.apply(this, this.sortInfo);
+    // private
+    onMouseOver : function(e){
+        if(!this.disabled){
+            this.el.addClass("x-btn-over");
+            this.fireEvent('mouseover', this, e);
         }
-        this.fireEvent("beforerender", this, this.jsonData);
     },
-
-    onLoad : function(el, o){
-        this.fireEvent("load", this, this.jsonData, o);
+    // private
+    onMouseOut : function(e){
+        if(!e.within(this.el,  true)){
+            this.el.removeClass("x-btn-over");
+            this.fireEvent('mouseout', this, e);
+        }
     },
-
-    onLoadException : function(el, o){
-        this.fireEvent("loadexception", this, o);
+    // private
+    onFocus : function(e){
+        if(!this.disabled){
+            this.el.addClass("x-btn-focus");
+        }
     },
-
-/**
- * Filter the data by a specific property.
- * @param {String} property A property on your JSON objects
- * @param {String/RegExp} value Either string that the property values
- * should start with, or a RegExp to test against the property
- */
-    filter : function(property, value){
-        if(this.jsonData){
-            var data = [];
-            var ss = this.snapshot;
-            if(typeof value == "string"){
-                var vlen = value.length;
-                if(vlen == 0){
-                    this.clearFilter();
-                    return;
-                }
-                value = value.toLowerCase();
-                for(var i = 0, len = ss.length; i < len; i++){
-                    var o = ss[i];
-                    if(o[property].substr(0, vlen).toLowerCase() == value){
-                        data.push(o);
-                    }
-                }
-            } else if(value.exec){ // regex?
-                for(var i = 0, len = ss.length; i < len; i++){
-                    var o = ss[i];
-                    if(value.test(o[property])){
-                        data.push(o);
-                    }
-                }
-            } else{
-                return;
-            }
-            this.jsonData = data;
-            this.refresh();
-        }
+    // private
+    onBlur : function(e){
+        this.el.removeClass("x-btn-focus");
     },
-
-/**
- * Filter by a function. The passed function will be called with each
- * object in the current dataset. If the function returns true the value is kept,
- * otherwise it is filtered.
- * @param {Function} fn
- * @param {Object} scope (optional) The scope of the function (defaults to this JsonView)
- */
-    filterBy : function(fn, scope){
-        if(this.jsonData){
-            var data = [];
-            var ss = this.snapshot;
-            for(var i = 0, len = ss.length; i < len; i++){
-                var o = ss[i];
-                if(fn.call(scope || this, o)){
-                    data.push(o);
-                }
-            }
-            this.jsonData = data;
-            this.refresh();
+    // private
+    onMouseDown : function(e){
+        if(!this.disabled && e.button == 0){
+            this.el.addClass("x-btn-click");
+            Roo.get(document).on('mouseup', this.onMouseUp, this);
         }
     },
-
-/**
- * Clears the current filter.
- */
-    clearFilter : function(){
-        if(this.snapshot && this.jsonData != this.snapshot){
-            this.jsonData = this.snapshot;
-            this.refresh();
+    // private
+    onMouseUp : function(e){
+        if(e.button == 0){
+            this.el.removeClass("x-btn-click");
+            Roo.get(document).un('mouseup', this.onMouseUp, this);
         }
     },
+    // private
+    onMenuShow : function(e){
+        this.el.addClass("x-btn-menu-active");
+    },
+    // private
+    onMenuHide : function(e){
+        this.el.removeClass("x-btn-menu-active");
+    }   
+});
 
-
-/**
- * Sorts the data for this view and refreshes it.
- * @param {String} property A property on your JSON objects to sort on
- * @param {String} direction (optional) "desc" or "asc" (defaults to "asc")
- * @param {Function} sortType (optional) A function to call to convert the data to a sortable value.
- */
-    sort : function(property, dir, sortType){
-        this.sortInfo = Array.prototype.slice.call(arguments, 0);
-        if(this.jsonData){
-            var p = property;
-            var dsc = dir && dir.toLowerCase() == "desc";
-            var f = function(o1, o2){
-                var v1 = sortType ? sortType(o1[p]) : o1[p];
-                var v2 = sortType ? sortType(o2[p]) : o2[p];
-                ;
-                if(v1 < v2){
-                    return dsc ? +1 : -1;
-                } else if(v1 > v2){
-                    return dsc ? -1 : +1;
-                } else{
-                    return 0;
-                }
-            };
-            this.jsonData.sort(f);
-            this.refresh();
-            if(this.jsonData != this.snapshot){
-                this.snapshot.sort(f);
-            }
-        }
-    }
-});/*
+// Private utility class used by Button
+Roo.ButtonToggleMgr = function(){
+   var groups = {};
+   
+   function toggleGroup(btn, state){
+       if(state){
+           var g = groups[btn.toggleGroup];
+           for(var i = 0, l = g.length; i < l; i++){
+               if(g[i] != btn){
+                   g[i].toggle(false);
+               }
+           }
+       }
+   }
+   
+   return {
+       register : function(btn){
+           if(!btn.toggleGroup){
+               return;
+           }
+           var g = groups[btn.toggleGroup];
+           if(!g){
+               g = groups[btn.toggleGroup] = [];
+           }
+           g.push(btn);
+           btn.on("toggle", toggleGroup);
+       },
+       
+       unregister : function(btn){
+           if(!btn.toggleGroup){
+               return;
+           }
+           var g = groups[btn.toggleGroup];
+           if(g){
+               g.remove(btn);
+               btn.un("toggle", toggleGroup);
+           }
+       }
+   };
+}();/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -9406,143 +6821,189 @@ Roo.extend(Roo.JsonView, Roo.View, {
  * <script type="text/javascript">
  */
  
-
 /**
- * @class Roo.ColorPalette
- * @extends Roo.Component
- * Simple color palette class for choosing colors.  The palette can be rendered to any container.<br />
- * Here's an example of typical usage:
- * <pre><code>
-var cp = new Roo.ColorPalette({value:'993300'});  // initial selected color
-cp.render('my-div');
-
-cp.on('select', function(palette, selColor){
-    // do something with selColor
-});
-</code></pre>
+ * @class Roo.SplitButton
+ * @extends Roo.Button
+ * A split button that provides a built-in dropdown arrow that can fire an event separately from the default
+ * click event of the button.  Typically this would be used to display a dropdown menu that provides additional
+ * options to the primary button action, but any custom handler can provide the arrowclick implementation.
+ * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event)
+ * @cfg {String} arrowTooltip The title attribute of the arrow
  * @constructor
- * Create a new ColorPalette
+ * Create a new menu button
+ * @param {String/HTMLElement/Element} renderTo The element to append the button to
  * @param {Object} config The config object
  */
-Roo.ColorPalette = function(config){
-    Roo.ColorPalette.superclass.constructor.call(this, config);
-    this.addEvents({
-        /**
-	     * @event select
-	     * Fires when a color is selected
-	     * @param {ColorPalette} this
-	     * @param {String} color The 6-digit color hex code (without the # symbol)
-	     */
-        select: true
-    });
-
-    if(this.handler){
-        this.on("select", this.handler, this.scope, true);
-    }
-};
-Roo.extend(Roo.ColorPalette, Roo.Component, {
+Roo.SplitButton = function(renderTo, config){
+    Roo.SplitButton.superclass.constructor.call(this, renderTo, config);
     /**
-     * @cfg {String} itemCls
-     * The CSS class to apply to the containing element (defaults to "x-color-palette")
+     * @event arrowclick
+     * Fires when this button's arrow is clicked
+     * @param {SplitButton} this
+     * @param {EventObject} e The click event
      */
-    itemCls : "x-color-palette",
+    this.addEvents({"arrowclick":true});
+};
+
+Roo.extend(Roo.SplitButton, Roo.Button, {
+    render : function(renderTo){
+        // this is one sweet looking template!
+        var tpl = new Roo.Template(
+            '<table cellspacing="0" class="x-btn-menu-wrap x-btn"><tr><td>',
+            '<table cellspacing="0" class="x-btn-wrap x-btn-menu-text-wrap"><tbody>',
+            '<tr><td class="x-btn-left"><i>&#160;</i></td><td class="x-btn-center"><button class="x-btn-text" type="{1}">{0}</button></td></tr>',
+            "</tbody></table></td><td>",
+            '<table cellspacing="0" class="x-btn-wrap x-btn-menu-arrow-wrap"><tbody>',
+            '<tr><td class="x-btn-center"><button class="x-btn-menu-arrow-el" type="button">&#160;</button></td><td class="x-btn-right"><i>&#160;</i></td></tr>',
+            "</tbody></table></td></tr></table>"
+        );
+        var btn = tpl.append(renderTo, [this.text, this.type], true);
+        var btnEl = btn.child("button");
+        if(this.cls){
+            btn.addClass(this.cls);
+        }
+        if(this.icon){
+            btnEl.setStyle('background-image', 'url(' +this.icon +')');
+        }
+        if(this.iconCls){
+            btnEl.addClass(this.iconCls);
+            if(!this.cls){
+                btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
+            }
+        }
+        this.el = btn;
+        if(this.handleMouseEvents){
+            btn.on("mouseover", this.onMouseOver, this);
+            btn.on("mouseout", this.onMouseOut, this);
+            btn.on("mousedown", this.onMouseDown, this);
+            btn.on("mouseup", this.onMouseUp, this);
+        }
+        btn.on(this.clickEvent, this.onClick, this);
+        if(this.tooltip){
+            if(typeof this.tooltip == 'object'){
+                Roo.QuickTips.tips(Roo.apply({
+                      target: btnEl.id
+                }, this.tooltip));
+            } else {
+                btnEl.dom[this.tooltipType] = this.tooltip;
+            }
+        }
+        if(this.arrowTooltip){
+            btn.child("button:nth(2)").dom[this.tooltipType] = this.arrowTooltip;
+        }
+        if(this.hidden){
+            this.hide();
+        }
+        if(this.disabled){
+            this.disable();
+        }
+        if(this.pressed){
+            this.el.addClass("x-btn-pressed");
+        }
+        if(Roo.isIE && !Roo.isIE7){
+            this.autoWidth.defer(1, this);
+        }else{
+            this.autoWidth();
+        }
+        if(this.menu){
+            this.menu.on("show", this.onMenuShow, this);
+            this.menu.on("hide", this.onMenuHide, this);
+        }
+        this.fireEvent('render', this);
+    },
+
+    // private
+    autoWidth : function(){
+        if(this.el){
+            var tbl = this.el.child("table:first");
+            var tbl2 = this.el.child("table:last");
+            this.el.setWidth("auto");
+            tbl.setWidth("auto");
+            if(Roo.isIE7 && Roo.isStrict){
+                var ib = this.el.child('button:first');
+                if(ib && ib.getWidth() > 20){
+                    ib.clip();
+                    ib.setWidth(Roo.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
+                }
+            }
+            if(this.minWidth){
+                if(this.hidden){
+                    this.el.beginMeasure();
+                }
+                if((tbl.getWidth()+tbl2.getWidth()) < this.minWidth){
+                    tbl.setWidth(this.minWidth-tbl2.getWidth());
+                }
+                if(this.hidden){
+                    this.el.endMeasure();
+                }
+            }
+            this.el.setWidth(tbl.getWidth()+tbl2.getWidth());
+        } 
+    },
     /**
-     * @cfg {String} value
-     * The initial color to highlight (should be a valid 6-digit color hex code without the # symbol).  Note that
-     * the hex codes are case-sensitive.
+     * Sets this button's click handler
+     * @param {Function} handler The function to call when the button is clicked
+     * @param {Object} scope (optional) Scope for the function passed above
      */
-    value : null,
-    clickEvent:'click',
-    // private
-    ctype: "Roo.ColorPalette",
-
+    setHandler : function(handler, scope){
+        this.handler = handler;
+        this.scope = scope;  
+    },
+    
     /**
-     * @cfg {Boolean} allowReselect If set to true then reselecting a color that is already selected fires the selection event
+     * Sets this button's arrow click handler
+     * @param {Function} handler The function to call when the arrow is clicked
+     * @param {Object} scope (optional) Scope for the function passed above
      */
-    allowReselect : false,
-
+    setArrowHandler : function(handler, scope){
+        this.arrowHandler = handler;
+        this.scope = scope;  
+    },
+    
     /**
-     * <p>An array of 6-digit color hex code strings (without the # symbol).  This array can contain any number
-     * of colors, and each hex code should be unique.  The width of the palette is controlled via CSS by adjusting
-     * the width property of the 'x-color-palette' class (or assigning a custom class), so you can balance the number
-     * of colors with the width setting until the box is symmetrical.</p>
-     * <p>You can override individual colors if needed:</p>
-     * <pre><code>
-var cp = new Roo.ColorPalette();
-cp.colors[0] = "FF0000";  // change the first box to red
-</code></pre>
-
-Or you can provide a custom array of your own for complete control:
-<pre><code>
-var cp = new Roo.ColorPalette();
-cp.colors = ["000000", "993300", "333300"];
-</code></pre>
-     * @type Array
+     * Focus the button
      */
-    colors : [
-        "000000", "993300", "333300", "003300", "003366", "000080", "333399", "333333",
-        "800000", "FF6600", "808000", "008000", "008080", "0000FF", "666699", "808080",
-        "FF0000", "FF9900", "99CC00", "339966", "33CCCC", "3366FF", "800080", "969696",
-        "FF00FF", "FFCC00", "FFFF00", "00FF00", "00FFFF", "00CCFF", "993366", "C0C0C0",
-        "FF99CC", "FFCC99", "FFFF99", "CCFFCC", "CCFFFF", "99CCFF", "CC99FF", "FFFFFF"
-    ],
-
-    // private
-    onRender : function(container, position){
-        var t = new Roo.MasterTemplate(
-            '<tpl><a href="#" class="color-{0}" hidefocus="on"><em><span style="background:#{0}" unselectable="on">&#160;</span></em></a></tpl>'
-        );
-        var c = this.colors;
-        for(var i = 0, len = c.length; i < len; i++){
-            t.add([c[i]]);
-        }
-        var el = document.createElement("div");
-        el.className = this.itemCls;
-        t.overwrite(el);
-        container.dom.insertBefore(el, position);
-        this.el = Roo.get(el);
-        this.el.on(this.clickEvent, this.handleClick,  this, {delegate: "a"});
-        if(this.clickEvent != 'click'){
-            this.el.on('click', Roo.emptyFn,  this, {delegate: "a", preventDefault:true});
+    focus : function(){
+        if(this.el){
+            this.el.child("button:first").focus();
         }
     },
 
     // private
-    afterRender : function(){
-        Roo.ColorPalette.superclass.afterRender.call(this);
-        if(this.value){
-            var s = this.value;
-            this.value = null;
-            this.select(s);
+    onClick : function(e){
+        e.preventDefault();
+        if(!this.disabled){
+            if(e.getTarget(".x-btn-menu-arrow-wrap")){
+                if(this.menu && !this.menu.isVisible()){
+                    this.menu.show(this.el, this.menuAlign);
+                }
+                this.fireEvent("arrowclick", this, e);
+                if(this.arrowHandler){
+                    this.arrowHandler.call(this.scope || this, this, e);
+                }
+            }else{
+                this.fireEvent("click", this, e);
+                if(this.handler){
+                    this.handler.call(this.scope || this, this, e);
+                }
+            }
         }
     },
-
     // private
-    handleClick : function(e, t){
-        e.preventDefault();
+    onMouseDown : function(e){
         if(!this.disabled){
-            var c = t.className.match(/(?:^|\s)color-(.{6})(?:\s|$)/)[1];
-            this.select(c.toUpperCase());
+            Roo.fly(e.getTarget("table")).addClass("x-btn-click");
         }
     },
+    // private
+    onMouseUp : function(e){
+        Roo.fly(e.getTarget("table")).removeClass("x-btn-click");
+    }   
+});
 
-    /**
-     * Selects the specified color in the palette (fires the select event)
-     * @param {String} color A valid 6-digit color hex code (# will be stripped if included)
-     */
-    select : function(color){
-        color = color.replace("#", "");
-        if(color != this.value || this.allowReselect){
-            var el = this.el;
-            if(this.value){
-                el.child("a.color-"+this.value).removeClass("x-color-palette-sel");
-            }
-            el.child("a.color-"+color).addClass("x-color-palette-sel");
-            this.value = color;
-            this.fireEvent("select", this, color);
-        }
-    }
-});/*
+
+// backwards compat
+Roo.MenuButton = Roo.SplitButton;/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -9552,661 +7013,983 @@ cp.colors = ["000000", "993300", "333300"];
  * Fork - LGPL
  * <script type="text/javascript">
  */
- 
+
 /**
- * @class Roo.DatePicker
- * @extends Roo.Component
- * Simple date picker class.
+ * @class Roo.Toolbar
+ * @children   Roo.Toolbar.Item Roo.Toolbar.Button Roo.Toolbar.SplitButton Roo.form.Field 
+ * Basic Toolbar class.
  * @constructor
- * Create a new DatePicker
- * @param {Object} config The config object
- */
-Roo.DatePicker = function(config){
-    Roo.DatePicker.superclass.constructor.call(this, config);
-
-    this.value = config && config.value ?
-                 config.value.clearTime() : new Date().clearTime();
-
-    this.addEvents({
-        /**
-	     * @event select
-	     * Fires when a date is selected
-	     * @param {DatePicker} this
-	     * @param {Date} date The selected date
-	     */
-        'select': true,
-        /**
-	     * @event monthchange
-	     * Fires when the displayed month changes 
-	     * @param {DatePicker} this
-	     * @param {Date} date The selected month
-	     */
-        'monthchange': true
-    });
-
-    if(this.handler){
-        this.on("select", this.handler,  this.scope || this);
+ * Creates a new Toolbar
+ * @param {Object} container The config object
+ */ 
+Roo.Toolbar = function(container, buttons, config)
+{
+    /// old consturctor format still supported..
+    if(container instanceof Array){ // omit the container for later rendering
+        buttons = container;
+        config = buttons;
+        container = null;
     }
-    // build the disabledDatesRE
-    if(!this.disabledDatesRE && 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.disabledDatesRE = new RegExp(re + ")");
+    if (typeof(container) == 'object' && container.xtype) {
+        config = container;
+        container = config.container;
+        buttons = config.buttons || []; // not really - use items!!
+    }
+    var xitems = [];
+    if (config && config.items) {
+        xitems = config.items;
+        delete config.items;
+    }
+    Roo.apply(this, config);
+    this.buttons = buttons;
+    
+    if(container){
+        this.render(container);
     }
+    this.xitems = xitems;
+    Roo.each(xitems, function(b) {
+        this.add(b);
+    }, this);
+    
 };
 
-Roo.extend(Roo.DatePicker, Roo.Component, {
+Roo.Toolbar.prototype = {
     /**
-     * @cfg {String} todayText
-     * The text to display on the button that selects the current date (defaults to "Today")
+     * @cfg {Array} items
+     * array of button configs or elements to add (will be converted to a MixedCollection)
      */
-    todayText : "Today",
+    items: false,
     /**
-     * @cfg {String} okText
-     * The text to display on the ok button
+     * @cfg {String/HTMLElement/Element} container
+     * The id or element that will contain the toolbar
      */
-    okText : "&#160;OK&#160;", // &#160; to give the user extra clicking room
+    // private
+    render : function(ct){
+        this.el = Roo.get(ct);
+        if(this.cls){
+            this.el.addClass(this.cls);
+        }
+        // using a table allows for vertical alignment
+        // 100% width is needed by Safari...
+        this.el.update('<div class="x-toolbar x-small-editor"><table cellspacing="0"><tr></tr></table></div>');
+        this.tr = this.el.child("tr", true);
+        var autoId = 0;
+        this.items = new Roo.util.MixedCollection(false, function(o){
+            return o.id || ("item" + (++autoId));
+        });
+        if(this.buttons){
+            this.add.apply(this, this.buttons);
+            delete this.buttons;
+        }
+    },
+
     /**
-     * @cfg {String} cancelText
-     * The text to display on the cancel button
+     * Adds element(s) to the toolbar -- this function takes a variable number of 
+     * arguments of mixed type and adds them to the toolbar.
+     * @param {Mixed} arg1 The following types of arguments are all valid:<br />
+     * <ul>
+     * <li>{@link Roo.Toolbar.Button} config: A valid button config object (equivalent to {@link #addButton})</li>
+     * <li>HtmlElement: Any standard HTML element (equivalent to {@link #addElement})</li>
+     * <li>Field: Any form field (equivalent to {@link #addField})</li>
+     * <li>Item: Any subclass of {@link Roo.Toolbar.Item} (equivalent to {@link #addItem})</li>
+     * <li>String: Any generic string (gets wrapped in a {@link Roo.Toolbar.TextItem}, equivalent to {@link #addText}).
+     * Note that there are a few special strings that are treated differently as explained nRoo.</li>
+     * <li>'separator' or '-': Creates a separator element (equivalent to {@link #addSeparator})</li>
+     * <li>' ': Creates a spacer element (equivalent to {@link #addSpacer})</li>
+     * <li>'->': Creates a fill element (equivalent to {@link #addFill})</li>
+     * </ul>
+     * @param {Mixed} arg2
+     * @param {Mixed} etc.
      */
-    cancelText : "Cancel",
+    add : function(){
+        var a = arguments, l = a.length;
+        for(var i = 0; i < l; i++){
+            this._add(a[i]);
+        }
+    },
+    // private..
+    _add : function(el) {
+        
+        if (el.xtype) {
+            el = Roo.factory(el, typeof(Roo.Toolbar[el.xtype]) == 'undefined' ? Roo.form : Roo.Toolbar);
+        }
+        
+        if (el.applyTo){ // some kind of form field
+            return this.addField(el);
+        } 
+        if (el.render){ // some kind of Toolbar.Item
+            return this.addItem(el);
+        }
+        if (typeof el == "string"){ // string
+            if(el == "separator" || el == "-"){
+                return this.addSeparator();
+            }
+            if (el == " "){
+                return this.addSpacer();
+            }
+            if(el == "->"){
+                return this.addFill();
+            }
+            return this.addText(el);
+            
+        }
+        if(el.tagName){ // element
+            return this.addElement(el);
+        }
+        if(typeof el == "object"){ // must be button config?
+            return this.addButton(el);
+        }
+        // and now what?!?!
+        return false;
+        
+    },
+    
     /**
-     * @cfg {String} todayTip
-     * The tooltip to display for the button that selects the current date (defaults to "{current date} (Spacebar)")
+     * Add an Xtype element
+     * @param {Object} xtype Xtype Object
+     * @return {Object} created Object
      */
-    todayTip : "{0} (Spacebar)",
+    addxtype : function(e){
+        return this.add(e);  
+    },
+    
     /**
-     * @cfg {Date} minDate
-     * Minimum allowable date (JavaScript date object, defaults to null)
+     * Returns the Element for this toolbar.
+     * @return {Roo.Element}
      */
-    minDate : null,
+    getEl : function(){
+        return this.el;  
+    },
+    
     /**
-     * @cfg {Date} maxDate
-     * Maximum allowable date (JavaScript date object, defaults to null)
+     * Adds a separator
+     * @return {Roo.Toolbar.Item} The separator item
      */
-    maxDate : null,
+    addSeparator : function(){
+        return this.addItem(new Roo.Toolbar.Separator());
+    },
+
     /**
-     * @cfg {String} minText
-     * The error text to display if the minDate validation fails (defaults to "This date is before the minimum date")
+     * Adds a spacer element
+     * @return {Roo.Toolbar.Spacer} The spacer item
      */
-    minText : "This date is before the minimum date",
+    addSpacer : function(){
+        return this.addItem(new Roo.Toolbar.Spacer());
+    },
+
     /**
-     * @cfg {String} maxText
-     * The error text to display if the maxDate validation fails (defaults to "This date is after the maximum date")
+     * Adds a fill element that forces subsequent additions to the right side of the toolbar
+     * @return {Roo.Toolbar.Fill} The fill item
      */
-    maxText : "This date is after the maximum date",
+    addFill : function(){
+        return this.addItem(new Roo.Toolbar.Fill());
+    },
+
     /**
-     * @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').
+     * Adds any standard HTML element to the toolbar
+     * @param {String/HTMLElement/Element} el The element or id of the element to add
+     * @return {Roo.Toolbar.Item} The element's item
      */
-    format : "m/d/y",
+    addElement : function(el){
+        return this.addItem(new Roo.Toolbar.Item(el));
+    },
     /**
-     * @cfg {Array} disabledDays
-     * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
+     * Collection of items on the toolbar.. (only Toolbar Items, so use fields to retrieve fields)
+     * @type Roo.util.MixedCollection  
      */
-    disabledDays : null,
+    items : false,
+     
     /**
-     * @cfg {String} disabledDaysText
-     * The tooltip to display when the date falls on a disabled day (defaults to "")
+     * Adds any Toolbar.Item or subclass
+     * @param {Roo.Toolbar.Item} item
+     * @return {Roo.Toolbar.Item} The item
      */
-    disabledDaysText : "",
+    addItem : function(item){
+        var td = this.nextBlock();
+        item.render(td);
+        this.items.add(item);
+        return item;
+    },
+    
     /**
-     * @cfg {RegExp} disabledDatesRE
-     * JavaScript regular expression used to disable a pattern of dates (defaults to null)
+     * Adds a button (or buttons). See {@link Roo.Toolbar.Button} for more info on the config.
+     * @param {Object/Array} config A button config or array of configs
+     * @return {Roo.Toolbar.Button/Array}
      */
-    disabledDatesRE : null,
+    addButton : function(config){
+        if(config instanceof Array){
+            var buttons = [];
+            for(var i = 0, len = config.length; i < len; i++) {
+                buttons.push(this.addButton(config[i]));
+            }
+            return buttons;
+        }
+        var b = config;
+        if(!(config instanceof Roo.Toolbar.Button)){
+            b = config.split ?
+                new Roo.Toolbar.SplitButton(config) :
+                new Roo.Toolbar.Button(config);
+        }
+        var td = this.nextBlock();
+        b.render(td);
+        this.items.add(b);
+        return b;
+    },
+    
     /**
-     * @cfg {String} disabledDatesText
-     * The tooltip text to display when the date falls on a disabled date (defaults to "")
+     * Adds text to the toolbar
+     * @param {String} text The text to add
+     * @return {Roo.Toolbar.Item} The element's item
      */
-    disabledDatesText : "",
+    addText : function(text){
+        return this.addItem(new Roo.Toolbar.TextItem(text));
+    },
+    
     /**
-     * @cfg {Boolean} constrainToViewport
-     * True to constrain the date picker to the viewport (defaults to true)
+     * Inserts any {@link Roo.Toolbar.Item}/{@link Roo.Toolbar.Button} at the specified index.
+     * @param {Number} index The index where the item is to be inserted
+     * @param {Object/Roo.Toolbar.Item/Roo.Toolbar.Button (may be Array)} item The button, or button config object to be inserted.
+     * @return {Roo.Toolbar.Button/Item}
      */
-    constrainToViewport : true,
+    insertButton : function(index, item){
+        if(item instanceof Array){
+            var buttons = [];
+            for(var i = 0, len = item.length; i < len; i++) {
+               buttons.push(this.insertButton(index + i, item[i]));
+            }
+            return buttons;
+        }
+        if (!(item instanceof Roo.Toolbar.Button)){
+           item = new Roo.Toolbar.Button(item);
+        }
+        var td = document.createElement("td");
+        this.tr.insertBefore(td, this.tr.childNodes[index]);
+        item.render(td);
+        this.items.insert(index, item);
+        return item;
+    },
+    
     /**
-     * @cfg {Array} monthNames
-     * An array of textual month names which can be overriden for localization support (defaults to Date.monthNames)
+     * Adds a new element to the toolbar from the passed {@link Roo.DomHelper} config.
+     * @param {Object} config
+     * @return {Roo.Toolbar.Item} The element's item
      */
-    monthNames : Date.monthNames,
+    addDom : function(config, returnEl){
+        var td = this.nextBlock();
+        Roo.DomHelper.overwrite(td, config);
+        var ti = new Roo.Toolbar.Item(td.firstChild);
+        ti.render(td);
+        this.items.add(ti);
+        return ti;
+    },
+
     /**
-     * @cfg {Array} dayNames
-     * An array of textual day names which can be overriden for localization support (defaults to Date.dayNames)
+     * Collection of fields on the toolbar.. usefull for quering (value is false if there are no fields)
+     * @type Roo.util.MixedCollection  
      */
-    dayNames : Date.dayNames,
+    fields : false,
+    
     /**
-     * @cfg {String} nextText
-     * The next month navigation button tooltip (defaults to 'Next Month (Control+Right)')
+     * Adds a dynamically rendered Roo.form field (TextField, ComboBox, etc).
+     * Note: the field should not have been rendered yet. For a field that has already been
+     * rendered, use {@link #addElement}.
+     * @param {Roo.form.Field} field
+     * @return {Roo.ToolbarItem}
      */
-    nextText: 'Next Month (Control+Right)',
+     
+      
+    addField : function(field) {
+        if (!this.fields) {
+            var autoId = 0;
+            this.fields = new Roo.util.MixedCollection(false, function(o){
+                return o.id || ("item" + (++autoId));
+            });
+
+        }
+        
+        var td = this.nextBlock();
+        field.render(td);
+        var ti = new Roo.Toolbar.Item(td.firstChild);
+        ti.render(td);
+        this.items.add(ti);
+        this.fields.add(field);
+        return ti;
+    },
     /**
-     * @cfg {String} prevText
-     * The previous month navigation button tooltip (defaults to 'Previous Month (Control+Left)')
+     * Hide the toolbar
+     * @method hide
      */
-    prevText: 'Previous Month (Control+Left)',
+     
+      
+    hide : function()
+    {
+        this.el.child('div').setVisibilityMode(Roo.Element.DISPLAY);
+        this.el.child('div').hide();
+    },
     /**
-     * @cfg {String} monthYearText
-     * The header month selector tooltip (defaults to 'Choose a month (Control+Up/Down to move years)')
+     * Show the toolbar
+     * @method show
      */
-    monthYearText: 'Choose a month (Control+Up/Down to move years)',
+    show : function()
+    {
+        this.el.child('div').show();
+    },
+      
+    // private
+    nextBlock : function(){
+        var td = document.createElement("td");
+        this.tr.appendChild(td);
+        return td;
+    },
+
+    // private
+    destroy : function(){
+        if(this.items){ // rendered?
+            Roo.destroy.apply(Roo, this.items.items);
+        }
+        if(this.fields){ // rendered?
+            Roo.destroy.apply(Roo, this.fields.items);
+        }
+        Roo.Element.uncache(this.el, this.tr);
+    }
+};
+
+/**
+ * @class Roo.Toolbar.Item
+ * The base class that other classes should extend in order to get some basic common toolbar item functionality.
+ * @constructor
+ * Creates a new Item
+ * @param {HTMLElement} el 
+ */
+Roo.Toolbar.Item = function(el){
+    var cfg = {};
+    if (typeof (el.xtype) != 'undefined') {
+        cfg = el;
+        el = cfg.el;
+    }
+    
+    this.el = Roo.getDom(el);
+    this.id = Roo.id(this.el);
+    this.hidden = false;
+    
+    this.addEvents({
+         /**
+	     * @event render
+	     * Fires when the button is rendered
+	     * @param {Button} this
+	     */
+        'render': true
+    });
+    Roo.Toolbar.Item.superclass.constructor.call(this,cfg);
+};
+Roo.extend(Roo.Toolbar.Item, Roo.util.Observable, {
+//Roo.Toolbar.Item.prototype = {
+    
     /**
-     * @cfg {Number} startDay
-     * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
+     * Get this item's HTML Element
+     * @return {HTMLElement}
      */
-    startDay : 0,
+    getEl : function(){
+       return this.el;  
+    },
+
+    // private
+    render : function(td){
+        
+         this.td = td;
+        td.appendChild(this.el);
+        
+        this.fireEvent('render', this);
+    },
+    
     /**
-     * @cfg {Bool} showClear
-     * Show a clear button (usefull for date form elements that can be blank.)
+     * Removes and destroys this item.
      */
+    destroy : function(){
+        this.td.parentNode.removeChild(this.td);
+    },
     
-    showClear: false,
+    /**
+     * Shows this item.
+     */
+    show: function(){
+        this.hidden = false;
+        this.td.style.display = "";
+    },
     
     /**
-     * Sets the value of the date field
-     * @param {Date} value The date to set
+     * Hides this item.
      */
-    setValue : function(value){
-        var old = this.value;
-        
-        if (typeof(value) == 'string') {
-         
-            value = Date.parseDate(value, this.format);
-        }
-        if (!value) {
-            value = new Date();
-        }
-        
-        this.value = value.clearTime(true);
-        if(this.el){
-            this.update(this.value);
-        }
+    hide: function(){
+        this.hidden = true;
+        this.td.style.display = "none";
     },
-
+    
     /**
-     * Gets the current selected value of the date field
-     * @return {Date} The selected date
+     * Convenience function for boolean show/hide.
+     * @param {Boolean} visible true to show/false to hide
      */
-    getValue : function(){
-        return this.value;
+    setVisible: function(visible){
+        if(visible) {
+            this.show();
+        }else{
+            this.hide();
+        }
     },
-
-    // private
+    
+    /**
+     * Try to focus this item.
+     */
     focus : function(){
-        if(this.el){
-            this.update(this.activeDate);
-        }
+        Roo.fly(this.el).focus();
     },
+    
+    /**
+     * Disables this item.
+     */
+    disable : function(){
+        Roo.fly(this.td).addClass("x-item-disabled");
+        this.disabled = true;
+        this.el.disabled = true;
+    },
+    
+    /**
+     * Enables this item.
+     */
+    enable : function(){
+        Roo.fly(this.td).removeClass("x-item-disabled");
+        this.disabled = false;
+        this.el.disabled = false;
+    }
+});
 
-    // privateval
-    onRender : function(container, position){
-        
-        var m = [
-             '<table cellspacing="0">',
-                '<tr><td class="x-date-left"><a href="#" title="', this.prevText ,'">&#160;</a></td><td class="x-date-middle" align="center"></td><td class="x-date-right"><a href="#" title="', this.nextText ,'">&#160;</a></td></tr>',
-                '<tr><td colspan="3"><table class="x-date-inner" cellspacing="0"><thead><tr>'];
-        var dn = this.dayNames;
-        for(var i = 0; i < 7; i++){
-            var d = this.startDay+i;
-            if(d > 6){
-                d = d-7;
-            }
-            m.push("<th><span>", dn[d].substr(0,1), "</span></th>");
-        }
-        m[m.length] = "</tr></thead><tbody><tr>";
-        for(var i = 0; i < 42; i++) {
-            if(i % 7 == 0 && i != 0){
-                m[m.length] = "</tr><tr>";
-            }
-            m[m.length] = '<td><a href="#" hidefocus="on" class="x-date-date" tabIndex="1"><em><span></span></em></a></td>';
-        }
-        m[m.length] = '</tr></tbody></table></td></tr><tr>'+
-            '<td colspan="3" class="x-date-bottom" align="center"></td></tr></table><div class="x-date-mp"></div>';
-
-        var el = document.createElement("div");
-        el.className = "x-date-picker";
-        el.innerHTML = m.join("");
 
-        container.dom.insertBefore(el, position);
+/**
+ * @class Roo.Toolbar.Separator
+ * @extends Roo.Toolbar.Item
+ * A simple toolbar separator class
+ * @constructor
+ * Creates a new Separator
+ */
+Roo.Toolbar.Separator = function(cfg){
+    
+    var s = document.createElement("span");
+    s.className = "ytb-sep";
+    if (cfg) {
+        cfg.el = s;
+    }
+    
+    Roo.Toolbar.Separator.superclass.constructor.call(this, cfg || s);
+};
+Roo.extend(Roo.Toolbar.Separator, Roo.Toolbar.Item, {
+    enable:Roo.emptyFn,
+    disable:Roo.emptyFn,
+    focus:Roo.emptyFn
+});
 
-        this.el = Roo.get(el);
-        this.eventEl = Roo.get(el.firstChild);
+/**
+ * @class Roo.Toolbar.Spacer
+ * @extends Roo.Toolbar.Item
+ * A simple element that adds extra horizontal space to a toolbar.
+ * @constructor
+ * Creates a new Spacer
+ */
+Roo.Toolbar.Spacer = function(cfg){
+    var s = document.createElement("div");
+    s.className = "ytb-spacer";
+    if (cfg) {
+        cfg.el = s;
+    }
+    Roo.Toolbar.Spacer.superclass.constructor.call(this, cfg || s);
+};
+Roo.extend(Roo.Toolbar.Spacer, Roo.Toolbar.Item, {
+    enable:Roo.emptyFn,
+    disable:Roo.emptyFn,
+    focus:Roo.emptyFn
+});
 
-        new Roo.util.ClickRepeater(this.el.child("td.x-date-left a"), {
-            handler: this.showPrevMonth,
-            scope: this,
-            preventDefault:true,
-            stopDefault:true
-        });
-
-        new Roo.util.ClickRepeater(this.el.child("td.x-date-right a"), {
-            handler: this.showNextMonth,
-            scope: this,
-            preventDefault:true,
-            stopDefault:true
-        });
-
-        this.eventEl.on("mousewheel", this.handleMouseWheel,  this);
+/**
+ * @class Roo.Toolbar.Fill
+ * @extends Roo.Toolbar.Spacer
+ * A simple element that adds a greedy (100% width) horizontal space to a toolbar.
+ * @constructor
+ * Creates a new Spacer
+ */
+Roo.Toolbar.Fill = Roo.extend(Roo.Toolbar.Spacer, {
+    // private
+    render : function(td){
+        td.style.width = '100%';
+        Roo.Toolbar.Fill.superclass.render.call(this, td);
+    }
+});
 
-        this.monthPicker = this.el.down('div.x-date-mp');
-        this.monthPicker.enableDisplayMode('block');
-        
-        var kn = new Roo.KeyNav(this.eventEl, {
-            "left" : function(e){
-                e.ctrlKey ?
-                    this.showPrevMonth() :
-                    this.update(this.activeDate.add("d", -1));
-            },
+/**
+ * @class Roo.Toolbar.TextItem
+ * @extends Roo.Toolbar.Item
+ * A simple class that renders text directly into a toolbar.
+ * @constructor
+ * Creates a new TextItem
+ * @cfg {string} text 
+ */
+Roo.Toolbar.TextItem = function(cfg){
+    var  text = cfg || "";
+    if (typeof(cfg) == 'object') {
+        text = cfg.text || "";
+    }  else {
+        cfg = null;
+    }
+    var s = document.createElement("span");
+    s.className = "ytb-text";
+    s.innerHTML = text;
+    if (cfg) {
+        cfg.el  = s;
+    }
+    
+    Roo.Toolbar.TextItem.superclass.constructor.call(this, cfg ||  s);
+};
+Roo.extend(Roo.Toolbar.TextItem, Roo.Toolbar.Item, {
+    
+     
+    enable:Roo.emptyFn,
+    disable:Roo.emptyFn,
+    focus:Roo.emptyFn,
+     /**
+     * Shows this button
+     */
+    show: function(){
+        this.hidden = false;
+        this.el.style.display = "";
+    },
+    
+    /**
+     * Hides this button
+     */
+    hide: function(){
+        this.hidden = true;
+        this.el.style.display = "none";
+    }
+    
+});
 
-            "right" : function(e){
-                e.ctrlKey ?
-                    this.showNextMonth() :
-                    this.update(this.activeDate.add("d", 1));
-            },
+/**
+ * @class Roo.Toolbar.Button
+ * @extends Roo.Button
+ * A button that renders into a toolbar.
+ * @constructor
+ * Creates a new Button
+ * @param {Object} config A standard {@link Roo.Button} config object
+ */
+Roo.Toolbar.Button = function(config){
+    Roo.Toolbar.Button.superclass.constructor.call(this, null, config);
+};
+Roo.extend(Roo.Toolbar.Button, Roo.Button,
+{
+    
+    
+    render : function(td){
+        this.td = td;
+        Roo.Toolbar.Button.superclass.render.call(this, td);
+    },
+    
+    /**
+     * Removes and destroys this button
+     */
+    destroy : function(){
+        Roo.Toolbar.Button.superclass.destroy.call(this);
+        this.td.parentNode.removeChild(this.td);
+    },
+    
+    /**
+     * Shows this button
+     */
+    show: function(){
+        this.hidden = false;
+        this.td.style.display = "";
+    },
+    
+    /**
+     * Hides this button
+     */
+    hide: function(){
+        this.hidden = true;
+        this.td.style.display = "none";
+    },
 
-            "up" : function(e){
-                e.ctrlKey ?
-                    this.showNextYear() :
-                    this.update(this.activeDate.add("d", -7));
-            },
+    /**
+     * Disables this item
+     */
+    disable : function(){
+        Roo.fly(this.td).addClass("x-item-disabled");
+        this.disabled = true;
+    },
 
-            "down" : function(e){
-                e.ctrlKey ?
-                    this.showPrevYear() :
-                    this.update(this.activeDate.add("d", 7));
-            },
+    /**
+     * Enables this item
+     */
+    enable : function(){
+        Roo.fly(this.td).removeClass("x-item-disabled");
+        this.disabled = false;
+    }
+});
+// backwards compat
+Roo.ToolbarButton = Roo.Toolbar.Button;
 
-            "pageUp" : function(e){
-                this.showNextMonth();
-            },
+/**
+ * @class Roo.Toolbar.SplitButton
+ * @extends Roo.SplitButton
+ * A menu button that renders into a toolbar.
+ * @constructor
+ * Creates a new SplitButton
+ * @param {Object} config A standard {@link Roo.SplitButton} config object
+ */
+Roo.Toolbar.SplitButton = function(config){
+    Roo.Toolbar.SplitButton.superclass.constructor.call(this, null, config);
+};
+Roo.extend(Roo.Toolbar.SplitButton, Roo.SplitButton, {
+    render : function(td){
+        this.td = td;
+        Roo.Toolbar.SplitButton.superclass.render.call(this, td);
+    },
+    
+    /**
+     * Removes and destroys this button
+     */
+    destroy : function(){
+        Roo.Toolbar.SplitButton.superclass.destroy.call(this);
+        this.td.parentNode.removeChild(this.td);
+    },
+    
+    /**
+     * Shows this button
+     */
+    show: function(){
+        this.hidden = false;
+        this.td.style.display = "";
+    },
+    
+    /**
+     * Hides this button
+     */
+    hide: function(){
+        this.hidden = true;
+        this.td.style.display = "none";
+    }
+});
 
-            "pageDown" : function(e){
-                this.showPrevMonth();
-            },
+// backwards compat
+Roo.Toolbar.MenuButton = Roo.Toolbar.SplitButton;/*
+ * 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.PagingToolbar
+ * @extends Roo.Toolbar
+ * @children   Roo.Toolbar.Item Roo.Toolbar.Button Roo.Toolbar.SplitButton Roo.form.Field
+ * A specialized toolbar that is bound to a {@link Roo.data.Store} and provides automatic paging controls.
+ * @constructor
+ * Create a new PagingToolbar
+ * @param {Object} config The config object
+ */
+Roo.PagingToolbar = function(el, ds, config)
+{
+    // old args format still supported... - xtype is prefered..
+    if (typeof(el) == 'object' && el.xtype) {
+        // created from xtype...
+        config = el;
+        ds = el.dataSource;
+        el = config.container;
+    }
+    var items = [];
+    if (config.items) {
+        items = config.items;
+        config.items = [];
+    }
+    
+    Roo.PagingToolbar.superclass.constructor.call(this, el, null, config);
+    this.ds = ds;
+    this.cursor = 0;
+    this.renderButtons(this.el);
+    this.bind(ds);
+    
+    // supprot items array.
+   
+    Roo.each(items, function(e) {
+        this.add(Roo.factory(e));
+    },this);
+    
+};
 
-            "enter" : function(e){
-                e.stopPropagation();
-                return true;
-            },
+Roo.extend(Roo.PagingToolbar, Roo.Toolbar, {
+   
+    /**
+     * @cfg {String/HTMLElement/Element} container
+     * container The id or element that will contain the toolbar
+     */
+    /**
+     * @cfg {Boolean} displayInfo
+     * True to display the displayMsg (defaults to false)
+     */
+    
+    
+    /**
+     * @cfg {Number} pageSize
+     * The number of records to display per page (defaults to 20)
+     */
+    pageSize: 20,
+    /**
+     * @cfg {String} displayMsg
+     * The paging status message to display (defaults to "Displaying {start} - {end} of {total}")
+     */
+    displayMsg : 'Displaying {0} - {1} of {2}',
+    /**
+     * @cfg {String} emptyMsg
+     * The message to display when no records are found (defaults to "No data to display")
+     */
+    emptyMsg : 'No data to display',
+    /**
+     * Customizable piece of the default paging text (defaults to "Page")
+     * @type String
+     */
+    beforePageText : "Page",
+    /**
+     * Customizable piece of the default paging text (defaults to "of %0")
+     * @type String
+     */
+    afterPageText : "of {0}",
+    /**
+     * Customizable piece of the default paging text (defaults to "First Page")
+     * @type String
+     */
+    firstText : "First Page",
+    /**
+     * Customizable piece of the default paging text (defaults to "Previous Page")
+     * @type String
+     */
+    prevText : "Previous Page",
+    /**
+     * Customizable piece of the default paging text (defaults to "Next Page")
+     * @type String
+     */
+    nextText : "Next Page",
+    /**
+     * Customizable piece of the default paging text (defaults to "Last Page")
+     * @type String
+     */
+    lastText : "Last Page",
+    /**
+     * Customizable piece of the default paging text (defaults to "Refresh")
+     * @type String
+     */
+    refreshText : "Refresh",
 
-            scope : this
+    // private
+    renderButtons : function(el){
+        Roo.PagingToolbar.superclass.render.call(this, el);
+        this.first = this.addButton({
+            tooltip: this.firstText,
+            cls: "x-btn-icon x-grid-page-first",
+            disabled: true,
+            handler: this.onClick.createDelegate(this, ["first"])
         });
-
-        this.eventEl.on("click", this.handleDateClick,  this, {delegate: "a.x-date-date"});
-
-        this.eventEl.addKeyListener(Roo.EventObject.SPACE, this.selectToday,  this);
-
-        this.el.unselectable();
-        
-        this.cells = this.el.select("table.x-date-inner tbody td");
-        this.textNodes = this.el.query("table.x-date-inner tbody span");
-
-        this.mbtn = new Roo.Button(this.el.child("td.x-date-middle", true), {
-            text: "&#160;",
-            tooltip: this.monthYearText
+        this.prev = this.addButton({
+            tooltip: this.prevText,
+            cls: "x-btn-icon x-grid-page-prev",
+            disabled: true,
+            handler: this.onClick.createDelegate(this, ["prev"])
         });
-
-        this.mbtn.on('click', this.showMonthPicker, this);
-        this.mbtn.el.child(this.mbtn.menuClassTarget).addClass("x-btn-with-menu");
-
-
-        var today = (new Date()).dateFormat(this.format);
-        
-        var baseTb = new Roo.Toolbar(this.el.child("td.x-date-bottom", true));
-        if (this.showClear) {
-            baseTb.add( new Roo.Toolbar.Fill());
-        }
-        baseTb.add({
-            text: String.format(this.todayText, today),
-            tooltip: String.format(this.todayTip, today),
-            handler: this.selectToday,
-            scope: this
+        //this.addSeparator();
+        this.add(this.beforePageText);
+        this.field = Roo.get(this.addDom({
+           tag: "input",
+           type: "text",
+           size: "3",
+           value: "1",
+           cls: "x-grid-page-number"
+        }).el);
+        this.field.on("keydown", this.onPagingKeydown, this);
+        this.field.on("focus", function(){this.dom.select();});
+        this.afterTextEl = this.addText(String.format(this.afterPageText, 1));
+        this.field.setHeight(18);
+        //this.addSeparator();
+        this.next = this.addButton({
+            tooltip: this.nextText,
+            cls: "x-btn-icon x-grid-page-next",
+            disabled: true,
+            handler: this.onClick.createDelegate(this, ["next"])
         });
-        
-        //var todayBtn = new Roo.Button(this.el.child("td.x-date-bottom", true), {
-            
-        //});
-        if (this.showClear) {
-            
-            baseTb.add( new Roo.Toolbar.Fill());
-            baseTb.add({
-                text: '&#160;',
-                cls: 'x-btn-icon x-btn-clear',
-                handler: function() {
-                    //this.value = '';
-                    this.fireEvent("select", this, '');
-                },
-                scope: this
-            });
-        }
-        
-        
-        if(Roo.isIE){
-            this.el.repaint();
+        this.last = this.addButton({
+            tooltip: this.lastText,
+            cls: "x-btn-icon x-grid-page-last",
+            disabled: true,
+            handler: this.onClick.createDelegate(this, ["last"])
+        });
+        //this.addSeparator();
+        this.loading = this.addButton({
+            tooltip: this.refreshText,
+            cls: "x-btn-icon x-grid-loading",
+            handler: this.onClick.createDelegate(this, ["refresh"])
+        });
+
+        if(this.displayInfo){
+            this.displayEl = Roo.fly(this.el.dom.firstChild).createChild({cls:'x-paging-info'});
         }
-        this.update(this.value);
     },
 
-    createMonthPicker : function(){
-        if(!this.monthPicker.dom.firstChild){
-            var buf = ['<table border="0" cellspacing="0">'];
-            for(var i = 0; i < 6; i++){
-                buf.push(
-                    '<tr><td class="x-date-mp-month"><a href="#">', this.monthNames[i].substr(0, 3), '</a></td>',
-                    '<td class="x-date-mp-month x-date-mp-sep"><a href="#">', this.monthNames[i+6].substr(0, 3), '</a></td>',
-                    i == 0 ?
-                    '<td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-prev"></a></td><td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-next"></a></td></tr>' :
-                    '<td class="x-date-mp-year"><a href="#"></a></td><td class="x-date-mp-year"><a href="#"></a></td></tr>'
+    // private
+    updateInfo : function(){
+        if(this.displayEl){
+            var count = this.ds.getCount();
+            var msg = count == 0 ?
+                this.emptyMsg :
+                String.format(
+                    this.displayMsg,
+                    this.cursor+1, this.cursor+count, this.ds.getTotalCount()    
                 );
-            }
-            buf.push(
-                '<tr class="x-date-mp-btns"><td colspan="4"><button type="button" class="x-date-mp-ok">',
-                    this.okText,
-                    '</button><button type="button" class="x-date-mp-cancel">',
-                    this.cancelText,
-                    '</button></td></tr>',
-                '</table>'
-            );
-            this.monthPicker.update(buf.join(''));
-            this.monthPicker.on('click', this.onMonthClick, this);
-            this.monthPicker.on('dblclick', this.onMonthDblClick, this);
-
-            this.mpMonths = this.monthPicker.select('td.x-date-mp-month');
-            this.mpYears = this.monthPicker.select('td.x-date-mp-year');
-
-            this.mpMonths.each(function(m, a, i){
-                i += 1;
-                if((i%2) == 0){
-                    m.dom.xmonth = 5 + Math.round(i * .5);
-                }else{
-                    m.dom.xmonth = Math.round((i-1) * .5);
-                }
-            });
+            this.displayEl.update(msg);
         }
     },
 
-    showMonthPicker : function(){
-        this.createMonthPicker();
-        var size = this.el.getSize();
-        this.monthPicker.setSize(size);
-        this.monthPicker.child('table').setSize(size);
-
-        this.mpSelMonth = (this.activeDate || this.value).getMonth();
-        this.updateMPMonth(this.mpSelMonth);
-        this.mpSelYear = (this.activeDate || this.value).getFullYear();
-        this.updateMPYear(this.mpSelYear);
+    // private
+    onLoad : function(ds, r, o){
+       this.cursor = o.params ? o.params.start : 0;
+       var d = this.getPageData(), ap = d.activePage, ps = d.pages;
 
-        this.monthPicker.slideIn('t', {duration:.2});
+       this.afterTextEl.el.innerHTML = String.format(this.afterPageText, d.pages);
+       this.field.dom.value = ap;
+       this.first.setDisabled(ap == 1);
+       this.prev.setDisabled(ap == 1);
+       this.next.setDisabled(ap == ps);
+       this.last.setDisabled(ap == ps);
+       this.loading.enable();
+       this.updateInfo();
     },
 
-    updateMPYear : function(y){
-        this.mpyear = y;
-        var ys = this.mpYears.elements;
-        for(var i = 1; i <= 10; i++){
-            var td = ys[i-1], y2;
-            if((i%2) == 0){
-                y2 = y + Math.round(i * .5);
-                td.firstChild.innerHTML = y2;
-                td.xyear = y2;
-            }else{
-                y2 = y - (5-Math.round(i * .5));
-                td.firstChild.innerHTML = y2;
-                td.xyear = y2;
-            }
-            this.mpYears.item(i-1)[y2 == this.mpSelYear ? 'addClass' : 'removeClass']('x-date-mp-sel');
-        }
+    // private
+    getPageData : function(){
+        var total = this.ds.getTotalCount();
+        return {
+            total : total,
+            activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize),
+            pages :  total < this.pageSize ? 1 : Math.ceil(total/this.pageSize)
+        };
     },
 
-    updateMPMonth : function(sm){
-        this.mpMonths.each(function(m, a, i){
-            m[m.dom.xmonth == sm ? 'addClass' : 'removeClass']('x-date-mp-sel');
-        });
+    // private
+    onLoadError : function(){
+        this.loading.enable();
     },
 
-    selectMPMonth: function(m){
-        
-    },
-
-    onMonthClick : function(e, t){
-        e.stopEvent();
-        var el = new Roo.Element(t), pn;
-        if(el.is('button.x-date-mp-cancel')){
-            this.hideMonthPicker();
-        }
-        else if(el.is('button.x-date-mp-ok')){
-            this.update(new Date(this.mpSelYear, this.mpSelMonth, (this.activeDate || this.value).getDate()));
-            this.hideMonthPicker();
-        }
-        else if(pn = el.up('td.x-date-mp-month', 2)){
-            this.mpMonths.removeClass('x-date-mp-sel');
-            pn.addClass('x-date-mp-sel');
-            this.mpSelMonth = pn.dom.xmonth;
-        }
-        else if(pn = el.up('td.x-date-mp-year', 2)){
-            this.mpYears.removeClass('x-date-mp-sel');
-            pn.addClass('x-date-mp-sel');
-            this.mpSelYear = pn.dom.xyear;
-        }
-        else if(el.is('a.x-date-mp-prev')){
-            this.updateMPYear(this.mpyear-10);
-        }
-        else if(el.is('a.x-date-mp-next')){
-            this.updateMPYear(this.mpyear+10);
-        }
-    },
-
-    onMonthDblClick : function(e, t){
-        e.stopEvent();
-        var el = new Roo.Element(t), pn;
-        if(pn = el.up('td.x-date-mp-month', 2)){
-            this.update(new Date(this.mpSelYear, pn.dom.xmonth, (this.activeDate || this.value).getDate()));
-            this.hideMonthPicker();
+    // private
+    onPagingKeydown : function(e){
+        var k = e.getKey();
+        var d = this.getPageData();
+        if(k == e.RETURN){
+            var v = this.field.dom.value, pageNum;
+            if(!v || isNaN(pageNum = parseInt(v, 10))){
+                this.field.dom.value = d.activePage;
+                return;
+            }
+            pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
+            this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
+            e.stopEvent();
         }
-        else if(pn = el.up('td.x-date-mp-year', 2)){
-            this.update(new Date(pn.dom.xyear, this.mpSelMonth, (this.activeDate || this.value).getDate()));
-            this.hideMonthPicker();
+        else if(k == e.HOME || (k == e.UP && e.ctrlKey) || (k == e.PAGEUP && e.ctrlKey) || (k == e.RIGHT && e.ctrlKey) || k == e.END || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey))
+        {
+          var pageNum = (k == e.HOME || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey)) ? 1 : d.pages;
+          this.field.dom.value = pageNum;
+          this.ds.load({params:{start: (pageNum - 1) * this.pageSize, limit: this.pageSize}});
+          e.stopEvent();
         }
-    },
-
-    hideMonthPicker : function(disableAnim){
-        if(this.monthPicker){
-            if(disableAnim === true){
-                this.monthPicker.hide();
-            }else{
-                this.monthPicker.slideOut('t', {duration:.2});
-            }
+        else if(k == e.UP || k == e.RIGHT || k == e.PAGEUP || k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
+        {
+          var v = this.field.dom.value, pageNum; 
+          var increment = (e.shiftKey) ? 10 : 1;
+          if(k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN) {
+            increment *= -1;
+          }
+          if(!v || isNaN(pageNum = parseInt(v, 10))) {
+            this.field.dom.value = d.activePage;
+            return;
+          }
+          else if(parseInt(v, 10) + increment >= 1 & parseInt(v, 10) + increment <= d.pages)
+          {
+            this.field.dom.value = parseInt(v, 10) + increment;
+            pageNum = Math.min(Math.max(1, pageNum + increment), d.pages) - 1;
+            this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
+          }
+          e.stopEvent();
         }
     },
 
     // private
-    showPrevMonth : function(e){
-        this.update(this.activeDate.add("mo", -1));
-    },
-
-    // private
-    showNextMonth : function(e){
-        this.update(this.activeDate.add("mo", 1));
-    },
-
-    // private
-    showPrevYear : function(){
-        this.update(this.activeDate.add("y", -1));
-    },
-
-    // private
-    showNextYear : function(){
-        this.update(this.activeDate.add("y", 1));
-    },
-
-    // private
-    handleMouseWheel : function(e){
-        var delta = e.getWheelDelta();
-        if(delta > 0){
-            this.showPrevMonth();
-            e.stopEvent();
-        } else if(delta < 0){
-            this.showNextMonth();
-            e.stopEvent();
+    beforeLoad : function(){
+        if(this.loading){
+            this.loading.disable();
         }
     },
-
+    /**
+     * event that occurs when you click on the navigation buttons - can be used to trigger load of a grid.
+     * @param {String} which (first|prev|next|last|refresh)  which button to press.
+     *
+     */
     // private
-    handleDateClick : function(e, t){
-        e.stopEvent();
-        if(t.dateValue && !Roo.fly(t.parentNode).hasClass("x-date-disabled")){
-            this.setValue(new Date(t.dateValue));
-            this.fireEvent("select", this, this.value);
+    onClick : function(which){
+        var ds = this.ds;
+        switch(which){
+            case "first":
+                ds.load({params:{start: 0, limit: this.pageSize}});
+            break;
+            case "prev":
+                ds.load({params:{start: Math.max(0, this.cursor-this.pageSize), limit: this.pageSize}});
+            break;
+            case "next":
+                ds.load({params:{start: this.cursor+this.pageSize, limit: this.pageSize}});
+            break;
+            case "last":
+                var total = ds.getTotalCount();
+                var extra = total % this.pageSize;
+                var lastStart = extra ? (total - extra) : total-this.pageSize;
+                ds.load({params:{start: lastStart, limit: this.pageSize}});
+            break;
+            case "refresh":
+                ds.load({params:{start: this.cursor, limit: this.pageSize}});
+            break;
         }
     },
 
-    // private
-    selectToday : function(){
-        this.setValue(new Date().clearTime());
-        this.fireEvent("select", this, this.value);
+    /**
+     * Unbinds the paging toolbar from the specified {@link Roo.data.Store}
+     * @param {Roo.data.Store} store The data store to unbind
+     */
+    unbind : function(ds){
+        ds.un("beforeload", this.beforeLoad, this);
+        ds.un("load", this.onLoad, this);
+        ds.un("loadexception", this.onLoadError, this);
+        ds.un("remove", this.updateInfo, this);
+        ds.un("add", this.updateInfo, this);
+        this.ds = undefined;
     },
 
-    // private
-    update : function(date)
-    {
-        var vd = this.activeDate;
-        this.activeDate = date;
-        if(vd && this.el){
-            var t = date.getTime();
-            if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
-                this.cells.removeClass("x-date-selected");
-                this.cells.each(function(c){
-                   if(c.dom.firstChild.dateValue == t){
-                       c.addClass("x-date-selected");
-                       setTimeout(function(){
-                            try{c.dom.firstChild.focus();}catch(e){}
-                       }, 50);
-                       return false;
-                   }
-                });
-                return;
-            }
-        }
-        
-        var days = date.getDaysInMonth();
-        var firstOfMonth = date.getFirstDateOfMonth();
-        var startingPos = firstOfMonth.getDay()-this.startDay;
-
-        if(startingPos <= this.startDay){
-            startingPos += 7;
-        }
-
-        var pm = date.add("mo", -1);
-        var prevStart = pm.getDaysInMonth()-startingPos;
-
-        var cells = this.cells.elements;
-        var textEls = this.textNodes;
-        days += startingPos;
-
-        // convert everything to numbers so it's fast
-        var day = 86400000;
-        var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
-        var today = new Date().clearTime().getTime();
-        var sel = date.clearTime().getTime();
-        var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
-        var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
-        var ddMatch = this.disabledDatesRE;
-        var ddText = this.disabledDatesText;
-        var ddays = this.disabledDays ? this.disabledDays.join("") : false;
-        var ddaysText = this.disabledDaysText;
-        var format = this.format;
-
-        var setCellClass = function(cal, cell){
-            cell.title = "";
-            var t = d.getTime();
-            cell.firstChild.dateValue = t;
-            if(t == today){
-                cell.className += " x-date-today";
-                cell.title = cal.todayText;
-            }
-            if(t == sel){
-                cell.className += " x-date-selected";
-                setTimeout(function(){
-                    try{cell.firstChild.focus();}catch(e){}
-                }, 50);
-            }
-            // disabling
-            if(t < min) {
-                cell.className = " x-date-disabled";
-                cell.title = cal.minText;
-                return;
-            }
-            if(t > max) {
-                cell.className = " x-date-disabled";
-                cell.title = cal.maxText;
-                return;
-            }
-            if(ddays){
-                if(ddays.indexOf(d.getDay()) != -1){
-                    cell.title = ddaysText;
-                    cell.className = " x-date-disabled";
-                }
-            }
-            if(ddMatch && format){
-                var fvalue = d.dateFormat(format);
-                if(ddMatch.test(fvalue)){
-                    cell.title = ddText.replace("%0", fvalue);
-                    cell.className = " x-date-disabled";
-                }
-            }
-        };
-
-        var i = 0;
-        for(; i < startingPos; i++) {
-            textEls[i].innerHTML = (++prevStart);
-            d.setDate(d.getDate()+1);
-            cells[i].className = "x-date-prevday";
-            setCellClass(this, cells[i]);
-        }
-        for(; i < days; i++){
-            intDay = i - startingPos + 1;
-            textEls[i].innerHTML = (intDay);
-            d.setDate(d.getDate()+1);
-            cells[i].className = "x-date-active";
-            setCellClass(this, cells[i]);
-        }
-        var extraDays = 0;
-        for(; i < 42; i++) {
-             textEls[i].innerHTML = (++extraDays);
-             d.setDate(d.getDate()+1);
-             cells[i].className = "x-date-nextday";
-             setCellClass(this, cells[i]);
-        }
-
-        this.mbtn.setText(this.monthNames[date.getMonth()] + " " + date.getFullYear());
-        this.fireEvent('monthchange', this, date);
-        
-        if(!this.internalRender){
-            var main = this.el.dom.firstChild;
-            var w = main.offsetWidth;
-            this.el.setWidth(w + this.el.getBorderWidth("lr"));
-            Roo.fly(main).setWidth(w);
-            this.internalRender = true;
-            // opera does not respect the auto grow header center column
-            // then, after it gets a width opera refuses to recalculate
-            // without a second pass
-            if(Roo.isOpera && !this.secondPass){
-                main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + "px";
-                this.secondPass = true;
-                this.update.defer(10, this, [date]);
-            }
-        }
-        
-        
+    /**
+     * Binds the paging toolbar to the specified {@link Roo.data.Store}
+     * @param {Roo.data.Store} store The data store to bind
+     */
+    bind : function(ds){
+        ds.on("beforeload", this.beforeLoad, this);
+        ds.on("load", this.onLoad, this);
+        ds.on("loadexception", this.onLoadError, this);
+        ds.on("remove", this.updateInfo, this);
+        ds.on("add", this.updateInfo, this);
+        this.ds = ds;
     }
-});        /*
+});/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -10216,806 +7999,1022 @@ Roo.extend(Roo.DatePicker, Roo.Component, {
  * Fork - LGPL
  * <script type="text/javascript">
  */
+
 /**
- * @class Roo.TabPanel
+ * @class Roo.Resizable
  * @extends Roo.util.Observable
- * A lightweight tab container.
- * <br><br>
- * Usage:
+ * <p>Applies drag handles to an element to make it resizable. The drag handles are inserted into the element
+ * and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap
+ * the textarea in a div and set "resizeChild" to true (or to the id of the element), <b>or</b> set wrap:true in your config and
+ * the element will be wrapped for you automatically.</p>
+ * <p>Here is the list of valid resize handles:</p>
+ * <pre>
+Value   Description
+------  -------------------
+ 'n'     north
+ 's'     south
+ 'e'     east
+ 'w'     west
+ 'nw'    northwest
+ 'sw'    southwest
+ 'se'    southeast
+ 'ne'    northeast
+ 'hd'    horizontal drag
+ 'all'   all
+</pre>
+ * <p>Here's an example showing the creation of a typical Resizable:</p>
  * <pre><code>
-// basic tabs 1, built from existing content
-var tabs = new Roo.TabPanel("tabs1");
-tabs.addTab("script", "View Script");
-tabs.addTab("markup", "View Markup");
-tabs.activate("script");
-
-// more advanced tabs, built from javascript
-var jtabs = new Roo.TabPanel("jtabs");
-jtabs.addTab("jtabs-1", "Normal Tab", "My content was added during construction.");
+var resizer = new Roo.Resizable("element-id", {
+    handles: 'all',
+    minWidth: 200,
+    minHeight: 100,
+    maxWidth: 500,
+    maxHeight: 400,
+    pinned: true
+});
+resizer.on("resize", myHandler);
+</code></pre>
+ * <p>To hide a particular handle, set its display to none in CSS, or through script:<br>
+ * resizer.east.setDisplayed(false);</p>
+ * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false)
+ * @cfg {Array/String} adjustments String "auto" or an array [width, height] with values to be <b>added</b> to the
+ * resize operation's new size (defaults to [0, 0])
+ * @cfg {Number} minWidth The minimum width for the element (defaults to 5)
+ * @cfg {Number} minHeight The minimum height for the element (defaults to 5)
+ * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
+ * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
+ * @cfg {Boolean} enabled False to disable resizing (defaults to true)
+ * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)
+ * @cfg {Number} width The width of the element in pixels (defaults to null)
+ * @cfg {Number} height The height of the element in pixels (defaults to null)
+ * @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)
+ * @cfg {Number} duration Animation duration if animate = true (defaults to .35)
+ * @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)
+ * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined)
+ * @cfg {Boolean} multiDirectional <b>Deprecated</b>.  The old style of adding multi-direction resize handles, deprecated
+ * in favor of the handles config option (defaults to false)
+ * @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)
+ * @cfg {String} easing Animation easing if animate = true (defaults to 'easingOutStrong')
+ * @cfg {Number} widthIncrement The increment to snap the width resize in pixels (dynamic must be true, defaults to 0)
+ * @cfg {Number} heightIncrement The increment to snap the height resize in pixels (dynamic must be true, defaults to 0)
+ * @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the
+ * user mouses over the resizable borders. This is only applied at config time. (defaults to false)
+ * @cfg {Boolean} preserveRatio True to preserve the original ratio between height and width during resize (defaults to false)
+ * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
+ * @cfg {Number} minX The minimum allowed page X for the element (only used for west resizing, defaults to 0)
+ * @cfg {Number} minY The minimum allowed page Y for the element (only used for north resizing, defaults to 0)
+ * @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)
+ * @constructor
+ * Create a new resizable component
+ * @param {String/HTMLElement/Roo.Element} el The id or element to resize
+ * @param {Object} config configuration options
+  */
+Roo.Resizable = function(el, config)
+{
+    this.el = Roo.get(el);
 
-// set up the UpdateManager
-var tab2 = jtabs.addTab("jtabs-2", "Ajax Tab 1");
-var updater = tab2.getUpdateManager();
-updater.setDefaultUrl("ajax1.htm");
-tab2.on('activate', updater.refresh, updater, true);
+    if(config && config.wrap){
+        config.resizeChild = this.el;
+        this.el = this.el.wrap(typeof config.wrap == "object" ? config.wrap : {cls:"xresizable-wrap"});
+        this.el.id = this.el.dom.id = config.resizeChild.id + "-rzwrap";
+        this.el.setStyle("overflow", "hidden");
+        this.el.setPositioning(config.resizeChild.getPositioning());
+        config.resizeChild.clearPositioning();
+        if(!config.width || !config.height){
+            var csize = config.resizeChild.getSize();
+            this.el.setSize(csize.width, csize.height);
+        }
+        if(config.pinned && !config.adjustments){
+            config.adjustments = "auto";
+        }
+    }
 
-// Use setUrl for Ajax loading
-var tab3 = jtabs.addTab("jtabs-3", "Ajax Tab 2");
-tab3.setUrl("ajax2.htm", null, true);
+    this.proxy = this.el.createProxy({tag: "div", cls: "x-resizable-proxy", id: this.el.id + "-rzproxy"});
+    this.proxy.unselectable();
+    this.proxy.enableDisplayMode('block');
 
-// Disabled tab
-var tab4 = jtabs.addTab("tabs1-5", "Disabled Tab", "Can't see me cause I'm disabled");
-tab4.disable();
+    Roo.apply(this, config);
 
-jtabs.activate("jtabs-1");
- * </code></pre>
- * @constructor
- * Create a new TabPanel.
- * @param {String/HTMLElement/Roo.Element} container The id, DOM element or Roo.Element container where this TabPanel is to be rendered.
- * @param {Object/Boolean} config Config object to set any properties for this TabPanel, or true to render the tabs on the bottom.
- */
-Roo.TabPanel = function(container, config){
-    /**
-    * The container element for this TabPanel.
-    * @type Roo.Element
-    */
-    this.el = Roo.get(container, true);
-    if(config){
-        if(typeof config == "boolean"){
-            this.tabPosition = config ? "bottom" : "top";
-        }else{
-            Roo.apply(this, config);
+    if(this.pinned){
+        this.disableTrackOver = true;
+        this.el.addClass("x-resizable-pinned");
+    }
+    // if the element isn't positioned, make it relative
+    var position = this.el.getStyle("position");
+    if(position != "absolute" && position != "fixed"){
+        this.el.setStyle("position", "relative");
+    }
+    if(!this.handles){ // no handles passed, must be legacy style
+        this.handles = 's,e,se';
+        if(this.multiDirectional){
+            this.handles += ',n,w';
         }
     }
-    if(this.tabPosition == "bottom"){
-        this.bodyEl = Roo.get(this.createBody(this.el.dom));
-        this.el.addClass("x-tabs-bottom");
+    if(this.handles == "all"){
+        this.handles = "n s e w ne nw se sw";
     }
-    this.stripWrap = Roo.get(this.createStrip(this.el.dom), true);
-    this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
-    this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
-    if(Roo.isIE){
-        Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden");
+    var hs = this.handles.split(/\s*?[,;]\s*?| /);
+    var ps = Roo.Resizable.positions;
+    for(var i = 0, len = hs.length; i < len; i++){
+        if(hs[i] && ps[hs[i]]){
+            var pos = ps[hs[i]];
+            this[pos] = new Roo.Resizable.Handle(this, pos, this.disableTrackOver, this.transparent);
+        }
     }
-    if(this.tabPosition != "bottom"){
-        /** The body element that contains {@link Roo.TabPanelItem} bodies. +
-         * @type Roo.Element
-         */
-        this.bodyEl = Roo.get(this.createBody(this.el.dom));
-        this.el.addClass("x-tabs-top");
+    // legacy
+    this.corner = this.southeast;
+    
+    // updateBox = the box can move..
+    if(this.handles.indexOf("n") != -1 || this.handles.indexOf("w") != -1 || this.handles.indexOf("hd") != -1) {
+        this.updateBox = true;
     }
-    this.items = [];
 
-    this.bodyEl.setStyle("position", "relative");
+    this.activeHandle = null;
 
-    this.active = null;
-    this.activateDelegate = this.activate.createDelegate(this);
+    if(this.resizeChild){
+        if(typeof this.resizeChild == "boolean"){
+            this.resizeChild = Roo.get(this.el.dom.firstChild, true);
+        }else{
+            this.resizeChild = Roo.get(this.resizeChild, true);
+        }
+    }
+    
+    if(this.adjustments == "auto"){
+        var rc = this.resizeChild;
+        var hw = this.west, he = this.east, hn = this.north, hs = this.south;
+        if(rc && (hw || hn)){
+            rc.position("relative");
+            rc.setLeft(hw ? hw.el.getWidth() : 0);
+            rc.setTop(hn ? hn.el.getHeight() : 0);
+        }
+        this.adjustments = [
+            (he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0),
+            (hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1
+        ];
+    }
+
+    if(this.draggable){
+        this.dd = this.dynamic ?
+            this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});
+        this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id);
+    }
 
+    // public events
     this.addEvents({
         /**
-         * @event tabchange
-         * Fires when the active tab changes
-         * @param {Roo.TabPanel} this
-         * @param {Roo.TabPanelItem} activePanel The new active tab
+         * @event beforeresize
+         * Fired before resize is allowed. Set enabled to false to cancel resize.
+         * @param {Roo.Resizable} this
+         * @param {Roo.EventObject} e The mousedown event
          */
-        "tabchange": true,
+        "beforeresize" : true,
         /**
-         * @event beforetabchange
-         * Fires before the active tab changes, set cancel to true on the "e" parameter to cancel the change
-         * @param {Roo.TabPanel} this
-         * @param {Object} e Set cancel to true on this object to cancel the tab change
-         * @param {Roo.TabPanelItem} tab The tab being changed to
+         * @event resizing
+         * Fired a resizing.
+         * @param {Roo.Resizable} this
+         * @param {Number} x The new x position
+         * @param {Number} y The new y position
+         * @param {Number} w The new w width
+         * @param {Number} h The new h hight
+         * @param {Roo.EventObject} e The mouseup event
          */
-        "beforetabchange" : true
+        "resizing" : true,
+        /**
+         * @event resize
+         * Fired after a resize.
+         * @param {Roo.Resizable} this
+         * @param {Number} width The new width
+         * @param {Number} height The new height
+         * @param {Roo.EventObject} e The mouseup event
+         */
+        "resize" : true
     });
 
-    Roo.EventManager.onWindowResize(this.onResize, this);
-    this.cpad = this.el.getPadding("lr");
-    this.hiddenCount = 0;
-
-
-    // toolbar on the tabbar support...
-    if (this.toolbar) {
-        var tcfg = this.toolbar;
-        tcfg.container = this.stripEl.child('td.x-tab-strip-toolbar');  
-        this.toolbar = new Roo.Toolbar(tcfg);
-        if (Roo.isSafari) {
-            var tbl = tcfg.container.child('table', true);
-            tbl.setAttribute('width', '100%');
-        }
-        
+    if(this.width !== null && this.height !== null){
+        this.resizeTo(this.width, this.height);
+    }else{
+        this.updateChildSize();
     }
-   
+    if(Roo.isIE){
+        this.el.dom.style.zoom = 1;
+    }
+    Roo.Resizable.superclass.constructor.call(this);
+};
 
+Roo.extend(Roo.Resizable, Roo.util.Observable, {
+        resizeChild : false,
+        adjustments : [0, 0],
+        minWidth : 5,
+        minHeight : 5,
+        maxWidth : 10000,
+        maxHeight : 10000,
+        enabled : true,
+        animate : false,
+        duration : .35,
+        dynamic : false,
+        handles : false,
+        multiDirectional : false,
+        disableTrackOver : false,
+        easing : 'easeOutStrong',
+        widthIncrement : 0,
+        heightIncrement : 0,
+        pinned : false,
+        width : null,
+        height : null,
+        preserveRatio : false,
+        transparent: false,
+        minX: 0,
+        minY: 0,
+        draggable: false,
 
-    Roo.TabPanel.superclass.constructor.call(this);
-};
+        /**
+         * @cfg {String/HTMLElement/Element} constrainTo Constrain the resize to a particular element
+         */
+        constrainTo: undefined,
+        /**
+         * @cfg {Roo.lib.Region} resizeRegion Constrain the resize to a particular region
+         */
+        resizeRegion: undefined,
 
-Roo.extend(Roo.TabPanel, Roo.util.Observable, {
-    /*
-     *@cfg {String} tabPosition "top" or "bottom" (defaults to "top")
-     */
-    tabPosition : "top",
-    /*
-     *@cfg {Number} currentTabWidth The width of the current tab (defaults to 0)
-     */
-    currentTabWidth : 0,
-    /*
-     *@cfg {Number} minTabWidth The minimum width of a tab (defaults to 40) (ignored if {@link #resizeTabs} is not true)
-     */
-    minTabWidth : 40,
-    /*
-     *@cfg {Number} maxTabWidth The maximum width of a tab (defaults to 250) (ignored if {@link #resizeTabs} is not true)
-     */
-    maxTabWidth : 250,
-    /*
-     *@cfg {Number} preferredTabWidth The preferred (default) width of a tab (defaults to 175) (ignored if {@link #resizeTabs} is not true)
-     */
-    preferredTabWidth : 175,
-    /*
-     *@cfg {Boolean} resizeTabs True to enable dynamic tab resizing (defaults to false)
-     */
-    resizeTabs : false,
-    /*
-     *@cfg {Boolean} monitorResize Set this to true to turn on window resize monitoring (ignored if {@link #resizeTabs} is not true) (defaults to true)
-     */
-    monitorResize : true,
-    /*
-     *@cfg {Object} toolbar xtype description of toolbar to show at the right of the tab bar. 
-     */
-    toolbar : false,
 
     /**
-     * Creates a new {@link Roo.TabPanelItem} by looking for an existing element with the provided id -- if it's not found it creates one.
-     * @param {String} id The id of the div to use <b>or create</b>
-     * @param {String} text The text for the tab
-     * @param {String} content (optional) Content to put in the TabPanelItem body
-     * @param {Boolean} closable (optional) True to create a close icon on the tab
-     * @return {Roo.TabPanelItem} The created TabPanelItem
+     * Perform a manual resize
+     * @param {Number} width
+     * @param {Number} height
      */
-    addTab : function(id, text, content, closable){
-        var item = new Roo.TabPanelItem(this, id, text, closable);
-        this.addTabItem(item);
-        if(content){
-            item.setContent(content);
-        }
-        return item;
+    resizeTo : function(width, height){
+        this.el.setSize(width, height);
+        this.updateChildSize();
+        this.fireEvent("resize", this, width, height, null);
     },
 
-    /**
-     * Returns the {@link Roo.TabPanelItem} with the specified id/index
-     * @param {String/Number} id The id or index of the TabPanelItem to fetch.
-     * @return {Roo.TabPanelItem}
-     */
-    getTab : function(id){
-        return this.items[id];
-    },
+    // private
+    startSizing : function(e, handle){
+        this.fireEvent("beforeresize", this, e);
+        if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler
 
-    /**
-     * Hides the {@link Roo.TabPanelItem} with the specified id/index
-     * @param {String/Number} id The id or index of the TabPanelItem to hide.
-     */
-    hideTab : function(id){
-        var t = this.items[id];
-        if(!t.isHidden()){
-           t.setHidden(true);
-           this.hiddenCount++;
-           this.autoSizeTabs();
-        }
-    },
+            if(!this.overlay){
+                this.overlay = this.el.createProxy({tag: "div", cls: "x-resizable-overlay", html: "&#160;"});
+                this.overlay.unselectable();
+                this.overlay.enableDisplayMode("block");
+                this.overlay.on("mousemove", this.onMouseMove, this);
+                this.overlay.on("mouseup", this.onMouseUp, this);
+            }
+            this.overlay.setStyle("cursor", handle.el.getStyle("cursor"));
 
-    /**
-     * "Unhides" the {@link Roo.TabPanelItem} with the specified id/index.
-     * @param {String/Number} id The id or index of the TabPanelItem to unhide.
-     */
-    unhideTab : function(id){
-        var t = this.items[id];
-        if(t.isHidden()){
-           t.setHidden(false);
-           this.hiddenCount--;
-           this.autoSizeTabs();
-        }
-    },
+            this.resizing = true;
+            this.startBox = this.el.getBox();
+            this.startPoint = e.getXY();
+            this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],
+                            (this.startBox.y + this.startBox.height) - this.startPoint[1]];
 
-    /**
-     * Adds an existing {@link Roo.TabPanelItem}.
-     * @param {Roo.TabPanelItem} item The TabPanelItem to add
-     */
-    addTabItem : function(item){
-        this.items[item.id] = item;
-        this.items.push(item);
-        if(this.resizeTabs){
-           item.setWidth(this.currentTabWidth || this.preferredTabWidth);
-           this.autoSizeTabs();
-        }else{
-            item.autoSize();
-        }
-    },
+            this.overlay.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
+            this.overlay.show();
 
-    /**
-     * Removes a {@link Roo.TabPanelItem}.
-     * @param {String/Number} id The id or index of the TabPanelItem to remove.
-     */
-    removeTab : function(id){
-        var items = this.items;
-        var tab = items[id];
-        if(!tab) { return; }
-        var index = items.indexOf(tab);
-        if(this.active == tab && items.length > 1){
-            var newTab = this.getNextAvailable(index);
-            if(newTab) {
-                newTab.activate();
+            if(this.constrainTo) {
+                var ct = Roo.get(this.constrainTo);
+                this.resizeRegion = ct.getRegion().adjust(
+                    ct.getFrameWidth('t'),
+                    ct.getFrameWidth('l'),
+                    -ct.getFrameWidth('b'),
+                    -ct.getFrameWidth('r')
+                );
             }
-        }
-        this.stripEl.dom.removeChild(tab.pnode.dom);
-        if(tab.bodyEl.dom.parentNode == this.bodyEl.dom){ // if it was moved already prevent error
-            this.bodyEl.dom.removeChild(tab.bodyEl.dom);
-        }
-        items.splice(index, 1);
-        delete this.items[tab.id];
-        tab.fireEvent("close", tab);
-        tab.purgeListeners();
-        this.autoSizeTabs();
-    },
 
-    getNextAvailable : function(start){
-        var items = this.items;
-        var index = start;
-        // look for a next tab that will slide over to
-        // replace the one being removed
-        while(index < items.length){
-            var item = items[++index];
-            if(item && !item.isHidden()){
-                return item;
-            }
-        }
-        // if one isn't found select the previous tab (on the left)
-        index = start;
-        while(index >= 0){
-            var item = items[--index];
-            if(item && !item.isHidden()){
-                return item;
+            this.proxy.setStyle('visibility', 'hidden'); // workaround display none
+            this.proxy.show();
+            this.proxy.setBox(this.startBox);
+            if(!this.dynamic){
+                this.proxy.setStyle('visibility', 'visible');
             }
         }
-        return null;
     },
 
-    /**
-     * Disables a {@link Roo.TabPanelItem}. It cannot be the active tab, if it is this call is ignored.
-     * @param {String/Number} id The id or index of the TabPanelItem to disable.
-     */
-    disableTab : function(id){
-        var tab = this.items[id];
-        if(tab && this.active != tab){
-            tab.disable();
+    // private
+    onMouseDown : function(handle, e){
+        if(this.enabled){
+            e.stopEvent();
+            this.activeHandle = handle;
+            this.startSizing(e, handle);
         }
     },
 
-    /**
-     * Enables a {@link Roo.TabPanelItem} that is disabled.
-     * @param {String/Number} id The id or index of the TabPanelItem to enable.
-     */
-    enableTab : function(id){
-        var tab = this.items[id];
-        tab.enable();
+    // private
+    onMouseUp : function(e){
+        var size = this.resizeElement();
+        this.resizing = false;
+        this.handleOut();
+        this.overlay.hide();
+        this.proxy.hide();
+        this.fireEvent("resize", this, size.width, size.height, e);
     },
 
-    /**
-     * Activates a {@link Roo.TabPanelItem}. The currently active one will be deactivated.
-     * @param {String/Number} id The id or index of the TabPanelItem to activate.
-     * @return {Roo.TabPanelItem} The TabPanelItem.
-     */
-    activate : function(id){
-        var tab = this.items[id];
-        if(!tab){
-            return null;
-        }
-        if(tab == this.active || tab.disabled){
-            return tab;
-        }
-        var e = {};
-        this.fireEvent("beforetabchange", this, e, tab);
-        if(e.cancel !== true && !tab.disabled){
-            if(this.active){
-                this.active.hide();
+    // private
+    updateChildSize : function(){
+        
+        if(this.resizeChild){
+            var el = this.el;
+            var child = this.resizeChild;
+            var adj = this.adjustments;
+            if(el.dom.offsetWidth){
+                var b = el.getSize(true);
+                child.setSize(b.width+adj[0], b.height+adj[1]);
+            }
+            // Second call here for IE
+            // The first call enables instant resizing and
+            // the second call corrects scroll bars if they
+            // exist
+            if(Roo.isIE){
+                setTimeout(function(){
+                    if(el.dom.offsetWidth){
+                        var b = el.getSize(true);
+                        child.setSize(b.width+adj[0], b.height+adj[1]);
+                    }
+                }, 10);
             }
-            this.active = this.items[id];
-            this.active.show();
-            this.fireEvent("tabchange", this, this.active);
         }
-        return tab;
-    },
-
-    /**
-     * Gets the active {@link Roo.TabPanelItem}.
-     * @return {Roo.TabPanelItem} The active TabPanelItem or null if none are active.
-     */
-    getActiveTab : function(){
-        return this.active;
     },
 
-    /**
-     * Updates the tab body element to fit the height of the container element
-     * for overflow scrolling
-     * @param {Number} targetHeight (optional) Override the starting height from the elements height
-     */
-    syncHeight : function(targetHeight){
-        var height = (targetHeight || this.el.getHeight())-this.el.getBorderWidth("tb")-this.el.getPadding("tb");
-        var bm = this.bodyEl.getMargins();
-        var newHeight = height-(this.stripWrap.getHeight()||0)-(bm.top+bm.bottom);
-        this.bodyEl.setHeight(newHeight);
-        return newHeight;
+    // private
+    snap : function(value, inc, min){
+        if(!inc || !value) {
+            return value;
+        }
+        var newValue = value;
+        var m = value % inc;
+        if(m > 0){
+            if(m > (inc/2)){
+                newValue = value + (inc-m);
+            }else{
+                newValue = value - m;
+            }
+        }
+        return Math.max(min, newValue);
     },
 
-    onResize : function(){
-        if(this.monitorResize){
-            this.autoSizeTabs();
+    // private
+    resizeElement : function(){
+        var box = this.proxy.getBox();
+        if(this.updateBox){
+            this.el.setBox(box, false, this.animate, this.duration, null, this.easing);
+        }else{
+            this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);
         }
+        this.updateChildSize();
+        if(!this.dynamic){
+            this.proxy.hide();
+        }
+        return box;
     },
 
-    /**
-     * Disables tab resizing while tabs are being added (if {@link #resizeTabs} is false this does nothing)
-     */
-    beginUpdate : function(){
-        this.updating = true;
+    // private
+    constrain : function(v, diff, m, mx){
+        if(v - diff < m){
+            diff = v - m;
+        }else if(v - diff > mx){
+            diff = mx - v;
+        }
+        return diff;
     },
 
-    /**
-     * Stops an update and resizes the tabs (if {@link #resizeTabs} is false this does nothing)
-     */
-    endUpdate : function(){
-        this.updating = false;
-        this.autoSizeTabs();
-    },
+    // private
+    onMouseMove : function(e){
+        
+        if(this.enabled){
+            try{// try catch so if something goes wrong the user doesn't get hung
 
-    /**
-     * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
-     */
-    autoSizeTabs : function(){
-        var count = this.items.length;
-        var vcount = count - this.hiddenCount;
-        if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) {
-            return;
-        }
-        var w = Math.max(this.el.getWidth() - this.cpad, 10);
-        var availWidth = Math.floor(w / vcount);
-        var b = this.stripBody;
-        if(b.getWidth() > w){
-            var tabs = this.items;
-            this.setTabWidth(Math.max(availWidth, this.minTabWidth)-2);
-            if(availWidth < this.minTabWidth){
-                /*if(!this.sleft){    // incomplete scrolling code
-                    this.createScrollButtons();
-                }
-                this.showScroll();
-                this.stripClip.setWidth(w - (this.sleft.getWidth()+this.sright.getWidth()));*/
-            }
-        }else{
-            if(this.currentTabWidth < this.preferredTabWidth){
-                this.setTabWidth(Math.min(availWidth, this.preferredTabWidth)-2);
+            if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {
+            	return;
             }
-        }
-    },
 
-    /**
-     * Returns the number of tabs in this TabPanel.
-     * @return {Number}
-     */
-     getCount : function(){
-         return this.items.length;
-     },
+            //var curXY = this.startPoint;
+            var curSize = this.curSize || this.startBox;
+            var x = this.startBox.x, y = this.startBox.y;
+            var ox = x, oy = y;
+            var w = curSize.width, h = curSize.height;
+            var ow = w, oh = h;
+            var mw = this.minWidth, mh = this.minHeight;
+            var mxw = this.maxWidth, mxh = this.maxHeight;
+            var wi = this.widthIncrement;
+            var hi = this.heightIncrement;
 
-    /**
-     * Resizes all the tabs to the passed width
-     * @param {Number} The new width
-     */
-    setTabWidth : function(width){
-        this.currentTabWidth = width;
-        for(var i = 0, len = this.items.length; i < len; i++) {
-        	if(!this.items[i].isHidden()) {
-                this.items[i].setWidth(width);
-            }
-        }
-    },
+            var eventXY = e.getXY();
+            var diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0]));
+            var diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1]));
 
-    /**
-     * Destroys this TabPanel
-     * @param {Boolean} removeEl (optional) True to remove the element from the DOM as well (defaults to undefined)
-     */
-    destroy : function(removeEl){
-        Roo.EventManager.removeResizeListener(this.onResize, this);
-        for(var i = 0, len = this.items.length; i < len; i++){
-            this.items[i].purgeListeners();
-        }
-        if(removeEl === true){
-            this.el.update("");
-            this.el.remove();
-        }
-    }
-});
+            var pos = this.activeHandle.position;
 
-/**
- * @class Roo.TabPanelItem
- * @extends Roo.util.Observable
- * Represents an individual item (tab plus body) in a TabPanel.
- * @param {Roo.TabPanel} tabPanel The {@link Roo.TabPanel} this TabPanelItem belongs to
- * @param {String} id The id of this TabPanelItem
- * @param {String} text The text for the tab of this TabPanelItem
- * @param {Boolean} closable True to allow this TabPanelItem to be closable (defaults to false)
- */
-Roo.TabPanelItem = function(tabPanel, id, text, closable){
-    /**
-     * The {@link Roo.TabPanel} this TabPanelItem belongs to
-     * @type Roo.TabPanel
-     */
-    this.tabPanel = tabPanel;
-    /**
-     * The id for this TabPanelItem
-     * @type String
-     */
-    this.id = id;
-    /** @private */
-    this.disabled = false;
-    /** @private */
-    this.text = text;
-    /** @private */
-    this.loaded = false;
-    this.closable = closable;
-
-    /**
-     * The body element for this TabPanelItem.
-     * @type Roo.Element
-     */
-    this.bodyEl = Roo.get(tabPanel.createItemBody(tabPanel.bodyEl.dom, id));
-    this.bodyEl.setVisibilityMode(Roo.Element.VISIBILITY);
-    this.bodyEl.setStyle("display", "block");
-    this.bodyEl.setStyle("zoom", "1");
-    this.hideAction();
+            switch(pos){
+                case "east":
+                    w += diffX;
+                    w = Math.min(Math.max(mw, w), mxw);
+                    break;
+             
+                case "south":
+                    h += diffY;
+                    h = Math.min(Math.max(mh, h), mxh);
+                    break;
+                case "southeast":
+                    w += diffX;
+                    h += diffY;
+                    w = Math.min(Math.max(mw, w), mxw);
+                    h = Math.min(Math.max(mh, h), mxh);
+                    break;
+                case "north":
+                    diffY = this.constrain(h, diffY, mh, mxh);
+                    y += diffY;
+                    h -= diffY;
+                    break;
+                case "hdrag":
+                    
+                    if (wi) {
+                        var adiffX = Math.abs(diffX);
+                        var sub = (adiffX % wi); // how much 
+                        if (sub > (wi/2)) { // far enough to snap
+                            diffX = (diffX > 0) ? diffX-sub + wi : diffX+sub - wi;
+                        } else {
+                            // remove difference.. 
+                            diffX = (diffX > 0) ? diffX-sub : diffX+sub;
+                        }
+                    }
+                    x += diffX;
+                    x = Math.max(this.minX, x);
+                    break;
+                case "west":
+                    diffX = this.constrain(w, diffX, mw, mxw);
+                    x += diffX;
+                    w -= diffX;
+                    break;
+                case "northeast":
+                    w += diffX;
+                    w = Math.min(Math.max(mw, w), mxw);
+                    diffY = this.constrain(h, diffY, mh, mxh);
+                    y += diffY;
+                    h -= diffY;
+                    break;
+                case "northwest":
+                    diffX = this.constrain(w, diffX, mw, mxw);
+                    diffY = this.constrain(h, diffY, mh, mxh);
+                    y += diffY;
+                    h -= diffY;
+                    x += diffX;
+                    w -= diffX;
+                    break;
+               case "southwest":
+                    diffX = this.constrain(w, diffX, mw, mxw);
+                    h += diffY;
+                    h = Math.min(Math.max(mh, h), mxh);
+                    x += diffX;
+                    w -= diffX;
+                    break;
+            }
 
-    var els = tabPanel.createStripElements(tabPanel.stripEl.dom, text, closable);
-    /** @private */
-    this.el = Roo.get(els.el, true);
-    this.inner = Roo.get(els.inner, true);
-    this.textEl = Roo.get(this.el.dom.firstChild.firstChild.firstChild, true);
-    this.pnode = Roo.get(els.el.parentNode, true);
-    this.el.on("mousedown", this.onTabMouseDown, this);
-    this.el.on("click", this.onTabClick, this);
-    /** @private */
-    if(closable){
-        var c = Roo.get(els.close, true);
-        c.dom.title = this.closeText;
-        c.addClassOnOver("close-over");
-        c.on("click", this.closeClick, this);
-     }
+            var sw = this.snap(w, wi, mw);
+            var sh = this.snap(h, hi, mh);
+            if(sw != w || sh != h){
+                switch(pos){
+                    case "northeast":
+                        y -= sh - h;
+                    break;
+                    case "north":
+                        y -= sh - h;
+                        break;
+                    case "southwest":
+                        x -= sw - w;
+                    break;
+                    case "west":
+                        x -= sw - w;
+                        break;
+                    case "northwest":
+                        x -= sw - w;
+                        y -= sh - h;
+                    break;
+                }
+                w = sw;
+                h = sh;
+            }
 
-    this.addEvents({
-         /**
-         * @event activate
-         * Fires when this tab becomes the active tab.
-         * @param {Roo.TabPanel} tabPanel The parent TabPanel
-         * @param {Roo.TabPanelItem} this
-         */
-        "activate": true,
-        /**
-         * @event beforeclose
-         * Fires before this tab is closed. To cancel the close, set cancel to true on e (e.cancel = true).
-         * @param {Roo.TabPanelItem} this
-         * @param {Object} e Set cancel to true on this object to cancel the close.
-         */
-        "beforeclose": true,
-        /**
-         * @event close
-         * Fires when this tab is closed.
-         * @param {Roo.TabPanelItem} this
-         */
-         "close": true,
-        /**
-         * @event deactivate
-         * Fires when this tab is no longer the active tab.
-         * @param {Roo.TabPanel} tabPanel The parent TabPanel
-         * @param {Roo.TabPanelItem} this
-         */
-         "deactivate" : true
-    });
-    this.hidden = false;
+            if(this.preserveRatio){
+                switch(pos){
+                    case "southeast":
+                    case "east":
+                        h = oh * (w/ow);
+                        h = Math.min(Math.max(mh, h), mxh);
+                        w = ow * (h/oh);
+                       break;
+                    case "south":
+                        w = ow * (h/oh);
+                        w = Math.min(Math.max(mw, w), mxw);
+                        h = oh * (w/ow);
+                        break;
+                    case "northeast":
+                        w = ow * (h/oh);
+                        w = Math.min(Math.max(mw, w), mxw);
+                        h = oh * (w/ow);
+                    break;
+                    case "north":
+                        var tw = w;
+                        w = ow * (h/oh);
+                        w = Math.min(Math.max(mw, w), mxw);
+                        h = oh * (w/ow);
+                        x += (tw - w) / 2;
+                        break;
+                    case "southwest":
+                        h = oh * (w/ow);
+                        h = Math.min(Math.max(mh, h), mxh);
+                        var tw = w;
+                        w = ow * (h/oh);
+                        x += tw - w;
+                        break;
+                    case "west":
+                        var th = h;
+                        h = oh * (w/ow);
+                        h = Math.min(Math.max(mh, h), mxh);
+                        y += (th - h) / 2;
+                        var tw = w;
+                        w = ow * (h/oh);
+                        x += tw - w;
+                       break;
+                    case "northwest":
+                        var tw = w;
+                        var th = h;
+                        h = oh * (w/ow);
+                        h = Math.min(Math.max(mh, h), mxh);
+                        w = ow * (h/oh);
+                        y += th - h;
+                        x += tw - w;
+                       break;
 
-    Roo.TabPanelItem.superclass.constructor.call(this);
-};
+                }
+            }
+            if (pos == 'hdrag') {
+                w = ow;
+            }
+            this.proxy.setBounds(x, y, w, h);
+            if(this.dynamic){
+                this.resizeElement();
+            }
+            }catch(e){}
+        }
+        this.fireEvent("resizing", this, x, y, w, h, e);
+    },
 
-Roo.extend(Roo.TabPanelItem, Roo.util.Observable, {
-    purgeListeners : function(){
-       Roo.util.Observable.prototype.purgeListeners.call(this);
-       this.el.removeAllListeners();
+    // private
+    handleOver : function(){
+        if(this.enabled){
+            this.el.addClass("x-resizable-over");
+        }
     },
-    /**
-     * Shows this TabPanelItem -- this <b>does not</b> deactivate the currently active TabPanelItem.
-     */
-    show : function(){
-        this.pnode.addClass("on");
-        this.showAction();
-        if(Roo.isOpera){
-            this.tabPanel.stripWrap.repaint();
+
+    // private
+    handleOut : function(){
+        if(!this.resizing){
+            this.el.removeClass("x-resizable-over");
         }
-        this.fireEvent("activate", this.tabPanel, this);
     },
 
     /**
-     * Returns true if this tab is the active tab.
-     * @return {Boolean}
+     * Returns the element this component is bound to.
+     * @return {Roo.Element}
      */
-    isActive : function(){
-        return this.tabPanel.getActiveTab() == this;
+    getEl : function(){
+        return this.el;
     },
 
     /**
-     * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
+     * Returns the resizeChild element (or null).
+     * @return {Roo.Element}
      */
-    hide : function(){
-        this.pnode.removeClass("on");
-        this.hideAction();
-        this.fireEvent("deactivate", this.tabPanel, this);
-    },
-
-    hideAction : function(){
-        this.bodyEl.hide();
-        this.bodyEl.setStyle("position", "absolute");
-        this.bodyEl.setLeft("-20000px");
-        this.bodyEl.setTop("-20000px");
+    getResizeChild : function(){
+        return this.resizeChild;
     },
-
-    showAction : function(){
-        this.bodyEl.setStyle("position", "relative");
-        this.bodyEl.setTop("");
-        this.bodyEl.setLeft("");
-        this.bodyEl.show();
+    groupHandler : function()
+    {
+        
     },
-
     /**
-     * Set the tooltip for the tab.
-     * @param {String} tooltip The tab's tooltip
+     * Destroys this resizable. If the element was wrapped and
+     * removeEl is not true then the element remains.
+     * @param {Boolean} removeEl (optional) true to remove the element from the DOM
      */
-    setTooltip : function(text){
-        if(Roo.QuickTips && Roo.QuickTips.isEnabled()){
-            this.textEl.dom.qtip = text;
-            this.textEl.dom.removeAttribute('title');
-        }else{
-            this.textEl.dom.title = text;
+    destroy : function(removeEl){
+        this.proxy.remove();
+        if(this.overlay){
+            this.overlay.removeAllListeners();
+            this.overlay.remove();
         }
-    },
+        var ps = Roo.Resizable.positions;
+        for(var k in ps){
+            if(typeof ps[k] != "function" && this[ps[k]]){
+                var h = this[ps[k]];
+                h.el.removeAllListeners();
+                h.el.remove();
+            }
+        }
+        if(removeEl){
+            this.el.update("");
+            this.el.remove();
+        }
+    }
+});
 
-    onTabClick : function(e){
-        e.preventDefault();
-        this.tabPanel.activate(this.id);
-    },
+// private
+// hash to map config positions to true positions
+Roo.Resizable.positions = {
+    n: "north", s: "south", e: "east", w: "west", se: "southeast", sw: "southwest", nw: "northwest", ne: "northeast", 
+    hd: "hdrag"
+};
 
-    onTabMouseDown : function(e){
-        e.preventDefault();
-        this.tabPanel.activate(this.id);
-    },
+// private
+Roo.Resizable.Handle = function(rz, pos, disableTrackOver, transparent){
+    if(!this.tpl){
+        // only initialize the template if resizable is used
+        var tpl = Roo.DomHelper.createTemplate(
+            {tag: "div", cls: "x-resizable-handle x-resizable-handle-{0}"}
+        );
+        tpl.compile();
+        Roo.Resizable.Handle.prototype.tpl = tpl;
+    }
+    this.position = pos;
+    this.rz = rz;
+    // show north drag fro topdra
+    var handlepos = pos == 'hdrag' ? 'north' : pos;
+    
+    this.el = this.tpl.append(rz.el.dom, [handlepos], true);
+    if (pos == 'hdrag') {
+        this.el.setStyle('cursor', 'pointer');
+    }
+    this.el.unselectable();
+    if(transparent){
+        this.el.setOpacity(0);
+    }
+    this.el.on("mousedown", this.onMouseDown, this);
+    if(!disableTrackOver){
+        this.el.on("mouseover", this.onMouseOver, this);
+        this.el.on("mouseout", this.onMouseOut, this);
+    }
+};
 
-    getWidth : function(){
-        return this.inner.getWidth();
+// private
+Roo.Resizable.Handle.prototype = {
+    afterResize : function(rz){
+        Roo.log('after?');
+        // do nothing
     },
-
-    setWidth : function(width){
-        var iwidth = width - this.pnode.getPadding("lr");
-        this.inner.setWidth(iwidth);
-        this.textEl.setWidth(iwidth-this.inner.getPadding("lr"));
-        this.pnode.setWidth(width);
+    // private
+    onMouseDown : function(e){
+        this.rz.onMouseDown(this, e);
     },
-
-    /**
-     * Show or hide the tab
-     * @param {Boolean} hidden True to hide or false to show.
-     */
-    setHidden : function(hidden){
-        this.hidden = hidden;
-        this.pnode.setStyle("display", hidden ? "none" : "");
+    // private
+    onMouseOver : function(e){
+        this.rz.handleOver(this, e);
     },
+    // private
+    onMouseOut : function(e){
+        this.rz.handleOut(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">
+ */
+
+/**
+ * @class Roo.Editor
+ * @extends Roo.Component
+ * A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic.
+ * @constructor
+ * Create a new Editor
+ * @param {Roo.form.Field} field The Field object (or descendant)
+ * @param {Object} config The config object
+ */
+Roo.Editor = function(field, config){
+    Roo.Editor.superclass.constructor.call(this, config);
+    this.field = field;
+    this.addEvents({
+        /**
+	     * @event beforestartedit
+	     * Fires when editing is initiated, but before the value changes.  Editing can be canceled by returning
+	     * false from the handler of this event.
+	     * @param {Editor} this
+	     * @param {Roo.Element} boundEl The underlying element bound to this editor
+	     * @param {Mixed} value The field value being set
+	     */
+        "beforestartedit" : true,
+        /**
+	     * @event startedit
+	     * Fires when this editor is displayed
+	     * @param {Roo.Element} boundEl The underlying element bound to this editor
+	     * @param {Mixed} value The starting field value
+	     */
+        "startedit" : true,
+        /**
+	     * @event beforecomplete
+	     * Fires after a change has been made to the field, but before the change is reflected in the underlying
+	     * field.  Saving the change to the field can be canceled by returning false from the handler of this event.
+	     * Note that if the value has not changed and ignoreNoChange = true, the editing will still end but this
+	     * event will not fire since no edit actually occurred.
+	     * @param {Editor} this
+	     * @param {Mixed} value The current field value
+	     * @param {Mixed} startValue The original field value
+	     */
+        "beforecomplete" : true,
+        /**
+	     * @event complete
+	     * Fires after editing is complete and any changed value has been written to the underlying field.
+	     * @param {Editor} this
+	     * @param {Mixed} value The current field value
+	     * @param {Mixed} startValue The original field value
+	     */
+        "complete" : true,
+        /**
+         * @event specialkey
+         * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check
+         * {@link Roo.EventObject#getKey} to determine which key was pressed.
+         * @param {Roo.form.Field} this
+         * @param {Roo.EventObject} e The event object
+         */
+        "specialkey" : true
+    });
+};
 
+Roo.extend(Roo.Editor, Roo.Component, {
     /**
-     * Returns true if this tab is "hidden"
-     * @return {Boolean}
+     * @cfg {Boolean/String} autosize
+     * True for the editor to automatically adopt the size of the underlying field, "width" to adopt the width only,
+     * or "height" to adopt the height only (defaults to false)
      */
-    isHidden : function(){
-        return this.hidden;
-    },
-
     /**
-     * Returns the text for this tab
-     * @return {String}
+     * @cfg {Boolean} revertInvalid
+     * True to automatically revert the field value and cancel the edit when the user completes an edit and the field
+     * validation fails (defaults to true)
      */
-    getText : function(){
-        return this.text;
-    },
-
-    autoSize : function(){
-        //this.el.beginMeasure();
-        this.textEl.setWidth(1);
-        /*
-         *  #2804 [new] Tabs in Roojs
-         *  increase the width by 2-4 pixels to prevent the ellipssis showing in chrome
-         */
-        this.setWidth(this.textEl.dom.scrollWidth+this.pnode.getPadding("lr")+this.inner.getPadding("lr") + 2);
-        //this.el.endMeasure();
-    },
-
     /**
-     * Sets the text for the tab (Note: this also sets the tooltip text)
-     * @param {String} text The tab's text and tooltip
+     * @cfg {Boolean} ignoreNoChange
+     * True to skip the the edit completion process (no save, no events fired) if the user completes an edit and
+     * the value has not changed (defaults to false).  Applies only to string values - edits for other data types
+     * will never be ignored.
      */
-    setText : function(text){
-        this.text = text;
-        this.textEl.update(text);
-        this.setTooltip(text);
-        if(!this.tabPanel.resizeTabs){
-            this.autoSize();
-        }
-    },
     /**
-     * Activates this TabPanelItem -- this <b>does</b> deactivate the currently active TabPanelItem.
+     * @cfg {Boolean} hideEl
+     * False to keep the bound element visible while the editor is displayed (defaults to true)
      */
-    activate : function(){
-        this.tabPanel.activate(this.id);
-    },
-
     /**
-     * Disables this TabPanelItem -- this does nothing if this is the active TabPanelItem.
+     * @cfg {Mixed} value
+     * The data value of the underlying field (defaults to "")
      */
-    disable : function(){
-        if(this.tabPanel.active != this){
-            this.disabled = true;
-            this.pnode.addClass("disabled");
-        }
-    },
-
+    value : "",
     /**
-     * Enables this TabPanelItem if it was previously disabled.
+     * @cfg {String} alignment
+     * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to "c-c?").
      */
-    enable : function(){
-        this.disabled = false;
-        this.pnode.removeClass("disabled");
+    alignment: "c-c?",
+    /**
+     * @cfg {Boolean/String} shadow "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop"
+     * for bottom-right shadow (defaults to "frame")
+     */
+    shadow : "frame",
+    /**
+     * @cfg {Boolean} constrain True to constrain the editor to the viewport
+     */
+    constrain : false,
+    /**
+     * @cfg {Boolean} completeOnEnter True to complete the edit when the enter key is pressed (defaults to false)
+     */
+    completeOnEnter : false,
+    /**
+     * @cfg {Boolean} cancelOnEsc True to cancel the edit when the escape key is pressed (defaults to false)
+     */
+    cancelOnEsc : false,
+    /**
+     * @cfg {Boolean} updateEl True to update the innerHTML of the bound element when the update completes (defaults to false)
+     */
+    updateEl : false,
+
+    // private
+    onRender : function(ct, position){
+        this.el = new Roo.Layer({
+            shadow: this.shadow,
+            cls: "x-editor",
+            parentEl : ct,
+            shim : this.shim,
+            shadowOffset:4,
+            id: this.id,
+            constrain: this.constrain
+        });
+        this.el.setStyle("overflow", Roo.isGecko ? "auto" : "hidden");
+        if(this.field.msgTarget != 'title'){
+            this.field.msgTarget = 'qtip';
+        }
+        this.field.render(this.el);
+        if(Roo.isGecko){
+            this.field.el.dom.setAttribute('autocomplete', 'off');
+        }
+        this.field.on("specialkey", this.onSpecialKey, this);
+        if(this.swallowKeys){
+            this.field.el.swallowEvent(['keydown','keypress']);
+        }
+        this.field.show();
+        this.field.on("blur", this.onBlur, this);
+        if(this.field.grow){
+            this.field.on("autosize", this.el.sync,  this.el, {delay:1});
+        }
+    },
+
+    onSpecialKey : function(field, e)
+    {
+        //Roo.log('editor onSpecialKey');
+        if(this.completeOnEnter && e.getKey() == e.ENTER){
+            e.stopEvent();
+            this.completeEdit();
+            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);
+    
     },
 
     /**
-     * Sets the content for this TabPanelItem.
-     * @param {String} content The content
-     * @param {Boolean} loadScripts true to look for and load scripts
+     * Starts the editing process and shows the editor.
+     * @param {String/HTMLElement/Element} el The element to edit
+     * @param {String} value (optional) A value to initialize the editor with. If a value is not provided, it defaults
+      * to the innerHTML of el.
      */
-    setContent : function(content, loadScripts){
-        this.bodyEl.update(content, loadScripts);
+    startEdit : function(el, value){
+        if(this.editing){
+            this.completeEdit();
+        }
+        this.boundEl = Roo.get(el);
+        var v = value !== undefined ? value : this.boundEl.dom.innerHTML;
+        if(!this.rendered){
+            this.render(this.parentEl || document.body);
+        }
+        if(this.fireEvent("beforestartedit", this, this.boundEl, v) === false){
+            return;
+        }
+        this.startValue = v;
+        this.field.setValue(v);
+        if(this.autoSize){
+            var sz = this.boundEl.getSize();
+            switch(this.autoSize){
+                case "width":
+                this.setSize(sz.width,  "");
+                break;
+                case "height":
+                this.setSize("",  sz.height);
+                break;
+                default:
+                this.setSize(sz.width,  sz.height);
+            }
+        }
+        this.el.alignTo(this.boundEl, this.alignment);
+        this.editing = true;
+        if(Roo.QuickTips){
+            Roo.QuickTips.disable();
+        }
+        this.show();
     },
 
     /**
-     * Gets the {@link Roo.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
-     * @return {Roo.UpdateManager} The UpdateManager
+     * Sets the height and width of this editor.
+     * @param {Number} width The new width
+     * @param {Number} height The new height
      */
-    getUpdateManager : function(){
-        return this.bodyEl.getUpdateManager();
+    setSize : function(w, h){
+        this.field.setSize(w, h);
+        if(this.el){
+            this.el.sync();
+        }
     },
 
     /**
-     * Set a URL to be used to load the content for this TabPanelItem.
-     * @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 TabPanelItem is activated. (Defaults to false)
-     * @return {Roo.UpdateManager} The UpdateManager
+     * Realigns the editor to the bound field based on the current alignment config value.
      */
-    setUrl : function(url, params, loadOnce){
-        if(this.refreshDelegate){
-            this.un('activate', this.refreshDelegate);
+    realign : function(){
+        this.el.alignTo(this.boundEl, this.alignment);
+    },
+
+    /**
+     * Ends the editing process, persists the changed value to the underlying field, and hides the editor.
+     * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after edit (defaults to false)
+     */
+    completeEdit : function(remainVisible){
+        if(!this.editing){
+            return;
+        }
+        var v = this.getValue();
+        if(this.revertInvalid !== false && !this.field.isValid()){
+            v = this.startValue;
+            this.cancelEdit(true);
+        }
+        if(String(v) === String(this.startValue) && this.ignoreNoChange){
+            this.editing = false;
+            this.hide();
+            return;
+        }
+        if(this.fireEvent("beforecomplete", this, v, this.startValue) !== false){
+            this.editing = false;
+            if(this.updateEl && this.boundEl){
+                this.boundEl.update(v);
+            }
+            if(remainVisible !== true){
+                this.hide();
+            }
+            this.fireEvent("complete", this, v, this.startValue);
         }
-        this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
-        this.on("activate", this.refreshDelegate);
-        return this.bodyEl.getUpdateManager();
     },
 
-    /** @private */
-    _handleRefresh : function(url, params, loadOnce){
-        if(!loadOnce || !this.loaded){
-            var updater = this.bodyEl.getUpdateManager();
-            updater.update(url, params, this._setLoaded.createDelegate(this));
+    // private
+    onShow : function(){
+        this.el.show();
+        if(this.hideEl !== false){
+            this.boundEl.hide();
+        }
+        this.field.show();
+        if(Roo.isIE && !this.fixIEFocus){ // IE has problems with focusing the first time
+            this.fixIEFocus = true;
+            this.deferredFocus.defer(50, this);
+        }else{
+            this.field.focus();
+        }
+        this.fireEvent("startedit", this.boundEl, this.startValue);
+    },
+
+    deferredFocus : function(){
+        if(this.editing){
+            this.field.focus();
         }
     },
 
     /**
-     *   Forces a content refresh from the URL specified in the {@link #setUrl} method.
-     *   Will fail silently if the setUrl method has not been called.
-     *   This does not activate the panel, just updates its content.
+     * Cancels the editing process and hides the editor without persisting any changes.  The field value will be
+     * reverted to the original starting value.
+     * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after
+     * cancel (defaults to false)
      */
-    refresh : function(){
-        if(this.refreshDelegate){
-           this.loaded = false;
-           this.refreshDelegate();
+    cancelEdit : function(remainVisible){
+        if(this.editing){
+            this.setValue(this.startValue);
+            if(remainVisible !== true){
+                this.hide();
+            }
         }
     },
 
-    /** @private */
-    _setLoaded : function(){
-        this.loaded = true;
+    // private
+    onBlur : function(){
+        if(this.allowBlur !== true && this.editing){
+            this.completeEdit();
+        }
     },
 
-    /** @private */
-    closeClick : function(e){
-        var o = {};
-        e.stopEvent();
-        this.fireEvent("beforeclose", this, o);
-        if(o.cancel !== true){
-            this.tabPanel.removeTab(this.id);
+    // private
+    onHide : function(){
+        if(this.editing){
+            this.completeEdit();
+            return;
+        }
+        this.field.blur();
+        if(this.field.collapse){
+            this.field.collapse();
+        }
+        this.el.hide();
+        if(this.hideEl !== false){
+            this.boundEl.show();
+        }
+        if(Roo.QuickTips){
+            Roo.QuickTips.enable();
         }
     },
+
     /**
-     * The text displayed in the tooltip for the close icon.
-     * @type String
+     * Sets the data value of the editor
+     * @param {Mixed} value Any valid value supported by the underlying field
      */
-    closeText : "Close this tab"
-});
+    setValue : function(v){
+        this.field.setValue(v);
+    },
 
-/** @private */
-Roo.TabPanel.prototype.createStrip = function(container){
-    var strip = document.createElement("div");
-    strip.className = "x-tabs-wrap";
-    container.appendChild(strip);
-    return strip;
-};
-/** @private */
-Roo.TabPanel.prototype.createStripList = function(strip){
-    // div wrapper for retard IE
-    // returns the "tr" element.
-    strip.innerHTML = '<div class="x-tabs-strip-wrap">'+
-        '<table class="x-tabs-strip" cellspacing="0" cellpadding="0" border="0"><tbody><tr>'+
-        '<td class="x-tab-strip-toolbar"></td></tr></tbody></table></div>';
-    return strip.firstChild.firstChild.firstChild.firstChild;
-};
-/** @private */
-Roo.TabPanel.prototype.createBody = function(container){
-    var body = document.createElement("div");
-    Roo.id(body, "tab-body");
-    Roo.fly(body).addClass("x-tabs-body");
-    container.appendChild(body);
-    return body;
-};
-/** @private */
-Roo.TabPanel.prototype.createItemBody = function(bodyEl, id){
-    var body = Roo.getDom(id);
-    if(!body){
-        body = document.createElement("div");
-        body.id = id;
-    }
-    Roo.fly(body).addClass("x-tabs-item-body");
-    bodyEl.insertBefore(body, bodyEl.firstChild);
-    return body;
-};
-/** @private */
-Roo.TabPanel.prototype.createStripElements = function(stripEl, text, closable){
-    var td = document.createElement("td");
-    stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
-    //stripEl.appendChild(td);
-    if(closable){
-        td.className = "x-tabs-closable";
-        if(!this.closeTpl){
-            this.closeTpl = new Roo.Template(
-               '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
-               '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span>' +
-               '<div unselectable="on" class="close-icon">&#160;</div></em></span></a>'
-            );
-        }
-        var el = this.closeTpl.overwrite(td, {"text": text});
-        var close = el.getElementsByTagName("div")[0];
-        var inner = el.getElementsByTagName("em")[0];
-        return {"el": el, "close": close, "inner": inner};
-    } else {
-        if(!this.tabTpl){
-            this.tabTpl = new Roo.Template(
-               '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
-               '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span></em></span></a>'
-            );
-        }
-        var el = this.tabTpl.overwrite(td, {"text": text});
-        var inner = el.getElementsByTagName("em")[0];
-        return {"el": el, "inner": inner};
+    /**
+     * Gets the data value of the editor
+     * @return {Mixed} The data value
+     */
+    getValue : function(){
+        return this.field.getValue();
     }
-};/*
+});/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -11025,1383 +9024,1276 @@ Roo.TabPanel.prototype.createStripElements = function(stripEl, text, closable){
  * Fork - LGPL
  * <script type="text/javascript">
  */
-
+ 
 /**
- * @class Roo.Button
+ * @class Roo.BasicDialog
  * @extends Roo.util.Observable
- * Simple Button class
- * @cfg {String} text The button text
- * @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image
- * CSS property of the button by default, so if you want a mixed icon/text button, set cls:"x-btn-text-icon")
- * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event)
- * @cfg {Object} scope The scope of the handler
- * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width)
- * @cfg {String/Object} tooltip The tooltip for the button - can be a string or QuickTips config object
- * @cfg {Boolean} hidden True to start hidden (defaults to false)
- * @cfg {Boolean} disabled True to start disabled (defaults to false)
- * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true)
- * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed, only
-   applies if enableToggle = true)
- * @cfg {String/HTMLElement/Element} renderTo The element to append the button to
- * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be
-  an {@link Roo.util.ClickRepeater} config object (defaults to false).
+ * @parent none builder
+ * Lightweight Dialog Class.  The code below shows the creation of a typical dialog using existing HTML markup:
+ * <pre><code>
+var dlg = new Roo.BasicDialog("my-dlg", {
+    height: 200,
+    width: 300,
+    minHeight: 100,
+    minWidth: 150,
+    modal: true,
+    proxyDrag: true,
+    shadow: true
+});
+dlg.addKeyListener(27, dlg.hide, dlg); // ESC can also close the dialog
+dlg.addButton('OK', dlg.hide, dlg);    // Could call a save function instead of hiding
+dlg.addButton('Cancel', dlg.hide, dlg);
+dlg.show();
+</code></pre>
+  <b>A Dialog should always be a direct child of the body element.</b>
+ * @cfg {Boolean/DomHelper} autoCreate True to auto create from scratch, or using a DomHelper Object (defaults to false)
+ * @cfg {String} title Default text to display in the title bar (defaults to null)
+ * @cfg {Number} width Width of the dialog in pixels (can also be set via CSS).  Determined by browser if unspecified.
+ * @cfg {Number} height Height of the dialog in pixels (can also be set via CSS).  Determined by browser if unspecified.
+ * @cfg {Number} x The default left page coordinate of the dialog (defaults to center screen)
+ * @cfg {Number} y The default top page coordinate of the dialog (defaults to center screen)
+ * @cfg {String/Element} animateTarget Id or element from which the dialog should animate while opening
+ * (defaults to null with no animation)
+ * @cfg {Boolean} resizable False to disable manual dialog resizing (defaults to true)
+ * @cfg {String} resizeHandles Which resize handles to display - see the {@link Roo.Resizable} handles config
+ * property for valid values (defaults to 'all')
+ * @cfg {Number} minHeight The minimum allowable height for a resizable dialog (defaults to 80)
+ * @cfg {Number} minWidth The minimum allowable width for a resizable dialog (defaults to 200)
+ * @cfg {Boolean} modal True to show the dialog modally, preventing user interaction with the rest of the page (defaults to false)
+ * @cfg {Boolean} autoScroll True to allow the dialog body contents to overflow and display scrollbars (defaults to false)
+ * @cfg {Boolean} closable False to remove the built-in top-right corner close button (defaults to true)
+ * @cfg {Boolean} collapsible False to remove the built-in top-right corner collapse button (defaults to true)
+ * @cfg {Boolean} constraintoviewport True to keep the dialog constrained within the visible viewport boundaries (defaults to true)
+ * @cfg {Boolean} syncHeightBeforeShow True to cause the dimensions to be recalculated before the dialog is shown (defaults to false)
+ * @cfg {Boolean} draggable False to disable dragging of the dialog within the viewport (defaults to true)
+ * @cfg {Boolean} autoTabs If true, all elements with class 'x-dlg-tab' will get automatically converted to tabs (defaults to false)
+ * @cfg {String} tabTag The tag name of tab elements, used when autoTabs = true (defaults to 'div')
+ * @cfg {Boolean} proxyDrag True to drag a lightweight proxy element rather than the dialog itself, used when
+ * draggable = true (defaults to false)
+ * @cfg {Boolean} fixedcenter True to ensure that anytime the dialog is shown or resized it gets centered (defaults to false)
+ * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
+ * shadow (defaults to false)
+ * @cfg {Number} shadowOffset The number of pixels to offset the shadow if displayed (defaults to 5)
+ * @cfg {String} buttonAlign Valid values are "left," "center" and "right" (defaults to "right")
+ * @cfg {Number} minButtonWidth Minimum width of all dialog buttons (defaults to 75)
+ * @cfg {Array} buttons Array of buttons
+ * @cfg {Boolean} shim True to create an iframe shim that prevents selects from showing through (defaults to false)
  * @constructor
- * Create a new button
- * @param {Object} config The config object
+ * Create a new BasicDialog.
+ * @param {String/HTMLElement/Roo.Element} el The container element or DOM node, or its id
+ * @param {Object} config Configuration options
  */
-Roo.Button = function(renderTo, config)
-{
-    if (!config) {
-        config = renderTo;
-        renderTo = config.renderTo || false;
+Roo.BasicDialog = function(el, config){
+    this.el = Roo.get(el);
+    var dh = Roo.DomHelper;
+    if(!this.el && config && config.autoCreate){
+        if(typeof config.autoCreate == "object"){
+            if(!config.autoCreate.id){
+                config.autoCreate.id = el;
+            }
+            this.el = dh.append(document.body,
+                        config.autoCreate, true);
+        }else{
+            this.el = dh.append(document.body,
+                        {tag: "div", id: el, style:'visibility:hidden;'}, true);
+        }
     }
-    
+    el = this.el;
+    el.setDisplayed(true);
+    el.hide = this.hideAction;
+    this.id = el.id;
+    el.addClass("x-dlg");
+
     Roo.apply(this, config);
-    this.addEvents({
-        /**
-	     * @event click
-	     * Fires when this button is clicked
-	     * @param {Button} this
-	     * @param {EventObject} e The click event
-	     */
-	    "click" : true,
-        /**
-	     * @event toggle
-	     * Fires when the "pressed" state of this button changes (only if enableToggle = true)
-	     * @param {Button} this
-	     * @param {Boolean} pressed
-	     */
-	    "toggle" : true,
-        /**
-	     * @event mouseover
-	     * Fires when the mouse hovers over the button
-	     * @param {Button} this
-	     * @param {Event} e The event object
-	     */
-        'mouseover' : true,
-        /**
-	     * @event mouseout
-	     * Fires when the mouse exits the button
-	     * @param {Button} this
-	     * @param {Event} e The event object
-	     */
-        'mouseout': true,
-         /**
-	     * @event render
-	     * Fires when the button is rendered
-	     * @param {Button} this
-	     */
-        'render': true
-    });
-    if(this.menu){
-        this.menu = Roo.menu.MenuMgr.get(this.menu);
+
+    this.proxy = el.createProxy("x-dlg-proxy");
+    this.proxy.hide = this.hideAction;
+    this.proxy.setOpacity(.5);
+    this.proxy.hide();
+
+    if(config.width){
+        el.setWidth(config.width);
     }
-    // register listeners first!!  - so render can be captured..
-    Roo.util.Observable.call(this);
-    if(renderTo){
-        this.render(renderTo);
+    if(config.height){
+        el.setHeight(config.height);
     }
-    
-  
-};
-
-Roo.extend(Roo.Button, Roo.util.Observable, {
-    /**
-     * 
-     */
-    
-    /**
-     * Read-only. True if this button is hidden
-     * @type Boolean
-     */
-    hidden : false,
-    /**
-     * Read-only. True if this button is disabled
-     * @type Boolean
-     */
-    disabled : false,
-    /**
-     * Read-only. True if this button is pressed (only if enableToggle = true)
-     * @type Boolean
-     */
-    pressed : false,
+    this.size = el.getSize();
+    if(typeof config.x != "undefined" && typeof config.y != "undefined"){
+        this.xy = [config.x,config.y];
+    }else{
+        this.xy = el.getCenterXY(true);
+    }
+    /** The header element @type Roo.Element */
+    this.header = el.child("> .x-dlg-hd");
+    /** The body element @type Roo.Element */
+    this.body = el.child("> .x-dlg-bd");
+    /** The footer element @type Roo.Element */
+    this.footer = el.child("> .x-dlg-ft");
 
-    /**
-     * @cfg {Number} tabIndex 
-     * The DOM tabIndex for this button (defaults to undefined)
-     */
-    tabIndex : undefined,
+    if(!this.header){
+        this.header = el.createChild({tag: "div", cls:"x-dlg-hd", html: "&#160;"}, this.body ? this.body.dom : null);
+    }
+    if(!this.body){
+        this.body = el.createChild({tag: "div", cls:"x-dlg-bd"});
+    }
 
-    /**
-     * @cfg {Boolean} enableToggle
-     * True to enable pressed/not pressed toggling (defaults to false)
-     */
-    enableToggle: false,
-    /**
-     * @cfg {Mixed} menu
-     * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
-     */
-    menu : undefined,
-    /**
-     * @cfg {String} menuAlign
-     * The position to align the menu to (see {@link Roo.Element#alignTo} for more details, defaults to 'tl-bl?').
-     */
-    menuAlign : "tl-bl?",
+    this.header.unselectable();
+    if(this.title){
+        this.header.update(this.title);
+    }
+    // this element allows the dialog to be focused for keyboard event
+    this.focusEl = el.createChild({tag: "a", href:"#", cls:"x-dlg-focus", tabIndex:"-1"});
+    this.focusEl.swallowEvent("click", true);
 
-    /**
-     * @cfg {String} iconCls
-     * A css class which sets a background image to be used as the icon for this button (defaults to undefined).
-     */
-    iconCls : undefined,
-    /**
-     * @cfg {String} type
-     * The button's type, corresponding to the DOM input element type attribute.  Either "submit," "reset" or "button" (default).
-     */
-    type : 'button',
+    this.header.wrap({cls:"x-dlg-hd-right"}).wrap({cls:"x-dlg-hd-left"}, true);
 
-    // private
-    menuClassTarget: 'tr',
+    // wrap the body and footer for special rendering
+    this.bwrap = this.body.wrap({tag: "div", cls:"x-dlg-dlg-body"});
+    if(this.footer){
+        this.bwrap.dom.appendChild(this.footer.dom);
+    }
 
-    /**
-     * @cfg {String} clickEvent
-     * The type of event to map to the button's event handler (defaults to 'click')
-     */
-    clickEvent : 'click',
+    this.bg = this.el.createChild({
+        tag: "div", cls:"x-dlg-bg",
+        html: '<div class="x-dlg-bg-left"><div class="x-dlg-bg-right"><div class="x-dlg-bg-center">&#160;</div></div></div>'
+    });
+    this.centerBg = this.bg.child("div.x-dlg-bg-center");
 
-    /**
-     * @cfg {Boolean} handleMouseEvents
-     * False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
-     */
-    handleMouseEvents : true,
 
-    /**
-     * @cfg {String} tooltipType
-     * The type of tooltip to use. Either "qtip" (default) for QuickTips or "title" for title attribute.
-     */
-    tooltipType : 'qtip',
+    if(this.autoScroll !== false && !this.autoTabs){
+        this.body.setStyle("overflow", "auto");
+    }
 
-    /**
-     * @cfg {String} cls
-     * A CSS class to apply to the button's main element.
-     */
-    
-    /**
-     * @cfg {Roo.Template} template (Optional)
-     * An {@link Roo.Template} with which to create the Button's main element. This Template must
-     * contain numeric substitution parameter 0 if it is to display the tRoo property. Changing the template could
-     * require code modifications if required elements (e.g. a button) aren't present.
-     */
+    this.toolbox = this.el.createChild({cls: "x-dlg-toolbox"});
 
-    // private
-    render : function(renderTo){
-        var btn;
-        if(this.hideParent){
-            this.parentEl = Roo.get(renderTo);
-        }
-        if(!this.dhconfig){
-            if(!this.template){
-                if(!Roo.Button.buttonTemplate){
-                    // hideous table template
-                    Roo.Button.buttonTemplate = new Roo.Template(
-                        '<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
-                        '<td class="x-btn-left"><i>&#160;</i></td><td class="x-btn-center"><em unselectable="on"><button class="x-btn-text" type="{1}">{0}</button></em></td><td class="x-btn-right"><i>&#160;</i></td>',
-                        "</tr></tbody></table>");
-                }
-                this.template = Roo.Button.buttonTemplate;
-            }
-            btn = this.template.append(renderTo, [this.text || '&#160;', this.type], true);
-            var btnEl = btn.child("button:first");
-            btnEl.on('focus', this.onFocus, this);
-            btnEl.on('blur', this.onBlur, this);
-            if(this.cls){
-                btn.addClass(this.cls);
-            }
-            if(this.icon){
-                btnEl.setStyle('background-image', 'url(' +this.icon +')');
-            }
-            if(this.iconCls){
-                btnEl.addClass(this.iconCls);
-                if(!this.cls){
-                    btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
-                }
-            }
-            if(this.tabIndex !== undefined){
-                btnEl.dom.tabIndex = this.tabIndex;
-            }
-            if(this.tooltip){
-                if(typeof this.tooltip == 'object'){
-                    Roo.QuickTips.tips(Roo.apply({
-                          target: btnEl.id
-                    }, this.tooltip));
-                } else {
-                    btnEl.dom[this.tooltipType] = this.tooltip;
-                }
-            }
-        }else{
-            btn = Roo.DomHelper.append(Roo.get(renderTo).dom, this.dhconfig, true);
-        }
-        this.el = btn;
-        if(this.id){
-            this.el.dom.id = this.el.id = this.id;
-        }
-        if(this.menu){
-            this.el.child(this.menuClassTarget).addClass("x-btn-with-menu");
-            this.menu.on("show", this.onMenuShow, this);
-            this.menu.on("hide", this.onMenuHide, this);
-        }
-        btn.addClass("x-btn");
-        if(Roo.isIE && !Roo.isIE7){
-            this.autoWidth.defer(1, this);
-        }else{
-            this.autoWidth();
-        }
-        if(this.handleMouseEvents){
-            btn.on("mouseover", this.onMouseOver, this);
-            btn.on("mouseout", this.onMouseOut, this);
-            btn.on("mousedown", this.onMouseDown, this);
-        }
-        btn.on(this.clickEvent, this.onClick, this);
-        //btn.on("mouseup", this.onMouseUp, this);
-        if(this.hidden){
-            this.hide();
-        }
-        if(this.disabled){
-            this.disable();
-        }
-        Roo.ButtonToggleMgr.register(this);
-        if(this.pressed){
-            this.el.addClass("x-btn-pressed");
+    if(this.closable !== false){
+        this.el.addClass("x-dlg-closable");
+        this.close = this.toolbox.createChild({cls:"x-dlg-close"});
+        this.close.on("click", this.closeClick, this);
+        this.close.addClassOnOver("x-dlg-close-over");
+    }
+    if(this.collapsible !== false){
+        this.collapseBtn = this.toolbox.createChild({cls:"x-dlg-collapse"});
+        this.collapseBtn.on("click", this.collapseClick, this);
+        this.collapseBtn.addClassOnOver("x-dlg-collapse-over");
+        this.header.on("dblclick", this.collapseClick, this);
+    }
+    if(this.resizable !== false){
+        this.el.addClass("x-dlg-resizable");
+        this.resizer = new Roo.Resizable(el, {
+            minWidth: this.minWidth || 80,
+            minHeight:this.minHeight || 80,
+            handles: this.resizeHandles || "all",
+            pinned: true
+        });
+        this.resizer.on("beforeresize", this.beforeResize, this);
+        this.resizer.on("resize", this.onResize, this);
+    }
+    if(this.draggable !== false){
+        el.addClass("x-dlg-draggable");
+        if (!this.proxyDrag) {
+            var dd = new Roo.dd.DD(el.dom.id, "WindowDrag");
         }
-        if(this.repeat){
-            var repeater = new Roo.util.ClickRepeater(btn,
-                typeof this.repeat == "object" ? this.repeat : {}
-            );
-            repeater.on("click", this.onClick,  this);
+        else {
+            var dd = new Roo.dd.DDProxy(el.dom.id, "WindowDrag", {dragElId: this.proxy.id});
         }
-        
-        this.fireEvent('render', this);
-        
-    },
-    /**
-     * Returns the button's underlying element
-     * @return {Roo.Element} The element
-     */
-    getEl : function(){
-        return this.el;  
-    },
+        dd.setHandleElId(this.header.id);
+        dd.endDrag = this.endMove.createDelegate(this);
+        dd.startDrag = this.startMove.createDelegate(this);
+        dd.onDrag = this.onDrag.createDelegate(this);
+        dd.scroll = false;
+        this.dd = dd;
+    }
+    if(this.modal){
+        this.mask = dh.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
+        this.mask.enableDisplayMode("block");
+        this.mask.hide();
+        this.el.addClass("x-dlg-modal");
+    }
+    if(this.shadow){
+        this.shadow = new Roo.Shadow({
+            mode : typeof this.shadow == "string" ? this.shadow : "sides",
+            offset : this.shadowOffset
+        });
+    }else{
+        this.shadowOffset = 0;
+    }
+    if(Roo.useShims && this.shim !== false){
+        this.shim = this.el.createShim();
+        this.shim.hide = this.hideAction;
+        this.shim.hide();
+    }else{
+        this.shim = false;
+    }
+    if(this.autoTabs){
+        this.initTabs();
+    }
+    if (this.buttons) { 
+        var bts= this.buttons;
+        this.buttons = [];
+        Roo.each(bts, function(b) {
+            this.addButton(b);
+        }, this);
+    }
+    
     
+    this.addEvents({
+        /**
+         * @event keydown
+         * Fires when a key is pressed
+         * @param {Roo.BasicDialog} this
+         * @param {Roo.EventObject} e
+         */
+        "keydown" : true,
+        /**
+         * @event move
+         * Fires when this dialog is moved by the user.
+         * @param {Roo.BasicDialog} this
+         * @param {Number} x The new page X
+         * @param {Number} y The new page Y
+         */
+        "move" : true,
+        /**
+         * @event resize
+         * Fires when this dialog is resized by the user.
+         * @param {Roo.BasicDialog} this
+         * @param {Number} width The new width
+         * @param {Number} height The new height
+         */
+        "resize" : true,
+        /**
+         * @event beforehide
+         * Fires before this dialog is hidden.
+         * @param {Roo.BasicDialog} this
+         */
+        "beforehide" : true,
+        /**
+         * @event hide
+         * Fires when this dialog is hidden.
+         * @param {Roo.BasicDialog} this
+         */
+        "hide" : true,
+        /**
+         * @event beforeshow
+         * Fires before this dialog is shown.
+         * @param {Roo.BasicDialog} this
+         */
+        "beforeshow" : true,
+        /**
+         * @event show
+         * Fires when this dialog is shown.
+         * @param {Roo.BasicDialog} this
+         */
+        "show" : true
+    });
+    el.on("keydown", this.onKeyDown, this);
+    el.on("mousedown", this.toFront, this);
+    Roo.EventManager.onWindowResize(this.adjustViewport, this, true);
+    this.el.hide();
+    Roo.DialogManager.register(this);
+    Roo.BasicDialog.superclass.constructor.call(this);
+};
+
+Roo.extend(Roo.BasicDialog, Roo.util.Observable, {
+    shadowOffset: Roo.isIE ? 6 : 5,
+    minHeight: 80,
+    minWidth: 200,
+    minButtonWidth: 75,
+    defaultButton: null,
+    buttonAlign: "right",
+    tabTag: 'div',
+    firstShow: true,
+
     /**
-     * Destroys this Button and removes any listeners.
+     * Sets the dialog title text
+     * @param {String} text The title text to display
+     * @return {Roo.BasicDialog} this
      */
-    destroy : function(){
-        Roo.ButtonToggleMgr.unregister(this);
-        this.el.removeAllListeners();
-        this.purgeListeners();
-        this.el.remove();
+    setTitle : function(text){
+        this.header.update(text);
+        return this;
     },
 
     // private
-    autoWidth : function(){
-        if(this.el){
-            this.el.setWidth("auto");
-            if(Roo.isIE7 && Roo.isStrict){
-                var ib = this.el.child('button');
-                if(ib && ib.getWidth() > 20){
-                    ib.clip();
-                    ib.setWidth(Roo.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
-                }
-            }
-            if(this.minWidth){
-                if(this.hidden){
-                    this.el.beginMeasure();
-                }
-                if(this.el.getWidth() < this.minWidth){
-                    this.el.setWidth(this.minWidth);
-                }
-                if(this.hidden){
-                    this.el.endMeasure();
-                }
-            }
-        }
+    closeClick : function(){
+        this.hide();
     },
 
-    /**
-     * Assigns this button's click handler
-     * @param {Function} handler The function to call when the button is clicked
-     * @param {Object} scope (optional) Scope for the function passed in
-     */
-    setHandler : function(handler, scope){
-        this.handler = handler;
-        this.scope = scope;  
+    // private
+    collapseClick : function(){
+        this[this.collapsed ? "expand" : "collapse"]();
     },
-    
+
     /**
-     * Sets this button's text
-     * @param {String} text The button text
+     * Collapses the dialog to its minimized state (only the title bar is visible).
+     * Equivalent to the user clicking the collapse dialog button.
      */
-    setText : function(text){
-        this.text = text;
-        if(this.el){
-            this.el.child("td.x-btn-center button.x-btn-text").update(text);
+    collapse : function(){
+        if(!this.collapsed){
+            this.collapsed = true;
+            this.el.addClass("x-dlg-collapsed");
+            this.restoreHeight = this.el.getHeight();
+            this.resizeTo(this.el.getWidth(), this.header.getHeight());
         }
-        this.autoWidth();
     },
-    
+
     /**
-     * Gets the text for this button
-     * @return {String} The button text
+     * Expands a collapsed dialog back to its normal state.  Equivalent to the user
+     * clicking the expand dialog button.
      */
-    getText : function(){
-        return this.text;  
+    expand : function(){
+        if(this.collapsed){
+            this.collapsed = false;
+            this.el.removeClass("x-dlg-collapsed");
+            this.resizeTo(this.el.getWidth(), this.restoreHeight);
+        }
     },
-    
+
     /**
-     * Show this button
+     * Reinitializes the tabs component, clearing out old tabs and finding new ones.
+     * @return {Roo.TabPanel} The tabs component
      */
-    show: function(){
-        this.hidden = false;
-        if(this.el){
-            this[this.hideParent? 'parentEl' : 'el'].setStyle("display", "");
+    initTabs : function(){
+        var tabs = this.getTabs();
+        while(tabs.getTab(0)){
+            tabs.removeTab(0);
         }
+        this.el.select(this.tabTag+'.x-dlg-tab').each(function(el){
+            var dom = el.dom;
+            tabs.addTab(Roo.id(dom), dom.title);
+            dom.title = "";
+        });
+        tabs.activate(0);
+        return tabs;
     },
-    
-    /**
-     * Hide this button
-     */
-    hide: function(){
-        this.hidden = true;
-        if(this.el){
-            this[this.hideParent? 'parentEl' : 'el'].setStyle("display", "none");
+
+    // private
+    beforeResize : function(){
+        this.resizer.minHeight = Math.max(this.minHeight, this.getHeaderFooterHeight(true)+40);
+    },
+
+    // private
+    onResize : function(){
+        this.refreshSize();
+        this.syncBodyHeight();
+        this.adjustAssets();
+        this.focus();
+        this.fireEvent("resize", this, this.size.width, this.size.height);
+    },
+
+    // private
+    onKeyDown : function(e){
+        if(this.isVisible()){
+            this.fireEvent("keydown", this, e);
         }
     },
-    
+
     /**
-     * Convenience function for boolean show/hide
-     * @param {Boolean} visible True to show, false to hide
+     * Resizes the dialog.
+     * @param {Number} width
+     * @param {Number} height
+     * @return {Roo.BasicDialog} this
      */
-    setVisible: function(visible){
-        if(visible) {
-            this.show();
-        }else{
-            this.hide();
+    resizeTo : function(width, height){
+        this.el.setSize(width, height);
+        this.size = {width: width, height: height};
+        this.syncBodyHeight();
+        if(this.fixedcenter){
+            this.center();
+        }
+        if(this.isVisible()){
+            this.constrainXY();
+            this.adjustAssets();
         }
+        this.fireEvent("resize", this, width, height);
+        return this;
     },
-    
+
+
     /**
-     * If a state it passed, it becomes the pressed state otherwise the current state is toggled.
-     * @param {Boolean} state (optional) Force a particular state
+     * Resizes the dialog to fit the specified content size.
+     * @param {Number} width
+     * @param {Number} height
+     * @return {Roo.BasicDialog} this
      */
-    toggle : function(state){
-        state = state === undefined ? !this.pressed : state;
-        if(state != this.pressed){
-            if(state){
-                this.el.addClass("x-btn-pressed");
-                this.pressed = true;
-                this.fireEvent("toggle", this, true);
-            }else{
-                this.el.removeClass("x-btn-pressed");
-                this.pressed = false;
-                this.fireEvent("toggle", this, false);
-            }
-            if(this.toggleHandler){
-                this.toggleHandler.call(this.scope || this, this, state);
-            }
+    setContentSize : function(w, h){
+        h += this.getHeaderFooterHeight() + this.body.getMargins("tb");
+        w += this.body.getMargins("lr") + this.bwrap.getMargins("lr") + this.centerBg.getPadding("lr");
+        //if(!this.el.isBorderBox()){
+            h +=  this.body.getPadding("tb") + this.bwrap.getBorderWidth("tb") + this.body.getBorderWidth("tb") + this.el.getBorderWidth("tb");
+            w += this.body.getPadding("lr") + this.bwrap.getBorderWidth("lr") + this.body.getBorderWidth("lr") + this.bwrap.getPadding("lr") + this.el.getBorderWidth("lr");
+        //}
+        if(this.tabs){
+            h += this.tabs.stripWrap.getHeight() + this.tabs.bodyEl.getMargins("tb") + this.tabs.bodyEl.getPadding("tb");
+            w += this.tabs.bodyEl.getMargins("lr") + this.tabs.bodyEl.getPadding("lr");
         }
+        this.resizeTo(w, h);
+        return this;
     },
-    
+
     /**
-     * Focus the button
+     * Adds a key listener for when this dialog is displayed.  This allows you to hook in a function that will be
+     * executed in response to a particular key being pressed while the dialog is active.
+     * @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object with the following options:
+     *                                  {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
+     * @param {Function} fn The function to call
+     * @param {Object} scope (optional) The scope of the function
+     * @return {Roo.BasicDialog} this
      */
-    focus : function(){
-        this.el.child('button:first').focus();
-    },
-    
-    /**
-     * Disable this button
-     */
-    disable : function(){
-        if(this.el){
-            this.el.addClass("x-btn-disabled");
+    addKeyListener : function(key, fn, scope){
+        var keyCode, shift, ctrl, alt;
+        if(typeof key == "object" && !(key instanceof Array)){
+            keyCode = key["key"];
+            shift = key["shift"];
+            ctrl = key["ctrl"];
+            alt = key["alt"];
+        }else{
+            keyCode = key;
         }
-        this.disabled = true;
+        var handler = function(dlg, e){
+            if((!shift || e.shiftKey) && (!ctrl || e.ctrlKey) &&  (!alt || e.altKey)){
+                var k = e.getKey();
+                if(keyCode instanceof Array){
+                    for(var i = 0, len = keyCode.length; i < len; i++){
+                        if(keyCode[i] == k){
+                          fn.call(scope || window, dlg, k, e);
+                          return;
+                        }
+                    }
+                }else{
+                    if(k == keyCode){
+                        fn.call(scope || window, dlg, k, e);
+                    }
+                }
+            }
+        };
+        this.on("keydown", handler);
+        return this;
     },
-    
+
     /**
-     * Enable this button
+     * Returns the TabPanel component (creates it if it doesn't exist).
+     * Note: If you wish to simply check for the existence of tabs without creating them,
+     * check for a null 'tabs' property.
+     * @return {Roo.TabPanel} The tabs component
      */
-    enable : function(){
-        if(this.el){
-            this.el.removeClass("x-btn-disabled");
+    getTabs : function(){
+        if(!this.tabs){
+            this.el.addClass("x-dlg-auto-tabs");
+            this.body.addClass(this.tabPosition == "bottom" ? "x-tabs-bottom" : "x-tabs-top");
+            this.tabs = new Roo.TabPanel(this.body.dom, this.tabPosition == "bottom");
         }
-        this.disabled = false;
+        return this.tabs;
     },
 
     /**
-     * Convenience function for boolean enable/disable
-     * @param {Boolean} enabled True to enable, false to disable
+     * Adds a button to the footer section of the dialog.
+     * @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 (accepts position as a property)
+     * @return {Roo.Button} The new button
      */
-    setDisabled : function(v){
-        this[v !== true ? "enable" : "disable"]();
-    },
-
-    // private
-    onClick : function(e)
-    {
-        if(e){
-            e.preventDefault();
+    addButton : function(config, handler, scope){
+        var dh = Roo.DomHelper;
+        if(!this.footer){
+            this.footer = dh.append(this.bwrap, {tag: "div", cls:"x-dlg-ft"}, true);
         }
-        if(e.button != 0){
-            return;
+        if(!this.btnContainer){
+            var tb = this.footer.createChild({
+
+                cls:"x-dlg-btns x-dlg-btns-"+this.buttonAlign,
+                html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
+            }, null, true);
+            this.btnContainer = tb.firstChild.firstChild.firstChild;
         }
-        if(!this.disabled){
-            if(this.enableToggle){
-                this.toggle();
-            }
-            if(this.menu && !this.menu.isVisible()){
-                this.menu.show(this.el, this.menuAlign);
-            }
-            this.fireEvent("click", this, e);
-            if(this.handler){
-                this.el.removeClass("x-btn-over");
-                this.handler.call(this.scope || this, this, e);
+        var bconfig = {
+            handler: handler,
+            scope: scope,
+            minWidth: this.minButtonWidth,
+            hideParent:true
+        };
+        if(typeof config == "string"){
+            bconfig.text = config;
+        }else{
+            if(config.tag){
+                bconfig.dhconfig = config;
+            }else{
+                Roo.apply(bconfig, config);
             }
         }
-    },
-    // private
-    onMouseOver : function(e){
-        if(!this.disabled){
-            this.el.addClass("x-btn-over");
-            this.fireEvent('mouseover', this, e);
+        var fc = false;
+        if ((typeof(bconfig.position) != 'undefined') && bconfig.position < this.btnContainer.childNodes.length-1) {
+            bconfig.position = Math.max(0, bconfig.position);
+            fc = this.btnContainer.childNodes[bconfig.position];
         }
-    },
-    // private
-    onMouseOut : function(e){
-        if(!e.within(this.el,  true)){
-            this.el.removeClass("x-btn-over");
-            this.fireEvent('mouseout', this, e);
+         
+        var btn = new Roo.Button(
+            fc ? 
+                this.btnContainer.insertBefore(document.createElement("td"),fc)
+                : this.btnContainer.appendChild(document.createElement("td")),
+            //Roo.get(this.btnContainer).createChild( { tag: 'td'},  fc ),
+            bconfig
+        );
+        this.syncBodyHeight();
+        if(!this.buttons){
+            /**
+             * Array of all the buttons that have been added to this dialog via addButton
+             * @type Array
+             */
+            this.buttons = [];
         }
+        this.buttons.push(btn);
+        return btn;
+    },
+
+    /**
+     * Sets the default button to be focused when the dialog is displayed.
+     * @param {Roo.BasicDialog.Button} btn The button object returned by {@link #addButton}
+     * @return {Roo.BasicDialog} this
+     */
+    setDefaultButton : function(btn){
+        this.defaultButton = btn;
+        return this;
     },
+
     // private
-    onFocus : function(e){
-        if(!this.disabled){
-            this.el.addClass("x-btn-focus");
+    getHeaderFooterHeight : function(safe){
+        var height = 0;
+        if(this.header){
+           height += this.header.getHeight();
+        }
+        if(this.footer){
+           var fm = this.footer.getMargins();
+            height += (this.footer.getHeight()+fm.top+fm.bottom);
         }
+        height += this.bwrap.getPadding("tb")+this.bwrap.getBorderWidth("tb");
+        height += this.centerBg.getPadding("tb");
+        return height;
     },
+
     // private
-    onBlur : function(e){
-        this.el.removeClass("x-btn-focus");
+    syncBodyHeight : function()
+    {
+        var bd = this.body, // the text
+            cb = this.centerBg, // wrapper around bottom.. but does not seem to be used..
+            bw = this.bwrap;
+        var height = this.size.height - this.getHeaderFooterHeight(false);
+        bd.setHeight(height-bd.getMargins("tb"));
+        var hh = this.header.getHeight();
+        var h = this.size.height-hh;
+        cb.setHeight(h);
+        
+        bw.setLeftTop(cb.getPadding("l"), hh+cb.getPadding("t"));
+        bw.setHeight(h-cb.getPadding("tb"));
+        
+        bw.setWidth(this.el.getWidth(true)-cb.getPadding("lr"));
+        bd.setWidth(bw.getWidth(true));
+        if(this.tabs){
+            this.tabs.syncHeight();
+            if(Roo.isIE){
+                this.tabs.el.repaint();
+            }
+        }
     },
-    // private
-    onMouseDown : function(e){
-        if(!this.disabled && e.button == 0){
-            this.el.addClass("x-btn-click");
-            Roo.get(document).on('mouseup', this.onMouseUp, this);
+
+    /**
+     * Restores the previous state of the dialog if Roo.state is configured.
+     * @return {Roo.BasicDialog} this
+     */
+    restoreState : function(){
+        var box = Roo.state.Manager.get(this.stateId || (this.el.id + "-state"));
+        if(box && box.width){
+            this.xy = [box.x, box.y];
+            this.resizeTo(box.width, box.height);
         }
+        return this;
     },
+
     // private
-    onMouseUp : function(e){
-        if(e.button == 0){
-            this.el.removeClass("x-btn-click");
-            Roo.get(document).un('mouseup', this.onMouseUp, this);
+    beforeShow : function(){
+        this.expand();
+        if(this.fixedcenter){
+            this.xy = this.el.getCenterXY(true);
+        }
+        if(this.modal){
+            Roo.get(document.body).addClass("x-body-masked");
+            this.mask.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
+            this.mask.show();
         }
+        this.constrainXY();
     },
+
     // private
-    onMenuShow : function(e){
-        this.el.addClass("x-btn-menu-active");
+    animShow : function(){
+        var b = Roo.get(this.animateTarget).getBox();
+        this.proxy.setSize(b.width, b.height);
+        this.proxy.setLocation(b.x, b.y);
+        this.proxy.show();
+        this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height,
+                    true, .35, this.showEl.createDelegate(this));
     },
-    // private
-    onMenuHide : function(e){
-        this.el.removeClass("x-btn-menu-active");
-    }   
-});
 
-// Private utility class used by Button
-Roo.ButtonToggleMgr = function(){
-   var groups = {};
-   
-   function toggleGroup(btn, state){
-       if(state){
-           var g = groups[btn.toggleGroup];
-           for(var i = 0, l = g.length; i < l; i++){
-               if(g[i] != btn){
-                   g[i].toggle(false);
-               }
-           }
-       }
-   }
-   
-   return {
-       register : function(btn){
-           if(!btn.toggleGroup){
-               return;
-           }
-           var g = groups[btn.toggleGroup];
-           if(!g){
-               g = groups[btn.toggleGroup] = [];
-           }
-           g.push(btn);
-           btn.on("toggle", toggleGroup);
-       },
-       
-       unregister : function(btn){
-           if(!btn.toggleGroup){
-               return;
-           }
-           var g = groups[btn.toggleGroup];
-           if(g){
-               g.remove(btn);
-               btn.un("toggle", toggleGroup);
-           }
-       }
-   };
-}();/*
- * 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.SplitButton
- * @extends Roo.Button
- * A split button that provides a built-in dropdown arrow that can fire an event separately from the default
- * click event of the button.  Typically this would be used to display a dropdown menu that provides additional
- * options to the primary button action, but any custom handler can provide the arrowclick implementation.
- * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event)
- * @cfg {String} arrowTooltip The title attribute of the arrow
- * @constructor
- * Create a new menu button
- * @param {String/HTMLElement/Element} renderTo The element to append the button to
- * @param {Object} config The config object
- */
-Roo.SplitButton = function(renderTo, config){
-    Roo.SplitButton.superclass.constructor.call(this, renderTo, config);
     /**
-     * @event arrowclick
-     * Fires when this button's arrow is clicked
-     * @param {SplitButton} this
-     * @param {EventObject} e The click event
+     * Shows the dialog.
+     * @param {String/HTMLElement/Roo.Element} animateTarget (optional) Reset the animation target
+     * @return {Roo.BasicDialog} this
      */
-    this.addEvents({"arrowclick":true});
-};
-
-Roo.extend(Roo.SplitButton, Roo.Button, {
-    render : function(renderTo){
-        // this is one sweet looking template!
-        var tpl = new Roo.Template(
-            '<table cellspacing="0" class="x-btn-menu-wrap x-btn"><tr><td>',
-            '<table cellspacing="0" class="x-btn-wrap x-btn-menu-text-wrap"><tbody>',
-            '<tr><td class="x-btn-left"><i>&#160;</i></td><td class="x-btn-center"><button class="x-btn-text" type="{1}">{0}</button></td></tr>',
-            "</tbody></table></td><td>",
-            '<table cellspacing="0" class="x-btn-wrap x-btn-menu-arrow-wrap"><tbody>',
-            '<tr><td class="x-btn-center"><button class="x-btn-menu-arrow-el" type="button">&#160;</button></td><td class="x-btn-right"><i>&#160;</i></td></tr>',
-            "</tbody></table></td></tr></table>"
-        );
-        var btn = tpl.append(renderTo, [this.text, this.type], true);
-        var btnEl = btn.child("button");
-        if(this.cls){
-            btn.addClass(this.cls);
-        }
-        if(this.icon){
-            btnEl.setStyle('background-image', 'url(' +this.icon +')');
-        }
-        if(this.iconCls){
-            btnEl.addClass(this.iconCls);
-            if(!this.cls){
-                btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
-            }
+    show : function(animateTarget){
+        if (this.fireEvent("beforeshow", this) === false){
+            return;
         }
-        this.el = btn;
-        if(this.handleMouseEvents){
-            btn.on("mouseover", this.onMouseOver, this);
-            btn.on("mouseout", this.onMouseOut, this);
-            btn.on("mousedown", this.onMouseDown, this);
-            btn.on("mouseup", this.onMouseUp, this);
+        if(this.syncHeightBeforeShow){
+            this.syncBodyHeight();
+        }else if(this.firstShow){
+            this.firstShow = false;
+            this.syncBodyHeight(); // sync the height on the first show instead of in the constructor
         }
-        btn.on(this.clickEvent, this.onClick, this);
-        if(this.tooltip){
-            if(typeof this.tooltip == 'object'){
-                Roo.QuickTips.tips(Roo.apply({
-                      target: btnEl.id
-                }, this.tooltip));
-            } else {
-                btnEl.dom[this.tooltipType] = this.tooltip;
+        this.animateTarget = animateTarget || this.animateTarget;
+        if(!this.el.isVisible()){
+            this.beforeShow();
+            if(this.animateTarget && Roo.get(this.animateTarget)){
+                this.animShow();
+            }else{
+                this.showEl();
             }
         }
-        if(this.arrowTooltip){
-            btn.child("button:nth(2)").dom[this.tooltipType] = this.arrowTooltip;
-        }
-        if(this.hidden){
-            this.hide();
-        }
-        if(this.disabled){
-            this.disable();
-        }
-        if(this.pressed){
-            this.el.addClass("x-btn-pressed");
-        }
-        if(Roo.isIE && !Roo.isIE7){
-            this.autoWidth.defer(1, this);
-        }else{
-            this.autoWidth();
-        }
-        if(this.menu){
-            this.menu.on("show", this.onMenuShow, this);
-            this.menu.on("hide", this.onMenuHide, this);
-        }
-        this.fireEvent('render', this);
+        return this;
     },
 
     // private
-    autoWidth : function(){
-        if(this.el){
-            var tbl = this.el.child("table:first");
-            var tbl2 = this.el.child("table:last");
-            this.el.setWidth("auto");
-            tbl.setWidth("auto");
-            if(Roo.isIE7 && Roo.isStrict){
-                var ib = this.el.child('button:first');
-                if(ib && ib.getWidth() > 20){
-                    ib.clip();
-                    ib.setWidth(Roo.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
-                }
-            }
-            if(this.minWidth){
-                if(this.hidden){
-                    this.el.beginMeasure();
-                }
-                if((tbl.getWidth()+tbl2.getWidth()) < this.minWidth){
-                    tbl.setWidth(this.minWidth-tbl2.getWidth());
-                }
-                if(this.hidden){
-                    this.el.endMeasure();
-                }
-            }
-            this.el.setWidth(tbl.getWidth()+tbl2.getWidth());
-        } 
-    },
-    /**
-     * Sets this button's click handler
-     * @param {Function} handler The function to call when the button is clicked
-     * @param {Object} scope (optional) Scope for the function passed above
-     */
-    setHandler : function(handler, scope){
-        this.handler = handler;
-        this.scope = scope;  
-    },
-    
-    /**
-     * Sets this button's arrow click handler
-     * @param {Function} handler The function to call when the arrow is clicked
-     * @param {Object} scope (optional) Scope for the function passed above
-     */
-    setArrowHandler : function(handler, scope){
-        this.arrowHandler = handler;
-        this.scope = scope;  
+    showEl : function(){
+        this.proxy.hide();
+        this.el.setXY(this.xy);
+        this.el.show();
+        this.adjustAssets(true);
+        this.toFront();
+        this.focus();
+        // IE peekaboo bug - fix found by Dave Fenwick
+        if(Roo.isIE){
+            this.el.repaint();
+        }
+        this.fireEvent("show", this);
     },
-    
+
     /**
-     * Focus the button
+     * Focuses the dialog.  If a defaultButton is set, it will receive focus, otherwise the
+     * dialog itself will receive focus.
      */
     focus : function(){
-        if(this.el){
-            this.el.child("button:first").focus();
+        if(this.defaultButton){
+            this.defaultButton.focus();
+        }else{
+            this.focusEl.focus();
         }
     },
 
     // private
-    onClick : function(e){
-        e.preventDefault();
-        if(!this.disabled){
-            if(e.getTarget(".x-btn-menu-arrow-wrap")){
-                if(this.menu && !this.menu.isVisible()){
-                    this.menu.show(this.el, this.menuAlign);
-                }
-                this.fireEvent("arrowclick", this, e);
-                if(this.arrowHandler){
-                    this.arrowHandler.call(this.scope || this, this, e);
+    constrainXY : function(){
+        if(this.constraintoviewport !== false){
+            if(!this.viewSize){
+                if(this.container){
+                    var s = this.container.getSize();
+                    this.viewSize = [s.width, s.height];
+                }else{
+                    this.viewSize = [Roo.lib.Dom.getViewWidth(),Roo.lib.Dom.getViewHeight()];
                 }
-            }else{
-                this.fireEvent("click", this, e);
-                if(this.handler){
-                    this.handler.call(this.scope || this, this, e);
+            }
+            var s = Roo.get(this.container||document).getScroll();
+
+            var x = this.xy[0], y = this.xy[1];
+            var w = this.size.width, h = this.size.height;
+            var vw = this.viewSize[0], vh = this.viewSize[1];
+            // only move it if it needs it
+            var moved = false;
+            // first validate right/bottom
+            if(x + w > vw+s.left){
+                x = vw - w;
+                moved = true;
+            }
+            if(y + h > vh+s.top){
+                y = vh - h;
+                moved = true;
+            }
+            // then make sure top/left isn't negative
+            if(x < s.left){
+                x = s.left;
+                moved = true;
+            }
+            if(y < s.top){
+                y = s.top;
+                moved = true;
+            }
+            if(moved){
+                // cache xy
+                this.xy = [x, y];
+                if(this.isVisible()){
+                    this.el.setLocation(x, y);
+                    this.adjustAssets();
                 }
             }
         }
     },
+
     // private
-    onMouseDown : function(e){
-        if(!this.disabled){
-            Roo.fly(e.getTarget("table")).addClass("x-btn-click");
+    onDrag : function(){
+        if(!this.proxyDrag){
+            this.xy = this.el.getXY();
+            this.adjustAssets();
         }
     },
-    // private
-    onMouseUp : function(e){
-        Roo.fly(e.getTarget("table")).removeClass("x-btn-click");
-    }   
-});
-
-
-// backwards compat
-Roo.MenuButton = Roo.SplitButton;/*
- * 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.Toolbar
- * Basic Toolbar class.
- * @constructor
- * Creates a new Toolbar
- * @param {Object} container The config object
- */ 
-Roo.Toolbar = function(container, buttons, config)
-{
-    /// old consturctor format still supported..
-    if(container instanceof Array){ // omit the container for later rendering
-        buttons = container;
-        config = buttons;
-        container = null;
-    }
-    if (typeof(container) == 'object' && container.xtype) {
-        config = container;
-        container = config.container;
-        buttons = config.buttons || []; // not really - use items!!
-    }
-    var xitems = [];
-    if (config && config.items) {
-        xitems = config.items;
-        delete config.items;
-    }
-    Roo.apply(this, config);
-    this.buttons = buttons;
-    
-    if(container){
-        this.render(container);
-    }
-    this.xitems = xitems;
-    Roo.each(xitems, function(b) {
-        this.add(b);
-    }, this);
-    
-};
+    // private
+    adjustAssets : function(doShow){
+        var x = this.xy[0], y = this.xy[1];
+        var w = this.size.width, h = this.size.height;
+        if(doShow === true){
+            if(this.shadow){
+                this.shadow.show(this.el);
+            }
+            if(this.shim){
+                this.shim.show();
+            }
+        }
+        if(this.shadow && this.shadow.isVisible()){
+            this.shadow.show(this.el);
+        }
+        if(this.shim && this.shim.isVisible()){
+            this.shim.setBounds(x, y, w, h);
+        }
+    },
 
-Roo.Toolbar.prototype = {
-    /**
-     * @cfg {Array} items
-     * array of button configs or elements to add (will be converted to a MixedCollection)
-     */
-    
-    /**
-     * @cfg {String/HTMLElement/Element} container
-     * The id or element that will contain the toolbar
-     */
     // private
-    render : function(ct){
-        this.el = Roo.get(ct);
-        if(this.cls){
-            this.el.addClass(this.cls);
+    adjustViewport : function(w, h){
+        if(!w || !h){
+            w = Roo.lib.Dom.getViewWidth();
+            h = Roo.lib.Dom.getViewHeight();
         }
-        // using a table allows for vertical alignment
-        // 100% width is needed by Safari...
-        this.el.update('<div class="x-toolbar x-small-editor"><table cellspacing="0"><tr></tr></table></div>');
-        this.tr = this.el.child("tr", true);
-        var autoId = 0;
-        this.items = new Roo.util.MixedCollection(false, function(o){
-            return o.id || ("item" + (++autoId));
-        });
-        if(this.buttons){
-            this.add.apply(this, this.buttons);
-            delete this.buttons;
+        // cache the size
+        this.viewSize = [w, h];
+        if(this.modal && this.mask.isVisible()){
+            this.mask.setSize(w, h); // first make sure the mask isn't causing overflow
+            this.mask.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
+        }
+        if(this.isVisible()){
+            this.constrainXY();
         }
     },
 
     /**
-     * Adds element(s) to the toolbar -- this function takes a variable number of 
-     * arguments of mixed type and adds them to the toolbar.
-     * @param {Mixed} arg1 The following types of arguments are all valid:<br />
-     * <ul>
-     * <li>{@link Roo.Toolbar.Button} config: A valid button config object (equivalent to {@link #addButton})</li>
-     * <li>HtmlElement: Any standard HTML element (equivalent to {@link #addElement})</li>
-     * <li>Field: Any form field (equivalent to {@link #addField})</li>
-     * <li>Item: Any subclass of {@link Roo.Toolbar.Item} (equivalent to {@link #addItem})</li>
-     * <li>String: Any generic string (gets wrapped in a {@link Roo.Toolbar.TextItem}, equivalent to {@link #addText}).
-     * Note that there are a few special strings that are treated differently as explained nRoo.</li>
-     * <li>'separator' or '-': Creates a separator element (equivalent to {@link #addSeparator})</li>
-     * <li>' ': Creates a spacer element (equivalent to {@link #addSpacer})</li>
-     * <li>'->': Creates a fill element (equivalent to {@link #addFill})</li>
-     * </ul>
-     * @param {Mixed} arg2
-     * @param {Mixed} etc.
+     * Destroys this dialog and all its supporting elements (including any tabs, shim,
+     * shadow, proxy, mask, etc.)  Also removes all event listeners.
+     * @param {Boolean} removeEl (optional) true to remove the element from the DOM
      */
-    add : function(){
-        var a = arguments, l = a.length;
-        for(var i = 0; i < l; i++){
-            this._add(a[i]);
-        }
-    },
-    // private..
-    _add : function(el) {
-        
-        if (el.xtype) {
-            el = Roo.factory(el, typeof(Roo.Toolbar[el.xtype]) == 'undefined' ? Roo.form : Roo.Toolbar);
+    destroy : function(removeEl){
+        if(this.isVisible()){
+            this.animateTarget = null;
+            this.hide();
         }
-        
-        if (el.applyTo){ // some kind of form field
-            return this.addField(el);
-        } 
-        if (el.render){ // some kind of Toolbar.Item
-            return this.addItem(el);
+        Roo.EventManager.removeResizeListener(this.adjustViewport, this);
+        if(this.tabs){
+            this.tabs.destroy(removeEl);
         }
-        if (typeof el == "string"){ // string
-            if(el == "separator" || el == "-"){
-                return this.addSeparator();
-            }
-            if (el == " "){
-                return this.addSpacer();
-            }
-            if(el == "->"){
-                return this.addFill();
-            }
-            return this.addText(el);
-            
+        Roo.destroy(
+             this.shim,
+             this.proxy,
+             this.resizer,
+             this.close,
+             this.mask
+        );
+        if(this.dd){
+            this.dd.unreg();
         }
-        if(el.tagName){ // element
-            return this.addElement(el);
+        if(this.buttons){
+           for(var i = 0, len = this.buttons.length; i < len; i++){
+               this.buttons[i].destroy();
+           }
         }
-        if(typeof el == "object"){ // must be button config?
-            return this.addButton(el);
+        this.el.removeAllListeners();
+        if(removeEl === true){
+            this.el.update("");
+            this.el.remove();
         }
-        // and now what?!?!
-        return false;
-        
+        Roo.DialogManager.unregister(this);
     },
-    
-    /**
-     * Add an Xtype element
-     * @param {Object} xtype Xtype Object
-     * @return {Object} created Object
-     */
-    addxtype : function(e){
-        return this.add(e);  
+
+    // private
+    startMove : function(){
+        if(this.proxyDrag){
+            this.proxy.show();
+        }
+        if(this.constraintoviewport !== false){
+            this.dd.constrainTo(document.body, {right: this.shadowOffset, bottom: this.shadowOffset});
+        }
     },
-    
-    /**
-     * Returns the Element for this toolbar.
-     * @return {Roo.Element}
-     */
-    getEl : function(){
-        return this.el;  
+
+    // private
+    endMove : function(){
+        if(!this.proxyDrag){
+            Roo.dd.DD.prototype.endDrag.apply(this.dd, arguments);
+        }else{
+            Roo.dd.DDProxy.prototype.endDrag.apply(this.dd, arguments);
+            this.proxy.hide();
+        }
+        this.refreshSize();
+        this.adjustAssets();
+        this.focus();
+        this.fireEvent("move", this, this.xy[0], this.xy[1]);
     },
-    
+
     /**
-     * Adds a separator
-     * @return {Roo.Toolbar.Item} The separator item
+     * Brings this dialog to the front of any other visible dialogs
+     * @return {Roo.BasicDialog} this
      */
-    addSeparator : function(){
-        return this.addItem(new Roo.Toolbar.Separator());
+    toFront : function(){
+        Roo.DialogManager.bringToFront(this);
+        return this;
     },
 
     /**
-     * Adds a spacer element
-     * @return {Roo.Toolbar.Spacer} The spacer item
+     * Sends this dialog to the back (under) of any other visible dialogs
+     * @return {Roo.BasicDialog} this
      */
-    addSpacer : function(){
-        return this.addItem(new Roo.Toolbar.Spacer());
+    toBack : function(){
+        Roo.DialogManager.sendToBack(this);
+        return this;
     },
 
     /**
-     * Adds a fill element that forces subsequent additions to the right side of the toolbar
-     * @return {Roo.Toolbar.Fill} The fill item
+     * Centers this dialog in the viewport
+     * @return {Roo.BasicDialog} this
      */
-    addFill : function(){
-        return this.addItem(new Roo.Toolbar.Fill());
+    center : function(){
+        var xy = this.el.getCenterXY(true);
+        this.moveTo(xy[0], xy[1]);
+        return this;
     },
 
     /**
-     * Adds any standard HTML element to the toolbar
-     * @param {String/HTMLElement/Element} el The element or id of the element to add
-     * @return {Roo.Toolbar.Item} The element's item
+     * Moves the dialog's top-left corner to the specified point
+     * @param {Number} x
+     * @param {Number} y
+     * @return {Roo.BasicDialog} this
      */
-    addElement : function(el){
-        return this.addItem(new Roo.Toolbar.Item(el));
+    moveTo : function(x, y){
+        this.xy = [x,y];
+        if(this.isVisible()){
+            this.el.setXY(this.xy);
+            this.adjustAssets();
+        }
+        return this;
     },
+
     /**
-     * Collection of items on the toolbar.. (only Toolbar Items, so use fields to retrieve fields)
-     * @type Roo.util.MixedCollection  
-     */
-    items : false,
-     
-    /**
-     * Adds any Toolbar.Item or subclass
-     * @param {Roo.Toolbar.Item} item
-     * @return {Roo.Toolbar.Item} The item
+     * Aligns the dialog to the specified element
+     * @param {String/HTMLElement/Roo.Element} element The element to align to.
+     * @param {String} position The position to align to (see {@link Roo.Element#alignTo} for more details).
+     * @param {Array} offsets (optional) Offset the positioning by [x, y]
+     * @return {Roo.BasicDialog} this
      */
-    addItem : function(item){
-        var td = this.nextBlock();
-        item.render(td);
-        this.items.add(item);
-        return item;
+    alignTo : function(element, position, offsets){
+        this.xy = this.el.getAlignToXY(element, position, offsets);
+        if(this.isVisible()){
+            this.el.setXY(this.xy);
+            this.adjustAssets();
+        }
+        return this;
     },
-    
+
     /**
-     * Adds a button (or buttons). See {@link Roo.Toolbar.Button} for more info on the config.
-     * @param {Object/Array} config A button config or array of configs
-     * @return {Roo.Toolbar.Button/Array}
+     * Anchors an element to another element and realigns it when the window is resized.
+     * @param {String/HTMLElement/Roo.Element} element The element to align to.
+     * @param {String} position The position to align to (see {@link Roo.Element#alignTo} for more details)
+     * @param {Array} offsets (optional) Offset the positioning by [x, y]
+     * @param {Boolean/Number} monitorScroll (optional) true to monitor body scroll and reposition. If this parameter
+     * is a number, it is used as the buffer delay (defaults to 50ms).
+     * @return {Roo.BasicDialog} this
      */
-    addButton : function(config){
-        if(config instanceof Array){
-            var buttons = [];
-            for(var i = 0, len = config.length; i < len; i++) {
-                buttons.push(this.addButton(config[i]));
-            }
-            return buttons;
-        }
-        var b = config;
-        if(!(config instanceof Roo.Toolbar.Button)){
-            b = config.split ?
-                new Roo.Toolbar.SplitButton(config) :
-                new Roo.Toolbar.Button(config);
+    anchorTo : function(el, alignment, offsets, monitorScroll){
+        var action = function(){
+            this.alignTo(el, alignment, offsets);
+        };
+        Roo.EventManager.onWindowResize(action, this);
+        var tm = typeof monitorScroll;
+        if(tm != 'undefined'){
+            Roo.EventManager.on(window, 'scroll', action, this,
+                {buffer: tm == 'number' ? monitorScroll : 50});
         }
-        var td = this.nextBlock();
-        b.render(td);
-        this.items.add(b);
-        return b;
+        action.call(this);
+        return this;
     },
-    
+
     /**
-     * Adds text to the toolbar
-     * @param {String} text The text to add
-     * @return {Roo.Toolbar.Item} The element's item
+     * Returns true if the dialog is visible
+     * @return {Boolean}
      */
-    addText : function(text){
-        return this.addItem(new Roo.Toolbar.TextItem(text));
+    isVisible : function(){
+        return this.el.isVisible();
     },
-    
+
+    // private
+    animHide : function(callback){
+        var b = Roo.get(this.animateTarget).getBox();
+        this.proxy.show();
+        this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height);
+        this.el.hide();
+        this.proxy.setBounds(b.x, b.y, b.width, b.height, true, .35,
+                    this.hideEl.createDelegate(this, [callback]));
+    },
+
     /**
-     * Inserts any {@link Roo.Toolbar.Item}/{@link Roo.Toolbar.Button} at the specified index.
-     * @param {Number} index The index where the item is to be inserted
-     * @param {Object/Roo.Toolbar.Item/Roo.Toolbar.Button (may be Array)} item The button, or button config object to be inserted.
-     * @return {Roo.Toolbar.Button/Item}
+     * Hides the dialog.
+     * @param {Function} callback (optional) Function to call when the dialog is hidden
+     * @return {Roo.BasicDialog} this
      */
-    insertButton : function(index, item){
-        if(item instanceof Array){
-            var buttons = [];
-            for(var i = 0, len = item.length; i < len; i++) {
-               buttons.push(this.insertButton(index + i, item[i]));
-            }
-            return buttons;
+    hide : function(callback){
+        if (this.fireEvent("beforehide", this) === false){
+            return;
         }
-        if (!(item instanceof Roo.Toolbar.Button)){
-           item = new Roo.Toolbar.Button(item);
+        if(this.shadow){
+            this.shadow.hide();
         }
-        var td = document.createElement("td");
-        this.tr.insertBefore(td, this.tr.childNodes[index]);
-        item.render(td);
-        this.items.insert(index, item);
-        return item;
-    },
-    
-    /**
-     * Adds a new element to the toolbar from the passed {@link Roo.DomHelper} config.
-     * @param {Object} config
-     * @return {Roo.Toolbar.Item} The element's item
-     */
-    addDom : function(config, returnEl){
-        var td = this.nextBlock();
-        Roo.DomHelper.overwrite(td, config);
-        var ti = new Roo.Toolbar.Item(td.firstChild);
-        ti.render(td);
-        this.items.add(ti);
-        return ti;
+        if(this.shim) {
+          this.shim.hide();
+        }
+        // sometimes animateTarget seems to get set.. causing problems...
+        // this just double checks..
+        if(this.animateTarget && Roo.get(this.animateTarget)) {
+           this.animHide(callback);
+        }else{
+            this.el.hide();
+            this.hideEl(callback);
+        }
+        return this;
     },
 
-    /**
-     * Collection of fields on the toolbar.. usefull for quering (value is false if there are no fields)
-     * @type Roo.util.MixedCollection  
-     */
-    fields : false,
-    
-    /**
-     * Adds a dynamically rendered Roo.form field (TextField, ComboBox, etc).
-     * Note: the field should not have been rendered yet. For a field that has already been
-     * rendered, use {@link #addElement}.
-     * @param {Roo.form.Field} field
-     * @return {Roo.ToolbarItem}
-     */
-     
-      
-    addField : function(field) {
-        if (!this.fields) {
-            var autoId = 0;
-            this.fields = new Roo.util.MixedCollection(false, function(o){
-                return o.id || ("item" + (++autoId));
-            });
-
+    // private
+    hideEl : function(callback){
+        this.proxy.hide();
+        if(this.modal){
+            this.mask.hide();
+            Roo.get(document.body).removeClass("x-body-masked");
+        }
+        this.fireEvent("hide", this);
+        if(typeof callback == "function"){
+            callback();
         }
-        
-        var td = this.nextBlock();
-        field.render(td);
-        var ti = new Roo.Toolbar.Item(td.firstChild);
-        ti.render(td);
-        this.items.add(ti);
-        this.fields.add(field);
-        return ti;
-    },
-    /**
-     * Hide the toolbar
-     * @method hide
-     */
-     
-      
-    hide : function()
-    {
-        this.el.child('div').setVisibilityMode(Roo.Element.DISPLAY);
-        this.el.child('div').hide();
     },
-    /**
-     * Show the toolbar
-     * @method show
-     */
-    show : function()
-    {
-        this.el.child('div').show();
+
+    // private
+    hideAction : function(){
+        this.setLeft("-10000px");
+        this.setTop("-10000px");
+        this.setStyle("visibility", "hidden");
     },
-      
+
     // private
-    nextBlock : function(){
-        var td = document.createElement("td");
-        this.tr.appendChild(td);
-        return td;
+    refreshSize : function(){
+        this.size = this.el.getSize();
+        this.xy = this.el.getXY();
+        Roo.state.Manager.set(this.stateId || this.el.id + "-state", this.el.getBox());
     },
 
     // private
-    destroy : function(){
-        if(this.items){ // rendered?
-            Roo.destroy.apply(Roo, this.items.items);
+    // z-index is managed by the DialogManager and may be overwritten at any time
+    setZIndex : function(index){
+        if(this.modal){
+            this.mask.setStyle("z-index", index);
         }
-        if(this.fields){ // rendered?
-            Roo.destroy.apply(Roo, this.fields.items);
+        if(this.shim){
+            this.shim.setStyle("z-index", ++index);
         }
-        Roo.Element.uncache(this.el, this.tr);
-    }
-};
-
-/**
- * @class Roo.Toolbar.Item
- * The base class that other classes should extend in order to get some basic common toolbar item functionality.
- * @constructor
- * Creates a new Item
- * @param {HTMLElement} el 
- */
-Roo.Toolbar.Item = function(el){
-    var cfg = {};
-    if (typeof (el.xtype) != 'undefined') {
-        cfg = el;
-        el = cfg.el;
-    }
-    
-    this.el = Roo.getDom(el);
-    this.id = Roo.id(this.el);
-    this.hidden = false;
-    
-    this.addEvents({
-         /**
-	     * @event render
-	     * Fires when the button is rendered
-	     * @param {Button} this
-	     */
-        'render': true
-    });
-    Roo.Toolbar.Item.superclass.constructor.call(this,cfg);
-};
-Roo.extend(Roo.Toolbar.Item, Roo.util.Observable, {
-//Roo.Toolbar.Item.prototype = {
-    
-    /**
-     * Get this item's HTML Element
-     * @return {HTMLElement}
-     */
-    getEl : function(){
-       return this.el;  
-    },
-
-    // private
-    render : function(td){
-        
-         this.td = td;
-        td.appendChild(this.el);
-        
-        this.fireEvent('render', this);
-    },
-    
-    /**
-     * Removes and destroys this item.
-     */
-    destroy : function(){
-        this.td.parentNode.removeChild(this.td);
-    },
-    
-    /**
-     * Shows this item.
-     */
-    show: function(){
-        this.hidden = false;
-        this.td.style.display = "";
-    },
-    
-    /**
-     * Hides this item.
-     */
-    hide: function(){
-        this.hidden = true;
-        this.td.style.display = "none";
-    },
-    
-    /**
-     * Convenience function for boolean show/hide.
-     * @param {Boolean} visible true to show/false to hide
-     */
-    setVisible: function(visible){
-        if(visible) {
-            this.show();
-        }else{
-            this.hide();
+        if(this.shadow){
+            this.shadow.setZIndex(++index);
         }
+        this.el.setStyle("z-index", ++index);
+        if(this.proxy){
+            this.proxy.setStyle("z-index", ++index);
+        }
+        if(this.resizer){
+            this.resizer.proxy.setStyle("z-index", ++index);
+        }
+
+        this.lastZIndex = index;
     },
-    
-    /**
-     * Try to focus this item.
-     */
-    focus : function(){
-        Roo.fly(this.el).focus();
-    },
-    
-    /**
-     * Disables this item.
-     */
-    disable : function(){
-        Roo.fly(this.td).addClass("x-item-disabled");
-        this.disabled = true;
-        this.el.disabled = true;
-    },
-    
+
     /**
-     * Enables this item.
+     * Returns the element for this dialog
+     * @return {Roo.Element} The underlying dialog Element
      */
-    enable : function(){
-        Roo.fly(this.td).removeClass("x-item-disabled");
-        this.disabled = false;
-        this.el.disabled = false;
+    getEl : function(){
+        return this.el;
     }
 });
 
-
 /**
- * @class Roo.Toolbar.Separator
- * @extends Roo.Toolbar.Item
- * A simple toolbar separator class
- * @constructor
- * Creates a new Separator
+ * @class Roo.DialogManager
+ * Provides global access to BasicDialogs that have been created and
+ * support for z-indexing (layering) multiple open dialogs.
  */
-Roo.Toolbar.Separator = function(cfg){
-    
-    var s = document.createElement("span");
-    s.className = "ytb-sep";
-    if (cfg) {
-        cfg.el = s;
-    }
-    
-    Roo.Toolbar.Separator.superclass.constructor.call(this, cfg || s);
-};
-Roo.extend(Roo.Toolbar.Separator, Roo.Toolbar.Item, {
-    enable:Roo.emptyFn,
-    disable:Roo.emptyFn,
-    focus:Roo.emptyFn
-});
+Roo.DialogManager = function(){
+    var list = {};
+    var accessList = [];
+    var front = null;
 
-/**
- * @class Roo.Toolbar.Spacer
- * @extends Roo.Toolbar.Item
- * A simple element that adds extra horizontal space to a toolbar.
- * @constructor
- * Creates a new Spacer
- */
-Roo.Toolbar.Spacer = function(cfg){
-    var s = document.createElement("div");
-    s.className = "ytb-spacer";
-    if (cfg) {
-        cfg.el = s;
-    }
-    Roo.Toolbar.Spacer.superclass.constructor.call(this, cfg || s);
-};
-Roo.extend(Roo.Toolbar.Spacer, Roo.Toolbar.Item, {
-    enable:Roo.emptyFn,
-    disable:Roo.emptyFn,
-    focus:Roo.emptyFn
-});
+    // private
+    var sortDialogs = function(d1, d2){
+        return (!d1._lastAccess || d1._lastAccess < d2._lastAccess) ? -1 : 1;
+    };
 
-/**
- * @class Roo.Toolbar.Fill
- * @extends Roo.Toolbar.Spacer
- * A simple element that adds a greedy (100% width) horizontal space to a toolbar.
- * @constructor
- * Creates a new Spacer
- */
-Roo.Toolbar.Fill = Roo.extend(Roo.Toolbar.Spacer, {
     // private
-    render : function(td){
-        td.style.width = '100%';
-        Roo.Toolbar.Fill.superclass.render.call(this, td);
-    }
-});
+    var orderDialogs = function(){
+        accessList.sort(sortDialogs);
+        var seed = Roo.DialogManager.zseed;
+        for(var i = 0, len = accessList.length; i < len; i++){
+            var dlg = accessList[i];
+            if(dlg){
+                dlg.setZIndex(seed + (i*10));
+            }
+        }
+    };
+
+    return {
+        /**
+         * The starting z-index for BasicDialogs (defaults to 9000)
+         * @type Number The z-index value
+         */
+        zseed : 9000,
+
+        // private
+        register : function(dlg){
+            list[dlg.id] = dlg;
+            accessList.push(dlg);
+        },
+
+        // private
+        unregister : function(dlg){
+            delete list[dlg.id];
+            var i=0;
+            var len=0;
+            if(!accessList.indexOf){
+                for(  i = 0, len = accessList.length; i < len; i++){
+                    if(accessList[i] == dlg){
+                        accessList.splice(i, 1);
+                        return;
+                    }
+                }
+            }else{
+                 i = accessList.indexOf(dlg);
+                if(i != -1){
+                    accessList.splice(i, 1);
+                }
+            }
+        },
+
+        /**
+         * Gets a registered dialog by id
+         * @param {String/Object} id The id of the dialog or a dialog
+         * @return {Roo.BasicDialog} this
+         */
+        get : function(id){
+            return typeof id == "object" ? id : list[id];
+        },
+
+        /**
+         * Brings the specified dialog to the front
+         * @param {String/Object} dlg The id of the dialog or a dialog
+         * @return {Roo.BasicDialog} this
+         */
+        bringToFront : function(dlg){
+            dlg = this.get(dlg);
+            if(dlg != front){
+                front = dlg;
+                dlg._lastAccess = new Date().getTime();
+                orderDialogs();
+            }
+            return dlg;
+        },
+
+        /**
+         * Sends the specified dialog to the back
+         * @param {String/Object} dlg The id of the dialog or a dialog
+         * @return {Roo.BasicDialog} this
+         */
+        sendToBack : function(dlg){
+            dlg = this.get(dlg);
+            dlg._lastAccess = -(new Date().getTime());
+            orderDialogs();
+            return dlg;
+        },
+
+        /**
+         * Hides all dialogs
+         */
+        hideAll : function(){
+            for(var id in list){
+                if(list[id] && typeof list[id] != "function" && list[id].isVisible()){
+                    list[id].hide();
+                }
+            }
+        }
+    };
+}();
 
 /**
- * @class Roo.Toolbar.TextItem
- * @extends Roo.Toolbar.Item
- * A simple class that renders text directly into a toolbar.
- * @constructor
- * Creates a new TextItem
- * @param {String} text
- */
-Roo.Toolbar.TextItem = function(cfg){
-    var  text = cfg || "";
-    if (typeof(cfg) == 'object') {
-        text = cfg.text || "";
-    }  else {
-        cfg = null;
+ * @class Roo.LayoutDialog
+ * @extends Roo.BasicDialog
+ * @children Roo.ContentPanel
+ * @parent builder none
+ * Dialog which provides adjustments for working with a layout in a Dialog.
+ * Add your necessary layout config options to the dialog's config.<br>
+ * Example usage (including a nested layout):
+ * <pre><code>
+if(!dialog){
+    dialog = new Roo.LayoutDialog("download-dlg", {
+        modal: true,
+        width:600,
+        height:450,
+        shadow:true,
+        minWidth:500,
+        minHeight:350,
+        autoTabs:true,
+        proxyDrag:true,
+        // layout config merges with the dialog config
+        center:{
+            tabPosition: "top",
+            alwaysShowTabs: true
+        }
+    });
+    dialog.addKeyListener(27, dialog.hide, dialog);
+    dialog.setDefaultButton(dialog.addButton("Close", dialog.hide, dialog));
+    dialog.addButton("Build It!", this.getDownload, this);
+
+    // we can even add nested layouts
+    var innerLayout = new Roo.BorderLayout("dl-inner", {
+        east: {
+            initialSize: 200,
+            autoScroll:true,
+            split:true
+        },
+        center: {
+            autoScroll:true
+        }
+    });
+    innerLayout.beginUpdate();
+    innerLayout.add("east", new Roo.ContentPanel("dl-details"));
+    innerLayout.add("center", new Roo.ContentPanel("selection-panel"));
+    innerLayout.endUpdate(true);
+
+    var layout = dialog.getLayout();
+    layout.beginUpdate();
+    layout.add("center", new Roo.ContentPanel("standard-panel",
+                        {title: "Download the Source", fitToFrame:true}));
+    layout.add("center", new Roo.NestedLayoutPanel(innerLayout,
+               {title: "Build your own roo.js"}));
+    layout.getRegion("center").showPanel(sp);
+    layout.endUpdate();
+}
+</code></pre>
+    * @constructor
+    * @param {String/HTMLElement/Roo.Element} el The id of or container element, or config
+    * @param {Object} config configuration options
+  */
+Roo.LayoutDialog = function(el, cfg){
+    
+    var config=  cfg;
+    if (typeof(cfg) == 'undefined') {
+        config = Roo.apply({}, el);
+        // not sure why we use documentElement here.. - it should always be body.
+        // IE7 borks horribly if we use documentElement.
+        // webkit also does not like documentElement - it creates a body element...
+        el = Roo.get( document.body || document.documentElement ).createChild();
+        //config.autoCreate = true;
     }
-    var s = document.createElement("span");
-    s.className = "ytb-text";
-    s.innerHTML = text;
-    if (cfg) {
-        cfg.el  = s;
+    
+    
+    config.autoTabs = false;
+    Roo.LayoutDialog.superclass.constructor.call(this, el, config);
+    this.body.setStyle({overflow:"hidden", position:"relative"});
+    this.layout = new Roo.BorderLayout(this.body.dom, config);
+    this.layout.monitorWindowResize = false;
+    this.el.addClass("x-dlg-auto-layout");
+    // fix case when center region overwrites center function
+    this.center = Roo.BasicDialog.prototype.center;
+    this.on("show", this.layout.layout, this.layout, true);
+    if (config.items) {
+        var xitems = config.items;
+        delete config.items;
+        Roo.each(xitems, this.addxtype, this);
     }
     
-    Roo.Toolbar.TextItem.superclass.constructor.call(this, cfg ||  s);
-};
-Roo.extend(Roo.Toolbar.TextItem, Roo.Toolbar.Item, {
     
-     
-    enable:Roo.emptyFn,
-    disable:Roo.emptyFn,
-    focus:Roo.emptyFn
-});
-
-/**
- * @class Roo.Toolbar.Button
- * @extends Roo.Button
- * A button that renders into a toolbar.
- * @constructor
- * Creates a new Button
- * @param {Object} config A standard {@link Roo.Button} config object
- */
-Roo.Toolbar.Button = function(config){
-    Roo.Toolbar.Button.superclass.constructor.call(this, null, config);
 };
-Roo.extend(Roo.Toolbar.Button, Roo.Button, {
-    render : function(td){
-        this.td = td;
-        Roo.Toolbar.Button.superclass.render.call(this, td);
-    },
+Roo.extend(Roo.LayoutDialog, Roo.BasicDialog, {
+    
     
     /**
-     * Removes and destroys this button
+     * @cfg {Roo.LayoutRegion} east  
      */
-    destroy : function(){
-        Roo.Toolbar.Button.superclass.destroy.call(this);
-        this.td.parentNode.removeChild(this.td);
-    },
-    
     /**
-     * Shows this button
+     * @cfg {Roo.LayoutRegion} west
+     */
+    /**
+     * @cfg {Roo.LayoutRegion} south
+     */
+    /**
+     * @cfg {Roo.LayoutRegion} north
+     */
+    /**
+     * @cfg {Roo.LayoutRegion} center
+     */
+    /**
+     * @cfg {Roo.Button} buttons[]  Bottom buttons..
      */
-    show: function(){
-        this.hidden = false;
-        this.td.style.display = "";
-    },
+    
     
     /**
-     * Hides this button
+     * Ends update of the layout <strike>and resets display to none</strike>. Use standard beginUpdate/endUpdate on the layout.
+     * @deprecated
      */
-    hide: function(){
-        this.hidden = true;
-        this.td.style.display = "none";
+    endUpdate : function(){
+        this.layout.endUpdate();
     },
 
     /**
-     * Disables this item
+     * Begins an update of the layout <strike>and sets display to block and visibility to hidden</strike>. Use standard beginUpdate/endUpdate on the layout.
+     *  @deprecated
      */
-    disable : function(){
-        Roo.fly(this.td).addClass("x-item-disabled");
-        this.disabled = true;
+    beginUpdate : function(){
+        this.layout.beginUpdate();
     },
 
     /**
-     * Enables this item
+     * Get the BorderLayout for this dialog
+     * @return {Roo.BorderLayout}
      */
-    enable : function(){
-        Roo.fly(this.td).removeClass("x-item-disabled");
-        this.disabled = false;
-    }
-});
-// backwards compat
-Roo.ToolbarButton = Roo.Toolbar.Button;
+    getLayout : function(){
+        return this.layout;
+    },
 
-/**
- * @class Roo.Toolbar.SplitButton
- * @extends Roo.SplitButton
- * A menu button that renders into a toolbar.
- * @constructor
- * Creates a new SplitButton
- * @param {Object} config A standard {@link Roo.SplitButton} config object
- */
-Roo.Toolbar.SplitButton = function(config){
-    Roo.Toolbar.SplitButton.superclass.constructor.call(this, null, config);
-};
-Roo.extend(Roo.Toolbar.SplitButton, Roo.SplitButton, {
-    render : function(td){
-        this.td = td;
-        Roo.Toolbar.SplitButton.superclass.render.call(this, td);
+    showEl : function(){
+        Roo.LayoutDialog.superclass.showEl.apply(this, arguments);
+        if(Roo.isIE7){
+            this.layout.layout();
+        }
     },
-    
-    /**
-     * Removes and destroys this button
-     */
-    destroy : function(){
-        Roo.Toolbar.SplitButton.superclass.destroy.call(this);
-        this.td.parentNode.removeChild(this.td);
+
+    // private
+    // Use the syncHeightBeforeShow config option to control this automatically
+    syncBodyHeight : function(){
+        Roo.LayoutDialog.superclass.syncBodyHeight.call(this);
+        if(this.layout){this.layout.layout();}
     },
     
-    /**
-     * Shows this button
+      /**
+     * Add an xtype element (actually adds to the layout.)
+     * @return {Object} xdata xtype object data.
      */
-    show: function(){
-        this.hidden = false;
-        this.td.style.display = "";
-    },
     
-    /**
-     * Hides this button
-     */
-    hide: function(){
-        this.hidden = true;
-        this.td.style.display = "none";
+    addxtype : function(c) {
+        return this.layout.addxtype(c);
     }
-});
-
-// backwards compat
-Roo.Toolbar.MenuButton = Roo.Toolbar.SplitButton;/*
+});/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -12413,987 +10305,1425 @@ Roo.Toolbar.MenuButton = Roo.Toolbar.SplitButton;/*
  */
  
 /**
- * @class Roo.PagingToolbar
- * @extends Roo.Toolbar
- * A specialized toolbar that is bound to a {@link Roo.data.Store} and provides automatic paging controls.
- * @constructor
- * Create a new PagingToolbar
- * @param {Object} config The config object
- */
-Roo.PagingToolbar = function(el, ds, config)
-{
-    // old args format still supported... - xtype is prefered..
-    if (typeof(el) == 'object' && el.xtype) {
-        // created from xtype...
-        config = el;
-        ds = el.dataSource;
-        el = config.container;
-    }
-    var items = [];
-    if (config.items) {
-        items = config.items;
-        config.items = [];
+ * @class Roo.MessageBox
+ * @static
+ * Utility class for generating different styles of message boxes.  The alias Roo.Msg can also be used.
+ * Example usage:
+ *<pre><code>
+// Basic alert:
+Roo.Msg.alert('Status', 'Changes saved successfully.');
+
+// Prompt for user data:
+Roo.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
+    if (btn == 'ok'){
+        // process text value...
     }
-    
-    Roo.PagingToolbar.superclass.constructor.call(this, el, null, config);
-    this.ds = ds;
-    this.cursor = 0;
-    this.renderButtons(this.el);
-    this.bind(ds);
-    
-    // supprot items array.
-   
-    Roo.each(items, function(e) {
-        this.add(Roo.factory(e));
-    },this);
-    
-};
+});
 
-Roo.extend(Roo.PagingToolbar, Roo.Toolbar, {
-    /**
-     * @cfg {Roo.data.Store} dataSource
-     * The underlying data store providing the paged data
-     */
-    /**
-     * @cfg {String/HTMLElement/Element} container
-     * container The id or element that will contain the toolbar
-     */
-    /**
-     * @cfg {Boolean} displayInfo
-     * True to display the displayMsg (defaults to false)
-     */
-    /**
-     * @cfg {Number} pageSize
-     * The number of records to display per page (defaults to 20)
-     */
-    pageSize: 20,
-    /**
-     * @cfg {String} displayMsg
-     * The paging status message to display (defaults to "Displaying {start} - {end} of {total}")
-     */
-    displayMsg : 'Displaying {0} - {1} of {2}',
-    /**
-     * @cfg {String} emptyMsg
-     * The message to display when no records are found (defaults to "No data to display")
-     */
-    emptyMsg : 'No data to display',
-    /**
-     * Customizable piece of the default paging text (defaults to "Page")
-     * @type String
-     */
-    beforePageText : "Page",
-    /**
-     * Customizable piece of the default paging text (defaults to "of %0")
-     * @type String
-     */
-    afterPageText : "of {0}",
-    /**
-     * Customizable piece of the default paging text (defaults to "First Page")
-     * @type String
-     */
-    firstText : "First Page",
-    /**
-     * Customizable piece of the default paging text (defaults to "Previous Page")
-     * @type String
-     */
-    prevText : "Previous Page",
-    /**
-     * Customizable piece of the default paging text (defaults to "Next Page")
-     * @type String
-     */
-    nextText : "Next Page",
-    /**
-     * Customizable piece of the default paging text (defaults to "Last Page")
-     * @type String
-     */
-    lastText : "Last Page",
-    /**
-     * Customizable piece of the default paging text (defaults to "Refresh")
-     * @type String
-     */
-    refreshText : "Refresh",
+// Show a dialog using config options:
+Roo.Msg.show({
+   title:'Save Changes?',
+   msg: 'Your are closing a tab that has unsaved changes. Would you like to save your changes?',
+   buttons: Roo.Msg.YESNOCANCEL,
+   fn: processResult,
+   animEl: 'elId'
+});
+</code></pre>
+ * @static
+ */
+Roo.MessageBox = function(){
+    var dlg, opt, mask, waitTimer;
+    var bodyEl, msgEl, textboxEl, textareaEl, progressEl, pp;
+    var buttons, activeTextEl, bwidth;
 
     // private
-    renderButtons : function(el){
-        Roo.PagingToolbar.superclass.render.call(this, el);
-        this.first = this.addButton({
-            tooltip: this.firstText,
-            cls: "x-btn-icon x-grid-page-first",
-            disabled: true,
-            handler: this.onClick.createDelegate(this, ["first"])
-        });
-        this.prev = this.addButton({
-            tooltip: this.prevText,
-            cls: "x-btn-icon x-grid-page-prev",
-            disabled: true,
-            handler: this.onClick.createDelegate(this, ["prev"])
-        });
-        //this.addSeparator();
-        this.add(this.beforePageText);
-        this.field = Roo.get(this.addDom({
-           tag: "input",
-           type: "text",
-           size: "3",
-           value: "1",
-           cls: "x-grid-page-number"
-        }).el);
-        this.field.on("keydown", this.onPagingKeydown, this);
-        this.field.on("focus", function(){this.dom.select();});
-        this.afterTextEl = this.addText(String.format(this.afterPageText, 1));
-        this.field.setHeight(18);
-        //this.addSeparator();
-        this.next = this.addButton({
-            tooltip: this.nextText,
-            cls: "x-btn-icon x-grid-page-next",
-            disabled: true,
-            handler: this.onClick.createDelegate(this, ["next"])
-        });
-        this.last = this.addButton({
-            tooltip: this.lastText,
-            cls: "x-btn-icon x-grid-page-last",
-            disabled: true,
-            handler: this.onClick.createDelegate(this, ["last"])
-        });
-        //this.addSeparator();
-        this.loading = this.addButton({
-            tooltip: this.refreshText,
-            cls: "x-btn-icon x-grid-loading",
-            handler: this.onClick.createDelegate(this, ["refresh"])
-        });
-
-        if(this.displayInfo){
-            this.displayEl = Roo.fly(this.el.dom.firstChild).createChild({cls:'x-paging-info'});
-        }
-    },
+    var handleButton = function(button){
+        dlg.hide();
+        Roo.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value], 1);
+    };
 
     // private
-    updateInfo : function(){
-        if(this.displayEl){
-            var count = this.ds.getCount();
-            var msg = count == 0 ?
-                this.emptyMsg :
-                String.format(
-                    this.displayMsg,
-                    this.cursor+1, this.cursor+count, this.ds.getTotalCount()    
-                );
-            this.displayEl.update(msg);
+    var handleHide = function(){
+        if(opt && opt.cls){
+            dlg.el.removeClass(opt.cls);
         }
-    },
+        if(waitTimer){
+            Roo.TaskMgr.stop(waitTimer);
+            waitTimer = null;
+        }
+    };
 
     // private
-    onLoad : function(ds, r, o){
-       this.cursor = o.params ? o.params.start : 0;
-       var d = this.getPageData(), ap = d.activePage, ps = d.pages;
-
-       this.afterTextEl.el.innerHTML = String.format(this.afterPageText, d.pages);
-       this.field.dom.value = ap;
-       this.first.setDisabled(ap == 1);
-       this.prev.setDisabled(ap == 1);
-       this.next.setDisabled(ap == ps);
-       this.last.setDisabled(ap == ps);
-       this.loading.enable();
-       this.updateInfo();
-    },
+    var updateButtons = function(b){
+        var width = 0;
+        if(!b){
+            buttons["ok"].hide();
+            buttons["cancel"].hide();
+            buttons["yes"].hide();
+            buttons["no"].hide();
+            dlg.footer.dom.style.display = 'none';
+            return width;
+        }
+        dlg.footer.dom.style.display = '';
+        for(var k in buttons){
+            if(typeof buttons[k] != "function"){
+                if(b[k]){
+                    buttons[k].show();
+                    buttons[k].setText(typeof b[k] == "string" ? b[k] : Roo.MessageBox.buttonText[k]);
+                    width += buttons[k].el.getWidth()+15;
+                }else{
+                    buttons[k].hide();
+                }
+            }
+        }
+        return width;
+    };
 
     // private
-    getPageData : function(){
-        var total = this.ds.getTotalCount();
-        return {
-            total : total,
-            activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize),
-            pages :  total < this.pageSize ? 1 : Math.ceil(total/this.pageSize)
-        };
-    },
+    var handleEsc = function(d, k, e){
+        if(opt && opt.closable !== false){
+            dlg.hide();
+        }
+        if(e){
+            e.stopEvent();
+        }
+    };
 
-    // private
-    onLoadError : function(){
-        this.loading.enable();
-    },
+    return {
+        /**
+         * Returns a reference to the underlying {@link Roo.BasicDialog} element
+         * @return {Roo.BasicDialog} The BasicDialog element
+         */
+        getDialog : function(){
+           if(!dlg){
+                dlg = new Roo.BasicDialog("x-msg-box", {
+                    autoCreate : true,
+                    shadow: true,
+                    draggable: true,
+                    resizable:false,
+                    constraintoviewport:false,
+                    fixedcenter:true,
+                    collapsible : false,
+                    shim:true,
+                    modal: true,
+                    width:400, height:100,
+                    buttonAlign:"center",
+                    closeClick : function(){
+                        if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){
+                            handleButton("no");
+                        }else{
+                            handleButton("cancel");
+                        }
+                    }
+                });
+              
+                dlg.on("hide", handleHide);
+                mask = dlg.mask;
+                dlg.addKeyListener(27, handleEsc);
+                buttons = {};
+                var bt = this.buttonText;
+                buttons["ok"] = dlg.addButton(bt["ok"], handleButton.createCallback("ok"));
+                buttons["yes"] = dlg.addButton(bt["yes"], handleButton.createCallback("yes"));
+                buttons["no"] = dlg.addButton(bt["no"], handleButton.createCallback("no"));
+                buttons["cancel"] = dlg.addButton(bt["cancel"], handleButton.createCallback("cancel"));
+                bodyEl = dlg.body.createChild({
 
-    // private
-    onPagingKeydown : function(e){
-        var k = e.getKey();
-        var d = this.getPageData();
-        if(k == e.RETURN){
-            var v = this.field.dom.value, pageNum;
-            if(!v || isNaN(pageNum = parseInt(v, 10))){
-                this.field.dom.value = d.activePage;
-                return;
+                    html:'<span class="roo-mb-text"></span><br /><input type="text" class="roo-mb-input" /><textarea class="roo-mb-textarea"></textarea><div class="roo-mb-progress-wrap"><div class="roo-mb-progress"><div class="roo-mb-progress-bar">&#160;</div></div></div>'
+                });
+                msgEl = bodyEl.dom.firstChild;
+                textboxEl = Roo.get(bodyEl.dom.childNodes[2]);
+                textboxEl.enableDisplayMode();
+                textboxEl.addKeyListener([10,13], function(){
+                    if(dlg.isVisible() && opt && opt.buttons){
+                        if(opt.buttons.ok){
+                            handleButton("ok");
+                        }else if(opt.buttons.yes){
+                            handleButton("yes");
+                        }
+                    }
+                });
+                textareaEl = Roo.get(bodyEl.dom.childNodes[3]);
+                textareaEl.enableDisplayMode();
+                progressEl = Roo.get(bodyEl.dom.childNodes[4]);
+                progressEl.enableDisplayMode();
+                var pf = progressEl.dom.firstChild;
+                if (pf) {
+                    pp = Roo.get(pf.firstChild);
+                    pp.setHeight(pf.offsetHeight);
+                }
+                
             }
-            pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
-            this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
-            e.stopEvent();
-        }
-        else if(k == e.HOME || (k == e.UP && e.ctrlKey) || (k == e.PAGEUP && e.ctrlKey) || (k == e.RIGHT && e.ctrlKey) || k == e.END || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey))
-        {
-          var pageNum = (k == e.HOME || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey)) ? 1 : d.pages;
-          this.field.dom.value = pageNum;
-          this.ds.load({params:{start: (pageNum - 1) * this.pageSize, limit: this.pageSize}});
-          e.stopEvent();
-        }
-        else if(k == e.UP || k == e.RIGHT || k == e.PAGEUP || k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
-        {
-          var v = this.field.dom.value, pageNum; 
-          var increment = (e.shiftKey) ? 10 : 1;
-          if(k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN) {
-            increment *= -1;
-          }
-          if(!v || isNaN(pageNum = parseInt(v, 10))) {
-            this.field.dom.value = d.activePage;
-            return;
-          }
-          else if(parseInt(v, 10) + increment >= 1 & parseInt(v, 10) + increment <= d.pages)
-          {
-            this.field.dom.value = parseInt(v, 10) + increment;
-            pageNum = Math.min(Math.max(1, pageNum + increment), d.pages) - 1;
-            this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
-          }
-          e.stopEvent();
-        }
-    },
+            return dlg;
+        },
 
-    // private
-    beforeLoad : function(){
-        if(this.loading){
-            this.loading.disable();
-        }
-    },
+        /**
+         * Updates the message box body text
+         * @param {String} text (optional) Replaces the message box element's innerHTML with the specified string (defaults to
+         * the XHTML-compliant non-breaking space character '&amp;#160;')
+         * @return {Roo.MessageBox} This message box
+         */
+        updateText : function(text){
+            if(!dlg.isVisible() && !opt.width){
+                dlg.resizeTo(this.maxWidth, 100); // resize first so content is never clipped from previous shows
+            }
+            msgEl.innerHTML = text || '&#160;';
+      
+            var cw =  Math.max(msgEl.offsetWidth, msgEl.parentNode.scrollWidth);
+            //Roo.log("guesed size: " + JSON.stringify([cw,msgEl.offsetWidth, msgEl.parentNode.scrollWidth]));
+            var w = Math.max(
+                    Math.min(opt.width || cw , this.maxWidth), 
+                    Math.max(opt.minWidth || this.minWidth, bwidth)
+            );
+            if(opt.prompt){
+                activeTextEl.setWidth(w);
+            }
+            if(dlg.isVisible()){
+                dlg.fixedcenter = false;
+            }
+            // to big, make it scroll. = But as usual stupid IE does not support
+            // !important..
+            
+            if ( bodyEl.getHeight() > (Roo.lib.Dom.getViewHeight() - 100)) {
+                bodyEl.setHeight ( Roo.lib.Dom.getViewHeight() - 100 );
+                bodyEl.dom.style.overflowY = 'auto' + ( Roo.isIE ? '' : ' !important');
+            } else {
+                bodyEl.dom.style.height = '';
+                bodyEl.dom.style.overflowY = '';
+            }
+            if (cw > w) {
+                bodyEl.dom.style.get = 'auto' + ( Roo.isIE ? '' : ' !important');
+            } else {
+                bodyEl.dom.style.overflowX = '';
+            }
+            
+            dlg.setContentSize(w, bodyEl.getHeight());
+            if(dlg.isVisible()){
+                dlg.fixedcenter = true;
+            }
+            return this;
+        },
 
-    // private
-    onClick : function(which){
-        var ds = this.ds;
-        switch(which){
-            case "first":
-                ds.load({params:{start: 0, limit: this.pageSize}});
-            break;
-            case "prev":
-                ds.load({params:{start: Math.max(0, this.cursor-this.pageSize), limit: this.pageSize}});
-            break;
-            case "next":
-                ds.load({params:{start: this.cursor+this.pageSize, limit: this.pageSize}});
-            break;
-            case "last":
-                var total = ds.getTotalCount();
-                var extra = total % this.pageSize;
-                var lastStart = extra ? (total - extra) : total-this.pageSize;
-                ds.load({params:{start: lastStart, limit: this.pageSize}});
-            break;
-            case "refresh":
-                ds.load({params:{start: this.cursor, limit: this.pageSize}});
-            break;
-        }
-    },
+        /**
+         * Updates a progress-style message box's text and progress bar.  Only relevant on message boxes
+         * initiated via {@link Roo.MessageBox#progress} or by calling {@link Roo.MessageBox#show} with progress: true.
+         * @param {Number} value Any number between 0 and 1 (e.g., .5)
+         * @param {String} text (optional) If defined, the message box's body text is replaced with the specified string (defaults to undefined)
+         * @return {Roo.MessageBox} This message box
+         */
+        updateProgress : function(value, text){
+            if(text){
+                this.updateText(text);
+            }
+            if (pp) { // weird bug on my firefox - for some reason this is not defined
+                pp.setWidth(Math.floor(value*progressEl.dom.firstChild.offsetWidth));
+            }
+            return this;
+        },        
 
-    /**
-     * Unbinds the paging toolbar from the specified {@link Roo.data.Store}
-     * @param {Roo.data.Store} store The data store to unbind
-     */
-    unbind : function(ds){
-        ds.un("beforeload", this.beforeLoad, this);
-        ds.un("load", this.onLoad, this);
-        ds.un("loadexception", this.onLoadError, this);
-        ds.un("remove", this.updateInfo, this);
-        ds.un("add", this.updateInfo, this);
-        this.ds = undefined;
-    },
+        /**
+         * Returns true if the message box is currently displayed
+         * @return {Boolean} True if the message box is visible, else false
+         */
+        isVisible : function(){
+            return dlg && dlg.isVisible();  
+        },
 
-    /**
-     * Binds the paging toolbar to the specified {@link Roo.data.Store}
-     * @param {Roo.data.Store} store The data store to bind
-     */
-    bind : function(ds){
-        ds.on("beforeload", this.beforeLoad, this);
-        ds.on("load", this.onLoad, this);
-        ds.on("loadexception", this.onLoadError, this);
-        ds.on("remove", this.updateInfo, this);
-        ds.on("add", this.updateInfo, this);
-        this.ds = ds;
-    }
-});/*
- * 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">
- */
+        /**
+         * Hides the message box if it is displayed
+         */
+        hide : function(){
+            if(this.isVisible()){
+                dlg.hide();
+            }  
+        },
 
-/**
- * @class Roo.Resizable
- * @extends Roo.util.Observable
- * <p>Applies drag handles to an element to make it resizable. The drag handles are inserted into the element
- * and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap
- * the textarea in a div and set "resizeChild" to true (or to the id of the element), <b>or</b> set wrap:true in your config and
- * the element will be wrapped for you automatically.</p>
- * <p>Here is the list of valid resize handles:</p>
- * <pre>
-Value   Description
-------  -------------------
- 'n'     north
- 's'     south
- 'e'     east
- 'w'     west
- 'nw'    northwest
- 'sw'    southwest
- 'se'    southeast
- 'ne'    northeast
- 'hd'    horizontal drag
- 'all'   all
-</pre>
- * <p>Here's an example showing the creation of a typical Resizable:</p>
- * <pre><code>
-var resizer = new Roo.Resizable("element-id", {
-    handles: 'all',
-    minWidth: 200,
-    minHeight: 100,
-    maxWidth: 500,
-    maxHeight: 400,
-    pinned: true
+        /**
+         * Displays a new message box, or reinitializes an existing message box, based on the config options
+         * passed in. All functions (e.g. prompt, alert, etc) on MessageBox call this function internally.
+         * The following config object properties are supported:
+         * <pre>
+Property    Type             Description
+----------  ---------------  ------------------------------------------------------------------------------------
+animEl            String/Element   An id or Element from which the message box should animate as it opens and
+                                   closes (defaults to undefined)
+buttons           Object/Boolean   A button config object (e.g., Roo.MessageBox.OKCANCEL or {ok:'Foo',
+                                   cancel:'Bar'}), or false to not show any buttons (defaults to false)
+closable          Boolean          False to hide the top-right close button (defaults to true).  Note that
+                                   progress and wait dialogs will ignore this property and always hide the
+                                   close button as they can only be closed programmatically.
+cls               String           A custom CSS class to apply to the message box element
+defaultTextHeight Number           The default height in pixels of the message box's multiline textarea if
+                                   displayed (defaults to 75)
+fn                Function         A callback function to execute after closing the dialog.  The arguments to the
+                                   function will be btn (the name of the button that was clicked, if applicable,
+                                   e.g. "ok"), and text (the value of the active text field, if applicable).
+                                   Progress and wait dialogs will ignore this option since they do not respond to
+                                   user actions and can only be closed programmatically, so any required function
+                                   should be called by the same code after it closes the dialog.
+icon              String           A CSS class that provides a background image to be used as an icon for
+                                   the dialog (e.g., Roo.MessageBox.WARNING or 'custom-class', defaults to '')
+maxWidth          Number           The maximum width in pixels of the message box (defaults to 600)
+minWidth          Number           The minimum width in pixels of the message box (defaults to 100)
+modal             Boolean          False to allow user interaction with the page while the message box is
+                                   displayed (defaults to true)
+msg               String           A string that will replace the existing message box body text (defaults
+                                   to the XHTML-compliant non-breaking space character '&#160;')
+multiline         Boolean          True to prompt the user to enter multi-line text (defaults to false)
+progress          Boolean          True to display a progress bar (defaults to false)
+progressText      String           The text to display inside the progress bar if progress = true (defaults to '')
+prompt            Boolean          True to prompt the user to enter single-line text (defaults to false)
+proxyDrag         Boolean          True to display a lightweight proxy while dragging (defaults to false)
+title             String           The title text
+value             String           The string value to set into the active textbox element if displayed
+wait              Boolean          True to display a progress bar (defaults to false)
+width             Number           The width of the dialog in pixels
+</pre>
+         *
+         * Example usage:
+         * <pre><code>
+Roo.Msg.show({
+   title: 'Address',
+   msg: 'Please enter your address:',
+   width: 300,
+   buttons: Roo.MessageBox.OKCANCEL,
+   multiline: true,
+   fn: saveAddress,
+   animEl: 'addAddressBtn'
 });
-resizer.on("resize", myHandler);
 </code></pre>
- * <p>To hide a particular handle, set its display to none in CSS, or through script:<br>
- * resizer.east.setDisplayed(false);</p>
- * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false)
- * @cfg {Array/String} adjustments String "auto" or an array [width, height] with values to be <b>added</b> to the
- * resize operation's new size (defaults to [0, 0])
- * @cfg {Number} minWidth The minimum width for the element (defaults to 5)
- * @cfg {Number} minHeight The minimum height for the element (defaults to 5)
- * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
- * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
- * @cfg {Boolean} enabled False to disable resizing (defaults to true)
- * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)
- * @cfg {Number} width The width of the element in pixels (defaults to null)
- * @cfg {Number} height The height of the element in pixels (defaults to null)
- * @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)
- * @cfg {Number} duration Animation duration if animate = true (defaults to .35)
- * @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)
- * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined)
- * @cfg {Boolean} multiDirectional <b>Deprecated</b>.  The old style of adding multi-direction resize handles, deprecated
- * in favor of the handles config option (defaults to false)
- * @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)
- * @cfg {String} easing Animation easing if animate = true (defaults to 'easingOutStrong')
- * @cfg {Number} widthIncrement The increment to snap the width resize in pixels (dynamic must be true, defaults to 0)
- * @cfg {Number} heightIncrement The increment to snap the height resize in pixels (dynamic must be true, defaults to 0)
- * @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the
- * user mouses over the resizable borders. This is only applied at config time. (defaults to false)
- * @cfg {Boolean} preserveRatio True to preserve the original ratio between height and width during resize (defaults to false)
- * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
- * @cfg {Number} minX The minimum allowed page X for the element (only used for west resizing, defaults to 0)
- * @cfg {Number} minY The minimum allowed page Y for the element (only used for north resizing, defaults to 0)
- * @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)
- * @constructor
- * Create a new resizable component
- * @param {String/HTMLElement/Roo.Element} el The id or element to resize
- * @param {Object} config configuration options
-  */
-Roo.Resizable = function(el, config)
-{
-    this.el = Roo.get(el);
-
-    if(config && config.wrap){
-        config.resizeChild = this.el;
-        this.el = this.el.wrap(typeof config.wrap == "object" ? config.wrap : {cls:"xresizable-wrap"});
-        this.el.id = this.el.dom.id = config.resizeChild.id + "-rzwrap";
-        this.el.setStyle("overflow", "hidden");
-        this.el.setPositioning(config.resizeChild.getPositioning());
-        config.resizeChild.clearPositioning();
-        if(!config.width || !config.height){
-            var csize = config.resizeChild.getSize();
-            this.el.setSize(csize.width, csize.height);
-        }
-        if(config.pinned && !config.adjustments){
-            config.adjustments = "auto";
-        }
-    }
-
-    this.proxy = this.el.createProxy({tag: "div", cls: "x-resizable-proxy", id: this.el.id + "-rzproxy"});
-    this.proxy.unselectable();
-    this.proxy.enableDisplayMode('block');
+         * @param {Object} config Configuration options
+         * @return {Roo.MessageBox} This message box
+         */
+        show : function(options)
+        {
+            
+            // this causes nightmares if you show one dialog after another
+            // especially on callbacks..
+             
+            if(this.isVisible()){
+                
+                this.hide();
+                Roo.log("[Roo.Messagebox] Show called while message displayed:" );
+                Roo.log("Old Dialog Message:" +  msgEl.innerHTML );
+                Roo.log("New Dialog Message:" +  options.msg )
+                //this.alert("ERROR", "Multiple dialogs where displayed at the same time");
+                //throw "Roo.MessageBox ERROR : Multiple dialogs where displayed at the same time";
+                
+            }
+            var d = this.getDialog();
+            opt = options;
+            d.setTitle(opt.title || "&#160;");
+            d.close.setDisplayed(opt.closable !== false);
+            activeTextEl = textboxEl;
+            opt.prompt = opt.prompt || (opt.multiline ? true : false);
+            if(opt.prompt){
+                if(opt.multiline){
+                    textboxEl.hide();
+                    textareaEl.show();
+                    textareaEl.setHeight(typeof opt.multiline == "number" ?
+                        opt.multiline : this.defaultTextHeight);
+                    activeTextEl = textareaEl;
+                }else{
+                    textboxEl.show();
+                    textareaEl.hide();
+                }
+            }else{
+                textboxEl.hide();
+                textareaEl.hide();
+            }
+            progressEl.setDisplayed(opt.progress === true);
+            this.updateProgress(0);
+            activeTextEl.dom.value = opt.value || "";
+            if(opt.prompt){
+                dlg.setDefaultButton(activeTextEl);
+            }else{
+                var bs = opt.buttons;
+                var db = null;
+                if(bs && bs.ok){
+                    db = buttons["ok"];
+                }else if(bs && bs.yes){
+                    db = buttons["yes"];
+                }
+                dlg.setDefaultButton(db);
+            }
+            bwidth = updateButtons(opt.buttons);
+            this.updateText(opt.msg);
+            if(opt.cls){
+                d.el.addClass(opt.cls);
+            }
+            d.proxyDrag = opt.proxyDrag === true;
+            d.modal = opt.modal !== false;
+            d.mask = opt.modal !== false ? mask : false;
+            if(!d.isVisible()){
+                // force it to the end of the z-index stack so it gets a cursor in FF
+                document.body.appendChild(dlg.el.dom);
+                d.animateTarget = null;
+                d.show(options.animEl);
+            }
+            dlg.toFront();
+            return this;
+        },
 
-    Roo.apply(this, config);
+        /**
+         * Displays a message box with a progress bar.  This message box has no buttons and is not closeable by
+         * the user.  You are responsible for updating the progress bar as needed via {@link Roo.MessageBox#updateProgress}
+         * and closing the message box when the process is complete.
+         * @param {String} title The title bar text
+         * @param {String} msg The message box body text
+         * @return {Roo.MessageBox} This message box
+         */
+        progress : function(title, msg){
+            this.show({
+                title : title,
+                msg : msg,
+                buttons: false,
+                progress:true,
+                closable:false,
+                minWidth: this.minProgressWidth,
+                modal : true
+            });
+            return this;
+        },
 
-    if(this.pinned){
-        this.disableTrackOver = true;
-        this.el.addClass("x-resizable-pinned");
-    }
-    // if the element isn't positioned, make it relative
-    var position = this.el.getStyle("position");
-    if(position != "absolute" && position != "fixed"){
-        this.el.setStyle("position", "relative");
-    }
-    if(!this.handles){ // no handles passed, must be legacy style
-        this.handles = 's,e,se';
-        if(this.multiDirectional){
-            this.handles += ',n,w';
-        }
-    }
-    if(this.handles == "all"){
-        this.handles = "n s e w ne nw se sw";
-    }
-    var hs = this.handles.split(/\s*?[,;]\s*?| /);
-    var ps = Roo.Resizable.positions;
-    for(var i = 0, len = hs.length; i < len; i++){
-        if(hs[i] && ps[hs[i]]){
-            var pos = ps[hs[i]];
-            this[pos] = new Roo.Resizable.Handle(this, pos, this.disableTrackOver, this.transparent);
-        }
-    }
-    // legacy
-    this.corner = this.southeast;
-    
-    // updateBox = the box can move..
-    if(this.handles.indexOf("n") != -1 || this.handles.indexOf("w") != -1 || this.handles.indexOf("hd") != -1) {
-        this.updateBox = true;
-    }
+        /**
+         * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript Window.alert).
+         * If a callback function is passed it will be called after the user clicks the button, and the
+         * id of the button that was clicked will be passed as the only parameter to the callback
+         * (could also be the top-right close button).
+         * @param {String} title The title bar text
+         * @param {String} msg The message box body text
+         * @param {Function} fn (optional) The callback function invoked after the message box is closed
+         * @param {Object} scope (optional) The scope of the callback function
+         * @return {Roo.MessageBox} This message box
+         */
+        alert : function(title, msg, fn, scope){
+            this.show({
+                title : title,
+                msg : msg,
+                buttons: this.OK,
+                fn: fn,
+                scope : scope,
+                modal : true
+            });
+            return this;
+        },
 
-    this.activeHandle = null;
+        /**
+         * Displays a message box with an infinitely auto-updating progress bar.  This can be used to block user
+         * interaction while waiting for a long-running process to complete that does not have defined intervals.
+         * You are responsible for closing the message box when the process is complete.
+         * @param {String} msg The message box body text
+         * @param {String} title (optional) The title bar text
+         * @return {Roo.MessageBox} This message box
+         */
+        wait : function(msg, title){
+            this.show({
+                title : title,
+                msg : msg,
+                buttons: false,
+                closable:false,
+                progress:true,
+                modal:true,
+                width:300,
+                wait:true
+            });
+            waitTimer = Roo.TaskMgr.start({
+                run: function(i){
+                    Roo.MessageBox.updateProgress(((((i+20)%20)+1)*5)*.01);
+                },
+                interval: 1000
+            });
+            return this;
+        },
 
-    if(this.resizeChild){
-        if(typeof this.resizeChild == "boolean"){
-            this.resizeChild = Roo.get(this.el.dom.firstChild, true);
-        }else{
-            this.resizeChild = Roo.get(this.resizeChild, true);
-        }
-    }
-    
-    if(this.adjustments == "auto"){
-        var rc = this.resizeChild;
-        var hw = this.west, he = this.east, hn = this.north, hs = this.south;
-        if(rc && (hw || hn)){
-            rc.position("relative");
-            rc.setLeft(hw ? hw.el.getWidth() : 0);
-            rc.setTop(hn ? hn.el.getHeight() : 0);
-        }
-        this.adjustments = [
-            (he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0),
-            (hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1
-        ];
-    }
+        /**
+         * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's Window.confirm).
+         * If a callback function is passed it will be called after the user clicks either button, and the id of the
+         * button that was clicked will be passed as the only parameter to the callback (could also be the top-right close button).
+         * @param {String} title The title bar text
+         * @param {String} msg The message box body text
+         * @param {Function} fn (optional) The callback function invoked after the message box is closed
+         * @param {Object} scope (optional) The scope of the callback function
+         * @return {Roo.MessageBox} This message box
+         */
+        confirm : function(title, msg, fn, scope){
+            this.show({
+                title : title,
+                msg : msg,
+                buttons: this.YESNO,
+                fn: fn,
+                scope : scope,
+                modal : true
+            });
+            return this;
+        },
 
-    if(this.draggable){
-        this.dd = this.dynamic ?
-            this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});
-        this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id);
-    }
+        /**
+         * Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to
+         * JavaScript's Window.prompt).  The prompt can be a single-line or multi-line textbox.  If a callback function
+         * is passed it will be called after the user clicks either button, and the id of the button that was clicked
+         * (could also be the top-right close button) and the text that was entered will be passed as the two
+         * parameters to the callback.
+         * @param {String} title The title bar text
+         * @param {String} msg The message box body text
+         * @param {Function} fn (optional) The callback function invoked after the message box is closed
+         * @param {Object} scope (optional) The scope of the callback function
+         * @param {Boolean/Number} multiline (optional) True to create a multiline textbox using the defaultTextHeight
+         * property, or the height in pixels to create the textbox (defaults to false / single-line)
+         * @return {Roo.MessageBox} This message box
+         */
+        prompt : function(title, msg, fn, scope, multiline){
+            this.show({
+                title : title,
+                msg : msg,
+                buttons: this.OKCANCEL,
+                fn: fn,
+                minWidth:250,
+                scope : scope,
+                prompt:true,
+                multiline: multiline,
+                modal : true
+            });
+            return this;
+        },
 
-    // public events
-    this.addEvents({
         /**
-         * @event beforeresize
-         * Fired before resize is allowed. Set enabled to false to cancel resize.
-         * @param {Roo.Resizable} this
-         * @param {Roo.EventObject} e The mousedown event
+         * Button config that displays a single OK button
+         * @type Object
          */
-        "beforeresize" : true,
+        OK : {ok:true},
         /**
-         * @event resizing
-         * Fired a resizing.
-         * @param {Roo.Resizable} this
-         * @param {Number} x The new x position
-         * @param {Number} y The new y position
-         * @param {Number} w The new w width
-         * @param {Number} h The new h hight
-         * @param {Roo.EventObject} e The mouseup event
+         * Button config that displays Yes and No buttons
+         * @type Object
          */
-        "resizing" : true,
+        YESNO : {yes:true, no:true},
         /**
-         * @event resize
-         * Fired after a resize.
-         * @param {Roo.Resizable} this
-         * @param {Number} width The new width
-         * @param {Number} height The new height
-         * @param {Roo.EventObject} e The mouseup event
+         * Button config that displays OK and Cancel buttons
+         * @type Object
          */
-        "resize" : true
-    });
-
-    if(this.width !== null && this.height !== null){
-        this.resizeTo(this.width, this.height);
-    }else{
-        this.updateChildSize();
-    }
-    if(Roo.isIE){
-        this.el.dom.style.zoom = 1;
-    }
-    Roo.Resizable.superclass.constructor.call(this);
-};
-
-Roo.extend(Roo.Resizable, Roo.util.Observable, {
-        resizeChild : false,
-        adjustments : [0, 0],
-        minWidth : 5,
-        minHeight : 5,
-        maxWidth : 10000,
-        maxHeight : 10000,
-        enabled : true,
-        animate : false,
-        duration : .35,
-        dynamic : false,
-        handles : false,
-        multiDirectional : false,
-        disableTrackOver : false,
-        easing : 'easeOutStrong',
-        widthIncrement : 0,
-        heightIncrement : 0,
-        pinned : false,
-        width : null,
-        height : null,
-        preserveRatio : false,
-        transparent: false,
-        minX: 0,
-        minY: 0,
-        draggable: false,
+        OKCANCEL : {ok:true, cancel:true},
+        /**
+         * Button config that displays Yes, No and Cancel buttons
+         * @type Object
+         */
+        YESNOCANCEL : {yes:true, no:true, cancel:true},
 
         /**
-         * @cfg {String/HTMLElement/Element} constrainTo Constrain the resize to a particular element
+         * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
+         * @type Number
          */
-        constrainTo: undefined,
+        defaultTextHeight : 75,
         /**
-         * @cfg {Roo.lib.Region} resizeRegion Constrain the resize to a particular region
+         * The maximum width in pixels of the message box (defaults to 600)
+         * @type Number
          */
-        resizeRegion: undefined,
-
-
-    /**
-     * Perform a manual resize
-     * @param {Number} width
-     * @param {Number} height
-     */
-    resizeTo : function(width, height){
-        this.el.setSize(width, height);
-        this.updateChildSize();
-        this.fireEvent("resize", this, width, height, null);
-    },
-
-    // private
-    startSizing : function(e, handle){
-        this.fireEvent("beforeresize", this, e);
-        if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler
-
-            if(!this.overlay){
-                this.overlay = this.el.createProxy({tag: "div", cls: "x-resizable-overlay", html: "&#160;"});
-                this.overlay.unselectable();
-                this.overlay.enableDisplayMode("block");
-                this.overlay.on("mousemove", this.onMouseMove, this);
-                this.overlay.on("mouseup", this.onMouseUp, this);
-            }
-            this.overlay.setStyle("cursor", handle.el.getStyle("cursor"));
-
-            this.resizing = true;
-            this.startBox = this.el.getBox();
-            this.startPoint = e.getXY();
-            this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],
-                            (this.startBox.y + this.startBox.height) - this.startPoint[1]];
-
-            this.overlay.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
-            this.overlay.show();
+        maxWidth : 600,
+        /**
+         * The minimum width in pixels of the message box (defaults to 100)
+         * @type Number
+         */
+        minWidth : 100,
+        /**
+         * The minimum width in pixels of the message box if it is a progress-style dialog.  This is useful
+         * for setting a different minimum width than text-only dialogs may need (defaults to 250)
+         * @type Number
+         */
+        minProgressWidth : 250,
+        /**
+         * An object containing the default button text strings that can be overriden for localized language support.
+         * Supported properties are: ok, cancel, yes and no.
+         * Customize the default text like so: Roo.MessageBox.buttonText.yes = "S?";
+         * @type Object
+         */
+        buttonText : {
+            ok : "OK",
+            cancel : "Cancel",
+            yes : "Yes",
+            no : "No"
+        }
+    };
+}();
 
-            if(this.constrainTo) {
-                var ct = Roo.get(this.constrainTo);
-                this.resizeRegion = ct.getRegion().adjust(
-                    ct.getFrameWidth('t'),
-                    ct.getFrameWidth('l'),
-                    -ct.getFrameWidth('b'),
-                    -ct.getFrameWidth('r')
-                );
-            }
-
-            this.proxy.setStyle('visibility', 'hidden'); // workaround display none
-            this.proxy.show();
-            this.proxy.setBox(this.startBox);
-            if(!this.dynamic){
-                this.proxy.setStyle('visibility', 'visible');
-            }
+/**
+ * Shorthand for {@link Roo.MessageBox}
+ */
+Roo.Msg = Roo.MessageBox;/*
+ * 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.QuickTips
+ * Provides attractive and customizable tooltips for any element.
+ * @static
+ */
+Roo.QuickTips = function(){
+    var el, tipBody, tipBodyText, tipTitle, tm, cfg, close, tagEls = {}, esc, removeCls = null, bdLeft, bdRight;
+    var ce, bd, xy, dd;
+    var visible = false, disabled = true, inited = false;
+    var showProc = 1, hideProc = 1, dismissProc = 1, locks = [];
+    
+    var onOver = function(e){
+        if(disabled){
+            return;
         }
-    },
-
-    // private
-    onMouseDown : function(handle, e){
-        if(this.enabled){
-            e.stopEvent();
-            this.activeHandle = handle;
-            this.startSizing(e, handle);
+        var t = e.getTarget();
+        if(!t || t.nodeType !== 1 || t == document || t == document.body){
+            return;
         }
-    },
-
-    // private
-    onMouseUp : function(e){
-        var size = this.resizeElement();
-        this.resizing = false;
-        this.handleOut();
-        this.overlay.hide();
-        this.proxy.hide();
-        this.fireEvent("resize", this, size.width, size.height, e);
-    },
-
-    // private
-    updateChildSize : function(){
-        
-        if(this.resizeChild){
-            var el = this.el;
-            var child = this.resizeChild;
-            var adj = this.adjustments;
-            if(el.dom.offsetWidth){
-                var b = el.getSize(true);
-                child.setSize(b.width+adj[0], b.height+adj[1]);
-            }
-            // Second call here for IE
-            // The first call enables instant resizing and
-            // the second call corrects scroll bars if they
-            // exist
-            if(Roo.isIE){
-                setTimeout(function(){
-                    if(el.dom.offsetWidth){
-                        var b = el.getSize(true);
-                        child.setSize(b.width+adj[0], b.height+adj[1]);
-                    }
-                }, 10);
+        if(ce && t == ce.el){
+            clearTimeout(hideProc);
+            return;
+        }
+        if(t && tagEls[t.id]){
+            tagEls[t.id].el = t;
+            showProc = show.defer(tm.showDelay, tm, [tagEls[t.id]]);
+            return;
+        }
+        var ttp, et = Roo.fly(t);
+        var ns = cfg.namespace;
+        if(tm.interceptTitles && t.title){
+            ttp = t.title;
+            t.qtip = ttp;
+            t.removeAttribute("title");
+            e.preventDefault();
+        }else{
+            ttp = t.qtip || et.getAttributeNS(ns, cfg.attribute) || et.getAttributeNS(cfg.alt_namespace, cfg.attribute) ;
+        }
+        if(ttp){
+            showProc = show.defer(tm.showDelay, tm, [{
+                el: t, 
+                text: ttp.replace(/\\n/g,'<br/>'),
+                width: et.getAttributeNS(ns, cfg.width),
+                autoHide: et.getAttributeNS(ns, cfg.hide) != "user",
+                title: et.getAttributeNS(ns, cfg.title),
+           	    cls: et.getAttributeNS(ns, cfg.cls)
+            }]);
+        }
+    };
+    
+    var onOut = function(e){
+        clearTimeout(showProc);
+        var t = e.getTarget();
+        if(t && ce && ce.el == t && (tm.autoHide && ce.autoHide !== false)){
+            hideProc = setTimeout(hide, tm.hideDelay);
+        }
+    };
+    
+    var onMove = function(e){
+        if(disabled){
+            return;
+        }
+        xy = e.getXY();
+        xy[1] += 18;
+        if(tm.trackMouse && ce){
+            el.setXY(xy);
+        }
+    };
+    
+    var onDown = function(e){
+        clearTimeout(showProc);
+        clearTimeout(hideProc);
+        if(!e.within(el)){
+            if(tm.hideOnClick){
+                hide();
+                tm.disable();
+                tm.enable.defer(100, tm);
             }
         }
-    },
+    };
+    
+    var getPad = function(){
+        return 2;//bdLeft.getPadding('l')+bdRight.getPadding('r');
+    };
 
-    // private
-    snap : function(value, inc, min){
-        if(!inc || !value) {
-            return value;
+    var show = function(o){
+        if(disabled){
+            return;
         }
-        var newValue = value;
-        var m = value % inc;
-        if(m > 0){
-            if(m > (inc/2)){
-                newValue = value + (inc-m);
+        clearTimeout(dismissProc);
+        ce = o;
+        if(removeCls){ // in case manually hidden
+            el.removeClass(removeCls);
+            removeCls = null;
+        }
+        if(ce.cls){
+            el.addClass(ce.cls);
+            removeCls = ce.cls;
+        }
+        if(ce.title){
+            tipTitle.update(ce.title);
+            tipTitle.show();
+        }else{
+            tipTitle.update('');
+            tipTitle.hide();
+        }
+        el.dom.style.width  = tm.maxWidth+'px';
+        //tipBody.dom.style.width = '';
+        tipBodyText.update(o.text);
+        var p = getPad(), w = ce.width;
+        if(!w){
+            var td = tipBodyText.dom;
+            var aw = Math.max(td.offsetWidth, td.clientWidth, td.scrollWidth);
+            if(aw > tm.maxWidth){
+                w = tm.maxWidth;
+            }else if(aw < tm.minWidth){
+                w = tm.minWidth;
             }else{
-                newValue = value - m;
+                w = aw;
             }
         }
-        return Math.max(min, newValue);
-    },
-
-    // private
-    resizeElement : function(){
-        var box = this.proxy.getBox();
-        if(this.updateBox){
-            this.el.setBox(box, false, this.animate, this.duration, null, this.easing);
+        //tipBody.setWidth(w);
+        el.setWidth(parseInt(w, 10) + p);
+        if(ce.autoHide === false){
+            close.setDisplayed(true);
+            if(dd){
+                dd.unlock();
+            }
         }else{
-            this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);
+            close.setDisplayed(false);
+            if(dd){
+                dd.lock();
+            }
         }
-        this.updateChildSize();
-        if(!this.dynamic){
-            this.proxy.hide();
+        if(xy){
+            el.avoidY = xy[1]-18;
+            el.setXY(xy);
         }
-        return box;
-    },
-
-    // private
-    constrain : function(v, diff, m, mx){
-        if(v - diff < m){
-            diff = v - m;
-        }else if(v - diff > mx){
-            diff = mx - v;
+        if(tm.animate){
+            el.setOpacity(.1);
+            el.setStyle("visibility", "visible");
+            el.fadeIn({callback: afterShow});
+        }else{
+            afterShow();
         }
-        return diff;
-    },
+    };
+    
+    var afterShow = function(){
+        if(ce){
+            el.show();
+            esc.enable();
+            if(tm.autoDismiss && ce.autoHide !== false){
+                dismissProc = setTimeout(hide, tm.autoDismissDelay);
+            }
+        }
+    };
+    
+    var hide = function(noanim){
+        clearTimeout(dismissProc);
+        clearTimeout(hideProc);
+        ce = null;
+        if(el.isVisible()){
+            esc.disable();
+            if(noanim !== true && tm.animate){
+                el.fadeOut({callback: afterHide});
+            }else{
+                afterHide();
+            } 
+        }
+    };
+    
+    var afterHide = function(){
+        el.hide();
+        if(removeCls){
+            el.removeClass(removeCls);
+            removeCls = null;
+        }
+    };
+    
+    return {
+        /**
+        * @cfg {Number} minWidth
+        * The minimum width of the quick tip (defaults to 40)
+        */
+       minWidth : 40,
+        /**
+        * @cfg {Number} maxWidth
+        * The maximum width of the quick tip (defaults to 300)
+        */
+       maxWidth : 300,
+        /**
+        * @cfg {Boolean} interceptTitles
+        * True to automatically use the element's DOM title value if available (defaults to false)
+        */
+       interceptTitles : false,
+        /**
+        * @cfg {Boolean} trackMouse
+        * True to have the quick tip follow the mouse as it moves over the target element (defaults to false)
+        */
+       trackMouse : false,
+        /**
+        * @cfg {Boolean} hideOnClick
+        * True to hide the quick tip if the user clicks anywhere in the document (defaults to true)
+        */
+       hideOnClick : true,
+        /**
+        * @cfg {Number} showDelay
+        * Delay in milliseconds before the quick tip displays after the mouse enters the target element (defaults to 500)
+        */
+       showDelay : 500,
+        /**
+        * @cfg {Number} hideDelay
+        * Delay in milliseconds before the quick tip hides when autoHide = true (defaults to 200)
+        */
+       hideDelay : 200,
+        /**
+        * @cfg {Boolean} autoHide
+        * True to automatically hide the quick tip after the mouse exits the target element (defaults to true).
+        * Used in conjunction with hideDelay.
+        */
+       autoHide : true,
+        /**
+        * @cfg {Boolean}
+        * True to automatically hide the quick tip after a set period of time, regardless of the user's actions
+        * (defaults to true).  Used in conjunction with autoDismissDelay.
+        */
+       autoDismiss : true,
+        /**
+        * @cfg {Number}
+        * Delay in milliseconds before the quick tip hides when autoDismiss = true (defaults to 5000)
+        */
+       autoDismissDelay : 5000,
+       /**
+        * @cfg {Boolean} animate
+        * True to turn on fade animation. Defaults to false (ClearType/scrollbar flicker issues in IE7).
+        */
+       animate : false,
 
-    // private
-    onMouseMove : function(e){
-        
-        if(this.enabled){
-            try{// try catch so if something goes wrong the user doesn't get hung
+       /**
+        * @cfg {String} title
+        * Title text to display (defaults to '').  This can be any valid HTML markup.
+        */
+        title: '',
+       /**
+        * @cfg {String} text
+        * Body text to display (defaults to '').  This can be any valid HTML markup.
+        */
+        text : '',
+       /**
+        * @cfg {String} cls
+        * A CSS class to apply to the base quick tip element (defaults to '').
+        */
+        cls : '',
+       /**
+        * @cfg {Number} width
+        * Width in pixels of the quick tip (defaults to auto).  Width will be ignored if it exceeds the bounds of
+        * minWidth or maxWidth.
+        */
+        width : null,
 
-            if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {
-            	return;
-            }
+    /**
+     * Initialize and enable QuickTips for first use.  This should be called once before the first attempt to access
+     * or display QuickTips in a page.
+     */
+       init : function(){
+          tm = Roo.QuickTips;
+          cfg = tm.tagConfig;
+          if(!inited){
+              if(!Roo.isReady){ // allow calling of init() before onReady
+                  Roo.onReady(Roo.QuickTips.init, Roo.QuickTips);
+                  return;
+              }
+              el = new Roo.Layer({cls:"x-tip", shadow:"drop", shim: true, constrain:true, shadowOffset:4});
+              el.fxDefaults = {stopFx: true};
+              // maximum custom styling
+              //el.update('<div class="x-tip-top-left"><div class="x-tip-top-right"><div class="x-tip-top"></div></div></div><div class="x-tip-bd-left"><div class="x-tip-bd-right"><div class="x-tip-bd"><div class="x-tip-close"></div><h3></h3><div class="x-tip-bd-inner"></div><div class="x-clear"></div></div></div></div><div class="x-tip-ft-left"><div class="x-tip-ft-right"><div class="x-tip-ft"></div></div></div>');
+              el.update('<div class="x-tip-bd"><div class="x-tip-close"></div><h3></h3><div class="x-tip-bd-inner"></div><div class="x-clear"></div></div>');              
+              tipTitle = el.child('h3');
+              tipTitle.enableDisplayMode("block");
+              tipBody = el.child('div.x-tip-bd');
+              tipBodyText = el.child('div.x-tip-bd-inner');
+              //bdLeft = el.child('div.x-tip-bd-left');
+              //bdRight = el.child('div.x-tip-bd-right');
+              close = el.child('div.x-tip-close');
+              close.enableDisplayMode("block");
+              close.on("click", hide);
+              var d = Roo.get(document);
+              d.on("mousedown", onDown);
+              d.on("mouseover", onOver);
+              d.on("mouseout", onOut);
+              d.on("mousemove", onMove);
+              esc = d.addKeyListener(27, hide);
+              esc.disable();
+              if(Roo.dd.DD){
+                  dd = el.initDD("default", null, {
+                      onDrag : function(){
+                          el.sync();  
+                      }
+                  });
+                  dd.setHandleElId(tipTitle.id);
+                  dd.lock();
+              }
+              inited = true;
+          }
+          this.enable(); 
+       },
 
-            //var curXY = this.startPoint;
-            var curSize = this.curSize || this.startBox;
-            var x = this.startBox.x, y = this.startBox.y;
-            var ox = x, oy = y;
-            var w = curSize.width, h = curSize.height;
-            var ow = w, oh = h;
-            var mw = this.minWidth, mh = this.minHeight;
-            var mxw = this.maxWidth, mxh = this.maxHeight;
-            var wi = this.widthIncrement;
-            var hi = this.heightIncrement;
+    /**
+     * Configures a new quick tip instance and assigns it to a target element.  The following config options
+     * are supported:
+     * <pre>
+Property    Type                   Description
+----------  ---------------------  ------------------------------------------------------------------------
+target      Element/String/Array   An Element, id or array of ids that this quick tip should be tied to
+     * </ul>
+     * @param {Object} config The config object
+     */
+       register : function(config){
+           var cs = config instanceof Array ? config : arguments;
+           for(var i = 0, len = cs.length; i < len; i++) {
+               var c = cs[i];
+               var target = c.target;
+               if(target){
+                   if(target instanceof Array){
+                       for(var j = 0, jlen = target.length; j < jlen; j++){
+                           tagEls[target[j]] = c;
+                       }
+                   }else{
+                       tagEls[typeof target == 'string' ? target : Roo.id(target)] = c;
+                   }
+               }
+           }
+       },
 
-            var eventXY = e.getXY();
-            var diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0]));
-            var diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1]));
+    /**
+     * Removes this quick tip from its element and destroys it.
+     * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.
+     */
+       unregister : function(el){
+           delete tagEls[Roo.id(el)];
+       },
 
-            var pos = this.activeHandle.position;
+    /**
+     * Enable this quick tip.
+     */
+       enable : function(){
+           if(inited && disabled){
+               locks.pop();
+               if(locks.length < 1){
+                   disabled = false;
+               }
+           }
+       },
 
-            switch(pos){
-                case "east":
-                    w += diffX;
-                    w = Math.min(Math.max(mw, w), mxw);
-                    break;
-             
-                case "south":
-                    h += diffY;
-                    h = Math.min(Math.max(mh, h), mxh);
-                    break;
-                case "southeast":
-                    w += diffX;
-                    h += diffY;
-                    w = Math.min(Math.max(mw, w), mxw);
-                    h = Math.min(Math.max(mh, h), mxh);
-                    break;
-                case "north":
-                    diffY = this.constrain(h, diffY, mh, mxh);
-                    y += diffY;
-                    h -= diffY;
-                    break;
-                case "hdrag":
-                    
-                    if (wi) {
-                        var adiffX = Math.abs(diffX);
-                        var sub = (adiffX % wi); // how much 
-                        if (sub > (wi/2)) { // far enough to snap
-                            diffX = (diffX > 0) ? diffX-sub + wi : diffX+sub - wi;
-                        } else {
-                            // remove difference.. 
-                            diffX = (diffX > 0) ? diffX-sub : diffX+sub;
-                        }
-                    }
-                    x += diffX;
-                    x = Math.max(this.minX, x);
-                    break;
-                case "west":
-                    diffX = this.constrain(w, diffX, mw, mxw);
-                    x += diffX;
-                    w -= diffX;
-                    break;
-                case "northeast":
-                    w += diffX;
-                    w = Math.min(Math.max(mw, w), mxw);
-                    diffY = this.constrain(h, diffY, mh, mxh);
-                    y += diffY;
-                    h -= diffY;
-                    break;
-                case "northwest":
-                    diffX = this.constrain(w, diffX, mw, mxw);
-                    diffY = this.constrain(h, diffY, mh, mxh);
-                    y += diffY;
-                    h -= diffY;
-                    x += diffX;
-                    w -= diffX;
-                    break;
-               case "southwest":
-                    diffX = this.constrain(w, diffX, mw, mxw);
-                    h += diffY;
-                    h = Math.min(Math.max(mh, h), mxh);
-                    x += diffX;
-                    w -= diffX;
-                    break;
-            }
+    /**
+     * Disable this quick tip.
+     */
+       disable : function(){
+          disabled = true;
+          clearTimeout(showProc);
+          clearTimeout(hideProc);
+          clearTimeout(dismissProc);
+          if(ce){
+              hide(true);
+          }
+          locks.push(1);
+       },
 
-            var sw = this.snap(w, wi, mw);
-            var sh = this.snap(h, hi, mh);
-            if(sw != w || sh != h){
-                switch(pos){
-                    case "northeast":
-                        y -= sh - h;
-                    break;
-                    case "north":
-                        y -= sh - h;
-                        break;
-                    case "southwest":
-                        x -= sw - w;
-                    break;
-                    case "west":
-                        x -= sw - w;
-                        break;
-                    case "northwest":
-                        x -= sw - w;
-                        y -= sh - h;
-                    break;
-                }
-                w = sw;
-                h = sh;
-            }
+    /**
+     * Returns true if the quick tip is enabled, else false.
+     */
+       isEnabled : function(){
+            return !disabled;
+       },
 
-            if(this.preserveRatio){
-                switch(pos){
-                    case "southeast":
-                    case "east":
-                        h = oh * (w/ow);
-                        h = Math.min(Math.max(mh, h), mxh);
-                        w = ow * (h/oh);
-                       break;
-                    case "south":
-                        w = ow * (h/oh);
-                        w = Math.min(Math.max(mw, w), mxw);
-                        h = oh * (w/ow);
-                        break;
-                    case "northeast":
-                        w = ow * (h/oh);
-                        w = Math.min(Math.max(mw, w), mxw);
-                        h = oh * (w/ow);
-                    break;
-                    case "north":
-                        var tw = w;
-                        w = ow * (h/oh);
-                        w = Math.min(Math.max(mw, w), mxw);
-                        h = oh * (w/ow);
-                        x += (tw - w) / 2;
-                        break;
-                    case "southwest":
-                        h = oh * (w/ow);
-                        h = Math.min(Math.max(mh, h), mxh);
-                        var tw = w;
-                        w = ow * (h/oh);
-                        x += tw - w;
-                        break;
-                    case "west":
-                        var th = h;
-                        h = oh * (w/ow);
-                        h = Math.min(Math.max(mh, h), mxh);
-                        y += (th - h) / 2;
-                        var tw = w;
-                        w = ow * (h/oh);
-                        x += tw - w;
-                       break;
-                    case "northwest":
-                        var tw = w;
-                        var th = h;
-                        h = oh * (w/ow);
-                        h = Math.min(Math.max(mh, h), mxh);
-                        w = ow * (h/oh);
-                        y += th - h;
-                        x += tw - w;
-                       break;
+        // private
+       tagConfig : {
+           namespace : "roo", // was ext?? this may break..
+           alt_namespace : "ext",
+           attribute : "qtip",
+           width : "width",
+           target : "target",
+           title : "qtitle",
+           hide : "hide",
+           cls : "qclass"
+       }
+   };
+}();
 
-                }
-            }
-            if (pos == 'hdrag') {
-                w = ow;
-            }
-            this.proxy.setBounds(x, y, w, h);
-            if(this.dynamic){
-                this.resizeElement();
-            }
-            }catch(e){}
-        }
-        this.fireEvent("resizing", this, x, y, w, h, e);
-    },
+// backwards compat
+Roo.QuickTips.tips = Roo.QuickTips.register;/*
+ * 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.tree.TreePanel
+ * @extends Roo.data.Tree
+ * @cfg {Roo.tree.TreeNode} root The root node
+ * @cfg {Boolean} rootVisible false to hide the root node (defaults to true)
+ * @cfg {Boolean} lines false to disable tree lines (defaults to true)
+ * @cfg {Boolean} enableDD true to enable drag and drop
+ * @cfg {Boolean} enableDrag true to enable just drag
+ * @cfg {Boolean} enableDrop true to enable just drop
+ * @cfg {Object} dragConfig Custom config to pass to the {@link Roo.tree.TreeDragZone} instance
+ * @cfg {Object} dropConfig Custom config to pass to the {@link Roo.tree.TreeDropZone} instance
+ * @cfg {String} ddGroup The DD group this TreePanel belongs to
+ * @cfg {String} ddAppendOnly True if the tree should only allow append drops (use for trees which are sorted)
+ * @cfg {Boolean} ddScroll true to enable YUI body scrolling
+ * @cfg {Boolean} containerScroll true to register this container with ScrollManager
+ * @cfg {Boolean} hlDrop false to disable node highlight on drop (defaults to the value of Roo.enableFx)
+ * @cfg {String} hlColor The color of the node highlight (defaults to C3DAF9)
+ * @cfg {Boolean} animate true to enable animated expand/collapse (defaults to the value of Roo.enableFx)
+ * @cfg {Boolean} singleExpand true if only 1 node per branch may be expanded
+ * @cfg {Boolean} selModel A tree selection model to use with this TreePanel (defaults to a {@link Roo.tree.DefaultSelectionModel})
+ * @cfg {Roo.tree.TreeLoader} loader A TreeLoader for use with this TreePanel
+ * @cfg {Roo.tree.TreeEditor} editor The TreeEditor to display when clicked.
+ * @cfg {String} pathSeparator The token used to separate sub-paths in path strings (defaults to '/')
+ * @cfg {Function} renderer DEPRECATED - use TreeLoader:create event / Sets the rendering (formatting) function for the nodes. to return HTML markup for the tree view. The render function is called with  the following parameters:<ul><li>The {Object} The data for the node.</li></ul>
+ * @cfg {Function} rendererTip DEPRECATED - use TreeLoader:create event / Sets the rendering (formatting) function for the nodes hovertip to return HTML markup for the tree view. The render function is called with  the following parameters:<ul><li>The {Object} The data for the node.</li></ul>
+ * 
+ * @constructor
+ * @param {String/HTMLElement/Element} el The container element
+ * @param {Object} config
+ */
+Roo.tree.TreePanel = function(el, config){
+    var root = false;
+    var loader = false;
+    if (config.root) {
+        root = config.root;
+        delete config.root;
+    }
+    if (config.loader) {
+        loader = config.loader;
+        delete config.loader;
+    }
+    
+    Roo.apply(this, config);
+    Roo.tree.TreePanel.superclass.constructor.call(this);
+    this.el = Roo.get(el);
+    this.el.addClass('x-tree');
+    //console.log(root);
+    if (root) {
+        this.setRootNode( Roo.factory(root, Roo.tree));
+    }
+    if (loader) {
+        this.loader = Roo.factory(loader, Roo.tree);
+    }
+   /**
+    * Read-only. The id of the container element becomes this TreePanel's id.
+    */
+    this.id = this.el.id;
+    this.addEvents({
+        /**
+        * @event beforeload
+        * Fires before a node is loaded, return false to cancel
+        * @param {Node} node The node being loaded
+        */
+        "beforeload" : true,
+        /**
+        * @event load
+        * Fires when a node is loaded
+        * @param {Node} node The node that was loaded
+        */
+        "load" : true,
+        /**
+        * @event textchange
+        * Fires when the text for a node is changed
+        * @param {Node} node The node
+        * @param {String} text The new text
+        * @param {String} oldText The old text
+        */
+        "textchange" : true,
+        /**
+        * @event beforeexpand
+        * Fires before a node is expanded, return false to cancel.
+        * @param {Node} node The node
+        * @param {Boolean} deep
+        * @param {Boolean} anim
+        */
+        "beforeexpand" : true,
+        /**
+        * @event beforecollapse
+        * Fires before a node is collapsed, return false to cancel.
+        * @param {Node} node The node
+        * @param {Boolean} deep
+        * @param {Boolean} anim
+        */
+        "beforecollapse" : true,
+        /**
+        * @event expand
+        * Fires when a node is expanded
+        * @param {Node} node The node
+        */
+        "expand" : true,
+        /**
+        * @event disabledchange
+        * Fires when the disabled status of a node changes
+        * @param {Node} node The node
+        * @param {Boolean} disabled
+        */
+        "disabledchange" : true,
+        /**
+        * @event collapse
+        * Fires when a node is collapsed
+        * @param {Node} node The node
+        */
+        "collapse" : true,
+        /**
+        * @event beforeclick
+        * Fires before click processing on a node. Return false to cancel the default action.
+        * @param {Node} node The node
+        * @param {Roo.EventObject} e The event object
+        */
+        "beforeclick":true,
+        /**
+        * @event checkchange
+        * Fires when a node with a checkbox's checked property changes
+        * @param {Node} this This node
+        * @param {Boolean} checked
+        */
+        "checkchange":true,
+        /**
+        * @event click
+        * Fires when a node is clicked
+        * @param {Node} node The node
+        * @param {Roo.EventObject} e The event object
+        */
+        "click":true,
+        /**
+        * @event dblclick
+        * Fires when a node is double clicked
+        * @param {Node} node The node
+        * @param {Roo.EventObject} e The event object
+        */
+        "dblclick":true,
+        /**
+        * @event contextmenu
+        * Fires when a node is right clicked
+        * @param {Node} node The node
+        * @param {Roo.EventObject} e The event object
+        */
+        "contextmenu":true,
+        /**
+        * @event beforechildrenrendered
+        * Fires right before the child nodes for a node are rendered
+        * @param {Node} node The node
+        */
+        "beforechildrenrendered":true,
+        /**
+        * @event startdrag
+        * Fires when a node starts being dragged
+        * @param {Roo.tree.TreePanel} this
+        * @param {Roo.tree.TreeNode} node
+        * @param {event} e The raw browser event
+        */ 
+       "startdrag" : true,
+       /**
+        * @event enddrag
+        * Fires when a drag operation is complete
+        * @param {Roo.tree.TreePanel} this
+        * @param {Roo.tree.TreeNode} node
+        * @param {event} e The raw browser event
+        */
+       "enddrag" : true,
+       /**
+        * @event dragdrop
+        * Fires when a dragged node is dropped on a valid DD target
+        * @param {Roo.tree.TreePanel} this
+        * @param {Roo.tree.TreeNode} node
+        * @param {DD} dd The dd it was dropped on
+        * @param {event} e The raw browser event
+        */
+       "dragdrop" : true,
+       /**
+        * @event beforenodedrop
+        * Fires when a DD object is dropped on a node in this tree for preprocessing. Return false to cancel the drop. The dropEvent
+        * passed to handlers has the following properties:<br />
+        * <ul style="padding:5px;padding-left:16px;">
+        * <li>tree - The TreePanel</li>
+        * <li>target - The node being targeted for the drop</li>
+        * <li>data - The drag data from the drag source</li>
+        * <li>point - The point of the drop - append, above or below</li>
+        * <li>source - The drag source</li>
+        * <li>rawEvent - Raw mouse event</li>
+        * <li>dropNode - Drop node(s) provided by the source <b>OR</b> you can supply node(s)
+        * to be inserted by setting them on this object.</li>
+        * <li>cancel - Set this to true to cancel the drop.</li>
+        * </ul>
+        * @param {Object} dropEvent
+        */
+       "beforenodedrop" : true,
+       /**
+        * @event nodedrop
+        * Fires after a DD object is dropped on a node in this tree. The dropEvent
+        * passed to handlers has the following properties:<br />
+        * <ul style="padding:5px;padding-left:16px;">
+        * <li>tree - The TreePanel</li>
+        * <li>target - The node being targeted for the drop</li>
+        * <li>data - The drag data from the drag source</li>
+        * <li>point - The point of the drop - append, above or below</li>
+        * <li>source - The drag source</li>
+        * <li>rawEvent - Raw mouse event</li>
+        * <li>dropNode - Dropped node(s).</li>
+        * </ul>
+        * @param {Object} dropEvent
+        */
+       "nodedrop" : true,
+        /**
+        * @event nodedragover
+        * Fires when a tree node is being targeted for a drag drop, return false to signal drop not allowed. The dragOverEvent
+        * passed to handlers has the following properties:<br />
+        * <ul style="padding:5px;padding-left:16px;">
+        * <li>tree - The TreePanel</li>
+        * <li>target - The node being targeted for the drop</li>
+        * <li>data - The drag data from the drag source</li>
+        * <li>point - The point of the drop - append, above or below</li>
+        * <li>source - The drag source</li>
+        * <li>rawEvent - Raw mouse event</li>
+        * <li>dropNode - Drop node(s) provided by the source.</li>
+        * <li>cancel - Set this to true to signal drop not allowed.</li>
+        * </ul>
+        * @param {Object} dragOverEvent
+        */
+       "nodedragover" : true,
+       /**
+        * @event appendnode
+        * Fires when append node to the tree
+        * @param {Roo.tree.TreePanel} this
+        * @param {Roo.tree.TreeNode} node
+        * @param {Number} index The index of the newly appended node
+        */
+       "appendnode" : true
+        
+    });
+    if(this.singleExpand){
+       this.on("beforeexpand", this.restrictExpand, this);
+    }
+    if (this.editor) {
+        this.editor.tree = this;
+        this.editor = Roo.factory(this.editor, Roo.tree);
+    }
+    
+    if (this.selModel) {
+        this.selModel = Roo.factory(this.selModel, Roo.tree);
+    }
+   
+};
+Roo.extend(Roo.tree.TreePanel, Roo.data.Tree, {
+    rootVisible : true,
+    animate: Roo.enableFx,
+    lines : true,
+    enableDD : false,
+    hlDrop : Roo.enableFx,
+  
+    renderer: false,
+    
+    rendererTip: false,
     // private
-    handleOver : function(){
-        if(this.enabled){
-            this.el.addClass("x-resizable-over");
+    restrictExpand : function(node){
+        var p = node.parentNode;
+        if(p){
+            if(p.expandedChild && p.expandedChild.parentNode == p){
+                p.expandedChild.collapse();
+            }
+            p.expandedChild = node;
         }
-    },
-
-    // private
-    handleOut : function(){
-        if(!this.resizing){
-            this.el.removeClass("x-resizable-over");
+    },
+
+    // private override
+    setRootNode : function(node){
+        Roo.tree.TreePanel.superclass.setRootNode.call(this, node);
+        if(!this.rootVisible){
+            node.ui = new Roo.tree.RootTreeNodeUI(node);
         }
+        return node;
     },
 
     /**
-     * Returns the element this component is bound to.
-     * @return {Roo.Element}
+     * Returns the container element for this TreePanel
      */
     getEl : function(){
         return this.el;
     },
 
     /**
-     * Returns the resizeChild element (or null).
-     * @return {Roo.Element}
+     * Returns the default TreeLoader for this TreePanel
      */
-    getResizeChild : function(){
-        return this.resizeChild;
+    getLoader : function(){
+        return this.loader;
     },
-    groupHandler : function()
-    {
-        
+
+    /**
+     * Expand all nodes
+     */
+    expandAll : function(){
+        this.root.expand(true);
     },
+
     /**
-     * Destroys this resizable. If the element was wrapped and
-     * removeEl is not true then the element remains.
-     * @param {Boolean} removeEl (optional) true to remove the element from the DOM
+     * Collapse all nodes
      */
-    destroy : function(removeEl){
-        this.proxy.remove();
-        if(this.overlay){
-            this.overlay.removeAllListeners();
-            this.overlay.remove();
+    collapseAll : function(){
+        this.root.collapse(true);
+    },
+
+    /**
+     * Returns the selection model used by this TreePanel
+     */
+    getSelectionModel : function(){
+        if(!this.selModel){
+            this.selModel = new Roo.tree.DefaultSelectionModel();
         }
-        var ps = Roo.Resizable.positions;
-        for(var k in ps){
-            if(typeof ps[k] != "function" && this[ps[k]]){
-                var h = this[ps[k]];
-                h.el.removeAllListeners();
-                h.el.remove();
+        return this.selModel;
+    },
+
+    /**
+     * Retrieve an array of checked nodes, or an array of a specific attribute of checked nodes (e.g. "id")
+     * @param {String} attribute (optional) Defaults to null (return the actual nodes)
+     * @param {TreeNode} startNode (optional) The node to start from, defaults to the root
+     * @return {Array}
+     */
+    getChecked : function(a, startNode){
+        startNode = startNode || this.root;
+        var r = [];
+        var f = function(){
+            if(this.attributes.checked){
+                r.push(!a ? this : (a == 'id' ? this.id : this.attributes[a]));
             }
         }
-        if(removeEl){
-            this.el.update("");
-            this.el.remove();
-        }
-    }
-});
-
-// private
-// hash to map config positions to true positions
-Roo.Resizable.positions = {
-    n: "north", s: "south", e: "east", w: "west", se: "southeast", sw: "southwest", nw: "northwest", ne: "northeast", 
-    hd: "hdrag"
-};
-
-// private
-Roo.Resizable.Handle = function(rz, pos, disableTrackOver, transparent){
-    if(!this.tpl){
-        // only initialize the template if resizable is used
-        var tpl = Roo.DomHelper.createTemplate(
-            {tag: "div", cls: "x-resizable-handle x-resizable-handle-{0}"}
-        );
-        tpl.compile();
-        Roo.Resizable.Handle.prototype.tpl = tpl;
-    }
-    this.position = pos;
-    this.rz = rz;
-    // show north drag fro topdra
-    var handlepos = pos == 'hdrag' ? 'north' : pos;
-    
-    this.el = this.tpl.append(rz.el.dom, [handlepos], true);
-    if (pos == 'hdrag') {
-        this.el.setStyle('cursor', 'pointer');
-    }
-    this.el.unselectable();
-    if(transparent){
-        this.el.setOpacity(0);
-    }
-    this.el.on("mousedown", this.onMouseDown, this);
-    if(!disableTrackOver){
-        this.el.on("mouseover", this.onMouseOver, this);
-        this.el.on("mouseout", this.onMouseOut, this);
-    }
-};
+        startNode.cascade(f);
+        return r;
+    },
 
-// private
-Roo.Resizable.Handle.prototype = {
-    afterResize : function(rz){
-        Roo.log('after?');
-        // do nothing
+    /**
+     * Expands a specified path in this TreePanel. A path can be retrieved from a node with {@link Roo.data.Node#getPath}
+     * @param {String} path
+     * @param {String} attr (optional) The attribute used in the path (see {@link Roo.data.Node#getPath} for more info)
+     * @param {Function} callback (optional) The callback to call when the expand is complete. The callback will be called with
+     * (bSuccess, oLastNode) where bSuccess is if the expand was successful and oLastNode is the last node that was expanded.
+     */
+    expandPath : function(path, attr, callback){
+        attr = attr || "id";
+        var keys = path.split(this.pathSeparator);
+        var curNode = this.root;
+        if(curNode.attributes[attr] != keys[1]){ // invalid root
+            if(callback){
+                callback(false, null);
+            }
+            return;
+        }
+        var index = 1;
+        var f = function(){
+            if(++index == keys.length){
+                if(callback){
+                    callback(true, curNode);
+                }
+                return;
+            }
+            var c = curNode.findChild(attr, keys[index]);
+            if(!c){
+                if(callback){
+                    callback(false, curNode);
+                }
+                return;
+            }
+            curNode = c;
+            c.expand(false, false, f);
+        };
+        curNode.expand(false, false, f);
     },
-    // private
-    onMouseDown : function(e){
-        this.rz.onMouseDown(this, e);
+
+    /**
+     * Selects the node in this tree at the specified path. A path can be retrieved from a node with {@link Roo.data.Node#getPath}
+     * @param {String} path
+     * @param {String} attr (optional) The attribute used in the path (see {@link Roo.data.Node#getPath} for more info)
+     * @param {Function} callback (optional) The callback to call when the selection is complete. The callback will be called with
+     * (bSuccess, oSelNode) where bSuccess is if the selection was successful and oSelNode is the selected node.
+     */
+    selectPath : function(path, attr, callback){
+        attr = attr || "id";
+        var keys = path.split(this.pathSeparator);
+        var v = keys.pop();
+        if(keys.length > 0){
+            var f = function(success, node){
+                if(success && node){
+                    var n = node.findChild(attr, v);
+                    if(n){
+                        n.select();
+                        if(callback){
+                            callback(true, n);
+                        }
+                    }else if(callback){
+                        callback(false, n);
+                    }
+                }else{
+                    if(callback){
+                        callback(false, n);
+                    }
+                }
+            };
+            this.expandPath(keys.join(this.pathSeparator), attr, f);
+        }else{
+            this.root.select();
+            if(callback){
+                callback(true, this.root);
+            }
+        }
     },
-    // private
-    onMouseOver : function(e){
-        this.rz.handleOver(this, e);
+
+    getTreeEl : function(){
+        return this.el;
     },
-    // private
-    onMouseOut : function(e){
-        this.rz.handleOut(this, e);
+
+    /**
+     * Trigger rendering of this TreePanel
+     */
+    render : function(){
+        if (this.innerCt) {
+            return this; // stop it rendering more than once!!
+        }
+        
+        this.innerCt = this.el.createChild({tag:"ul",
+               cls:"x-tree-root-ct " +
+               (this.lines ? "x-tree-lines" : "x-tree-no-lines")});
+
+        if(this.containerScroll){
+            Roo.dd.ScrollManager.register(this.el);
+        }
+        if((this.enableDD || this.enableDrop) && !this.dropZone){
+           /**
+            * The dropZone used by this tree if drop is enabled
+            * @type Roo.tree.TreeDropZone
+            */
+             this.dropZone = new Roo.tree.TreeDropZone(this, this.dropConfig || {
+               ddGroup: this.ddGroup || "TreeDD", appendOnly: this.ddAppendOnly === true
+           });
+        }
+        if((this.enableDD || this.enableDrag) && !this.dragZone){
+           /**
+            * The dragZone used by this tree if drag is enabled
+            * @type Roo.tree.TreeDragZone
+            */
+            this.dragZone = new Roo.tree.TreeDragZone(this, this.dragConfig || {
+               ddGroup: this.ddGroup || "TreeDD",
+               scroll: this.ddScroll
+           });
+        }
+        this.getSelectionModel().init(this);
+        if (!this.root) {
+            Roo.log("ROOT not set in tree");
+            return this;
+        }
+        this.root.render();
+        if(!this.rootVisible){
+            this.root.renderChildren();
+        }
+        return this;
     }
-};/*
+});/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -13403,2143 +11733,1774 @@ Roo.Resizable.Handle.prototype = {
  * Fork - LGPL
  * <script type="text/javascript">
  */
+ 
 
 /**
- * @class Roo.Editor
- * @extends Roo.Component
- * A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic.
- * @constructor
- * Create a new Editor
- * @param {Roo.form.Field} field The Field object (or descendant)
- * @param {Object} config The config object
+ * @class Roo.tree.DefaultSelectionModel
+ * @extends Roo.util.Observable
+ * The default single selection for a TreePanel.
+ * @param {Object} cfg Configuration
  */
-Roo.Editor = function(field, config){
-    Roo.Editor.superclass.constructor.call(this, config);
-    this.field = field;
-    this.addEvents({
-        /**
-	     * @event beforestartedit
-	     * Fires when editing is initiated, but before the value changes.  Editing can be canceled by returning
-	     * false from the handler of this event.
-	     * @param {Editor} this
-	     * @param {Roo.Element} boundEl The underlying element bound to this editor
-	     * @param {Mixed} value The field value being set
-	     */
-        "beforestartedit" : true,
-        /**
-	     * @event startedit
-	     * Fires when this editor is displayed
-	     * @param {Roo.Element} boundEl The underlying element bound to this editor
-	     * @param {Mixed} value The starting field value
-	     */
-        "startedit" : true,
-        /**
-	     * @event beforecomplete
-	     * Fires after a change has been made to the field, but before the change is reflected in the underlying
-	     * field.  Saving the change to the field can be canceled by returning false from the handler of this event.
-	     * Note that if the value has not changed and ignoreNoChange = true, the editing will still end but this
-	     * event will not fire since no edit actually occurred.
-	     * @param {Editor} this
-	     * @param {Mixed} value The current field value
-	     * @param {Mixed} startValue The original field value
-	     */
-        "beforecomplete" : true,
-        /**
-	     * @event complete
-	     * Fires after editing is complete and any changed value has been written to the underlying field.
-	     * @param {Editor} this
-	     * @param {Mixed} value The current field value
-	     * @param {Mixed} startValue The original field value
-	     */
-        "complete" : true,
-        /**
-         * @event specialkey
-         * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check
-         * {@link Roo.EventObject#getKey} to determine which key was pressed.
-         * @param {Roo.form.Field} this
-         * @param {Roo.EventObject} e The event object
-         */
-        "specialkey" : true
-    });
-};
+Roo.tree.DefaultSelectionModel = function(cfg){
+   this.selNode = null;
+   
+   
+   
+   this.addEvents({
+       /**
+        * @event selectionchange
+        * Fires when the selected node changes
+        * @param {DefaultSelectionModel} this
+        * @param {TreeNode} node the new selection
+        */
+       "selectionchange" : true,
 
-Roo.extend(Roo.Editor, Roo.Component, {
-    /**
-     * @cfg {Boolean/String} autosize
-     * True for the editor to automatically adopt the size of the underlying field, "width" to adopt the width only,
-     * or "height" to adopt the height only (defaults to false)
-     */
-    /**
-     * @cfg {Boolean} revertInvalid
-     * True to automatically revert the field value and cancel the edit when the user completes an edit and the field
-     * validation fails (defaults to true)
-     */
-    /**
-     * @cfg {Boolean} ignoreNoChange
-     * True to skip the the edit completion process (no save, no events fired) if the user completes an edit and
-     * the value has not changed (defaults to false).  Applies only to string values - edits for other data types
-     * will never be ignored.
-     */
-    /**
-     * @cfg {Boolean} hideEl
-     * False to keep the bound element visible while the editor is displayed (defaults to true)
-     */
-    /**
-     * @cfg {Mixed} value
-     * The data value of the underlying field (defaults to "")
-     */
-    value : "",
-    /**
-     * @cfg {String} alignment
-     * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to "c-c?").
-     */
-    alignment: "c-c?",
-    /**
-     * @cfg {Boolean/String} shadow "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop"
-     * for bottom-right shadow (defaults to "frame")
-     */
-    shadow : "frame",
-    /**
-     * @cfg {Boolean} constrain True to constrain the editor to the viewport
-     */
-    constrain : false,
-    /**
-     * @cfg {Boolean} completeOnEnter True to complete the edit when the enter key is pressed (defaults to false)
-     */
-    completeOnEnter : false,
-    /**
-     * @cfg {Boolean} cancelOnEsc True to cancel the edit when the escape key is pressed (defaults to false)
-     */
-    cancelOnEsc : false,
-    /**
-     * @cfg {Boolean} updateEl True to update the innerHTML of the bound element when the update completes (defaults to false)
-     */
-    updateEl : false,
+       /**
+        * @event beforeselect
+        * Fires before the selected node changes, return false to cancel the change
+        * @param {DefaultSelectionModel} this
+        * @param {TreeNode} node the new selection
+        * @param {TreeNode} node the old selection
+        */
+       "beforeselect" : true
+   });
+   
+    Roo.tree.DefaultSelectionModel.superclass.constructor.call(this,cfg);
+};
 
-    // private
-    onRender : function(ct, position){
-        this.el = new Roo.Layer({
-            shadow: this.shadow,
-            cls: "x-editor",
-            parentEl : ct,
-            shim : this.shim,
-            shadowOffset:4,
-            id: this.id,
-            constrain: this.constrain
-        });
-        this.el.setStyle("overflow", Roo.isGecko ? "auto" : "hidden");
-        if(this.field.msgTarget != 'title'){
-            this.field.msgTarget = 'qtip';
-        }
-        this.field.render(this.el);
-        if(Roo.isGecko){
-            this.field.el.dom.setAttribute('autocomplete', 'off');
-        }
-        this.field.on("specialkey", this.onSpecialKey, this);
-        if(this.swallowKeys){
-            this.field.el.swallowEvent(['keydown','keypress']);
-        }
-        this.field.show();
-        this.field.on("blur", this.onBlur, this);
-        if(this.field.grow){
-            this.field.on("autosize", this.el.sync,  this.el, {delay:1});
-        }
+Roo.extend(Roo.tree.DefaultSelectionModel, Roo.util.Observable, {
+    init : function(tree){
+        this.tree = tree;
+        tree.getTreeEl().on("keydown", this.onKeyDown, this);
+        tree.on("click", this.onNodeClick, this);
     },
-
-    onSpecialKey : function(field, e)
-    {
-        //Roo.log('editor onSpecialKey');
-        if(this.completeOnEnter && e.getKey() == e.ENTER){
-            e.stopEvent();
-            this.completeEdit();
-            return;
-        }
-        // do not fire special key otherwise it might hide close the editor...
-        if(e.getKey() == e.ENTER){    
+    
+    onNodeClick : function(node, e){
+        if (e.ctrlKey && this.selNode == node)  {
+            this.unselect(node);
             return;
         }
-        if(this.cancelOnEsc && e.getKey() == e.ESC){
-            this.cancelEdit();
-            return;
-        } 
-        this.fireEvent('specialkey', field, e);
-    
+        this.select(node);
     },
-
+    
     /**
-     * Starts the editing process and shows the editor.
-     * @param {String/HTMLElement/Element} el The element to edit
-     * @param {String} value (optional) A value to initialize the editor with. If a value is not provided, it defaults
-      * to the innerHTML of el.
+     * Select a node.
+     * @param {TreeNode} node The node to select
+     * @return {TreeNode} The selected node
      */
-    startEdit : function(el, value){
-        if(this.editing){
-            this.completeEdit();
-        }
-        this.boundEl = Roo.get(el);
-        var v = value !== undefined ? value : this.boundEl.dom.innerHTML;
-        if(!this.rendered){
-            this.render(this.parentEl || document.body);
-        }
-        if(this.fireEvent("beforestartedit", this, this.boundEl, v) === false){
-            return;
-        }
-        this.startValue = v;
-        this.field.setValue(v);
-        if(this.autoSize){
-            var sz = this.boundEl.getSize();
-            switch(this.autoSize){
-                case "width":
-                this.setSize(sz.width,  "");
-                break;
-                case "height":
-                this.setSize("",  sz.height);
-                break;
-                default:
-                this.setSize(sz.width,  sz.height);
+    select : function(node){
+        var last = this.selNode;
+        if(last != node && this.fireEvent('beforeselect', this, node, last) !== false){
+            if(last){
+                last.ui.onSelectedChange(false);
             }
+            this.selNode = node;
+            node.ui.onSelectedChange(true);
+            this.fireEvent("selectionchange", this, node, last);
         }
-        this.el.alignTo(this.boundEl, this.alignment);
-        this.editing = true;
-        if(Roo.QuickTips){
-            Roo.QuickTips.disable();
+        return node;
+    },
+    
+    /**
+     * Deselect a node.
+     * @param {TreeNode} node The node to unselect
+     */
+    unselect : function(node){
+        if(this.selNode == node){
+            this.clearSelections();
+        }    
+    },
+    
+    /**
+     * Clear all selections
+     */
+    clearSelections : function(){
+        var n = this.selNode;
+        if(n){
+            n.ui.onSelectedChange(false);
+            this.selNode = null;
+            this.fireEvent("selectionchange", this, null);
         }
-        this.show();
+        return n;
     },
-
+    
     /**
-     * Sets the height and width of this editor.
-     * @param {Number} width The new width
-     * @param {Number} height The new height
+     * Get the selected node
+     * @return {TreeNode} The selected node
      */
-    setSize : function(w, h){
-        this.field.setSize(w, h);
-        if(this.el){
-            this.el.sync();
-        }
+    getSelectedNode : function(){
+        return this.selNode;    
     },
-
+    
     /**
-     * Realigns the editor to the bound field based on the current alignment config value.
+     * Returns true if the node is selected
+     * @param {TreeNode} node The node to check
+     * @return {Boolean}
      */
-    realign : function(){
-        this.el.alignTo(this.boundEl, this.alignment);
+    isSelected : function(node){
+        return this.selNode == node;  
     },
 
     /**
-     * Ends the editing process, persists the changed value to the underlying field, and hides the editor.
-     * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after edit (defaults to false)
+     * Selects the node above the selected node in the tree, intelligently walking the nodes
+     * @return TreeNode The new selection
      */
-    completeEdit : function(remainVisible){
-        if(!this.editing){
-            return;
-        }
-        var v = this.getValue();
-        if(this.revertInvalid !== false && !this.field.isValid()){
-            v = this.startValue;
-            this.cancelEdit(true);
-        }
-        if(String(v) === String(this.startValue) && this.ignoreNoChange){
-            this.editing = false;
-            this.hide();
-            return;
+    selectPrevious : function(){
+        var s = this.selNode || this.lastSelNode;
+        if(!s){
+            return null;
         }
-        if(this.fireEvent("beforecomplete", this, v, this.startValue) !== false){
-            this.editing = false;
-            if(this.updateEl && this.boundEl){
-                this.boundEl.update(v);
-            }
-            if(remainVisible !== true){
-                this.hide();
+        var ps = s.previousSibling;
+        if(ps){
+            if(!ps.isExpanded() || ps.childNodes.length < 1){
+                return this.select(ps);
+            } else{
+                var lc = ps.lastChild;
+                while(lc && lc.isExpanded() && lc.childNodes.length > 0){
+                    lc = lc.lastChild;
+                }
+                return this.select(lc);
             }
-            this.fireEvent("complete", this, v, this.startValue);
+        } else if(s.parentNode && (this.tree.rootVisible || !s.parentNode.isRoot)){
+            return this.select(s.parentNode);
         }
+        return null;
     },
 
-    // private
-    onShow : function(){
-        this.el.show();
-        if(this.hideEl !== false){
-            this.boundEl.hide();
-        }
-        this.field.show();
-        if(Roo.isIE && !this.fixIEFocus){ // IE has problems with focusing the first time
-            this.fixIEFocus = true;
-            this.deferredFocus.defer(50, this);
-        }else{
-            this.field.focus();
+    /**
+     * Selects the node above the selected node in the tree, intelligently walking the nodes
+     * @return TreeNode The new selection
+     */
+    selectNext : function(){
+        var s = this.selNode || this.lastSelNode;
+        if(!s){
+            return null;
         }
-        this.fireEvent("startedit", this.boundEl, this.startValue);
+        if(s.firstChild && s.isExpanded()){
+             return this.select(s.firstChild);
+         }else if(s.nextSibling){
+             return this.select(s.nextSibling);
+         }else if(s.parentNode){
+            var newS = null;
+            s.parentNode.bubble(function(){
+                if(this.nextSibling){
+                    newS = this.getOwnerTree().selModel.select(this.nextSibling);
+                    return false;
+                }
+            });
+            return newS;
+         }
+        return null;
     },
 
-    deferredFocus : function(){
-        if(this.editing){
-            this.field.focus();
+    onKeyDown : function(e){
+        var s = this.selNode || this.lastSelNode;
+        // undesirable, but required
+        var sm = this;
+        if(!s){
+            return;
         }
-    },
+        var k = e.getKey();
+        switch(k){
+             case e.DOWN:
+                 e.stopEvent();
+                 this.selectNext();
+             break;
+             case e.UP:
+                 e.stopEvent();
+                 this.selectPrevious();
+             break;
+             case e.RIGHT:
+                 e.preventDefault();
+                 if(s.hasChildNodes()){
+                     if(!s.isExpanded()){
+                         s.expand();
+                     }else if(s.firstChild){
+                         this.select(s.firstChild, e);
+                     }
+                 }
+             break;
+             case e.LEFT:
+                 e.preventDefault();
+                 if(s.hasChildNodes() && s.isExpanded()){
+                     s.collapse();
+                 }else if(s.parentNode && (this.tree.rootVisible || s.parentNode != this.tree.getRootNode())){
+                     this.select(s.parentNode, e);
+                 }
+             break;
+        };
+    }
+});
+
+/**
+ * @class Roo.tree.MultiSelectionModel
+ * @extends Roo.util.Observable
+ * Multi selection for a TreePanel.
+ * @param {Object} cfg Configuration
+ */
+Roo.tree.MultiSelectionModel = function(){
+   this.selNodes = [];
+   this.selMap = {};
+   this.addEvents({
+       /**
+        * @event selectionchange
+        * Fires when the selected nodes change
+        * @param {MultiSelectionModel} this
+        * @param {Array} nodes Array of the selected nodes
+        */
+       "selectionchange" : true
+   });
+   Roo.tree.MultiSelectionModel.superclass.constructor.call(this,cfg);
+   
+};
 
+Roo.extend(Roo.tree.MultiSelectionModel, Roo.util.Observable, {
+    init : function(tree){
+        this.tree = tree;
+        tree.getTreeEl().on("keydown", this.onKeyDown, this);
+        tree.on("click", this.onNodeClick, this);
+    },
+    
+    onNodeClick : function(node, e){
+        this.select(node, e, e.ctrlKey);
+    },
+    
     /**
-     * Cancels the editing process and hides the editor without persisting any changes.  The field value will be
-     * reverted to the original starting value.
-     * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after
-     * cancel (defaults to false)
+     * Select a node.
+     * @param {TreeNode} node The node to select
+     * @param {EventObject} e (optional) An event associated with the selection
+     * @param {Boolean} keepExisting True to retain existing selections
+     * @return {TreeNode} The selected node
      */
-    cancelEdit : function(remainVisible){
-        if(this.editing){
-            this.setValue(this.startValue);
-            if(remainVisible !== true){
-                this.hide();
-            }
+    select : function(node, e, keepExisting){
+        if(keepExisting !== true){
+            this.clearSelections(true);
         }
-    },
-
-    // private
-    onBlur : function(){
-        if(this.allowBlur !== true && this.editing){
-            this.completeEdit();
+        if(this.isSelected(node)){
+            this.lastSelNode = node;
+            return node;
         }
+        this.selNodes.push(node);
+        this.selMap[node.id] = node;
+        this.lastSelNode = node;
+        node.ui.onSelectedChange(true);
+        this.fireEvent("selectionchange", this, this.selNodes);
+        return node;
     },
-
-    // private
-    onHide : function(){
-        if(this.editing){
-            this.completeEdit();
-            return;
-        }
-        this.field.blur();
-        if(this.field.collapse){
-            this.field.collapse();
-        }
-        this.el.hide();
-        if(this.hideEl !== false){
-            this.boundEl.show();
+    
+    /**
+     * Deselect a node.
+     * @param {TreeNode} node The node to unselect
+     */
+    unselect : function(node){
+        if(this.selMap[node.id]){
+            node.ui.onSelectedChange(false);
+            var sn = this.selNodes;
+            var index = -1;
+            if(sn.indexOf){
+                index = sn.indexOf(node);
+            }else{
+                for(var i = 0, len = sn.length; i < len; i++){
+                    if(sn[i] == node){
+                        index = i;
+                        break;
+                    }
+                }
+            }
+            if(index != -1){
+                this.selNodes.splice(index, 1);
+            }
+            delete this.selMap[node.id];
+            this.fireEvent("selectionchange", this, this.selNodes);
         }
-        if(Roo.QuickTips){
-            Roo.QuickTips.enable();
+    },
+    
+    /**
+     * Clear all selections
+     */
+    clearSelections : function(suppressEvent){
+        var sn = this.selNodes;
+        if(sn.length > 0){
+            for(var i = 0, len = sn.length; i < len; i++){
+                sn[i].ui.onSelectedChange(false);
+            }
+            this.selNodes = [];
+            this.selMap = {};
+            if(suppressEvent !== true){
+                this.fireEvent("selectionchange", this, this.selNodes);
+            }
         }
     },
-
+    
     /**
-     * Sets the data value of the editor
-     * @param {Mixed} value Any valid value supported by the underlying field
+     * Returns true if the node is selected
+     * @param {TreeNode} node The node to check
+     * @return {Boolean}
      */
-    setValue : function(v){
-        this.field.setValue(v);
+    isSelected : function(node){
+        return this.selMap[node.id] ? true : false;  
     },
-
+    
     /**
-     * Gets the data value of the editor
-     * @return {Mixed} The data value
+     * Returns an array of the selected nodes
+     * @return {Array}
      */
-    getValue : function(){
-        return this.field.getValue();
-    }
-});/*
- * 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.BasicDialog
- * @extends Roo.util.Observable
- * Lightweight Dialog Class.  The code below shows the creation of a typical dialog using existing HTML markup:
- * <pre><code>
-var dlg = new Roo.BasicDialog("my-dlg", {
-    height: 200,
-    width: 300,
-    minHeight: 100,
-    minWidth: 150,
-    modal: true,
-    proxyDrag: true,
-    shadow: true
-});
-dlg.addKeyListener(27, dlg.hide, dlg); // ESC can also close the dialog
-dlg.addButton('OK', dlg.hide, dlg);    // Could call a save function instead of hiding
-dlg.addButton('Cancel', dlg.hide, dlg);
-dlg.show();
-</code></pre>
-  <b>A Dialog should always be a direct child of the body element.</b>
- * @cfg {Boolean/DomHelper} autoCreate True to auto create from scratch, or using a DomHelper Object (defaults to false)
- * @cfg {String} title Default text to display in the title bar (defaults to null)
- * @cfg {Number} width Width of the dialog in pixels (can also be set via CSS).  Determined by browser if unspecified.
- * @cfg {Number} height Height of the dialog in pixels (can also be set via CSS).  Determined by browser if unspecified.
- * @cfg {Number} x The default left page coordinate of the dialog (defaults to center screen)
- * @cfg {Number} y The default top page coordinate of the dialog (defaults to center screen)
- * @cfg {String/Element} animateTarget Id or element from which the dialog should animate while opening
- * (defaults to null with no animation)
- * @cfg {Boolean} resizable False to disable manual dialog resizing (defaults to true)
- * @cfg {String} resizeHandles Which resize handles to display - see the {@link Roo.Resizable} handles config
- * property for valid values (defaults to 'all')
- * @cfg {Number} minHeight The minimum allowable height for a resizable dialog (defaults to 80)
- * @cfg {Number} minWidth The minimum allowable width for a resizable dialog (defaults to 200)
- * @cfg {Boolean} modal True to show the dialog modally, preventing user interaction with the rest of the page (defaults to false)
- * @cfg {Boolean} autoScroll True to allow the dialog body contents to overflow and display scrollbars (defaults to false)
- * @cfg {Boolean} closable False to remove the built-in top-right corner close button (defaults to true)
- * @cfg {Boolean} collapsible False to remove the built-in top-right corner collapse button (defaults to true)
- * @cfg {Boolean} constraintoviewport True to keep the dialog constrained within the visible viewport boundaries (defaults to true)
- * @cfg {Boolean} syncHeightBeforeShow True to cause the dimensions to be recalculated before the dialog is shown (defaults to false)
- * @cfg {Boolean} draggable False to disable dragging of the dialog within the viewport (defaults to true)
- * @cfg {Boolean} autoTabs If true, all elements with class 'x-dlg-tab' will get automatically converted to tabs (defaults to false)
- * @cfg {String} tabTag The tag name of tab elements, used when autoTabs = true (defaults to 'div')
- * @cfg {Boolean} proxyDrag True to drag a lightweight proxy element rather than the dialog itself, used when
- * draggable = true (defaults to false)
- * @cfg {Boolean} fixedcenter True to ensure that anytime the dialog is shown or resized it gets centered (defaults to false)
- * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
- * shadow (defaults to false)
- * @cfg {Number} shadowOffset The number of pixels to offset the shadow if displayed (defaults to 5)
- * @cfg {String} buttonAlign Valid values are "left," "center" and "right" (defaults to "right")
- * @cfg {Number} minButtonWidth Minimum width of all dialog buttons (defaults to 75)
- * @cfg {Array} buttons Array of buttons
- * @cfg {Boolean} shim True to create an iframe shim that prevents selects from showing through (defaults to false)
- * @constructor
- * Create a new BasicDialog.
- * @param {String/HTMLElement/Roo.Element} el The container element or DOM node, or its id
- * @param {Object} config Configuration options
- */
-Roo.BasicDialog = function(el, config){
-    this.el = Roo.get(el);
-    var dh = Roo.DomHelper;
-    if(!this.el && config && config.autoCreate){
-        if(typeof config.autoCreate == "object"){
-            if(!config.autoCreate.id){
-                config.autoCreate.id = el;
-            }
-            this.el = dh.append(document.body,
-                        config.autoCreate, true);
-        }else{
-            this.el = dh.append(document.body,
-                        {tag: "div", id: el, style:'visibility:hidden;'}, true);
-        }
-    }
-    el = this.el;
-    el.setDisplayed(true);
-    el.hide = this.hideAction;
-    this.id = el.id;
-    el.addClass("x-dlg");
-
-    Roo.apply(this, config);
-
-    this.proxy = el.createProxy("x-dlg-proxy");
-    this.proxy.hide = this.hideAction;
-    this.proxy.setOpacity(.5);
-    this.proxy.hide();
-
-    if(config.width){
-        el.setWidth(config.width);
-    }
-    if(config.height){
-        el.setHeight(config.height);
-    }
-    this.size = el.getSize();
-    if(typeof config.x != "undefined" && typeof config.y != "undefined"){
-        this.xy = [config.x,config.y];
-    }else{
-        this.xy = el.getCenterXY(true);
-    }
-    /** The header element @type Roo.Element */
-    this.header = el.child("> .x-dlg-hd");
-    /** The body element @type Roo.Element */
-    this.body = el.child("> .x-dlg-bd");
-    /** The footer element @type Roo.Element */
-    this.footer = el.child("> .x-dlg-ft");
-
-    if(!this.header){
-        this.header = el.createChild({tag: "div", cls:"x-dlg-hd", html: "&#160;"}, this.body ? this.body.dom : null);
-    }
-    if(!this.body){
-        this.body = el.createChild({tag: "div", cls:"x-dlg-bd"});
-    }
-
-    this.header.unselectable();
-    if(this.title){
-        this.header.update(this.title);
-    }
-    // this element allows the dialog to be focused for keyboard event
-    this.focusEl = el.createChild({tag: "a", href:"#", cls:"x-dlg-focus", tabIndex:"-1"});
-    this.focusEl.swallowEvent("click", true);
-
-    this.header.wrap({cls:"x-dlg-hd-right"}).wrap({cls:"x-dlg-hd-left"}, true);
-
-    // wrap the body and footer for special rendering
-    this.bwrap = this.body.wrap({tag: "div", cls:"x-dlg-dlg-body"});
-    if(this.footer){
-        this.bwrap.dom.appendChild(this.footer.dom);
-    }
-
-    this.bg = this.el.createChild({
-        tag: "div", cls:"x-dlg-bg",
-        html: '<div class="x-dlg-bg-left"><div class="x-dlg-bg-right"><div class="x-dlg-bg-center">&#160;</div></div></div>'
-    });
-    this.centerBg = this.bg.child("div.x-dlg-bg-center");
-
+    getSelectedNodes : function(){
+        return this.selNodes;    
+    },
 
-    if(this.autoScroll !== false && !this.autoTabs){
-        this.body.setStyle("overflow", "auto");
-    }
+    onKeyDown : Roo.tree.DefaultSelectionModel.prototype.onKeyDown,
 
-    this.toolbox = this.el.createChild({cls: "x-dlg-toolbox"});
+    selectNext : Roo.tree.DefaultSelectionModel.prototype.selectNext,
 
-    if(this.closable !== false){
-        this.el.addClass("x-dlg-closable");
-        this.close = this.toolbox.createChild({cls:"x-dlg-close"});
-        this.close.on("click", this.closeClick, this);
-        this.close.addClassOnOver("x-dlg-close-over");
-    }
-    if(this.collapsible !== false){
-        this.collapseBtn = this.toolbox.createChild({cls:"x-dlg-collapse"});
-        this.collapseBtn.on("click", this.collapseClick, this);
-        this.collapseBtn.addClassOnOver("x-dlg-collapse-over");
-        this.header.on("dblclick", this.collapseClick, this);
-    }
-    if(this.resizable !== false){
-        this.el.addClass("x-dlg-resizable");
-        this.resizer = new Roo.Resizable(el, {
-            minWidth: this.minWidth || 80,
-            minHeight:this.minHeight || 80,
-            handles: this.resizeHandles || "all",
-            pinned: true
-        });
-        this.resizer.on("beforeresize", this.beforeResize, this);
-        this.resizer.on("resize", this.onResize, this);
-    }
-    if(this.draggable !== false){
-        el.addClass("x-dlg-draggable");
-        if (!this.proxyDrag) {
-            var dd = new Roo.dd.DD(el.dom.id, "WindowDrag");
-        }
-        else {
-            var dd = new Roo.dd.DDProxy(el.dom.id, "WindowDrag", {dragElId: this.proxy.id});
-        }
-        dd.setHandleElId(this.header.id);
-        dd.endDrag = this.endMove.createDelegate(this);
-        dd.startDrag = this.startMove.createDelegate(this);
-        dd.onDrag = this.onDrag.createDelegate(this);
-        dd.scroll = false;
-        this.dd = dd;
-    }
-    if(this.modal){
-        this.mask = dh.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
-        this.mask.enableDisplayMode("block");
-        this.mask.hide();
-        this.el.addClass("x-dlg-modal");
-    }
-    if(this.shadow){
-        this.shadow = new Roo.Shadow({
-            mode : typeof this.shadow == "string" ? this.shadow : "sides",
-            offset : this.shadowOffset
-        });
-    }else{
-        this.shadowOffset = 0;
-    }
-    if(Roo.useShims && this.shim !== false){
-        this.shim = this.el.createShim();
-        this.shim.hide = this.hideAction;
-        this.shim.hide();
-    }else{
-        this.shim = false;
-    }
-    if(this.autoTabs){
-        this.initTabs();
-    }
-    if (this.buttons) { 
-        var bts= this.buttons;
-        this.buttons = [];
-        Roo.each(bts, function(b) {
-            this.addButton(b);
-        }, this);
+    selectPrevious : Roo.tree.DefaultSelectionModel.prototype.selectPrevious
+});/*
+ * 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.tree.TreeNode
+ * @extends Roo.data.Node
+ * @cfg {String} text The text for this node
+ * @cfg {Boolean} expanded true to start the node expanded
+ * @cfg {Boolean} allowDrag false to make this node undraggable if DD is on (defaults to true)
+ * @cfg {Boolean} allowDrop false if this node cannot be drop on
+ * @cfg {Boolean} disabled true to start the node disabled
+ * @cfg {String} icon The path to an icon for the node. The preferred way to do this
+ *    is to use the cls or iconCls attributes and add the icon via a CSS background image.
+ * @cfg {String} cls A css class to be added to the node
+ * @cfg {String} iconCls A css class to be added to the nodes icon element for applying css background images
+ * @cfg {String} href URL of the link used for the node (defaults to #)
+ * @cfg {String} hrefTarget target frame for the link
+ * @cfg {String} qtip An Ext QuickTip for the node
+ * @cfg {String} qtipCfg An Ext QuickTip config for the node (used instead of qtip)
+ * @cfg {Boolean} singleClickExpand True for single click expand on this node
+ * @cfg {Function} uiProvider A UI <b>class</b> to use for this node (defaults to Roo.tree.TreeNodeUI)
+ * @cfg {Boolean} checked True to render a checked checkbox for this node, false to render an unchecked checkbox
+ * (defaults to undefined with no checkbox rendered)
+ * @constructor
+ * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node
+ */
+Roo.tree.TreeNode = function(attributes){
+    attributes = attributes || {};
+    if(typeof attributes == "string"){
+        attributes = {text: attributes};
     }
-    
-    
+    this.childrenRendered = false;
+    this.rendered = false;
+    Roo.tree.TreeNode.superclass.constructor.call(this, attributes);
+    this.expanded = attributes.expanded === true;
+    this.isTarget = attributes.isTarget !== false;
+    this.draggable = attributes.draggable !== false && attributes.allowDrag !== false;
+    this.allowChildren = attributes.allowChildren !== false && attributes.allowDrop !== false;
+
+    /**
+     * Read-only. The text for this node. To change it use setText().
+     * @type String
+     */
+    this.text = attributes.text;
+    /**
+     * True if this node is disabled.
+     * @type Boolean
+     */
+    this.disabled = attributes.disabled === true;
+
     this.addEvents({
         /**
-         * @event keydown
-         * Fires when a key is pressed
-         * @param {Roo.BasicDialog} this
-         * @param {Roo.EventObject} e
-         */
-        "keydown" : true,
+        * @event textchange
+        * Fires when the text for this node is changed
+        * @param {Node} this This node
+        * @param {String} text The new text
+        * @param {String} oldText The old text
+        */
+        "textchange" : true,
         /**
-         * @event move
-         * Fires when this dialog is moved by the user.
-         * @param {Roo.BasicDialog} this
-         * @param {Number} x The new page X
-         * @param {Number} y The new page Y
-         */
-        "move" : true,
+        * @event beforeexpand
+        * Fires before this node is expanded, return false to cancel.
+        * @param {Node} this This node
+        * @param {Boolean} deep
+        * @param {Boolean} anim
+        */
+        "beforeexpand" : true,
         /**
-         * @event resize
-         * Fires when this dialog is resized by the user.
-         * @param {Roo.BasicDialog} this
-         * @param {Number} width The new width
-         * @param {Number} height The new height
-         */
-        "resize" : true,
+        * @event beforecollapse
+        * Fires before this node is collapsed, return false to cancel.
+        * @param {Node} this This node
+        * @param {Boolean} deep
+        * @param {Boolean} anim
+        */
+        "beforecollapse" : true,
         /**
-         * @event beforehide
-         * Fires before this dialog is hidden.
-         * @param {Roo.BasicDialog} this
-         */
-        "beforehide" : true,
+        * @event expand
+        * Fires when this node is expanded
+        * @param {Node} this This node
+        */
+        "expand" : true,
         /**
-         * @event hide
-         * Fires when this dialog is hidden.
-         * @param {Roo.BasicDialog} this
-         */
-        "hide" : true,
+        * @event disabledchange
+        * Fires when the disabled status of this node changes
+        * @param {Node} this This node
+        * @param {Boolean} disabled
+        */
+        "disabledchange" : true,
         /**
-         * @event beforeshow
-         * Fires before this dialog is shown.
-         * @param {Roo.BasicDialog} this
-         */
-        "beforeshow" : true,
+        * @event collapse
+        * Fires when this node is collapsed
+        * @param {Node} this This node
+        */
+        "collapse" : true,
         /**
-         * @event show
-         * Fires when this dialog is shown.
-         * @param {Roo.BasicDialog} this
-         */
-        "show" : true
+        * @event beforeclick
+        * Fires before click processing. Return false to cancel the default action.
+        * @param {Node} this This node
+        * @param {Roo.EventObject} e The event object
+        */
+        "beforeclick":true,
+        /**
+        * @event checkchange
+        * Fires when a node with a checkbox's checked property changes
+        * @param {Node} this This node
+        * @param {Boolean} checked
+        */
+        "checkchange":true,
+        /**
+        * @event click
+        * Fires when this node is clicked
+        * @param {Node} this This node
+        * @param {Roo.EventObject} e The event object
+        */
+        "click":true,
+        /**
+        * @event dblclick
+        * Fires when this node is double clicked
+        * @param {Node} this This node
+        * @param {Roo.EventObject} e The event object
+        */
+        "dblclick":true,
+        /**
+        * @event contextmenu
+        * Fires when this node is right clicked
+        * @param {Node} this This node
+        * @param {Roo.EventObject} e The event object
+        */
+        "contextmenu":true,
+        /**
+        * @event beforechildrenrendered
+        * Fires right before the child nodes for this node are rendered
+        * @param {Node} this This node
+        */
+        "beforechildrenrendered":true
     });
-    el.on("keydown", this.onKeyDown, this);
-    el.on("mousedown", this.toFront, this);
-    Roo.EventManager.onWindowResize(this.adjustViewport, this, true);
-    this.el.hide();
-    Roo.DialogManager.register(this);
-    Roo.BasicDialog.superclass.constructor.call(this);
-};
 
-Roo.extend(Roo.BasicDialog, Roo.util.Observable, {
-    shadowOffset: Roo.isIE ? 6 : 5,
-    minHeight: 80,
-    minWidth: 200,
-    minButtonWidth: 75,
-    defaultButton: null,
-    buttonAlign: "right",
-    tabTag: 'div',
-    firstShow: true,
+    var uiClass = this.attributes.uiProvider || Roo.tree.TreeNodeUI;
 
     /**
-     * Sets the dialog title text
-     * @param {String} text The title text to display
-     * @return {Roo.BasicDialog} this
+     * Read-only. The UI for this node
+     * @type TreeNodeUI
      */
-    setTitle : function(text){
-        this.header.update(text);
-        return this;
-    },
-
-    // private
-    closeClick : function(){
-        this.hide();
-    },
-
-    // private
-    collapseClick : function(){
-        this[this.collapsed ? "expand" : "collapse"]();
-    },
-
+    this.ui = new uiClass(this);
+    
+    // finally support items[]
+    if (typeof(this.attributes.items) == 'undefined' || !this.attributes.items) {
+        return;
+    }
+    
+    
+    Roo.each(this.attributes.items, function(c) {
+        this.appendChild(Roo.factory(c,Roo.Tree));
+    }, this);
+    delete this.attributes.items;
+    
+    
+    
+};
+Roo.extend(Roo.tree.TreeNode, Roo.data.Node, {
+    preventHScroll: true,
     /**
-     * Collapses the dialog to its minimized state (only the title bar is visible).
-     * Equivalent to the user clicking the collapse dialog button.
+     * Returns true if this node is expanded
+     * @return {Boolean}
      */
-    collapse : function(){
-        if(!this.collapsed){
-            this.collapsed = true;
-            this.el.addClass("x-dlg-collapsed");
-            this.restoreHeight = this.el.getHeight();
-            this.resizeTo(this.el.getWidth(), this.header.getHeight());
-        }
+    isExpanded : function(){
+        return this.expanded;
     },
 
     /**
-     * Expands a collapsed dialog back to its normal state.  Equivalent to the user
-     * clicking the expand dialog button.
+     * Returns the UI object for this node
+     * @return {TreeNodeUI}
      */
-    expand : function(){
-        if(this.collapsed){
-            this.collapsed = false;
-            this.el.removeClass("x-dlg-collapsed");
-            this.resizeTo(this.el.getWidth(), this.restoreHeight);
+    getUI : function(){
+        return this.ui;
+    },
+
+    // private override
+    setFirstChild : function(node){
+        var of = this.firstChild;
+        Roo.tree.TreeNode.superclass.setFirstChild.call(this, node);
+        if(this.childrenRendered && of && node != of){
+            of.renderIndent(true, true);
+        }
+        if(this.rendered){
+            this.renderIndent(true, true);
         }
     },
 
-    /**
-     * Reinitializes the tabs component, clearing out old tabs and finding new ones.
-     * @return {Roo.TabPanel} The tabs component
-     */
-    initTabs : function(){
-        var tabs = this.getTabs();
-        while(tabs.getTab(0)){
-            tabs.removeTab(0);
+    // private override
+    setLastChild : function(node){
+        var ol = this.lastChild;
+        Roo.tree.TreeNode.superclass.setLastChild.call(this, node);
+        if(this.childrenRendered && ol && node != ol){
+            ol.renderIndent(true, true);
+        }
+        if(this.rendered){
+            this.renderIndent(true, true);
         }
-        this.el.select(this.tabTag+'.x-dlg-tab').each(function(el){
-            var dom = el.dom;
-            tabs.addTab(Roo.id(dom), dom.title);
-            dom.title = "";
-        });
-        tabs.activate(0);
-        return tabs;
     },
 
-    // private
-    beforeResize : function(){
-        this.resizer.minHeight = Math.max(this.minHeight, this.getHeaderFooterHeight(true)+40);
+    // these methods are overridden to provide lazy rendering support
+    // private override
+    appendChild : function()
+    {
+        var node = Roo.tree.TreeNode.superclass.appendChild.apply(this, arguments);
+        if(node && this.childrenRendered){
+            node.render();
+        }
+        this.ui.updateExpandIcon();
+        return node;
     },
 
-    // private
-    onResize : function(){
-        this.refreshSize();
-        this.syncBodyHeight();
-        this.adjustAssets();
-        this.focus();
-        this.fireEvent("resize", this, this.size.width, this.size.height);
+    // private override
+    removeChild : function(node){
+        this.ownerTree.getSelectionModel().unselect(node);
+        Roo.tree.TreeNode.superclass.removeChild.apply(this, arguments);
+        // if it's been rendered remove dom node
+        if(this.childrenRendered){
+            node.ui.remove();
+        }
+        if(this.childNodes.length < 1){
+            this.collapse(false, false);
+        }else{
+            this.ui.updateExpandIcon();
+        }
+        if(!this.firstChild) {
+            this.childrenRendered = false;
+        }
+        return node;
     },
 
-    // private
-    onKeyDown : function(e){
-        if(this.isVisible()){
-            this.fireEvent("keydown", this, e);
+    // private override
+    insertBefore : function(node, refNode){
+        var newNode = Roo.tree.TreeNode.superclass.insertBefore.apply(this, arguments);
+        if(newNode && refNode && this.childrenRendered){
+            node.render();
         }
+        this.ui.updateExpandIcon();
+        return newNode;
     },
 
     /**
-     * Resizes the dialog.
-     * @param {Number} width
-     * @param {Number} height
-     * @return {Roo.BasicDialog} this
+     * Sets the text for this node
+     * @param {String} text
      */
-    resizeTo : function(width, height){
-        this.el.setSize(width, height);
-        this.size = {width: width, height: height};
-        this.syncBodyHeight();
-        if(this.fixedcenter){
-            this.center();
-        }
-        if(this.isVisible()){
-            this.constrainXY();
-            this.adjustAssets();
+    setText : function(text){
+        var oldText = this.text;
+        this.text = text;
+        this.attributes.text = text;
+        if(this.rendered){ // event without subscribing
+            this.ui.onTextChange(this, text, oldText);
         }
-        this.fireEvent("resize", this, width, height);
-        return this;
+        this.fireEvent("textchange", this, text, oldText);
     },
 
-
     /**
-     * Resizes the dialog to fit the specified content size.
-     * @param {Number} width
-     * @param {Number} height
-     * @return {Roo.BasicDialog} this
+     * Triggers selection of this node
      */
-    setContentSize : function(w, h){
-        h += this.getHeaderFooterHeight() + this.body.getMargins("tb");
-        w += this.body.getMargins("lr") + this.bwrap.getMargins("lr") + this.centerBg.getPadding("lr");
-        //if(!this.el.isBorderBox()){
-            h +=  this.body.getPadding("tb") + this.bwrap.getBorderWidth("tb") + this.body.getBorderWidth("tb") + this.el.getBorderWidth("tb");
-            w += this.body.getPadding("lr") + this.bwrap.getBorderWidth("lr") + this.body.getBorderWidth("lr") + this.bwrap.getPadding("lr") + this.el.getBorderWidth("lr");
-        //}
-        if(this.tabs){
-            h += this.tabs.stripWrap.getHeight() + this.tabs.bodyEl.getMargins("tb") + this.tabs.bodyEl.getPadding("tb");
-            w += this.tabs.bodyEl.getMargins("lr") + this.tabs.bodyEl.getPadding("lr");
-        }
-        this.resizeTo(w, h);
-        return this;
+    select : function(){
+        this.getOwnerTree().getSelectionModel().select(this);
     },
 
     /**
-     * Adds a key listener for when this dialog is displayed.  This allows you to hook in a function that will be
-     * executed in response to a particular key being pressed while the dialog is active.
-     * @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object with the following options:
-     *                                  {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
-     * @param {Function} fn The function to call
-     * @param {Object} scope (optional) The scope of the function
-     * @return {Roo.BasicDialog} this
+     * Triggers deselection of this node
      */
-    addKeyListener : function(key, fn, scope){
-        var keyCode, shift, ctrl, alt;
-        if(typeof key == "object" && !(key instanceof Array)){
-            keyCode = key["key"];
-            shift = key["shift"];
-            ctrl = key["ctrl"];
-            alt = key["alt"];
-        }else{
-            keyCode = key;
-        }
-        var handler = function(dlg, e){
-            if((!shift || e.shiftKey) && (!ctrl || e.ctrlKey) &&  (!alt || e.altKey)){
-                var k = e.getKey();
-                if(keyCode instanceof Array){
-                    for(var i = 0, len = keyCode.length; i < len; i++){
-                        if(keyCode[i] == k){
-                          fn.call(scope || window, dlg, k, e);
-                          return;
-                        }
-                    }
-                }else{
-                    if(k == keyCode){
-                        fn.call(scope || window, dlg, k, e);
-                    }
-                }
-            }
-        };
-        this.on("keydown", handler);
-        return this;
+    unselect : function(){
+        this.getOwnerTree().getSelectionModel().unselect(this);
     },
 
     /**
-     * Returns the TabPanel component (creates it if it doesn't exist).
-     * Note: If you wish to simply check for the existence of tabs without creating them,
-     * check for a null 'tabs' property.
-     * @return {Roo.TabPanel} The tabs component
+     * Returns true if this node is selected
+     * @return {Boolean}
      */
-    getTabs : function(){
-        if(!this.tabs){
-            this.el.addClass("x-dlg-auto-tabs");
-            this.body.addClass(this.tabPosition == "bottom" ? "x-tabs-bottom" : "x-tabs-top");
-            this.tabs = new Roo.TabPanel(this.body.dom, this.tabPosition == "bottom");
-        }
-        return this.tabs;
+    isSelected : function(){
+        return this.getOwnerTree().getSelectionModel().isSelected(this);
     },
 
     /**
-     * Adds a button to the footer section of the dialog.
-     * @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 (accepts position as a property)
-     * @return {Roo.Button} The new button
+     * Expand this node.
+     * @param {Boolean} deep (optional) True to expand all children as well
+     * @param {Boolean} anim (optional) false to cancel the default animation
+     * @param {Function} callback (optional) A callback to be called when
+     * expanding this node completes (does not wait for deep expand to complete).
+     * Called with 1 parameter, this node.
      */
-    addButton : function(config, handler, scope){
-        var dh = Roo.DomHelper;
-        if(!this.footer){
-            this.footer = dh.append(this.bwrap, {tag: "div", cls:"x-dlg-ft"}, true);
-        }
-        if(!this.btnContainer){
-            var tb = this.footer.createChild({
-
-                cls:"x-dlg-btns x-dlg-btns-"+this.buttonAlign,
-                html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
-            }, null, true);
-            this.btnContainer = tb.firstChild.firstChild.firstChild;
-        }
-        var bconfig = {
-            handler: handler,
-            scope: scope,
-            minWidth: this.minButtonWidth,
-            hideParent:true
-        };
-        if(typeof config == "string"){
-            bconfig.text = config;
-        }else{
-            if(config.tag){
-                bconfig.dhconfig = config;
-            }else{
-                Roo.apply(bconfig, config);
+    expand : function(deep, anim, callback){
+        if(!this.expanded){
+            if(this.fireEvent("beforeexpand", this, deep, anim) === false){
+                return;
             }
+            if(!this.childrenRendered){
+                this.renderChildren();
+            }
+            this.expanded = true;
+            
+            if(!this.isHiddenRoot() && (this.getOwnerTree() && this.getOwnerTree().animate && anim !== false) || anim){
+                this.ui.animExpand(function(){
+                    this.fireEvent("expand", this);
+                    if(typeof callback == "function"){
+                        callback(this);
+                    }
+                    if(deep === true){
+                        this.expandChildNodes(true);
+                    }
+                }.createDelegate(this));
+                return;
+            }else{
+                this.ui.expand();
+                this.fireEvent("expand", this);
+                if(typeof callback == "function"){
+                    callback(this);
+                }
+            }
+        }else{
+           if(typeof callback == "function"){
+               callback(this);
+           }
         }
-        var fc = false;
-        if ((typeof(bconfig.position) != 'undefined') && bconfig.position < this.btnContainer.childNodes.length-1) {
-            bconfig.position = Math.max(0, bconfig.position);
-            fc = this.btnContainer.childNodes[bconfig.position];
-        }
-         
-        var btn = new Roo.Button(
-            fc ? 
-                this.btnContainer.insertBefore(document.createElement("td"),fc)
-                : this.btnContainer.appendChild(document.createElement("td")),
-            //Roo.get(this.btnContainer).createChild( { tag: 'td'},  fc ),
-            bconfig
-        );
-        this.syncBodyHeight();
-        if(!this.buttons){
-            /**
-             * Array of all the buttons that have been added to this dialog via addButton
-             * @type Array
-             */
-            this.buttons = [];
-        }
-        this.buttons.push(btn);
-        return btn;
+        if(deep === true){
+            this.expandChildNodes(true);
+        }
+    },
+
+    isHiddenRoot : function(){
+        return this.isRoot && !this.getOwnerTree().rootVisible;
     },
 
     /**
-     * Sets the default button to be focused when the dialog is displayed.
-     * @param {Roo.BasicDialog.Button} btn The button object returned by {@link #addButton}
-     * @return {Roo.BasicDialog} this
+     * Collapse this node.
+     * @param {Boolean} deep (optional) True to collapse all children as well
+     * @param {Boolean} anim (optional) false to cancel the default animation
      */
-    setDefaultButton : function(btn){
-        this.defaultButton = btn;
-        return this;
+    collapse : function(deep, anim){
+        if(this.expanded && !this.isHiddenRoot()){
+            if(this.fireEvent("beforecollapse", this, deep, anim) === false){
+                return;
+            }
+            this.expanded = false;
+            if((this.getOwnerTree().animate && anim !== false) || anim){
+                this.ui.animCollapse(function(){
+                    this.fireEvent("collapse", this);
+                    if(deep === true){
+                        this.collapseChildNodes(true);
+                    }
+                }.createDelegate(this));
+                return;
+            }else{
+                this.ui.collapse();
+                this.fireEvent("collapse", this);
+            }
+        }
+        if(deep === true){
+            var cs = this.childNodes;
+            for(var i = 0, len = cs.length; i < len; i++) {
+            	cs[i].collapse(true, false);
+            }
+        }
     },
 
     // private
-    getHeaderFooterHeight : function(safe){
-        var height = 0;
-        if(this.header){
-           height += this.header.getHeight();
-        }
-        if(this.footer){
-           var fm = this.footer.getMargins();
-            height += (this.footer.getHeight()+fm.top+fm.bottom);
+    delayedExpand : function(delay){
+        if(!this.expandProcId){
+            this.expandProcId = this.expand.defer(delay, this);
         }
-        height += this.bwrap.getPadding("tb")+this.bwrap.getBorderWidth("tb");
-        height += this.centerBg.getPadding("tb");
-        return height;
     },
 
     // private
-    syncBodyHeight : function()
-    {
-        var bd = this.body, // the text
-            cb = this.centerBg, // wrapper around bottom.. but does not seem to be used..
-            bw = this.bwrap;
-        var height = this.size.height - this.getHeaderFooterHeight(false);
-        bd.setHeight(height-bd.getMargins("tb"));
-        var hh = this.header.getHeight();
-        var h = this.size.height-hh;
-        cb.setHeight(h);
-        
-        bw.setLeftTop(cb.getPadding("l"), hh+cb.getPadding("t"));
-        bw.setHeight(h-cb.getPadding("tb"));
-        
-        bw.setWidth(this.el.getWidth(true)-cb.getPadding("lr"));
-        bd.setWidth(bw.getWidth(true));
-        if(this.tabs){
-            this.tabs.syncHeight();
-            if(Roo.isIE){
-                this.tabs.el.repaint();
-            }
+    cancelExpand : function(){
+        if(this.expandProcId){
+            clearTimeout(this.expandProcId);
         }
+        this.expandProcId = false;
     },
 
     /**
-     * Restores the previous state of the dialog if Roo.state is configured.
-     * @return {Roo.BasicDialog} this
+     * Toggles expanded/collapsed state of the node
      */
-    restoreState : function(){
-        var box = Roo.state.Manager.get(this.stateId || (this.el.id + "-state"));
-        if(box && box.width){
-            this.xy = [box.x, box.y];
-            this.resizeTo(box.width, box.height);
+    toggle : function(){
+        if(this.expanded){
+            this.collapse();
+        }else{
+            this.expand();
         }
-        return this;
     },
 
-    // private
-    beforeShow : function(){
-        this.expand();
-        if(this.fixedcenter){
-            this.xy = this.el.getCenterXY(true);
-        }
-        if(this.modal){
-            Roo.get(document.body).addClass("x-body-masked");
-            this.mask.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
-            this.mask.show();
-        }
-        this.constrainXY();
+    /**
+     * Ensures all parent nodes are expanded
+     */
+    ensureVisible : function(callback){
+        var tree = this.getOwnerTree();
+        tree.expandPath(this.parentNode.getPath(), false, function(){
+            tree.getTreeEl().scrollChildIntoView(this.ui.anchor);
+            Roo.callback(callback);
+        }.createDelegate(this));
     },
 
-    // private
-    animShow : function(){
-        var b = Roo.get(this.animateTarget).getBox();
-        this.proxy.setSize(b.width, b.height);
-        this.proxy.setLocation(b.x, b.y);
-        this.proxy.show();
-        this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height,
-                    true, .35, this.showEl.createDelegate(this));
+    /**
+     * Expand all child nodes
+     * @param {Boolean} deep (optional) true if the child nodes should also expand their child nodes
+     */
+    expandChildNodes : function(deep){
+        var cs = this.childNodes;
+        for(var i = 0, len = cs.length; i < len; i++) {
+        	cs[i].expand(deep);
+        }
     },
 
     /**
-     * Shows the dialog.
-     * @param {String/HTMLElement/Roo.Element} animateTarget (optional) Reset the animation target
-     * @return {Roo.BasicDialog} this
+     * Collapse all child nodes
+     * @param {Boolean} deep (optional) true if the child nodes should also collapse their child nodes
      */
-    show : function(animateTarget){
-        if (this.fireEvent("beforeshow", this) === false){
-            return;
-        }
-        if(this.syncHeightBeforeShow){
-            this.syncBodyHeight();
-        }else if(this.firstShow){
-            this.firstShow = false;
-            this.syncBodyHeight(); // sync the height on the first show instead of in the constructor
-        }
-        this.animateTarget = animateTarget || this.animateTarget;
-        if(!this.el.isVisible()){
-            this.beforeShow();
-            if(this.animateTarget && Roo.get(this.animateTarget)){
-                this.animShow();
-            }else{
-                this.showEl();
-            }
+    collapseChildNodes : function(deep){
+        var cs = this.childNodes;
+        for(var i = 0, len = cs.length; i < len; i++) {
+        	cs[i].collapse(deep);
         }
-        return this;
     },
 
-    // private
-    showEl : function(){
-        this.proxy.hide();
-        this.el.setXY(this.xy);
-        this.el.show();
-        this.adjustAssets(true);
-        this.toFront();
-        this.focus();
-        // IE peekaboo bug - fix found by Dave Fenwick
-        if(Roo.isIE){
-            this.el.repaint();
+    /**
+     * Disables this node
+     */
+    disable : function(){
+        this.disabled = true;
+        this.unselect();
+        if(this.rendered && this.ui.onDisableChange){ // event without subscribing
+            this.ui.onDisableChange(this, true);
         }
-        this.fireEvent("show", this);
+        this.fireEvent("disabledchange", this, true);
     },
 
     /**
-     * Focuses the dialog.  If a defaultButton is set, it will receive focus, otherwise the
-     * dialog itself will receive focus.
+     * Enables this node
      */
-    focus : function(){
-        if(this.defaultButton){
-            this.defaultButton.focus();
-        }else{
-            this.focusEl.focus();
+    enable : function(){
+        this.disabled = false;
+        if(this.rendered && this.ui.onDisableChange){ // event without subscribing
+            this.ui.onDisableChange(this, false);
         }
+        this.fireEvent("disabledchange", this, false);
     },
 
     // private
-    constrainXY : function(){
-        if(this.constraintoviewport !== false){
-            if(!this.viewSize){
-                if(this.container){
-                    var s = this.container.getSize();
-                    this.viewSize = [s.width, s.height];
-                }else{
-                    this.viewSize = [Roo.lib.Dom.getViewWidth(),Roo.lib.Dom.getViewHeight()];
-                }
-            }
-            var s = Roo.get(this.container||document).getScroll();
-
-            var x = this.xy[0], y = this.xy[1];
-            var w = this.size.width, h = this.size.height;
-            var vw = this.viewSize[0], vh = this.viewSize[1];
-            // only move it if it needs it
-            var moved = false;
-            // first validate right/bottom
-            if(x + w > vw+s.left){
-                x = vw - w;
-                moved = true;
-            }
-            if(y + h > vh+s.top){
-                y = vh - h;
-                moved = true;
-            }
-            // then make sure top/left isn't negative
-            if(x < s.left){
-                x = s.left;
-                moved = true;
-            }
-            if(y < s.top){
-                y = s.top;
-                moved = true;
-            }
-            if(moved){
-                // cache xy
-                this.xy = [x, y];
-                if(this.isVisible()){
-                    this.el.setLocation(x, y);
-                    this.adjustAssets();
-                }
-            }
+    renderChildren : function(suppressEvent){
+        if(suppressEvent !== false){
+            this.fireEvent("beforechildrenrendered", this);
+        }
+        var cs = this.childNodes;
+        for(var i = 0, len = cs.length; i < len; i++){
+            cs[i].render(true);
         }
+        this.childrenRendered = true;
     },
 
     // private
-    onDrag : function(){
-        if(!this.proxyDrag){
-            this.xy = this.el.getXY();
-            this.adjustAssets();
+    sort : function(fn, scope){
+        Roo.tree.TreeNode.superclass.sort.apply(this, arguments);
+        if(this.childrenRendered){
+            var cs = this.childNodes;
+            for(var i = 0, len = cs.length; i < len; i++){
+                cs[i].render(true);
+            }
         }
     },
 
     // private
-    adjustAssets : function(doShow){
-        var x = this.xy[0], y = this.xy[1];
-        var w = this.size.width, h = this.size.height;
-        if(doShow === true){
-            if(this.shadow){
-                this.shadow.show(this.el);
-            }
-            if(this.shim){
-                this.shim.show();
+    render : function(bulkRender){
+        this.ui.render(bulkRender);
+        if(!this.rendered){
+            this.rendered = true;
+            if(this.expanded){
+                this.expanded = false;
+                this.expand(false, false);
             }
         }
-        if(this.shadow && this.shadow.isVisible()){
-            this.shadow.show(this.el);
-        }
-        if(this.shim && this.shim.isVisible()){
-            this.shim.setBounds(x, y, w, h);
-        }
     },
 
     // private
-    adjustViewport : function(w, h){
-        if(!w || !h){
-            w = Roo.lib.Dom.getViewWidth();
-            h = Roo.lib.Dom.getViewHeight();
-        }
-        // cache the size
-        this.viewSize = [w, h];
-        if(this.modal && this.mask.isVisible()){
-            this.mask.setSize(w, h); // first make sure the mask isn't causing overflow
-            this.mask.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
+    renderIndent : function(deep, refresh){
+        if(refresh){
+            this.ui.childIndent = null;
         }
-        if(this.isVisible()){
-            this.constrainXY();
+        this.ui.renderIndent();
+        if(deep === true && this.childrenRendered){
+            var cs = this.childNodes;
+            for(var i = 0, len = cs.length; i < len; i++){
+                cs[i].renderIndent(true, refresh);
+            }
         }
-    },
-
+    }
+});/*
+ * 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.tree.AsyncTreeNode
+ * @extends Roo.tree.TreeNode
+ * @cfg {TreeLoader} loader A TreeLoader to be used by this node (defaults to the loader defined on the tree)
+ * @constructor
+ * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node 
+ */
+ Roo.tree.AsyncTreeNode = function(config){
+    this.loaded = false;
+    this.loading = false;
+    Roo.tree.AsyncTreeNode.superclass.constructor.apply(this, arguments);
     /**
-     * Destroys this dialog and all its supporting elements (including any tabs, shim,
-     * shadow, proxy, mask, etc.)  Also removes all event listeners.
-     * @param {Boolean} removeEl (optional) true to remove the element from the DOM
+    * @event beforeload
+    * Fires before this node is loaded, return false to cancel
+    * @param {Node} this This node
+    */
+    this.addEvents({'beforeload':true, 'load': true});
+    /**
+    * @event load
+    * Fires when this node is loaded
+    * @param {Node} this This node
+    */
+    /**
+     * The loader used by this node (defaults to using the tree's defined loader)
+     * @type TreeLoader
+     * @property loader
      */
-    destroy : function(removeEl){
-        if(this.isVisible()){
-            this.animateTarget = null;
-            this.hide();
-        }
-        Roo.EventManager.removeResizeListener(this.adjustViewport, this);
-        if(this.tabs){
-            this.tabs.destroy(removeEl);
-        }
-        Roo.destroy(
-             this.shim,
-             this.proxy,
-             this.resizer,
-             this.close,
-             this.mask
-        );
-        if(this.dd){
-            this.dd.unreg();
-        }
-        if(this.buttons){
-           for(var i = 0, len = this.buttons.length; i < len; i++){
-               this.buttons[i].destroy();
-           }
+};
+Roo.extend(Roo.tree.AsyncTreeNode, Roo.tree.TreeNode, {
+    expand : function(deep, anim, callback){
+        if(this.loading){ // if an async load is already running, waiting til it's done
+            var timer;
+            var f = function(){
+                if(!this.loading){ // done loading
+                    clearInterval(timer);
+                    this.expand(deep, anim, callback);
+                }
+            }.createDelegate(this);
+            timer = setInterval(f, 200);
+            return;
         }
-        this.el.removeAllListeners();
-        if(removeEl === true){
-            this.el.update("");
-            this.el.remove();
+        if(!this.loaded){
+            if(this.fireEvent("beforeload", this) === false){
+                return;
+            }
+            this.loading = true;
+            this.ui.beforeLoad(this);
+            var loader = this.loader || this.attributes.loader || this.getOwnerTree().getLoader();
+            if(loader){
+                loader.load(this, this.loadComplete.createDelegate(this, [deep, anim, callback]));
+                return;
+            }
         }
-        Roo.DialogManager.unregister(this);
+        Roo.tree.AsyncTreeNode.superclass.expand.call(this, deep, anim, callback);
     },
-
-    // private
-    startMove : function(){
-        if(this.proxyDrag){
-            this.proxy.show();
-        }
-        if(this.constraintoviewport !== false){
-            this.dd.constrainTo(document.body, {right: this.shadowOffset, bottom: this.shadowOffset});
-        }
+    
+    /**
+     * Returns true if this node is currently loading
+     * @return {Boolean}
+     */
+    isLoading : function(){
+        return this.loading;  
     },
-
-    // private
-    endMove : function(){
-        if(!this.proxyDrag){
-            Roo.dd.DD.prototype.endDrag.apply(this.dd, arguments);
-        }else{
-            Roo.dd.DDProxy.prototype.endDrag.apply(this.dd, arguments);
-            this.proxy.hide();
-        }
-        this.refreshSize();
-        this.adjustAssets();
-        this.focus();
-        this.fireEvent("move", this, this.xy[0], this.xy[1]);
+    
+    loadComplete : function(deep, anim, callback){
+        this.loading = false;
+        this.loaded = true;
+        this.ui.afterLoad(this);
+        this.fireEvent("load", this);
+        this.expand(deep, anim, callback);
     },
-
+    
     /**
-     * Brings this dialog to the front of any other visible dialogs
-     * @return {Roo.BasicDialog} this
+     * Returns true if this node has been loaded
+     * @return {Boolean}
      */
-    toFront : function(){
-        Roo.DialogManager.bringToFront(this);
-        return this;
+    isLoaded : function(){
+        return this.loaded;
+    },
+    
+    hasChildNodes : function(){
+        if(!this.isLeaf() && !this.loaded){
+            return true;
+        }else{
+            return Roo.tree.AsyncTreeNode.superclass.hasChildNodes.call(this);
+        }
     },
 
     /**
-     * Sends this dialog to the back (under) of any other visible dialogs
-     * @return {Roo.BasicDialog} this
+     * Trigger a reload for this node
+     * @param {Function} callback
      */
-    toBack : function(){
-        Roo.DialogManager.sendToBack(this);
-        return this;
+    reload : function(callback){
+        this.collapse(false, false);
+        while(this.firstChild){
+            this.removeChild(this.firstChild);
+        }
+        this.childrenRendered = false;
+        this.loaded = false;
+        if(this.isHiddenRoot()){
+            this.expanded = false;
+        }
+        this.expand(false, false, callback);
+    }
+});/*
+ * 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.tree.TreeNodeUI
+ * @constructor
+ * @param {Object} node The node to render
+ * The TreeNode UI implementation is separate from the
+ * tree implementation. Unless you are customizing the tree UI,
+ * you should never have to use this directly.
+ */
+Roo.tree.TreeNodeUI = function(node){
+    this.node = node;
+    this.rendered = false;
+    this.animating = false;
+    this.emptyIcon = Roo.BLANK_IMAGE_URL;
+};
+
+Roo.tree.TreeNodeUI.prototype = {
+    removeChild : function(node){
+        if(this.rendered){
+            this.ctNode.removeChild(node.ui.getEl());
+        }
     },
 
-    /**
-     * Centers this dialog in the viewport
-     * @return {Roo.BasicDialog} this
-     */
-    center : function(){
-        var xy = this.el.getCenterXY(true);
-        this.moveTo(xy[0], xy[1]);
-        return this;
+    beforeLoad : function(){
+         this.addClass("x-tree-node-loading");
     },
 
-    /**
-     * Moves the dialog's top-left corner to the specified point
-     * @param {Number} x
-     * @param {Number} y
-     * @return {Roo.BasicDialog} this
-     */
-    moveTo : function(x, y){
-        this.xy = [x,y];
-        if(this.isVisible()){
-            this.el.setXY(this.xy);
-            this.adjustAssets();
-        }
-        return this;
+    afterLoad : function(){
+         this.removeClass("x-tree-node-loading");
     },
 
-    /**
-     * Aligns the dialog to the specified element
-     * @param {String/HTMLElement/Roo.Element} element The element to align to.
-     * @param {String} position The position to align to (see {@link Roo.Element#alignTo} for more details).
-     * @param {Array} offsets (optional) Offset the positioning by [x, y]
-     * @return {Roo.BasicDialog} this
-     */
-    alignTo : function(element, position, offsets){
-        this.xy = this.el.getAlignToXY(element, position, offsets);
-        if(this.isVisible()){
-            this.el.setXY(this.xy);
-            this.adjustAssets();
+    onTextChange : function(node, text, oldText){
+        if(this.rendered){
+            this.textNode.innerHTML = text;
         }
-        return this;
     },
 
-    /**
-     * Anchors an element to another element and realigns it when the window is resized.
-     * @param {String/HTMLElement/Roo.Element} element The element to align to.
-     * @param {String} position The position to align to (see {@link Roo.Element#alignTo} for more details)
-     * @param {Array} offsets (optional) Offset the positioning by [x, y]
-     * @param {Boolean/Number} monitorScroll (optional) true to monitor body scroll and reposition. If this parameter
-     * is a number, it is used as the buffer delay (defaults to 50ms).
-     * @return {Roo.BasicDialog} this
-     */
-    anchorTo : function(el, alignment, offsets, monitorScroll){
-        var action = function(){
-            this.alignTo(el, alignment, offsets);
-        };
-        Roo.EventManager.onWindowResize(action, this);
-        var tm = typeof monitorScroll;
-        if(tm != 'undefined'){
-            Roo.EventManager.on(window, 'scroll', action, this,
-                {buffer: tm == 'number' ? monitorScroll : 50});
+    onDisableChange : function(node, state){
+        this.disabled = state;
+        if(state){
+            this.addClass("x-tree-node-disabled");
+        }else{
+            this.removeClass("x-tree-node-disabled");
         }
-        action.call(this);
-        return this;
     },
 
-    /**
-     * Returns true if the dialog is visible
-     * @return {Boolean}
-     */
-    isVisible : function(){
-        return this.el.isVisible();
+    onSelectedChange : function(state){
+        if(state){
+            this.focus();
+            this.addClass("x-tree-selected");
+        }else{
+            //this.blur();
+            this.removeClass("x-tree-selected");
+        }
     },
 
-    // private
-    animHide : function(callback){
-        var b = Roo.get(this.animateTarget).getBox();
-        this.proxy.show();
-        this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height);
-        this.el.hide();
-        this.proxy.setBounds(b.x, b.y, b.width, b.height, true, .35,
-                    this.hideEl.createDelegate(this, [callback]));
+    onMove : function(tree, node, oldParent, newParent, index, refNode){
+        this.childIndent = null;
+        if(this.rendered){
+            var targetNode = newParent.ui.getContainer();
+            if(!targetNode){//target not rendered
+                this.holder = document.createElement("div");
+                this.holder.appendChild(this.wrap);
+                return;
+            }
+            var insertBefore = refNode ? refNode.ui.getEl() : null;
+            if(insertBefore){
+                targetNode.insertBefore(this.wrap, insertBefore);
+            }else{
+                targetNode.appendChild(this.wrap);
+            }
+            this.node.renderIndent(true);
+        }
     },
 
-    /**
-     * Hides the dialog.
-     * @param {Function} callback (optional) Function to call when the dialog is hidden
-     * @return {Roo.BasicDialog} this
-     */
-    hide : function(callback){
-        if (this.fireEvent("beforehide", this) === false){
-            return;
-        }
-        if(this.shadow){
-            this.shadow.hide();
-        }
-        if(this.shim) {
-          this.shim.hide();
-        }
-        // sometimes animateTarget seems to get set.. causing problems...
-        // this just double checks..
-        if(this.animateTarget && Roo.get(this.animateTarget)) {
-           this.animHide(callback);
-        }else{
-            this.el.hide();
-            this.hideEl(callback);
+    addClass : function(cls){
+        if(this.elNode){
+            Roo.fly(this.elNode).addClass(cls);
         }
-        return this;
     },
 
-    // private
-    hideEl : function(callback){
-        this.proxy.hide();
-        if(this.modal){
-            this.mask.hide();
-            Roo.get(document.body).removeClass("x-body-masked");
-        }
-        this.fireEvent("hide", this);
-        if(typeof callback == "function"){
-            callback();
+    removeClass : function(cls){
+        if(this.elNode){
+            Roo.fly(this.elNode).removeClass(cls);
         }
     },
 
-    // private
-    hideAction : function(){
-        this.setLeft("-10000px");
-        this.setTop("-10000px");
-        this.setStyle("visibility", "hidden");
+    remove : function(){
+        if(this.rendered){
+            this.holder = document.createElement("div");
+            this.holder.appendChild(this.wrap);
+        }
     },
 
-    // private
-    refreshSize : function(){
-        this.size = this.el.getSize();
-        this.xy = this.el.getXY();
-        Roo.state.Manager.set(this.stateId || this.el.id + "-state", this.el.getBox());
+    fireEvent : function(){
+        return this.node.fireEvent.apply(this.node, arguments);
     },
 
-    // private
-    // z-index is managed by the DialogManager and may be overwritten at any time
-    setZIndex : function(index){
-        if(this.modal){
-            this.mask.setStyle("z-index", index);
+    initEvents : function(){
+        this.node.on("move", this.onMove, this);
+        var E = Roo.EventManager;
+        var a = this.anchor;
+
+        var el = Roo.fly(a, '_treeui');
+
+        if(Roo.isOpera){ // opera render bug ignores the CSS
+            el.setStyle("text-decoration", "none");
         }
-        if(this.shim){
-            this.shim.setStyle("z-index", ++index);
+
+        el.on("click", this.onClick, this);
+        el.on("dblclick", this.onDblClick, this);
+
+        if(this.checkbox){
+            Roo.EventManager.on(this.checkbox,
+                    Roo.isIE ? 'click' : 'change', this.onCheckChange, this);
         }
-        if(this.shadow){
-            this.shadow.setZIndex(++index);
+
+        el.on("contextmenu", this.onContextMenu, this);
+
+        var icon = Roo.fly(this.iconNode);
+        icon.on("click", this.onClick, this);
+        icon.on("dblclick", this.onDblClick, this);
+        icon.on("contextmenu", this.onContextMenu, this);
+        E.on(this.ecNode, "click", this.ecClick, this, true);
+
+        if(this.node.disabled){
+            this.addClass("x-tree-node-disabled");
         }
-        this.el.setStyle("z-index", ++index);
-        if(this.proxy){
-            this.proxy.setStyle("z-index", ++index);
+        if(this.node.hidden){
+            this.addClass("x-tree-node-disabled");
         }
-        if(this.resizer){
-            this.resizer.proxy.setStyle("z-index", ++index);
+        var ot = this.node.getOwnerTree();
+        var dd = ot ? (ot.enableDD || ot.enableDrag || ot.enableDrop) : false;
+        if(dd && (!this.node.isRoot || ot.rootVisible)){
+            Roo.dd.Registry.register(this.elNode, {
+                node: this.node,
+                handles: this.getDDHandles(),
+                isHandle: false
+            });
         }
+    },
 
-        this.lastZIndex = index;
+    getDDHandles : function(){
+        return [this.iconNode, this.textNode];
     },
 
-    /**
-     * Returns the element for this dialog
-     * @return {Roo.Element} The underlying dialog Element
-     */
-    getEl : function(){
-        return this.el;
-    }
-});
+    hide : function(){
+        if(this.rendered){
+            this.wrap.style.display = "none";
+        }
+    },
 
-/**
- * @class Roo.DialogManager
- * Provides global access to BasicDialogs that have been created and
- * support for z-indexing (layering) multiple open dialogs.
- */
-Roo.DialogManager = function(){
-    var list = {};
-    var accessList = [];
-    var front = null;
+    show : function(){
+        if(this.rendered){
+            this.wrap.style.display = "";
+        }
+    },
 
-    // private
-    var sortDialogs = function(d1, d2){
-        return (!d1._lastAccess || d1._lastAccess < d2._lastAccess) ? -1 : 1;
-    };
+    onContextMenu : function(e){
+        if (this.node.hasListener("contextmenu") || this.node.getOwnerTree().hasListener("contextmenu")) {
+            e.preventDefault();
+            this.focus();
+            this.fireEvent("contextmenu", this.node, e);
+        }
+    },
 
-    // private
-    var orderDialogs = function(){
-        accessList.sort(sortDialogs);
-        var seed = Roo.DialogManager.zseed;
-        for(var i = 0, len = accessList.length; i < len; i++){
-            var dlg = accessList[i];
-            if(dlg){
-                dlg.setZIndex(seed + (i*10));
+    onClick : function(e){
+        if(this.dropping){
+            e.stopEvent();
+            return;
+        }
+        if(this.fireEvent("beforeclick", this.node, e) !== false){
+            if(!this.disabled && this.node.attributes.href){
+                this.fireEvent("click", this.node, e);
+                return;
             }
+            e.preventDefault();
+            if(this.disabled){
+                return;
+            }
+
+            if(this.node.attributes.singleClickExpand && !this.animating && this.node.hasChildNodes()){
+                this.node.toggle();
+            }
+
+            this.fireEvent("click", this.node, e);
+        }else{
+            e.stopEvent();
         }
-    };
+    },
 
-    return {
-        /**
-         * The starting z-index for BasicDialogs (defaults to 9000)
-         * @type Number The z-index value
-         */
-        zseed : 9000,
+    onDblClick : function(e){
+        e.preventDefault();
+        if(this.disabled){
+            return;
+        }
+        if(this.checkbox){
+            this.toggleCheck();
+        }
+        if(!this.animating && this.node.hasChildNodes()){
+            this.node.toggle();
+        }
+        this.fireEvent("dblclick", this.node, e);
+    },
 
-        // private
-        register : function(dlg){
-            list[dlg.id] = dlg;
-            accessList.push(dlg);
-        },
+    onCheckChange : function(){
+        var checked = this.checkbox.checked;
+        this.node.attributes.checked = checked;
+        this.fireEvent('checkchange', this.node, checked);
+    },
 
-        // private
-        unregister : function(dlg){
-            delete list[dlg.id];
-            var i=0;
-            var len=0;
-            if(!accessList.indexOf){
-                for(  i = 0, len = accessList.length; i < len; i++){
-                    if(accessList[i] == dlg){
-                        accessList.splice(i, 1);
-                        return;
-                    }
-                }
-            }else{
-                 i = accessList.indexOf(dlg);
-                if(i != -1){
-                    accessList.splice(i, 1);
-                }
-            }
-        },
+    ecClick : function(e){
+        if(!this.animating && this.node.hasChildNodes()){
+            this.node.toggle();
+        }
+    },
 
-        /**
-         * Gets a registered dialog by id
-         * @param {String/Object} id The id of the dialog or a dialog
-         * @return {Roo.BasicDialog} this
-         */
-        get : function(id){
-            return typeof id == "object" ? id : list[id];
-        },
+    startDrop : function(){
+        this.dropping = true;
+    },
 
-        /**
-         * Brings the specified dialog to the front
-         * @param {String/Object} dlg The id of the dialog or a dialog
-         * @return {Roo.BasicDialog} this
-         */
-        bringToFront : function(dlg){
-            dlg = this.get(dlg);
-            if(dlg != front){
-                front = dlg;
-                dlg._lastAccess = new Date().getTime();
-                orderDialogs();
-            }
-            return dlg;
-        },
+    // delayed drop so the click event doesn't get fired on a drop
+    endDrop : function(){
+       setTimeout(function(){
+           this.dropping = false;
+       }.createDelegate(this), 50);
+    },
 
-        /**
-         * Sends the specified dialog to the back
-         * @param {String/Object} dlg The id of the dialog or a dialog
-         * @return {Roo.BasicDialog} this
-         */
-        sendToBack : function(dlg){
-            dlg = this.get(dlg);
-            dlg._lastAccess = -(new Date().getTime());
-            orderDialogs();
-            return dlg;
-        },
+    expand : function(){
+        this.updateExpandIcon();
+        this.ctNode.style.display = "";
+    },
 
-        /**
-         * Hides all dialogs
-         */
-        hideAll : function(){
-            for(var id in list){
-                if(list[id] && typeof list[id] != "function" && list[id].isVisible()){
-                    list[id].hide();
-                }
-            }
+    focus : function(){
+        if(!this.node.preventHScroll){
+            try{this.anchor.focus();
+            }catch(e){}
+        }else if(!Roo.isIE){
+            try{
+                var noscroll = this.node.getOwnerTree().getTreeEl().dom;
+                var l = noscroll.scrollLeft;
+                this.anchor.focus();
+                noscroll.scrollLeft = l;
+            }catch(e){}
         }
-    };
-}();
+    },
 
-/**
- * @class Roo.LayoutDialog
- * @extends Roo.BasicDialog
- * Dialog which provides adjustments for working with a layout in a Dialog.
- * Add your necessary layout config options to the dialog's config.<br>
- * Example usage (including a nested layout):
- * <pre><code>
-if(!dialog){
-    dialog = new Roo.LayoutDialog("download-dlg", {
-        modal: true,
-        width:600,
-        height:450,
-        shadow:true,
-        minWidth:500,
-        minHeight:350,
-        autoTabs:true,
-        proxyDrag:true,
-        // layout config merges with the dialog config
-        center:{
-            tabPosition: "top",
-            alwaysShowTabs: true
+    toggleCheck : function(value){
+        var cb = this.checkbox;
+        if(cb){
+            cb.checked = (value === undefined ? !cb.checked : value);
         }
-    });
-    dialog.addKeyListener(27, dialog.hide, dialog);
-    dialog.setDefaultButton(dialog.addButton("Close", dialog.hide, dialog));
-    dialog.addButton("Build It!", this.getDownload, this);
+    },
 
-    // we can even add nested layouts
-    var innerLayout = new Roo.BorderLayout("dl-inner", {
-        east: {
-            initialSize: 200,
-            autoScroll:true,
-            split:true
-        },
-        center: {
-            autoScroll:true
-        }
-    });
-    innerLayout.beginUpdate();
-    innerLayout.add("east", new Roo.ContentPanel("dl-details"));
-    innerLayout.add("center", new Roo.ContentPanel("selection-panel"));
-    innerLayout.endUpdate(true);
+    blur : function(){
+        try{
+            this.anchor.blur();
+        }catch(e){}
+    },
 
-    var layout = dialog.getLayout();
-    layout.beginUpdate();
-    layout.add("center", new Roo.ContentPanel("standard-panel",
-                        {title: "Download the Source", fitToFrame:true}));
-    layout.add("center", new Roo.NestedLayoutPanel(innerLayout,
-               {title: "Build your own roo.js"}));
-    layout.getRegion("center").showPanel(sp);
-    layout.endUpdate();
-}
-</code></pre>
-    * @constructor
-    * @param {String/HTMLElement/Roo.Element} el The id of or container element, or config
-    * @param {Object} config configuration options
-  */
-Roo.LayoutDialog = function(el, cfg){
-    
-    var config=  cfg;
-    if (typeof(cfg) == 'undefined') {
-        config = Roo.apply({}, el);
-        // not sure why we use documentElement here.. - it should always be body.
-        // IE7 borks horribly if we use documentElement.
-        // webkit also does not like documentElement - it creates a body element...
-        el = Roo.get( document.body || document.documentElement ).createChild();
-        //config.autoCreate = true;
-    }
-    
-    
-    config.autoTabs = false;
-    Roo.LayoutDialog.superclass.constructor.call(this, el, config);
-    this.body.setStyle({overflow:"hidden", position:"relative"});
-    this.layout = new Roo.BorderLayout(this.body.dom, config);
-    this.layout.monitorWindowResize = false;
-    this.el.addClass("x-dlg-auto-layout");
-    // fix case when center region overwrites center function
-    this.center = Roo.BasicDialog.prototype.center;
-    this.on("show", this.layout.layout, this.layout, true);
-    if (config.items) {
-        var xitems = config.items;
-        delete config.items;
-        Roo.each(xitems, this.addxtype, this);
-    }
-    
-    
-};
-Roo.extend(Roo.LayoutDialog, Roo.BasicDialog, {
-    /**
-     * Ends update of the layout <strike>and resets display to none</strike>. Use standard beginUpdate/endUpdate on the layout.
-     * @deprecated
-     */
-    endUpdate : function(){
-        this.layout.endUpdate();
+    animExpand : function(callback){
+        var ct = Roo.get(this.ctNode);
+        ct.stopFx();
+        if(!this.node.hasChildNodes()){
+            this.updateExpandIcon();
+            this.ctNode.style.display = "";
+            Roo.callback(callback);
+            return;
+        }
+        this.animating = true;
+        this.updateExpandIcon();
+
+        ct.slideIn('t', {
+           callback : function(){
+               this.animating = false;
+               Roo.callback(callback);
+            },
+            scope: this,
+            duration: this.node.ownerTree.duration || .25
+        });
     },
 
-    /**
-     * Begins an update of the layout <strike>and sets display to block and visibility to hidden</strike>. Use standard beginUpdate/endUpdate on the layout.
-     *  @deprecated
-     */
-    beginUpdate : function(){
-        this.layout.beginUpdate();
+    highlight : function(){
+        var tree = this.node.getOwnerTree();
+        Roo.fly(this.wrap).highlight(
+            tree.hlColor || "C3DAF9",
+            {endColor: tree.hlBaseColor}
+        );
     },
 
-    /**
-     * Get the BorderLayout for this dialog
-     * @return {Roo.BorderLayout}
-     */
-    getLayout : function(){
-        return this.layout;
+    collapse : function(){
+        this.updateExpandIcon();
+        this.ctNode.style.display = "none";
     },
 
-    showEl : function(){
-        Roo.LayoutDialog.superclass.showEl.apply(this, arguments);
-        if(Roo.isIE7){
-            this.layout.layout();
-        }
+    animCollapse : function(callback){
+        var ct = Roo.get(this.ctNode);
+        ct.enableDisplayMode('block');
+        ct.stopFx();
+
+        this.animating = true;
+        this.updateExpandIcon();
+
+        ct.slideOut('t', {
+            callback : function(){
+               this.animating = false;
+               Roo.callback(callback);
+            },
+            scope: this,
+            duration: this.node.ownerTree.duration || .25
+        });
     },
 
-    // private
-    // Use the syncHeightBeforeShow config option to control this automatically
-    syncBodyHeight : function(){
-        Roo.LayoutDialog.superclass.syncBodyHeight.call(this);
-        if(this.layout){this.layout.layout();}
+    getContainer : function(){
+        return this.ctNode;
     },
-    
-      /**
-     * Add an xtype element (actually adds to the layout.)
-     * @return {Object} xdata xtype object data.
-     */
-    
-    addxtype : function(c) {
-        return this.layout.addxtype(c);
-    }
-});/*
- * 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.MessageBox
- * Utility class for generating different styles of message boxes.  The alias Roo.Msg can also be used.
- * Example usage:
- *<pre><code>
-// Basic alert:
-Roo.Msg.alert('Status', 'Changes saved successfully.');
 
-// Prompt for user data:
-Roo.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
-    if (btn == 'ok'){
-        // process text value...
-    }
-});
+    getEl : function(){
+        return this.wrap;
+    },
 
-// Show a dialog using config options:
-Roo.Msg.show({
-   title:'Save Changes?',
-   msg: 'Your are closing a tab that has unsaved changes. Would you like to save your changes?',
-   buttons: Roo.Msg.YESNOCANCEL,
-   fn: processResult,
-   animEl: 'elId'
-});
-</code></pre>
- * @singleton
- */
-Roo.MessageBox = function(){
-    var dlg, opt, mask, waitTimer;
-    var bodyEl, msgEl, textboxEl, textareaEl, progressEl, pp;
-    var buttons, activeTextEl, bwidth;
+    appendDDGhost : function(ghostNode){
+        ghostNode.appendChild(this.elNode.cloneNode(true));
+    },
 
-    // private
-    var handleButton = function(button){
-        dlg.hide();
-        Roo.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value], 1);
-    };
+    getDDRepairXY : function(){
+        return Roo.lib.Dom.getXY(this.iconNode);
+    },
 
-    // private
-    var handleHide = function(){
-        if(opt && opt.cls){
-            dlg.el.removeClass(opt.cls);
-        }
-        if(waitTimer){
-            Roo.TaskMgr.stop(waitTimer);
-            waitTimer = null;
-        }
-    };
+    onRender : function(){
+        this.render();
+    },
 
-    // private
-    var updateButtons = function(b){
-        var width = 0;
-        if(!b){
-            buttons["ok"].hide();
-            buttons["cancel"].hide();
-            buttons["yes"].hide();
-            buttons["no"].hide();
-            dlg.footer.dom.style.display = 'none';
-            return width;
-        }
-        dlg.footer.dom.style.display = '';
-        for(var k in buttons){
-            if(typeof buttons[k] != "function"){
-                if(b[k]){
-                    buttons[k].show();
-                    buttons[k].setText(typeof b[k] == "string" ? b[k] : Roo.MessageBox.buttonText[k]);
-                    width += buttons[k].el.getWidth()+15;
-                }else{
-                    buttons[k].hide();
-                }
+    render : function(bulkRender){
+        var n = this.node, a = n.attributes;
+        var targetNode = n.parentNode ?
+              n.parentNode.ui.getContainer() : n.ownerTree.innerCt.dom;
+
+        if(!this.rendered){
+            this.rendered = true;
+
+            this.renderElements(n, a, targetNode, bulkRender);
+
+            if(a.qtip){
+               if(this.textNode.setAttributeNS){
+                   this.textNode.setAttributeNS("ext", "qtip", a.qtip);
+                   if(a.qtipTitle){
+                       this.textNode.setAttributeNS("ext", "qtitle", a.qtipTitle);
+                   }
+               }else{
+                   this.textNode.setAttribute("ext:qtip", a.qtip);
+                   if(a.qtipTitle){
+                       this.textNode.setAttribute("ext:qtitle", a.qtipTitle);
+                   }
+               }
+            }else if(a.qtipCfg){
+                a.qtipCfg.target = Roo.id(this.textNode);
+                Roo.QuickTips.register(a.qtipCfg);
+            }
+            this.initEvents();
+            if(!this.node.expanded){
+                this.updateExpandIcon();
+            }
+        }else{
+            if(bulkRender === true) {
+                targetNode.appendChild(this.wrap);
             }
         }
-        return width;
-    };
+    },
 
-    // private
-    var handleEsc = function(d, k, e){
-        if(opt && opt.closable !== false){
-            dlg.hide();
-        }
-        if(e){
-            e.stopEvent();
+    renderElements : function(n, a, targetNode, bulkRender)
+    {
+        // add some indent caching, this helps performance when rendering a large tree
+        this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
+        var t = n.getOwnerTree();
+        var txt = t && t.renderer ? t.renderer(n.attributes) : Roo.util.Format.htmlEncode(n.text);
+        if (typeof(n.attributes.html) != 'undefined') {
+            txt = n.attributes.html;
         }
-    };
+        var tip = t && t.rendererTip ? t.rendererTip(n.attributes) : txt;
+        var cb = typeof a.checked == 'boolean';
+        var href = a.href ? a.href : Roo.isGecko ? "" : "#";
+        var buf = ['<li class="x-tree-node"><div class="x-tree-node-el ', a.cls,'">',
+            '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
+            '<img src="', this.emptyIcon, '" class="x-tree-ec-icon" />',
+            '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',
+            cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : ' />')) : '',
+            '<a hidefocus="on" href="',href,'" tabIndex="1" ',
+             a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", 
+                '><span unselectable="on" qtip="' , tip ,'">',txt,"</span></a></div>",
+            '<ul class="x-tree-node-ct" style="display:none;"></ul>',
+            "</li>"];
 
-    return {
-        /**
-         * Returns a reference to the underlying {@link Roo.BasicDialog} element
-         * @return {Roo.BasicDialog} The BasicDialog element
-         */
-        getDialog : function(){
-           if(!dlg){
-                dlg = new Roo.BasicDialog("x-msg-box", {
-                    autoCreate : true,
-                    shadow: true,
-                    draggable: true,
-                    resizable:false,
-                    constraintoviewport:false,
-                    fixedcenter:true,
-                    collapsible : false,
-                    shim:true,
-                    modal: true,
-                    width:400, height:100,
-                    buttonAlign:"center",
-                    closeClick : function(){
-                        if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){
-                            handleButton("no");
-                        }else{
-                            handleButton("cancel");
-                        }
-                    }
-                });
-                dlg.on("hide", handleHide);
-                mask = dlg.mask;
-                dlg.addKeyListener(27, handleEsc);
-                buttons = {};
-                var bt = this.buttonText;
-                buttons["ok"] = dlg.addButton(bt["ok"], handleButton.createCallback("ok"));
-                buttons["yes"] = dlg.addButton(bt["yes"], handleButton.createCallback("yes"));
-                buttons["no"] = dlg.addButton(bt["no"], handleButton.createCallback("no"));
-                buttons["cancel"] = dlg.addButton(bt["cancel"], handleButton.createCallback("cancel"));
-                bodyEl = dlg.body.createChild({
+        if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
+            this.wrap = Roo.DomHelper.insertHtml("beforeBegin",
+                                n.nextSibling.ui.getEl(), buf.join(""));
+        }else{
+            this.wrap = Roo.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
+        }
 
-                    html:'<span class="roo-mb-text"></span><br /><input type="text" class="roo-mb-input" /><textarea class="roo-mb-textarea"></textarea><div class="roo-mb-progress-wrap"><div class="roo-mb-progress"><div class="roo-mb-progress-bar">&#160;</div></div></div>'
-                });
-                msgEl = bodyEl.dom.firstChild;
-                textboxEl = Roo.get(bodyEl.dom.childNodes[2]);
-                textboxEl.enableDisplayMode();
-                textboxEl.addKeyListener([10,13], function(){
-                    if(dlg.isVisible() && opt && opt.buttons){
-                        if(opt.buttons.ok){
-                            handleButton("ok");
-                        }else if(opt.buttons.yes){
-                            handleButton("yes");
-                        }
-                    }
-                });
-                textareaEl = Roo.get(bodyEl.dom.childNodes[3]);
-                textareaEl.enableDisplayMode();
-                progressEl = Roo.get(bodyEl.dom.childNodes[4]);
-                progressEl.enableDisplayMode();
-                var pf = progressEl.dom.firstChild;
-                if (pf) {
-                    pp = Roo.get(pf.firstChild);
-                    pp.setHeight(pf.offsetHeight);
-                }
-                
-            }
-            return dlg;
-        },
+        this.elNode = this.wrap.childNodes[0];
+        this.ctNode = this.wrap.childNodes[1];
+        var cs = this.elNode.childNodes;
+        this.indentNode = cs[0];
+        this.ecNode = cs[1];
+        this.iconNode = cs[2];
+        var index = 3;
+        if(cb){
+            this.checkbox = cs[3];
+            index++;
+        }
+        this.anchor = cs[index];
+        this.textNode = cs[index].firstChild;
+    },
 
-        /**
-         * Updates the message box body text
-         * @param {String} text (optional) Replaces the message box element's innerHTML with the specified string (defaults to
-         * the XHTML-compliant non-breaking space character '&amp;#160;')
-         * @return {Roo.MessageBox} This message box
-         */
-        updateText : function(text){
-            if(!dlg.isVisible() && !opt.width){
-                dlg.resizeTo(this.maxWidth, 100); // resize first so content is never clipped from previous shows
-            }
-            msgEl.innerHTML = text || '&#160;';
-      
-            var cw =  Math.max(msgEl.offsetWidth, msgEl.parentNode.scrollWidth);
-            //Roo.log("guesed size: " + JSON.stringify([cw,msgEl.offsetWidth, msgEl.parentNode.scrollWidth]));
-            var w = Math.max(
-                    Math.min(opt.width || cw , this.maxWidth), 
-                    Math.max(opt.minWidth || this.minWidth, bwidth)
-            );
-            if(opt.prompt){
-                activeTextEl.setWidth(w);
-            }
-            if(dlg.isVisible()){
-                dlg.fixedcenter = false;
-            }
-            // to big, make it scroll. = But as usual stupid IE does not support
-            // !important..
-            
-            if ( bodyEl.getHeight() > (Roo.lib.Dom.getViewHeight() - 100)) {
-                bodyEl.setHeight ( Roo.lib.Dom.getViewHeight() - 100 );
-                bodyEl.dom.style.overflowY = 'auto' + ( Roo.isIE ? '' : ' !important');
-            } else {
-                bodyEl.dom.style.height = '';
-                bodyEl.dom.style.overflowY = '';
-            }
-            if (cw > w) {
-                bodyEl.dom.style.get = 'auto' + ( Roo.isIE ? '' : ' !important');
-            } else {
-                bodyEl.dom.style.overflowX = '';
-            }
-            
-            dlg.setContentSize(w, bodyEl.getHeight());
-            if(dlg.isVisible()){
-                dlg.fixedcenter = true;
-            }
-            return this;
-        },
+    getAnchor : function(){
+        return this.anchor;
+    },
 
-        /**
-         * Updates a progress-style message box's text and progress bar.  Only relevant on message boxes
-         * initiated via {@link Roo.MessageBox#progress} or by calling {@link Roo.MessageBox#show} with progress: true.
-         * @param {Number} value Any number between 0 and 1 (e.g., .5)
-         * @param {String} text (optional) If defined, the message box's body text is replaced with the specified string (defaults to undefined)
-         * @return {Roo.MessageBox} This message box
-         */
-        updateProgress : function(value, text){
-            if(text){
-                this.updateText(text);
-            }
-            if (pp) { // weird bug on my firefox - for some reason this is not defined
-                pp.setWidth(Math.floor(value*progressEl.dom.firstChild.offsetWidth));
-            }
-            return this;
-        },        
+    getTextEl : function(){
+        return this.textNode;
+    },
 
-        /**
-         * Returns true if the message box is currently displayed
-         * @return {Boolean} True if the message box is visible, else false
-         */
-        isVisible : function(){
-            return dlg && dlg.isVisible();  
-        },
+    getIconEl : function(){
+        return this.iconNode;
+    },
 
-        /**
-         * Hides the message box if it is displayed
-         */
-        hide : function(){
-            if(this.isVisible()){
-                dlg.hide();
-            }  
-        },
+    isChecked : function(){
+        return this.checkbox ? this.checkbox.checked : false;
+    },
 
-        /**
-         * Displays a new message box, or reinitializes an existing message box, based on the config options
-         * passed in. All functions (e.g. prompt, alert, etc) on MessageBox call this function internally.
-         * The following config object properties are supported:
-         * <pre>
-Property    Type             Description
-----------  ---------------  ------------------------------------------------------------------------------------
-animEl            String/Element   An id or Element from which the message box should animate as it opens and
-                                   closes (defaults to undefined)
-buttons           Object/Boolean   A button config object (e.g., Roo.MessageBox.OKCANCEL or {ok:'Foo',
-                                   cancel:'Bar'}), or false to not show any buttons (defaults to false)
-closable          Boolean          False to hide the top-right close button (defaults to true).  Note that
-                                   progress and wait dialogs will ignore this property and always hide the
-                                   close button as they can only be closed programmatically.
-cls               String           A custom CSS class to apply to the message box element
-defaultTextHeight Number           The default height in pixels of the message box's multiline textarea if
-                                   displayed (defaults to 75)
-fn                Function         A callback function to execute after closing the dialog.  The arguments to the
-                                   function will be btn (the name of the button that was clicked, if applicable,
-                                   e.g. "ok"), and text (the value of the active text field, if applicable).
-                                   Progress and wait dialogs will ignore this option since they do not respond to
-                                   user actions and can only be closed programmatically, so any required function
-                                   should be called by the same code after it closes the dialog.
-icon              String           A CSS class that provides a background image to be used as an icon for
-                                   the dialog (e.g., Roo.MessageBox.WARNING or 'custom-class', defaults to '')
-maxWidth          Number           The maximum width in pixels of the message box (defaults to 600)
-minWidth          Number           The minimum width in pixels of the message box (defaults to 100)
-modal             Boolean          False to allow user interaction with the page while the message box is
-                                   displayed (defaults to true)
-msg               String           A string that will replace the existing message box body text (defaults
-                                   to the XHTML-compliant non-breaking space character '&#160;')
-multiline         Boolean          True to prompt the user to enter multi-line text (defaults to false)
-progress          Boolean          True to display a progress bar (defaults to false)
-progressText      String           The text to display inside the progress bar if progress = true (defaults to '')
-prompt            Boolean          True to prompt the user to enter single-line text (defaults to false)
-proxyDrag         Boolean          True to display a lightweight proxy while dragging (defaults to false)
-title             String           The title text
-value             String           The string value to set into the active textbox element if displayed
-wait              Boolean          True to display a progress bar (defaults to false)
-width             Number           The width of the dialog in pixels
-</pre>
-         *
-         * Example usage:
-         * <pre><code>
-Roo.Msg.show({
-   title: 'Address',
-   msg: 'Please enter your address:',
-   width: 300,
-   buttons: Roo.MessageBox.OKCANCEL,
-   multiline: true,
-   fn: saveAddress,
-   animEl: 'addAddressBtn'
-});
-</code></pre>
-         * @param {Object} config Configuration options
-         * @return {Roo.MessageBox} This message box
-         */
-        show : function(options)
-        {
-            
-            // this causes nightmares if you show one dialog after another
-            // especially on callbacks..
-             
-            if(this.isVisible()){
-                
-                this.hide();
-                Roo.log("[Roo.Messagebox] Show called while message displayed:" );
-                Roo.log("Old Dialog Message:" +  msgEl.innerHTML );
-                Roo.log("New Dialog Message:" +  options.msg )
-                //this.alert("ERROR", "Multiple dialogs where displayed at the same time");
-                //throw "Roo.MessageBox ERROR : Multiple dialogs where displayed at the same time";
-                
-            }
-            var d = this.getDialog();
-            opt = options;
-            d.setTitle(opt.title || "&#160;");
-            d.close.setDisplayed(opt.closable !== false);
-            activeTextEl = textboxEl;
-            opt.prompt = opt.prompt || (opt.multiline ? true : false);
-            if(opt.prompt){
-                if(opt.multiline){
-                    textboxEl.hide();
-                    textareaEl.show();
-                    textareaEl.setHeight(typeof opt.multiline == "number" ?
-                        opt.multiline : this.defaultTextHeight);
-                    activeTextEl = textareaEl;
+    updateExpandIcon : function(){
+        if(this.rendered){
+            var n = this.node, c1, c2;
+            var cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow";
+            var hasChild = n.hasChildNodes();
+            if(hasChild){
+                if(n.expanded){
+                    cls += "-minus";
+                    c1 = "x-tree-node-collapsed";
+                    c2 = "x-tree-node-expanded";
                 }else{
-                    textboxEl.show();
-                    textareaEl.hide();
+                    cls += "-plus";
+                    c1 = "x-tree-node-expanded";
+                    c2 = "x-tree-node-collapsed";
+                }
+                if(this.wasLeaf){
+                    this.removeClass("x-tree-node-leaf");
+                    this.wasLeaf = false;
+                }
+                if(this.c1 != c1 || this.c2 != c2){
+                    Roo.fly(this.elNode).replaceClass(c1, c2);
+                    this.c1 = c1; this.c2 = c2;
                 }
             }else{
-                textboxEl.hide();
-                textareaEl.hide();
-            }
-            progressEl.setDisplayed(opt.progress === true);
-            this.updateProgress(0);
-            activeTextEl.dom.value = opt.value || "";
-            if(opt.prompt){
-                dlg.setDefaultButton(activeTextEl);
-            }else{
-                var bs = opt.buttons;
-                var db = null;
-                if(bs && bs.ok){
-                    db = buttons["ok"];
-                }else if(bs && bs.yes){
-                    db = buttons["yes"];
+                // this changes non-leafs into leafs if they have no children.
+                // it's not very rational behaviour..
+                
+                if(!this.wasLeaf && this.node.leaf){
+                    Roo.fly(this.elNode).replaceClass("x-tree-node-expanded", "x-tree-node-leaf");
+                    delete this.c1;
+                    delete this.c2;
+                    this.wasLeaf = true;
                 }
-                dlg.setDefaultButton(db);
-            }
-            bwidth = updateButtons(opt.buttons);
-            this.updateText(opt.msg);
-            if(opt.cls){
-                d.el.addClass(opt.cls);
             }
-            d.proxyDrag = opt.proxyDrag === true;
-            d.modal = opt.modal !== false;
-            d.mask = opt.modal !== false ? mask : false;
-            if(!d.isVisible()){
-                // force it to the end of the z-index stack so it gets a cursor in FF
-                document.body.appendChild(dlg.el.dom);
-                d.animateTarget = null;
-                d.show(options.animEl);
+            var ecc = "x-tree-ec-icon "+cls;
+            if(this.ecc != ecc){
+                this.ecNode.className = ecc;
+                this.ecc = ecc;
             }
-            return this;
-        },
+        }
+    },
 
-        /**
-         * Displays a message box with a progress bar.  This message box has no buttons and is not closeable by
-         * the user.  You are responsible for updating the progress bar as needed via {@link Roo.MessageBox#updateProgress}
-         * and closing the message box when the process is complete.
-         * @param {String} title The title bar text
-         * @param {String} msg The message box body text
-         * @return {Roo.MessageBox} This message box
-         */
-        progress : function(title, msg){
-            this.show({
-                title : title,
-                msg : msg,
-                buttons: false,
-                progress:true,
-                closable:false,
-                minWidth: this.minProgressWidth,
-                modal : true
-            });
-            return this;
-        },
+    getChildIndent : function(){
+        if(!this.childIndent){
+            var buf = [];
+            var p = this.node;
+            while(p){
+                if(!p.isRoot || (p.isRoot && p.ownerTree.rootVisible)){
+                    if(!p.isLast()) {
+                        buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-elbow-line" />');
+                    } else {
+                        buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-icon" />');
+                    }
+                }
+                p = p.parentNode;
+            }
+            this.childIndent = buf.join("");
+        }
+        return this.childIndent;
+    },
 
-        /**
-         * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript Window.alert).
-         * If a callback function is passed it will be called after the user clicks the button, and the
-         * id of the button that was clicked will be passed as the only parameter to the callback
-         * (could also be the top-right close button).
-         * @param {String} title The title bar text
-         * @param {String} msg The message box body text
-         * @param {Function} fn (optional) The callback function invoked after the message box is closed
-         * @param {Object} scope (optional) The scope of the callback function
-         * @return {Roo.MessageBox} This message box
-         */
-        alert : function(title, msg, fn, scope){
-            this.show({
-                title : title,
-                msg : msg,
-                buttons: this.OK,
-                fn: fn,
-                scope : scope,
-                modal : true
-            });
-            return this;
-        },
+    renderIndent : function(){
+        if(this.rendered){
+            var indent = "";
+            var p = this.node.parentNode;
+            if(p){
+                indent = p.ui.getChildIndent();
+            }
+            if(this.indentMarkup != indent){ // don't rerender if not required
+                this.indentNode.innerHTML = indent;
+                this.indentMarkup = indent;
+            }
+            this.updateExpandIcon();
+        }
+    }
+};
 
-        /**
-         * Displays a message box with an infinitely auto-updating progress bar.  This can be used to block user
-         * interaction while waiting for a long-running process to complete that does not have defined intervals.
-         * You are responsible for closing the message box when the process is complete.
-         * @param {String} msg The message box body text
-         * @param {String} title (optional) The title bar text
-         * @return {Roo.MessageBox} This message box
-         */
-        wait : function(msg, title){
-            this.show({
-                title : title,
-                msg : msg,
-                buttons: false,
-                closable:false,
-                progress:true,
-                modal:true,
-                width:300,
-                wait:true
-            });
-            waitTimer = Roo.TaskMgr.start({
-                run: function(i){
-                    Roo.MessageBox.updateProgress(((((i+20)%20)+1)*5)*.01);
-                },
-                interval: 1000
-            });
-            return this;
-        },
+Roo.tree.RootTreeNodeUI = function(){
+    Roo.tree.RootTreeNodeUI.superclass.constructor.apply(this, arguments);
+};
+Roo.extend(Roo.tree.RootTreeNodeUI, Roo.tree.TreeNodeUI, {
+    render : function(){
+        if(!this.rendered){
+            var targetNode = this.node.ownerTree.innerCt.dom;
+            this.node.expanded = true;
+            targetNode.innerHTML = '<div class="x-tree-root-node"></div>';
+            this.wrap = this.ctNode = targetNode.firstChild;
+        }
+    },
+    collapse : function(){
+    },
+    expand : function(){
+    }
+});/*
+ * 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.tree.TreeLoader
+ * @extends Roo.util.Observable
+ * A TreeLoader provides for lazy loading of an {@link Roo.tree.TreeNode}'s child
+ * nodes from a specified URL. The response must be a javascript Array definition
+ * who's elements are node definition objects. eg:
+ * <pre><code>
+{  success : true,
+   data :      [
+   
+    { 'id': 1, 'text': 'A folder Node', 'leaf': false },
+    { 'id': 2, 'text': 'A leaf Node', 'leaf': true }
+    ]
+}
 
-        /**
-         * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's Window.confirm).
-         * If a callback function is passed it will be called after the user clicks either button, and the id of the
-         * button that was clicked will be passed as the only parameter to the callback (could also be the top-right close button).
-         * @param {String} title The title bar text
-         * @param {String} msg The message box body text
-         * @param {Function} fn (optional) The callback function invoked after the message box is closed
-         * @param {Object} scope (optional) The scope of the callback function
-         * @return {Roo.MessageBox} This message box
-         */
-        confirm : function(title, msg, fn, scope){
-            this.show({
-                title : title,
-                msg : msg,
-                buttons: this.YESNO,
-                fn: fn,
-                scope : scope,
-                modal : true
-            });
-            return this;
-        },
 
-        /**
-         * Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to
-         * JavaScript's Window.prompt).  The prompt can be a single-line or multi-line textbox.  If a callback function
-         * is passed it will be called after the user clicks either button, and the id of the button that was clicked
-         * (could also be the top-right close button) and the text that was entered will be passed as the two
-         * parameters to the callback.
-         * @param {String} title The title bar text
-         * @param {String} msg The message box body text
-         * @param {Function} fn (optional) The callback function invoked after the message box is closed
-         * @param {Object} scope (optional) The scope of the callback function
-         * @param {Boolean/Number} multiline (optional) True to create a multiline textbox using the defaultTextHeight
-         * property, or the height in pixels to create the textbox (defaults to false / single-line)
-         * @return {Roo.MessageBox} This message box
-         */
-        prompt : function(title, msg, fn, scope, multiline){
-            this.show({
-                title : title,
-                msg : msg,
-                buttons: this.OKCANCEL,
-                fn: fn,
-                minWidth:250,
-                scope : scope,
-                prompt:true,
-                multiline: multiline,
-                modal : true
-            });
-            return this;
-        },
+</code></pre>
+ * <br><br>
+ * The old style respose with just an array is still supported, but not recommended.
+ * <br><br>
+ *
+ * A server request is sent, and child nodes are loaded only when a node is expanded.
+ * The loading node's id is passed to the server under the parameter name "node" to
+ * enable the server to produce the correct child nodes.
+ * <br><br>
+ * To pass extra parameters, an event handler may be attached to the "beforeload"
+ * event, and the parameters specified in the TreeLoader's baseParams property:
+ * <pre><code>
+    myTreeLoader.on("beforeload", function(treeLoader, node) {
+        this.baseParams.category = node.attributes.category;
+    }, this);
+    
+</code></pre>
+ *
+ * This would pass an HTTP parameter called "category" to the server containing
+ * the value of the Node's "category" attribute.
+ * @constructor
+ * Creates a new Treeloader.
+ * @param {Object} config A config object containing config properties.
+ */
+Roo.tree.TreeLoader = function(config){
+    this.baseParams = {};
+    this.requestMethod = "POST";
+    Roo.apply(this, config);
 
+    this.addEvents({
+    
         /**
-         * Button config that displays a single OK button
-         * @type Object
+         * @event beforeload
+         * Fires before a network request is made to retrieve the Json text which specifies a node's children.
+         * @param {Object} This TreeLoader object.
+         * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
+         * @param {Object} callback The callback function specified in the {@link #load} call.
          */
-        OK : {ok:true},
+        beforeload : true,
         /**
-         * Button config that displays Yes and No buttons
-         * @type Object
+         * @event load
+         * Fires when the node has been successfuly loaded.
+         * @param {Object} This TreeLoader object.
+         * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
+         * @param {Object} response The response object containing the data from the server.
          */
-        YESNO : {yes:true, no:true},
+        load : true,
         /**
-         * Button config that displays OK and Cancel buttons
-         * @type Object
+         * @event loadexception
+         * Fires if the network request failed.
+         * @param {Object} This TreeLoader object.
+         * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
+         * @param {Object} response The response object containing the data from the server.
          */
-        OKCANCEL : {ok:true, cancel:true},
+        loadexception : true,
         /**
-         * Button config that displays Yes, No and Cancel buttons
-         * @type Object
+         * @event create
+         * Fires before a node is created, enabling you to return custom Node types 
+         * @param {Object} This TreeLoader object.
+         * @param {Object} attr - the data returned from the AJAX call (modify it to suit)
          */
-        YESNOCANCEL : {yes:true, no:true, cancel:true},
+        create : true
+    });
 
-        /**
-         * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
-         * @type Number
-         */
-        defaultTextHeight : 75,
-        /**
-         * The maximum width in pixels of the message box (defaults to 600)
-         * @type Number
-         */
-        maxWidth : 600,
-        /**
-         * The minimum width in pixels of the message box (defaults to 100)
-         * @type Number
-         */
-        minWidth : 100,
-        /**
-         * The minimum width in pixels of the message box if it is a progress-style dialog.  This is useful
-         * for setting a different minimum width than text-only dialogs may need (defaults to 250)
-         * @type Number
-         */
-        minProgressWidth : 250,
-        /**
-         * An object containing the default button text strings that can be overriden for localized language support.
-         * Supported properties are: ok, cancel, yes and no.
-         * Customize the default text like so: Roo.MessageBox.buttonText.yes = "S?";
-         * @type Object
-         */
-        buttonText : {
-            ok : "OK",
-            cancel : "Cancel",
-            yes : "Yes",
-            no : "No"
+    Roo.tree.TreeLoader.superclass.constructor.call(this);
+};
+
+Roo.extend(Roo.tree.TreeLoader, Roo.util.Observable, {
+    /**
+    * @cfg {String} dataUrl The URL from which to request a Json string which
+    * specifies an array of node definition object representing the child nodes
+    * to be loaded.
+    */
+    /**
+    * @cfg {String} requestMethod either GET or POST
+    * defaults to POST (due to BC)
+    * to be loaded.
+    */
+    /**
+    * @cfg {Object} baseParams (optional) An object containing properties which
+    * specify HTTP parameters to be passed to each request for child nodes.
+    */
+    /**
+    * @cfg {Object} baseAttrs (optional) An object containing attributes to be added to all nodes
+    * created by this loader. If the attributes sent by the server have an attribute in this object,
+    * they take priority.
+    */
+    /**
+    * @cfg {Object} uiProviders (optional) An object containing properties which
+    * 
+    * DEPRECATED - use 'create' event handler to modify attributes - which affect creation.
+    * specify custom {@link Roo.tree.TreeNodeUI} implementations. If the optional
+    * <i>uiProvider</i> attribute of a returned child node is a string rather
+    * than a reference to a TreeNodeUI implementation, this that string value
+    * is used as a property name in the uiProviders object. You can define the provider named
+    * 'default' , and this will be used for all nodes (if no uiProvider is delivered by the node data)
+    */
+    uiProviders : {},
+
+    /**
+    * @cfg {Boolean} clearOnLoad (optional) Default to true. Remove previously existing
+    * child nodes before loading.
+    */
+    clearOnLoad : true,
+
+    /**
+    * @cfg {String} root (optional) Default to false. Use this to read data from an object 
+    * property on loading, rather than expecting an array. (eg. more compatible to a standard
+    * Grid query { data : [ .....] }
+    */
+    
+    root : false,
+     /**
+    * @cfg {String} queryParam (optional) 
+    * Name of the query as it will be passed on the querystring (defaults to 'node')
+    * eg. the request will be ?node=[id]
+    */
+    
+    
+    queryParam: false,
+    
+    /**
+     * Load an {@link Roo.tree.TreeNode} from the URL specified in the constructor.
+     * This is called automatically when a node is expanded, but may be used to reload
+     * a node (or append new children if the {@link #clearOnLoad} option is false.)
+     * @param {Roo.tree.TreeNode} node
+     * @param {Function} callback
+     */
+    load : function(node, callback){
+        if(this.clearOnLoad){
+            while(node.firstChild){
+                node.removeChild(node.firstChild);
+            }
+        }
+        if(node.attributes.children){ // preloaded json children
+            var cs = node.attributes.children;
+            for(var i = 0, len = cs.length; i < len; i++){
+                node.appendChild(this.createNode(cs[i]));
+            }
+            if(typeof callback == "function"){
+                callback();
+            }
+        }else if(this.dataUrl){
+            this.requestData(node, callback);
+        }
+    },
+
+    getParams: function(node){
+        var buf = [], bp = this.baseParams;
+        for(var key in bp){
+            if(typeof bp[key] != "function"){
+                buf.push(encodeURIComponent(key), "=", encodeURIComponent(bp[key]), "&");
+            }
+        }
+        var n = this.queryParam === false ? 'node' : this.queryParam;
+        buf.push(n + "=", encodeURIComponent(node.id));
+        return buf.join("");
+    },
+
+    requestData : function(node, callback){
+        if(this.fireEvent("beforeload", this, node, callback) !== false){
+            this.transId = Roo.Ajax.request({
+                method:this.requestMethod,
+                url: this.dataUrl||this.url,
+                success: this.handleResponse,
+                failure: this.handleFailure,
+                scope: this,
+                argument: {callback: callback, node: node},
+                params: this.getParams(node)
+            });
+        }else{
+            // if the load is cancelled, make sure we notify
+            // the node that we are done
+            if(typeof callback == "function"){
+                callback();
+            }
+        }
+    },
+
+    isLoading : function(){
+        return this.transId ? true : false;
+    },
+
+    abort : function(){
+        if(this.isLoading()){
+            Roo.Ajax.abort(this.transId);
+        }
+    },
+
+    // private
+    createNode : function(attr)
+    {
+        // apply baseAttrs, nice idea Corey!
+        if(this.baseAttrs){
+            Roo.applyIf(attr, this.baseAttrs);
+        }
+        if(this.applyLoader !== false){
+            attr.loader = this;
+        }
+        // uiProvider = depreciated..
+        
+        if(typeof(attr.uiProvider) == 'string'){
+           attr.uiProvider = this.uiProviders[attr.uiProvider] || 
+                /**  eval:var:attr */ eval(attr.uiProvider);
+        }
+        if(typeof(this.uiProviders['default']) != 'undefined') {
+            attr.uiProvider = this.uiProviders['default'];
+        }
+        
+        this.fireEvent('create', this, attr);
+        
+        attr.leaf  = typeof(attr.leaf) == 'string' ? attr.leaf * 1 : attr.leaf;
+        return(attr.leaf ?
+                        new Roo.tree.TreeNode(attr) :
+                        new Roo.tree.AsyncTreeNode(attr));
+    },
+
+    processResponse : function(response, node, callback)
+    {
+        var json = response.responseText;
+        try {
+            
+            var o = Roo.decode(json);
+            
+            if (this.root === false && typeof(o.success) != undefined) {
+                this.root = 'data'; // the default behaviour for list like data..
+                }
+                
+            if (this.root !== false &&  !o.success) {
+                // it's a failure condition.
+                var a = response.argument;
+                this.fireEvent("loadexception", this, a.node, response);
+                Roo.log("Load failed - should have a handler really");
+                return;
+            }
+            
+            
+            
+            if (this.root !== false) {
+                 o = o[this.root];
+            }
+            
+            for(var i = 0, len = o.length; i < len; i++){
+                var n = this.createNode(o[i]);
+                if(n){
+                    node.appendChild(n);
+                }
+            }
+            if(typeof callback == "function"){
+                callback(this, node);
+            }
+        }catch(e){
+            this.handleFailure(response);
         }
-    };
-}();
+    },
 
-/**
- * Shorthand for {@link Roo.MessageBox}
- */
-Roo.Msg = Roo.MessageBox;/*
+    handleResponse : function(response){
+        this.transId = false;
+        var a = response.argument;
+        this.processResponse(response, a.node, a.callback);
+        this.fireEvent("load", this, a.node, response);
+    },
+
+    handleFailure : function(response)
+    {
+        // should handle failure better..
+        this.transId = false;
+        var a = response.argument;
+        this.fireEvent("loadexception", this, a.node, response);
+        if(typeof a.callback == "function"){
+            a.callback(this, a.node);
+        }
+    }
+});/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -15549,397 +13510,445 @@ Roo.Msg = Roo.MessageBox;/*
  * Fork - LGPL
  * <script type="text/javascript">
  */
+
 /**
- * @class Roo.QuickTips
- * Provides attractive and customizable tooltips for any element.
- * @singleton
+* @class Roo.tree.TreeFilter
+* Note this class is experimental and doesn't update the indent (lines) or expand collapse icons of the nodes
+* @param {TreePanel} tree
+* @param {Object} config (optional)
  */
-Roo.QuickTips = function(){
-    var el, tipBody, tipBodyText, tipTitle, tm, cfg, close, tagEls = {}, esc, removeCls = null, bdLeft, bdRight;
-    var ce, bd, xy, dd;
-    var visible = false, disabled = true, inited = false;
-    var showProc = 1, hideProc = 1, dismissProc = 1, locks = [];
-    
-    var onOver = function(e){
-        if(disabled){
-            return;
+Roo.tree.TreeFilter = function(tree, config){
+    this.tree = tree;
+    this.filtered = {};
+    Roo.apply(this, config);
+};
+
+Roo.tree.TreeFilter.prototype = {
+    clearBlank:false,
+    reverse:false,
+    autoClear:false,
+    remove:false,
+
+     /**
+     * Filter the data by a specific attribute.
+     * @param {String/RegExp} value Either string that the attribute value
+     * should start with or a RegExp to test against the attribute
+     * @param {String} attr (optional) The attribute passed in your node's attributes collection. Defaults to "text".
+     * @param {TreeNode} startNode (optional) The node to start the filter at.
+     */
+    filter : function(value, attr, startNode){
+        attr = attr || "text";
+        var f;
+        if(typeof value == "string"){
+            var vlen = value.length;
+            // auto clear empty filter
+            if(vlen == 0 && this.clearBlank){
+                this.clear();
+                return;
+            }
+            value = value.toLowerCase();
+            f = function(n){
+                return n.attributes[attr].substr(0, vlen).toLowerCase() == value;
+            };
+        }else if(value.exec){ // regex?
+            f = function(n){
+                return value.test(n.attributes[attr]);
+            };
+        }else{
+            throw 'Illegal filter type, must be string or regex';
         }
-        var t = e.getTarget();
-        if(!t || t.nodeType !== 1 || t == document || t == document.body){
-            return;
+        this.filterBy(f, null, startNode);
+	},
+
+    /**
+     * Filter by a function. The passed function will be called with each
+     * node in the tree (or from the startNode). If the function returns true, the node is kept
+     * otherwise it is filtered. If a node is filtered, its children are also filtered.
+     * @param {Function} fn The filter function
+     * @param {Object} scope (optional) The scope of the function (defaults to the current node)
+     */
+    filterBy : function(fn, scope, startNode){
+        startNode = startNode || this.tree.root;
+        if(this.autoClear){
+            this.clear();
         }
-        if(ce && t == ce.el){
-            clearTimeout(hideProc);
-            return;
+        var af = this.filtered, rv = this.reverse;
+        var f = function(n){
+            if(n == startNode){
+                return true;
+            }
+            if(af[n.id]){
+                return false;
+            }
+            var m = fn.call(scope || n, n);
+            if(!m || rv){
+                af[n.id] = n;
+                n.ui.hide();
+                return false;
+            }
+            return true;
+        };
+        startNode.cascade(f);
+        if(this.remove){
+           for(var id in af){
+               if(typeof id != "function"){
+                   var n = af[id];
+                   if(n && n.parentNode){
+                       n.parentNode.removeChild(n);
+                   }
+               }
+           }
         }
-        if(t && tagEls[t.id]){
-            tagEls[t.id].el = t;
-            showProc = show.defer(tm.showDelay, tm, [tagEls[t.id]]);
-            return;
+    },
+
+    /**
+     * Clears the current filter. Note: with the "remove" option
+     * set a filter cannot be cleared.
+     */
+    clear : function(){
+        var t = this.tree;
+        var af = this.filtered;
+        for(var id in af){
+            if(typeof id != "function"){
+                var n = af[id];
+                if(n){
+                    n.ui.show();
+                }
+            }
         }
-        var ttp, et = Roo.fly(t);
-        var ns = cfg.namespace;
-        if(tm.interceptTitles && t.title){
-            ttp = t.title;
-            t.qtip = ttp;
-            t.removeAttribute("title");
-            e.preventDefault();
-        }else{
-            ttp = t.qtip || et.getAttributeNS(ns, cfg.attribute) || et.getAttributeNS(cfg.alt_namespace, cfg.attribute) ;
+        this.filtered = {};
+    }
+};
+/*
+ * 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.tree.TreeSorter
+ * Provides sorting of nodes in a TreePanel
+ * 
+ * @cfg {Boolean} folderSort True to sort leaf nodes under non leaf nodes
+ * @cfg {String} property The named attribute on the node to sort by (defaults to text)
+ * @cfg {String} dir The direction to sort (asc or desc) (defaults to asc)
+ * @cfg {String} leafAttr The attribute used to determine leaf nodes in folder sort (defaults to "leaf")
+ * @cfg {Boolean} caseSensitive true for case sensitive sort (defaults to false)
+ * @cfg {Function} sortType A custom "casting" function used to convert node values before sorting
+ * @constructor
+ * @param {TreePanel} tree
+ * @param {Object} config
+ */
+Roo.tree.TreeSorter = function(tree, config){
+    Roo.apply(this, config);
+    tree.on("beforechildrenrendered", this.doSort, this);
+    tree.on("append", this.updateSort, this);
+    tree.on("insert", this.updateSort, this);
+    
+    var dsc = this.dir && this.dir.toLowerCase() == "desc";
+    var p = this.property || "text";
+    var sortType = this.sortType;
+    var fs = this.folderSort;
+    var cs = this.caseSensitive === true;
+    var leafAttr = this.leafAttr || 'leaf';
+
+    this.sortFn = function(n1, n2){
+        if(fs){
+            if(n1.attributes[leafAttr] && !n2.attributes[leafAttr]){
+                return 1;
+            }
+            if(!n1.attributes[leafAttr] && n2.attributes[leafAttr]){
+                return -1;
+            }
         }
-        if(ttp){
-            showProc = show.defer(tm.showDelay, tm, [{
-                el: t, 
-                text: ttp, 
-                width: et.getAttributeNS(ns, cfg.width),
-                autoHide: et.getAttributeNS(ns, cfg.hide) != "user",
-                title: et.getAttributeNS(ns, cfg.title),
-           	    cls: et.getAttributeNS(ns, cfg.cls)
-            }]);
+    	var v1 = sortType ? sortType(n1) : (cs ? n1.attributes[p] : n1.attributes[p].toUpperCase());
+    	var v2 = sortType ? sortType(n2) : (cs ? n2.attributes[p] : n2.attributes[p].toUpperCase());
+    	if(v1 < v2){
+			return dsc ? +1 : -1;
+		}else if(v1 > v2){
+			return dsc ? -1 : +1;
+        }else{
+	    	return 0;
         }
     };
+};
+
+Roo.tree.TreeSorter.prototype = {
+    doSort : function(node){
+        node.sort(this.sortFn);
+    },
     
-    var onOut = function(e){
-        clearTimeout(showProc);
-        var t = e.getTarget();
-        if(t && ce && ce.el == t && (tm.autoHide && ce.autoHide !== false)){
-            hideProc = setTimeout(hide, tm.hideDelay);
+    compareNodes : function(n1, n2){
+        return (n1.text.toUpperCase() > n2.text.toUpperCase() ? 1 : -1);
+    },
+    
+    updateSort : function(tree, node){
+        if(node.childrenRendered){
+            this.doSort.defer(1, this, [node]);
         }
-    };
+    }
+};/*
+ * 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">
+ */
+
+if(Roo.dd.DropZone){
     
-    var onMove = function(e){
-        if(disabled){
-            return;
+Roo.tree.TreeDropZone = function(tree, config){
+    this.allowParentInsert = false;
+    this.allowContainerDrop = false;
+    this.appendOnly = false;
+    Roo.tree.TreeDropZone.superclass.constructor.call(this, tree.innerCt, config);
+    this.tree = tree;
+    this.lastInsertClass = "x-tree-no-status";
+    this.dragOverData = {};
+};
+
+Roo.extend(Roo.tree.TreeDropZone, Roo.dd.DropZone, {
+    ddGroup : "TreeDD",
+    scroll:  true,
+    
+    expandDelay : 1000,
+    
+    expandNode : function(node){
+        if(node.hasChildNodes() && !node.isExpanded()){
+            node.expand(false, null, this.triggerCacheRefresh.createDelegate(this));
         }
-        xy = e.getXY();
-        xy[1] += 18;
-        if(tm.trackMouse && ce){
-            el.setXY(xy);
+    },
+    
+    queueExpand : function(node){
+        this.expandProcId = this.expandNode.defer(this.expandDelay, this, [node]);
+    },
+    
+    cancelExpand : function(){
+        if(this.expandProcId){
+            clearTimeout(this.expandProcId);
+            this.expandProcId = false;
         }
-    };
+    },
     
-    var onDown = function(e){
-        clearTimeout(showProc);
-        clearTimeout(hideProc);
-        if(!e.within(el)){
-            if(tm.hideOnClick){
-                hide();
-                tm.disable();
-                tm.enable.defer(100, tm);
-            }
+    isValidDropPoint : function(n, pt, dd, e, data){
+        if(!n || !data){ return false; }
+        var targetNode = n.node;
+        var dropNode = data.node;
+        // default drop rules
+        if(!(targetNode && targetNode.isTarget && pt)){
+            return false;
         }
-    };
+        if(pt == "append" && targetNode.allowChildren === false){
+            return false;
+        }
+        if((pt == "above" || pt == "below") && (targetNode.parentNode && targetNode.parentNode.allowChildren === false)){
+            return false;
+        }
+        if(dropNode && (targetNode == dropNode || dropNode.contains(targetNode))){
+            return false;
+        }
+        // reuse the object
+        var overEvent = this.dragOverData;
+        overEvent.tree = this.tree;
+        overEvent.target = targetNode;
+        overEvent.data = data;
+        overEvent.point = pt;
+        overEvent.source = dd;
+        overEvent.rawEvent = e;
+        overEvent.dropNode = dropNode;
+        overEvent.cancel = false;  
+        var result = this.tree.fireEvent("nodedragover", overEvent);
+        return overEvent.cancel === false && result !== false;
+    },
     
-    var getPad = function(){
-        return 2;//bdLeft.getPadding('l')+bdRight.getPadding('r');
-    };
-
-    var show = function(o){
-        if(disabled){
-            return;
+    getDropPoint : function(e, n, dd)
+    {
+        var tn = n.node;
+        if(tn.isRoot){
+            return tn.allowChildren !== false ? "append" : false; // always append for root
         }
-        clearTimeout(dismissProc);
-        ce = o;
-        if(removeCls){ // in case manually hidden
-            el.removeClass(removeCls);
-            removeCls = null;
+        var dragEl = n.ddel;
+        var t = Roo.lib.Dom.getY(dragEl), b = t + dragEl.offsetHeight;
+        var y = Roo.lib.Event.getPageY(e);
+        //var noAppend = tn.allowChildren === false || tn.isLeaf();
+        
+        // we may drop nodes anywhere, as long as allowChildren has not been set to false..
+        var noAppend = tn.allowChildren === false;
+        if(this.appendOnly || tn.parentNode.allowChildren === false){
+            return noAppend ? false : "append";
         }
-        if(ce.cls){
-            el.addClass(ce.cls);
-            removeCls = ce.cls;
+        var noBelow = false;
+        if(!this.allowParentInsert){
+            noBelow = tn.hasChildNodes() && tn.isExpanded();
         }
-        if(ce.title){
-            tipTitle.update(ce.title);
-            tipTitle.show();
+        var q = (b - t) / (noAppend ? 2 : 3);
+        if(y >= t && y < (t + q)){
+            return "above";
+        }else if(!noBelow && (noAppend || y >= b-q && y <= b)){
+            return "below";
         }else{
-            tipTitle.update('');
-            tipTitle.hide();
+            return "append";
         }
-        el.dom.style.width  = tm.maxWidth+'px';
-        //tipBody.dom.style.width = '';
-        tipBodyText.update(o.text);
-        var p = getPad(), w = ce.width;
-        if(!w){
-            var td = tipBodyText.dom;
-            var aw = Math.max(td.offsetWidth, td.clientWidth, td.scrollWidth);
-            if(aw > tm.maxWidth){
-                w = tm.maxWidth;
-            }else if(aw < tm.minWidth){
-                w = tm.minWidth;
-            }else{
-                w = aw;
-            }
+    },
+    
+    onNodeEnter : function(n, dd, e, data)
+    {
+        this.cancelExpand();
+    },
+    
+    onNodeOver : function(n, dd, e, data)
+    {
+       
+        var pt = this.getDropPoint(e, n, dd);
+        var node = n.node;
+        
+        // auto node expand check
+        if(!this.expandProcId && pt == "append" && node.hasChildNodes() && !n.node.isExpanded()){
+            this.queueExpand(node);
+        }else if(pt != "append"){
+            this.cancelExpand();
         }
-        //tipBody.setWidth(w);
-        el.setWidth(parseInt(w, 10) + p);
-        if(ce.autoHide === false){
-            close.setDisplayed(true);
-            if(dd){
-                dd.unlock();
-            }
-        }else{
-            close.setDisplayed(false);
-            if(dd){
-                dd.lock();
-            }
+        
+        // set the insert point style on the target node
+        var returnCls = this.dropNotAllowed;
+        if(this.isValidDropPoint(n, pt, dd, e, data)){
+           if(pt){
+               var el = n.ddel;
+               var cls;
+               if(pt == "above"){
+                   returnCls = n.node.isFirst() ? "x-tree-drop-ok-above" : "x-tree-drop-ok-between";
+                   cls = "x-tree-drag-insert-above";
+               }else if(pt == "below"){
+                   returnCls = n.node.isLast() ? "x-tree-drop-ok-below" : "x-tree-drop-ok-between";
+                   cls = "x-tree-drag-insert-below";
+               }else{
+                   returnCls = "x-tree-drop-ok-append";
+                   cls = "x-tree-drag-append";
+               }
+               if(this.lastInsertClass != cls){
+                   Roo.fly(el).replaceClass(this.lastInsertClass, cls);
+                   this.lastInsertClass = cls;
+               }
+           }
+       }
+       return returnCls;
+    },
+    
+    onNodeOut : function(n, dd, e, data){
+        
+        this.cancelExpand();
+        this.removeDropIndicators(n);
+    },
+    
+    onNodeDrop : function(n, dd, e, data){
+        var point = this.getDropPoint(e, n, dd);
+        var targetNode = n.node;
+        targetNode.ui.startDrop();
+        if(!this.isValidDropPoint(n, point, dd, e, data)){
+            targetNode.ui.endDrop();
+            return false;
         }
-        if(xy){
-            el.avoidY = xy[1]-18;
-            el.setXY(xy);
+        // first try to find the drop node
+        var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, point, e) : null);
+        var dropEvent = {
+            tree : this.tree,
+            target: targetNode,
+            data: data,
+            point: point,
+            source: dd,
+            rawEvent: e,
+            dropNode: dropNode,
+            cancel: !dropNode   
+        };
+        var retval = this.tree.fireEvent("beforenodedrop", dropEvent);
+        if(retval === false || dropEvent.cancel === true || !dropEvent.dropNode){
+            targetNode.ui.endDrop();
+            return false;
         }
-        if(tm.animate){
-            el.setOpacity(.1);
-            el.setStyle("visibility", "visible");
-            el.fadeIn({callback: afterShow});
+        // allow target changing
+        targetNode = dropEvent.target;
+        if(point == "append" && !targetNode.isExpanded()){
+            targetNode.expand(false, null, function(){
+                this.completeDrop(dropEvent);
+            }.createDelegate(this));
         }else{
-            afterShow();
+            this.completeDrop(dropEvent);
+        }
+        return true;
+    },
+    
+    completeDrop : function(de){
+        var ns = de.dropNode, p = de.point, t = de.target;
+        if(!(ns instanceof Array)){
+            ns = [ns];
+        }
+        var n;
+        for(var i = 0, len = ns.length; i < len; i++){
+            n = ns[i];
+            if(p == "above"){
+                t.parentNode.insertBefore(n, t);
+            }else if(p == "below"){
+                t.parentNode.insertBefore(n, t.nextSibling);
+            }else{
+                t.appendChild(n);
+            }
+        }
+        n.ui.focus();
+        if(this.tree.hlDrop){
+            n.ui.highlight();
         }
-    };
+        t.ui.endDrop();
+        this.tree.fireEvent("nodedrop", de);
+    },
     
-    var afterShow = function(){
-        if(ce){
-            el.show();
-            esc.enable();
-            if(tm.autoDismiss && ce.autoHide !== false){
-                dismissProc = setTimeout(hide, tm.autoDismissDelay);
-            }
+    afterNodeMoved : function(dd, data, e, targetNode, dropNode){
+        if(this.tree.hlDrop){
+            dropNode.ui.focus();
+            dropNode.ui.highlight();
         }
-    };
+        this.tree.fireEvent("nodedrop", this.tree, targetNode, data, dd, e);
+    },
     
-    var hide = function(noanim){
-        clearTimeout(dismissProc);
-        clearTimeout(hideProc);
-        ce = null;
-        if(el.isVisible()){
-            esc.disable();
-            if(noanim !== true && tm.animate){
-                el.fadeOut({callback: afterHide});
-            }else{
-                afterHide();
-            } 
+    getTree : function(){
+        return this.tree;
+    },
+    
+    removeDropIndicators : function(n){
+        if(n && n.ddel){
+            var el = n.ddel;
+            Roo.fly(el).removeClass([
+                    "x-tree-drag-insert-above",
+                    "x-tree-drag-insert-below",
+                    "x-tree-drag-append"]);
+            this.lastInsertClass = "_noclass";
         }
-    };
+    },
     
-    var afterHide = function(){
-        el.hide();
-        if(removeCls){
-            el.removeClass(removeCls);
-            removeCls = null;
+    beforeDragDrop : function(target, e, id){
+        this.cancelExpand();
+        return true;
+    },
+    
+    afterRepair : function(data){
+        if(data && Roo.enableFx){
+            data.node.ui.highlight();
         }
-    };
+        this.hideProxy();
+    } 
     
-    return {
-        /**
-        * @cfg {Number} minWidth
-        * The minimum width of the quick tip (defaults to 40)
-        */
-       minWidth : 40,
-        /**
-        * @cfg {Number} maxWidth
-        * The maximum width of the quick tip (defaults to 300)
-        */
-       maxWidth : 300,
-        /**
-        * @cfg {Boolean} interceptTitles
-        * True to automatically use the element's DOM title value if available (defaults to false)
-        */
-       interceptTitles : false,
-        /**
-        * @cfg {Boolean} trackMouse
-        * True to have the quick tip follow the mouse as it moves over the target element (defaults to false)
-        */
-       trackMouse : false,
-        /**
-        * @cfg {Boolean} hideOnClick
-        * True to hide the quick tip if the user clicks anywhere in the document (defaults to true)
-        */
-       hideOnClick : true,
-        /**
-        * @cfg {Number} showDelay
-        * Delay in milliseconds before the quick tip displays after the mouse enters the target element (defaults to 500)
-        */
-       showDelay : 500,
-        /**
-        * @cfg {Number} hideDelay
-        * Delay in milliseconds before the quick tip hides when autoHide = true (defaults to 200)
-        */
-       hideDelay : 200,
-        /**
-        * @cfg {Boolean} autoHide
-        * True to automatically hide the quick tip after the mouse exits the target element (defaults to true).
-        * Used in conjunction with hideDelay.
-        */
-       autoHide : true,
-        /**
-        * @cfg {Boolean}
-        * True to automatically hide the quick tip after a set period of time, regardless of the user's actions
-        * (defaults to true).  Used in conjunction with autoDismissDelay.
-        */
-       autoDismiss : true,
-        /**
-        * @cfg {Number}
-        * Delay in milliseconds before the quick tip hides when autoDismiss = true (defaults to 5000)
-        */
-       autoDismissDelay : 5000,
-       /**
-        * @cfg {Boolean} animate
-        * True to turn on fade animation. Defaults to false (ClearType/scrollbar flicker issues in IE7).
-        */
-       animate : false,
-
-       /**
-        * @cfg {String} title
-        * Title text to display (defaults to '').  This can be any valid HTML markup.
-        */
-        title: '',
-       /**
-        * @cfg {String} text
-        * Body text to display (defaults to '').  This can be any valid HTML markup.
-        */
-        text : '',
-       /**
-        * @cfg {String} cls
-        * A CSS class to apply to the base quick tip element (defaults to '').
-        */
-        cls : '',
-       /**
-        * @cfg {Number} width
-        * Width in pixels of the quick tip (defaults to auto).  Width will be ignored if it exceeds the bounds of
-        * minWidth or maxWidth.
-        */
-        width : null,
-
-    /**
-     * Initialize and enable QuickTips for first use.  This should be called once before the first attempt to access
-     * or display QuickTips in a page.
-     */
-       init : function(){
-          tm = Roo.QuickTips;
-          cfg = tm.tagConfig;
-          if(!inited){
-              if(!Roo.isReady){ // allow calling of init() before onReady
-                  Roo.onReady(Roo.QuickTips.init, Roo.QuickTips);
-                  return;
-              }
-              el = new Roo.Layer({cls:"x-tip", shadow:"drop", shim: true, constrain:true, shadowOffset:4});
-              el.fxDefaults = {stopFx: true};
-              // maximum custom styling
-              //el.update('<div class="x-tip-top-left"><div class="x-tip-top-right"><div class="x-tip-top"></div></div></div><div class="x-tip-bd-left"><div class="x-tip-bd-right"><div class="x-tip-bd"><div class="x-tip-close"></div><h3></h3><div class="x-tip-bd-inner"></div><div class="x-clear"></div></div></div></div><div class="x-tip-ft-left"><div class="x-tip-ft-right"><div class="x-tip-ft"></div></div></div>');
-              el.update('<div class="x-tip-bd"><div class="x-tip-close"></div><h3></h3><div class="x-tip-bd-inner"></div><div class="x-clear"></div></div>');              
-              tipTitle = el.child('h3');
-              tipTitle.enableDisplayMode("block");
-              tipBody = el.child('div.x-tip-bd');
-              tipBodyText = el.child('div.x-tip-bd-inner');
-              //bdLeft = el.child('div.x-tip-bd-left');
-              //bdRight = el.child('div.x-tip-bd-right');
-              close = el.child('div.x-tip-close');
-              close.enableDisplayMode("block");
-              close.on("click", hide);
-              var d = Roo.get(document);
-              d.on("mousedown", onDown);
-              d.on("mouseover", onOver);
-              d.on("mouseout", onOut);
-              d.on("mousemove", onMove);
-              esc = d.addKeyListener(27, hide);
-              esc.disable();
-              if(Roo.dd.DD){
-                  dd = el.initDD("default", null, {
-                      onDrag : function(){
-                          el.sync();  
-                      }
-                  });
-                  dd.setHandleElId(tipTitle.id);
-                  dd.lock();
-              }
-              inited = true;
-          }
-          this.enable(); 
-       },
-
-    /**
-     * Configures a new quick tip instance and assigns it to a target element.  The following config options
-     * are supported:
-     * <pre>
-Property    Type                   Description
-----------  ---------------------  ------------------------------------------------------------------------
-target      Element/String/Array   An Element, id or array of ids that this quick tip should be tied to
-     * </ul>
-     * @param {Object} config The config object
-     */
-       register : function(config){
-           var cs = config instanceof Array ? config : arguments;
-           for(var i = 0, len = cs.length; i < len; i++) {
-               var c = cs[i];
-               var target = c.target;
-               if(target){
-                   if(target instanceof Array){
-                       for(var j = 0, jlen = target.length; j < jlen; j++){
-                           tagEls[target[j]] = c;
-                       }
-                   }else{
-                       tagEls[typeof target == 'string' ? target : Roo.id(target)] = c;
-                   }
-               }
-           }
-       },
-
-    /**
-     * Removes this quick tip from its element and destroys it.
-     * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.
-     */
-       unregister : function(el){
-           delete tagEls[Roo.id(el)];
-       },
-
-    /**
-     * Enable this quick tip.
-     */
-       enable : function(){
-           if(inited && disabled){
-               locks.pop();
-               if(locks.length < 1){
-                   disabled = false;
-               }
-           }
-       },
-
-    /**
-     * Disable this quick tip.
-     */
-       disable : function(){
-          disabled = true;
-          clearTimeout(showProc);
-          clearTimeout(hideProc);
-          clearTimeout(dismissProc);
-          if(ce){
-              hide(true);
-          }
-          locks.push(1);
-       },
-
-    /**
-     * Returns true if the quick tip is enabled, else false.
-     */
-       isEnabled : function(){
-            return !disabled;
-       },
-
-        // private
-       tagConfig : {
-           namespace : "roo", // was ext?? this may break..
-           alt_namespace : "ext",
-           attribute : "qtip",
-           width : "width",
-           target : "target",
-           title : "qtitle",
-           hide : "hide",
-           cls : "qclass"
-       }
-   };
-}();
+});
 
-// backwards compat
-Roo.QuickTips.tips = Roo.QuickTips.register;/*
+}
+/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -15951,463 +13960,215 @@ Roo.QuickTips.tips = Roo.QuickTips.register;/*
  */
  
 
-/**
- * @class Roo.tree.TreePanel
- * @extends Roo.data.Tree
+if(Roo.dd.DragZone){
+Roo.tree.TreeDragZone = function(tree, config){
+    Roo.tree.TreeDragZone.superclass.constructor.call(this, tree.getTreeEl(), config);
+    this.tree = tree;
+};
 
- * @cfg {Boolean} rootVisible false to hide the root node (defaults to true)
- * @cfg {Boolean} lines false to disable tree lines (defaults to true)
- * @cfg {Boolean} enableDD true to enable drag and drop
- * @cfg {Boolean} enableDrag true to enable just drag
- * @cfg {Boolean} enableDrop true to enable just drop
- * @cfg {Object} dragConfig Custom config to pass to the {@link Roo.tree.TreeDragZone} instance
- * @cfg {Object} dropConfig Custom config to pass to the {@link Roo.tree.TreeDropZone} instance
- * @cfg {String} ddGroup The DD group this TreePanel belongs to
- * @cfg {String} ddAppendOnly True if the tree should only allow append drops (use for trees which are sorted)
- * @cfg {Boolean} ddScroll true to enable YUI body scrolling
- * @cfg {Boolean} containerScroll true to register this container with ScrollManager
- * @cfg {Boolean} hlDrop false to disable node highlight on drop (defaults to the value of Roo.enableFx)
- * @cfg {String} hlColor The color of the node highlight (defaults to C3DAF9)
- * @cfg {Boolean} animate true to enable animated expand/collapse (defaults to the value of Roo.enableFx)
- * @cfg {Boolean} singleExpand true if only 1 node per branch may be expanded
- * @cfg {Boolean} selModel A tree selection model to use with this TreePanel (defaults to a {@link Roo.tree.DefaultSelectionModel})
- * @cfg {Boolean} loader A TreeLoader for use with this TreePanel
- * @cfg {Object|Roo.tree.TreeEditor} editor The TreeEditor or xtype data to display when clicked.
- * @cfg {String} pathSeparator The token used to separate sub-paths in path strings (defaults to '/')
- * @cfg {Function} renderer DEPRECATED - use TreeLoader:create event / Sets the rendering (formatting) function for the nodes. to return HTML markup for the tree view. The render function is called with  the following parameters:<ul><li>The {Object} The data for the node.</li></ul>
- * @cfg {Function} rendererTip DEPRECATED - use TreeLoader:create event / Sets the rendering (formatting) function for the nodes hovertip to return HTML markup for the tree view. The render function is called with  the following parameters:<ul><li>The {Object} The data for the node.</li></ul>
- * 
- * @constructor
- * @param {String/HTMLElement/Element} el The container element
- * @param {Object} config
- */
-Roo.tree.TreePanel = function(el, config){
-    var root = false;
-    var loader = false;
-    if (config.root) {
-        root = config.root;
-        delete config.root;
-    }
-    if (config.loader) {
-        loader = config.loader;
-        delete config.loader;
-    }
-    
-    Roo.apply(this, config);
-    Roo.tree.TreePanel.superclass.constructor.call(this);
-    this.el = Roo.get(el);
-    this.el.addClass('x-tree');
-    //console.log(root);
-    if (root) {
-        this.setRootNode( Roo.factory(root, Roo.tree));
-    }
-    if (loader) {
-        this.loader = Roo.factory(loader, Roo.tree);
-    }
-   /**
-    * Read-only. The id of the container element becomes this TreePanel's id.
-    */
-    this.id = this.el.id;
-    this.addEvents({
-        /**
-        * @event beforeload
-        * Fires before a node is loaded, return false to cancel
-        * @param {Node} node The node being loaded
-        */
-        "beforeload" : true,
-        /**
-        * @event load
-        * Fires when a node is loaded
-        * @param {Node} node The node that was loaded
-        */
-        "load" : true,
-        /**
-        * @event textchange
-        * Fires when the text for a node is changed
-        * @param {Node} node The node
-        * @param {String} text The new text
-        * @param {String} oldText The old text
-        */
-        "textchange" : true,
-        /**
-        * @event beforeexpand
-        * Fires before a node is expanded, return false to cancel.
-        * @param {Node} node The node
-        * @param {Boolean} deep
-        * @param {Boolean} anim
-        */
-        "beforeexpand" : true,
-        /**
-        * @event beforecollapse
-        * Fires before a node is collapsed, return false to cancel.
-        * @param {Node} node The node
-        * @param {Boolean} deep
-        * @param {Boolean} anim
-        */
-        "beforecollapse" : true,
-        /**
-        * @event expand
-        * Fires when a node is expanded
-        * @param {Node} node The node
-        */
-        "expand" : true,
-        /**
-        * @event disabledchange
-        * Fires when the disabled status of a node changes
-        * @param {Node} node The node
-        * @param {Boolean} disabled
-        */
-        "disabledchange" : true,
-        /**
-        * @event collapse
-        * Fires when a node is collapsed
-        * @param {Node} node The node
-        */
-        "collapse" : true,
-        /**
-        * @event beforeclick
-        * Fires before click processing on a node. Return false to cancel the default action.
-        * @param {Node} node The node
-        * @param {Roo.EventObject} e The event object
-        */
-        "beforeclick":true,
-        /**
-        * @event checkchange
-        * Fires when a node with a checkbox's checked property changes
-        * @param {Node} this This node
-        * @param {Boolean} checked
-        */
-        "checkchange":true,
-        /**
-        * @event click
-        * Fires when a node is clicked
-        * @param {Node} node The node
-        * @param {Roo.EventObject} e The event object
-        */
-        "click":true,
-        /**
-        * @event dblclick
-        * Fires when a node is double clicked
-        * @param {Node} node The node
-        * @param {Roo.EventObject} e The event object
-        */
-        "dblclick":true,
-        /**
-        * @event contextmenu
-        * Fires when a node is right clicked
-        * @param {Node} node The node
-        * @param {Roo.EventObject} e The event object
-        */
-        "contextmenu":true,
-        /**
-        * @event beforechildrenrendered
-        * Fires right before the child nodes for a node are rendered
-        * @param {Node} node The node
-        */
-        "beforechildrenrendered":true,
-        /**
-        * @event startdrag
-        * Fires when a node starts being dragged
-        * @param {Roo.tree.TreePanel} this
-        * @param {Roo.tree.TreeNode} node
-        * @param {event} e The raw browser event
-        */ 
-       "startdrag" : true,
-       /**
-        * @event enddrag
-        * Fires when a drag operation is complete
-        * @param {Roo.tree.TreePanel} this
-        * @param {Roo.tree.TreeNode} node
-        * @param {event} e The raw browser event
-        */
-       "enddrag" : true,
-       /**
-        * @event dragdrop
-        * Fires when a dragged node is dropped on a valid DD target
-        * @param {Roo.tree.TreePanel} this
-        * @param {Roo.tree.TreeNode} node
-        * @param {DD} dd The dd it was dropped on
-        * @param {event} e The raw browser event
-        */
-       "dragdrop" : true,
-       /**
-        * @event beforenodedrop
-        * Fires when a DD object is dropped on a node in this tree for preprocessing. Return false to cancel the drop. The dropEvent
-        * passed to handlers has the following properties:<br />
-        * <ul style="padding:5px;padding-left:16px;">
-        * <li>tree - The TreePanel</li>
-        * <li>target - The node being targeted for the drop</li>
-        * <li>data - The drag data from the drag source</li>
-        * <li>point - The point of the drop - append, above or below</li>
-        * <li>source - The drag source</li>
-        * <li>rawEvent - Raw mouse event</li>
-        * <li>dropNode - Drop node(s) provided by the source <b>OR</b> you can supply node(s)
-        * to be inserted by setting them on this object.</li>
-        * <li>cancel - Set this to true to cancel the drop.</li>
-        * </ul>
-        * @param {Object} dropEvent
-        */
-       "beforenodedrop" : true,
-       /**
-        * @event nodedrop
-        * Fires after a DD object is dropped on a node in this tree. The dropEvent
-        * passed to handlers has the following properties:<br />
-        * <ul style="padding:5px;padding-left:16px;">
-        * <li>tree - The TreePanel</li>
-        * <li>target - The node being targeted for the drop</li>
-        * <li>data - The drag data from the drag source</li>
-        * <li>point - The point of the drop - append, above or below</li>
-        * <li>source - The drag source</li>
-        * <li>rawEvent - Raw mouse event</li>
-        * <li>dropNode - Dropped node(s).</li>
-        * </ul>
-        * @param {Object} dropEvent
-        */
-       "nodedrop" : true,
-        /**
-        * @event nodedragover
-        * Fires when a tree node is being targeted for a drag drop, return false to signal drop not allowed. The dragOverEvent
-        * passed to handlers has the following properties:<br />
-        * <ul style="padding:5px;padding-left:16px;">
-        * <li>tree - The TreePanel</li>
-        * <li>target - The node being targeted for the drop</li>
-        * <li>data - The drag data from the drag source</li>
-        * <li>point - The point of the drop - append, above or below</li>
-        * <li>source - The drag source</li>
-        * <li>rawEvent - Raw mouse event</li>
-        * <li>dropNode - Drop node(s) provided by the source.</li>
-        * <li>cancel - Set this to true to signal drop not allowed.</li>
-        * </ul>
-        * @param {Object} dragOverEvent
-        */
-       "nodedragover" : true
+Roo.extend(Roo.tree.TreeDragZone, Roo.dd.DragZone, {
+    ddGroup : "TreeDD",
+   
+    onBeforeDrag : function(data, e){
+        var n = data.node;
+        return n && n.draggable && !n.disabled;
+    },
+     
+    
+    onInitDrag : function(e){
+        var data = this.dragData;
+        this.tree.getSelectionModel().select(data.node);
+        this.proxy.update("");
+        data.node.ui.appendDDGhost(this.proxy.ghost.dom);
+        this.tree.fireEvent("startdrag", this.tree, data.node, e);
+    },
+    
+    getRepairXY : function(e, data){
+        return data.node.ui.getDDRepairXY();
+    },
+    
+    onEndDrag : function(data, e){
+        this.tree.fireEvent("enddrag", this.tree, data.node, e);
         
-    });
-    if(this.singleExpand){
-       this.on("beforeexpand", this.restrictExpand, this);
+        
+    },
+    
+    onValidDrop : function(dd, e, id){
+        this.tree.fireEvent("dragdrop", this.tree, this.dragData.node, dd, e);
+        this.hideProxy();
+    },
+    
+    beforeInvalidDrop : function(e, id){
+        // this scrolls the original position back into view
+        var sm = this.tree.getSelectionModel();
+        sm.clearSelections();
+        sm.select(this.dragData.node);
     }
-    if (this.editor) {
-        this.editor.tree = this;
-        this.editor = Roo.factory(this.editor, Roo.tree);
+});
+}/*
+ * 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.tree.TreeEditor
+ * @extends Roo.Editor
+ * Provides editor functionality for inline tree node editing.  Any valid {@link Roo.form.Field} can be used
+ * as the editor field.
+ * @constructor
+ * @param {Object} config (used to be the tree panel.)
+ * @param {Object} oldconfig DEPRECIATED Either a prebuilt {@link Roo.form.Field} instance or a Field config object
+ * 
+ * @cfg {Roo.tree.TreePanel} tree The tree to bind to.
+ * @cfg {Roo.form.TextField} field [required] The field configuration
+ *
+ * 
+ */
+Roo.tree.TreeEditor = function(config, oldconfig) { // was -- (tree, config){
+    var tree = config;
+    var field;
+    if (oldconfig) { // old style..
+        field = oldconfig.events ? oldconfig : new Roo.form.TextField(oldconfig);
+    } else {
+        // new style..
+        tree = config.tree;
+        config.field = config.field  || {};
+        config.field.xtype = 'TextField';
+        field = Roo.factory(config.field, Roo.form);
     }
+    config = config || {};
     
-    if (this.selModel) {
-        this.selModel = Roo.factory(this.selModel, Roo.tree);
-    }
-   
-};
-Roo.extend(Roo.tree.TreePanel, Roo.data.Tree, {
-    rootVisible : true,
-    animate: Roo.enableFx,
-    lines : true,
-    enableDD : false,
-    hlDrop : Roo.enableFx,
-  
-    renderer: false,
     
-    rendererTip: false,
-    // private
-    restrictExpand : function(node){
-        var p = node.parentNode;
-        if(p){
-            if(p.expandedChild && p.expandedChild.parentNode == p){
-                p.expandedChild.collapse();
-            }
-            p.expandedChild = node;
-        }
-    },
+    this.addEvents({
+        /**
+         * @event beforenodeedit
+         * Fires when editing is initiated, but before the value changes.  Editing can be canceled by returning
+         * false from the handler of this event.
+         * @param {Editor} this
+         * @param {Roo.tree.Node} node 
+         */
+        "beforenodeedit" : true
+    });
+    
+    //Roo.log(config);
+    Roo.tree.TreeEditor.superclass.constructor.call(this, field, config);
 
-    // private override
-    setRootNode : function(node){
-        Roo.tree.TreePanel.superclass.setRootNode.call(this, node);
-        if(!this.rootVisible){
-            node.ui = new Roo.tree.RootTreeNodeUI(node);
-        }
-        return node;
-    },
+    this.tree = tree;
+
+    tree.on('beforeclick', this.beforeNodeClick, this);
+    tree.getTreeEl().on('mousedown', this.hide, this);
+    this.on('complete', this.updateNode, this);
+    this.on('beforestartedit', this.fitToTree, this);
+    this.on('startedit', this.bindScroll, this, {delay:10});
+    this.on('specialkey', this.onSpecialKey, this);
+};
 
+Roo.extend(Roo.tree.TreeEditor, Roo.Editor, {
     /**
-     * Returns the container element for this TreePanel
+     * @cfg {String} alignment
+     * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to "l-l").
      */
-    getEl : function(){
-        return this.el;
-    },
-
+    alignment: "l-l",
+    // inherit
+    autoSize: false,
     /**
-     * Returns the default TreeLoader for this TreePanel
+     * @cfg {Boolean} hideEl
+     * True to hide the bound element while the editor is displayed (defaults to false)
      */
-    getLoader : function(){
-        return this.loader;
-    },
-
+    hideEl : false,
     /**
-     * Expand all nodes
+     * @cfg {String} cls
+     * CSS class to apply to the editor (defaults to "x-small-editor x-tree-editor")
      */
-    expandAll : function(){
-        this.root.expand(true);
-    },
-
+    cls: "x-small-editor x-tree-editor",
     /**
-     * Collapse all nodes
+     * @cfg {Boolean} shim
+     * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
      */
-    collapseAll : function(){
-        this.root.collapse(true);
-    },
-
+    shim:false,
+    // inherit
+    shadow:"frame",
     /**
-     * Returns the selection model used by this TreePanel
+     * @cfg {Number} maxWidth
+     * The maximum width in pixels of the editor field (defaults to 250).  Note that if the maxWidth would exceed
+     * the containing tree element's size, it will be automatically limited for you to the container width, taking
+     * scroll and client offsets into account prior to each edit.
      */
-    getSelectionModel : function(){
-        if(!this.selModel){
-            this.selModel = new Roo.tree.DefaultSelectionModel();
+    maxWidth: 250,
+
+    editDelay : 350,
+
+    // private
+    fitToTree : function(ed, el){
+        var td = this.tree.getTreeEl().dom, nd = el.dom;
+        if(td.scrollLeft >  nd.offsetLeft){ // ensure the node left point is visible
+            td.scrollLeft = nd.offsetLeft;
         }
-        return this.selModel;
+        var w = Math.min(
+                this.maxWidth,
+                (td.clientWidth > 20 ? td.clientWidth : td.offsetWidth) - Math.max(0, nd.offsetLeft-td.scrollLeft) - /*cushion*/5);
+        this.setSize(w, '');
+        
+        return this.fireEvent('beforenodeedit', this, this.editNode);
+        
     },
 
-    /**
-     * Retrieve an array of checked nodes, or an array of a specific attribute of checked nodes (e.g. "id")
-     * @param {String} attribute (optional) Defaults to null (return the actual nodes)
-     * @param {TreeNode} startNode (optional) The node to start from, defaults to the root
-     * @return {Array}
-     */
-    getChecked : function(a, startNode){
-        startNode = startNode || this.root;
-        var r = [];
-        var f = function(){
-            if(this.attributes.checked){
-                r.push(!a ? this : (a == 'id' ? this.id : this.attributes[a]));
-            }
-        }
-        startNode.cascade(f);
-        return r;
+    // private
+    triggerEdit : function(node){
+        this.completeEdit();
+        this.editNode = node;
+        this.startEdit(node.ui.textNode, node.text);
     },
 
-    /**
-     * Expands a specified path in this TreePanel. A path can be retrieved from a node with {@link Roo.data.Node#getPath}
-     * @param {String} path
-     * @param {String} attr (optional) The attribute used in the path (see {@link Roo.data.Node#getPath} for more info)
-     * @param {Function} callback (optional) The callback to call when the expand is complete. The callback will be called with
-     * (bSuccess, oLastNode) where bSuccess is if the expand was successful and oLastNode is the last node that was expanded.
-     */
-    expandPath : function(path, attr, callback){
-        attr = attr || "id";
-        var keys = path.split(this.pathSeparator);
-        var curNode = this.root;
-        if(curNode.attributes[attr] != keys[1]){ // invalid root
-            if(callback){
-                callback(false, null);
-            }
-            return;
-        }
-        var index = 1;
-        var f = function(){
-            if(++index == keys.length){
-                if(callback){
-                    callback(true, curNode);
-                }
-                return;
-            }
-            var c = curNode.findChild(attr, keys[index]);
-            if(!c){
-                if(callback){
-                    callback(false, curNode);
-                }
-                return;
-            }
-            curNode = c;
-            c.expand(false, false, f);
-        };
-        curNode.expand(false, false, f);
+    // private
+    bindScroll : function(){
+        this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
     },
 
-    /**
-     * Selects the node in this tree at the specified path. A path can be retrieved from a node with {@link Roo.data.Node#getPath}
-     * @param {String} path
-     * @param {String} attr (optional) The attribute used in the path (see {@link Roo.data.Node#getPath} for more info)
-     * @param {Function} callback (optional) The callback to call when the selection is complete. The callback will be called with
-     * (bSuccess, oSelNode) where bSuccess is if the selection was successful and oSelNode is the selected node.
-     */
-    selectPath : function(path, attr, callback){
-        attr = attr || "id";
-        var keys = path.split(this.pathSeparator);
-        var v = keys.pop();
-        if(keys.length > 0){
-            var f = function(success, node){
-                if(success && node){
-                    var n = node.findChild(attr, v);
-                    if(n){
-                        n.select();
-                        if(callback){
-                            callback(true, n);
-                        }
-                    }else if(callback){
-                        callback(false, n);
-                    }
-                }else{
-                    if(callback){
-                        callback(false, n);
-                    }
-                }
-            };
-            this.expandPath(keys.join(this.pathSeparator), attr, f);
-        }else{
-            this.root.select();
-            if(callback){
-                callback(true, this.root);
-            }
+    // private
+    beforeNodeClick : function(node, e){
+        var sinceLast = (this.lastClick ? this.lastClick.getElapsed() : 0);
+        this.lastClick = new Date();
+        if(sinceLast > this.editDelay && this.tree.getSelectionModel().isSelected(node)){
+            e.stopEvent();
+            this.triggerEdit(node);
+            return false;
         }
+        return true;
     },
 
-    getTreeEl : function(){
-        return this.el;
+    // private
+    updateNode : function(ed, value){
+        this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
+        this.editNode.setText(value);
     },
 
-    /**
-     * Trigger rendering of this TreePanel
-     */
-    render : function(){
-        if (this.innerCt) {
-            return this; // stop it rendering more than once!!
+    // private
+    onHide : function(){
+        Roo.tree.TreeEditor.superclass.onHide.call(this);
+        if(this.editNode){
+            this.editNode.ui.focus();
         }
-        
-        this.innerCt = this.el.createChild({tag:"ul",
-               cls:"x-tree-root-ct " +
-               (this.lines ? "x-tree-lines" : "x-tree-no-lines")});
+    },
 
-        if(this.containerScroll){
-            Roo.dd.ScrollManager.register(this.el);
-        }
-        if((this.enableDD || this.enableDrop) && !this.dropZone){
-           /**
-            * The dropZone used by this tree if drop is enabled
-            * @type Roo.tree.TreeDropZone
-            */
-             this.dropZone = new Roo.tree.TreeDropZone(this, this.dropConfig || {
-               ddGroup: this.ddGroup || "TreeDD", appendOnly: this.ddAppendOnly === true
-           });
-        }
-        if((this.enableDD || this.enableDrag) && !this.dragZone){
-           /**
-            * The dragZone used by this tree if drag is enabled
-            * @type Roo.tree.TreeDragZone
-            */
-            this.dragZone = new Roo.tree.TreeDragZone(this, this.dragConfig || {
-               ddGroup: this.ddGroup || "TreeDD",
-               scroll: this.ddScroll
-           });
-        }
-        this.getSelectionModel().init(this);
-        if (!this.root) {
-            Roo.log("ROOT not set in tree");
-            return this;
-        }
-        this.root.render();
-        if(!this.rootVisible){
-            this.root.renderChildren();
+    // private
+    onSpecialKey : function(field, e){
+        var k = e.getKey();
+        if(k == e.ESC){
+            e.stopEvent();
+            this.cancelEdit();
+        }else if(k == e.ENTER && !e.hasModifier()){
+            e.stopEvent();
+            this.completeEdit();
         }
-        return this;
     }
-});/*
+});//<Script type="text/javascript">
+/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -16418,327 +14179,256 @@ Roo.extend(Roo.tree.TreePanel, Roo.data.Tree, {
  * <script type="text/javascript">
  */
  
-
 /**
- * @class Roo.tree.DefaultSelectionModel
- * @extends Roo.util.Observable
- * The default single selection for a TreePanel.
- * @param {Object} cfg Configuration
+ * Not documented??? - probably should be...
  */
-Roo.tree.DefaultSelectionModel = function(cfg){
-   this.selNode = null;
-   
-   
-   
-   this.addEvents({
-       /**
-        * @event selectionchange
-        * Fires when the selected node changes
-        * @param {DefaultSelectionModel} this
-        * @param {TreeNode} node the new selection
-        */
-       "selectionchange" : true,
-
-       /**
-        * @event beforeselect
-        * Fires before the selected node changes, return false to cancel the change
-        * @param {DefaultSelectionModel} this
-        * @param {TreeNode} node the new selection
-        * @param {TreeNode} node the old selection
-        */
-       "beforeselect" : true
-   });
-   
-    Roo.tree.DefaultSelectionModel.superclass.constructor.call(this,cfg);
-};
 
-Roo.extend(Roo.tree.DefaultSelectionModel, Roo.util.Observable, {
-    init : function(tree){
-        this.tree = tree;
-        tree.getTreeEl().on("keydown", this.onKeyDown, this);
-        tree.on("click", this.onNodeClick, this);
-    },
+Roo.tree.ColumnNodeUI = Roo.extend(Roo.tree.TreeNodeUI, {
+    //focus: Roo.emptyFn, // prevent odd scrolling behavior
     
-    onNodeClick : function(node, e){
-        if (e.ctrlKey && this.selNode == node)  {
-            this.unselect(node);
-            return;
+    renderElements : function(n, a, targetNode, bulkRender){
+        //consel.log("renderElements?");
+        this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
+
+        var t = n.getOwnerTree();
+        var tid = Pman.Tab.Document_TypesTree.tree.el.id;
+        
+        var cols = t.columns;
+        var bw = t.borderWidth;
+        var c = cols[0];
+        var href = a.href ? a.href : Roo.isGecko ? "" : "#";
+         var cb = typeof a.checked == "boolean";
+        var tx = String.format('{0}',n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]));
+        var colcls = 'x-t-' + tid + '-c0';
+        var buf = [
+            '<li class="x-tree-node">',
+            
+                
+                '<div class="x-tree-node-el ', a.cls,'">',
+                    // extran...
+                    '<div class="x-tree-col ', colcls, '" style="width:', c.width-bw, 'px;">',
+                
+                
+                        '<span class="x-tree-node-indent">',this.indentMarkup,'</span>',
+                        '<img src="', this.emptyIcon, '" class="x-tree-ec-icon  " />',
+                        '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',
+                           (a.icon ? ' x-tree-node-inline-icon' : ''),
+                           (a.iconCls ? ' '+a.iconCls : ''),
+                           '" unselectable="on" />',
+                        (cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + 
+                             (a.checked ? 'checked="checked" />' : ' />')) : ''),
+                             
+                        '<a class="x-tree-node-anchor" hidefocus="on" href="',href,'" tabIndex="1" ',
+                            (a.hrefTarget ? ' target="' +a.hrefTarget + '"' : ''), '>',
+                            '<span unselectable="on" qtip="' + tx + '">',
+                             tx,
+                             '</span></a>' ,
+                    '</div>',
+                     '<a class="x-tree-node-anchor" hidefocus="on" href="',href,'" tabIndex="1" ',
+                            (a.hrefTarget ? ' target="' +a.hrefTarget + '"' : ''), '>'
+                 ];
+        for(var i = 1, len = cols.length; i < len; i++){
+            c = cols[i];
+            colcls = 'x-t-' + tid + '-c' +i;
+            tx = String.format('{0}', (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]));
+            buf.push('<div class="x-tree-col ', colcls, ' ' ,(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
+                        '<div class="x-tree-col-text" qtip="' + tx +'">',tx,"</div>",
+                      "</div>");
+         }
+         
+         buf.push(
+            '</a>',
+            '<div class="x-clear"></div></div>',
+            '<ul class="x-tree-node-ct" style="display:none;"></ul>',
+            "</li>");
+        
+        if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
+            this.wrap = Roo.DomHelper.insertHtml("beforeBegin",
+                                n.nextSibling.ui.getEl(), buf.join(""));
+        }else{
+            this.wrap = Roo.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
         }
-        this.select(node);
+        var el = this.wrap.firstChild;
+        this.elRow = el;
+        this.elNode = el.firstChild;
+        this.ranchor = el.childNodes[1];
+        this.ctNode = this.wrap.childNodes[1];
+        var cs = el.firstChild.childNodes;
+        this.indentNode = cs[0];
+        this.ecNode = cs[1];
+        this.iconNode = cs[2];
+        var index = 3;
+        if(cb){
+            this.checkbox = cs[3];
+            index++;
+        }
+        this.anchor = cs[index];
+        
+        this.textNode = cs[index].firstChild;
+        
+        //el.on("click", this.onClick, this);
+        //el.on("dblclick", this.onDblClick, this);
+        
+        
+       // console.log(this);
     },
-    
-    /**
-     * Select a node.
-     * @param {TreeNode} node The node to select
-     * @return {TreeNode} The selected node
-     */
-    select : function(node){
-        var last = this.selNode;
-        if(last != node && this.fireEvent('beforeselect', this, node, last) !== false){
-            if(last){
-                last.ui.onSelectedChange(false);
-            }
-            this.selNode = node;
-            node.ui.onSelectedChange(true);
-            this.fireEvent("selectionchange", this, node, last);
+    initEvents : function(){
+        Roo.tree.ColumnNodeUI.superclass.initEvents.call(this);
+        
+            
+        var a = this.ranchor;
+
+        var el = Roo.get(a);
+
+        if(Roo.isOpera){ // opera render bug ignores the CSS
+            el.setStyle("text-decoration", "none");
         }
-        return node;
-    },
-    
-    /**
-     * Deselect a node.
-     * @param {TreeNode} node The node to unselect
-     */
-    unselect : function(node){
-        if(this.selNode == node){
-            this.clearSelections();
-        }    
+
+        el.on("click", this.onClick, this);
+        el.on("dblclick", this.onDblClick, this);
+        el.on("contextmenu", this.onContextMenu, this);
+        
     },
     
-    /**
-     * Clear all selections
-     */
-    clearSelections : function(){
-        var n = this.selNode;
-        if(n){
-            n.ui.onSelectedChange(false);
-            this.selNode = null;
-            this.fireEvent("selectionchange", this, null);
+    /*onSelectedChange : function(state){
+        if(state){
+            this.focus();
+            this.addClass("x-tree-selected");
+        }else{
+            //this.blur();
+            this.removeClass("x-tree-selected");
         }
-        return n;
+    },*/
+    addClass : function(cls){
+        if(this.elRow){
+            Roo.fly(this.elRow).addClass(cls);
+        }
+        
     },
     
-    /**
-     * Get the selected node
-     * @return {TreeNode} The selected node
-     */
-    getSelectedNode : function(){
-        return this.selNode;    
-    },
     
-    /**
-     * Returns true if the node is selected
-     * @param {TreeNode} node The node to check
-     * @return {Boolean}
-     */
-    isSelected : function(node){
-        return this.selNode == node;  
-    },
-
-    /**
-     * Selects the node above the selected node in the tree, intelligently walking the nodes
-     * @return TreeNode The new selection
-     */
-    selectPrevious : function(){
-        var s = this.selNode || this.lastSelNode;
-        if(!s){
-            return null;
-        }
-        var ps = s.previousSibling;
-        if(ps){
-            if(!ps.isExpanded() || ps.childNodes.length < 1){
-                return this.select(ps);
-            } else{
-                var lc = ps.lastChild;
-                while(lc && lc.isExpanded() && lc.childNodes.length > 0){
-                    lc = lc.lastChild;
-                }
-                return this.select(lc);
-            }
-        } else if(s.parentNode && (this.tree.rootVisible || !s.parentNode.isRoot)){
-            return this.select(s.parentNode);
+    removeClass : function(cls){
+        if(this.elRow){
+            Roo.fly(this.elRow).removeClass(cls);
         }
-        return null;
-    },
+    }
 
-    /**
-     * Selects the node above the selected node in the tree, intelligently walking the nodes
-     * @return TreeNode The new selection
-     */
-    selectNext : function(){
-        var s = this.selNode || this.lastSelNode;
-        if(!s){
-            return null;
-        }
-        if(s.firstChild && s.isExpanded()){
-             return this.select(s.firstChild);
-         }else if(s.nextSibling){
-             return this.select(s.nextSibling);
-         }else if(s.parentNode){
-            var newS = null;
-            s.parentNode.bubble(function(){
-                if(this.nextSibling){
-                    newS = this.getOwnerTree().selModel.select(this.nextSibling);
-                    return false;
-                }
-            });
-            return newS;
-         }
-        return null;
-    },
+    
+    
+});//<Script type="text/javascript">
 
-    onKeyDown : function(e){
-        var s = this.selNode || this.lastSelNode;
-        // undesirable, but required
-        var sm = this;
-        if(!s){
-            return;
-        }
-        var k = e.getKey();
-        switch(k){
-             case e.DOWN:
-                 e.stopEvent();
-                 this.selectNext();
-             break;
-             case e.UP:
-                 e.stopEvent();
-                 this.selectPrevious();
-             break;
-             case e.RIGHT:
-                 e.preventDefault();
-                 if(s.hasChildNodes()){
-                     if(!s.isExpanded()){
-                         s.expand();
-                     }else if(s.firstChild){
-                         this.select(s.firstChild, e);
-                     }
-                 }
-             break;
-             case e.LEFT:
-                 e.preventDefault();
-                 if(s.hasChildNodes() && s.isExpanded()){
-                     s.collapse();
-                 }else if(s.parentNode && (this.tree.rootVisible || s.parentNode != this.tree.getRootNode())){
-                     this.select(s.parentNode, e);
-                 }
-             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">
+ */
+ 
 
 /**
- * @class Roo.tree.MultiSelectionModel
- * @extends Roo.util.Observable
- * Multi selection for a TreePanel.
- * @param {Object} cfg Configuration
+ * @class Roo.tree.ColumnTree
+ * @extends Roo.tree.TreePanel
+ * @cfg {Object} columns  Including width, header, renderer, cls, dataIndex 
+ * @cfg {int} borderWidth  compined right/left border allowance
+ * @constructor
+ * @param {String/HTMLElement/Element} el The container element
+ * @param {Object} config
  */
-Roo.tree.MultiSelectionModel = function(){
-   this.selNodes = [];
-   this.selMap = {};
+Roo.tree.ColumnTree =  function(el, config)
+{
+   Roo.tree.ColumnTree.superclass.constructor.call(this, el , config);
    this.addEvents({
-       /**
-        * @event selectionchange
-        * Fires when the selected nodes change
-        * @param {MultiSelectionModel} this
-        * @param {Array} nodes Array of the selected nodes
+        /**
+        * @event resize
+        * Fire this event on a container when it resizes
+        * @param {int} w Width
+        * @param {int} h Height
         */
-       "selectionchange" : true
-   });
-   Roo.tree.MultiSelectionModel.superclass.constructor.call(this,cfg);
-   
+       "resize" : true
+    });
+    this.on('resize', this.onResize, this);
 };
 
-Roo.extend(Roo.tree.MultiSelectionModel, Roo.util.Observable, {
-    init : function(tree){
-        this.tree = tree;
-        tree.getTreeEl().on("keydown", this.onKeyDown, this);
-        tree.on("click", this.onNodeClick, this);
-    },
+Roo.extend(Roo.tree.ColumnTree, Roo.tree.TreePanel, {
+    //lines:false,
     
-    onNodeClick : function(node, e){
-        this.select(node, e, e.ctrlKey);
-    },
     
-    /**
-     * Select a node.
-     * @param {TreeNode} node The node to select
-     * @param {EventObject} e (optional) An event associated with the selection
-     * @param {Boolean} keepExisting True to retain existing selections
-     * @return {TreeNode} The selected node
-     */
-    select : function(node, e, keepExisting){
-        if(keepExisting !== true){
-            this.clearSelections(true);
-        }
-        if(this.isSelected(node)){
-            this.lastSelNode = node;
-            return node;
-        }
-        this.selNodes.push(node);
-        this.selMap[node.id] = node;
-        this.lastSelNode = node;
-        node.ui.onSelectedChange(true);
-        this.fireEvent("selectionchange", this, this.selNodes);
-        return node;
-    },
+    borderWidth: Roo.isBorderBox ? 0 : 2, 
+    headEls : false,
     
-    /**
-     * Deselect a node.
-     * @param {TreeNode} node The node to unselect
-     */
-    unselect : function(node){
-        if(this.selMap[node.id]){
-            node.ui.onSelectedChange(false);
-            var sn = this.selNodes;
-            var index = -1;
-            if(sn.indexOf){
-                index = sn.indexOf(node);
-            }else{
-                for(var i = 0, len = sn.length; i < len; i++){
-                    if(sn[i] == node){
-                        index = i;
-                        break;
-                    }
-                }
-            }
-            if(index != -1){
-                this.selNodes.splice(index, 1);
-            }
-            delete this.selMap[node.id];
-            this.fireEvent("selectionchange", this, this.selNodes);
+    render : function(){
+        // add the header.....
+       
+        Roo.tree.ColumnTree.superclass.render.apply(this);
+        
+        this.el.addClass('x-column-tree');
+        
+        this.headers = this.el.createChild(
+            {cls:'x-tree-headers'},this.innerCt.dom);
+   
+        var cols = this.columns, c;
+        var totalWidth = 0;
+        this.headEls = [];
+        var  len = cols.length;
+        for(var i = 0; i < len; i++){
+             c = cols[i];
+             totalWidth += c.width;
+            this.headEls.push(this.headers.createChild({
+                 cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
+                 cn: {
+                     cls:'x-tree-hd-text',
+                     html: c.header
+                 },
+                 style:'width:'+(c.width-this.borderWidth)+'px;'
+             }));
         }
+        this.headers.createChild({cls:'x-clear'});
+        // prevent floats from wrapping when clipped
+        this.headers.setWidth(totalWidth);
+        //this.innerCt.setWidth(totalWidth);
+        this.innerCt.setStyle({ overflow: 'auto' });
+        this.onResize(this.width, this.height);
+             
+        
     },
-    
-    /**
-     * Clear all selections
-     */
-    clearSelections : function(suppressEvent){
-        var sn = this.selNodes;
-        if(sn.length > 0){
-            for(var i = 0, len = sn.length; i < len; i++){
-                sn[i].ui.onSelectedChange(false);
-            }
-            this.selNodes = [];
-            this.selMap = {};
-            if(suppressEvent !== true){
-                this.fireEvent("selectionchange", this, this.selNodes);
+    onResize : function(w,h)
+    {
+        this.height = h;
+        this.width = w;
+        // resize cols..
+        this.innerCt.setWidth(this.width);
+        this.innerCt.setHeight(this.height-20);
+        
+        // headers...
+        var cols = this.columns, c;
+        var totalWidth = 0;
+        var expEl = false;
+        var len = cols.length;
+        for(var i = 0; i < len; i++){
+            c = cols[i];
+            if (this.autoExpandColumn !== false && c.dataIndex == this.autoExpandColumn) {
+                // it's the expander..
+                expEl  = this.headEls[i];
+                continue;
             }
+            totalWidth += c.width;
+            
         }
-    },
-    
-    /**
-     * Returns true if the node is selected
-     * @param {TreeNode} node The node to check
-     * @return {Boolean}
-     */
-    isSelected : function(node){
-        return this.selMap[node.id] ? true : false;  
-    },
-    
-    /**
-     * Returns an array of the selected nodes
-     * @return {Array}
-     */
-    getSelectedNodes : function(){
-        return this.selNodes;    
-    },
-
-    onKeyDown : Roo.tree.DefaultSelectionModel.prototype.onKeyDown,
-
-    selectNext : Roo.tree.DefaultSelectionModel.prototype.selectNext,
+        if (expEl) {
+            expEl.setWidth(  ((w - totalWidth)-this.borderWidth - 20));
+        }
+        this.headers.setWidth(w-20);
 
-    selectPrevious : Roo.tree.DefaultSelectionModel.prototype.selectPrevious
-});/*
+        
+        
+        
+    }
+});
+/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -16750,605 +14440,563 @@ Roo.extend(Roo.tree.MultiSelectionModel, Roo.util.Observable, {
  */
  
 /**
- * @class Roo.tree.TreeNode
- * @extends Roo.data.Node
- * @cfg {String} text The text for this node
- * @cfg {Boolean} expanded true to start the node expanded
- * @cfg {Boolean} allowDrag false to make this node undraggable if DD is on (defaults to true)
- * @cfg {Boolean} allowDrop false if this node cannot be drop on
- * @cfg {Boolean} disabled true to start the node disabled
- * @cfg {String} icon The path to an icon for the node. The preferred way to do this
- * is to use the cls or iconCls attributes and add the icon via a CSS background image.
- * @cfg {String} cls A css class to be added to the node
- * @cfg {String} iconCls A css class to be added to the nodes icon element for applying css background images
- * @cfg {String} href URL of the link used for the node (defaults to #)
- * @cfg {String} hrefTarget target frame for the link
- * @cfg {String} qtip An Ext QuickTip for the node
- * @cfg {String} qtipCfg An Ext QuickTip config for the node (used instead of qtip)
- * @cfg {Boolean} singleClickExpand True for single click expand on this node
- * @cfg {Function} uiProvider A UI <b>class</b> to use for this node (defaults to Roo.tree.TreeNodeUI)
- * @cfg {Boolean} checked True to render a checked checkbox for this node, false to render an unchecked checkbox
- * (defaults to undefined with no checkbox rendered)
+ * @class Roo.menu.Menu
+ * @extends Roo.util.Observable
+ * @children Roo.menu.Item Roo.menu.Separator Roo.menu.TextItem
+ * A menu object.  This is the container to which you add all other menu items.  Menu can also serve a as a base class
+ * when you want a specialzed menu based off of another component (like {@link Roo.menu.DateMenu} for example).
  * @constructor
- * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node
+ * Creates a new Menu
+ * @param {Object} config Configuration options
  */
-Roo.tree.TreeNode = function(attributes){
-    attributes = attributes || {};
-    if(typeof attributes == "string"){
-        attributes = {text: attributes};
-    }
-    this.childrenRendered = false;
-    this.rendered = false;
-    Roo.tree.TreeNode.superclass.constructor.call(this, attributes);
-    this.expanded = attributes.expanded === true;
-    this.isTarget = attributes.isTarget !== false;
-    this.draggable = attributes.draggable !== false && attributes.allowDrag !== false;
-    this.allowChildren = attributes.allowChildren !== false && attributes.allowDrop !== false;
-
-    /**
-     * Read-only. The text for this node. To change it use setText().
-     * @type String
-     */
-    this.text = attributes.text;
-    /**
-     * True if this node is disabled.
-     * @type Boolean
-     */
-    this.disabled = attributes.disabled === true;
-
+Roo.menu.Menu = function(config){
+    
+    Roo.menu.Menu.superclass.constructor.call(this, config);
+    
+    this.id = this.id || Roo.id();
     this.addEvents({
         /**
-        * @event textchange
-        * Fires when the text for this node is changed
-        * @param {Node} this This node
-        * @param {String} text The new text
-        * @param {String} oldText The old text
-        */
-        "textchange" : true,
-        /**
-        * @event beforeexpand
-        * Fires before this node is expanded, return false to cancel.
-        * @param {Node} this This node
-        * @param {Boolean} deep
-        * @param {Boolean} anim
-        */
-        "beforeexpand" : true,
-        /**
-        * @event beforecollapse
-        * Fires before this node is collapsed, return false to cancel.
-        * @param {Node} this This node
-        * @param {Boolean} deep
-        * @param {Boolean} anim
-        */
-        "beforecollapse" : true,
-        /**
-        * @event expand
-        * Fires when this node is expanded
-        * @param {Node} this This node
-        */
-        "expand" : true,
-        /**
-        * @event disabledchange
-        * Fires when the disabled status of this node changes
-        * @param {Node} this This node
-        * @param {Boolean} disabled
-        */
-        "disabledchange" : true,
+         * @event beforeshow
+         * Fires before this menu is displayed
+         * @param {Roo.menu.Menu} this
+         */
+        beforeshow : true,
         /**
-        * @event collapse
-        * Fires when this node is collapsed
-        * @param {Node} this This node
-        */
-        "collapse" : true,
+         * @event beforehide
+         * Fires before this menu is hidden
+         * @param {Roo.menu.Menu} this
+         */
+        beforehide : true,
         /**
-        * @event beforeclick
-        * Fires before click processing. Return false to cancel the default action.
-        * @param {Node} this This node
-        * @param {Roo.EventObject} e The event object
-        */
-        "beforeclick":true,
+         * @event show
+         * Fires after this menu is displayed
+         * @param {Roo.menu.Menu} this
+         */
+        show : true,
         /**
-        * @event checkchange
-        * Fires when a node with a checkbox's checked property changes
-        * @param {Node} this This node
-        * @param {Boolean} checked
-        */
-        "checkchange":true,
+         * @event hide
+         * Fires after this menu is hidden
+         * @param {Roo.menu.Menu} this
+         */
+        hide : true,
         /**
-        * @event click
-        * Fires when this node is clicked
-        * @param {Node} this This node
-        * @param {Roo.EventObject} e The event object
-        */
-        "click":true,
+         * @event click
+         * Fires when this menu is clicked (or when the enter key is pressed while it is active)
+         * @param {Roo.menu.Menu} this
+         * @param {Roo.menu.Item} menuItem The menu item that was clicked
+         * @param {Roo.EventObject} e
+         */
+        click : true,
         /**
-        * @event dblclick
-        * Fires when this node is double clicked
-        * @param {Node} this This node
-        * @param {Roo.EventObject} e The event object
-        */
-        "dblclick":true,
+         * @event mouseover
+         * Fires when the mouse is hovering over this menu
+         * @param {Roo.menu.Menu} this
+         * @param {Roo.EventObject} e
+         * @param {Roo.menu.Item} menuItem The menu item that was clicked
+         */
+        mouseover : true,
         /**
-        * @event contextmenu
-        * Fires when this node is right clicked
-        * @param {Node} this This node
-        * @param {Roo.EventObject} e The event object
-        */
-        "contextmenu":true,
+         * @event mouseout
+         * Fires when the mouse exits this menu
+         * @param {Roo.menu.Menu} this
+         * @param {Roo.EventObject} e
+         * @param {Roo.menu.Item} menuItem The menu item that was clicked
+         */
+        mouseout : true,
         /**
-        * @event beforechildrenrendered
-        * Fires right before the child nodes for this node are rendered
-        * @param {Node} this This node
-        */
-        "beforechildrenrendered":true
+         * @event itemclick
+         * Fires when a menu item contained in this menu is clicked
+         * @param {Roo.menu.BaseItem} baseItem The BaseItem that was clicked
+         * @param {Roo.EventObject} e
+         */
+        itemclick: true
     });
-
-    var uiClass = this.attributes.uiProvider || Roo.tree.TreeNodeUI;
-
-    /**
-     * Read-only. The UI for this node
-     * @type TreeNodeUI
-     */
-    this.ui = new uiClass(this);
-    
-    // finally support items[]
-    if (typeof(this.attributes.items) == 'undefined' || !this.attributes.items) {
-        return;
+    if (this.registerMenu) {
+        Roo.menu.MenuMgr.register(this);
     }
     
-    
-    Roo.each(this.attributes.items, function(c) {
-        this.appendChild(Roo.factory(c,Roo.Tree));
-    }, this);
-    delete this.attributes.items;
-    
-    
-    
+    var mis = this.items;
+    this.items = new Roo.util.MixedCollection();
+    if(mis){
+        this.add.apply(this, mis);
+    }
 };
-Roo.extend(Roo.tree.TreeNode, Roo.data.Node, {
-    preventHScroll: true,
+
+Roo.extend(Roo.menu.Menu, Roo.util.Observable, {
     /**
-     * Returns true if this node is expanded
-     * @return {Boolean}
+     * @cfg {Number} minWidth The minimum width of the menu in pixels (defaults to 120)
      */
-    isExpanded : function(){
-        return this.expanded;
-    },
-
+    minWidth : 120,
     /**
-     * Returns the UI object for this node
-     * @return {TreeNodeUI}
+     * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop"
+     * for bottom-right shadow (defaults to "sides")
      */
-    getUI : function(){
-        return this.ui;
-    },
+    shadow : "sides",
+    /**
+     * @cfg {String} subMenuAlign The {@link Roo.Element#alignTo} anchor position value to use for submenus of
+     * this menu (defaults to "tl-tr?")
+     */
+    subMenuAlign : "tl-tr?",
+    /**
+     * @cfg {String} defaultAlign The default {@link Roo.Element#alignTo) anchor position value for this menu
+     * relative to its element of origin (defaults to "tl-bl?")
+     */
+    defaultAlign : "tl-bl?",
+    /**
+     * @cfg {Boolean} allowOtherMenus True to allow multiple menus to be displayed at the same time (defaults to false)
+     */
+    allowOtherMenus : false,
+    /**
+     * @cfg {Boolean} registerMenu True (default) - means that clicking on screen etc. hides it.
+     */
+    registerMenu : true,
 
-    // private override
-    setFirstChild : function(node){
-        var of = this.firstChild;
-        Roo.tree.TreeNode.superclass.setFirstChild.call(this, node);
-        if(this.childrenRendered && of && node != of){
-            of.renderIndent(true, true);
+    hidden:true,
+
+    // private
+    render : function(){
+        if(this.el){
+            return;
         }
-        if(this.rendered){
-            this.renderIndent(true, true);
+        var el = this.el = new Roo.Layer({
+            cls: "x-menu",
+            shadow:this.shadow,
+            constrain: false,
+            parentEl: this.parentEl || document.body,
+            zindex:15000
+        });
+
+        this.keyNav = new Roo.menu.MenuNav(this);
+
+        if(this.plain){
+            el.addClass("x-menu-plain");
+        }
+        if(this.cls){
+            el.addClass(this.cls);
         }
+        // generic focus element
+        this.focusEl = el.createChild({
+            tag: "a", cls: "x-menu-focus", href: "#", onclick: "return false;", tabIndex:"-1"
+        });
+        var ul = el.createChild({tag: "ul", cls: "x-menu-list"});
+        //disabling touch- as it's causing issues ..
+        //ul.on(Roo.isTouch ? 'touchstart' : 'click'   , this.onClick, this);
+        ul.on('click'   , this.onClick, this);
+        
+        
+        ul.on("mouseover", this.onMouseOver, this);
+        ul.on("mouseout", this.onMouseOut, this);
+        this.items.each(function(item){
+            if (item.hidden) {
+                return;
+            }
+            
+            var li = document.createElement("li");
+            li.className = "x-menu-list-item";
+            ul.dom.appendChild(li);
+            item.render(li, this);
+        }, this);
+        this.ul = ul;
+        this.autoWidth();
     },
 
-    // private override
-    setLastChild : function(node){
-        var ol = this.lastChild;
-        Roo.tree.TreeNode.superclass.setLastChild.call(this, node);
-        if(this.childrenRendered && ol && node != ol){
-            ol.renderIndent(true, true);
+    // private
+    autoWidth : function(){
+        var el = this.el, ul = this.ul;
+        if(!el){
+            return;
+        }
+        var w = this.width;
+        if(w){
+            el.setWidth(w);
+        }else if(Roo.isIE){
+            el.setWidth(this.minWidth);
+            var t = el.dom.offsetWidth; // force recalc
+            el.setWidth(ul.getWidth()+el.getFrameWidth("lr"));
         }
+    },
+
+    // private
+    delayAutoWidth : function(){
         if(this.rendered){
-            this.renderIndent(true, true);
+            if(!this.awTask){
+                this.awTask = new Roo.util.DelayedTask(this.autoWidth, this);
+            }
+            this.awTask.delay(20);
         }
     },
 
-    // these methods are overridden to provide lazy rendering support
-    // private override
-    appendChild : function()
-    {
-        var node = Roo.tree.TreeNode.superclass.appendChild.apply(this, arguments);
-        if(node && this.childrenRendered){
-            node.render();
+    // private
+    findTargetItem : function(e){
+        var t = e.getTarget(".x-menu-list-item", this.ul,  true);
+        if(t && t.menuItemId){
+            return this.items.get(t.menuItemId);
         }
-        this.ui.updateExpandIcon();
-        return node;
     },
 
-    // private override
-    removeChild : function(node){
-        this.ownerTree.getSelectionModel().unselect(node);
-        Roo.tree.TreeNode.superclass.removeChild.apply(this, arguments);
-        // if it's been rendered remove dom node
-        if(this.childrenRendered){
-            node.ui.remove();
+    // private
+    onClick : function(e){
+        Roo.log("menu.onClick");
+        var t = this.findTargetItem(e);
+        if(!t){
+            return;
         }
-        if(this.childNodes.length < 1){
-            this.collapse(false, false);
-        }else{
-            this.ui.updateExpandIcon();
+        Roo.log(e);
+        if (Roo.isTouch && e.type == 'touchstart' && t.menu  && !t.disabled) {
+            if(t == this.activeItem && t.shouldDeactivate(e)){
+                this.activeItem.deactivate();
+                delete this.activeItem;
+                return;
+            }
+            if(t.canActivate){
+                this.setActiveItem(t, true);
+            }
+            return;
+            
+            
         }
-        if(!this.firstChild) {
-            this.childrenRendered = false;
+        
+        t.onClick(e);
+        this.fireEvent("click", this, t, e);
+    },
+
+    // private
+    setActiveItem : function(item, autoExpand){
+        if(item != this.activeItem){
+            if(this.activeItem){
+                this.activeItem.deactivate();
+            }
+            this.activeItem = item;
+            item.activate(autoExpand);
+        }else if(autoExpand){
+            item.expandMenu();
         }
-        return node;
     },
 
-    // private override
-    insertBefore : function(node, refNode){
-        var newNode = Roo.tree.TreeNode.superclass.insertBefore.apply(this, arguments);
-        if(newNode && refNode && this.childrenRendered){
-            node.render();
+    // private
+    tryActivate : function(start, step){
+        var items = this.items;
+        for(var i = start, len = items.length; i >= 0 && i < len; i+= step){
+            var item = items.get(i);
+            if(!item.disabled && item.canActivate){
+                this.setActiveItem(item, false);
+                return item;
+            }
         }
-        this.ui.updateExpandIcon();
-        return newNode;
+        return false;
     },
 
-    /**
-     * Sets the text for this node
-     * @param {String} text
-     */
-    setText : function(text){
-        var oldText = this.text;
-        this.text = text;
-        this.attributes.text = text;
-        if(this.rendered){ // event without subscribing
-            this.ui.onTextChange(this, text, oldText);
+    // private
+    onMouseOver : function(e){
+        var t;
+        if(t = this.findTargetItem(e)){
+            if(t.canActivate && !t.disabled){
+                this.setActiveItem(t, true);
+            }
         }
-        this.fireEvent("textchange", this, text, oldText);
+        this.fireEvent("mouseover", this, e, t);
     },
 
-    /**
-     * Triggers selection of this node
-     */
-    select : function(){
-        this.getOwnerTree().getSelectionModel().select(this);
+    // private
+    onMouseOut : function(e){
+        var t;
+        if(t = this.findTargetItem(e)){
+            if(t == this.activeItem && t.shouldDeactivate(e)){
+                this.activeItem.deactivate();
+                delete this.activeItem;
+            }
+        }
+        this.fireEvent("mouseout", this, e, t);
     },
 
     /**
-     * Triggers deselection of this node
+     * Read-only.  Returns true if the menu is currently displayed, else false.
+     * @type Boolean
      */
-    unselect : function(){
-        this.getOwnerTree().getSelectionModel().unselect(this);
+    isVisible : function(){
+        return this.el && !this.hidden;
     },
 
     /**
-     * Returns true if this node is selected
-     * @return {Boolean}
+     * Displays this menu relative to another element
+     * @param {String/HTMLElement/Roo.Element} element The element to align to
+     * @param {String} position (optional) The {@link Roo.Element#alignTo} anchor position to use in aligning to
+     * the element (defaults to this.defaultAlign)
+     * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
      */
-    isSelected : function(){
-        return this.getOwnerTree().getSelectionModel().isSelected(this);
+    show : function(el, pos, parentMenu){
+        this.parentMenu = parentMenu;
+        if(!this.el){
+            this.render();
+        }
+        this.fireEvent("beforeshow", this);
+        this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false);
     },
 
     /**
-     * Expand this node.
-     * @param {Boolean} deep (optional) True to expand all children as well
-     * @param {Boolean} anim (optional) false to cancel the default animation
-     * @param {Function} callback (optional) A callback to be called when
-     * expanding this node completes (does not wait for deep expand to complete).
-     * Called with 1 parameter, this node.
+     * Displays this menu at a specific xy position
+     * @param {Array} xyPosition Contains X & Y [x, y] values for the position at which to show the menu (coordinates are page-based)
+     * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
      */
-    expand : function(deep, anim, callback){
-        if(!this.expanded){
-            if(this.fireEvent("beforeexpand", this, deep, anim) === false){
-                return;
-            }
-            if(!this.childrenRendered){
-                this.renderChildren();
-            }
-            this.expanded = true;
-            if(!this.isHiddenRoot() && (this.getOwnerTree().animate && anim !== false) || anim){
-                this.ui.animExpand(function(){
-                    this.fireEvent("expand", this);
-                    if(typeof callback == "function"){
-                        callback(this);
-                    }
-                    if(deep === true){
-                        this.expandChildNodes(true);
-                    }
-                }.createDelegate(this));
-                return;
-            }else{
-                this.ui.expand();
-                this.fireEvent("expand", this);
-                if(typeof callback == "function"){
-                    callback(this);
-                }
-            }
-        }else{
-           if(typeof callback == "function"){
-               callback(this);
-           }
+    showAt : function(xy, parentMenu, /* private: */_e){
+        this.parentMenu = parentMenu;
+        if(!this.el){
+            this.render();
         }
-        if(deep === true){
-            this.expandChildNodes(true);
+        if(_e !== false){
+            this.fireEvent("beforeshow", this);
+            xy = this.el.adjustForConstraints(xy);
+        }
+        this.el.setXY(xy);
+        this.el.show();
+        this.hidden = false;
+        this.focus();
+        this.fireEvent("show", this);
+    },
+
+    focus : function(){
+        if(!this.hidden){
+            this.doFocus.defer(50, this);
         }
     },
 
-    isHiddenRoot : function(){
-        return this.isRoot && !this.getOwnerTree().rootVisible;
+    doFocus : function(){
+        if(!this.hidden){
+            this.focusEl.focus();
+        }
     },
 
     /**
-     * Collapse this node.
-     * @param {Boolean} deep (optional) True to collapse all children as well
-     * @param {Boolean} anim (optional) false to cancel the default animation
+     * Hides this menu and optionally all parent menus
+     * @param {Boolean} deep (optional) True to hide all parent menus recursively, if any (defaults to false)
      */
-    collapse : function(deep, anim){
-        if(this.expanded && !this.isHiddenRoot()){
-            if(this.fireEvent("beforecollapse", this, deep, anim) === false){
-                return;
-            }
-            this.expanded = false;
-            if((this.getOwnerTree().animate && anim !== false) || anim){
-                this.ui.animCollapse(function(){
-                    this.fireEvent("collapse", this);
-                    if(deep === true){
-                        this.collapseChildNodes(true);
-                    }
-                }.createDelegate(this));
-                return;
-            }else{
-                this.ui.collapse();
-                this.fireEvent("collapse", this);
+    hide : function(deep){
+        if(this.el && this.isVisible()){
+            this.fireEvent("beforehide", this);
+            if(this.activeItem){
+                this.activeItem.deactivate();
+                this.activeItem = null;
             }
+            this.el.hide();
+            this.hidden = true;
+            this.fireEvent("hide", this);
         }
-        if(deep === true){
-            var cs = this.childNodes;
-            for(var i = 0, len = cs.length; i < len; i++) {
-            	cs[i].collapse(true, false);
-            }
+        if(deep === true && this.parentMenu){
+            this.parentMenu.hide(true);
         }
     },
 
-    // private
-    delayedExpand : function(delay){
-        if(!this.expandProcId){
-            this.expandProcId = this.expand.defer(delay, this);
+    /**
+     * Addds one or more items of any type supported by the Menu class, or that can be converted into menu items.
+     * Any of the following are valid:
+     * <ul>
+     * <li>Any menu item object based on {@link Roo.menu.Item}</li>
+     * <li>An HTMLElement object which will be converted to a menu item</li>
+     * <li>A menu item config object that will be created as a new menu item</li>
+     * <li>A string, which can either be '-' or 'separator' to add a menu separator, otherwise
+     * it will be converted into a {@link Roo.menu.TextItem} and added</li>
+     * </ul>
+     * Usage:
+     * <pre><code>
+// Create the menu
+var menu = new Roo.menu.Menu();
+
+// Create a menu item to add by reference
+var menuItem = new Roo.menu.Item({ text: 'New Item!' });
+
+// Add a bunch of items at once using different methods.
+// Only the last item added will be returned.
+var item = menu.add(
+    menuItem,                // add existing item by ref
+    'Dynamic Item',          // new TextItem
+    '-',                     // new separator
+    { text: 'Config Item' }  // new item by config
+);
+</code></pre>
+     * @param {Mixed} args One or more menu items, menu item configs or other objects that can be converted to menu items
+     * @return {Roo.menu.Item} The menu item that was added, or the last one if multiple items were added
+     */
+    add : function(){
+        var a = arguments, l = a.length, item;
+        for(var i = 0; i < l; i++){
+            var el = a[i];
+            if ((typeof(el) == "object") && el.xtype && el.xns) {
+                el = Roo.factory(el, Roo.menu);
+            }
+            
+            if(el.render){ // some kind of Item
+                item = this.addItem(el);
+            }else if(typeof el == "string"){ // string
+                if(el == "separator" || el == "-"){
+                    item = this.addSeparator();
+                }else{
+                    item = this.addText(el);
+                }
+            }else if(el.tagName || el.el){ // element
+                item = this.addElement(el);
+            }else if(typeof el == "object"){ // must be menu item config?
+                item = this.addMenuItem(el);
+            }
         }
+        return item;
     },
 
-    // private
-    cancelExpand : function(){
-        if(this.expandProcId){
-            clearTimeout(this.expandProcId);
+    /**
+     * Returns this menu's underlying {@link Roo.Element} object
+     * @return {Roo.Element} The element
+     */
+    getEl : function(){
+        if(!this.el){
+            this.render();
         }
-        this.expandProcId = false;
+        return this.el;
     },
 
     /**
-     * Toggles expanded/collapsed state of the node
+     * Adds a separator bar to the menu
+     * @return {Roo.menu.Item} The menu item that was added
      */
-    toggle : function(){
-        if(this.expanded){
-            this.collapse();
-        }else{
-            this.expand();
-        }
+    addSeparator : function(){
+        return this.addItem(new Roo.menu.Separator());
     },
 
     /**
-     * Ensures all parent nodes are expanded
+     * Adds an {@link Roo.Element} object to the menu
+     * @param {String/HTMLElement/Roo.Element} el The element or DOM node to add, or its id
+     * @return {Roo.menu.Item} The menu item that was added
      */
-    ensureVisible : function(callback){
-        var tree = this.getOwnerTree();
-        tree.expandPath(this.parentNode.getPath(), false, function(){
-            tree.getTreeEl().scrollChildIntoView(this.ui.anchor);
-            Roo.callback(callback);
-        }.createDelegate(this));
+    addElement : function(el){
+        return this.addItem(new Roo.menu.BaseItem(el));
+    },
+
+    /**
+     * Adds an existing object based on {@link Roo.menu.Item} to the menu
+     * @param {Roo.menu.Item} item The menu item to add
+     * @return {Roo.menu.Item} The menu item that was added
+     */
+    addItem : function(item){
+        this.items.add(item);
+        if(this.ul){
+            var li = document.createElement("li");
+            li.className = "x-menu-list-item";
+            this.ul.dom.appendChild(li);
+            item.render(li, this);
+            this.delayAutoWidth();
+        }
+        return item;
     },
 
     /**
-     * Expand all child nodes
-     * @param {Boolean} deep (optional) true if the child nodes should also expand their child nodes
+     * Creates a new {@link Roo.menu.Item} based an the supplied config object and adds it to the menu
+     * @param {Object} config A MenuItem config object
+     * @return {Roo.menu.Item} The menu item that was added
      */
-    expandChildNodes : function(deep){
-        var cs = this.childNodes;
-        for(var i = 0, len = cs.length; i < len; i++) {
-        	cs[i].expand(deep);
+    addMenuItem : function(config){
+        if(!(config instanceof Roo.menu.Item)){
+            if(typeof config.checked == "boolean"){ // must be check menu item config?
+                config = new Roo.menu.CheckItem(config);
+            }else{
+                config = new Roo.menu.Item(config);
+            }
         }
+        return this.addItem(config);
     },
 
     /**
-     * Collapse all child nodes
-     * @param {Boolean} deep (optional) true if the child nodes should also collapse their child nodes
+     * Creates a new {@link Roo.menu.TextItem} with the supplied text and adds it to the menu
+     * @param {String} text The text to display in the menu item
+     * @return {Roo.menu.Item} The menu item that was added
      */
-    collapseChildNodes : function(deep){
-        var cs = this.childNodes;
-        for(var i = 0, len = cs.length; i < len; i++) {
-        	cs[i].collapse(deep);
-        }
+    addText : function(text){
+        return this.addItem(new Roo.menu.TextItem({ text : text }));
     },
 
     /**
-     * Disables this node
+     * Inserts an existing object based on {@link Roo.menu.Item} to the menu at a specified index
+     * @param {Number} index The index in the menu's list of current items where the new item should be inserted
+     * @param {Roo.menu.Item} item The menu item to add
+     * @return {Roo.menu.Item} The menu item that was added
      */
-    disable : function(){
-        this.disabled = true;
-        this.unselect();
-        if(this.rendered && this.ui.onDisableChange){ // event without subscribing
-            this.ui.onDisableChange(this, true);
+    insert : function(index, item){
+        this.items.insert(index, item);
+        if(this.ul){
+            var li = document.createElement("li");
+            li.className = "x-menu-list-item";
+            this.ul.dom.insertBefore(li, this.ul.dom.childNodes[index]);
+            item.render(li, this);
+            this.delayAutoWidth();
         }
-        this.fireEvent("disabledchange", this, true);
+        return item;
     },
 
     /**
-     * Enables this node
+     * Removes an {@link Roo.menu.Item} from the menu and destroys the object
+     * @param {Roo.menu.Item} item The menu item to remove
      */
-    enable : function(){
-        this.disabled = false;
-        if(this.rendered && this.ui.onDisableChange){ // event without subscribing
-            this.ui.onDisableChange(this, false);
-        }
-        this.fireEvent("disabledchange", this, false);
+    remove : function(item){
+        this.items.removeKey(item.id);
+        item.destroy();
     },
 
-    // private
-    renderChildren : function(suppressEvent){
-        if(suppressEvent !== false){
-            this.fireEvent("beforechildrenrendered", this);
+    /**
+     * Removes and destroys all items in the menu
+     */
+    removeAll : function(){
+        var f;
+        while(f = this.items.first()){
+            this.remove(f);
         }
-        var cs = this.childNodes;
-        for(var i = 0, len = cs.length; i < len; i++){
-            cs[i].render(true);
+    }
+});
+
+// MenuNav is a private utility class used internally by the Menu
+Roo.menu.MenuNav = function(menu){
+    Roo.menu.MenuNav.superclass.constructor.call(this, menu.el);
+    this.scope = this.menu = menu;
+};
+
+Roo.extend(Roo.menu.MenuNav, Roo.KeyNav, {
+    doRelay : function(e, h){
+        var k = e.getKey();
+        if(!this.menu.activeItem && e.isNavKeyPress() && k != e.SPACE && k != e.RETURN){
+            this.menu.tryActivate(0, 1);
+            return false;
         }
-        this.childrenRendered = true;
+        return h.call(this.scope || this, e, this.menu);
     },
 
-    // private
-    sort : function(fn, scope){
-        Roo.tree.TreeNode.superclass.sort.apply(this, arguments);
-        if(this.childrenRendered){
-            var cs = this.childNodes;
-            for(var i = 0, len = cs.length; i < len; i++){
-                cs[i].render(true);
-            }
+    up : function(e, m){
+        if(!m.tryActivate(m.items.indexOf(m.activeItem)-1, -1)){
+            m.tryActivate(m.items.length-1, -1);
         }
     },
 
-    // private
-    render : function(bulkRender){
-        this.ui.render(bulkRender);
-        if(!this.rendered){
-            this.rendered = true;
-            if(this.expanded){
-                this.expanded = false;
-                this.expand(false, false);
-            }
+    down : function(e, m){
+        if(!m.tryActivate(m.items.indexOf(m.activeItem)+1, 1)){
+            m.tryActivate(0, 1);
         }
     },
 
-    // private
-    renderIndent : function(deep, refresh){
-        if(refresh){
-            this.ui.childIndent = null;
-        }
-        this.ui.renderIndent();
-        if(deep === true && this.childrenRendered){
-            var cs = this.childNodes;
-            for(var i = 0, len = cs.length; i < len; i++){
-                cs[i].renderIndent(true, refresh);
-            }
-        }
-    }
-});/*
- * 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.tree.AsyncTreeNode
- * @extends Roo.tree.TreeNode
- * @cfg {TreeLoader} loader A TreeLoader to be used by this node (defaults to the loader defined on the tree)
- * @constructor
- * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node 
- */
- Roo.tree.AsyncTreeNode = function(config){
-    this.loaded = false;
-    this.loading = false;
-    Roo.tree.AsyncTreeNode.superclass.constructor.apply(this, arguments);
-    /**
-    * @event beforeload
-    * Fires before this node is loaded, return false to cancel
-    * @param {Node} this This node
-    */
-    this.addEvents({'beforeload':true, 'load': true});
-    /**
-    * @event load
-    * Fires when this node is loaded
-    * @param {Node} this This node
-    */
-    /**
-     * The loader used by this node (defaults to using the tree's defined loader)
-     * @type TreeLoader
-     * @property loader
-     */
-};
-Roo.extend(Roo.tree.AsyncTreeNode, Roo.tree.TreeNode, {
-    expand : function(deep, anim, callback){
-        if(this.loading){ // if an async load is already running, waiting til it's done
-            var timer;
-            var f = function(){
-                if(!this.loading){ // done loading
-                    clearInterval(timer);
-                    this.expand(deep, anim, callback);
-                }
-            }.createDelegate(this);
-            timer = setInterval(f, 200);
-            return;
-        }
-        if(!this.loaded){
-            if(this.fireEvent("beforeload", this) === false){
-                return;
-            }
-            this.loading = true;
-            this.ui.beforeLoad(this);
-            var loader = this.loader || this.attributes.loader || this.getOwnerTree().getLoader();
-            if(loader){
-                loader.load(this, this.loadComplete.createDelegate(this, [deep, anim, callback]));
-                return;
-            }
+    right : function(e, m){
+        if(m.activeItem){
+            m.activeItem.expandMenu(true);
         }
-        Roo.tree.AsyncTreeNode.superclass.expand.call(this, deep, anim, callback);
-    },
-    
-    /**
-     * Returns true if this node is currently loading
-     * @return {Boolean}
-     */
-    isLoading : function(){
-        return this.loading;  
-    },
-    
-    loadComplete : function(deep, anim, callback){
-        this.loading = false;
-        this.loaded = true;
-        this.ui.afterLoad(this);
-        this.fireEvent("load", this);
-        this.expand(deep, anim, callback);
-    },
-    
-    /**
-     * Returns true if this node has been loaded
-     * @return {Boolean}
-     */
-    isLoaded : function(){
-        return this.loaded;
     },
-    
-    hasChildNodes : function(){
-        if(!this.isLeaf() && !this.loaded){
-            return true;
-        }else{
-            return Roo.tree.AsyncTreeNode.superclass.hasChildNodes.call(this);
+
+    left : function(e, m){
+        m.hide();
+        if(m.parentMenu && m.parentMenu.activeItem){
+            m.parentMenu.activeItem.activate();
         }
     },
 
-    /**
-     * Trigger a reload for this node
-     * @param {Function} callback
-     */
-    reload : function(callback){
-        this.collapse(false, false);
-        while(this.firstChild){
-            this.removeChild(this.firstChild);
-        }
-        this.childrenRendered = false;
-        this.loaded = false;
-        if(this.isHiddenRoot()){
-            this.expanded = false;
+    enter : function(e, m){
+        if(m.activeItem){
+            e.stopPropagation();
+            m.activeItem.onClick(e);
+            m.fireEvent("click", this, m.activeItem);
+            return true;
         }
-        this.expand(false, false, callback);
     }
 });/*
  * Based on:
@@ -17362,527 +15010,663 @@ Roo.extend(Roo.tree.AsyncTreeNode, Roo.tree.TreeNode, {
  */
  
 /**
- * @class Roo.tree.TreeNodeUI
- * @constructor
- * @param {Object} node The node to render
- * The TreeNode UI implementation is separate from the
- * tree implementation. Unless you are customizing the tree UI,
- * you should never have to use this directly.
+ * @class Roo.menu.MenuMgr
+ * Provides a common registry of all menu items on a page so that they can be easily accessed by id.
+ * @static
  */
-Roo.tree.TreeNodeUI = function(node){
-    this.node = node;
-    this.rendered = false;
-    this.animating = false;
-    this.emptyIcon = Roo.BLANK_IMAGE_URL;
-};
+Roo.menu.MenuMgr = function(){
+   var menus, active, groups = {}, attached = false, lastShow = new Date();
 
-Roo.tree.TreeNodeUI.prototype = {
-    removeChild : function(node){
-        if(this.rendered){
-            this.ctNode.removeChild(node.ui.getEl());
-        }
-    },
+   // private - called when first menu is created
+   function init(){
+       menus = {};
+       active = new Roo.util.MixedCollection();
+       Roo.get(document).addKeyListener(27, function(){
+           if(active.length > 0){
+               hideAll();
+           }
+       });
+   }
 
-    beforeLoad : function(){
-         this.addClass("x-tree-node-loading");
-    },
+   // private
+   function hideAll(){
+       if(active && active.length > 0){
+           var c = active.clone();
+           c.each(function(m){
+               m.hide();
+           });
+       }
+   }
 
-    afterLoad : function(){
-         this.removeClass("x-tree-node-loading");
-    },
+   // private
+   function onHide(m){
+       active.remove(m);
+       if(active.length < 1){
+           Roo.get(document).un("mousedown", onMouseDown);
+           attached = false;
+       }
+   }
 
-    onTextChange : function(node, text, oldText){
-        if(this.rendered){
-            this.textNode.innerHTML = text;
-        }
-    },
+   // private
+   function onShow(m){
+       var last = active.last();
+       lastShow = new Date();
+       active.add(m);
+       if(!attached){
+           Roo.get(document).on("mousedown", onMouseDown);
+           attached = true;
+       }
+       if(m.parentMenu){
+          m.getEl().setZIndex(parseInt(m.parentMenu.getEl().getStyle("z-index"), 10) + 3);
+          m.parentMenu.activeChild = m;
+       }else if(last && last.isVisible()){
+          m.getEl().setZIndex(parseInt(last.getEl().getStyle("z-index"), 10) + 3);
+       }
+   }
 
-    onDisableChange : function(node, state){
-        this.disabled = state;
-        if(state){
-            this.addClass("x-tree-node-disabled");
-        }else{
-            this.removeClass("x-tree-node-disabled");
-        }
-    },
+   // private
+   function onBeforeHide(m){
+       if(m.activeChild){
+           m.activeChild.hide();
+       }
+       if(m.autoHideTimer){
+           clearTimeout(m.autoHideTimer);
+           delete m.autoHideTimer;
+       }
+   }
 
-    onSelectedChange : function(state){
-        if(state){
-            this.focus();
-            this.addClass("x-tree-selected");
-        }else{
-            //this.blur();
-            this.removeClass("x-tree-selected");
-        }
-    },
+   // private
+   function onBeforeShow(m){
+       var pm = m.parentMenu;
+       if(!pm && !m.allowOtherMenus){
+           hideAll();
+       }else if(pm && pm.activeChild && active != m){
+           pm.activeChild.hide();
+       }
+   }
 
-    onMove : function(tree, node, oldParent, newParent, index, refNode){
-        this.childIndent = null;
-        if(this.rendered){
-            var targetNode = newParent.ui.getContainer();
-            if(!targetNode){//target not rendered
-                this.holder = document.createElement("div");
-                this.holder.appendChild(this.wrap);
-                return;
-            }
-            var insertBefore = refNode ? refNode.ui.getEl() : null;
-            if(insertBefore){
-                targetNode.insertBefore(this.wrap, insertBefore);
-            }else{
-                targetNode.appendChild(this.wrap);
-            }
-            this.node.renderIndent(true);
-        }
-    },
+   // private
+   function onMouseDown(e){
+       if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".x-menu")){
+           hideAll();
+       }
+   }
 
-    addClass : function(cls){
-        if(this.elNode){
-            Roo.fly(this.elNode).addClass(cls);
-        }
-    },
+   // private
+   function onBeforeCheck(mi, state){
+       if(state){
+           var g = groups[mi.group];
+           for(var i = 0, l = g.length; i < l; i++){
+               if(g[i] != mi){
+                   g[i].setChecked(false);
+               }
+           }
+       }
+   }
 
-    removeClass : function(cls){
-        if(this.elNode){
-            Roo.fly(this.elNode).removeClass(cls);
-        }
-    },
+   return {
 
-    remove : function(){
-        if(this.rendered){
-            this.holder = document.createElement("div");
-            this.holder.appendChild(this.wrap);
-        }
-    },
+       /**
+        * Hides all menus that are currently visible
+        */
+       hideAll : function(){
+            hideAll();  
+       },
 
-    fireEvent : function(){
-        return this.node.fireEvent.apply(this.node, arguments);
-    },
+       // private
+       register : function(menu){
+           if(!menus){
+               init();
+           }
+           menus[menu.id] = menu;
+           menu.on("beforehide", onBeforeHide);
+           menu.on("hide", onHide);
+           menu.on("beforeshow", onBeforeShow);
+           menu.on("show", onShow);
+           var g = menu.group;
+           if(g && menu.events["checkchange"]){
+               if(!groups[g]){
+                   groups[g] = [];
+               }
+               groups[g].push(menu);
+               menu.on("checkchange", onCheck);
+           }
+       },
 
-    initEvents : function(){
-        this.node.on("move", this.onMove, this);
-        var E = Roo.EventManager;
-        var a = this.anchor;
+        /**
+         * Returns a {@link Roo.menu.Menu} object
+         * @param {String/Object} menu The string menu id, an existing menu object reference, or a Menu config that will
+         * be used to generate and return a new Menu instance.
+         */
+       get : function(menu){
+           if(typeof menu == "string"){ // menu id
+               return menus[menu];
+           }else if(menu.events){  // menu instance
+               return menu;
+           }else if(typeof menu.length == 'number'){ // array of menu items?
+               return new Roo.menu.Menu({items:menu});
+           }else{ // otherwise, must be a config
+               return new Roo.menu.Menu(menu);
+           }
+       },
 
-        var el = Roo.fly(a, '_treeui');
+       // private
+       unregister : function(menu){
+           delete menus[menu.id];
+           menu.un("beforehide", onBeforeHide);
+           menu.un("hide", onHide);
+           menu.un("beforeshow", onBeforeShow);
+           menu.un("show", onShow);
+           var g = menu.group;
+           if(g && menu.events["checkchange"]){
+               groups[g].remove(menu);
+               menu.un("checkchange", onCheck);
+           }
+       },
 
-        if(Roo.isOpera){ // opera render bug ignores the CSS
-            el.setStyle("text-decoration", "none");
-        }
+       // private
+       registerCheckable : function(menuItem){
+           var g = menuItem.group;
+           if(g){
+               if(!groups[g]){
+                   groups[g] = [];
+               }
+               groups[g].push(menuItem);
+               menuItem.on("beforecheckchange", onBeforeCheck);
+           }
+       },
 
-        el.on("click", this.onClick, this);
-        el.on("dblclick", this.onDblClick, this);
+       // private
+       unregisterCheckable : function(menuItem){
+           var g = menuItem.group;
+           if(g){
+               groups[g].remove(menuItem);
+               menuItem.un("beforecheckchange", onBeforeCheck);
+           }
+       }
+   };
+}();/*
+ * 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">
+ */
+ 
 
-        if(this.checkbox){
-            Roo.EventManager.on(this.checkbox,
-                    Roo.isIE ? 'click' : 'change', this.onCheckChange, this);
-        }
+/**
+ * @class Roo.menu.BaseItem
+ * @extends Roo.Component
+ * @abstract
+ * The base class for all items that render into menus.  BaseItem provides default rendering, activated state
+ * management and base configuration options shared by all menu components.
+ * @constructor
+ * Creates a new BaseItem
+ * @param {Object} config Configuration options
+ */
+Roo.menu.BaseItem = function(config){
+    Roo.menu.BaseItem.superclass.constructor.call(this, config);
 
-        el.on("contextmenu", this.onContextMenu, this);
+    this.addEvents({
+        /**
+         * @event click
+         * Fires when this item is clicked
+         * @param {Roo.menu.BaseItem} this
+         * @param {Roo.EventObject} e
+         */
+        click: true,
+        /**
+         * @event activate
+         * Fires when this item is activated
+         * @param {Roo.menu.BaseItem} this
+         */
+        activate : true,
+        /**
+         * @event deactivate
+         * Fires when this item is deactivated
+         * @param {Roo.menu.BaseItem} this
+         */
+        deactivate : true
+    });
 
-        var icon = Roo.fly(this.iconNode);
-        icon.on("click", this.onClick, this);
-        icon.on("dblclick", this.onDblClick, this);
-        icon.on("contextmenu", this.onContextMenu, this);
-        E.on(this.ecNode, "click", this.ecClick, this, true);
+    if(this.handler){
+        this.on("click", this.handler, this.scope, true);
+    }
+};
 
-        if(this.node.disabled){
-            this.addClass("x-tree-node-disabled");
-        }
-        if(this.node.hidden){
-            this.addClass("x-tree-node-disabled");
-        }
-        var ot = this.node.getOwnerTree();
-        var dd = ot.enableDD || ot.enableDrag || ot.enableDrop;
-        if(dd && (!this.node.isRoot || ot.rootVisible)){
-            Roo.dd.Registry.register(this.elNode, {
-                node: this.node,
-                handles: this.getDDHandles(),
-                isHandle: false
-            });
-        }
-    },
+Roo.extend(Roo.menu.BaseItem, Roo.Component, {
+    /**
+     * @cfg {Function} handler
+     * A function that will handle the click event of this menu item (defaults to undefined)
+     */
+    /**
+     * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to false)
+     */
+    canActivate : false,
+    
+     /**
+     * @cfg {Boolean} hidden True to prevent creation of this menu item (defaults to false)
+     */
+    hidden: false,
+    
+    /**
+     * @cfg {String} activeClass The CSS class to use when the item becomes activated (defaults to "x-menu-item-active")
+     */
+    activeClass : "x-menu-item-active",
+    /**
+     * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to true)
+     */
+    hideOnClick : true,
+    /**
+     * @cfg {Number} hideDelay Length of time in milliseconds to wait before hiding after a click (defaults to 100)
+     */
+    hideDelay : 100,
 
-    getDDHandles : function(){
-        return [this.iconNode, this.textNode];
-    },
+    // private
+    ctype: "Roo.menu.BaseItem",
 
-    hide : function(){
-        if(this.rendered){
-            this.wrap.style.display = "none";
-        }
-    },
+    // private
+    actionMode : "container",
 
-    show : function(){
-        if(this.rendered){
-            this.wrap.style.display = "";
-        }
+    // private
+    render : function(container, parentMenu){
+        this.parentMenu = parentMenu;
+        Roo.menu.BaseItem.superclass.render.call(this, container);
+        this.container.menuItemId = this.id;
     },
 
-    onContextMenu : function(e){
-        if (this.node.hasListener("contextmenu") || this.node.getOwnerTree().hasListener("contextmenu")) {
-            e.preventDefault();
-            this.focus();
-            this.fireEvent("contextmenu", this.node, e);
-        }
+    // private
+    onRender : function(container, position){
+        this.el = Roo.get(this.el);
+        container.dom.appendChild(this.el.dom);
     },
 
+    // private
     onClick : function(e){
-        if(this.dropping){
-            e.stopEvent();
-            return;
-        }
-        if(this.fireEvent("beforeclick", this.node, e) !== false){
-            if(!this.disabled && this.node.attributes.href){
-                this.fireEvent("click", this.node, e);
-                return;
-            }
-            e.preventDefault();
-            if(this.disabled){
-                return;
-            }
-
-            if(this.node.attributes.singleClickExpand && !this.animating && this.node.hasChildNodes()){
-                this.node.toggle();
-            }
-
-            this.fireEvent("click", this.node, e);
+        if(!this.disabled && this.fireEvent("click", this, e) !== false
+                && this.parentMenu.fireEvent("itemclick", this, e) !== false){
+            this.handleClick(e);
         }else{
             e.stopEvent();
         }
     },
 
-    onDblClick : function(e){
-        e.preventDefault();
+    // private
+    activate : function(){
         if(this.disabled){
-            return;
-        }
-        if(this.checkbox){
-            this.toggleCheck();
-        }
-        if(!this.animating && this.node.hasChildNodes()){
-            this.node.toggle();
-        }
-        this.fireEvent("dblclick", this.node, e);
-    },
-
-    onCheckChange : function(){
-        var checked = this.checkbox.checked;
-        this.node.attributes.checked = checked;
-        this.fireEvent('checkchange', this.node, checked);
-    },
-
-    ecClick : function(e){
-        if(!this.animating && this.node.hasChildNodes()){
-            this.node.toggle();
+            return false;
         }
+        var li = this.container;
+        li.addClass(this.activeClass);
+        this.region = li.getRegion().adjust(2, 2, -2, -2);
+        this.fireEvent("activate", this);
+        return true;
     },
 
-    startDrop : function(){
-        this.dropping = true;
-    },
-
-    // delayed drop so the click event doesn't get fired on a drop
-    endDrop : function(){
-       setTimeout(function(){
-           this.dropping = false;
-       }.createDelegate(this), 50);
-    },
-
-    expand : function(){
-        this.updateExpandIcon();
-        this.ctNode.style.display = "";
+    // private
+    deactivate : function(){
+        this.container.removeClass(this.activeClass);
+        this.fireEvent("deactivate", this);
     },
 
-    focus : function(){
-        if(!this.node.preventHScroll){
-            try{this.anchor.focus();
-            }catch(e){}
-        }else if(!Roo.isIE){
-            try{
-                var noscroll = this.node.getOwnerTree().getTreeEl().dom;
-                var l = noscroll.scrollLeft;
-                this.anchor.focus();
-                noscroll.scrollLeft = l;
-            }catch(e){}
-        }
+    // private
+    shouldDeactivate : function(e){
+        return !this.region || !this.region.contains(e.getPoint());
     },
 
-    toggleCheck : function(value){
-        var cb = this.checkbox;
-        if(cb){
-            cb.checked = (value === undefined ? !cb.checked : value);
+    // private
+    handleClick : function(e){
+        if(this.hideOnClick){
+            this.parentMenu.hide.defer(this.hideDelay, this.parentMenu, [true]);
         }
     },
 
-    blur : function(){
-        try{
-            this.anchor.blur();
-        }catch(e){}
+    // private
+    expandMenu : function(autoActivate){
+        // do nothing
     },
 
-    animExpand : function(callback){
-        var ct = Roo.get(this.ctNode);
-        ct.stopFx();
-        if(!this.node.hasChildNodes()){
-            this.updateExpandIcon();
-            this.ctNode.style.display = "";
-            Roo.callback(callback);
-            return;
-        }
-        this.animating = true;
-        this.updateExpandIcon();
-
-        ct.slideIn('t', {
-           callback : function(){
-               this.animating = false;
-               Roo.callback(callback);
-            },
-            scope: this,
-            duration: this.node.ownerTree.duration || .25
-        });
-    },
+    // private
+    hideMenu : function(){
+        // do nothing
+    }
+});/*
+ * 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.menu.Adapter
+ * @extends Roo.menu.BaseItem
+ * @abstract
+ * A base utility class that adapts a non-menu component so that it can be wrapped by a menu item and added to a menu.
+ * It provides basic rendering, activation management and enable/disable logic required to work in menus.
+ * @constructor
+ * Creates a new Adapter
+ * @param {Object} config Configuration options
+ */
+Roo.menu.Adapter = function(component, config){
+    Roo.menu.Adapter.superclass.constructor.call(this, config);
+    this.component = component;
+};
+Roo.extend(Roo.menu.Adapter, Roo.menu.BaseItem, {
+    // private
+    canActivate : true,
 
-    highlight : function(){
-        var tree = this.node.getOwnerTree();
-        Roo.fly(this.wrap).highlight(
-            tree.hlColor || "C3DAF9",
-            {endColor: tree.hlBaseColor}
-        );
+    // private
+    onRender : function(container, position){
+        this.component.render(container);
+        this.el = this.component.getEl();
     },
 
-    collapse : function(){
-        this.updateExpandIcon();
-        this.ctNode.style.display = "none";
+    // private
+    activate : function(){
+        if(this.disabled){
+            return false;
+        }
+        this.component.focus();
+        this.fireEvent("activate", this);
+        return true;
     },
 
-    animCollapse : function(callback){
-        var ct = Roo.get(this.ctNode);
-        ct.enableDisplayMode('block');
-        ct.stopFx();
-
-        this.animating = true;
-        this.updateExpandIcon();
-
-        ct.slideOut('t', {
-            callback : function(){
-               this.animating = false;
-               Roo.callback(callback);
-            },
-            scope: this,
-            duration: this.node.ownerTree.duration || .25
-        });
+    // private
+    deactivate : function(){
+        this.fireEvent("deactivate", this);
     },
 
-    getContainer : function(){
-        return this.ctNode;
+    // private
+    disable : function(){
+        this.component.disable();
+        Roo.menu.Adapter.superclass.disable.call(this);
     },
 
-    getEl : function(){
-        return this.wrap;
-    },
+    // private
+    enable : function(){
+        this.component.enable();
+        Roo.menu.Adapter.superclass.enable.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">
+ */
 
-    appendDDGhost : function(ghostNode){
-        ghostNode.appendChild(this.elNode.cloneNode(true));
-    },
+/**
+ * @class Roo.menu.TextItem
+ * @extends Roo.menu.BaseItem
+ * Adds a static text string to a menu, usually used as either a heading or group separator.
+ * Note: old style constructor with text is still supported.
+ * 
+ * @constructor
+ * Creates a new TextItem
+ * @param {Object} cfg Configuration
+ */
+Roo.menu.TextItem = function(cfg){
+    if (typeof(cfg) == 'string') {
+        this.text = cfg;
+    } else {
+        Roo.apply(this,cfg);
+    }
+    
+    Roo.menu.TextItem.superclass.constructor.call(this);
+};
 
-    getDDRepairXY : function(){
-        return Roo.lib.Dom.getXY(this.iconNode);
-    },
+Roo.extend(Roo.menu.TextItem, Roo.menu.BaseItem, {
+    /**
+     * @cfg {String} text Text to show on item.
+     */
+    text : '',
+    
+    /**
+     * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
+     */
+    hideOnClick : false,
+    /**
+     * @cfg {String} itemCls The default CSS class to use for text items (defaults to "x-menu-text")
+     */
+    itemCls : "x-menu-text",
 
+    // private
     onRender : function(){
-        this.render();
-    },
-
-    render : function(bulkRender){
-        var n = this.node, a = n.attributes;
-        var targetNode = n.parentNode ?
-              n.parentNode.ui.getContainer() : n.ownerTree.innerCt.dom;
+        var s = document.createElement("span");
+        s.className = this.itemCls;
+        s.innerHTML = this.text;
+        this.el = s;
+        Roo.menu.TextItem.superclass.onRender.apply(this, arguments);
+    }
+});/*
+ * 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">
+ */
 
-        if(!this.rendered){
-            this.rendered = true;
+/**
+ * @class Roo.menu.Separator
+ * @extends Roo.menu.BaseItem
+ * Adds a separator bar to a menu, used to divide logical groups of menu items. Generally you will
+ * add one of these by using "-" in you call to add() or in your items config rather than creating one directly.
+ * @constructor
+ * @param {Object} config Configuration options
+ */
+Roo.menu.Separator = function(config){
+    Roo.menu.Separator.superclass.constructor.call(this, config);
+};
 
-            this.renderElements(n, a, targetNode, bulkRender);
+Roo.extend(Roo.menu.Separator, Roo.menu.BaseItem, {
+    /**
+     * @cfg {String} itemCls The default CSS class to use for separators (defaults to "x-menu-sep")
+     */
+    itemCls : "x-menu-sep",
+    /**
+     * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
+     */
+    hideOnClick : false,
 
-            if(a.qtip){
-               if(this.textNode.setAttributeNS){
-                   this.textNode.setAttributeNS("ext", "qtip", a.qtip);
-                   if(a.qtipTitle){
-                       this.textNode.setAttributeNS("ext", "qtitle", a.qtipTitle);
-                   }
-               }else{
-                   this.textNode.setAttribute("ext:qtip", a.qtip);
-                   if(a.qtipTitle){
-                       this.textNode.setAttribute("ext:qtitle", a.qtipTitle);
-                   }
-               }
-            }else if(a.qtipCfg){
-                a.qtipCfg.target = Roo.id(this.textNode);
-                Roo.QuickTips.register(a.qtipCfg);
-            }
-            this.initEvents();
-            if(!this.node.expanded){
-                this.updateExpandIcon();
-            }
-        }else{
-            if(bulkRender === true) {
-                targetNode.appendChild(this.wrap);
-            }
-        }
-    },
+    // private
+    onRender : function(li){
+        var s = document.createElement("span");
+        s.className = this.itemCls;
+        s.innerHTML = "&#160;";
+        this.el = s;
+        li.addClass("x-menu-sep-li");
+        Roo.menu.Separator.superclass.onRender.apply(this, arguments);
+    }
+});/*
+ * 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.menu.Item
+ * @extends Roo.menu.BaseItem
+ * A base class for all menu items that require menu-related functionality (like sub-menus) and are not static
+ * display items.  Item extends the base functionality of {@link Roo.menu.BaseItem} by adding menu-specific
+ * activation and click handling.
+ * @constructor
+ * Creates a new Item
+ * @param {Object} config Configuration options
+ */
+Roo.menu.Item = function(config){
+    Roo.menu.Item.superclass.constructor.call(this, config);
+    if(this.menu){
+        this.menu = Roo.menu.MenuMgr.get(this.menu);
+    }
+};
+Roo.extend(Roo.menu.Item, Roo.menu.BaseItem, {
+    /**
+     * @cfg {Roo.menu.Menu} menu
+     * A Sub menu
+     */
+    /**
+     * @cfg {String} text
+     * The text to show on the menu item.
+     */
+    text: '',
+     /**
+     * @cfg {String} html to render in menu
+     * The text to show on the menu item (HTML version).
+     */
+    html: '',
+    /**
+     * @cfg {String} icon
+     * The path to an icon to display in this menu item (defaults to Roo.BLANK_IMAGE_URL)
+     */
+    icon: undefined,
+    /**
+     * @cfg {String} itemCls The default CSS class to use for menu items (defaults to "x-menu-item")
+     */
+    itemCls : "x-menu-item",
+    /**
+     * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to true)
+     */
+    canActivate : true,
+    /**
+     * @cfg {Number} showDelay Length of time in milliseconds to wait before showing this item (defaults to 200)
+     */
+    showDelay: 200,
+    // doc'd in BaseItem
+    hideDelay: 200,
 
-    renderElements : function(n, a, targetNode, bulkRender)
-    {
-        // add some indent caching, this helps performance when rendering a large tree
-        this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
-        var t = n.getOwnerTree();
-        var txt = t.renderer ? t.renderer(n.attributes) : Roo.util.Format.htmlEncode(n.text);
-        if (typeof(n.attributes.html) != 'undefined') {
-            txt = n.attributes.html;
+    // private
+    ctype: "Roo.menu.Item",
+    
+    // private
+    onRender : function(container, position){
+        var el = document.createElement("a");
+        el.hideFocus = true;
+        el.unselectable = "on";
+        el.href = this.href || "#";
+        if(this.hrefTarget){
+            el.target = this.hrefTarget;
         }
-        var tip = t.rendererTip ? t.rendererTip(n.attributes) : txt;
-        var cb = typeof a.checked == 'boolean';
-        var href = a.href ? a.href : Roo.isGecko ? "" : "#";
-        var buf = ['<li class="x-tree-node"><div class="x-tree-node-el ', a.cls,'">',
-            '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
-            '<img src="', this.emptyIcon, '" class="x-tree-ec-icon" />',
-            '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',
-            cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : ' />')) : '',
-            '<a hidefocus="on" href="',href,'" tabIndex="1" ',
-             a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", 
-                '><span unselectable="on" qtip="' , tip ,'">',txt,"</span></a></div>",
-            '<ul class="x-tree-node-ct" style="display:none;"></ul>',
-            "</li>"];
+        el.className = this.itemCls + (this.menu ?  " x-menu-item-arrow" : "") + (this.cls ?  " " + this.cls : "");
+        
+        var html = this.html.length ? this.html  : String.format('{0}',this.text);
+        
+        el.innerHTML = String.format(
+                '<img src="{0}" class="x-menu-item-icon {1}" />' + html,
+                this.icon || Roo.BLANK_IMAGE_URL, this.iconCls || '');
+        this.el = el;
+        Roo.menu.Item.superclass.onRender.call(this, container, position);
+    },
 
-        if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
-            this.wrap = Roo.DomHelper.insertHtml("beforeBegin",
-                                n.nextSibling.ui.getEl(), buf.join(""));
-        }else{
-            this.wrap = Roo.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
+    /**
+     * Sets the text to display in this menu item
+     * @param {String} text The text to display
+     * @param {Boolean} isHTML true to indicate text is pure html.
+     */
+    setText : function(text, isHTML){
+        if (isHTML) {
+            this.html = text;
+        } else {
+            this.text = text;
+            this.html = '';
         }
-
-        this.elNode = this.wrap.childNodes[0];
-        this.ctNode = this.wrap.childNodes[1];
-        var cs = this.elNode.childNodes;
-        this.indentNode = cs[0];
-        this.ecNode = cs[1];
-        this.iconNode = cs[2];
-        var index = 3;
-        if(cb){
-            this.checkbox = cs[3];
-            index++;
+        if(this.rendered){
+            var html = this.html.length ? this.html  : String.format('{0}',this.text);
+     
+            this.el.update(String.format(
+                '<img src="{0}" class="x-menu-item-icon {2}">' + html,
+                this.icon || Roo.BLANK_IMAGE_URL, this.text, this.iconCls || ''));
+            this.parentMenu.autoWidth();
         }
-        this.anchor = cs[index];
-        this.textNode = cs[index].firstChild;
     },
 
-    getAnchor : function(){
-        return this.anchor;
+    // private
+    handleClick : function(e){
+        if(!this.href){ // if no link defined, stop the event automatically
+            e.stopEvent();
+        }
+        Roo.menu.Item.superclass.handleClick.apply(this, arguments);
     },
 
-    getTextEl : function(){
-        return this.textNode;
+    // private
+    activate : function(autoExpand){
+        if(Roo.menu.Item.superclass.activate.apply(this, arguments)){
+            this.focus();
+            if(autoExpand){
+                this.expandMenu();
+            }
+        }
+        return true;
     },
 
-    getIconEl : function(){
-        return this.iconNode;
+    // private
+    shouldDeactivate : function(e){
+        if(Roo.menu.Item.superclass.shouldDeactivate.call(this, e)){
+            if(this.menu && this.menu.isVisible()){
+                return !this.menu.getEl().getRegion().contains(e.getPoint());
+            }
+            return true;
+        }
+        return false;
     },
 
-    isChecked : function(){
-        return this.checkbox ? this.checkbox.checked : false;
+    // private
+    deactivate : function(){
+        Roo.menu.Item.superclass.deactivate.apply(this, arguments);
+        this.hideMenu();
     },
 
-    updateExpandIcon : function(){
-        if(this.rendered){
-            var n = this.node, c1, c2;
-            var cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow";
-            var hasChild = n.hasChildNodes();
-            if(hasChild){
-                if(n.expanded){
-                    cls += "-minus";
-                    c1 = "x-tree-node-collapsed";
-                    c2 = "x-tree-node-expanded";
-                }else{
-                    cls += "-plus";
-                    c1 = "x-tree-node-expanded";
-                    c2 = "x-tree-node-collapsed";
-                }
-                if(this.wasLeaf){
-                    this.removeClass("x-tree-node-leaf");
-                    this.wasLeaf = false;
-                }
-                if(this.c1 != c1 || this.c2 != c2){
-                    Roo.fly(this.elNode).replaceClass(c1, c2);
-                    this.c1 = c1; this.c2 = c2;
-                }
-            }else{
-                // this changes non-leafs into leafs if they have no children.
-                // it's not very rational behaviour..
-                
-                if(!this.wasLeaf && this.node.leaf){
-                    Roo.fly(this.elNode).replaceClass("x-tree-node-expanded", "x-tree-node-leaf");
-                    delete this.c1;
-                    delete this.c2;
-                    this.wasLeaf = true;
-                }
-            }
-            var ecc = "x-tree-ec-icon "+cls;
-            if(this.ecc != ecc){
-                this.ecNode.className = ecc;
-                this.ecc = ecc;
+    // private
+    expandMenu : function(autoActivate){
+        if(!this.disabled && this.menu){
+            clearTimeout(this.hideTimer);
+            delete this.hideTimer;
+            if(!this.menu.isVisible() && !this.showTimer){
+                this.showTimer = this.deferExpand.defer(this.showDelay, this, [autoActivate]);
+            }else if (this.menu.isVisible() && autoActivate){
+                this.menu.tryActivate(0, 1);
             }
         }
     },
 
-    getChildIndent : function(){
-        if(!this.childIndent){
-            var buf = [];
-            var p = this.node;
-            while(p){
-                if(!p.isRoot || (p.isRoot && p.ownerTree.rootVisible)){
-                    if(!p.isLast()) {
-                        buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-elbow-line" />');
-                    } else {
-                        buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-icon" />');
-                    }
-                }
-                p = p.parentNode;
-            }
-            this.childIndent = buf.join("");
+    // private
+    deferExpand : function(autoActivate){
+        delete this.showTimer;
+        this.menu.show(this.container, this.parentMenu.subMenuAlign || "tl-tr?", this.parentMenu);
+        if(autoActivate){
+            this.menu.tryActivate(0, 1);
         }
-        return this.childIndent;
     },
 
-    renderIndent : function(){
-        if(this.rendered){
-            var indent = "";
-            var p = this.node.parentNode;
-            if(p){
-                indent = p.ui.getChildIndent();
-            }
-            if(this.indentMarkup != indent){ // don't rerender if not required
-                this.indentNode.innerHTML = indent;
-                this.indentMarkup = indent;
-            }
-            this.updateExpandIcon();
-        }
-    }
-};
-
-Roo.tree.RootTreeNodeUI = function(){
-    Roo.tree.RootTreeNodeUI.superclass.constructor.apply(this, arguments);
-};
-Roo.extend(Roo.tree.RootTreeNodeUI, Roo.tree.TreeNodeUI, {
-    render : function(){
-        if(!this.rendered){
-            var targetNode = this.node.ownerTree.innerCt.dom;
-            this.node.expanded = true;
-            targetNode.innerHTML = '<div class="x-tree-root-node"></div>';
-            this.wrap = this.ctNode = targetNode.firstChild;
+    // private
+    hideMenu : function(){
+        clearTimeout(this.showTimer);
+        delete this.showTimer;
+        if(!this.hideTimer && this.menu && this.menu.isVisible()){
+            this.hideTimer = this.deferHide.defer(this.hideDelay, this);
         }
     },
-    collapse : function(){
-    },
-    expand : function(){
+
+    // private
+    deferHide : function(){
+        delete this.hideTimer;
+        this.menu.hide();
     }
 });/*
  * Based on:
@@ -17894,292 +15678,106 @@ Roo.extend(Roo.tree.RootTreeNodeUI, Roo.tree.TreeNodeUI, {
  * Fork - LGPL
  * <script type="text/javascript">
  */
+ 
 /**
- * @class Roo.tree.TreeLoader
- * @extends Roo.util.Observable
- * A TreeLoader provides for lazy loading of an {@link Roo.tree.TreeNode}'s child
- * nodes from a specified URL. The response must be a javascript Array definition
- * who's elements are node definition objects. eg:
- * <pre><code>
-{  success : true,
-   data :      [
-   
-    { 'id': 1, 'text': 'A folder Node', 'leaf': false },
-    { 'id': 2, 'text': 'A leaf Node', 'leaf': true }
-    ]
-}
-
-
-</code></pre>
- * <br><br>
- * The old style respose with just an array is still supported, but not recommended.
- * <br><br>
- *
- * A server request is sent, and child nodes are loaded only when a node is expanded.
- * The loading node's id is passed to the server under the parameter name "node" to
- * enable the server to produce the correct child nodes.
- * <br><br>
- * To pass extra parameters, an event handler may be attached to the "beforeload"
- * event, and the parameters specified in the TreeLoader's baseParams property:
- * <pre><code>
-    myTreeLoader.on("beforeload", function(treeLoader, node) {
-        this.baseParams.category = node.attributes.category;
-    }, this);
-</code></pre><
- * This would pass an HTTP parameter called "category" to the server containing
- * the value of the Node's "category" attribute.
+ * @class Roo.menu.CheckItem
+ * @extends Roo.menu.Item
+ * Adds a menu item that contains a checkbox by default, but can also be part of a radio group.
  * @constructor
- * Creates a new Treeloader.
- * @param {Object} config A config object containing config properties.
+ * Creates a new CheckItem
+ * @param {Object} config Configuration options
  */
-Roo.tree.TreeLoader = function(config){
-    this.baseParams = {};
-    this.requestMethod = "POST";
-    Roo.apply(this, config);
-
+Roo.menu.CheckItem = function(config){
+    Roo.menu.CheckItem.superclass.constructor.call(this, config);
     this.addEvents({
-    
-        /**
-         * @event beforeload
-         * Fires before a network request is made to retrieve the Json text which specifies a node's children.
-         * @param {Object} This TreeLoader object.
-         * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
-         * @param {Object} callback The callback function specified in the {@link #load} call.
-         */
-        beforeload : true,
-        /**
-         * @event load
-         * Fires when the node has been successfuly loaded.
-         * @param {Object} This TreeLoader object.
-         * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
-         * @param {Object} response The response object containing the data from the server.
-         */
-        load : true,
         /**
-         * @event loadexception
-         * Fires if the network request failed.
-         * @param {Object} This TreeLoader object.
-         * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
-         * @param {Object} response The response object containing the data from the server.
+         * @event beforecheckchange
+         * Fires before the checked value is set, providing an opportunity to cancel if needed
+         * @param {Roo.menu.CheckItem} this
+         * @param {Boolean} checked The new checked value that will be set
          */
-        loadexception : true,
+        "beforecheckchange" : true,
         /**
-         * @event create
-         * Fires before a node is created, enabling you to return custom Node types 
-         * @param {Object} This TreeLoader object.
-         * @param {Object} attr - the data returned from the AJAX call (modify it to suit)
+         * @event checkchange
+         * Fires after the checked value has been set
+         * @param {Roo.menu.CheckItem} this
+         * @param {Boolean} checked The checked value that was set
          */
-        create : true
+        "checkchange" : true
     });
-
-    Roo.tree.TreeLoader.superclass.constructor.call(this);
+    if(this.checkHandler){
+        this.on('checkchange', this.checkHandler, this.scope);
+    }
 };
-
-Roo.extend(Roo.tree.TreeLoader, Roo.util.Observable, {
-    /**
-    * @cfg {String} dataUrl The URL from which to request a Json string which
-    * specifies an array of node definition object representing the child nodes
-    * to be loaded.
-    */
-    /**
-    * @cfg {String} requestMethod either GET or POST
-    * defaults to POST (due to BC)
-    * to be loaded.
-    */
-    /**
-    * @cfg {Object} baseParams (optional) An object containing properties which
-    * specify HTTP parameters to be passed to each request for child nodes.
-    */
+Roo.extend(Roo.menu.CheckItem, Roo.menu.Item, {
     /**
-    * @cfg {Object} baseAttrs (optional) An object containing attributes to be added to all nodes
-    * created by this loader. If the attributes sent by the server have an attribute in this object,
-    * they take priority.
-    */
+     * @cfg {String} group
+     * All check items with the same group name will automatically be grouped into a single-select
+     * radio button group (defaults to '')
+     */
     /**
-    * @cfg {Object} uiProviders (optional) An object containing properties which
-    * 
-    * DEPRECATED - use 'create' event handler to modify attributes - which affect creation.
-    * specify custom {@link Roo.tree.TreeNodeUI} implementations. If the optional
-    * <i>uiProvider</i> attribute of a returned child node is a string rather
-    * than a reference to a TreeNodeUI implementation, this that string value
-    * is used as a property name in the uiProviders object. You can define the provider named
-    * 'default' , and this will be used for all nodes (if no uiProvider is delivered by the node data)
-    */
-    uiProviders : {},
-
+     * @cfg {String} itemCls The default CSS class to use for check items (defaults to "x-menu-item x-menu-check-item")
+     */
+    itemCls : "x-menu-item x-menu-check-item",
     /**
-    * @cfg {Boolean} clearOnLoad (optional) Default to true. Remove previously existing
-    * child nodes before loading.
-    */
-    clearOnLoad : true,
+     * @cfg {String} groupClass The default CSS class to use for radio group check items (defaults to "x-menu-group-item")
+     */
+    groupClass : "x-menu-group-item",
 
     /**
-    * @cfg {String} root (optional) Default to false. Use this to read data from an object 
-    * property on loading, rather than expecting an array. (eg. more compatible to a standard
-    * Grid query { data : [ .....] }
-    */
-    
-    root : false,
-     /**
-    * @cfg {String} queryParam (optional) 
-    * Name of the query as it will be passed on the querystring (defaults to 'node')
-    * eg. the request will be ?node=[id]
-    */
-    
-    
-    queryParam: false,
-    
-    /**
-     * Load an {@link Roo.tree.TreeNode} from the URL specified in the constructor.
-     * This is called automatically when a node is expanded, but may be used to reload
-     * a node (or append new children if the {@link #clearOnLoad} option is false.)
-     * @param {Roo.tree.TreeNode} node
-     * @param {Function} callback
+     * @cfg {Boolean} checked True to initialize this checkbox as checked (defaults to false).  Note that
+     * if this checkbox is part of a radio group (group = true) only the last item in the group that is
+     * initialized with checked = true will be rendered as checked.
      */
-    load : function(node, callback){
-        if(this.clearOnLoad){
-            while(node.firstChild){
-                node.removeChild(node.firstChild);
-            }
-        }
-        if(node.attributes.children){ // preloaded json children
-            var cs = node.attributes.children;
-            for(var i = 0, len = cs.length; i < len; i++){
-                node.appendChild(this.createNode(cs[i]));
-            }
-            if(typeof callback == "function"){
-                callback();
-            }
-        }else if(this.dataUrl){
-            this.requestData(node, callback);
-        }
-    },
-
-    getParams: function(node){
-        var buf = [], bp = this.baseParams;
-        for(var key in bp){
-            if(typeof bp[key] != "function"){
-                buf.push(encodeURIComponent(key), "=", encodeURIComponent(bp[key]), "&");
-            }
-        }
-        var n = this.queryParam === false ? 'node' : this.queryParam;
-        buf.push(n + "=", encodeURIComponent(node.id));
-        return buf.join("");
-    },
-
-    requestData : function(node, callback){
-        if(this.fireEvent("beforeload", this, node, callback) !== false){
-            this.transId = Roo.Ajax.request({
-                method:this.requestMethod,
-                url: this.dataUrl||this.url,
-                success: this.handleResponse,
-                failure: this.handleFailure,
-                scope: this,
-                argument: {callback: callback, node: node},
-                params: this.getParams(node)
-            });
-        }else{
-            // if the load is cancelled, make sure we notify
-            // the node that we are done
-            if(typeof callback == "function"){
-                callback();
-            }
-        }
-    },
-
-    isLoading : function(){
-        return this.transId ? true : false;
-    },
-
-    abort : function(){
-        if(this.isLoading()){
-            Roo.Ajax.abort(this.transId);
-        }
-    },
+    checked: false,
 
     // private
-    createNode : function(attr)
-    {
-        // apply baseAttrs, nice idea Corey!
-        if(this.baseAttrs){
-            Roo.applyIf(attr, this.baseAttrs);
-        }
-        if(this.applyLoader !== false){
-            attr.loader = this;
-        }
-        // uiProvider = depreciated..
-        
-        if(typeof(attr.uiProvider) == 'string'){
-           attr.uiProvider = this.uiProviders[attr.uiProvider] || 
-                /**  eval:var:attr */ eval(attr.uiProvider);
-        }
-        if(typeof(this.uiProviders['default']) != 'undefined') {
-            attr.uiProvider = this.uiProviders['default'];
-        }
-        
-        this.fireEvent('create', this, attr);
-        
-        attr.leaf  = typeof(attr.leaf) == 'string' ? attr.leaf * 1 : attr.leaf;
-        return(attr.leaf ?
-                        new Roo.tree.TreeNode(attr) :
-                        new Roo.tree.AsyncTreeNode(attr));
-    },
+    ctype: "Roo.menu.CheckItem",
 
-    processResponse : function(response, node, callback)
-    {
-        var json = response.responseText;
-        try {
-            
-            var o = Roo.decode(json);
-            
-            if (this.root === false && typeof(o.success) != undefined) {
-                this.root = 'data'; // the default behaviour for list like data..
-                }
-                
-            if (this.root !== false &&  !o.success) {
-                // it's a failure condition.
-                var a = response.argument;
-                this.fireEvent("loadexception", this, a.node, response);
-                Roo.log("Load failed - should have a handler really");
-                return;
-            }
-            
-            
-            
-            if (this.root !== false) {
-                 o = o[this.root];
-            }
-            
-            for(var i = 0, len = o.length; i < len; i++){
-                var n = this.createNode(o[i]);
-                if(n){
-                    node.appendChild(n);
-                }
-            }
-            if(typeof callback == "function"){
-                callback(this, node);
-            }
-        }catch(e){
-            this.handleFailure(response);
+    // private
+    onRender : function(c){
+        Roo.menu.CheckItem.superclass.onRender.apply(this, arguments);
+        if(this.group){
+            this.el.addClass(this.groupClass);
+        }
+        Roo.menu.MenuMgr.registerCheckable(this);
+        if(this.checked){
+            this.checked = false;
+            this.setChecked(true, true);
         }
     },
 
-    handleResponse : function(response){
-        this.transId = false;
-        var a = response.argument;
-        this.processResponse(response, a.node, a.callback);
-        this.fireEvent("load", this, a.node, response);
+    // private
+    destroy : function(){
+        if(this.rendered){
+            Roo.menu.MenuMgr.unregisterCheckable(this);
+        }
+        Roo.menu.CheckItem.superclass.destroy.apply(this, arguments);
     },
 
-    handleFailure : function(response)
-    {
-        // should handle failure better..
-        this.transId = false;
-        var a = response.argument;
-        this.fireEvent("loadexception", this, a.node, response);
-        if(typeof a.callback == "function"){
-            a.callback(this, a.node);
+    /**
+     * Set the checked state of this item
+     * @param {Boolean} checked The new checked value
+     * @param {Boolean} suppressEvent (optional) True to prevent the checkchange event from firing (defaults to false)
+     */
+    setChecked : function(state, suppressEvent){
+        if(this.checked != state && this.fireEvent("beforecheckchange", this, state) !== false){
+            if(this.container){
+                this.container[state ? "addClass" : "removeClass"]("x-menu-item-checked");
+            }
+            this.checked = state;
+            if(suppressEvent !== true){
+                this.fireEvent("checkchange", this, state);
+            }
         }
+    },
+
+    // private
+    handleClick : function(e){
+       if(!this.disabled && !(this.checked && this.group)){// disable unselect on radio item
+           this.setChecked(!this.checked);
+       }
+       Roo.menu.CheckItem.superclass.handleClick.apply(this, arguments);
     }
 });/*
  * Based on:
@@ -18191,116 +15789,216 @@ Roo.extend(Roo.tree.TreeLoader, Roo.util.Observable, {
  * Fork - LGPL
  * <script type="text/javascript">
  */
-
+ 
 /**
-* @class Roo.tree.TreeFilter
-* Note this class is experimental and doesn't update the indent (lines) or expand collapse icons of the nodes
-* @param {TreePanel} tree
-* @param {Object} config (optional)
+ * @class Roo.menu.DateItem
+ * @extends Roo.menu.Adapter
+ * A menu item that wraps the {@link Roo.DatPicker} component.
+ * @constructor
+ * Creates a new DateItem
+ * @param {Object} config Configuration options
  */
-Roo.tree.TreeFilter = function(tree, config){
-    this.tree = tree;
-    this.filtered = {};
-    Roo.apply(this, config);
+Roo.menu.DateItem = function(config){
+    Roo.menu.DateItem.superclass.constructor.call(this, new Roo.DatePicker(config), config);
+    /** The Roo.DatePicker object @type Roo.DatePicker */
+    this.picker = this.component;
+    this.addEvents({select: true});
+    
+    this.picker.on("render", function(picker){
+        picker.getEl().swallowEvent("click");
+        picker.container.addClass("x-menu-date-item");
+    });
+
+    this.picker.on("select", this.onSelect, this);
 };
 
-Roo.tree.TreeFilter.prototype = {
-    clearBlank:false,
-    reverse:false,
-    autoClear:false,
-    remove:false,
+Roo.extend(Roo.menu.DateItem, Roo.menu.Adapter, {
+    // private
+    onSelect : function(picker, date){
+        this.fireEvent("select", this, date, picker);
+        Roo.menu.DateItem.superclass.handleClick.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.menu.ColorItem
+ * @extends Roo.menu.Adapter
+ * A menu item that wraps the {@link Roo.ColorPalette} component.
+ * @constructor
+ * Creates a new ColorItem
+ * @param {Object} config Configuration options
+ */
+Roo.menu.ColorItem = function(config){
+    Roo.menu.ColorItem.superclass.constructor.call(this, new Roo.ColorPalette(config), config);
+    /** The Roo.ColorPalette object @type Roo.ColorPalette */
+    this.palette = this.component;
+    this.relayEvents(this.palette, ["select"]);
+    if(this.selectHandler){
+        this.on('select', this.selectHandler, this.scope);
+    }
+};
+Roo.extend(Roo.menu.ColorItem, Roo.menu.Adapter);/*
+ * 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">
+ */
+ 
 
-     /**
-     * Filter the data by a specific attribute.
-     * @param {String/RegExp} value Either string that the attribute value
-     * should start with or a RegExp to test against the attribute
-     * @param {String} attr (optional) The attribute passed in your node's attributes collection. Defaults to "text".
-     * @param {TreeNode} startNode (optional) The node to start the filter at.
+/**
+ * @class Roo.menu.DateMenu
+ * @extends Roo.menu.Menu
+ * A menu containing a {@link Roo.menu.DateItem} component (which provides a date picker).
+ * @constructor
+ * Creates a new DateMenu
+ * @param {Object} config Configuration options
+ */
+Roo.menu.DateMenu = function(config){
+    Roo.menu.DateMenu.superclass.constructor.call(this, config);
+    this.plain = true;
+    var di = new Roo.menu.DateItem(config);
+    this.add(di);
+    /**
+     * The {@link Roo.DatePicker} instance for this DateMenu
+     * @type DatePicker
      */
-    filter : function(value, attr, startNode){
-        attr = attr || "text";
-        var f;
-        if(typeof value == "string"){
-            var vlen = value.length;
-            // auto clear empty filter
-            if(vlen == 0 && this.clearBlank){
-                this.clear();
-                return;
-            }
-            value = value.toLowerCase();
-            f = function(n){
-                return n.attributes[attr].substr(0, vlen).toLowerCase() == value;
-            };
-        }else if(value.exec){ // regex?
-            f = function(n){
-                return value.test(n.attributes[attr]);
-            };
-        }else{
-            throw 'Illegal filter type, must be string or regex';
+    this.picker = di.picker;
+    /**
+     * @event select
+     * @param {DatePicker} picker
+     * @param {Date} date
+     */
+    this.relayEvents(di, ["select"]);
+    this.on('beforeshow', function(){
+        if(this.picker){
+            this.picker.hideMonthPicker(false);
         }
-        this.filterBy(f, null, startNode);
-	},
+    }, this);
+};
+Roo.extend(Roo.menu.DateMenu, Roo.menu.Menu, {
+    cls:'x-date-menu'
+});/*
+ * 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.menu.ColorMenu
+ * @extends Roo.menu.Menu
+ * A menu containing a {@link Roo.menu.ColorItem} component (which provides a basic color picker).
+ * @constructor
+ * Creates a new ColorMenu
+ * @param {Object} config Configuration options
+ */
+Roo.menu.ColorMenu = function(config){
+    Roo.menu.ColorMenu.superclass.constructor.call(this, config);
+    this.plain = true;
+    var ci = new Roo.menu.ColorItem(config);
+    this.add(ci);
     /**
-     * Filter by a function. The passed function will be called with each
-     * node in the tree (or from the startNode). If the function returns true, the node is kept
-     * otherwise it is filtered. If a node is filtered, its children are also filtered.
-     * @param {Function} fn The filter function
-     * @param {Object} scope (optional) The scope of the function (defaults to the current node)
+     * The {@link Roo.ColorPalette} instance for this ColorMenu
+     * @type ColorPalette
      */
-    filterBy : function(fn, scope, startNode){
-        startNode = startNode || this.tree.root;
-        if(this.autoClear){
-            this.clear();
-        }
-        var af = this.filtered, rv = this.reverse;
-        var f = function(n){
-            if(n == startNode){
-                return true;
-            }
-            if(af[n.id]){
-                return false;
-            }
-            var m = fn.call(scope || n, n);
-            if(!m || rv){
-                af[n.id] = n;
-                n.ui.hide();
-                return false;
-            }
-            return true;
-        };
-        startNode.cascade(f);
-        if(this.remove){
-           for(var id in af){
-               if(typeof id != "function"){
-                   var n = af[id];
-                   if(n && n.parentNode){
-                       n.parentNode.removeChild(n);
-                   }
-               }
-           }
-        }
-    },
+    this.palette = ci.palette;
+    /**
+     * @event select
+     * @param {ColorPalette} palette
+     * @param {String} color
+     */
+    this.relayEvents(ci, ["select"]);
+};
+Roo.extend(Roo.menu.ColorMenu, Roo.menu.Menu);/*
+ * 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.TextItem
+ * @extends Roo.BoxComponent
+ * Base class for form fields that provides default event handling, sizing, value handling and other functionality.
+ * @constructor
+ * Creates a new TextItem
+ * @param {Object} config Configuration options
+ */
+Roo.form.TextItem = function(config){
+    Roo.form.TextItem.superclass.constructor.call(this, config);
+};
 
+Roo.extend(Roo.form.TextItem, Roo.BoxComponent,  {
+    
     /**
-     * Clears the current filter. Note: with the "remove" option
-     * set a filter cannot be cleared.
+     * @cfg {String} tag the tag for this item (default div)
      */
-    clear : function(){
-        var t = this.tree;
-        var af = this.filtered;
-        for(var id in af){
-            if(typeof id != "function"){
-                var n = af[id];
-                if(n){
-                    n.ui.show();
-                }
+    tag : 'div',
+    /**
+     * @cfg {String} html the content for this item
+     */
+    html : '',
+    
+    getAutoCreate : function()
+    {
+        var cfg = {
+            id: this.id,
+            tag: this.tag,
+            html: this.html,
+            cls: 'x-form-item'
+        };
+        
+        return cfg;
+        
+    },
+    
+    onRender : function(ct, position)
+    {
+        Roo.form.TextItem.superclass.onRender.call(this, ct, position);
+        
+        if(!this.el){
+            var cfg = this.getAutoCreate();
+            if(!cfg.name){
+                cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
+            }
+            if (!cfg.name.length) {
+                delete cfg.name;
             }
+            this.el = ct.createChild(cfg, position);
         }
-        this.filtered = {};
+    },
+    /*
+     * setHTML
+     * @param {String} html update the Contents of the element.
+     */
+    setHTML : function(html)
+    {
+        this.fieldEl.dom.innerHTML = html;
     }
-};
-/*
+    
+});/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -18311,382 +16009,577 @@ Roo.tree.TreeFilter.prototype = {
  * <script type="text/javascript">
  */
  
-
 /**
- * @class Roo.tree.TreeSorter
- * Provides sorting of nodes in a TreePanel
- * 
- * @cfg {Boolean} folderSort True to sort leaf nodes under non leaf nodes
- * @cfg {String} property The named attribute on the node to sort by (defaults to text)
- * @cfg {String} dir The direction to sort (asc or desc) (defaults to asc)
- * @cfg {String} leafAttr The attribute used to determine leaf nodes in folder sort (defaults to "leaf")
- * @cfg {Boolean} caseSensitive true for case sensitive sort (defaults to false)
- * @cfg {Function} sortType A custom "casting" function used to convert node values before sorting
+ * @class Roo.form.Field
+ * @extends Roo.BoxComponent
+ * Base class for form fields that provides default event handling, sizing, value handling and other functionality.
  * @constructor
- * @param {TreePanel} tree
- * @param {Object} config
+ * Creates a new Field
+ * @param {Object} config Configuration options
  */
-Roo.tree.TreeSorter = function(tree, config){
-    Roo.apply(this, config);
-    tree.on("beforechildrenrendered", this.doSort, this);
-    tree.on("append", this.updateSort, this);
-    tree.on("insert", this.updateSort, this);
+Roo.form.Field = function(config){
+    Roo.form.Field.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.form.Field, Roo.BoxComponent,  {
+    /**
+     * @cfg {String} fieldLabel Label to use when rendering a form.
+     */
+       /**
+     * @cfg {String} qtip Mouse over tip
+     */
+     
+    /**
+     * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
+     */
+    invalidClass : "x-form-invalid",
+    /**
+     * @cfg {String} invalidText The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
+     */
+    invalidText : "The value in this field is invalid",
+    /**
+     * @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to "x-form-focus")
+     */
+    focusClass : "x-form-focus",
+    /**
+     * @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable
+      automatic validation (defaults to "keyup").
+     */
+    validationEvent : "keyup",
+    /**
+     * @cfg {Boolean} validateOnBlur Whether the field should validate when it loses focus (defaults to true).
+     */
+    validateOnBlur : true,
+    /**
+     * @cfg {Number} validationDelay The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
+     */
+    validationDelay : 250,
+    /**
+     * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+     * {tag: "input", type: "text", size: "20", autocomplete: "off"})
+     */
+    defaultAutoCreate : {tag: "input", type: "text", size: "20", autocomplete: "new-password"},
+    /**
+     * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field")
+     */
+    fieldClass : "x-form-field",
+    /**
+     * @cfg {String} msgTarget The location where error text should display.  Should be one of the following values (defaults to 'qtip'):
+     *<pre>
+Value         Description
+-----------   ----------------------------------------------------------------------
+qtip          Display a quick tip when the user hovers over the field
+title         Display a default browser title attribute popup
+under         Add a block div beneath the field containing the error text
+side          Add an error icon to the right of the field with a popup on hover
+[element id]  Add the error text directly to the innerHTML of the specified element
+</pre>
+     */
+    msgTarget : 'qtip',
+    /**
+     * @cfg {String} msgFx <b>Experimental</b> The effect used when displaying a validation message under the field (defaults to 'normal').
+     */
+    msgFx : 'normal',
+
+    /**
+     * @cfg {Boolean} readOnly True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.
+     */
+    readOnly : false,
+
+    /**
+     * @cfg {Boolean} disabled True to disable the field (defaults to false).
+     */
+    disabled : false,
+
+    /**
+     * @cfg {String} inputType The type attribute for input fields -- e.g. radio, text, password (defaults to "text").
+     */
+    inputType : undefined,
     
-    var dsc = this.dir && this.dir.toLowerCase() == "desc";
-    var p = this.property || "text";
-    var sortType = this.sortType;
-    var fs = this.folderSort;
-    var cs = this.caseSensitive === true;
-    var leafAttr = this.leafAttr || 'leaf';
+    /**
+     * @cfg {Number} tabIndex The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
+	 */
+	tabIndex : undefined,
+	
+    // private
+    isFormField : true,
+
+    // private
+    hasFocus : false,
+    /**
+     * @property {Roo.Element} fieldEl
+     * Element Containing the rendered Field (with label etc.)
+     */
+    /**
+     * @cfg {Mixed} value A value to initialize this field with.
+     */
+    value : undefined,
+
+    /**
+     * @cfg {String} name The field's HTML name attribute.
+     */
+    /**
+     * @cfg {String} cls A CSS class to apply to the field's underlying element.
+     */
+    // private
+    loadedValue : false,
+     
+     
+	// private ??
+	initComponent : function(){
+        Roo.form.Field.superclass.initComponent.call(this);
+        this.addEvents({
+            /**
+             * @event focus
+             * Fires when this field receives input focus.
+             * @param {Roo.form.Field} this
+             */
+            focus : true,
+            /**
+             * @event blur
+             * Fires when this field loses input focus.
+             * @param {Roo.form.Field} this
+             */
+            blur : true,
+            /**
+             * @event specialkey
+             * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check
+             * {@link Roo.EventObject#getKey} to determine which key was pressed.
+             * @param {Roo.form.Field} this
+             * @param {Roo.EventObject} e The event object
+             */
+            specialkey : true,
+            /**
+             * @event change
+             * Fires just before the field blurs if the field value has changed.
+             * @param {Roo.form.Field} this
+             * @param {Mixed} newValue The new value
+             * @param {Mixed} oldValue The original value
+             */
+            change : true,
+            /**
+             * @event invalid
+             * Fires after the field has been marked as invalid.
+             * @param {Roo.form.Field} this
+             * @param {String} msg The validation message
+             */
+            invalid : true,
+            /**
+             * @event valid
+             * Fires after the field has been validated with no errors.
+             * @param {Roo.form.Field} this
+             */
+            valid : true,
+             /**
+             * @event keyup
+             * Fires after the key up
+             * @param {Roo.form.Field} this
+             * @param {Roo.EventObject}  e The event Object
+             */
+            keyup : true
+        });
+    },
+
+    /**
+     * Returns the name attribute of the field if available
+     * @return {String} name The field name
+     */
+    getName: function(){
+         return this.rendered && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
+    },
 
-    this.sortFn = function(n1, n2){
-        if(fs){
-            if(n1.attributes[leafAttr] && !n2.attributes[leafAttr]){
-                return 1;
+    // private
+    onRender : function(ct, position){
+        Roo.form.Field.superclass.onRender.call(this, ct, position);
+        if(!this.el){
+            var cfg = this.getAutoCreate();
+            if(!cfg.name){
+                cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
             }
-            if(!n1.attributes[leafAttr] && n2.attributes[leafAttr]){
-                return -1;
+            if (!cfg.name.length) {
+                delete cfg.name;
+            }
+            if(this.inputType){
+                cfg.type = this.inputType;
             }
+            this.el = ct.createChild(cfg, position);
         }
-    	var v1 = sortType ? sortType(n1) : (cs ? n1.attributes[p] : n1.attributes[p].toUpperCase());
-    	var v2 = sortType ? sortType(n2) : (cs ? n2.attributes[p] : n2.attributes[p].toUpperCase());
-    	if(v1 < v2){
-			return dsc ? +1 : -1;
-		}else if(v1 > v2){
-			return dsc ? -1 : +1;
-        }else{
-	    	return 0;
+        var type = this.el.dom.type;
+        if(type){
+            if(type == 'password'){
+                type = 'text';
+            }
+            this.el.addClass('x-form-'+type);
+        }
+        if(this.readOnly){
+            this.el.dom.readOnly = true;
+        }
+        if(this.tabIndex !== undefined){
+            this.el.dom.setAttribute('tabIndex', this.tabIndex);
         }
-    };
-};
 
-Roo.tree.TreeSorter.prototype = {
-    doSort : function(node){
-        node.sort(this.sortFn);
+        this.el.addClass([this.fieldClass, this.cls]);
+        this.initValue();
     },
-    
-    compareNodes : function(n1, n2){
-        return (n1.text.toUpperCase() > n2.text.toUpperCase() ? 1 : -1);
+
+    /**
+     * Apply the behaviors of this component to an existing element. <b>This is used instead of render().</b>
+     * @param {String/HTMLElement/Element} el The id of the node, a DOM node or an existing Element
+     * @return {Roo.form.Field} this
+     */
+    applyTo : function(target){
+        this.allowDomMove = false;
+        this.el = Roo.get(target);
+        this.render(this.el.dom.parentNode);
+        return this;
     },
-    
-    updateSort : function(tree, node){
-        if(node.childrenRendered){
-            this.doSort.defer(1, this, [node]);
-        }
-    }
-};/*
- * 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">
- */
 
-if(Roo.dd.DropZone){
-    
-Roo.tree.TreeDropZone = function(tree, config){
-    this.allowParentInsert = false;
-    this.allowContainerDrop = false;
-    this.appendOnly = false;
-    Roo.tree.TreeDropZone.superclass.constructor.call(this, tree.innerCt, config);
-    this.tree = tree;
-    this.lastInsertClass = "x-tree-no-status";
-    this.dragOverData = {};
-};
+    // private
+    initValue : function(){
+        if(this.value !== undefined){
+            this.setValue(this.value);
+        }else if(this.el.dom.value.length > 0){
+            this.setValue(this.el.dom.value);
+        }
+    },
 
-Roo.extend(Roo.tree.TreeDropZone, Roo.dd.DropZone, {
-    ddGroup : "TreeDD",
-    scroll:  true,
-    
-    expandDelay : 1000,
-    
-    expandNode : function(node){
-        if(node.hasChildNodes() && !node.isExpanded()){
-            node.expand(false, null, this.triggerCacheRefresh.createDelegate(this));
+    /**
+     * Returns true if this field has been changed since it was originally loaded and is not disabled.
+     * DEPRICATED  - it never worked well - use hasChanged/resetHasChanged.
+     */
+    isDirty : function() {
+        if(this.disabled) {
+            return false;
         }
+        return String(this.getValue()) !== String(this.originalValue);
     },
-    
-    queueExpand : function(node){
-        this.expandProcId = this.expandNode.defer(this.expandDelay, this, [node]);
+
+    /**
+     * stores the current value in loadedValue
+     */
+    resetHasChanged : function()
+    {
+        this.loadedValue = String(this.getValue());
     },
-    
-    cancelExpand : function(){
-        if(this.expandProcId){
-            clearTimeout(this.expandProcId);
-            this.expandProcId = false;
+    /**
+     * checks the current value against the 'loaded' value.
+     * Note - will return false if 'resetHasChanged' has not been called first.
+     */
+    hasChanged : function()
+    {
+        if(this.disabled || this.readOnly) {
+            return false;
         }
+        return this.loadedValue !== false && String(this.getValue()) !== this.loadedValue;
     },
     
-    isValidDropPoint : function(n, pt, dd, e, data){
-        if(!n || !data){ return false; }
-        var targetNode = n.node;
-        var dropNode = data.node;
-        // default drop rules
-        if(!(targetNode && targetNode.isTarget && pt)){
-            return false;
-        }
-        if(pt == "append" && targetNode.allowChildren === false){
-            return false;
+    
+    
+    // private
+    afterRender : function(){
+        Roo.form.Field.superclass.afterRender.call(this);
+        this.initEvents();
+    },
+
+    // private
+    fireKey : function(e){
+        //Roo.log('field ' + e.getKey());
+        if(e.isNavKeyPress()){
+            this.fireEvent("specialkey", this, e);
         }
-        if((pt == "above" || pt == "below") && (targetNode.parentNode && targetNode.parentNode.allowChildren === false)){
-            return false;
+    },
+
+    /**
+     * Resets the current field value to the originally loaded value and clears any validation messages
+     */
+    reset : function(){
+        this.setValue(this.resetValue);
+        this.originalValue = this.getValue();
+        this.clearInvalid();
+    },
+
+    // private
+    initEvents : function(){
+        // safari killled keypress - so keydown is now used..
+        this.el.on("keydown" , this.fireKey,  this);
+        this.el.on("focus", this.onFocus,  this);
+        this.el.on("blur", this.onBlur,  this);
+        this.el.relayEvent('keyup', this);
+
+        // reference to original value for reset
+        this.originalValue = this.getValue();
+        this.resetValue =  this.getValue();
+    },
+
+    // private
+    onFocus : function(){
+        if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
+            this.el.addClass(this.focusClass);
         }
-        if(dropNode && (targetNode == dropNode || dropNode.contains(targetNode))){
-            return false;
+        if(!this.hasFocus){
+            this.hasFocus = true;
+            this.startValue = this.getValue();
+            this.fireEvent("focus", this);
         }
-        // reuse the object
-        var overEvent = this.dragOverData;
-        overEvent.tree = this.tree;
-        overEvent.target = targetNode;
-        overEvent.data = data;
-        overEvent.point = pt;
-        overEvent.source = dd;
-        overEvent.rawEvent = e;
-        overEvent.dropNode = dropNode;
-        overEvent.cancel = false;  
-        var result = this.tree.fireEvent("nodedragover", overEvent);
-        return overEvent.cancel === false && result !== false;
     },
-    
-    getDropPoint : function(e, n, dd)
-    {
-        var tn = n.node;
-        if(tn.isRoot){
-            return tn.allowChildren !== false ? "append" : false; // always append for root
-        }
-        var dragEl = n.ddel;
-        var t = Roo.lib.Dom.getY(dragEl), b = t + dragEl.offsetHeight;
-        var y = Roo.lib.Event.getPageY(e);
-        //var noAppend = tn.allowChildren === false || tn.isLeaf();
-        
-        // we may drop nodes anywhere, as long as allowChildren has not been set to false..
-        var noAppend = tn.allowChildren === false;
-        if(this.appendOnly || tn.parentNode.allowChildren === false){
-            return noAppend ? false : "append";
+
+    beforeBlur : Roo.emptyFn,
+
+    // private
+    onBlur : function(){
+        this.beforeBlur();
+        if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
+            this.el.removeClass(this.focusClass);
         }
-        var noBelow = false;
-        if(!this.allowParentInsert){
-            noBelow = tn.hasChildNodes() && tn.isExpanded();
+        this.hasFocus = false;
+        if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){
+            this.validate();
         }
-        var q = (b - t) / (noAppend ? 2 : 3);
-        if(y >= t && y < (t + q)){
-            return "above";
-        }else if(!noBelow && (noAppend || y >= b-q && y <= b)){
-            return "below";
-        }else{
-            return "append";
+        var v = this.getValue();
+        if(String(v) !== String(this.startValue)){
+            this.fireEvent('change', this, v, this.startValue);
         }
+        this.fireEvent("blur", this);
     },
-    
-    onNodeEnter : function(n, dd, e, data)
-    {
-        this.cancelExpand();
+
+    /**
+     * Returns whether or not the field value is currently valid
+     * @param {Boolean} preventMark True to disable marking the field invalid
+     * @return {Boolean} True if the value is valid, else false
+     */
+    isValid : function(preventMark){
+        if(this.disabled){
+            return true;
+        }
+        var restore = this.preventMark;
+        this.preventMark = preventMark === true;
+        var v = this.validateValue(this.processValue(this.getRawValue()));
+        this.preventMark = restore;
+        return v;
     },
-    
-    onNodeOver : function(n, dd, e, data)
-    {
-       
-        var pt = this.getDropPoint(e, n, dd);
-        var node = n.node;
-        
-        // auto node expand check
-        if(!this.expandProcId && pt == "append" && node.hasChildNodes() && !n.node.isExpanded()){
-            this.queueExpand(node);
-        }else if(pt != "append"){
-            this.cancelExpand();
+
+    /**
+     * Validates the field value
+     * @return {Boolean} True if the value is valid, else false
+     */
+    validate : function(){
+        if(this.disabled || this.validateValue(this.processValue(this.getRawValue()))){
+            this.clearInvalid();
+            return true;
         }
-        
-        // set the insert point style on the target node
-        var returnCls = this.dropNotAllowed;
-        if(this.isValidDropPoint(n, pt, dd, e, data)){
-           if(pt){
-               var el = n.ddel;
-               var cls;
-               if(pt == "above"){
-                   returnCls = n.node.isFirst() ? "x-tree-drop-ok-above" : "x-tree-drop-ok-between";
-                   cls = "x-tree-drag-insert-above";
-               }else if(pt == "below"){
-                   returnCls = n.node.isLast() ? "x-tree-drop-ok-below" : "x-tree-drop-ok-between";
-                   cls = "x-tree-drag-insert-below";
-               }else{
-                   returnCls = "x-tree-drop-ok-append";
-                   cls = "x-tree-drag-append";
-               }
-               if(this.lastInsertClass != cls){
-                   Roo.fly(el).replaceClass(this.lastInsertClass, cls);
-                   this.lastInsertClass = cls;
-               }
-           }
-       }
-       return returnCls;
+        return false;
     },
-    
-    onNodeOut : function(n, dd, e, data){
-        
-        this.cancelExpand();
-        this.removeDropIndicators(n);
+
+    processValue : function(value){
+        return value;
     },
-    
-    onNodeDrop : function(n, dd, e, data){
-        var point = this.getDropPoint(e, n, dd);
-        var targetNode = n.node;
-        targetNode.ui.startDrop();
-        if(!this.isValidDropPoint(n, point, dd, e, data)){
-            targetNode.ui.endDrop();
-            return false;
-        }
-        // first try to find the drop node
-        var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, point, e) : null);
-        var dropEvent = {
-            tree : this.tree,
-            target: targetNode,
-            data: data,
-            point: point,
-            source: dd,
-            rawEvent: e,
-            dropNode: dropNode,
-            cancel: !dropNode   
-        };
-        var retval = this.tree.fireEvent("beforenodedrop", dropEvent);
-        if(retval === false || dropEvent.cancel === true || !dropEvent.dropNode){
-            targetNode.ui.endDrop();
-            return false;
-        }
-        // allow target changing
-        targetNode = dropEvent.target;
-        if(point == "append" && !targetNode.isExpanded()){
-            targetNode.expand(false, null, function(){
-                this.completeDrop(dropEvent);
-            }.createDelegate(this));
-        }else{
-            this.completeDrop(dropEvent);
-        }
+
+    // private
+    // Subclasses should provide the validation implementation by overriding this
+    validateValue : function(value){
         return true;
     },
-    
-    completeDrop : function(de){
-        var ns = de.dropNode, p = de.point, t = de.target;
-        if(!(ns instanceof Array)){
-            ns = [ns];
-        }
-        var n;
-        for(var i = 0, len = ns.length; i < len; i++){
-            n = ns[i];
-            if(p == "above"){
-                t.parentNode.insertBefore(n, t);
-            }else if(p == "below"){
-                t.parentNode.insertBefore(n, t.nextSibling);
-            }else{
-                t.appendChild(n);
-            }
+
+    /**
+     * Mark this field as invalid
+     * @param {String} msg The validation message
+     */
+    markInvalid : function(msg){
+        if(!this.rendered || this.preventMark){ // not rendered
+            return;
         }
-        n.ui.focus();
-        if(this.tree.hlDrop){
-            n.ui.highlight();
+        
+        var obj = (typeof(this.combo) != 'undefined') ? this.combo : this; // fix the combox array!!
+        
+        obj.el.addClass(this.invalidClass);
+        msg = msg || this.invalidText;
+        switch(this.msgTarget){
+            case 'qtip':
+                obj.el.dom.qtip = msg;
+                obj.el.dom.qclass = 'x-form-invalid-tip';
+                if(Roo.QuickTips){ // fix for floating editors interacting with DND
+                    Roo.QuickTips.enable();
+                }
+                break;
+            case 'title':
+                this.el.dom.title = msg;
+                break;
+            case 'under':
+                if(!this.errorEl){
+                    var elp = this.el.findParent('.x-form-element', 5, true);
+                    this.errorEl = elp.createChild({cls:'x-form-invalid-msg'});
+                    this.errorEl.setWidth(elp.getWidth(true)-20);
+                }
+                this.errorEl.update(msg);
+                Roo.form.Field.msgFx[this.msgFx].show(this.errorEl, this);
+                break;
+            case 'side':
+                if(!this.errorIcon){
+                    var elp = this.el.findParent('.x-form-element', 5, true);
+                    this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
+                }
+                this.alignErrorIcon();
+                this.errorIcon.dom.qtip = msg;
+                this.errorIcon.dom.qclass = 'x-form-invalid-tip';
+                this.errorIcon.show();
+                this.on('resize', this.alignErrorIcon, this);
+                break;
+            default:
+                var t = Roo.getDom(this.msgTarget);
+                t.innerHTML = msg;
+                t.style.display = this.msgDisplay;
+                break;
         }
-        t.ui.endDrop();
-        this.tree.fireEvent("nodedrop", de);
+        this.fireEvent('invalid', this, msg);
     },
-    
-    afterNodeMoved : function(dd, data, e, targetNode, dropNode){
-        if(this.tree.hlDrop){
-            dropNode.ui.focus();
-            dropNode.ui.highlight();
+
+    // private
+    alignErrorIcon : function(){
+        this.errorIcon.alignTo(this.el, 'tl-tr', [2, 0]);
+    },
+
+    /**
+     * Clear any invalid styles/messages for this field
+     */
+    clearInvalid : function(){
+        if(!this.rendered || this.preventMark){ // not rendered
+            return;
         }
-        this.tree.fireEvent("nodedrop", this.tree, targetNode, data, dd, e);
+        var obj = (typeof(this.combo) != 'undefined') ? this.combo : this; // fix the combox array!!
+        
+        obj.el.removeClass(this.invalidClass);
+        switch(this.msgTarget){
+            case 'qtip':
+                obj.el.dom.qtip = '';
+                break;
+            case 'title':
+                this.el.dom.title = '';
+                break;
+            case 'under':
+                if(this.errorEl){
+                    Roo.form.Field.msgFx[this.msgFx].hide(this.errorEl, this);
+                }
+                break;
+            case 'side':
+                if(this.errorIcon){
+                    this.errorIcon.dom.qtip = '';
+                    this.errorIcon.hide();
+                    this.un('resize', this.alignErrorIcon, this);
+                }
+                break;
+            default:
+                var t = Roo.getDom(this.msgTarget);
+                t.innerHTML = '';
+                t.style.display = 'none';
+                break;
+        }
+        this.fireEvent('valid', this);
     },
-    
-    getTree : function(){
-        return this.tree;
+
+    /**
+     * 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(){
+        var v = this.el.getValue();
+        
+        return v;
     },
-    
-    removeDropIndicators : function(n){
-        if(n && n.ddel){
-            var el = n.ddel;
-            Roo.fly(el).removeClass([
-                    "x-tree-drag-insert-above",
-                    "x-tree-drag-insert-below",
-                    "x-tree-drag-append"]);
-            this.lastInsertClass = "_noclass";
+
+    /**
+     * 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(){
+        var v = this.el.getValue();
+         
+        return v;
+    },
+
+    /**
+     * Sets the underlying DOM field's value directly, bypassing validation.  To set the value with validation see {@link #setValue}.
+     * @param {Mixed} value The value to set
+     */
+    setRawValue : function(v){
+        return this.el.dom.value = (v === null || v === undefined ? '' : v);
+    },
+
+    /**
+     * 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(v){
+        this.value = v;
+        if(this.rendered){
+            this.el.dom.value = (v === null || v === undefined ? '' : v);
+             this.validate();
         }
     },
-    
-    beforeDragDrop : function(target, e, id){
-        this.cancelExpand();
-        return true;
+
+    adjustSize : function(w, h){
+        var s = Roo.form.Field.superclass.adjustSize.call(this, w, h);
+        s.width = this.adjustWidth(this.el.dom.tagName, s.width);
+        return s;
     },
-    
-    afterRepair : function(data){
-        if(data && Roo.enableFx){
-            data.node.ui.highlight();
+
+    adjustWidth : function(tag, w){
+        tag = tag.toLowerCase();
+        if(typeof w == 'number' && Roo.isStrict && !Roo.isSafari){
+            if(Roo.isIE && (tag == 'input' || tag == 'textarea')){
+                if(tag == 'input'){
+                    return w + 2;
+                }
+                if(tag == 'textarea'){
+                    return w-2;
+                }
+            }else if(Roo.isOpera){
+                if(tag == 'input'){
+                    return w + 2;
+                }
+                if(tag == 'textarea'){
+                    return w-2;
+                }
+            }
         }
-        this.hideProxy();
-    } 
-    
+        return w;
+    }
 });
 
-}
-/*
- * 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">
- */
- 
 
-if(Roo.dd.DragZone){
-Roo.tree.TreeDragZone = function(tree, config){
-    Roo.tree.TreeDragZone.superclass.constructor.call(this, tree.getTreeEl(), config);
-    this.tree = tree;
-};
+// anything other than normal should be considered experimental
+Roo.form.Field.msgFx = {
+    normal : {
+        show: function(msgEl, f){
+            msgEl.setDisplayed('block');
+        },
 
-Roo.extend(Roo.tree.TreeDragZone, Roo.dd.DragZone, {
-    ddGroup : "TreeDD",
-   
-    onBeforeDrag : function(data, e){
-        var n = data.node;
-        return n && n.draggable && !n.disabled;
-    },
-     
-    
-    onInitDrag : function(e){
-        var data = this.dragData;
-        this.tree.getSelectionModel().select(data.node);
-        this.proxy.update("");
-        data.node.ui.appendDDGhost(this.proxy.ghost.dom);
-        this.tree.fireEvent("startdrag", this.tree, data.node, e);
-    },
-    
-    getRepairXY : function(e, data){
-        return data.node.ui.getDDRepairXY();
-    },
-    
-    onEndDrag : function(data, e){
-        this.tree.fireEvent("enddrag", this.tree, data.node, e);
-        
-        
+        hide : function(msgEl, f){
+            msgEl.setDisplayed(false).update('');
+        }
     },
-    
-    onValidDrop : function(dd, e, id){
-        this.tree.fireEvent("dragdrop", this.tree, this.dragData.node, dd, e);
-        this.hideProxy();
+
+    slide : {
+        show: function(msgEl, f){
+            msgEl.slideIn('t', {stopFx:true});
+        },
+
+        hide : function(msgEl, f){
+            msgEl.slideOut('t', {stopFx:true,useDisplay:true});
+        }
     },
-    
-    beforeInvalidDrop : function(e, id){
-        // this scrolls the original position back into view
-        var sm = this.tree.getSelectionModel();
-        sm.clearSelections();
-        sm.select(this.dragData.node);
+
+    slideRight : {
+        show: function(msgEl, f){
+            msgEl.fixDisplay();
+            msgEl.alignTo(f.el, 'tl-tr');
+            msgEl.slideIn('l', {stopFx:true});
+        },
+
+        hide : function(msgEl, f){
+            msgEl.slideOut('l', {stopFx:true,useDisplay:true});
+        }
     }
-});
-}/*
+};/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -18696,309 +16589,338 @@ Roo.extend(Roo.tree.TreeDragZone, Roo.dd.DragZone, {
  * Fork - LGPL
  * <script type="text/javascript">
  */
+ 
+
 /**
- * @class Roo.tree.TreeEditor
- * @extends Roo.Editor
- * Provides editor functionality for inline tree node editing.  Any valid {@link Roo.form.Field} can be used
- * as the editor field.
+ * @class Roo.form.TextField
+ * @extends Roo.form.Field
+ * Basic text field.  Can be used as a direct replacement for traditional text inputs, or as the base
+ * class for more sophisticated input controls (like {@link Roo.form.TextArea} and {@link Roo.form.ComboBox}).
  * @constructor
- * @param {Object} config (used to be the tree panel.)
- * @param {Object} oldconfig DEPRECIATED Either a prebuilt {@link Roo.form.Field} instance or a Field config object
- * 
- * @cfg {Roo.tree.TreePanel} tree The tree to bind to.
- * @cfg {Roo.form.TextField|Object} field The field configuration
- *
- * 
+ * Creates a new TextField
+ * @param {Object} config Configuration options
  */
-Roo.tree.TreeEditor = function(config, oldconfig) { // was -- (tree, config){
-    var tree = config;
-    var field;
-    if (oldconfig) { // old style..
-        field = oldconfig.events ? oldconfig : new Roo.form.TextField(oldconfig);
-    } else {
-        // new style..
-        tree = config.tree;
-        config.field = config.field  || {};
-        config.field.xtype = 'TextField';
-        field = Roo.factory(config.field, Roo.form);
-    }
-    config = config || {};
-    
-    
+Roo.form.TextField = function(config){
+    Roo.form.TextField.superclass.constructor.call(this, config);
     this.addEvents({
         /**
-         * @event beforenodeedit
-         * Fires when editing is initiated, but before the value changes.  Editing can be canceled by returning
-         * false from the handler of this event.
-         * @param {Editor} this
-         * @param {Roo.tree.Node} node 
-         */
-        "beforenodeedit" : true
+         * @event autosize
+         * Fires when the autosize function is triggered.  The field may or may not have actually changed size
+         * according to the default logic, but this event provides a hook for the developer to apply additional
+         * logic at runtime to resize the field if needed.
+	     * @param {Roo.form.Field} this This text field
+	     * @param {Number} width The new field width
+	     */
+        autosize : true
     });
-    
-    //Roo.log(config);
-    Roo.tree.TreeEditor.superclass.constructor.call(this, field, config);
-
-    this.tree = tree;
-
-    tree.on('beforeclick', this.beforeNodeClick, this);
-    tree.getTreeEl().on('mousedown', this.hide, this);
-    this.on('complete', this.updateNode, this);
-    this.on('beforestartedit', this.fitToTree, this);
-    this.on('startedit', this.bindScroll, this, {delay:10});
-    this.on('specialkey', this.onSpecialKey, this);
 };
 
-Roo.extend(Roo.tree.TreeEditor, Roo.Editor, {
+Roo.extend(Roo.form.TextField, Roo.form.Field,  {
     /**
-     * @cfg {String} alignment
-     * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to "l-l").
+     * @cfg {Boolean} grow True if this field should automatically grow and shrink to its content
      */
-    alignment: "l-l",
-    // inherit
-    autoSize: false,
+    grow : false,
     /**
-     * @cfg {Boolean} hideEl
-     * True to hide the bound element while the editor is displayed (defaults to false)
+     * @cfg {Number} growMin The minimum width to allow when grow = true (defaults to 30)
      */
-    hideEl : false,
+    growMin : 30,
     /**
-     * @cfg {String} cls
-     * CSS class to apply to the editor (defaults to "x-small-editor x-tree-editor")
+     * @cfg {Number} growMax The maximum width to allow when grow = true (defaults to 800)
      */
-    cls: "x-small-editor x-tree-editor",
+    growMax : 800,
     /**
-     * @cfg {Boolean} shim
-     * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
+     * @cfg {String} vtype A validation type name as defined in {@link Roo.form.VTypes} (defaults to null)
      */
-    shim:false,
-    // inherit
-    shadow:"frame",
+    vtype : null,
     /**
-     * @cfg {Number} maxWidth
-     * The maximum width in pixels of the editor field (defaults to 250).  Note that if the maxWidth would exceed
-     * the containing tree element's size, it will be automatically limited for you to the container width, taking
-     * scroll and client offsets into account prior to each edit.
+     * @cfg {String} maskRe An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
      */
-    maxWidth: 250,
-
-    editDelay : 350,
+    maskRe : null,
+    /**
+     * @cfg {Boolean} disableKeyFilter True to disable input keystroke filtering (defaults to false)
+     */
+    disableKeyFilter : false,
+    /**
+     * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to true)
+     */
+    allowBlank : true,
+    /**
+     * @cfg {Number} minLength Minimum input field length required (defaults to 0)
+     */
+    minLength : 0,
+    /**
+     * @cfg {Number} maxLength Maximum input field length allowed (defaults to Number.MAX_VALUE)
+     */
+    maxLength : Number.MAX_VALUE,
+    /**
+     * @cfg {String} minLengthText Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minLength}")
+     */
+    minLengthText : "The minimum length for this field is {0}",
+    /**
+     * @cfg {String} maxLengthText Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxLength}")
+     */
+    maxLengthText : "The maximum length for this field is {0}",
+    /**
+     * @cfg {Boolean} selectOnFocus True to automatically select any existing field text when the field receives input focus (defaults to false)
+     */
+    selectOnFocus : false,
+    /**
+     * @cfg {Boolean} allowLeadingSpace True to prevent the stripping of leading white space 
+     */    
+    allowLeadingSpace : false,
+    /**
+     * @cfg {String} blankText Error text to display if the allow blank validation fails (defaults to "This field is required")
+     */
+    blankText : "This field is required",
+    /**
+     * @cfg {Function} validator A custom validation function to be called during field validation (defaults to null).
+     * If available, this function will be called only after the basic validators all return true, and will be passed the
+     * current field value and expected to return boolean true if the value is valid or a string error message if invalid.
+     */
+    validator : null,
+    /**
+     * @cfg {RegExp} regex A JavaScript RegExp object to be tested against the field value during validation (defaults to null).
+     * If available, this regex will be evaluated only after the basic validators all return true, and will be passed the
+     * current field value.  If the test fails, the field will be marked invalid using {@link #regexText}.
+     */
+    regex : null,
+    /**
+     * @cfg {String} regexText The error text to display if {@link #regex} is used and the test fails during validation (defaults to "")
+     */
+    regexText : "",
+    /**
+     * @cfg {String} emptyText The default text to display in an empty field - placeholder... (defaults to null).
+     */
+    emptyText : null,
+   
 
     // private
-    fitToTree : function(ed, el){
-        var td = this.tree.getTreeEl().dom, nd = el.dom;
-        if(td.scrollLeft >  nd.offsetLeft){ // ensure the node left point is visible
-            td.scrollLeft = nd.offsetLeft;
+    initEvents : function()
+    {
+        if (this.emptyText) {
+            this.el.attr('placeholder', this.emptyText);
         }
-        var w = Math.min(
-                this.maxWidth,
-                (td.clientWidth > 20 ? td.clientWidth : td.offsetWidth) - Math.max(0, nd.offsetLeft-td.scrollLeft) - /*cushion*/5);
-        this.setSize(w, '');
         
-        return this.fireEvent('beforenodeedit', this, this.editNode);
+        Roo.form.TextField.superclass.initEvents.call(this);
+        if(this.validationEvent == 'keyup'){
+            this.validationTask = new Roo.util.DelayedTask(this.validate, this);
+            this.el.on('keyup', this.filterValidation, this);
+        }
+        else if(this.validationEvent !== false){
+            this.el.on(this.validationEvent, this.validate, this, {buffer: this.validationDelay});
+        }
         
+        if(this.selectOnFocus){
+            this.on("focus", this.preFocus, this);
+        }
+	if (!this.allowLeadingSpace) {
+	    this.on('blur', this.cleanLeadingSpace, this);
+	}
+	
+        if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Roo.form.VTypes[this.vtype+'Mask']))){
+            this.el.on("keypress", this.filterKeys, this);
+        }
+        if(this.grow){
+            this.el.on("keyup", this.onKeyUp,  this, {buffer:50});
+            this.el.on("click", this.autoSize,  this);
+        }
+        if(this.el.is('input[type=password]') && Roo.isSafari){
+            this.el.on('keydown', this.SafariOnKeyDown, this);
+        }
     },
 
-    // private
-    triggerEdit : function(node){
-        this.completeEdit();
-        this.editNode = node;
-        this.startEdit(node.ui.textNode, node.text);
+    processValue : function(value){
+        if(this.stripCharsRe){
+            var newValue = value.replace(this.stripCharsRe, '');
+            if(newValue !== value){
+                this.setRawValue(newValue);
+                return newValue;
+            }
+        }
+        return value;
     },
 
-    // private
-    bindScroll : function(){
-        this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
+    filterValidation : function(e){
+        if(!e.isNavKeyPress()){
+            this.validationTask.delay(this.validationDelay);
+        }
     },
 
     // private
-    beforeNodeClick : function(node, e){
-        var sinceLast = (this.lastClick ? this.lastClick.getElapsed() : 0);
-        this.lastClick = new Date();
-        if(sinceLast > this.editDelay && this.tree.getSelectionModel().isSelected(node)){
-            e.stopEvent();
-            this.triggerEdit(node);
-            return false;
+    onKeyUp : function(e){
+        if(!e.isNavKeyPress()){
+            this.autoSize();
         }
-        return true;
     },
-
-    // private
-    updateNode : function(ed, value){
-        this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
-        this.editNode.setText(value);
+    // private - clean the leading white space
+    cleanLeadingSpace : function(e)
+    {
+        if ( this.inputType == 'file') {
+            return;
+        }
+        
+        this.setValue((this.getValue() + '').replace(/^\s+/,''));
     },
-
+    /**
+     * Resets the current field value to the originally-loaded value and clears any validation messages.
+     *  
+     */
+    reset : function(){
+        Roo.form.TextField.superclass.reset.call(this);
+       
+    }, 
     // private
-    onHide : function(){
-        Roo.tree.TreeEditor.superclass.onHide.call(this);
-        if(this.editNode){
-            this.editNode.ui.focus();
+    preFocus : function(){
+        
+        if(this.selectOnFocus){
+            this.el.dom.select();
         }
     },
 
+    
     // private
-    onSpecialKey : function(field, e){
+    filterKeys : function(e){
         var k = e.getKey();
-        if(k == e.ESC){
-            e.stopEvent();
-            this.cancelEdit();
-        }else if(k == e.ENTER && !e.hasModifier()){
+        if(!Roo.isIE && (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1))){
+            return;
+        }
+        var c = e.getCharCode(), cc = String.fromCharCode(c);
+        if(Roo.isIE && (e.isSpecialKey() || !cc)){
+            return;
+        }
+        if(!this.maskRe.test(cc)){
             e.stopEvent();
-            this.completeEdit();
         }
-    }
-});//<Script type="text/javascript">
-/*
- * 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">
- */
- 
-/**
- * Not documented??? - probably should be...
- */
-
-Roo.tree.ColumnNodeUI = Roo.extend(Roo.tree.TreeNodeUI, {
-    //focus: Roo.emptyFn, // prevent odd scrolling behavior
-    
-    renderElements : function(n, a, targetNode, bulkRender){
-        //consel.log("renderElements?");
-        this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
+    },
 
-        var t = n.getOwnerTree();
-        var tid = Pman.Tab.Document_TypesTree.tree.el.id;
+    setValue : function(v){
         
-        var cols = t.columns;
-        var bw = t.borderWidth;
-        var c = cols[0];
-        var href = a.href ? a.href : Roo.isGecko ? "" : "#";
-         var cb = typeof a.checked == "boolean";
-        var tx = String.format('{0}',n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]));
-        var colcls = 'x-t-' + tid + '-c0';
-        var buf = [
-            '<li class="x-tree-node">',
-            
-                
-                '<div class="x-tree-node-el ', a.cls,'">',
-                    // extran...
-                    '<div class="x-tree-col ', colcls, '" style="width:', c.width-bw, 'px;">',
-                
-                
-                        '<span class="x-tree-node-indent">',this.indentMarkup,'</span>',
-                        '<img src="', this.emptyIcon, '" class="x-tree-ec-icon  " />',
-                        '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',
-                           (a.icon ? ' x-tree-node-inline-icon' : ''),
-                           (a.iconCls ? ' '+a.iconCls : ''),
-                           '" unselectable="on" />',
-                        (cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + 
-                             (a.checked ? 'checked="checked" />' : ' />')) : ''),
-                             
-                        '<a class="x-tree-node-anchor" hidefocus="on" href="',href,'" tabIndex="1" ',
-                            (a.hrefTarget ? ' target="' +a.hrefTarget + '"' : ''), '>',
-                            '<span unselectable="on" qtip="' + tx + '">',
-                             tx,
-                             '</span></a>' ,
-                    '</div>',
-                     '<a class="x-tree-node-anchor" hidefocus="on" href="',href,'" tabIndex="1" ',
-                            (a.hrefTarget ? ' target="' +a.hrefTarget + '"' : ''), '>'
-                 ];
-        for(var i = 1, len = cols.length; i < len; i++){
-            c = cols[i];
-            colcls = 'x-t-' + tid + '-c' +i;
-            tx = String.format('{0}', (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]));
-            buf.push('<div class="x-tree-col ', colcls, ' ' ,(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
-                        '<div class="x-tree-col-text" qtip="' + tx +'">',tx,"</div>",
-                      "</div>");
-         }
-         
-         buf.push(
-            '</a>',
-            '<div class="x-clear"></div></div>',
-            '<ul class="x-tree-node-ct" style="display:none;"></ul>',
-            "</li>");
+        Roo.form.TextField.superclass.setValue.apply(this, arguments);
         
-        if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
-            this.wrap = Roo.DomHelper.insertHtml("beforeBegin",
-                                n.nextSibling.ui.getEl(), buf.join(""));
-        }else{
-            this.wrap = Roo.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
+        this.autoSize();
+    },
+
+    /**
+     * Validates a value according to the field's validation rules and marks the field as invalid
+     * if the validation fails
+     * @param {Mixed} value The value to validate
+     * @return {Boolean} True if the value is valid, else false
+     */
+    validateValue : function(value){
+        if(value.length < 1)  { // if it's blank
+             if(this.allowBlank){
+                this.clearInvalid();
+                return true;
+             }else{
+                this.markInvalid(this.blankText);
+                return false;
+             }
+        }
+        if(value.length < this.minLength){
+            this.markInvalid(String.format(this.minLengthText, this.minLength));
+            return false;
+        }
+        if(value.length > this.maxLength){
+            this.markInvalid(String.format(this.maxLengthText, this.maxLength));
+            return false;
+        }
+        if(this.vtype){
+            var vt = Roo.form.VTypes;
+            if(!vt[this.vtype](value, this)){
+                this.markInvalid(this.vtypeText || vt[this.vtype +'Text']);
+                return false;
+            }
+        }
+        if(typeof this.validator == "function"){
+            var msg = this.validator(value);
+            if(msg !== true){
+                this.markInvalid(msg);
+                return false;
+            }
         }
-        var el = this.wrap.firstChild;
-        this.elRow = el;
-        this.elNode = el.firstChild;
-        this.ranchor = el.childNodes[1];
-        this.ctNode = this.wrap.childNodes[1];
-        var cs = el.firstChild.childNodes;
-        this.indentNode = cs[0];
-        this.ecNode = cs[1];
-        this.iconNode = cs[2];
-        var index = 3;
-        if(cb){
-            this.checkbox = cs[3];
-            index++;
+        if(this.regex && !this.regex.test(value)){
+            this.markInvalid(this.regexText);
+            return false;
         }
-        this.anchor = cs[index];
-        
-        this.textNode = cs[index].firstChild;
-        
-        //el.on("click", this.onClick, this);
-        //el.on("dblclick", this.onDblClick, this);
-        
-        
-       // console.log(this);
+        return true;
     },
-    initEvents : function(){
-        Roo.tree.ColumnNodeUI.superclass.initEvents.call(this);
-        
-            
-        var a = this.ranchor;
-
-        var el = Roo.get(a);
 
-        if(Roo.isOpera){ // opera render bug ignores the CSS
-            el.setStyle("text-decoration", "none");
+    /**
+     * Selects text in this field
+     * @param {Number} start (optional) The index where the selection should start (defaults to 0)
+     * @param {Number} end (optional) The index where the selection should end (defaults to the text length)
+     */
+    selectText : function(start, end){
+        var v = this.getRawValue();
+        if(v.length > 0){
+            start = start === undefined ? 0 : start;
+            end = end === undefined ? v.length : end;
+            var d = this.el.dom;
+            if(d.setSelectionRange){
+                d.setSelectionRange(start, end);
+            }else if(d.createTextRange){
+                var range = d.createTextRange();
+                range.moveStart("character", start);
+                range.moveEnd("character", v.length-end);
+                range.select();
+            }
         }
+    },
 
-        el.on("click", this.onClick, this);
-        el.on("dblclick", this.onDblClick, this);
-        el.on("contextmenu", this.onContextMenu, this);
-        
+    /**
+     * Automatically grows the field to accomodate the width of the text up to the maximum field width allowed.
+     * This only takes effect if grow = true, and fires the autosize event.
+     */
+    autoSize : function(){
+        if(!this.grow || !this.rendered){
+            return;
+        }
+        if(!this.metrics){
+            this.metrics = Roo.util.TextMetrics.createInstance(this.el);
+        }
+        var el = this.el;
+        var v = el.dom.value;
+        var d = document.createElement('div');
+        d.appendChild(document.createTextNode(v));
+        v = d.innerHTML;
+        d = null;
+        v += "&#160;";
+        var w = Math.min(this.growMax, Math.max(this.metrics.getWidth(v) + /* add extra padding */ 10, this.growMin));
+        this.el.setWidth(w);
+        this.fireEvent("autosize", this, w);
     },
     
-    /*onSelectedChange : function(state){
-        if(state){
-            this.focus();
-            this.addClass("x-tree-selected");
-        }else{
-            //this.blur();
-            this.removeClass("x-tree-selected");
+    // private
+    SafariOnKeyDown : function(event)
+    {
+        // this is a workaround for a password hang bug on chrome/ webkit.
+        
+        var isSelectAll = false;
+        
+        if(this.el.dom.selectionEnd > 0){
+            isSelectAll = (this.el.dom.selectionEnd - this.el.dom.selectionStart - this.getValue().length == 0) ? true : false;
         }
-    },*/
-    addClass : function(cls){
-        if(this.elRow){
-            Roo.fly(this.elRow).addClass(cls);
+        if(((event.getKey() == 8 || event.getKey() == 46) && this.getValue().length ==1)){ // backspace and delete key
+            event.preventDefault();
+            this.setValue('');
+            return;
         }
         
-    },
-    
-    
-    removeClass : function(cls){
-        if(this.elRow){
-            Roo.fly(this.elRow).removeClass(cls);
+        if(isSelectAll && event.getCharCode() > 31){ // backspace and delete key
+            
+            event.preventDefault();
+            // this is very hacky as keydown always get's upper case.
+            
+            var cc = String.fromCharCode(event.getCharCode());
+            
+            
+            this.setValue( event.shiftKey ?  cc : cc.toLowerCase());
+            
         }
+        
+        
     }
-
-    
-    
-});//<Script type="text/javascript">
-
-/*
+});/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -19009,106 +16931,38 @@ Roo.tree.ColumnNodeUI = Roo.extend(Roo.tree.TreeNodeUI, {
  * <script type="text/javascript">
  */
  
-
 /**
- * @class Roo.tree.ColumnTree
- * @extends Roo.data.TreePanel
- * @cfg {Object} columns  Including width, header, renderer, cls, dataIndex 
- * @cfg {int} borderWidth  compined right/left border allowance
+ * @class Roo.form.Hidden
+ * @extends Roo.form.TextField
+ * Simple Hidden element used on forms 
+ * 
+ * usage: form.add(new Roo.form.HiddenField({ 'name' : 'test1' }));
+ * 
  * @constructor
- * @param {String/HTMLElement/Element} el The container element
- * @param {Object} config
+ * Creates a new Hidden form element.
+ * @param {Object} config Configuration options
  */
-Roo.tree.ColumnTree =  function(el, config)
-{
-   Roo.tree.ColumnTree.superclass.constructor.call(this, el , config);
-   this.addEvents({
-        /**
-        * @event resize
-        * Fire this event on a container when it resizes
-        * @param {int} w Width
-        * @param {int} h Height
-        */
-       "resize" : true
-    });
-    this.on('resize', this.onResize, this);
+
+
+
+// easy hidden field...
+Roo.form.Hidden = function(config){
+    Roo.form.Hidden.superclass.constructor.call(this, config);
 };
+  
+Roo.extend(Roo.form.Hidden, Roo.form.TextField, {
+    fieldLabel:      '',
+    inputType:      'hidden',
+    width:          50,
+    allowBlank:     true,
+    labelSeparator: '',
+    hidden:         true,
+    itemCls :       'x-form-item-display-none'
 
-Roo.extend(Roo.tree.ColumnTree, Roo.tree.TreePanel, {
-    //lines:false,
-    
-    
-    borderWidth: Roo.isBorderBox ? 0 : 2, 
-    headEls : false,
-    
-    render : function(){
-        // add the header.....
-       
-        Roo.tree.ColumnTree.superclass.render.apply(this);
-        
-        this.el.addClass('x-column-tree');
-        
-        this.headers = this.el.createChild(
-            {cls:'x-tree-headers'},this.innerCt.dom);
-   
-        var cols = this.columns, c;
-        var totalWidth = 0;
-        this.headEls = [];
-        var  len = cols.length;
-        for(var i = 0; i < len; i++){
-             c = cols[i];
-             totalWidth += c.width;
-            this.headEls.push(this.headers.createChild({
-                 cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
-                 cn: {
-                     cls:'x-tree-hd-text',
-                     html: c.header
-                 },
-                 style:'width:'+(c.width-this.borderWidth)+'px;'
-             }));
-        }
-        this.headers.createChild({cls:'x-clear'});
-        // prevent floats from wrapping when clipped
-        this.headers.setWidth(totalWidth);
-        //this.innerCt.setWidth(totalWidth);
-        this.innerCt.setStyle({ overflow: 'auto' });
-        this.onResize(this.width, this.height);
-             
-        
-    },
-    onResize : function(w,h)
-    {
-        this.height = h;
-        this.width = w;
-        // resize cols..
-        this.innerCt.setWidth(this.width);
-        this.innerCt.setHeight(this.height-20);
-        
-        // headers...
-        var cols = this.columns, c;
-        var totalWidth = 0;
-        var expEl = false;
-        var len = cols.length;
-        for(var i = 0; i < len; i++){
-            c = cols[i];
-            if (this.autoExpandColumn !== false && c.dataIndex == this.autoExpandColumn) {
-                // it's the expander..
-                expEl  = this.headEls[i];
-                continue;
-            }
-            totalWidth += c.width;
-            
-        }
-        if (expEl) {
-            expEl.setWidth(  ((w - totalWidth)-this.borderWidth - 20));
-        }
-        this.headers.setWidth(w-20);
 
-        
-        
-        
-    }
 });
+
+
 /*
  * Based on:
  * Ext JS Library 1.1.1
@@ -19121,559 +16975,530 @@ Roo.extend(Roo.tree.ColumnTree, Roo.tree.TreePanel, {
  */
  
 /**
- * @class Roo.menu.Menu
- * @extends Roo.util.Observable
- * A menu object.  This is the container to which you add all other menu items.  Menu can also serve a as a base class
- * when you want a specialzed menu based off of another component (like {@link Roo.menu.DateMenu} for example).
+ * @class Roo.form.TriggerField
+ * @extends Roo.form.TextField
+ * Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
+ * The trigger has no default action, so you must assign a function to implement the trigger click handler by
+ * overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
+ * for which you can provide a custom implementation.  For example:
+ * <pre><code>
+var trigger = new Roo.form.TriggerField();
+trigger.onTriggerClick = myTriggerFn;
+trigger.applyTo('my-field');
+</code></pre>
+ *
+ * However, in general you will most likely want to use TriggerField as the base class for a reusable component.
+ * {@link Roo.form.DateField} and {@link Roo.form.ComboBox} are perfect examples of this.
+ * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
+ * class 'x-form-trigger' by default and triggerClass will be <b>appended</b> if specified.
  * @constructor
- * Creates a new Menu
- * @param {Object} config Configuration options
+ * Create a new TriggerField.
+ * @param {Object} config Configuration options (valid {@Roo.form.TextField} config options will also be applied
+ * to the base TextField)
  */
-Roo.menu.Menu = function(config){
-    Roo.apply(this, config);
-    this.id = this.id || Roo.id();
-    this.addEvents({
-        /**
-         * @event beforeshow
-         * Fires before this menu is displayed
-         * @param {Roo.menu.Menu} this
-         */
-        beforeshow : true,
-        /**
-         * @event beforehide
-         * Fires before this menu is hidden
-         * @param {Roo.menu.Menu} this
-         */
-        beforehide : true,
-        /**
-         * @event show
-         * Fires after this menu is displayed
-         * @param {Roo.menu.Menu} this
-         */
-        show : true,
-        /**
-         * @event hide
-         * Fires after this menu is hidden
-         * @param {Roo.menu.Menu} this
-         */
-        hide : true,
-        /**
-         * @event click
-         * Fires when this menu is clicked (or when the enter key is pressed while it is active)
-         * @param {Roo.menu.Menu} this
-         * @param {Roo.menu.Item} menuItem The menu item that was clicked
-         * @param {Roo.EventObject} e
-         */
-        click : true,
-        /**
-         * @event mouseover
-         * Fires when the mouse is hovering over this menu
-         * @param {Roo.menu.Menu} this
-         * @param {Roo.EventObject} e
-         * @param {Roo.menu.Item} menuItem The menu item that was clicked
-         */
-        mouseover : true,
-        /**
-         * @event mouseout
-         * Fires when the mouse exits this menu
-         * @param {Roo.menu.Menu} this
-         * @param {Roo.EventObject} e
-         * @param {Roo.menu.Item} menuItem The menu item that was clicked
-         */
-        mouseout : true,
-        /**
-         * @event itemclick
-         * Fires when a menu item contained in this menu is clicked
-         * @param {Roo.menu.BaseItem} baseItem The BaseItem that was clicked
-         * @param {Roo.EventObject} e
-         */
-        itemclick: true
-    });
-    if (this.registerMenu) {
-        Roo.menu.MenuMgr.register(this);
-    }
-    
-    var mis = this.items;
-    this.items = new Roo.util.MixedCollection();
-    if(mis){
-        this.add.apply(this, mis);
-    }
+Roo.form.TriggerField = function(config){
+    this.mimicing = false;
+    Roo.form.TriggerField.superclass.constructor.call(this, config);
 };
 
-Roo.extend(Roo.menu.Menu, Roo.util.Observable, {
-    /**
-     * @cfg {Number} minWidth The minimum width of the menu in pixels (defaults to 120)
-     */
-    minWidth : 120,
-    /**
-     * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop"
-     * for bottom-right shadow (defaults to "sides")
-     */
-    shadow : "sides",
+Roo.extend(Roo.form.TriggerField, Roo.form.TextField,  {
     /**
-     * @cfg {String} subMenuAlign The {@link Roo.Element#alignTo} anchor position value to use for submenus of
-     * this menu (defaults to "tl-tr?")
+     * @cfg {String} triggerClass A CSS class to apply to the trigger
      */
-    subMenuAlign : "tl-tr?",
     /**
-     * @cfg {String} defaultAlign The default {@link Roo.Element#alignTo) anchor position value for this menu
-     * relative to its element of origin (defaults to "tl-bl?")
+     * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+     * {tag: "input", type: "text", size: "16", autocomplete: "off"})
      */
-    defaultAlign : "tl-bl?",
+    defaultAutoCreate : {tag: "input", type: "text", size: "16", autocomplete: "new-password"},
     /**
-     * @cfg {Boolean} allowOtherMenus True to allow multiple menus to be displayed at the same time (defaults to false)
+     * @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false)
      */
-    allowOtherMenus : false,
+    hideTrigger:false,
+
+    /** @cfg {Boolean} grow @hide */
+    /** @cfg {Number} growMin @hide */
+    /** @cfg {Number} growMax @hide */
+
     /**
-     * @cfg {Boolean} registerMenu True (default) - means that clicking on screen etc. hides it.
+     * @hide 
+     * @method
      */
-    registerMenu : true,
+    autoSize: Roo.emptyFn,
+    // private
+    monitorTab : true,
+    // private
+    deferHeight : true,
 
-    hidden:true,
+    
+    actionMode : 'wrap',
+    // private
+    onResize : function(w, h){
+        Roo.form.TriggerField.superclass.onResize.apply(this, arguments);
+        if(typeof w == 'number'){
+            var x = w - this.trigger.getWidth();
+            this.el.setWidth(this.adjustWidth('input', x));
+            this.trigger.setStyle('left', x+'px');
+        }
+    },
 
     // private
-    render : function(){
-        if(this.el){
-            return;
+    adjustSize : Roo.BoxComponent.prototype.adjustSize,
+
+    // private
+    getResizeEl : function(){
+        return this.wrap;
+    },
+
+    // private
+    getPositionEl : function(){
+        return this.wrap;
+    },
+
+    // private
+    alignErrorIcon : function(){
+        this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
+    },
+
+    // private
+    onRender : function(ct, position){
+        Roo.form.TriggerField.superclass.onRender.call(this, ct, position);
+        this.wrap = this.el.wrap({cls: "x-form-field-wrap"});
+        this.trigger = this.wrap.createChild(this.triggerConfig ||
+                {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass});
+        if(this.hideTrigger){
+            this.trigger.setDisplayed(false);
         }
-        var el = this.el = new Roo.Layer({
-            cls: "x-menu",
-            shadow:this.shadow,
-            constrain: false,
-            parentEl: this.parentEl || document.body,
-            zindex:15000
-        });
+        this.initTrigger();
+        if(!this.width){
+            this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
+        }
+    },
 
-        this.keyNav = new Roo.menu.MenuNav(this);
+    // private
+    initTrigger : function(){
+        this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
+        this.trigger.addClassOnOver('x-form-trigger-over');
+        this.trigger.addClassOnClick('x-form-trigger-click');
+    },
 
-        if(this.plain){
-            el.addClass("x-menu-plain");
+    // private
+    onDestroy : function(){
+        if(this.trigger){
+            this.trigger.removeAllListeners();
+            this.trigger.remove();
         }
-        if(this.cls){
-            el.addClass(this.cls);
+        if(this.wrap){
+            this.wrap.remove();
         }
-        // generic focus element
-        this.focusEl = el.createChild({
-            tag: "a", cls: "x-menu-focus", href: "#", onclick: "return false;", tabIndex:"-1"
-        });
-        var ul = el.createChild({tag: "ul", cls: "x-menu-list"});
-        //disabling touch- as it's causing issues ..
-        //ul.on(Roo.isTouch ? 'touchstart' : 'click'   , this.onClick, this);
-        ul.on('click'   , this.onClick, this);
-        
-        
-        ul.on("mouseover", this.onMouseOver, this);
-        ul.on("mouseout", this.onMouseOut, this);
-        this.items.each(function(item){
-            if (item.hidden) {
-                return;
-            }
-            
-            var li = document.createElement("li");
-            li.className = "x-menu-list-item";
-            ul.dom.appendChild(li);
-            item.render(li, this);
-        }, this);
-        this.ul = ul;
-        this.autoWidth();
+        Roo.form.TriggerField.superclass.onDestroy.call(this);
     },
 
     // private
-    autoWidth : function(){
-        var el = this.el, ul = this.ul;
-        if(!el){
-            return;
+    onFocus : function(){
+        Roo.form.TriggerField.superclass.onFocus.call(this);
+        if(!this.mimicing){
+            this.wrap.addClass('x-trigger-wrap-focus');
+            this.mimicing = true;
+            Roo.get(Roo.isIE ? document.body : document).on("mousedown", this.mimicBlur, this);
+            if(this.monitorTab){
+                this.el.on("keydown", this.checkTab, this);
+            }
         }
-        var w = this.width;
-        if(w){
-            el.setWidth(w);
-        }else if(Roo.isIE){
-            el.setWidth(this.minWidth);
-            var t = el.dom.offsetWidth; // force recalc
-            el.setWidth(ul.getWidth()+el.getFrameWidth("lr"));
+    },
+
+    // private
+    checkTab : function(e){
+        if(e.getKey() == e.TAB){
+            this.triggerBlur();
         }
     },
 
     // private
-    delayAutoWidth : function(){
-        if(this.rendered){
-            if(!this.awTask){
-                this.awTask = new Roo.util.DelayedTask(this.autoWidth, this);
-            }
-            this.awTask.delay(20);
+    onBlur : function(){
+        // do nothing
+    },
+
+    // private
+    mimicBlur : function(e, t){
+        if(!this.wrap.contains(t) && this.validateBlur()){
+            this.triggerBlur();
         }
     },
 
     // private
-    findTargetItem : function(e){
-        var t = e.getTarget(".x-menu-list-item", this.ul,  true);
-        if(t && t.menuItemId){
-            return this.items.get(t.menuItemId);
+    triggerBlur : function(){
+        this.mimicing = false;
+        Roo.get(Roo.isIE ? document.body : document).un("mousedown", this.mimicBlur);
+        if(this.monitorTab){
+            this.el.un("keydown", this.checkTab, this);
         }
+        this.wrap.removeClass('x-trigger-wrap-focus');
+        Roo.form.TriggerField.superclass.onBlur.call(this);
     },
 
     // private
-    onClick : function(e){
-        Roo.log("menu.onClick");
-        var t = this.findTargetItem(e);
-        if(!t){
-            return;
-        }
-        Roo.log(e);
-        if (Roo.isTouch && e.type == 'touchstart' && t.menu  && !t.disabled) {
-            if(t == this.activeItem && t.shouldDeactivate(e)){
-                this.activeItem.deactivate();
-                delete this.activeItem;
-                return;
-            }
-            if(t.canActivate){
-                this.setActiveItem(t, true);
-            }
-            return;
-            
-            
-        }
-        
-        t.onClick(e);
-        this.fireEvent("click", this, t, e);
+    // This should be overriden by any subclass that needs to check whether or not the field can be blurred.
+    validateBlur : function(e, t){
+        return true;
     },
 
     // private
-    setActiveItem : function(item, autoExpand){
-        if(item != this.activeItem){
-            if(this.activeItem){
-                this.activeItem.deactivate();
-            }
-            this.activeItem = item;
-            item.activate(autoExpand);
-        }else if(autoExpand){
-            item.expandMenu();
+    onDisable : function(){
+        Roo.form.TriggerField.superclass.onDisable.call(this);
+        if(this.wrap){
+            this.wrap.addClass('x-item-disabled');
         }
     },
 
     // private
-    tryActivate : function(start, step){
-        var items = this.items;
-        for(var i = start, len = items.length; i >= 0 && i < len; i+= step){
-            var item = items.get(i);
-            if(!item.disabled && item.canActivate){
-                this.setActiveItem(item, false);
-                return item;
-            }
+    onEnable : function(){
+        Roo.form.TriggerField.superclass.onEnable.call(this);
+        if(this.wrap){
+            this.wrap.removeClass('x-item-disabled');
         }
-        return false;
     },
 
     // private
-    onMouseOver : function(e){
-        var t;
-        if(t = this.findTargetItem(e)){
-            if(t.canActivate && !t.disabled){
-                this.setActiveItem(t, true);
-            }
+    onShow : function(){
+        var ae = this.getActionEl();
+        
+        if(ae){
+            ae.dom.style.display = '';
+            ae.dom.style.visibility = 'visible';
         }
-        this.fireEvent("mouseover", this, e, t);
     },
 
     // private
-    onMouseOut : function(e){
-        var t;
-        if(t = this.findTargetItem(e)){
-            if(t == this.activeItem && t.shouldDeactivate(e)){
-                this.activeItem.deactivate();
-                delete this.activeItem;
-            }
-        }
-        this.fireEvent("mouseout", this, e, t);
+    
+    onHide : function(){
+        var ae = this.getActionEl();
+        ae.dom.style.display = 'none';
     },
 
     /**
-     * Read-only.  Returns true if the menu is currently displayed, else false.
-     * @type Boolean
+     * The function that should handle the trigger's click event.  This method does nothing by default until overridden
+     * by an implementing function.
+     * @method
+     * @param {EventObject} e
      */
-    isVisible : function(){
-        return this.el && !this.hidden;
+    onTriggerClick : Roo.emptyFn
+});
+
+// TwinTriggerField is not a public class to be used directly.  It is meant as an abstract base class
+// to be extended by an implementing class.  For an example of implementing this class, see the custom
+// SearchField implementation here: http://extjs.com/deploy/ext/examples/form/custom.html
+Roo.form.TwinTriggerField = Roo.extend(Roo.form.TriggerField, {
+    initComponent : function(){
+        Roo.form.TwinTriggerField.superclass.initComponent.call(this);
+
+        this.triggerConfig = {
+            tag:'span', cls:'x-form-twin-triggers', cn:[
+            {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
+            {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}
+        ]};
     },
 
-    /**
-     * Displays this menu relative to another element
-     * @param {String/HTMLElement/Roo.Element} element The element to align to
-     * @param {String} position (optional) The {@link Roo.Element#alignTo} anchor position to use in aligning to
-     * the element (defaults to this.defaultAlign)
-     * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
-     */
-    show : function(el, pos, parentMenu){
-        this.parentMenu = parentMenu;
-        if(!this.el){
-            this.render();
-        }
-        this.fireEvent("beforeshow", this);
-        this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false);
+    getTrigger : function(index){
+        return this.triggers[index];
+    },
+
+    initTrigger : function(){
+        var ts = this.trigger.select('.x-form-trigger', true);
+        this.wrap.setStyle('overflow', 'hidden');
+        var triggerField = this;
+        ts.each(function(t, all, index){
+            t.hide = function(){
+                var w = triggerField.wrap.getWidth();
+                this.dom.style.display = 'none';
+                triggerField.el.setWidth(w-triggerField.trigger.getWidth());
+            };
+            t.show = function(){
+                var w = triggerField.wrap.getWidth();
+                this.dom.style.display = '';
+                triggerField.el.setWidth(w-triggerField.trigger.getWidth());
+            };
+            var triggerIndex = 'Trigger'+(index+1);
+
+            if(this['hide'+triggerIndex]){
+                t.dom.style.display = 'none';
+            }
+            t.on("click", this['on'+triggerIndex+'Click'], this, {preventDefault:true});
+            t.addClassOnOver('x-form-trigger-over');
+            t.addClassOnClick('x-form-trigger-click');
+        }, this);
+        this.triggers = ts.elements;
     },
 
+    onTrigger1Click : Roo.emptyFn,
+    onTrigger2Click : Roo.emptyFn
+});/*
+ * 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,  {
     /**
-     * Displays this menu at a specific xy position
-     * @param {Array} xyPosition Contains X & Y [x, y] values for the position at which to show the menu (coordinates are page-based)
-     * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
+     * @cfg {Number} growMin The minimum height to allow when grow = true (defaults to 60)
      */
-    showAt : function(xy, parentMenu, /* private: */_e){
-        this.parentMenu = parentMenu;
+    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.render();
+            this.defaultAutoCreate = {
+                tag: "textarea",
+                style:"width:300px;height:60px;",
+                autocomplete: "new-password"
+            };
         }
-        if(_e !== false){
-            this.fireEvent("beforeshow", this);
-            xy = this.el.adjustForConstraints(xy);
+        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);
         }
-        this.el.setXY(xy);
-        this.el.show();
-        this.hidden = false;
-        this.focus();
-        this.fireEvent("show", this);
     },
 
-    focus : function(){
-        if(!this.hidden){
-            this.doFocus.defer(50, this);
+    onDestroy : function(){
+        if(this.textSizeEl){
+            this.textSizeEl.parentNode.removeChild(this.textSizeEl);
         }
+        Roo.form.TextArea.superclass.onDestroy.call(this);
     },
 
-    doFocus : function(){
-        if(!this.hidden){
-            this.focusEl.focus();
+    // private
+    onKeyUp : function(e){
+        if(!e.isNavKeyPress() || e.getKey() == e.ENTER){
+            this.autoSize();
         }
     },
 
     /**
-     * Hides this menu and optionally all parent menus
-     * @param {Boolean} deep (optional) True to hide all parent menus recursively, if any (defaults to false)
+     * 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.
      */
-    hide : function(deep){
-        if(this.el && this.isVisible()){
-            this.fireEvent("beforehide", this);
-            if(this.activeItem){
-                this.activeItem.deactivate();
-                this.activeItem = null;
-            }
-            this.el.hide();
-            this.hidden = true;
-            this.fireEvent("hide", this);
-        }
-        if(deep === true && this.parentMenu){
-            this.parentMenu.hide(true);
+    autoSize : function(){
+        if(!this.grow || !this.textSizeEl){
+            return;
         }
-    },
-
-    /**
-     * Addds one or more items of any type supported by the Menu class, or that can be converted into menu items.
-     * Any of the following are valid:
-     * <ul>
-     * <li>Any menu item object based on {@link Roo.menu.Item}</li>
-     * <li>An HTMLElement object which will be converted to a menu item</li>
-     * <li>A menu item config object that will be created as a new menu item</li>
-     * <li>A string, which can either be '-' or 'separator' to add a menu separator, otherwise
-     * it will be converted into a {@link Roo.menu.TextItem} and added</li>
-     * </ul>
-     * Usage:
-     * <pre><code>
-// Create the menu
-var menu = new Roo.menu.Menu();
+        var el = this.el;
+        var v = el.dom.value;
+        var ts = this.textSizeEl;
 
-// Create a menu item to add by reference
-var menuItem = new Roo.menu.Item({ text: 'New Item!' });
+        ts.innerHTML = '';
+        ts.appendChild(document.createTextNode(v));
+        v = ts.innerHTML;
 
-// Add a bunch of items at once using different methods.
-// Only the last item added will be returned.
-var item = menu.add(
-    menuItem,                // add existing item by ref
-    'Dynamic Item',          // new TextItem
-    '-',                     // new separator
-    { text: 'Config Item' }  // new item by config
-);
-</code></pre>
-     * @param {Mixed} args One or more menu items, menu item configs or other objects that can be converted to menu items
-     * @return {Roo.menu.Item} The menu item that was added, or the last one if multiple items were added
-     */
-    add : function(){
-        var a = arguments, l = a.length, item;
-        for(var i = 0; i < l; i++){
-            var el = a[i];
-            if ((typeof(el) == "object") && el.xtype && el.xns) {
-                el = Roo.factory(el, Roo.menu);
-            }
-            
-            if(el.render){ // some kind of Item
-                item = this.addItem(el);
-            }else if(typeof el == "string"){ // string
-                if(el == "separator" || el == "-"){
-                    item = this.addSeparator();
-                }else{
-                    item = this.addText(el);
-                }
-            }else if(el.tagName || el.el){ // element
-                item = this.addElement(el);
-            }else if(typeof el == "object"){ // must be menu item config?
-                item = this.addMenuItem(el);
+        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;";
         }
-        return item;
-    },
+        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,  {
     /**
-     * Returns this menu's underlying {@link Roo.Element} object
-     * @return {Roo.Element} The element
+     * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field x-form-num-field")
      */
-    getEl : function(){
-        if(!this.el){
-            this.render();
-        }
-        return this.el;
-    },
-
+    fieldClass: "x-form-field x-form-num-field",
     /**
-     * Adds a separator bar to the menu
-     * @return {Roo.menu.Item} The menu item that was added
+     * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
      */
-    addSeparator : function(){
-        return this.addItem(new Roo.menu.Separator());
-    },
-
+    allowDecimals : true,
     /**
-     * Adds an {@link Roo.Element} object to the menu
-     * @param {String/HTMLElement/Roo.Element} el The element or DOM node to add, or its id
-     * @return {Roo.menu.Item} The menu item that was added
+     * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
      */
-    addElement : function(el){
-        return this.addItem(new Roo.menu.BaseItem(el));
-    },
-
+    decimalSeparator : ".",
     /**
-     * Adds an existing object based on {@link Roo.menu.Item} to the menu
-     * @param {Roo.menu.Item} item The menu item to add
-     * @return {Roo.menu.Item} The menu item that was added
+     * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
      */
-    addItem : function(item){
-        this.items.add(item);
-        if(this.ul){
-            var li = document.createElement("li");
-            li.className = "x-menu-list-item";
-            this.ul.dom.appendChild(li);
-            item.render(li, this);
-            this.delayAutoWidth();
-        }
-        return item;
-    },
-
+    decimalPrecision : 2,
     /**
-     * Creates a new {@link Roo.menu.Item} based an the supplied config object and adds it to the menu
-     * @param {Object} config A MenuItem config object
-     * @return {Roo.menu.Item} The menu item that was added
+     * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)
      */
-    addMenuItem : function(config){
-        if(!(config instanceof Roo.menu.Item)){
-            if(typeof config.checked == "boolean"){ // must be check menu item config?
-                config = new Roo.menu.CheckItem(config);
-            }else{
-                config = new Roo.menu.Item(config);
-            }
-        }
-        return this.addItem(config);
-    },
-
+    allowNegative : true,
     /**
-     * Creates a new {@link Roo.menu.TextItem} with the supplied text and adds it to the menu
-     * @param {String} text The text to display in the menu item
-     * @return {Roo.menu.Item} The menu item that was added
+     * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
      */
-    addText : function(text){
-        return this.addItem(new Roo.menu.TextItem({ text : text }));
-    },
-
+    minValue : Number.NEGATIVE_INFINITY,
     /**
-     * Inserts an existing object based on {@link Roo.menu.Item} to the menu at a specified index
-     * @param {Number} index The index in the menu's list of current items where the new item should be inserted
-     * @param {Roo.menu.Item} item The menu item to add
-     * @return {Roo.menu.Item} The menu item that was added
+     * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE)
      */
-    insert : function(index, item){
-        this.items.insert(index, item);
-        if(this.ul){
-            var li = document.createElement("li");
-            li.className = "x-menu-list-item";
-            this.ul.dom.insertBefore(li, this.ul.dom.childNodes[index]);
-            item.render(li, this);
-            this.delayAutoWidth();
-        }
-        return item;
-    },
-
+    maxValue : Number.MAX_VALUE,
     /**
-     * Removes an {@link Roo.menu.Item} from the menu and destroys the object
-     * @param {Roo.menu.Item} item The menu item to remove
+     * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
      */
-    remove : function(item){
-        this.items.removeKey(item.id);
-        item.destroy();
-    },
-
+    minText : "The minimum value for this field is {0}",
     /**
-     * Removes and destroys all items in the menu
+     * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
      */
-    removeAll : function(){
-        var f;
-        while(f = this.items.first()){
-            this.remove(f);
-        }
-    }
-});
+    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",
 
-// MenuNav is a private utility class used internally by the Menu
-Roo.menu.MenuNav = function(menu){
-    Roo.menu.MenuNav.superclass.constructor.call(this, menu.el);
-    this.scope = this.menu = menu;
-};
+    // 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);
+    },
 
-Roo.extend(Roo.menu.MenuNav, Roo.KeyNav, {
-    doRelay : function(e, h){
-        var k = e.getKey();
-        if(!this.menu.activeItem && e.isNavKeyPress() && k != e.SPACE && k != e.RETURN){
-            this.menu.tryActivate(0, 1);
+    // private
+    validateValue : function(value){
+        if(!Roo.form.NumberField.superclass.validateValue.call(this, value)){
             return false;
         }
-        return h.call(this.scope || this, e, this.menu);
+        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;
     },
 
-    up : function(e, m){
-        if(!m.tryActivate(m.items.indexOf(m.activeItem)-1, -1)){
-            m.tryActivate(m.items.length-1, -1);
-        }
+    getValue : function(){
+        return this.fixPrecision(this.parseValue(Roo.form.NumberField.superclass.getValue.call(this)));
     },
 
-    down : function(e, m){
-        if(!m.tryActivate(m.items.indexOf(m.activeItem)+1, 1)){
-            m.tryActivate(0, 1);
-        }
+    // private
+    parseValue : function(value){
+        value = parseFloat(String(value).replace(this.decimalSeparator, "."));
+        return isNaN(value) ? '' : value;
     },
 
-    right : function(e, m){
-        if(m.activeItem){
-            m.activeItem.expandMenu(true);
+    // 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);
     },
 
-    left : function(e, m){
-        m.hide();
-        if(m.parentMenu && m.parentMenu.activeItem){
-            m.parentMenu.activeItem.activate();
-        }
+    setValue : function(v){
+        v = this.fixPrecision(v);
+        Roo.form.NumberField.superclass.setValue.call(this, String(v).replace(".", this.decimalSeparator));
     },
 
-    enter : function(e, m){
-        if(m.activeItem){
-            e.stopPropagation();
-            m.activeItem.onClick(e);
-            m.fireEvent("click", this, m.activeItem);
-            return true;
+    // private
+    decimalPrecisionFcn : function(v){
+        return Math.floor(v);
+    },
+
+    beforeBlur : function(){
+        var v = this.parseValue(this.getRawValue());
+        if(v){
+            this.setValue(v);
         }
     }
 });/*
@@ -19688,388 +17513,391 @@ Roo.extend(Roo.menu.MenuNav, Roo.KeyNav, {
  */
  
 /**
- * @class Roo.menu.MenuMgr
- * Provides a common registry of all menu items on a page so that they can be easily accessed by id.
- * @singleton
- */
-Roo.menu.MenuMgr = function(){
-   var menus, active, groups = {}, attached = false, lastShow = new Date();
-
-   // private - called when first menu is created
-   function init(){
-       menus = {};
-       active = new Roo.util.MixedCollection();
-       Roo.get(document).addKeyListener(27, function(){
-           if(active.length > 0){
-               hideAll();
-           }
-       });
-   }
-
-   // private
-   function hideAll(){
-       if(active && active.length > 0){
-           var c = active.clone();
-           c.each(function(m){
-               m.hide();
-           });
-       }
-   }
-
-   // private
-   function onHide(m){
-       active.remove(m);
-       if(active.length < 1){
-           Roo.get(document).un("mousedown", onMouseDown);
-           attached = false;
-       }
-   }
-
-   // private
-   function onShow(m){
-       var last = active.last();
-       lastShow = new Date();
-       active.add(m);
-       if(!attached){
-           Roo.get(document).on("mousedown", onMouseDown);
-           attached = true;
-       }
-       if(m.parentMenu){
-          m.getEl().setZIndex(parseInt(m.parentMenu.getEl().getStyle("z-index"), 10) + 3);
-          m.parentMenu.activeChild = m;
-       }else if(last && last.isVisible()){
-          m.getEl().setZIndex(parseInt(last.getEl().getStyle("z-index"), 10) + 3);
-       }
-   }
-
-   // private
-   function onBeforeHide(m){
-       if(m.activeChild){
-           m.activeChild.hide();
-       }
-       if(m.autoHideTimer){
-           clearTimeout(m.autoHideTimer);
-           delete m.autoHideTimer;
-       }
-   }
-
-   // private
-   function onBeforeShow(m){
-       var pm = m.parentMenu;
-       if(!pm && !m.allowOtherMenus){
-           hideAll();
-       }else if(pm && pm.activeChild && active != m){
-           pm.activeChild.hide();
-       }
-   }
-
-   // private
-   function onMouseDown(e){
-       if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".x-menu")){
-           hideAll();
-       }
-   }
-
-   // private
-   function onBeforeCheck(mi, state){
-       if(state){
-           var g = groups[mi.group];
-           for(var i = 0, l = g.length; i < l; i++){
-               if(g[i] != mi){
-                   g[i].setChecked(false);
-               }
-           }
-       }
-   }
-
-   return {
-
-       /**
-        * Hides all menus that are currently visible
-        */
-       hideAll : function(){
-            hideAll();  
-       },
-
-       // private
-       register : function(menu){
-           if(!menus){
-               init();
-           }
-           menus[menu.id] = menu;
-           menu.on("beforehide", onBeforeHide);
-           menu.on("hide", onHide);
-           menu.on("beforeshow", onBeforeShow);
-           menu.on("show", onShow);
-           var g = menu.group;
-           if(g && menu.events["checkchange"]){
-               if(!groups[g]){
-                   groups[g] = [];
-               }
-               groups[g].push(menu);
-               menu.on("checkchange", onCheck);
-           }
-       },
-
-        /**
-         * Returns a {@link Roo.menu.Menu} object
-         * @param {String/Object} menu The string menu id, an existing menu object reference, or a Menu config that will
-         * be used to generate and return a new Menu instance.
-         */
-       get : function(menu){
-           if(typeof menu == "string"){ // menu id
-               return menus[menu];
-           }else if(menu.events){  // menu instance
-               return menu;
-           }else if(typeof menu.length == 'number'){ // array of menu items?
-               return new Roo.menu.Menu({items:menu});
-           }else{ // otherwise, must be a config
-               return new Roo.menu.Menu(menu);
-           }
-       },
-
-       // private
-       unregister : function(menu){
-           delete menus[menu.id];
-           menu.un("beforehide", onBeforeHide);
-           menu.un("hide", onHide);
-           menu.un("beforeshow", onBeforeShow);
-           menu.un("show", onShow);
-           var g = menu.group;
-           if(g && menu.events["checkchange"]){
-               groups[g].remove(menu);
-               menu.un("checkchange", onCheck);
-           }
-       },
-
-       // private
-       registerCheckable : function(menuItem){
-           var g = menuItem.group;
-           if(g){
-               if(!groups[g]){
-                   groups[g] = [];
-               }
-               groups[g].push(menuItem);
-               menuItem.on("beforecheckchange", onBeforeCheck);
-           }
-       },
-
-       // private
-       unregisterCheckable : function(menuItem){
-           var g = menuItem.group;
-           if(g){
-               groups[g].remove(menuItem);
-               menuItem.un("beforecheckchange", onBeforeCheck);
-           }
-       }
-   };
-}();/*
- * 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.menu.BaseItem
- * @extends Roo.Component
- * The base class for all items that render into menus.  BaseItem provides default rendering, activated state
- * management and base configuration options shared by all menu components.
- * @constructor
- * Creates a new BaseItem
- * @param {Object} config Configuration options
+ * @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.menu.BaseItem = function(config){
-    Roo.menu.BaseItem.superclass.constructor.call(this, config);
-
-    this.addEvents({
-        /**
-         * @event click
-         * Fires when this item is clicked
-         * @param {Roo.menu.BaseItem} this
-         * @param {Roo.EventObject} e
-         */
-        click: true,
-        /**
-         * @event activate
-         * Fires when this item is activated
-         * @param {Roo.menu.BaseItem} this
-         */
-        activate : true,
+Roo.form.DateField = function(config)
+{
+    Roo.form.DateField.superclass.constructor.call(this, config);
+    
+      this.addEvents({
+         
         /**
-         * @event deactivate
-         * Fires when this item is deactivated
-         * @param {Roo.menu.BaseItem} this
-         */
-        deactivate : true
+         * @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(this.handler){
-        this.on("click", this.handler, this.scope, 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.menu.BaseItem, Roo.Component, {
+Roo.extend(Roo.form.DateField, Roo.form.TriggerField,  {
     /**
-     * @cfg {Function} handler
-     * A function that will handle the click event of this menu item (defaults to undefined)
+     * @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 {Boolean} canActivate True if this item can be visually activated (defaults to false)
+     * @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').
      */
-    canActivate : false,
-    
-     /**
-     * @cfg {Boolean} hidden True to prevent creation of this menu item (defaults to false)
+    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).
      */
-    hidden: false,
-    
+    disabledDays : null,
     /**
-     * @cfg {String} activeClass The CSS class to use when the item becomes activated (defaults to "x-menu-item-active")
+     * @cfg {String} disabledDaysText
+     * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
      */
-    activeClass : "x-menu-item-active",
+    disabledDaysText : "Disabled",
     /**
-     * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to true)
+     * @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"].
      */
-    hideOnClick : true,
+    disabledDates : null,
     /**
-     * @cfg {Number} hideDelay Length of time in milliseconds to wait before hiding after a click (defaults to 100)
+     * @cfg {String} disabledDatesText
+     * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
      */
-    hideDelay : 100,
-
-    // private
-    ctype: "Roo.menu.BaseItem",
-
-    // private
-    actionMode : "container",
+    disabledDatesText : "Disabled",
+	
+	
+	/**
+     * @cfg {Date/String} zeroValue
+     * if the date is less that this number, then the field is rendered as empty
+     * default is 1800
+     */
+	zeroValue : '1800-01-01',
+	
+	
+    /**
+     * @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 {Boolean} 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
-    render : function(container, parentMenu){
-        this.parentMenu = parentMenu;
-        Roo.menu.BaseItem.superclass.render.call(this, container);
-        this.container.menuItemId = this.id;
-    },
-
+    defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "off"},
+    
     // private
-    onRender : function(container, position){
-        this.el = Roo.get(this.el);
-        container.dom.appendChild(this.el.dom);
+    hiddenField: false,
+    
+    onRender : function(ct, position)
+    {
+        Roo.form.DateField.superclass.onRender.call(this, ct, position);
+        if (this.useIso) {
+            //this.el.dom.removeAttribute('name'); 
+            Roo.log("Changing name?");
+            this.el.dom.setAttribute('name', this.name + '____hidden___' ); 
+            this.hiddenField = this.el.insertSibling({ tag:'input', type:'hidden', name: this.name },
+                    'before', true);
+            this.hiddenField.value = this.value ? this.formatDate(this.value, 'Y-m-d') : '';
+            // prevent input submission
+            this.hiddenName = this.name;
+        }
+            
+            
     },
-
+    
     // private
-    onClick : function(e){
-        if(!this.disabled && this.fireEvent("click", this, e) !== false
-                && this.parentMenu.fireEvent("itemclick", this, e) !== false){
-            this.handleClick(e);
-        }else{
-            e.stopEvent();
+    validateValue : function(value)
+    {
+        value = this.formatDate(value);
+        if(!Roo.form.DateField.superclass.validateValue.call(this, value)){
+            Roo.log('super failed');
+            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){
+            Roo.log('parse date failed' + svalue);
+            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;
+            	}
+            }
         }
-    },
-
-    // private
-    activate : function(){
-        if(this.disabled){
+        var fvalue = this.formatDate(value);
+        if(this.ddMatch && this.ddMatch.test(fvalue)){
+            this.markInvalid(String.format(this.disabledDatesText, fvalue));
             return false;
         }
-        var li = this.container;
-        li.addClass(this.activeClass);
-        this.region = li.getRegion().adjust(2, 2, -2, -2);
-        this.fireEvent("activate", this);
         return true;
     },
 
     // private
-    deactivate : function(){
-        this.container.removeClass(this.activeClass);
-        this.fireEvent("deactivate", this);
+    // Provides logic to override the default TriggerField.validateBlur which just returns true
+    validateBlur : function(){
+        return !this.menu || !this.menu.isVisible();
+    },
+    
+    getName: function()
+    {
+        // returns hidden if it's set..
+        if (!this.rendered) {return ''};
+        return !this.hiddenName && this.el.dom.name  ? this.el.dom.name : (this.hiddenName || '');
+        
     },
 
-    // private
-    shouldDeactivate : function(e){
-        return !this.region || !this.region.contains(e.getPoint());
+    /**
+     * 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)) || "";
     },
 
-    // private
-    handleClick : function(e){
-        if(this.hideOnClick){
-            this.parentMenu.hide.defer(this.hideDelay, this.parentMenu, [true]);
+    /**
+     * 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)));
+        // make sure the value field is always stored as a date..
+        this.value = this.parseDate(date);
+        
+        
     },
 
     // private
-    expandMenu : function(autoActivate){
-        // do nothing
+    parseDate : function(value){
+		
+		if (value instanceof Date) {
+			if (value < Date.parseDate(this.zeroValue, 'Y-m-d') ) {
+				return  '';
+			}
+			return value;
+		}
+		
+		
+        if(!value || value instanceof Date){
+            return value;
+        }
+        var v = Date.parseDate(value, this.format);
+         if (!v && this.useIso) {
+            v = Date.parseDate(value, 'Y-m-d');
+        }
+        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]);
+            }
+        }
+		if (v < Date.parseDate(this.zeroValue, 'Y-m-d') ) {
+			v = '';
+		}
+        return v;
     },
 
     // private
-    hideMenu : function(){
-        // do nothing
-    }
-});/*
- * 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.menu.Adapter
- * @extends Roo.menu.BaseItem
- * A base utility class that adapts a non-menu component so that it can be wrapped by a menu item and added to a menu.
- * It provides basic rendering, activation management and enable/disable logic required to work in menus.
- * @constructor
- * Creates a new Adapter
- * @param {Object} config Configuration options
- */
-Roo.menu.Adapter = function(component, config){
-    Roo.menu.Adapter.superclass.constructor.call(this, config);
-    this.component = component;
-};
-Roo.extend(Roo.menu.Adapter, Roo.menu.BaseItem, {
-    // private
-    canActivate : true,
+    formatDate : function(date, fmt){
+        return (!date || !(date instanceof Date)) ?
+               date : date.dateFormat(fmt || this.format);
+    },
 
     // private
-    onRender : function(container, position){
-        this.component.render(container);
-        this.el = this.component.getEl();
+    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
-    activate : function(){
+    // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
+    onTriggerClick : function(){
         if(this.disabled){
-            return false;
+            return;
         }
-        this.component.focus();
-        this.fireEvent("activate", this);
-        return true;
+        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.useIso ? 'Y-m-d' : 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?");
     },
 
-    // private
-    deactivate : function(){
-        this.fireEvent("deactivate", this);
+    beforeBlur : function(){
+        var v = this.parseDate(this.getRawValue());
+        if(v){
+            this.setValue(v);
+        }
     },
 
-    // private
-    disable : function(){
-        this.component.disable();
-        Roo.menu.Adapter.superclass.disable.call(this);
+    /*@
+     * overide
+     * 
+     */
+    isDirty : function() {
+        if(this.disabled) {
+            return false;
+        }
+        
+        if(typeof(this.startValue) === 'undefined'){
+            return false;
+        }
+        
+        return String(this.getValue()) !== String(this.startValue);
+        
     },
-
-    // private
-    enable : function(){
-        this.component.enable();
-        Roo.menu.Adapter.superclass.enable.call(this);
+    // @overide
+    cleanLeadingSpace : function(e)
+    {
+       return;
     }
+    
 });/*
  * Based on:
  * Ext JS Library 1.1.1
@@ -20080,267 +17908,402 @@ Roo.extend(Roo.menu.Adapter, Roo.menu.BaseItem, {
  * Fork - LGPL
  * <script type="text/javascript">
  */
-
+ 
 /**
- * @class Roo.menu.TextItem
- * @extends Roo.menu.BaseItem
- * Adds a static text string to a menu, usually used as either a heading or group separator.
- * Note: old style constructor with text is still supported.
- * 
- * @constructor
- * Creates a new TextItem
- * @param {Object} cfg Configuration
+ * @class Roo.form.MonthField
+ * @extends Roo.form.TriggerField
+ * Provides a date input field with a {@link Roo.DatePicker} dropdown and automatic date validation.
+* @constructor
+* Create a new MonthField
+* @param {Object} config
  */
-Roo.menu.TextItem = function(cfg){
-    if (typeof(cfg) == 'string') {
-        this.text = cfg;
-    } else {
-        Roo.apply(this,cfg);
-    }
+Roo.form.MonthField = function(config){
     
-    Roo.menu.TextItem.superclass.constructor.call(this);
+    Roo.form.MonthField.superclass.constructor.call(this, config);
+    
+      this.addEvents({
+         
+        /**
+         * @event select
+         * Fires when a date is selected
+	     * @param {Roo.form.MonthFieeld} 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.menu.TextItem, Roo.menu.BaseItem, {
+Roo.extend(Roo.form.MonthField, Roo.form.TriggerField,  {
     /**
-     * @cfg {Boolean} text Text to show on item.
+     * @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').
      */
-    text : '',
-    
+    format : "M Y",
     /**
-     * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
+     * @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').
      */
-    hideOnClick : false,
+    altFormats : "M Y|m/Y|m-y|m-Y|my|mY",
     /**
-     * @cfg {String} itemCls The default CSS class to use for text items (defaults to "x-menu-text")
+     * @cfg {Array} disabledDays
+     * An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
      */
-    itemCls : "x-menu-text",
-
-    // private
-    onRender : function(){
-        var s = document.createElement("span");
-        s.className = this.itemCls;
-        s.innerHTML = this.text;
-        this.el = s;
-        Roo.menu.TextItem.superclass.onRender.apply(this, arguments);
-    }
-});/*
- * 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.menu.Separator
- * @extends Roo.menu.BaseItem
- * Adds a separator bar to a menu, used to divide logical groups of menu items. Generally you will
- * add one of these by using "-" in you call to add() or in your items config rather than creating one directly.
- * @constructor
- * @param {Object} config Configuration options
- */
-Roo.menu.Separator = function(config){
-    Roo.menu.Separator.superclass.constructor.call(this, config);
-};
-
-Roo.extend(Roo.menu.Separator, Roo.menu.BaseItem, {
+    disabledDays : [0,1,2,3,4,5,6],
     /**
-     * @cfg {String} itemCls The default CSS class to use for separators (defaults to "x-menu-sep")
+     * @cfg {String} disabledDaysText
+     * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
      */
-    itemCls : "x-menu-sep",
+    disabledDaysText : "Disabled",
     /**
-     * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
+     * @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"].
      */
-    hideOnClick : false,
-
-    // private
-    onRender : function(li){
-        var s = document.createElement("span");
-        s.className = this.itemCls;
-        s.innerHTML = "&#160;";
-        this.el = s;
-        li.addClass("x-menu-sep-li");
-        Roo.menu.Separator.superclass.onRender.apply(this, arguments);
-    }
-});/*
- * 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.menu.Item
- * @extends Roo.menu.BaseItem
- * A base class for all menu items that require menu-related functionality (like sub-menus) and are not static
- * display items.  Item extends the base functionality of {@link Roo.menu.BaseItem} by adding menu-specific
- * activation and click handling.
- * @constructor
- * Creates a new Item
- * @param {Object} config Configuration options
- */
-Roo.menu.Item = function(config){
-    Roo.menu.Item.superclass.constructor.call(this, config);
-    if(this.menu){
-        this.menu = Roo.menu.MenuMgr.get(this.menu);
-    }
-};
-Roo.extend(Roo.menu.Item, Roo.menu.BaseItem, {
-    
+    disabledDates : null,
     /**
-     * @cfg {String} text
-     * The text to show on the menu item.
+     * @cfg {String} disabledDatesText
+     * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
      */
-    text: '',
-     /**
-     * @cfg {String} HTML to render in menu
-     * The text to show on the menu item (HTML version).
+    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).
      */
-    html: '',
+    minValue : null,
     /**
-     * @cfg {String} icon
-     * The path to an icon to display in this menu item (defaults to Roo.BLANK_IMAGE_URL)
+     * @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).
      */
-    icon: undefined,
+    maxValue : null,
     /**
-     * @cfg {String} itemCls The default CSS class to use for menu items (defaults to "x-menu-item")
+     * @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}').
      */
-    itemCls : "x-menu-item",
+    minText : "The date in this field must be equal to or after {0}",
     /**
-     * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to true)
+     * @cfg {String} maxTextf
+     * 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}').
      */
-    canActivate : true,
+    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 {Boolean} useIso
+     * if enabled, then the date field will use a hidden field to store the 
+     * real value as iso formated date. default (true)
+     */ 
+    useIso : true,
+    /**
+     * @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: "new-password"},
+    
+    // private
+    hiddenField: false,
+    
+    hideMonthPicker : false,
+    
+    onRender : function(ct, position)
+    {
+        Roo.form.MonthField.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.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.MonthField.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();
+    },
+
     /**
-     * @cfg {Number} showDelay Length of time in milliseconds to wait before showing this item (defaults to 200)
+     * Returns the current date value of the date field.
+     * @return {Date} The date value
      */
-    showDelay: 200,
-    // doc'd in BaseItem
-    hideDelay: 200,
-
-    // private
-    ctype: "Roo.menu.Item",
-    
-    // private
-    onRender : function(container, position){
-        var el = document.createElement("a");
-        el.hideFocus = true;
-        el.unselectable = "on";
-        el.href = this.href || "#";
-        if(this.hrefTarget){
-            el.target = this.hrefTarget;
-        }
-        el.className = this.itemCls + (this.menu ?  " x-menu-item-arrow" : "") + (this.cls ?  " " + this.cls : "");
+    getValue : function(){
         
-        var html = this.html.length ? this.html  : String.format('{0}',this.text);
         
-        el.innerHTML = String.format(
-                '<img src="{0}" class="x-menu-item-icon {1}" />' + html,
-                this.icon || Roo.BLANK_IMAGE_URL, this.iconCls || '');
-        this.el = el;
-        Roo.menu.Item.superclass.onRender.call(this, container, position);
+        
+        return  this.hiddenField ?
+                this.hiddenField.value :
+                this.parseDate(Roo.form.MonthField.superclass.getValue.call(this)) || "";
     },
 
     /**
-     * Sets the text to display in this menu item
-     * @param {String} text The text to display
-     * @param {Boolean} isHTML true to indicate text is pure html.
+     * 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 MonthField.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');
+monthField.setValue(dt);
+
+//Pass a date string (default format):
+monthField.setValue('5/4/06');
+
+//Pass a date string (custom format):
+monthField.format = 'Y-m-d';
+monthField.setValue('2006-5-4');
+</code></pre>
+     * @param {String/Date} date The date or valid date string
      */
-    setText : function(text, isHTML){
-        if (isHTML) {
-            this.html = text;
-        } else {
-            this.text = text;
-            this.html = '';
-        }
-        if(this.rendered){
-            var html = this.html.length ? this.html  : String.format('{0}',this.text);
-     
-            this.el.update(String.format(
-                '<img src="{0}" class="x-menu-item-icon {2}">' + html,
-                this.icon || Roo.BLANK_IMAGE_URL, this.text, this.iconCls || ''));
-            this.parentMenu.autoWidth();
+    setValue : function(date){
+        Roo.log('month setValue' + date);
+        // can only be first of month..
+        
+        var val = this.parseDate(date);
+        
+        if (this.hiddenField) {
+            this.hiddenField.value = this.formatDate(this.parseDate(date), 'Y-m-d');
         }
+        Roo.form.MonthField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
+        this.value = this.parseDate(date);
     },
 
     // private
-    handleClick : function(e){
-        if(!this.href){ // if no link defined, stop the event automatically
-            e.stopEvent();
+    parseDate : function(value){
+        if(!value || value instanceof Date){
+            value = value ? Date.parseDate(value.format('Y-m') + '-01', 'Y-m-d') : null;
+            return value;
         }
-        Roo.menu.Item.superclass.handleClick.apply(this, arguments);
-    },
-
-    // private
-    activate : function(autoExpand){
-        if(Roo.menu.Item.superclass.activate.apply(this, arguments)){
-            this.focus();
-            if(autoExpand){
-                this.expandMenu();
-            }
+        var v = Date.parseDate(value, this.format);
+        if (!v && this.useIso) {
+            v = Date.parseDate(value, 'Y-m-d');
         }
-        return true;
-    },
-
-    // private
-    shouldDeactivate : function(e){
-        if(Roo.menu.Item.superclass.shouldDeactivate.call(this, e)){
-            if(this.menu && this.menu.isVisible()){
-                return !this.menu.getEl().getRegion().contains(e.getPoint());
+        if (v) {
+            // 
+            v = Date.parseDate(v.format('Y-m') +'-01', 'Y-m-d');
+        }
+        
+        
+        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 true;
         }
-        return false;
+        return v;
     },
 
     // private
-    deactivate : function(){
-        Roo.menu.Item.superclass.deactivate.apply(this, arguments);
-        this.hideMenu();
+    formatDate : function(date, fmt){
+        return (!date || !(date instanceof Date)) ?
+               date : date.dateFormat(fmt || this.format);
     },
 
     // private
-    expandMenu : function(autoActivate){
-        if(!this.disabled && this.menu){
-            clearTimeout(this.hideTimer);
-            delete this.hideTimer;
-            if(!this.menu.isVisible() && !this.showTimer){
-                this.showTimer = this.deferExpand.defer(this.showDelay, this, [autoActivate]);
-            }else if (this.menu.isVisible() && autoActivate){
-                this.menu.tryActivate(0, 1);
-            }
+    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
-    deferExpand : function(autoActivate){
-        delete this.showTimer;
-        this.menu.show(this.container, this.parentMenu.subMenuAlign || "tl-tr?", this.parentMenu);
-        if(autoActivate){
-            this.menu.tryActivate(0, 1);
+    // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
+    onTriggerClick : function(){
+        if(this.disabled){
+            return;
         }
-    },
-
-    // private
-    hideMenu : function(){
-        clearTimeout(this.showTimer);
-        delete this.showTimer;
-        if(!this.hideTimer && this.menu && this.menu.isVisible()){
-            this.hideTimer = this.deferHide.defer(this.hideDelay, this);
+        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,
+            
+            format : this.useIso ? 'Y-m-d' : 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
+        }));
+       
+        
+        var m = this.menu;
+        var p = m.picker;
+        
+        // hide month picker get's called when we called by 'before hide';
+        
+        var ignorehide = true;
+        p.hideMonthPicker  = function(disableAnim){
+            if (ignorehide) {
+                return;
+            }
+             if(this.monthPicker){
+                Roo.log("hideMonthPicker called");
+                if(disableAnim === true){
+                    this.monthPicker.hide();
+                }else{
+                    this.monthPicker.slideOut('t', {duration:.2});
+                    p.setValue(new Date(m.picker.mpSelYear, m.picker.mpSelMonth, 1));
+                    p.fireEvent("select", this, this.value);
+                    m.hide();
+                }
+            }
         }
+        
+        Roo.log('picker set value');
+        Roo.log(this.getValue());
+        p.setValue(this.getValue() ? this.parseDate(this.getValue()) : new Date());
+        m.show(this.el, 'tl-bl?');
+        ignorehide  = false;
+        // this will trigger hideMonthPicker..
+        
+        
+        // hidden the day picker
+        Roo.select('.x-date-picker table', true).first().dom.style.visibility = "hidden";
+        
+        
+        
+      
+        
+        p.showMonthPicker.defer(100, p);
+    
+        
+       
     },
 
-    // private
-    deferHide : function(){
-        delete this.hideTimer;
-        this.menu.hide();
+    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
@@ -20352,1743 +18315,2002 @@ Roo.extend(Roo.menu.Item, Roo.menu.BaseItem, {
  * <script type="text/javascript">
  */
  
+
 /**
- * @class Roo.menu.CheckItem
- * @extends Roo.menu.Item
- * Adds a menu item that contains a checkbox by default, but can also be part of a radio group.
+ * @class Roo.form.ComboBox
+ * @extends Roo.form.TriggerField
+ * A combobox control with support for autocomplete, remote-loading, paging and many other features.
  * @constructor
- * Creates a new CheckItem
+ * Create a new ComboBox.
  * @param {Object} config Configuration options
  */
-Roo.menu.CheckItem = function(config){
-    Roo.menu.CheckItem.superclass.constructor.call(this, config);
+Roo.form.ComboBox = function(config){
+    Roo.form.ComboBox.superclass.constructor.call(this, config);
     this.addEvents({
         /**
-         * @event beforecheckchange
-         * Fires before the checked value is set, providing an opportunity to cancel if needed
-         * @param {Roo.menu.CheckItem} this
-         * @param {Boolean} checked The new checked value that will be set
-         */
-        "beforecheckchange" : true,
+         * @event expand
+         * Fires when the dropdown list is expanded
+	     * @param {Roo.form.ComboBox} combo This combo box
+	     */
+        'expand' : true,
         /**
-         * @event checkchange
-         * Fires after the checked value has been set
-         * @param {Roo.menu.CheckItem} this
-         * @param {Boolean} checked The checked value that was set
-         */
-        "checkchange" : 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.checkHandler){
-        this.on('checkchange', this.checkHandler, this.scope);
-    }
-};
-Roo.extend(Roo.menu.CheckItem, Roo.menu.Item, {
-    /**
-     * @cfg {String} group
-     * All check items with the same group name will automatically be grouped into a single-select
-     * radio button group (defaults to '')
-     */
-    /**
-     * @cfg {String} itemCls The default CSS class to use for check items (defaults to "x-menu-item x-menu-check-item")
-     */
-    itemCls : "x-menu-item x-menu-check-item",
-    /**
-     * @cfg {String} groupClass The default CSS class to use for radio group check items (defaults to "x-menu-group-item")
-     */
-    groupClass : "x-menu-group-item",
-
-    /**
-     * @cfg {Boolean} checked True to initialize this checkbox as checked (defaults to false).  Note that
-     * if this checkbox is part of a radio group (group = true) only the last item in the group that is
-     * initialized with checked = true will be rendered as checked.
-     */
-    checked: false,
-
-    // private
-    ctype: "Roo.menu.CheckItem",
-
-    // private
-    onRender : function(c){
-        Roo.menu.CheckItem.superclass.onRender.apply(this, arguments);
-        if(this.group){
-            this.el.addClass(this.groupClass);
-        }
-        Roo.menu.MenuMgr.registerCheckable(this);
-        if(this.checked){
-            this.checked = false;
-            this.setChecked(true, true);
-        }
-    },
-
-    // private
-    destroy : function(){
-        if(this.rendered){
-            Roo.menu.MenuMgr.unregisterCheckable(this);
+    if(this.transform){
+        this.allowDomMove = false;
+        var s = Roo.getDom(this.transform);
+        if(!this.hiddenName){
+            this.hiddenName = s.name;
         }
-        Roo.menu.CheckItem.superclass.destroy.apply(this, arguments);
-    },
-
-    /**
-     * Set the checked state of this item
-     * @param {Boolean} checked The new checked value
-     * @param {Boolean} suppressEvent (optional) True to prevent the checkchange event from firing (defaults to false)
-     */
-    setChecked : function(state, suppressEvent){
-        if(this.checked != state && this.fireEvent("beforecheckchange", this, state) !== false){
-            if(this.container){
-                this.container[state ? "addClass" : "removeClass"]("x-menu-item-checked");
-            }
-            this.checked = state;
-            if(suppressEvent !== true){
-                this.fireEvent("checkchange", this, state);
+        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
         }
-    },
 
-    // private
-    handleClick : function(e){
-       if(!this.disabled && !(this.checked && this.group)){// disable unselect on radio item
-           this.setChecked(!this.checked);
-       }
-       Roo.menu.CheckItem.superclass.handleClick.apply(this, arguments);
     }
-});/*
- * 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.menu.DateItem
- * @extends Roo.menu.Adapter
- * A menu item that wraps the {@link Roo.DatPicker} component.
- * @constructor
- * Creates a new DateItem
- * @param {Object} config Configuration options
- */
-Roo.menu.DateItem = function(config){
-    Roo.menu.DateItem.superclass.constructor.call(this, new Roo.DatePicker(config), config);
-    /** The Roo.DatePicker object @type Roo.DatePicker */
-    this.picker = this.component;
-    this.addEvents({select: true});
-    
-    this.picker.on("render", function(picker){
-        picker.getEl().swallowEvent("click");
-        picker.container.addClass("x-menu-date-item");
-    });
-
-    this.picker.on("select", this.onSelect, this);
-};
-
-Roo.extend(Roo.menu.DateItem, Roo.menu.Adapter, {
-    // private
-    onSelect : function(picker, date){
-        this.fireEvent("select", this, date, picker);
-        Roo.menu.DateItem.superclass.handleClick.call(this);
+    if (this.store) {
+        this.store = Roo.factory(this.store, Roo.data);
     }
-});/*
- * 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.menu.ColorItem
- * @extends Roo.menu.Adapter
- * A menu item that wraps the {@link Roo.ColorPalette} component.
- * @constructor
- * Creates a new ColorItem
- * @param {Object} config Configuration options
- */
-Roo.menu.ColorItem = function(config){
-    Roo.menu.ColorItem.superclass.constructor.call(this, new Roo.ColorPalette(config), config);
-    /** The Roo.ColorPalette object @type Roo.ColorPalette */
-    this.palette = this.component;
-    this.relayEvents(this.palette, ["select"]);
-    if(this.selectHandler){
-        this.on('select', this.selectHandler, this.scope);
+    
+    this.selectedIndex = -1;
+    if(this.mode == 'local'){
+        if(config.queryDelay === undefined){
+            this.queryDelay = 10;
+        }
+        if(config.minChars === undefined){
+            this.minChars = 0;
+        }
     }
-};
-Roo.extend(Roo.menu.ColorItem, Roo.menu.Adapter);/*
- * 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.menu.DateMenu
- * @extends Roo.menu.Menu
- * A menu containing a {@link Roo.menu.DateItem} component (which provides a date picker).
- * @constructor
- * Creates a new DateMenu
- * @param {Object} config Configuration options
- */
-Roo.menu.DateMenu = function(config){
-    Roo.menu.DateMenu.superclass.constructor.call(this, config);
-    this.plain = true;
-    var di = new Roo.menu.DateItem(config);
-    this.add(di);
+Roo.extend(Roo.form.ComboBox, Roo.form.TriggerField, {
     /**
-     * The {@link Roo.DatePicker} instance for this DateMenu
-     * @type DatePicker
+     * @cfg {String/HTMLElement/Element} transform The id, DOM node or element of an existing select to convert to a ComboBox
      */
-    this.picker = di.picker;
     /**
-     * @event select
-     * @param {DatePicker} picker
-     * @param {Date} date
+     * @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)
      */
-    this.relayEvents(di, ["select"]);
-    this.on('beforeshow', function(){
-        if(this.picker){
-            this.picker.hideMonthPicker(false);
-        }
-    }, this);
-};
-Roo.extend(Roo.menu.DateMenu, Roo.menu.Menu, {
-    cls:'x-date-menu'
-});/*
- * 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.menu.ColorMenu
- * @extends Roo.menu.Menu
- * A menu containing a {@link Roo.menu.ColorItem} component (which provides a basic color picker).
- * @constructor
- * Creates a new ColorMenu
- * @param {Object} config Configuration options
- */
-Roo.menu.ColorMenu = function(config){
-    Roo.menu.ColorMenu.superclass.constructor.call(this, config);
-    this.plain = true;
-    var ci = new Roo.menu.ColorItem(config);
-    this.add(ci);
     /**
-     * The {@link Roo.ColorPalette} instance for this ColorMenu
-     * @type ColorPalette
+     * @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"})
      */
-    this.palette = ci.palette;
     /**
-     * @event select
-     * @param {ColorPalette} palette
-     * @param {String} color
+     * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
      */
-    this.relayEvents(ci, ["select"]);
-};
-Roo.extend(Roo.menu.ColorMenu, Roo.menu.Menu);/*
- * 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.Field
- * @extends Roo.BoxComponent
- * Base class for form fields that provides default event handling, sizing, value handling and other functionality.
- * @constructor
- * Creates a new Field
- * @param {Object} config Configuration options
- */
-Roo.form.Field = function(config){
-    Roo.form.Field.superclass.constructor.call(this, config);
-};
-
-Roo.extend(Roo.form.Field, Roo.BoxComponent,  {
     /**
-     * @cfg {String} fieldLabel Label to use when rendering a form.
+     * @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} qtip Mouse over tip
+
+     /**
+     * @cfg {String/Roo.Template} tpl The template to use to render the output
      */
      
+    // private
+    defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},
     /**
-     * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
+     * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
      */
-    invalidClass : "x-form-invalid",
+    listWidth: undefined,
     /**
-     * @cfg {String} invalidText The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
+     * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
+     * mode = 'remote' or 'text' if mode = 'local')
      */
-    invalidText : "The value in this field is invalid",
+    displayField: undefined,
     /**
-     * @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to "x-form-focus")
+     * @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.
      */
-    focusClass : "x-form-focus",
+    valueField: undefined,
+    
+    
     /**
-     * @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable
-      automatic validation (defaults to "keyup").
+     * @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)
      */
-    validationEvent : "keyup",
+    hiddenName: undefined,
     /**
-     * @cfg {Boolean} validateOnBlur Whether the field should validate when it loses focus (defaults to true).
+     * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
      */
-    validateOnBlur : true,
+    listClass: '',
     /**
-     * @cfg {Number} validationDelay The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
+     * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
      */
-    validationDelay : 250,
+    selectedClass: 'x-combo-selected',
     /**
-     * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
-     * {tag: "input", type: "text", size: "20", autocomplete: "off"})
+     * @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).
      */
-    defaultAutoCreate : {tag: "input", type: "text", size: "20", autocomplete: "new-password"},
+    triggerClass : 'x-form-arrow-trigger',
     /**
-     * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field")
+     * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
      */
-    fieldClass : "x-form-field",
+    shadow:'sides',
     /**
-     * @cfg {String} msgTarget The location where error text should display.  Should be one of the following values (defaults to 'qtip'):
-     *<pre>
-Value         Description
------------   ----------------------------------------------------------------------
-qtip          Display a quick tip when the user hovers over the field
-title         Display a default browser title attribute popup
-under         Add a block div beneath the field containing the error text
-side          Add an error icon to the right of the field with a popup on hover
-[element id]  Add the error text directly to the innerHTML of the specified element
-</pre>
+     * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
+     * anchor positions (defaults to 'tl-bl')
      */
-    msgTarget : 'qtip',
+    listAlign: 'tl-bl?',
     /**
-     * @cfg {String} msgFx <b>Experimental</b> The effect used when displaying a validation message under the field (defaults to 'normal').
+     * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
      */
-    msgFx : 'normal',
-
+    maxHeight: 300,
     /**
-     * @cfg {Boolean} readOnly True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.
+     * @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')
      */
-    readOnly : false,
-
+    triggerAction: 'query',
     /**
-     * @cfg {Boolean} disabled True to disable the field (defaults to false).
+     * @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)
      */
-    disabled : false,
-
+    minChars : 4,
     /**
-     * @cfg {String} inputType The type attribute for input fields -- e.g. radio, text, password (defaults to "text").
+     * @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)
      */
-    inputType : undefined,
-    
+    typeAhead: false,
     /**
-     * @cfg {Number} tabIndex The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
-	 */
-	tabIndex : undefined,
-	
-    // private
-    isFormField : true,
-
-    // private
-    hasFocus : 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,
     /**
-     * @property {Roo.Element} fieldEl
-     * Element Containing the rendered Field (with label etc.)
+     * @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 {Mixed} value A value to initialize this field with.
+     * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus.  Only applies
+     * when editable = true (defaults to false)
      */
-    value : undefined,
-
+    selectOnFocus:false,
     /**
-     * @cfg {String} name The field's HTML name attribute.
+     * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
      */
+    queryParam: 'query',
     /**
-     * @cfg {String} cls A CSS class to apply to the field's underlying element.
+     * @cfg {String} loadingText The text to display in the dropdown list while data is loading.  Only applies
+     * when mode = 'remote' (defaults to 'Loading...')
      */
-    // private
-    loadedValue : false,
-     
+    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,
+    
+    // element that contains real text value.. (when hidden is used..)
      
-	// private ??
-	initComponent : function(){
-        Roo.form.Field.superclass.initComponent.call(this);
-        this.addEvents({
-            /**
-             * @event focus
-             * Fires when this field receives input focus.
-             * @param {Roo.form.Field} this
-             */
-            focus : true,
-            /**
-             * @event blur
-             * Fires when this field loses input focus.
-             * @param {Roo.form.Field} this
-             */
-            blur : true,
-            /**
-             * @event specialkey
-             * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check
-             * {@link Roo.EventObject#getKey} to determine which key was pressed.
-             * @param {Roo.form.Field} this
-             * @param {Roo.EventObject} e The event object
-             */
-            specialkey : true,
-            /**
-             * @event change
-             * Fires just before the field blurs if the field value has changed.
-             * @param {Roo.form.Field} this
-             * @param {Mixed} newValue The new value
-             * @param {Mixed} oldValue The original value
-             */
-            change : true,
-            /**
-             * @event invalid
-             * Fires after the field has been marked as invalid.
-             * @param {Roo.form.Field} this
-             * @param {String} msg The validation message
-             */
-            invalid : true,
-            /**
-             * @event valid
-             * Fires after the field has been validated with no errors.
-             * @param {Roo.form.Field} this
-             */
-            valid : true,
-             /**
-             * @event keyup
-             * Fires after the key up
-             * @param {Roo.form.Field} this
-             * @param {Roo.EventObject}  e The event Object
-             */
-            keyup : true
+    // 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
         });
-    },
 
-    /**
-     * Returns the name attribute of the field if available
-     * @return {String} name The field name
-     */
-    getName: function(){
-         return this.rendered && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
-    },
+        var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
+        this.list.setWidth(lw);
+        this.list.swallowEvent('mousewheel');
+        this.assetHeight = 0;
 
-    // private
-    onRender : function(ct, position){
-        Roo.form.Field.superclass.onRender.call(this, ct, position);
-        if(!this.el){
-            var cfg = this.getAutoCreate();
-            if(!cfg.name){
-                cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
-            }
-            if (!cfg.name.length) {
-                delete cfg.name;
-            }
-            if(this.inputType){
-                cfg.type = this.inputType;
-            }
-            this.el = ct.createChild(cfg, position);
+        if(this.title){
+            this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
+            this.assetHeight += this.header.getHeight();
         }
-        var type = this.el.dom.type;
-        if(type){
-            if(type == 'password'){
-                type = 'text';
-            }
-            this.el.addClass('x-form-'+type);
+
+        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.readOnly){
-            this.el.dom.readOnly = true;
+        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.tabIndex !== undefined){
-            this.el.dom.setAttribute('tabIndex', this.tabIndex);
+        
+        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();
         }
+        
 
-        this.el.addClass([this.fieldClass, this.cls]);
-        this.initValue();
-    },
+        if(!this.tpl){
+            this.tpl = '<div class="'+cls+'-item">{' + this.displayField + '}</div>';
+        }
 
-    /**
-     * Apply the behaviors of this component to an existing element. <b>This is used instead of render().</b>
-     * @param {String/HTMLElement/Element} el The id of the node, a DOM node or an existing Element
-     * @return {Roo.form.Field} this
-     */
-    applyTo : function(target){
-        this.allowDomMove = false;
-        this.el = Roo.get(target);
-        this.render(this.el.dom.parentNode);
-        return this;
-    },
+        this.view = new Roo.View(this.innerList, this.tpl, {
+            singleSelect:true,
+	    store: this.store,
+	    selectedClass: this.selectedClass
+        });
 
-    // private
-    initValue : function(){
-        if(this.value !== undefined){
-            this.setValue(this.value);
-        }else if(this.el.dom.value.length > 0){
-            this.setValue(this.el.dom.value);
-        }
-    },
+        this.view.on('click', this.onViewClick, this);
 
-    /**
-     * Returns true if this field has been changed since it was originally loaded and is not disabled.
-     * DEPRICATED  - it never worked well - use hasChanged/resetHasChanged.
-     */
-    isDirty : function() {
-        if(this.disabled) {
-            return false;
-        }
-        return String(this.getValue()) !== String(this.originalValue);
-    },
+        this.store.on('beforeload', this.onBeforeLoad, this);
+        this.store.on('load', this.onLoad, this);
+        this.store.on('loadexception', this.onLoadException, this);
 
-    /**
-     * stores the current value in loadedValue
-     */
-    resetHasChanged : function()
-    {
-        this.loadedValue = String(this.getValue());
-    },
-    /**
-     * checks the current value against the 'loaded' value.
-     * Note - will return false if 'resetHasChanged' has not been called first.
-     */
-    hasChanged : function()
-    {
-        if(this.disabled || this.readOnly) {
-            return false;
+        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);
         }
-        return this.loadedValue !== false && String(this.getValue()) !== this.loadedValue;
-    },
-    
-    
-    
-    // private
-    afterRender : function(){
-        Roo.form.Field.superclass.afterRender.call(this);
-        this.initEvents();
+        
+        
+        
     },
 
     // private
-    fireKey : function(e){
-        //Roo.log('field ' + e.getKey());
-        if(e.isNavKeyPress()){
-            this.fireEvent("specialkey", this, e);
-        }
-    },
+    initEvents : function(){
+        Roo.form.ComboBox.superclass.initEvents.call(this);
 
-    /**
-     * Resets the current field value to the originally loaded value and clears any validation messages
-     */
-    reset : function(){
-        this.setValue(this.resetValue);
-        this.clearInvalid();
-    },
+        this.keyNav = new Roo.KeyNav(this.el, {
+            "up" : function(e){
+                this.inKeyMode = true;
+                this.selectPrev();
+            },
 
-    // private
-    initEvents : function(){
-        // safari killled keypress - so keydown is now used..
-        this.el.on("keydown" , this.fireKey,  this);
-        this.el.on("focus", this.onFocus,  this);
-        this.el.on("blur", this.onBlur,  this);
-        this.el.relayEvent('keyup', this);
+            "down" : function(e){
+                if(!this.isExpanded()){
+                    this.onTriggerClick();
+                }else{
+                    this.inKeyMode = true;
+                    this.selectNext();
+                }
+            },
 
-        // reference to original value for reset
-        this.originalValue = this.getValue();
-        this.resetValue =  this.getValue();
-    },
+            "enter" : function(e){
+                this.onViewClick();
+                //return true;
+            },
 
-    // private
-    onFocus : function(){
-        if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
-            this.el.addClass(this.focusClass);
-        }
-        if(!this.hasFocus){
-            this.hasFocus = true;
-            this.startValue = this.getValue();
-            this.fireEvent("focus", this);
-        }
-    },
+            "esc" : function(e){
+                this.collapse();
+            },
 
-    beforeBlur : Roo.emptyFn,
+            "tab" : function(e){
+                this.onViewClick(false);
+                this.fireEvent("specialkey", this, e);
+                return true;
+            },
 
-    // private
-    onBlur : function(){
-        this.beforeBlur();
-        if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
-            this.el.removeClass(this.focusClass);
+            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);
         }
-        this.hasFocus = false;
-        if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){
-            this.validate();
+        if(this.editable !== false){
+            this.el.on("keyup", this.onKeyUp, this);
         }
-        var v = this.getValue();
-        if(String(v) !== String(this.startValue)){
-            this.fireEvent('change', this, v, this.startValue);
+        if(this.forceSelection){
+            this.on('blur', this.doForce, this);
         }
-        this.fireEvent("blur", this);
     },
 
-    /**
-     * Returns whether or not the field value is currently valid
-     * @param {Boolean} preventMark True to disable marking the field invalid
-     * @return {Boolean} True if the value is valid, else false
-     */
-    isValid : function(preventMark){
-        if(this.disabled){
-            return true;
+    onDestroy : function(){
+        if(this.view){
+            this.view.setStore(null);
+            this.view.el.removeAllListeners();
+            this.view.el.remove();
+            this.view.purgeListeners();
         }
-        var restore = this.preventMark;
-        this.preventMark = preventMark === true;
-        var v = this.validateValue(this.processValue(this.getRawValue()));
-        this.preventMark = restore;
-        return v;
-    },
-
-    /**
-     * Validates the field value
-     * @return {Boolean} True if the value is valid, else false
-     */
-    validate : function(){
-        if(this.disabled || this.validateValue(this.processValue(this.getRawValue()))){
-            this.clearInvalid();
-            return true;
+        if(this.list){
+            this.list.destroy();
         }
-        return false;
-    },
-
-    processValue : function(value){
-        return value;
+        if(this.store){
+            this.store.un('beforeload', this.onBeforeLoad, this);
+            this.store.un('load', this.onLoad, this);
+            this.store.un('loadexception', this.onLoadException, this);
+        }
+        Roo.form.ComboBox.superclass.onDestroy.call(this);
     },
 
     // private
-    // Subclasses should provide the validation implementation by overriding this
-    validateValue : function(value){
-        return true;
-    },
-
-    /**
-     * Mark this field as invalid
-     * @param {String} msg The validation message
-     */
-    markInvalid : function(msg){
-        if(!this.rendered || this.preventMark){ // not rendered
-            return;
-        }
-        
-        var obj = (typeof(this.combo) != 'undefined') ? this.combo : this; // fix the combox array!!
-        
-        obj.el.addClass(this.invalidClass);
-        msg = msg || this.invalidText;
-        switch(this.msgTarget){
-            case 'qtip':
-                obj.el.dom.qtip = msg;
-                obj.el.dom.qclass = 'x-form-invalid-tip';
-                if(Roo.QuickTips){ // fix for floating editors interacting with DND
-                    Roo.QuickTips.enable();
-                }
-                break;
-            case 'title':
-                this.el.dom.title = msg;
-                break;
-            case 'under':
-                if(!this.errorEl){
-                    var elp = this.el.findParent('.x-form-element', 5, true);
-                    this.errorEl = elp.createChild({cls:'x-form-invalid-msg'});
-                    this.errorEl.setWidth(elp.getWidth(true)-20);
-                }
-                this.errorEl.update(msg);
-                Roo.form.Field.msgFx[this.msgFx].show(this.errorEl, this);
-                break;
-            case 'side':
-                if(!this.errorIcon){
-                    var elp = this.el.findParent('.x-form-element', 5, true);
-                    this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
-                }
-                this.alignErrorIcon();
-                this.errorIcon.dom.qtip = msg;
-                this.errorIcon.dom.qclass = 'x-form-invalid-tip';
-                this.errorIcon.show();
-                this.on('resize', this.alignErrorIcon, this);
-                break;
-            default:
-                var t = Roo.getDom(this.msgTarget);
-                t.innerHTML = msg;
-                t.style.display = this.msgDisplay;
-                break;
+    fireKey : function(e){
+        if(e.isNavKeyPress() && !this.list.isVisible()){
+            this.fireEvent("specialkey", this, e);
         }
-        this.fireEvent('invalid', this, msg);
     },
 
     // private
-    alignErrorIcon : function(){
-        this.errorIcon.alignTo(this.el, 'tl-tr', [2, 0]);
-    },
-
-    /**
-     * Clear any invalid styles/messages for this field
-     */
-    clearInvalid : function(){
-        if(!this.rendered || this.preventMark){ // not rendered
+    onResize: function(w, h){
+        Roo.form.ComboBox.superclass.onResize.apply(this, arguments);
+        
+        if(typeof w != 'number'){
+            // we do not handle it!?!?
             return;
         }
-        var obj = (typeof(this.combo) != 'undefined') ? this.combo : this; // fix the combox array!!
+        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');
         
-        obj.el.removeClass(this.invalidClass);
-        switch(this.msgTarget){
-            case 'qtip':
-                obj.el.dom.qtip = '';
-                break;
-            case 'title':
-                this.el.dom.title = '';
-                break;
-            case 'under':
-                if(this.errorEl){
-                    Roo.form.Field.msgFx[this.msgFx].hide(this.errorEl, this);
-                }
-                break;
-            case 'side':
-                if(this.errorIcon){
-                    this.errorIcon.dom.qtip = '';
-                    this.errorIcon.hide();
-                    this.un('resize', this.alignErrorIcon, this);
-                }
-                break;
-            default:
-                var t = Roo.getDom(this.msgTarget);
-                t.innerHTML = '';
-                t.style.display = 'none';
-                break;
+        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'));
         }
-        this.fireEvent('valid', 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(){
-        var v = this.el.getValue();
         
-        return v;
-    },
-
-    /**
-     * 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(){
-        var v = this.el.getValue();
-         
-        return v;
-    },
-
-    /**
-     * Sets the underlying DOM field's value directly, bypassing validation.  To set the value with validation see {@link #setValue}.
-     * @param {Mixed} value The value to set
-     */
-    setRawValue : function(v){
-        return this.el.dom.value = (v === null || v === undefined ? '' : v);
+    
+        
     },
 
     /**
-     * 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
+     * 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
      */
-    setValue : function(v){
-        this.value = v;
-        if(this.rendered){
-            this.el.dom.value = (v === null || v === undefined ? '' : v);
-             this.validate();
+    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');
         }
     },
 
-    adjustSize : function(w, h){
-        var s = Roo.form.Field.superclass.adjustSize.call(this, w, h);
-        s.width = this.adjustWidth(this.el.dom.tagName, s.width);
-        return s;
+    // private
+    onBeforeLoad : function(){
+        if(!this.hasFocus){
+            return;
+        }
+        this.innerList.update(this.loadingText ?
+               '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
+        this.restrictHeight();
+        this.selectedIndex = -1;
     },
 
-    adjustWidth : function(tag, w){
-        tag = tag.toLowerCase();
-        if(typeof w == 'number' && Roo.isStrict && !Roo.isSafari){
-            if(Roo.isIE && (tag == 'input' || tag == 'textarea')){
-                if(tag == 'input'){
-                    return w + 2;
-                }
-                if(tag == 'textarea'){
-                    return w-2;
+    // 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();
                 }
-            }else if(Roo.isOpera){
-                if(tag == 'input'){
-                    return w + 2;
+                if(!this.selectByValue(this.value, true)){
+                    this.select(0, true);
                 }
-                if(tag == 'textarea'){
-                    return w-2;
+            }else{
+                this.selectNext();
+                if(this.typeAhead && this.lastKey != Roo.EventObject.BACKSPACE && this.lastKey != Roo.EventObject.DELETE){
+                    this.taTask.delay(this.typeAheadDelay);
                 }
             }
+        }else{
+            this.onEmptyResults();
         }
-        return w;
-    }
-});
-
-
-// anything other than normal should be considered experimental
-Roo.form.Field.msgFx = {
-    normal : {
-        show: function(msgEl, f){
-            msgEl.setDisplayed('block');
-        },
-
-        hide : function(msgEl, f){
-            msgEl.setDisplayed(false).update('');
-        }
+        //this.el.focus();
     },
-
-    slide : {
-        show: function(msgEl, f){
-            msgEl.slideIn('t', {stopFx:true});
-        },
-
-        hide : function(msgEl, f){
-            msgEl.slideOut('t', {stopFx:true,useDisplay:true});
+    // private
+    onLoadException : function()
+    {
+        this.collapse();
+        Roo.log(this.store.reader.jsonData);
+        if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
+            Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
         }
+        
+        
     },
-
-    slideRight : {
-        show: function(msgEl, f){
-            msgEl.fixDisplay();
-            msgEl.alignTo(f.el, 'tl-tr');
-            msgEl.slideIn('l', {stopFx:true});
-        },
-
-        hide : function(msgEl, f){
-            msgEl.slideOut('l', {stopFx:true,useDisplay:true});
+    // 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);
+            }
         }
-    }
-};/*
- * 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.TextField
- * @extends Roo.form.Field
- * Basic text field.  Can be used as a direct replacement for traditional text inputs, or as the base
- * class for more sophisticated input controls (like {@link Roo.form.TextArea} and {@link Roo.form.ComboBox}).
- * @constructor
- * Creates a new TextField
- * @param {Object} config Configuration options
- */
-Roo.form.TextField = function(config){
-    Roo.form.TextField.superclass.constructor.call(this, config);
-    this.addEvents({
-        /**
-         * @event autosize
-         * Fires when the autosize function is triggered.  The field may or may not have actually changed size
-         * according to the default logic, but this event provides a hook for the developer to apply additional
-         * logic at runtime to resize the field if needed.
-	     * @param {Roo.form.Field} this This text field
-	     * @param {Number} width The new field width
-	     */
-        autosize : true
-    });
-};
+    },
+
+    // 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);
+        }
+    },
 
-Roo.extend(Roo.form.TextField, Roo.form.Field,  {
-    /**
-     * @cfg {Boolean} grow True if this field should automatically grow and shrink to its content
-     */
-    grow : false,
-    /**
-     * @cfg {Number} growMin The minimum width to allow when grow = true (defaults to 30)
-     */
-    growMin : 30,
-    /**
-     * @cfg {Number} growMax The maximum width to allow when grow = true (defaults to 800)
-     */
-    growMax : 800,
-    /**
-     * @cfg {String} vtype A validation type name as defined in {@link Roo.form.VTypes} (defaults to null)
-     */
-    vtype : null,
-    /**
-     * @cfg {String} maskRe An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
-     */
-    maskRe : null,
-    /**
-     * @cfg {Boolean} disableKeyFilter True to disable input keystroke filtering (defaults to false)
-     */
-    disableKeyFilter : false,
-    /**
-     * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to true)
-     */
-    allowBlank : true,
-    /**
-     * @cfg {Number} minLength Minimum input field length required (defaults to 0)
-     */
-    minLength : 0,
-    /**
-     * @cfg {Number} maxLength Maximum input field length allowed (defaults to Number.MAX_VALUE)
-     */
-    maxLength : Number.MAX_VALUE,
-    /**
-     * @cfg {String} minLengthText Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minLength}")
-     */
-    minLengthText : "The minimum length for this field is {0}",
-    /**
-     * @cfg {String} maxLengthText Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxLength}")
-     */
-    maxLengthText : "The maximum length for this field is {0}",
-    /**
-     * @cfg {Boolean} selectOnFocus True to automatically select any existing field text when the field receives input focus (defaults to false)
-     */
-    selectOnFocus : false,
     /**
-     * @cfg {String} blankText Error text to display if the allow blank validation fails (defaults to "This field is required")
+     * Returns the currently selected field value or empty string if no value is set.
+     * @return {String} value The selected value
      */
-    blankText : "This field is required",
+    getValue : function(){
+        if(this.valueField){
+            return typeof this.value != 'undefined' ? this.value : '';
+        }
+        return Roo.form.ComboBox.superclass.getValue.call(this);
+    },
+
     /**
-     * @cfg {Function} validator A custom validation function to be called during field validation (defaults to null).
-     * If available, this function will be called only after the basic validators all return true, and will be passed the
-     * current field value and expected to return boolean true if the value is valid or a string error message if invalid.
+     * Clears any text/value currently set in the field
      */
-    validator : null,
+    clearValue : function(){
+        if(this.hiddenField){
+            this.hiddenField.value = '';
+        }
+        this.value = '';
+        this.setRawValue('');
+        this.lastSelectionText = '';
+        
+    },
+
     /**
-     * @cfg {RegExp} regex A JavaScript RegExp object to be tested against the field value during validation (defaults to null).
-     * If available, this regex will be evaluated only after the basic validators all return true, and will be passed the
-     * current field value.  If the test fails, the field will be marked invalid using {@link #regexText}.
+     * 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
      */
-    regex : null,
+    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;
+    },
     /**
-     * @cfg {String} regexText The error text to display if {@link #regex} is used and the test fails during validation (defaults to "")
+     * @property {Object} the last set data for the element
      */
-    regexText : "",
+    
+    lastData : false,
     /**
-     * @cfg {String} emptyText The default text to display in an empty field - placeholder... (defaults to null).
+     * 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?
      */
-    emptyText : null,
-   
-
-    // private
-    initEvents : function()
-    {
-        if (this.emptyText) {
-            this.el.attr('placeholder', this.emptyText);
+    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));
         }
         
-        Roo.form.TextField.superclass.initEvents.call(this);
-        if(this.validationEvent == 'keyup'){
-            this.validationTask = new Roo.util.DelayedTask(this.validate, this);
-            this.el.on('keyup', this.filterValidation, this);
+        if(this.valueField){
+            vv = !o || typeof(o[this.valueField]) == 'undefined' ? dv : o[this.valueField];
         }
-        else if(this.validationEvent !== false){
-            this.el.on(this.validationEvent, this.validate, this, {buffer: this.validationDelay});
+        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;
         
-        if(this.selectOnFocus){
-            this.on("focus", this.preFocus, this);
-            
+        
+    },
+    // private
+    reset : function(){
+        // overridden so that last data is reset..
+        this.setValue(this.resetValue);
+        this.originalValue = this.getValue();
+        this.clearInvalid();
+        this.lastData = false;
+        if (this.view) {
+            this.view.clearSelections();
         }
-        if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Roo.form.VTypes[this.vtype+'Mask']))){
-            this.el.on("keypress", this.filterKeys, this);
+    },
+    // 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 true;
+            });
         }
-        if(this.grow){
-            this.el.on("keyup", this.onKeyUp,  this, {buffer:50});
-            this.el.on("click", this.autoSize,  this);
+        return record;
+    },
+    
+    getName: function()
+    {
+        // returns hidden if it's set..
+        if (!this.rendered) {return ''};
+        return !this.hiddenName && this.el.dom.name  ? this.el.dom.name : (this.hiddenName || '');
+        
+    },
+    // private
+    onViewMove : function(e, t){
+        this.inKeyMode = false;
+    },
+
+    // private
+    onViewOver : function(e, t){
+        if(this.inKeyMode){ // prevent key nav and mouse over conflicts
+            return;
         }
-        if(this.el.is('input[type=password]') && Roo.isSafari){
-            this.el.on('keydown', this.SafariOnKeyDown, this);
+        var item = this.view.findItemFromChild(t);
+        if(item){
+            var index = this.view.indexOf(item);
+            this.select(index, false);
         }
     },
 
-    processValue : function(value){
-        if(this.stripCharsRe){
-            var newValue = value.replace(this.stripCharsRe, '');
-            if(newValue !== value){
-                this.setRawValue(newValue);
-                return newValue;
-            }
+    // 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();
         }
-        return value;
     },
 
-    filterValidation : function(e){
-        if(!e.isNavKeyPress()){
-            this.validationTask.delay(this.validationDelay);
-        }
+    // 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
-    onKeyUp : function(e){
-        if(!e.isNavKeyPress()){
-            this.autoSize();
+    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;
     },
 
     /**
-     * Resets the current field value to the originally-loaded value and clears any validation messages.
-     *  
+     * 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)
      */
-    reset : function(){
-        Roo.form.TextField.superclass.reset.call(this);
-       
+    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
-    preFocus : function(){
-        
-        if(this.selectOnFocus){
-            this.el.dom.select();
+    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
-    filterKeys : function(e){
-        var k = e.getKey();
-        if(!Roo.isIE && (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1))){
-            return;
-        }
-        var c = e.getCharCode(), cc = String.fromCharCode(c);
-        if(Roo.isIE && (e.isSpecialKey() || !cc)){
-            return;
+    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);
+            }
         }
-        if(!this.maskRe.test(cc)){
-            e.stopEvent();
+    },
+
+    // private
+    onKeyUp : function(e){
+        if(this.editable !== false && !e.isSpecialKey()){
+            this.lastKey = e.getKey();
+            this.dqTask.delay(this.queryDelay);
         }
     },
 
-    setValue : function(v){
-        
-        Roo.form.TextField.superclass.setValue.apply(this, arguments);
-        
-        this.autoSize();
+    // 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;
+             
+        }
     },
 
     /**
-     * Validates a value according to the field's validation rules and marks the field as invalid
-     * if the validation fails
-     * @param {Mixed} value The value to validate
-     * @return {Boolean} True if the value is valid, else false
+     * 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)
      */
-    validateValue : function(value){
-        if(value.length < 1)  { // if it's blank
-             if(this.allowBlank){
-                this.clearInvalid();
-                return true;
-             }else{
-                this.markInvalid(this.blankText);
-                return false;
-             }
-        }
-        if(value.length < this.minLength){
-            this.markInvalid(String.format(this.minLengthText, this.minLength));
-            return false;
+    doQuery : function(q, forceAll){
+        if(q === undefined || q === null){
+            q = '';
         }
-        if(value.length > this.maxLength){
-            this.markInvalid(String.format(this.maxLengthText, this.maxLength));
+        var qe = {
+            query: q,
+            forceAll: forceAll,
+            combo: this,
+            cancel:false
+        };
+        if(this.fireEvent('beforequery', qe)===false || qe.cancel){
             return false;
         }
-        if(this.vtype){
-            var vt = Roo.form.VTypes;
-            if(!vt[this.vtype](value, this)){
-                this.markInvalid(this.vtypeText || vt[this.vtype +'Text']);
-                return false;
-            }
-        }
-        if(typeof this.validator == "function"){
-            var msg = this.validator(value);
-            if(msg !== true){
-                this.markInvalid(msg);
-                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();   
             }
         }
-        if(this.regex && !this.regex.test(value)){
-            this.markInvalid(this.regexText);
-            return false;
+    },
+
+    // private
+    getParams : function(q){
+        var p = {};
+        //p[this.queryParam] = q;
+        if(this.pageSize){
+            p.start = 0;
+            p.limit = this.pageSize;
         }
-        return true;
+        return p;
     },
 
     /**
-     * Selects text in this field
-     * @param {Number} start (optional) The index where the selection should start (defaults to 0)
-     * @param {Number} end (optional) The index where the selection should end (defaults to the text length)
+     * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
      */
-    selectText : function(start, end){
-        var v = this.getRawValue();
-        if(v.length > 0){
-            start = start === undefined ? 0 : start;
-            end = end === undefined ? v.length : end;
-            var d = this.el.dom;
-            if(d.setSelectionRange){
-                d.setSelectionRange(start, end);
-            }else if(d.createTextRange){
-                var range = d.createTextRange();
-                range.moveStart("character", start);
-                range.moveEnd("character", v.length-end);
-                range.select();
-            }
+    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();
         }
     },
 
     /**
-     * Automatically grows the field to accomodate the width of the text up to the maximum field width allowed.
-     * This only takes effect if grow = true, and fires the autosize event.
+     * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
      */
-    autoSize : function(){
-        if(!this.grow || !this.rendered){
+    expand : function(){
+        if(this.isExpanded() || !this.hasFocus){
             return;
         }
-        if(!this.metrics){
-            this.metrics = Roo.util.TextMetrics.createInstance(this.el);
+        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);
         }
-        var el = this.el;
-        var v = el.dom.value;
-        var d = document.createElement('div');
-        d.appendChild(document.createTextNode(v));
-        v = d.innerHTML;
-        d = null;
-        v += "&#160;";
-        var w = Math.min(this.growMax, Math.max(this.metrics.getWidth(v) + /* add extra padding */ 10, this.growMin));
-        this.el.setWidth(w);
-        this.fireEvent("autosize", this, w);
+        
+        this.fireEvent('expand', this);
     },
-    
+
     // private
-    SafariOnKeyDown : function(event)
+    // 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)
     {
-        // this is a workaround for a password hang bug on chrome/ webkit.
-        
-        var isSelectAll = false;
-        
-        if(this.el.dom.selectionEnd > 0){
-            isSelectAll = (this.el.dom.selectionEnd - this.el.dom.selectionStart - this.getValue().length == 0) ? true : false;
+        //Roo.log('listkeypress');
+        // scroll to first matching element based on key pres..
+        if (e.isSpecialKey()) {
+            return false;
         }
-        if(((event.getKey() == 8 || event.getKey() == 46) && this.getValue().length ==1)){ // backspace and delete key
-            event.preventDefault();
-            this.setValue('');
-            return;
+        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;
+            }
+            
         }
         
-        if(isSelectAll && event.getCharCode() > 31){ // backspace and delete key
-            
-            event.preventDefault();
-            // this is very hacky as keydown always get's upper case.
-            
-            var cc = String.fromCharCode(event.getCharCode());
-            
-            
-            this.setValue( event.shiftKey ?  cc : cc.toLowerCase());
-            
+        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.
+ * Copyright(c) 2010-2012, Roo J Solutions Limited
  *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
+ * Licence LGPL
  *
- * Fork - LGPL
- * <script type="text/javascript">
  */
- 
+
 /**
- * @class Roo.form.Hidden
+ * @class Roo.form.ComboBoxArray
  * @extends Roo.form.TextField
- * Simple Hidden element used on forms 
- * 
- * usage: form.add(new Roo.form.HiddenField({ 'name' : 'test1' }));
- * 
- * @constructor
- * Creates a new Hidden form element.
- * @param {Object} config Configuration options
- */
-
-
-
-// easy hidden field...
-Roo.form.Hidden = function(config){
-    Roo.form.Hidden.superclass.constructor.call(this, config);
-};
-  
-Roo.extend(Roo.form.Hidden, Roo.form.TextField, {
-    fieldLabel:      '',
-    inputType:      'hidden',
-    width:          50,
-    allowBlank:     true,
-    labelSeparator: '',
-    hidden:         true,
-    itemCls :       'x-form-item-display-none'
-
-
-});
-
-
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
+ * A facebook style adder... for lists of email / people / countries  etc...
+ * pick multiple items from a combo box, and shows each one.
  *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *  Fred [x]  Brian [x]  [Pick another |v]
  *
- * Fork - LGPL
- * <script type="text/javascript">
- */
- 
-/**
- * @class Roo.form.TriggerField
- * @extends Roo.form.TextField
- * Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
- * The trigger has no default action, so you must assign a function to implement the trigger click handler by
- * overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
- * for which you can provide a custom implementation.  For example:
- * <pre><code>
-var trigger = new Roo.form.TriggerField();
-trigger.onTriggerClick = myTriggerFn;
-trigger.applyTo('my-field');
-</code></pre>
  *
- * However, in general you will most likely want to use TriggerField as the base class for a reusable component.
- * {@link Roo.form.DateField} and {@link Roo.form.ComboBox} are perfect examples of this.
- * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
- * class 'x-form-trigger' by default and triggerClass will be <b>appended</b> if specified.
+ *  For this to work: it needs various extra information
+ *    - normal combo problay has
+ *      name, hiddenName
+ *    + displayField, valueField
+ *
+ *    For our purpose...
+ *
+ *
+ *   If we change from 'extends' to wrapping...
+ *   
+ *  
+ *
+ 
+ 
  * @constructor
- * Create a new TriggerField.
- * @param {Object} config Configuration options (valid {@Roo.form.TextField} config options will also be applied
- * to the base TextField)
+ * Create a new ComboBoxArray.
+ * @param {Object} config Configuration options
  */
-Roo.form.TriggerField = function(config){
-    this.mimicing = false;
-    Roo.form.TriggerField.superclass.constructor.call(this, config);
-};
+ 
 
-Roo.extend(Roo.form.TriggerField, Roo.form.TextField,  {
+Roo.form.ComboBoxArray = function(config)
+{
+    this.addEvents({
+        /**
+         * @event beforeremove
+         * Fires before remove the value from the list
+	     * @param {Roo.form.ComboBoxArray} _self This combo box array
+             * @param {Roo.form.ComboBoxArray.Item} item removed item
+	     */
+        'beforeremove' : true,
+        /**
+         * @event remove
+         * Fires when remove the value from the list
+	     * @param {Roo.form.ComboBoxArray} _self This combo box array
+             * @param {Roo.form.ComboBoxArray.Item} item removed item
+	     */
+        'remove' : true
+        
+        
+    });
+    
+    Roo.form.ComboBoxArray.superclass.constructor.call(this, config);
+    
+    this.items = new Roo.util.MixedCollection(false);
+    
+    // construct the child combo...
+    
+    
+    
+    
+   
+    
+}
+
+ 
+Roo.extend(Roo.form.ComboBoxArray, Roo.form.TextField,
+{ 
     /**
-     * @cfg {String} triggerClass A CSS class to apply to the trigger
+     * @cfg {Roo.form.ComboBox} combo [required] The combo box that is wrapped
      */
+    
+    lastData : false,
+    
+    // behavies liek a hiddne field
+    inputType:      'hidden',
     /**
-     * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
-     * {tag: "input", type: "text", size: "16", autocomplete: "off"})
-     */
-    defaultAutoCreate : {tag: "input", type: "text", size: "16", autocomplete: "new-password"},
+     * @cfg {Number} width The width of the box that displays the selected element
+     */ 
+    width:          300,
+
+    
+    
     /**
-     * @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false)
+     * @cfg {String} name    The name of the visable items on this form (eg. titles not ids)
      */
-    hideTrigger:false,
-
-    /** @cfg {Boolean} grow @hide */
-    /** @cfg {Number} growMin @hide */
-    /** @cfg {Number} growMax @hide */
-
+    name : false,
     /**
-     * @hide 
-     * @method
+     * @cfg {String} hiddenName    The hidden name of the field, often contains an comma seperated list of names
      */
-    autoSize: Roo.emptyFn,
-    // private
-    monitorTab : true,
-    // private
-    deferHeight : true,
-
+    hiddenName : false,
+      /**
+     * @cfg {String} seperator    The value seperator normally ',' 
+     */
+    seperator : ',',
     
-    actionMode : 'wrap',
-    // private
-    onResize : function(w, h){
-        Roo.form.TriggerField.superclass.onResize.apply(this, arguments);
-        if(typeof w == 'number'){
-            var x = w - this.trigger.getWidth();
-            this.el.setWidth(this.adjustWidth('input', x));
-            this.trigger.setStyle('left', x+'px');
-        }
-    },
-
-    // private
-    adjustSize : Roo.BoxComponent.prototype.adjustSize,
-
-    // private
-    getResizeEl : function(){
-        return this.wrap;
-    },
-
-    // private
-    getPositionEl : function(){
-        return this.wrap;
-    },
-
-    // private
-    alignErrorIcon : function(){
-        this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
-    },
-
-    // private
-    onRender : function(ct, position){
-        Roo.form.TriggerField.superclass.onRender.call(this, ct, position);
-        this.wrap = this.el.wrap({cls: "x-form-field-wrap"});
-        this.trigger = this.wrap.createChild(this.triggerConfig ||
-                {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass});
-        if(this.hideTrigger){
-            this.trigger.setDisplayed(false);
+    // private the array of items that are displayed..
+    items  : false,
+    // private - the hidden field el.
+    hiddenEl : false,
+    // private - the filed el..
+    el : false,
+    
+    //validateValue : function() { return true; }, // all values are ok!
+    //onAddClick: function() { },
+    
+    onRender : function(ct, position) 
+    {
+        
+        // create the standard hidden element
+        //Roo.form.ComboBoxArray.superclass.onRender.call(this, ct, position);
+        
+        
+        // give fake names to child combo;
+        this.combo.hiddenName = this.hiddenName ? (this.hiddenName+'-subcombo') : this.hiddenName;
+        this.combo.name = this.name ? (this.name+'-subcombo') : this.name;
+        
+        this.combo = Roo.factory(this.combo, Roo.form);
+        this.combo.onRender(ct, position);
+        if (typeof(this.combo.width) != 'undefined') {
+            this.combo.onResize(this.combo.width,0);
         }
-        this.initTrigger();
-        if(!this.width){
-            this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
+        
+        this.combo.initEvents();
+        
+        // assigned so form know we need to do this..
+        this.store          = this.combo.store;
+        this.valueField     = this.combo.valueField;
+        this.displayField   = this.combo.displayField ;
+        
+        
+        this.combo.wrap.addClass('x-cbarray-grp');
+        
+        var cbwrap = this.combo.wrap.createChild(
+            {tag: 'div', cls: 'x-cbarray-cb'},
+            this.combo.el.dom
+        );
+        
+             
+        this.hiddenEl = this.combo.wrap.createChild({
+            tag: 'input',  type:'hidden' , name: this.hiddenName, value : ''
+        });
+        this.el = this.combo.wrap.createChild({
+            tag: 'input',  type:'hidden' , name: this.name, value : ''
+        });
+         //   this.el.dom.removeAttribute("name");
+        
+        
+        this.outerWrap = this.combo.wrap;
+        this.wrap = cbwrap;
+        
+        this.outerWrap.setWidth(this.width);
+        this.outerWrap.dom.removeChild(this.el.dom);
+        
+        this.wrap.dom.appendChild(this.el.dom);
+        this.outerWrap.dom.removeChild(this.combo.trigger.dom);
+        this.combo.wrap.dom.appendChild(this.combo.trigger.dom);
+        
+        this.combo.trigger.setStyle('position','relative');
+        this.combo.trigger.setStyle('left', '0px');
+        this.combo.trigger.setStyle('top', '2px');
+        
+        this.combo.el.setStyle('vertical-align', 'text-bottom');
+        
+        //this.trigger.setStyle('vertical-align', 'top');
+        
+        // this should use the code from combo really... on('add' ....)
+        if (this.adder) {
+            
+        
+            this.adder = this.outerWrap.createChild(
+                {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-adder', style: 'margin-left:2px'});  
+            var _t = this;
+            this.adder.on('click', function(e) {
+                _t.fireEvent('adderclick', this, e);
+            }, _t);
         }
+        //var _t = this;
+        //this.adder.on('click', this.onAddClick, _t);
+        
+        
+        this.combo.on('select', function(cb, rec, ix) {
+            this.addItem(rec.data);
+            
+            cb.setValue('');
+            cb.el.dom.value = '';
+            //cb.lastData = rec.data;
+            // add to list
+            
+        }, this);
+        
+        
     },
-
-    // private
-    initTrigger : function(){
-        this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
-        this.trigger.addClassOnOver('x-form-trigger-over');
-        this.trigger.addClassOnClick('x-form-trigger-click');
+    
+    
+    getName: function()
+    {
+        // returns hidden if it's set..
+        if (!this.rendered) {return ''};
+        return  this.hiddenName ? this.hiddenName : this.name;
+        
     },
-
-    // private
-    onDestroy : function(){
-        if(this.trigger){
-            this.trigger.removeAllListeners();
-            this.trigger.remove();
-        }
-        if(this.wrap){
-            this.wrap.remove();
+    
+    
+    onResize: function(w, h){
+        
+        return;
+        // not sure if this is needed..
+        //this.combo.onResize(w,h);
+        
+        if(typeof w != 'number'){
+            // we do not handle it!?!?
+            return;
         }
-        Roo.form.TriggerField.superclass.onDestroy.call(this);
-    },
-
-    // private
-    onFocus : function(){
-        Roo.form.TriggerField.superclass.onFocus.call(this);
-        if(!this.mimicing){
-            this.wrap.addClass('x-trigger-wrap-focus');
-            this.mimicing = true;
-            Roo.get(Roo.isIE ? document.body : document).on("mousedown", this.mimicBlur, this);
-            if(this.monitorTab){
-                this.el.on("keydown", this.checkTab, this);
-            }
+        var tw = this.combo.trigger.getWidth();
+        tw += this.addicon ? this.addicon.getWidth() : 0;
+        tw += this.editicon ? this.editicon.getWidth() : 0;
+        var x = w - tw;
+        this.combo.el.setWidth( this.combo.adjustWidth('input', x));
+            
+        this.combo.trigger.setStyle('left', '0px');
+        
+        if(this.list && this.listWidth === undefined){
+            var lw = Math.max(x + this.combo.trigger.getWidth(), this.combo.minListWidth);
+            this.list.setWidth(lw);
+            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
         }
+        
+    
+        
     },
-
-    // private
-    checkTab : function(e){
-        if(e.getKey() == e.TAB){
-            this.triggerBlur();
+    
+    addItem: function(rec)
+    {
+        var valueField = this.combo.valueField;
+        var displayField = this.combo.displayField;
+	
+        if (this.items.indexOfKey(rec[valueField]) > -1) {
+            //console.log("GOT " + rec.data.id);
+            return;
         }
+        
+        var x = new Roo.form.ComboBoxArray.Item({
+            //id : rec[this.idField],
+            data : rec,
+            displayField : displayField ,
+            tipField : displayField ,
+            cb : this
+        });
+        // use the 
+        this.items.add(rec[valueField],x);
+        // add it before the element..
+        this.updateHiddenEl();
+        x.render(this.outerWrap, this.wrap.dom);
+        // add the image handler..
     },
-
-    // private
-    onBlur : function(){
-        // do nothing
-    },
-
-    // private
-    mimicBlur : function(e, t){
-        if(!this.wrap.contains(t) && this.validateBlur()){
-            this.triggerBlur();
+    
+    updateHiddenEl : function()
+    {
+        this.validate();
+        if (!this.hiddenEl) {
+            return;
         }
+        var ar = [];
+        var idField = this.combo.valueField;
+        
+        this.items.each(function(f) {
+            ar.push(f.data[idField]);
+        });
+        this.hiddenEl.dom.value = ar.join(this.seperator);
+        this.validate();
     },
-
-    // private
-    triggerBlur : function(){
-        this.mimicing = false;
-        Roo.get(Roo.isIE ? document.body : document).un("mousedown", this.mimicBlur);
-        if(this.monitorTab){
-            this.el.un("keydown", this.checkTab, this);
+    
+    reset : function()
+    {
+        this.items.clear();
+        
+        Roo.each(this.outerWrap.select('.x-cbarray-item', true).elements, function(el){
+           el.remove();
+        });
+        
+        this.el.dom.value = '';
+        if (this.hiddenEl) {
+            this.hiddenEl.dom.value = '';
         }
-        this.wrap.removeClass('x-trigger-wrap-focus');
-        Roo.form.TriggerField.superclass.onBlur.call(this);
+        
     },
-
-    // private
-    // This should be overriden by any subclass that needs to check whether or not the field can be blurred.
-    validateBlur : function(e, t){
-        return true;
+    getValue: function()
+    {
+        return this.hiddenEl ? this.hiddenEl.dom.value : '';
     },
-
-    // private
-    onDisable : function(){
-        Roo.form.TriggerField.superclass.onDisable.call(this);
-        if(this.wrap){
-            this.wrap.addClass('x-item-disabled');
+    setValue: function(v) // not a valid action - must use addItems..
+    {
+        
+        this.reset();
+         
+        if (this.store.isLocal && (typeof(v) == 'string')) {
+            // then we can use the store to find the values..
+            // comma seperated at present.. this needs to allow JSON based encoding..
+            this.hiddenEl.value  = v;
+            var v_ar = [];
+            Roo.each(v.split(this.seperator), function(k) {
+                Roo.log("CHECK " + this.valueField + ',' + k);
+                var li = this.store.query(this.valueField, k);
+                if (!li.length) {
+                    return;
+                }
+                var add = {};
+                add[this.valueField] = k;
+                add[this.displayField] = li.item(0).data[this.displayField];
+                
+                this.addItem(add);
+            }, this) 
+             
+        }
+        if (typeof(v) == 'object' ) {
+            // then let's assume it's an array of objects..
+            Roo.each(v, function(l) {
+                var add = l;
+                if (typeof(l) == 'string') {
+                    add = {};
+                    add[this.valueField] = l;
+                    add[this.displayField] = l
+                }
+                this.addItem(add);
+            }, this);
+             
         }
+        
+        
     },
-
-    // private
-    onEnable : function(){
-        Roo.form.TriggerField.superclass.onEnable.call(this);
-        if(this.wrap){
-            this.wrap.removeClass('x-item-disabled');
+    setFromData: function(v)
+    {
+        // this recieves an object, if setValues is called.
+        this.reset();
+        this.el.dom.value = v[this.displayField];
+        this.hiddenEl.dom.value = v[this.valueField];
+        if (typeof(v[this.valueField]) != 'string' || !v[this.valueField].length) {
+            return;
         }
-    },
-
-    // private
-    onShow : function(){
-        var ae = this.getActionEl();
+        var kv = v[this.valueField];
+        var dv = v[this.displayField];
+        kv = typeof(kv) != 'string' ? '' : kv;
+        dv = typeof(dv) != 'string' ? '' : dv;
         
-        if(ae){
-            ae.dom.style.display = '';
-            ae.dom.style.visibility = 'visible';
+        
+        var keys = kv.split(this.seperator);
+        var display = dv.split(this.seperator);
+        for (var i = 0 ; i < keys.length; i++) {
+            add = {};
+            add[this.valueField] = keys[i];
+            add[this.displayField] = display[i];
+            this.addItem(add);
         }
+      
+        
     },
-
-    // private
     
-    onHide : function(){
-        var ae = this.getActionEl();
-        ae.dom.style.display = 'none';
-    },
-
     /**
-     * The function that should handle the trigger's click event.  This method does nothing by default until overridden
-     * by an implementing function.
-     * @method
-     * @param {EventObject} e
+     * Validates the combox array value
+     * @return {Boolean} True if the value is valid, else false
      */
-    onTriggerClick : Roo.emptyFn
-});
-
-// TwinTriggerField is not a public class to be used directly.  It is meant as an abstract base class
-// to be extended by an implementing class.  For an example of implementing this class, see the custom
-// SearchField implementation here: http://extjs.com/deploy/ext/examples/form/custom.html
-Roo.form.TwinTriggerField = Roo.extend(Roo.form.TriggerField, {
-    initComponent : function(){
-        Roo.form.TwinTriggerField.superclass.initComponent.call(this);
-
-        this.triggerConfig = {
-            tag:'span', cls:'x-form-twin-triggers', cn:[
-            {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
-            {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}
-        ]};
+    validate : function(){
+        if(this.disabled || this.validateValue(this.processValue(this.getValue()))){
+            this.clearInvalid();
+            return true;
+        }
+        return false;
     },
-
-    getTrigger : function(index){
-        return this.triggers[index];
+    
+    validateValue : function(value){
+        return Roo.form.ComboBoxArray.superclass.validateValue.call(this, this.getValue());
+        
     },
+    
+    /*@
+     * overide
+     * 
+     */
+    isDirty : function() {
+        if(this.disabled) {
+            return false;
+        }
+        
+        try {
+            var d = Roo.decode(String(this.originalValue));
+        } catch (e) {
+            return String(this.getValue()) !== String(this.originalValue);
+        }
+        
+        var originalValue = [];
+        
+        for (var i = 0; i < d.length; i++){
+            originalValue.push(d[i][this.valueField]);
+        }
+        
+        return String(this.getValue()) !== String(originalValue.join(this.seperator));
+        
+    }
+    
+});
 
-    initTrigger : function(){
-        var ts = this.trigger.select('.x-form-trigger', true);
-        this.wrap.setStyle('overflow', 'hidden');
-        var triggerField = this;
-        ts.each(function(t, all, index){
-            t.hide = function(){
-                var w = triggerField.wrap.getWidth();
-                this.dom.style.display = 'none';
-                triggerField.el.setWidth(w-triggerField.trigger.getWidth());
-            };
-            t.show = function(){
-                var w = triggerField.wrap.getWidth();
-                this.dom.style.display = '';
-                triggerField.el.setWidth(w-triggerField.trigger.getWidth());
-            };
-            var triggerIndex = 'Trigger'+(index+1);
 
-            if(this['hide'+triggerIndex]){
-                t.dom.style.display = 'none';
-            }
-            t.on("click", this['on'+triggerIndex+'Click'], this, {preventDefault:true});
-            t.addClassOnOver('x-form-trigger-over');
-            t.addClassOnClick('x-form-trigger-click');
-        }, this);
-        this.triggers = ts.elements;
-    },
 
-    onTrigger1Click : Roo.emptyFn,
-    onTrigger2Click : Roo.emptyFn
-});/*
- * 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.
+ * @class Roo.form.ComboBoxArray.Item
+ * @extends Roo.BoxComponent
+ * A selected item in the list
+ *  Fred [x]  Brian [x]  [Pick another |v]
+ * 
  * @constructor
- * Creates a new TextArea
+ * Create a new item.
  * @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"})
-     */
+ 
+Roo.form.ComboBoxArray.Item = function(config) {
+    config.id = Roo.id();
+    Roo.form.ComboBoxArray.Item.superclass.constructor.call(this, config);
+}
 
-    // private
-    onRender : function(ct, position){
-        if(!this.el){
-            this.defaultAutoCreate = {
-                tag: "textarea",
-                style:"width:300px;height:60px;",
-                autocomplete: "new-password"
-            };
-        }
-        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");
+Roo.extend(Roo.form.ComboBoxArray.Item, Roo.BoxComponent, {
+    data : {},
+    cb: false,
+    displayField : false,
+    tipField : false,
+    
+    
+    defaultAutoCreate : {
+        tag: 'div',
+        cls: 'x-cbarray-item',
+        cn : [ 
+            { tag: 'div' },
+            {
+                tag: 'img',
+                width:16,
+                height : 16,
+                src : Roo.BLANK_IMAGE_URL ,
+                align: 'center'
             }
-            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();
+    
+ 
+    onRender : function(ct, position)
+    {
+        Roo.form.Field.superclass.onRender.call(this, ct, position);
+        
+        if(!this.el){
+            var cfg = this.getAutoCreate();
+            this.el = ct.createChild(cfg, position);
         }
+        
+        this.el.child('img').dom.setAttribute('src', Roo.BLANK_IMAGE_URL);
+        
+        this.el.child('div').dom.innerHTML = this.cb.renderer ? 
+            this.cb.renderer(this.data) :
+            String.format('{0}',this.data[this.displayField]);
+        
+            
+        this.el.child('div').dom.setAttribute('qtip',
+                        String.format('{0}',this.data[this.tipField])
+        );
+        
+        this.el.child('img').on('click', this.remove, this);
+        
     },
-
-    /**
-     * 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){
+   
+    remove : function()
+    {
+        if(this.cb.disabled){
             return;
         }
-        var el = this.el;
-        var v = el.dom.value;
-        var ts = this.textSizeEl;
-
-        ts.innerHTML = '';
-        ts.appendChild(document.createTextNode(v));
-        v = ts.innerHTML;
+        
+        if(false !== this.cb.fireEvent('beforeremove', this.cb, this)){
+            this.cb.items.remove(this);
+            this.el.child('img').un('click', this.remove, this);
+            this.el.remove();
+            this.cb.updateHiddenEl();
 
-        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);
+            this.cb.fireEvent('remove', this.cb, 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.
+ * RooJS Library 1.1.1
+ * Copyright(c) 2008-2011  Alan Knowles
  *
- * Fork - LGPL
- * <script type="text/javascript">
+ * License - LGPL
  */
  
 
 /**
- * @class Roo.form.NumberField
- * @extends Roo.form.TextField
- * Numeric text field that provides automatic keystroke filtering and numeric validation.
+ * @class Roo.form.ComboNested
+ * @extends Roo.form.ComboBox
+ * A combobox for that allows selection of nested items in a list,
+ * eg.
+ *
+ *  Book
+ *    -> red
+ *    -> green
+ *  Table
+ *    -> square
+ *      ->red
+ *      ->green
+ *    -> rectangle
+ *      ->green
+ *      
+ * 
  * @constructor
- * Creates a new NumberField
+ * Create a new ComboNested
  * @param {Object} config Configuration options
  */
-Roo.form.NumberField = function(config){
-    Roo.form.NumberField.superclass.constructor.call(this, config);
+Roo.form.ComboNested = function(config){
+    Roo.form.ComboCheck.superclass.constructor.call(this, config);
+    // should verify some data...
+    // like
+    // hiddenName = required..
+    // displayField = required
+    // valudField == required
+    var req= [ 'hiddenName', 'displayField', 'valueField' ];
+    var _t = this;
+    Roo.each(req, function(e) {
+        if ((typeof(_t[e]) == 'undefined' ) || !_t[e].length) {
+            throw "Roo.form.ComboNested : missing value for: " + e;
+        }
+    });
+     
+    
 };
 
-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")
+Roo.extend(Roo.form.ComboNested, Roo.form.ComboBox, {
+   
+    /*
+     * @config {Number} max Number of columns to show
      */
-    nanText : "{0} is not a valid number",
-
+    
+    maxColumns : 3,
+   
+    list : null, // the outermost div..
+    innerLists : null, // the
+    views : null,
+    stores : null,
     // private
-    initEvents : function(){
-        Roo.form.NumberField.superclass.initEvents.call(this);
-        var allowed = "0123456789";
-        if(this.allowDecimals){
-            allowed += this.decimalSeparator;
+    loadingChildren : false,
+    
+    onRender : function(ct, position)
+    {
+        Roo.form.ComboBox.superclass.onRender.call(this, ct, position); // skip parent call - got to above..
+        
+        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(this.allowNegative){
-            allowed += "-";
+	
+        if(Roo.isGecko){
+            this.el.dom.setAttribute('autocomplete', 'off');
         }
-        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 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.innerLists = [];
+        this.views = [];
+        this.stores = [];
+        for (var i =0 ; i < this.maxColumns; i++) {
+            this.onRenderList( cls, i);
+        }
+        
+        // always needs footer, as we are going to have an 'OK' button.
+        this.footer = this.list.createChild({cls:cls+'-ft'});
+        this.pageTb = new Roo.Toolbar(this.footer);  
+        var _this = this;
+        this.pageTb.add(  {
+            
+            text: 'Done',
+            handler: function()
+            {
+                _this.collapse();
             }
-            var c = e.getCharCode();
-            if(allowed.indexOf(String.fromCharCode(c)) === -1){
-                e.stopEvent();
+        });
+        
+        if ( this.allowBlank && !this.disableClear) {
+            
+            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();
+        }
+        
+    },
+    onRenderList : function (  cls, i)
+    {
+        
+        var lw = Math.floor(
+                ((this.listWidth * this.maxColumns || Math.max(this.wrap.getWidth(), this.minListWidth)) - this.list.getFrameWidth('lr')) / this.maxColumns
+        );
+        
+        this.list.setWidth(lw); // default to '1'
+
+        var il = this.innerLists[i] = this.list.createChild({cls:cls+'-inner'});
+        //il.on('mouseover', this.onViewOver, this, { list:  i });
+        //il.on('mousemove', this.onViewMove, this, { list:  i });
+        il.setWidth(lw);
+        il.setStyle({ 'overflow-x' : 'hidden'});
+
+        if(!this.tpl){
+            this.tpl = new Roo.Template({
+                html :  '<div class="'+cls+'-item '+cls+'-item-{cn:this.isEmpty}">{' + this.displayField + '}</div>',
+                isEmpty: function (value, allValues) {
+                    //Roo.log(value);
+                    var dl = typeof(value.data) != 'undefined' ? value.data.length : value.length; ///json is a nested response..
+                    return dl ? 'has-children' : 'no-children'
+                }
+            });
+        }
+        
+        var store  = this.store;
+        if (i > 0) {
+            store  = new Roo.data.SimpleStore({
+                //fields : this.store.reader.meta.fields,
+                reader : this.store.reader,
+                data : [ ]
+            });
+        }
+        this.stores[i]  = store;
+                  
+        var view = this.views[i] = new Roo.View(
+            il,
+            this.tpl,
+            {
+                singleSelect:true,
+                store: store,
+                selectedClass: this.selectedClass
             }
-        };
-        this.el.on("keypress", keyPress, this);
+        );
+        view.getEl().setWidth(lw);
+        view.getEl().setStyle({
+            position: i < 1 ? 'relative' : 'absolute',
+            top: 0,
+            left: (i * lw ) + 'px',
+            display : i > 0 ? 'none' : 'block'
+        });
+        view.on('selectionchange', this.onSelectChange.createDelegate(this, {list : i }, true));
+        view.on('dblclick', this.onDoubleClick.createDelegate(this, {list : i }, true));
+        //view.on('click', this.onViewClick, this, { list : i });
+
+        store.on('beforeload', this.onBeforeLoad, this);
+        store.on('load',  this.onLoad, this, { list  : i});
+        store.on('loadexception', this.onLoadException, this);
+
+        // hide the other vies..
+        
+        
+        
+    },
+      
+    restrictHeight : function()
+    {
+        var mh = 0;
+        Roo.each(this.innerLists, function(il,i) {
+            var el = this.views[i].getEl();
+            el.dom.style.height = '';
+            var inner = el.dom;
+            var h = Math.max(il.clientHeight, il.offsetHeight, il.scrollHeight);
+            // only adjust heights on other ones..
+            mh = Math.max(h, mh);
+            if (i < 1) {
+                
+                el.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
+                il.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
+               
+            }
+            
+            
+        }, this);
+        
+        this.list.beginUpdate();
+        this.list.setHeight(mh+this.list.getFrameWidth('tb')+this.assetHeight);
+        this.list.alignTo(this.el, this.listAlign);
+        this.list.endUpdate();
+        
+    },
+     
+    
+    // -- store handlers..
+    // private
+    onBeforeLoad : function()
+    {
+        if(!this.hasFocus){
+            return;
+        }
+        this.innerLists[0].update(this.loadingText ?
+               '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
+        this.restrictHeight();
+        this.selectedIndex = -1;
     },
-
     // 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;
+    onLoad : function(a,b,c,d)
+    {
+        if (!this.loadingChildren) {
+            // then we are loading the top level. - hide the children
+            for (var i = 1;i < this.views.length; i++) {
+                this.views[i].getEl().setStyle({ display : 'none' });
+            }
+            var lw = Math.floor(
+                ((this.listWidth * this.maxColumns || Math.max(this.wrap.getWidth(), this.minListWidth)) - this.list.getFrameWidth('lr')) / this.maxColumns
+            );
+        
+             this.list.setWidth(lw); // default to '1'
+
+            
         }
-        var num = this.parseValue(value);
-        if(isNaN(num)){
-            this.markInvalid(String.format(this.nanText, value));
-            return false;
+        if(!this.hasFocus){
+            return;
         }
-        if(num < this.minValue){
-            this.markInvalid(String.format(this.minText, this.minValue));
-            return false;
+        
+        if(this.store.getCount() > 0) {
+            this.expand();
+            this.restrictHeight();   
+        } else {
+            this.onEmptyResults();
         }
-        if(num > this.maxValue){
-            this.markInvalid(String.format(this.maxText, this.maxValue));
-            return false;
+        
+        if (!this.loadingChildren) {
+            this.selectActive();
         }
-        return true;
-    },
-
-    getValue : function(){
-        return this.fixPrecision(this.parseValue(Roo.form.NumberField.superclass.getValue.call(this)));
+        /*
+        this.stores[1].loadData([]);
+        this.stores[2].loadData([]);
+        this.views
+        */    
+    
+        //this.el.focus();
     },
-
+    
+    
     // private
-    parseValue : function(value){
-        value = parseFloat(String(value).replace(this.decimalSeparator, "."));
-        return isNaN(value) ? '' : value;
+    onLoadException : function()
+    {
+        this.collapse();
+        Roo.log(this.store.reader.jsonData);
+        if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
+            Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
+        }
+        
+        
     },
+    // no cleaning of leading spaces on blur here.
+    cleanLeadingSpace : function(e) { },
+    
 
-    // private
-    fixPrecision : function(value){
-        var nan = isNaN(value);
-        if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
-            return nan ? '' : value;
+    onSelectChange : function (view, sels, opts )
+    {
+        var ix = view.getSelectedIndexes();
+         
+        if (opts.list > this.maxColumns - 2) {
+            if (view.store.getCount()<  1) {
+                this.views[opts.list ].getEl().setStyle({ display :   'none' });
+
+            } else  {
+                if (ix.length) {
+                    // used to clear ?? but if we are loading unselected 
+                    this.setFromData(view.store.getAt(ix[0]).data);
+                }
+                
+            }
+            
+            return;
         }
-        return parseFloat(value).toFixed(this.decimalPrecision);
+        
+        if (!ix.length) {
+            // this get's fired when trigger opens..
+           // this.setFromData({});
+            var str = this.stores[opts.list+1];
+            str.data.clear(); // removeall wihtout the fire events..
+            return;
+        }
+        
+        var rec = view.store.getAt(ix[0]);
+         
+        this.setFromData(rec.data);
+        this.fireEvent('select', this, rec, ix[0]);
+        
+        var lw = Math.floor(
+             (
+                (this.listWidth * this.maxColumns || Math.max(this.wrap.getWidth(), this.minListWidth)) - this.list.getFrameWidth('lr')
+             ) / this.maxColumns
+        );
+        this.loadingChildren = true;
+        this.stores[opts.list+1].loadDataFromChildren( rec );
+        this.loadingChildren = false;
+        var dl = this.stores[opts.list+1]. getTotalCount();
+        
+        this.views[opts.list+1].getEl().setHeight( this.innerLists[0].getHeight());
+        
+        this.views[opts.list+1].getEl().setStyle({ display : dl ? 'block' : 'none' });
+        for (var i = opts.list+2; i < this.views.length;i++) {
+            this.views[i].getEl().setStyle({ display : 'none' });
+        }
+        
+        this.innerLists[opts.list+1].setHeight( this.innerLists[0].getHeight());
+        this.list.setWidth(lw * (opts.list + (dl ? 2 : 1)));
+        
+        if (this.isLoading) {
+           // this.selectActive(opts.list);
+        }
+         
     },
-
-    setValue : function(v){
-        v = this.fixPrecision(v);
-        Roo.form.NumberField.superclass.setValue.call(this, String(v).replace(".", this.decimalSeparator));
+    
+    
+    
+    
+    onDoubleClick : function()
+    {
+        this.collapse(); //??
     },
-
+    
+     
+    
+    
+    
     // private
-    decimalPrecisionFcn : function(v){
-        return Math.floor(v);
+    recordToStack : function(store, prop, value, stack)
+    {
+        var cstore = new Roo.data.SimpleStore({
+            //fields : this.store.reader.meta.fields, // we need array reader.. for
+            reader : this.store.reader,
+            data : [ ]
+        });
+        var _this = this;
+        var record  = false;
+        var srec = false;
+        if(store.getCount() < 1){
+            return false;
+        }
+        store.each(function(r){
+            if(r.data[prop] == value){
+                record = r;
+            srec = r;
+                return false;
+            }
+            if (r.data.cn && r.data.cn.length) {
+                cstore.loadDataFromChildren( r);
+                var cret = _this.recordToStack(cstore, prop, value, stack);
+                if (cret !== false) {
+                    record = cret;
+                    srec = r;
+                    return false;
+                }
+            }
+             
+            return true;
+        });
+        if (record == false) {
+            return false
+        }
+        stack.unshift(srec);
+        return record;
     },
-
-    beforeBlur : function(){
-        var v = this.parseValue(this.getRawValue());
-        if(v){
-            this.setValue(v);
+    
+    /*
+     * find the stack of stores that match our value.
+     *
+     * 
+     */
+    
+    selectActive : function ()
+    {
+	// if store is not loaded, then we will need to wait for that to happen first.
+        var stack = [];
+        this.recordToStack(this.store, this.valueField, this.getValue(), stack);
+        for (var i = 0; i < stack.length; i++ ) {
+            this.views[i].select(stack[i].store.indexOf(stack[i]), false, false );
         }
+	
     }
+	
+	 
+    
+    
+    
+    
 });/*
  * Based on:
  * Ext JS Library 1.1.1
@@ -22099,364 +20321,217 @@ Roo.extend(Roo.form.NumberField, Roo.form.TextField,  {
  * 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
+ * @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.DateField = function(config){
-    Roo.form.DateField.superclass.constructor.call(this, config);
-    
-      this.addEvents({
-         
+Roo.form.Checkbox = function(config){
+    Roo.form.Checkbox.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
+         * @event check
+         * Fires when the checkbox is checked or unchecked.
+	     * @param {Roo.form.Checkbox} this This checkbox
+	     * @param {Boolean} checked The new checked value
 	     */
-        'select' : true
-         
+        check : 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,
+Roo.extend(Roo.form.Checkbox, Roo.form.Field,  {
     /**
-     * @cfg {String} disabledDatesText
-     * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
+     * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
      */
-    disabledDatesText : "Disabled",
+    focusClass : undefined,
     /**
-     * @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).
+     * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
      */
-    minValue : null,
+    fieldClass: "x-form-field",
     /**
-     * @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).
+     * @cfg {Boolean} checked True if the the checkbox should render already checked (defaults to false)
      */
-    maxValue : null,
+    checked: false,
     /**
-     * @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}').
+     * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+     * {tag: "input", type: "checkbox", autocomplete: "off"})
      */
-    minText : "The date in this field must be equal to or after {0}",
+    defaultAutoCreate : { tag: "input", type: 'hidden', autocomplete: "off"},
     /**
-     * @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}').
+     * @cfg {String} boxLabel The text that appears beside the checkbox
      */
-    maxText : "The date in this field must be equal to or before {0}",
+    boxLabel : "",
     /**
-     * @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} inputValue The value that should go into the generated input element's value attribute
+     */  
+    inputValue : '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).
+     * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
      */
-    triggerClass : 'x-form-date-trigger',
-    
+     valueOff: '0', // value when not checked..
 
-    /**
-     * @cfg {Boolean} 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"})
-     */ 
+    actionMode : 'viewEl', 
+    //
     // private
-    defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "off"},
+    itemCls : 'x-menu-check-item x-form-item',
+    groupClass : 'x-menu-group-item',
+    inputType : 'hidden',
     
-    // private
-    hiddenField: false,
     
-    onRender : function(ct, position)
-    {
-        Roo.form.DateField.superclass.onRender.call(this, ct, position);
-        if (this.useIso) {
-            //this.el.dom.removeAttribute('name'); 
-            Roo.log("Changing name?");
-            this.el.dom.setAttribute('name', this.name + '____hidden___' ); 
-            this.hiddenField = this.el.insertSibling({ tag:'input', type:'hidden', name: this.name },
-                    'before', true);
-            this.hiddenField.value = this.value ? this.formatDate(this.value, 'Y-m-d') : '';
-            // prevent input submission
-            this.hiddenName = this.name;
-        }
-            
-            
-    },
+    inSetChecked: false, // check that we are not calling self...
     
-    // private
-    validateValue : function(value)
-    {
-        value = this.formatDate(value);
-        if(!Roo.form.DateField.superclass.validateValue.call(this, value)){
-            Roo.log('super failed');
-            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){
-            Roo.log('parse date failed' + svalue);
-            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();
-    },
+    inputElement: false, // real input element?
+    basedOn: false, // ????
     
-    getName: function()
-    {
-        // returns hidden if it's set..
-        if (!this.rendered) {return ''};
-        return !this.hiddenName && this.el.dom.name  ? this.el.dom.name : (this.hiddenName || '');
-        
-    },
+    isFormField: true, // not sure where this is needed!!!!
 
-    /**
-     * 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)) || "";
+    onResize : function(){
+        Roo.form.Checkbox.superclass.onResize.apply(this, arguments);
+        if(!this.boxLabel){
+            this.el.alignTo(this.wrap, 'c-c');
+        }
     },
 
-    /**
-     * 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)
+    initEvents : function(){
+        Roo.form.Checkbox.superclass.initEvents.call(this);
+        this.el.on("click", this.onClick,  this);
+        this.el.on("change", this.onClick,  this);
+    },
 
-//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');
+    getResizeEl : function(){
+        return this.wrap;
+    },
 
-//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)));
-        // make sure the value field is always stored as a date..
-        this.value = this.parseDate(date);
-        
-        
+    getPositionEl : function(){
+        return this.wrap;
     },
 
     // private
-    parseDate : function(value){
-        if(!value || value instanceof Date){
-            return value;
-        }
-        var v = Date.parseDate(value, this.format);
-         if (!v && this.useIso) {
-            v = Date.parseDate(value, 'Y-m-d');
+    onRender : function(ct, position){
+        Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
+        /*
+        if(this.inputValue !== undefined){
+            this.el.dom.value = this.inputValue;
         }
-        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]);
-            }
+        */
+        //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); 
         }
-        return v;
-    },
+        //if(this.checked){
+            this.setChecked(this.checked);
+        //}else{
+            //this.checked = this.el.dom;
+        //}
 
-    // 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);
-        }
-    },
+    initValue : Roo.emptyFn,
 
-    // 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();
+    /**
+     * 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;
         }
-        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.useIso ? 'Y-m-d' : 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?");
+        return this.valueOff;
+        
     },
 
-    beforeBlur : function(){
-        var v = this.parseDate(this.getRawValue());
-        if(v){
-            this.setValue(v);
+	// private
+    onClick : function(){ 
+        if (this.disabled) {
+            return;
         }
+        this.setChecked(!this.checked);
+
+        //if(this.el.dom.checked != this.checked){
+        //    this.setValue(this.el.dom.checked);
+       // }
     },
 
-    /*@
-     * overide
-     * 
+    /**
+     * 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.
      */
-    isDirty : function() {
-        if(this.disabled) {
-            return false;
-        }
+    setValue : function(v,suppressEvent){
         
-        if(typeof(this.startValue) === 'undefined'){
-            return false;
+        
+        //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;
         }
         
-        return String(this.getValue()) !== String(this.startValue);
+    
+        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);
+    },
+    
+    setBoxLabel : function(str)
+    {
+        this.wrap.select('.x-form-cb-label', true).first().dom.innerHTML = str;
     }
+
 });/*
  * Based on:
  * Ext JS Library 1.1.1
@@ -22469,2254 +20544,4460 @@ dateField.setValue('2006-5-4');
  */
  
 /**
- * @class Roo.form.MonthField
- * @extends Roo.form.TriggerField
- * Provides a date input field with a {@link Roo.DatePicker} dropdown and automatic date validation.
-* @constructor
-* Create a new MonthField
-* @param {Object} config
+ * @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.MonthField = function(config){
+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;
+    },
     
-    Roo.form.MonthField.superclass.constructor.call(this, config);
     
-      this.addEvents({
+    onRender : function(ct, position){
+        Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
+        
+        if(this.inputValue !== undefined){
+            this.el.dom.value = this.inputValue;
+        }
          
-        /**
-         * @event select
-         * Fires when a date is selected
-	     * @param {Roo.form.MonthFieeld} combo This combo box
-	     * @param {Date} date The date selected
-	     */
-        'select' : true
+        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.el.dom.checked =   'checked' ;
+        }
          
-    });
+    } 
     
     
-    if(typeof this.minValue == "string") {
-        this.minValue = this.parseDate(this.minValue);
-    }
-    if(typeof this.maxValue == "string") {
-        this.maxValue = this.parseDate(this.maxValue);
+});Roo.rtf = {}; // namespace
+Roo.rtf.Hex = function(hex)
+{
+    this.hexstr = hex;
+};
+Roo.rtf.Paragraph = function(opts)
+{
+    this.content = []; ///??? is that used?
+};Roo.rtf.Span = function(opts)
+{
+    this.value = opts.value;
+};
+
+Roo.rtf.Group = function(parent)
+{
+    // we dont want to acutally store parent - it will make debug a nightmare..
+    this.content = [];
+    this.cn  = [];
+     
+       
+    
+};
+
+Roo.rtf.Group.prototype = {
+    ignorable : false,
+    content: false,
+    cn: false,
+    addContent : function(node) {
+        // could set styles...
+        this.content.push(node);
+    },
+    addChild : function(cn)
+    {
+        this.cn.push(cn);
+    },
+    // only for images really...
+    toDataURL : function()
+    {
+        var mimetype = false;
+        switch(true) {
+            case this.content.filter(function(a) { return a.value == 'pngblip' } ).length > 0: 
+                mimetype = "image/png";
+                break;
+             case this.content.filter(function(a) { return a.value == 'jpegblip' } ).length > 0:
+                mimetype = "image/jpeg";
+                break;
+            default :
+                return 'about:blank'; // ?? error?
+        }
+        
+        
+        var hexstring = this.content[this.content.length-1].value;
+        
+        return 'data:' + mimetype + ';base64,' + btoa(hexstring.match(/\w{2}/g).map(function(a) {
+            return String.fromCharCode(parseInt(a, 16));
+        }).join(""));
     }
-    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 looks like it's normally the {rtf{ .... }}
+Roo.rtf.Document = function()
+{
+    // we dont want to acutally store parent - it will make debug a nightmare..
+    this.rtlch  = [];
+    this.content = [];
+    this.cn = [];
+    
+};
+Roo.extend(Roo.rtf.Document, Roo.rtf.Group, { 
+    addChild : function(cn)
+    {
+        this.cn.push(cn);
+        switch(cn.type) {
+            case 'rtlch': // most content seems to be inside this??
+            case 'listtext':
+            case 'shpinst':
+                this.rtlch.push(cn);
+                return;
+            default:
+                this[cn.type] = cn;
         }
-        this.ddMatch = new RegExp(re + ")");
+        
+    },
+    
+    getElementsByType : function(type)
+    {
+        var ret =  [];
+        this._getElementsByType(type, ret, this.cn, 'rtf');
+        return ret;
+    },
+    _getElementsByType : function (type, ret, search_array, path)
+    {
+        search_array.forEach(function(n,i) {
+            if (n.type == type) {
+                n.path = path + '/' + n.type + ':' + i;
+                ret.push(n);
+            }
+            if (n.cn.length > 0) {
+                this._getElementsByType(type, ret, n.cn, path + '/' + n.type+':'+i);
+            }
+        },this);
     }
+    
+});
+ 
+Roo.rtf.Ctrl = function(opts)
+{
+    this.value = opts.value;
+    this.param = opts.param;
 };
+/**
+ *
+ *
+ * based on this https://github.com/iarna/rtf-parser
+ * it's really only designed to extract pict from pasted RTF 
+ *
+ * usage:
+ *
+ *  var images = new Roo.rtf.Parser().parse(a_string).filter(function(g) { return g.type == 'pict'; });
+ *  
+ *
+ */
 
-Roo.extend(Roo.form.MonthField, 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 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 Y|m/Y|m-y|m-Y|my|mY",
-    /**
-     * @cfg {Array} disabledDays
-     * An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
-     */
-    disabledDays : [0,1,2,3,4,5,6],
-    /**
-     * @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} maxTextf
-     * 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 {Boolean} useIso
-     * if enabled, then the date field will use a hidden field to store the 
-     * real value as iso formated date. default (true)
-     */ 
-    useIso : true,
-    /**
-     * @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: "new-password"},
+
+
+Roo.rtf.Parser = function(text) {
+    //super({objectMode: true})
+    this.text = '';
+    this.parserState = this.parseText;
     
-    // private
-    hiddenField: false,
+    // these are for interpeter...
+    this.doc = {};
+    ///this.parserState = this.parseTop
+    this.groupStack = [];
+    this.hexStore = [];
+    this.doc = false;
     
-    hideMonthPicker : false,
+    this.groups = []; // where we put the return.
     
-    onRender : function(ct, position)
+    for (var ii = 0; ii < text.length; ++ii) {
+        ++this.cpos;
+        
+        if (text[ii] === '\n') {
+            ++this.row;
+            this.col = 1;
+        } else {
+            ++this.col;
+        }
+        this.parserState(text[ii]);
+    }
+    
+    
+    
+};
+Roo.rtf.Parser.prototype = {
+    text : '', // string being parsed..
+    controlWord : '',
+    controlWordParam :  '',
+    hexChar : '',
+    doc : false,
+    group: false,
+    groupStack : false,
+    hexStore : false,
+    
+    
+    cpos : 0, 
+    row : 1, // reportin?
+    col : 1, //
+
+     
+    push : function (el)
     {
-        Roo.form.MonthField.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.value ? this.formatDate(this.value, 'Y-m-d') : '';
-            // prevent input submission
-            this.hiddenName = this.name;
+        var m = 'cmd'+ el.type;
+        if (typeof(this[m]) == 'undefined') {
+            Roo.log('invalid cmd:' + el.type);
+            return;
         }
+        this[m](el);
+        //Roo.log(el);
+    },
+    flushHexStore : function()
+    {
+        if (this.hexStore.length < 1) {
+            return;
+        }
+        var hexstr = this.hexStore.map(
+            function(cmd) {
+                return cmd.value;
+        }).join('');
+        
+        this.group.addContent( new Roo.rtf.Hex( hexstr ));
+              
             
-            
+        this.hexStore.splice(0)
+        
     },
     
-    // private
-    validateValue : function(value)
+    cmdgroupstart : function()
     {
-        value = this.formatDate(value);
-        if(!Roo.form.MonthField.superclass.validateValue.call(this, value)){
-            return false;
+        this.flushHexStore();
+        if (this.group) {
+            this.groupStack.push(this.group);
         }
-        if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
-             return true;
+         // parent..
+        if (this.doc === false) {
+            this.group = this.doc = new Roo.rtf.Document();
+            return;
+            
         }
-        var svalue = value;
-        value = this.parseDate(value);
-        if(!value){
-            this.markInvalid(String.format(this.invalidText, svalue, this.format));
-            return false;
+        this.group = new Roo.rtf.Group(this.group);
+    },
+    cmdignorable : function()
+    {
+        this.flushHexStore();
+        this.group.ignorable = true;
+    },
+    cmdendparagraph : function()
+    {
+        this.flushHexStore();
+        this.group.addContent(new Roo.rtf.Paragraph());
+    },
+    cmdgroupend : function ()
+    {
+        this.flushHexStore();
+        var endingGroup = this.group;
+        
+        
+        this.group = this.groupStack.pop();
+        if (this.group) {
+            this.group.addChild(endingGroup);
         }
-        var time = value.getTime();
-        if(this.minValue && time < this.minValue.getTime()){
-            this.markInvalid(String.format(this.minText, this.formatDate(this.minValue)));
-            return false;
+        
+        
+        
+        var doc = this.group || this.doc;
+        //if (endingGroup instanceof FontTable) {
+        //  doc.fonts = endingGroup.table
+        //} else if (endingGroup instanceof ColorTable) {
+        //  doc.colors = endingGroup.table
+        //} else if (endingGroup !== this.doc && !endingGroup.get('ignorable')) {
+        if (endingGroup.ignorable === false) {
+            //code
+            this.groups.push(endingGroup);
+           // Roo.log( endingGroup );
         }
-        if(this.maxValue && time > this.maxValue.getTime()){
-            this.markInvalid(String.format(this.maxText, this.formatDate(this.maxValue)));
-            return false;
+            //Roo.each(endingGroup.content, function(item)) {
+            //    doc.addContent(item);
+            //}
+            //process.emit('debug', 'GROUP END', endingGroup.type, endingGroup.get('ignorable'))
+        //}
+    },
+    cmdtext : function (cmd)
+    {
+        this.flushHexStore();
+        if (!this.group) { // an RTF fragment, missing the {\rtf1 header
+            //this.group = this.doc
+            return;  // we really don't care about stray text...
         }
-        /*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;
-            	}
-            }
+        this.group.addContent(new Roo.rtf.Span(cmd));
+    },
+    cmdcontrolword : function (cmd)
+    {
+        this.flushHexStore();
+        if (!this.group.type) {
+            this.group.type = cmd.value;
+            return;
         }
-        */
-        var fvalue = this.formatDate(value);
-        /*if(this.ddMatch && this.ddMatch.test(fvalue)){
-            this.markInvalid(String.format(this.disabledDatesText, fvalue));
-            return false;
+        this.group.addContent(new Roo.rtf.Ctrl(cmd));
+        // we actually don't care about ctrl words...
+        return ;
+        /*
+        var method = 'ctrl$' + cmd.value.replace(/-(.)/g, (_, char) => char.toUpperCase())
+        if (this[method]) {
+            this[method](cmd.param)
+        } else {
+            if (!this.group.get('ignorable')) process.emit('debug', method, cmd.param)
         }
         */
-        return true;
     },
-
-    // private
-    // Provides logic to override the default TriggerField.validateBlur which just returns true
-    validateBlur : function(){
-        return !this.menu || !this.menu.isVisible();
+    cmdhexchar : function(cmd) {
+        this.hexStore.push(cmd);
     },
-
-    /**
-     * Returns the current date value of the date field.
-     * @return {Date} The date value
-     */
-    getValue : function(){
-        
-        
+    cmderror : function(cmd) {
+        throw new Exception (cmd.value);
+    },
+    
+    /*
+      _flush (done) {
+        if (this.text !== '\u0000') this.emitText()
+        done()
+      }
+      */
+      
+      
+    parseText : function(c)
+    {
+        if (c === '\\') {
+            this.parserState = this.parseEscapes;
+        } else if (c === '{') {
+            this.emitStartGroup();
+        } else if (c === '}') {
+            this.emitEndGroup();
+        } else if (c === '\x0A' || c === '\x0D') {
+            // cr/lf are noise chars
+        } else {
+            this.text += c;
+        }
+    },
+    
+    parseEscapes: function (c)
+    {
+        if (c === '\\' || c === '{' || c === '}') {
+            this.text += c;
+            this.parserState = this.parseText;
+        } else {
+            this.parserState = this.parseControlSymbol;
+            this.parseControlSymbol(c);
+        }
+    },
+    parseControlSymbol: function(c)
+    {
+        if (c === '~') {
+            this.text += '\u00a0'; // nbsp
+            this.parserState = this.parseText
+        } else if (c === '-') {
+             this.text += '\u00ad'; // soft hyphen
+        } else if (c === '_') {
+            this.text += '\u2011'; // non-breaking hyphen
+        } else if (c === '*') {
+            this.emitIgnorable();
+            this.parserState = this.parseText;
+        } else if (c === "'") {
+            this.parserState = this.parseHexChar;
+        } else if (c === '|') { // formula cacter
+            this.emitFormula();
+            this.parserState = this.parseText;
+        } else if (c === ':') { // subentry in an index entry
+            this.emitIndexSubEntry();
+            this.parserState = this.parseText;
+        } else if (c === '\x0a') {
+            this.emitEndParagraph();
+            this.parserState = this.parseText;
+        } else if (c === '\x0d') {
+            this.emitEndParagraph();
+            this.parserState = this.parseText;
+        } else {
+            this.parserState = this.parseControlWord;
+            this.parseControlWord(c);
+        }
+    },
+    parseHexChar: function (c)
+    {
+        if (/^[A-Fa-f0-9]$/.test(c)) {
+            this.hexChar += c;
+            if (this.hexChar.length >= 2) {
+              this.emitHexChar();
+              this.parserState = this.parseText;
+            }
+            return;
+        }
+        this.emitError("Invalid character \"" + c + "\" in hex literal.");
+        this.parserState = this.parseText;
         
-        return  this.hiddenField ?
-                this.hiddenField.value :
-                this.parseDate(Roo.form.MonthField.superclass.getValue.call(this)) || "";
     },
+    parseControlWord : function(c)
+    {
+        if (c === ' ') {
+            this.emitControlWord();
+            this.parserState = this.parseText;
+        } else if (/^[-\d]$/.test(c)) {
+            this.parserState = this.parseControlWordParam;
+            this.controlWordParam += c;
+        } else if (/^[A-Za-z]$/.test(c)) {
+          this.controlWord += c;
+        } else {
+          this.emitControlWord();
+          this.parserState = this.parseText;
+          this.parseText(c);
+        }
+    },
+    parseControlWordParam : function (c) {
+        if (/^\d$/.test(c)) {
+          this.controlWordParam += c;
+        } else if (c === ' ') {
+          this.emitControlWord();
+          this.parserState = this.parseText;
+        } else {
+          this.emitControlWord();
+          this.parserState = this.parseText;
+          this.parseText(c);
+        }
+    },
+    
+    
+    
+    
+    emitText : function () {
+        if (this.text === '') {
+            return;
+        }
+        this.push({
+            type: 'text',
+            value: this.text,
+            pos: this.cpos,
+            row: this.row,
+            col: this.col
+        });
+        this.text = ''
+    },
+    emitControlWord : function ()
+    {
+        this.emitText();
+        if (this.controlWord === '') {
+            this.emitError('empty control word');
+        } else {
+            this.push({
+                  type: 'controlword',
+                  value: this.controlWord,
+                  param: this.controlWordParam !== '' && Number(this.controlWordParam),
+                  pos: this.cpos,
+                  row: this.row,
+                  col: this.col
+            });
+        }
+        this.controlWord = '';
+        this.controlWordParam = '';
+    },
+    emitStartGroup : function ()
+    {
+        this.emitText();
+        this.push({
+            type: 'groupstart',
+            pos: this.cpos,
+            row: this.row,
+            col: this.col
+        });
+    },
+    emitEndGroup : function ()
+    {
+        this.emitText();
+        this.push({
+            type: 'groupend',
+            pos: this.cpos,
+            row: this.row,
+            col: this.col
+        });
+    },
+    emitIgnorable : function ()
+    {
+        this.emitText();
+        this.push({
+            type: 'ignorable',
+            pos: this.cpos,
+            row: this.row,
+            col: this.col
+        });
+    },
+    emitHexChar : function ()
+    {
+        this.emitText();
+        this.push({
+            type: 'hexchar',
+            value: this.hexChar,
+            pos: this.cpos,
+            row: this.row,
+            col: this.col
+        });
+        this.hexChar = ''
+    },
+    emitError : function (message)
+    {
+      this.emitText();
+      this.push({
+            type: 'error',
+            value: message,
+            row: this.row,
+            col: this.col,
+            char: this.cpos //,
+            //stack: new Error().stack
+        });
+    },
+    emitEndParagraph : function () {
+        this.emitText();
+        this.push({
+            type: 'endparagraph',
+            pos: this.cpos,
+            row: this.row,
+            col: this.col
+        });
+    }
+     
+} ;
+Roo.htmleditor = {};
+ 
+/**
+ * @class Roo.htmleditor.Filter
+ * Base Class for filtering htmleditor stuff. - do not use this directly - extend it.
+ * @cfg {DomElement} node The node to iterate and filter
+ * @cfg {boolean|String|Array} tag Tags to replace 
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
 
-    /**
-     * 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 MonthField.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');
-monthField.setValue(dt);
 
-//Pass a date string (default format):
-monthField.setValue('5/4/06');
+Roo.htmleditor.Filter = function(cfg) {
+    Roo.apply(this.cfg);
+    // this does not actually call walk as it's really just a abstract class
+}
 
-//Pass a date string (custom format):
-monthField.format = 'Y-m-d';
-monthField.setValue('2006-5-4');
-</code></pre>
-     * @param {String/Date} date The date or valid date string
-     */
-    setValue : function(date){
-        Roo.log('month setValue' + date);
-        // can only be first of month..
-        
-        var val = this.parseDate(date);
+
+Roo.htmleditor.Filter.prototype = {
+    
+    node: false,
+    
+    tag: false,
+
+    // overrride to do replace comments.
+    replaceComment : false,
+    
+    // overrride to do replace or do stuff with tags..
+    replaceTag : false,
+    
+    walk : function(dom)
+    {
+        Roo.each( Array.from(dom.childNodes), function( e ) {
+            switch(true) {
+                
+                case e.nodeType == 8 &&  this.replaceComment  !== false: // comment
+                    this.replaceComment(e);
+                    return;
+                
+                case e.nodeType != 1: //not a node.
+                    return;
+                
+                case this.tag === true: // everything
+                case typeof(this.tag) == 'object' && this.tag.indexOf(e.tagName) > -1: // array and it matches.
+                case typeof(this.tag) == 'string' && this.tag == e.tagName: // array and it matches.
+                    if (this.replaceTag && false === this.replaceTag(e)) {
+                        return;
+                    }
+                    if (e.hasChildNodes()) {
+                        this.walk(e);
+                    }
+                    return;
+                
+                default:    // tags .. that do not match.
+                    if (e.hasChildNodes()) {
+                        this.walk(e);
+                    }
+            }
+            
+        }, this);
         
-        if (this.hiddenField) {
-            this.hiddenField.value = this.formatDate(this.parseDate(date), 'Y-m-d');
-        }
-        Roo.form.MonthField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
-        this.value = this.parseDate(date);
-    },
+    }
+}; 
 
-    // private
-    parseDate : function(value){
-        if(!value || value instanceof Date){
-            value = value ? Date.parseDate(value.format('Y-m') + '-01', 'Y-m-d') : null;
-            return value;
-        }
-        var v = Date.parseDate(value, this.format);
-        if (!v && this.useIso) {
-            v = Date.parseDate(value, 'Y-m-d');
-        }
-        if (v) {
-            // 
-            v = Date.parseDate(v.format('Y-m') +'-01', 'Y-m-d');
+/**
+ * @class Roo.htmleditor.FilterAttributes
+ * clean attributes and  styles including http:// etc.. in attribute
+ * @constructor
+* Run a new Attribute Filter
+* @param {Object} config Configuration options
+ */
+Roo.htmleditor.FilterAttributes = function(cfg)
+{
+    Roo.apply(this, cfg);
+    this.attrib_black = this.attrib_black || [];
+    this.attrib_white = this.attrib_white || [];
+
+    this.attrib_clean = this.attrib_clean || [];
+    this.style_white = this.style_white || [];
+    this.style_black = this.style_black || [];
+    this.walk(cfg.node);
+}
+
+Roo.extend(Roo.htmleditor.FilterAttributes, Roo.htmleditor.Filter,
+{
+    tag: true, // all tags
+    
+    attrib_black : false, // array
+    attrib_clean : false,
+    attrib_white : false,
+
+    style_white : false,
+    style_black : false,
+     
+     
+    replaceTag : function(node)
+    {
+        if (!node.attributes || !node.attributes.length) {
+            return true;
         }
         
-        
-        if(!v && this.altFormats){
-            if(!this.altFormatsArray){
-                this.altFormatsArray = this.altFormats.split("|");
+        for (var i = node.attributes.length-1; i > -1 ; i--) {
+            var a = node.attributes[i];
+            //console.log(a);
+            if (this.attrib_white.length && this.attrib_white.indexOf(a.name.toLowerCase()) < 0) {
+                node.removeAttribute(a.name);
+                continue;
             }
-            for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
-                v = Date.parseDate(value, this.altFormatsArray[i]);
+            
+            
+            
+            if (a.name.toLowerCase().substr(0,2)=='on')  {
+                node.removeAttribute(a.name);
+                continue;
+            }
+            
+            
+            if (this.attrib_black.indexOf(a.name.toLowerCase()) > -1) {
+                node.removeAttribute(a.name);
+                continue;
+            }
+            if (this.attrib_clean.indexOf(a.name.toLowerCase()) > -1) {
+                this.cleanAttr(node,a.name,a.value); // fixme..
+                continue;
+            }
+            if (a.name == 'style') {
+                this.cleanStyle(node,a.name,a.value);
+                continue;
+            }
+            /// clean up MS crap..
+            // tecnically this should be a list of valid class'es..
+            
+            
+            if (a.name == 'class') {
+                if (a.value.match(/^Mso/)) {
+                    node.removeAttribute('class');
+                }
+                
+                if (a.value.match(/^body$/)) {
+                    node.removeAttribute('class');
+                }
+                continue;
             }
+            
+            
+            // style cleanup!?
+            // class cleanup?
+            
         }
-        return v;
-    },
-
-    // private
-    formatDate : function(date, fmt){
-        return (!date || !(date instanceof Date)) ?
-               date : date.dateFormat(fmt || this.format);
+        return true; // clean children
     },
-
-    // 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);
+        
+    cleanAttr: function(node, n,v)
+    {
+        
+        if (v.match(/^\./) || v.match(/^\//)) {
+            return;
         }
-    },
-    // private
-    // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
-    onTriggerClick : function(){
-        if(this.disabled){
+        if (v.match(/^(http|https):\/\//)
+            || v.match(/^mailto:/) 
+            || v.match(/^ftp:/)
+            || v.match(/^data:/)
+            ) {
             return;
         }
-        if(this.menu == null){
-            this.menu = new Roo.menu.DateMenu();
-           
+        if (v.match(/^#/)) {
+            return;
         }
+        if (v.match(/^\{/)) { // allow template editing.
+            return;
+        }
+//            Roo.log("(REMOVE TAG)"+ node.tagName +'.' + n + '=' + v);
+        node.removeAttribute(n);
         
-        Roo.apply(this.menu.picker,  {
-            
-            showClear: this.allowBlank,
-            minDate : this.minValue,
-            maxDate : this.maxValue,
-            disabledDatesRE : this.ddMatch,
-            disabledDatesText : this.disabledDatesText,
-            
-            format : this.useIso ? 'Y-m-d' : 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
-        }));
-       
-        
-        var m = this.menu;
-        var p = m.picker;
+    },
+    cleanStyle : function(node,  n,v)
+    {
+        if (v.match(/expression/)) { //XSS?? should we even bother..
+            node.removeAttribute(n);
+            return;
+        }
         
-        // hide month picker get's called when we called by 'before hide';
+        var parts = v.split(/;/);
+        var clean = [];
         
-        var ignorehide = true;
-        p.hideMonthPicker  = function(disableAnim){
-            if (ignorehide) {
-                return;
+        Roo.each(parts, function(p) {
+            p = p.replace(/^\s+/g,'').replace(/\s+$/g,'');
+            if (!p.length) {
+                return true;
             }
-             if(this.monthPicker){
-                Roo.log("hideMonthPicker called");
-                if(disableAnim === true){
-                    this.monthPicker.hide();
-                }else{
-                    this.monthPicker.slideOut('t', {duration:.2});
-                    p.setValue(new Date(m.picker.mpSelYear, m.picker.mpSelMonth, 1));
-                    p.fireEvent("select", this, this.value);
-                    m.hide();
-                }
+            var l = p.split(':').shift().replace(/\s+/g,'');
+            l = l.replace(/^\s+/g,'').replace(/\s+$/g,'');
+            
+            if ( this.style_black.length && (this.style_black.indexOf(l) > -1 || this.style_black.indexOf(l.toLowerCase()) > -1)) {
+                return true;
+            }
+            //Roo.log()
+            // only allow 'c whitelisted system attributes'
+            if ( this.style_white.length &&  style_white.indexOf(l) < 0 && style_white.indexOf(l.toLowerCase()) < 0 ) {
+                return true;
             }
+            
+            
+            clean.push(p);
+            return true;
+        },this);
+        if (clean.length) { 
+            node.setAttribute(n, clean.join(';'));
+        } else {
+            node.removeAttribute(n);
         }
         
-        Roo.log('picker set value');
-        Roo.log(this.getValue());
-        p.setValue(this.getValue() ? this.parseDate(this.getValue()) : new Date());
-        m.show(this.el, 'tl-bl?');
-        ignorehide  = false;
-        // this will trigger hideMonthPicker..
-        
-        
-        // hidden the day picker
-        Roo.select('.x-date-picker table', true).first().dom.style.visibility = "hidden";
-        
+    }
         
         
-      
         
-        p.showMonthPicker.defer(100, p);
     
-        
-       
-    },
+});/**
+ * @class Roo.htmleditor.FilterBlack
+ * remove blacklisted elements.
+ * @constructor
+ * Run a new Blacklisted Filter
+ * @param {Object} config Configuration options
+ */
 
-    beforeBlur : function(){
-        var v = this.parseDate(this.getRawValue());
-        if(v){
-            this.setValue(v);
-        }
-    }
+Roo.htmleditor.FilterBlack = function(cfg)
+{
+    Roo.apply(this, cfg);
+    this.walk(cfg.node);
+}
 
-    /** @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">
+Roo.extend(Roo.htmleditor.FilterBlack, Roo.htmleditor.Filter,
+{
+    tag : true, // all elements.
+   
+    replaceTag : function(n)
+    {
+        n.parentNode.removeChild(n);
+    }
+});
+/**
+ * @class Roo.htmleditor.FilterComment
+ * remove comments.
+ * @constructor
+* Run a new Comments Filter
+* @param {Object} config Configuration options
  */
- 
+Roo.htmleditor.FilterComment = function(cfg)
+{
+    this.walk(cfg.node);
+}
 
-/**
- * @class Roo.form.ComboBox
- * @extends Roo.form.TriggerField
- * A combobox control with support for autocomplete, remote-loading, paging and many other features.
+Roo.extend(Roo.htmleditor.FilterComment, Roo.htmleditor.Filter,
+{
+  
+    replaceComment : function(n)
+    {
+        n.parentNode.removeChild(n);
+    }
+});/**
+ * @class Roo.htmleditor.FilterKeepChildren
+ * remove tags but keep children
  * @constructor
- * Create a new ComboBox.
+ * Run a new Keep Children Filter
  * @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
-        }
 
+Roo.htmleditor.FilterKeepChildren = function(cfg)
+{
+    Roo.apply(this, cfg);
+    if (this.tag === false) {
+        return; // dont walk.. (you can use this to use this just to do a child removal on a single tag )
     }
-    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,
+    this.walk(cfg.node);
+}
+
+Roo.extend(Roo.htmleditor.FilterKeepChildren, Roo.htmleditor.FilterBlack,
+{
     
-    /**
-     * @cfg {Boolean} disableClear Disable showing of clear button.
-     */
-    disableClear : false,
-    /**
-     * @cfg {Boolean} alwaysQuery  Disable caching of results, and always send query
-     */
-    alwaysQuery : false,
+  
+    replaceTag : function(node)
+    {
+        // walk children...
+        //Roo.log(node);
+        var ar = Array.from(node.childNodes);
+        //remove first..
+        for (var i = 0; i < ar.length; i++) {
+            if (ar[i].nodeType == 1) {
+                if (
+                    (typeof(this.tag) == 'object' && this.tag.indexOf(ar[i].tagName) > -1)
+                    || // array and it matches
+                    (typeof(this.tag) == 'string' && this.tag == ar[i].tagName)
+                ) {
+                    this.replaceTag(ar[i]); // child is blacklisted as well...
+                    continue;
+                }
+            }
+        }  
+        ar = Array.from(node.childNodes);
+        for (var i = 0; i < ar.length; i++) {
+         
+            node.removeChild(ar[i]);
+            // what if we need to walk these???
+            node.parentNode.insertBefore(ar[i], node);
+            if (this.tag !== false) {
+                this.walk(ar[i]);
+                
+            }
+        }
+        node.parentNode.removeChild(node);
+        return false; // don't walk children
+        
+        
+    }
+});/**
+ * @class Roo.htmleditor.FilterParagraph
+ * paragraphs cause a nightmare for shared content - this filter is designed to be called ? at various points when editing
+ * like on 'push' to remove the <p> tags and replace them with line breaks.
+ * @constructor
+ * Run a new Paragraph Filter
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.FilterParagraph = function(cfg)
+{
+    // no need to apply config.
+    this.walk(cfg.node);
+}
+
+Roo.extend(Roo.htmleditor.FilterParagraph, Roo.htmleditor.Filter,
+{
     
-    //private
-    addicon : false,
-    editicon: false,
+     
+    tag : 'P',
     
-    // element that contains real text value.. (when hidden is used..)
      
-    // 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');
-             
-             
+    replaceTag : function(node)
+    {
+        
+        if (node.childNodes.length == 1 &&
+            node.childNodes[0].nodeType == 3 &&
+            node.childNodes[0].textContent.trim().length < 1
+            ) {
+            // remove and replace with '<BR>';
+            node.parentNode.replaceChild(node.ownerDocument.createElement('BR'),node);
+            return false; // no need to walk..
         }
-        if(Roo.isGecko){
-            this.el.dom.setAttribute('autocomplete', 'off');
+        var ar = Array.from(node.childNodes);
+        for (var i = 0; i < ar.length; i++) {
+            node.removeChild(ar[i]);
+            // what if we need to walk these???
+            node.parentNode.insertBefore(ar[i], node);
         }
+        // now what about this?
+        // <p> &nbsp; </p>
+        
+        // double BR.
+        node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node);
+        node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node);
+        node.parentNode.removeChild(node);
+        
+        return false;
 
-        var cls = 'x-combo-list';
-
-        this.list = new Roo.Layer({
-            shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
-        });
+    }
+    
+});/**
+ * @class Roo.htmleditor.FilterSpan
+ * filter span's with no attributes out..
+ * @constructor
+ * Run a new Span Filter
+ * @param {Object} config Configuration options
+ */
 
-        var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
-        this.list.setWidth(lw);
-        this.list.swallowEvent('mousewheel');
-        this.assetHeight = 0;
+Roo.htmleditor.FilterSpan = function(cfg)
+{
+    // no need to apply config.
+    this.walk(cfg.node);
+}
 
-        if(this.title){
-            this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
-            this.assetHeight += this.header.getHeight();
+Roo.extend(Roo.htmleditor.FilterSpan, Roo.htmleditor.FilterKeepChildren,
+{
+     
+    tag : 'SPAN',
+     
+ 
+    replaceTag : function(node)
+    {
+        if (node.attributes && node.attributes.length > 0) {
+            return true; // walk if there are any.
         }
+        Roo.htmleditor.FilterKeepChildren.prototype.replaceTag.call(this, node);
+        return false;
+     
+    }
+    
+});/**
+ * @class Roo.htmleditor.FilterTableWidth
+  try and remove table width data - as that frequently messes up other stuff.
+ * 
+ *      was cleanTableWidths.
+ *
+ * Quite often pasting from word etc.. results in tables with column and widths.
+ * This does not work well on fluid HTML layouts - like emails. - so this code should hunt an destroy them..
+ *
+ * @constructor
+ * Run a new Table Filter
+ * @param {Object} config Configuration options
+ */
 
-        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'));
+Roo.htmleditor.FilterTableWidth = function(cfg)
+{
+    // no need to apply config.
+    this.tag = ['TABLE', 'TD', 'TR', 'TH', 'THEAD', 'TBODY' ];
+    this.walk(cfg.node);
+}
+
+Roo.extend(Roo.htmleditor.FilterTableWidth, Roo.htmleditor.Filter,
+{
+     
+     
+    
+    replaceTag: function(node) {
         
-        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 (node.hasAttribute('width')) {
+            node.removeAttribute('width');
         }
         
-        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 (node.hasAttribute("style")) {
+            // pretty basic...
+            
+            var styles = node.getAttribute("style").split(";");
+            var nstyle = [];
+            Roo.each(styles, function(s) {
+                if (!s.match(/:/)) {
+                    return;
+                }
+                var kv = s.split(":");
+                if (kv[0].match(/^\s*(width|min-width)\s*$/)) {
+                    return;
                 }
+                // what ever is left... we allow.
+                nstyle.push(s);
             });
-        }
-        if (this.footer) {
-            this.assetHeight += this.footer.getHeight();
+            node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
+            if (!nstyle.length) {
+                node.removeAttribute('style');
+            }
         }
         
+        return true; // continue doing children..
+    }
+});/**
+ * @class Roo.htmleditor.FilterWord
+ * try and clean up all the mess that Word generates.
+ * 
+ * This is the 'nice version' - see 'Heavy' that white lists a very short list of elements, and multi-filters 
+ 
+ * @constructor
+ * Run a new Span Filter
+ * @param {Object} config Configuration options
+ */
 
-        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.onLoadException, this);
+Roo.htmleditor.FilterWord = function(cfg)
+{
+    // no need to apply config.
+    this.walk(cfg.node);
+}
 
-        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');
+Roo.extend(Roo.htmleditor.FilterWord, Roo.htmleditor.Filter,
+{
+    tag: true,
+     
+    
+    /**
+     * Clean up MS wordisms...
+     */
+    replaceTag : function(node)
+    {
+         
+        // no idea what this does - span with text, replaceds with just text.
+        if(
+                node.nodeName == 'SPAN' &&
+                !node.hasAttributes() &&
+                node.childNodes.length == 1 &&
+                node.firstChild.nodeName == "#text"  
+        ) {
+            var textNode = node.firstChild;
+            node.removeChild(textNode);
+            if (node.getAttribute('lang') != 'zh-CN') {   // do not space pad on chinese characters..
+                node.parentNode.insertBefore(node.ownerDocument.createTextNode(" "), node);
+            }
+            node.parentNode.insertBefore(textNode, node);
+            if (node.getAttribute('lang') != 'zh-CN') {   // do not space pad on chinese characters..
+                node.parentNode.insertBefore(node.ownerDocument.createTextNode(" ") , node);
+            }
+            
+            node.parentNode.removeChild(node);
+            return false; // dont do chidren - we have remove our node - so no need to do chdhilren?
         }
-        if(!this.editable){
-            this.editable = true;
-            this.setEditable(false);
-        }  
         
+   
         
-        if (typeof(this.events.add.listeners) != 'undefined') {
+        if (node.tagName.toLowerCase().match(/^(style|script|applet|embed|noframes|noscript)$/)) {
+            node.parentNode.removeChild(node);
+            return false; // dont do chidlren
+        }
+        //Roo.log(node.tagName);
+        // remove - but keep children..
+        if (node.tagName.toLowerCase().match(/^(meta|link|\\?xml:|st1:|o:|v:|font)/)) {
+            //Roo.log('-- removed');
+            while (node.childNodes.length) {
+                var cn = node.childNodes[0];
+                node.removeChild(cn);
+                node.parentNode.insertBefore(cn, node);
+                // move node to parent - and clean it..
+                this.replaceTag(cn);
+            }
+            node.parentNode.removeChild(node);
+            /// no need to iterate chidlren = it's got none..
+            //this.iterateChildren(node, this.cleanWord);
+            return false; // no need to iterate children.
+        }
+        // clean styles
+        if (node.className.length) {
             
-            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);
+            var cn = node.className.split(/\W+/);
+            var cna = [];
+            Roo.each(cn, function(cls) {
+                if (cls.match(/Mso[a-zA-Z]+/)) {
+                    return;
+                }
+                cna.push(cls);
+            });
+            node.className = cna.length ? cna.join(' ') : '';
+            if (!cna.length) {
+                node.removeAttribute("class");
+            }
         }
-        if (typeof(this.events.edit.listeners) != 'undefined') {
+        
+        if (node.hasAttribute("lang")) {
+            node.removeAttribute("lang");
+        }
+        
+        if (node.hasAttribute("style")) {
             
-            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');
+            var styles = node.getAttribute("style").split(";");
+            var nstyle = [];
+            Roo.each(styles, function(s) {
+                if (!s.match(/:/)) {
+                    return;
+                }
+                var kv = s.split(":");
+                if (kv[0].match(/^(mso-|line|font|background|margin|padding|color)/)) {
+                    return;
+                }
+                // what ever is left... we allow.
+                nstyle.push(s);
+            });
+            node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
+            if (!nstyle.length) {
+                node.removeAttribute('style');
             }
-            this.editicon.on('click', function(e) {
-                
-                // we fire even  if inothing is selected..
-                this.fireEvent('edit', this, this.lastData );
-                
-            }, this);
         }
+        return true; // do children
         
         
         
-    },
-
-    // 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);
-                this.fireEvent("specialkey", this, e);
-                return true;
-            },
-
-            scope : this,
+    }
+});
+/**
+ * @class Roo.htmleditor.FilterStyleToTag
+ * part of the word stuff... - certain 'styles' should be converted to tags.
+ * eg.
+ *   font-weight: bold -> bold
+ *   ?? super / subscrit etc..
+ * 
+ * @constructor
+* Run a new style to tag filter.
+* @param {Object} config Configuration options
+ */
+Roo.htmleditor.FilterStyleToTag = function(cfg)
+{
+    
+    this.tags = {
+        B  : [ 'fontWeight' , 'bold'],
+        I :  [ 'fontStyle' , 'italic'],
+        //pre :  [ 'font-style' , 'italic'],
+        // h1.. h6 ?? font-size?
+        SUP : [ 'verticalAlign' , 'super' ],
+        SUB : [ 'verticalAlign' , 'sub' ]
+        
+        
+    };
+    
+    Roo.apply(this, cfg);
+     
+    
+    this.walk(cfg.node);
+    
+    
+    
+}
 
-            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);
+Roo.extend(Roo.htmleditor.FilterStyleToTag, Roo.htmleditor.Filter,
+{
+    tag: true, // all tags
+    
+    tags : false,
+    
+    
+    replaceTag : function(node)
+    {
+        
+        
+        if (node.getAttribute("style") === null) {
+            return true;
         }
-        if(this.editable !== false){
-            this.el.on("keyup", this.onKeyUp, this);
+        var inject = [];
+        for (var k in this.tags) {
+            if (node.style[this.tags[k][0]] == this.tags[k][1]) {
+                inject.push(k);
+                node.style.removeProperty(this.tags[k][0]);
+            }
         }
-        if(this.forceSelection){
-            this.on('blur', this.doForce, this);
+        if (!inject.length) {
+            return true; 
         }
-    },
+        var cn = Array.from(node.childNodes);
+        var nn = node;
+        Roo.each(inject, function(t) {
+            var nc = node.ownerDocument.createElement(t);
+            nn.appendChild(nc);
+            nn = nc;
+        });
+        for(var i = 0;i < cn.length;cn++) {
+            node.removeChild(cn[i]);
+            nn.appendChild(cn[i]);
+        }
+        return true /// iterate thru
+    }
+    
+})/**
+ * @class Roo.htmleditor.FilterLongBr
+ * BR/BR/BR - keep a maximum of 2...
+ * @constructor
+ * Run a new Long BR Filter
+ * @param {Object} config Configuration options
+ */
 
-    onDestroy : function(){
-        if(this.view){
-            this.view.setStore(null);
-            this.view.el.removeAllListeners();
-            this.view.el.remove();
-            this.view.purgeListeners();
+Roo.htmleditor.FilterLongBr = function(cfg)
+{
+    // no need to apply config.
+    this.walk(cfg.node);
+}
+
+Roo.extend(Roo.htmleditor.FilterLongBr, Roo.htmleditor.Filter,
+{
+    
+     
+    tag : 'BR',
+    
+     
+    replaceTag : function(node)
+    {
+        
+        var ps = node.nextSibling;
+        while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) {
+            ps = ps.nextSibling;
         }
-        if(this.list){
-            this.list.destroy();
+        
+        if (!ps &&  [ 'TD', 'TH', 'LI', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(node.parentNode.tagName) > -1) { 
+            node.parentNode.removeChild(node); // remove last BR inside one fo these tags
+            return false;
         }
-        if(this.store){
-            this.store.un('beforeload', this.onBeforeLoad, this);
-            this.store.un('load', this.onLoad, this);
-            this.store.un('loadexception', this.onLoadException, this);
+        
+        if (!ps || ps.nodeType != 1) {
+            return false;
         }
-        Roo.form.ComboBox.superclass.onDestroy.call(this);
-    },
-
-    // private
-    fireKey : function(e){
-        if(e.isNavKeyPress() && !this.list.isVisible()){
-            this.fireEvent("specialkey", this, e);
+        
+        if (!ps || ps.tagName != 'BR') {
+           
+            return false;
         }
-    },
-
-    // private
-    onResize: function(w, h){
-        Roo.form.ComboBox.superclass.onResize.apply(this, arguments);
         
-        if(typeof w != 'number'){
-            // we do not handle it!?!?
-            return;
+        
+        
+        
+        
+        if (!node.previousSibling) {
+            return false;
         }
-        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');
+        var ps = node.previousSibling;
         
-        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'));
+        while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) {
+            ps = ps.previousSibling;
+        }
+        if (!ps || ps.nodeType != 1) {
+            return false;
+        }
+        // if header or BR before.. then it's a candidate for removal.. - as we only want '2' of these..
+        if (!ps || [ 'BR', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(ps.tagName) < 0) {
+            return false;
         }
         
+        node.parentNode.removeChild(node); // remove me...
+        
+        return false; // no need to do children
+
+    }
+    
+}); 
+
+/**
+ * @class Roo.htmleditor.FilterBlock
+ * removes id / data-block and contenteditable that are associated with blocks
+ * usage should be done on a cloned copy of the dom
+ * @constructor
+* Run a new Attribute Filter { node : xxxx }}
+* @param {Object} config Configuration options
+ */
+Roo.htmleditor.FilterBlock = function(cfg)
+{
+    Roo.apply(this, cfg);
+    var qa = cfg.node.querySelectorAll;
+    this.removeAttributes('data-block');
+    this.removeAttributes('contenteditable');
+    this.removeAttributes('id');
     
+}
+
+Roo.apply(Roo.htmleditor.FilterBlock.prototype,
+{
+    node: true, // all tags
+     
+     
+    removeAttributes : function(attr)
+    {
+        var ar = this.node.querySelectorAll('*[' + attr + ']');
+        for (var i =0;i<ar.length;i++) {
+            ar[i].removeAttribute(attr);
+        }
+    }
         
-    },
+        
+        
+    
+});
+/***
+ * This is based loosely on tinymce 
+ * @class Roo.htmleditor.TidySerializer
+ * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
+ * @constructor
+ * @method Serializer
+ * @param {Object} settings Name/value settings object.
+ */
+
+
+Roo.htmleditor.TidySerializer = function(settings)
+{
+    Roo.apply(this, settings);
+    
+    this.writer = new Roo.htmleditor.TidyWriter(settings);
+    
+    
 
+};
+Roo.htmleditor.TidySerializer.prototype = {
+    
     /**
-     * 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
+     * @param {boolean} inner do the inner of the node.
      */
-    setEditable : function(value){
-        if(value == this.editable){
+    inner : false,
+    
+    writer : false,
+    
+    /**
+    * Serializes the specified node into a string.
+    *
+    * @example
+    * new tinymce.html.Serializer().serialize(new tinymce.html.DomParser().parse('<p>text</p>'));
+    * @method serialize
+    * @param {DomElement} node Node instance to serialize.
+    * @return {String} String with HTML based on DOM tree.
+    */
+    serialize : function(node) {
+        
+        // = settings.validate;
+        var writer = this.writer;
+        var self  = this;
+        this.handlers = {
+            // #text
+            3: function(node) {
+                
+                writer.text(node.nodeValue, node);
+            },
+            // #comment
+            8: function(node) {
+                writer.comment(node.nodeValue);
+            },
+            // Processing instruction
+            7: function(node) {
+                writer.pi(node.name, node.nodeValue);
+            },
+            // Doctype
+            10: function(node) {
+                writer.doctype(node.nodeValue);
+            },
+            // CDATA
+            4: function(node) {
+                writer.cdata(node.nodeValue);
+            },
+            // Document fragment
+            11: function(node) {
+                node = node.firstChild;
+                if (!node) {
+                    return;
+                }
+                while(node) {
+                    self.walk(node);
+                    node = node.nextSibling
+                }
+            }
+        };
+        writer.reset();
+        1 != node.nodeType || this.inner ? this.handlers[11](node) : this.walk(node);
+        return writer.getContent();
+    },
+
+    walk: function(node)
+    {
+        var attrName, attrValue, sortedAttrs, i, l, elementRule,
+            handler = this.handlers[node.nodeType];
+            
+        if (handler) {
+            handler(node);
             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');
+    
+        var name = node.nodeName;
+        var isEmpty = node.childNodes.length < 1;
+      
+        var writer = this.writer;
+        var attrs = node.attributes;
+        // Sort attributes
+        
+        writer.start(node.nodeName, attrs, isEmpty, node);
+        if (isEmpty) {
+            return;
         }
-    },
-
-    // private
-    onBeforeLoad : function(){
-        if(!this.hasFocus){
+        node = node.firstChild;
+        if (!node) {
+            writer.end(name);
             return;
         }
-        this.innerList.update(this.loadingText ?
-               '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
-        this.restrictHeight();
-        this.selectedIndex = -1;
-    },
+        while (node) {
+            this.walk(node);
+            node = node.nextSibling;
+        }
+        writer.end(name);
+        
+    
+    }
+    // Serialize element and treat all non elements as fragments
+   
+}; 
+
+/***
+ * This is based loosely on tinymce 
+ * @class Roo.htmleditor.TidyWriter
+ * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
+ *
+ * Known issues?
+ * - not tested much with 'PRE' formated elements.
+ * 
+ *
+ *
+ */
+
+Roo.htmleditor.TidyWriter = function(settings)
+{
+    
+    // indent, indentBefore, indentAfter, encode, htmlOutput, html = [];
+    Roo.apply(this, settings);
+    this.html = [];
+    this.state = [];
+     
+    this.encode = Roo.htmleditor.TidyEntities.getEncodeFunc(settings.entity_encoding || 'raw', settings.entities);
+  
+}
+Roo.htmleditor.TidyWriter.prototype = {
 
-    // private
-    onLoad : function(){
-        if(!this.hasFocus){
-            return;
+ 
+    state : false,
+    
+    indent :  '  ',
+    
+    // part of state...
+    indentstr : '',
+    in_pre: false,
+    in_inline : false,
+    last_inline : false,
+    encode : false,
+     
+    
+            /**
+    * Writes the a start element such as <p id="a">.
+    *
+    * @method start
+    * @param {String} name Name of the element.
+    * @param {Array} attrs Optional attribute array or undefined if it hasn't any.
+    * @param {Boolean} empty Optional empty state if the tag should end like <br />.
+    */
+    start: function(name, attrs, empty, node)
+    {
+        var i, l, attr, value;
+        
+        // there are some situations where adding line break && indentation will not work. will not work.
+        // <span / b / i ... formating?
+        
+        var in_inline = this.in_inline || Roo.htmleditor.TidyWriter.inline_elements.indexOf(name) > -1;
+        var in_pre    = this.in_pre    || Roo.htmleditor.TidyWriter.whitespace_elements.indexOf(name) > -1;
+        
+        var is_short   = empty ? Roo.htmleditor.TidyWriter.shortend_elements.indexOf(name) > -1 : false;
+        
+        var add_lb = name == 'BR' ? false : in_inline;
+        
+        if (!add_lb && !this.in_pre && this.lastElementEndsWS()) {
+            i_inline = false;
         }
-        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);
+
+        var indentstr =  this.indentstr;
+        
+        // e_inline = elements that can be inline, but still allow \n before and after?
+        // only 'BR' ??? any others?
+        
+        // ADD LINE BEFORE tage
+        if (!this.in_pre) {
+            if (in_inline) {
+                //code
+                if (name == 'BR') {
+                    this.addLine();
+                } else if (this.lastElementEndsWS()) {
+                    this.addLine();
+                } else{
+                    // otherwise - no new line. (and dont indent.)
+                    indentstr = '';
                 }
+                
+            } else {
+                this.addLine();
             }
-        }else{
-            this.onEmptyResults();
+        } else {
+            indentstr = '';
         }
-        //this.el.focus();
-    },
-    // private
-    onLoadException : function()
-    {
-        this.collapse();
-        Roo.log(this.store.reader.jsonData);
-        if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
-            Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
+        
+        this.html.push(indentstr + '<', name.toLowerCase());
+        
+        if (attrs) {
+            for (i = 0, l = attrs.length; i < l; i++) {
+                attr = attrs[i];
+                this.html.push(' ', attr.name, '="', this.encode(attr.value, true), '"');
+            }
         }
+     
+        if (empty) {
+            if (is_short) {
+                this.html[this.html.length] = '/>';
+            } else {
+                this.html[this.html.length] = '></' + name.toLowerCase() + '>';
+            }
+            var e_inline = name == 'BR' ? false : this.in_inline;
+            
+            if (!e_inline && !this.in_pre) {
+                this.addLine();
+            }
+            return;
         
+        }
+        // not empty..
+        this.html[this.html.length] = '>';
         
-    },
-    // 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);
+        // there is a special situation, where we need to turn on in_inline - if any of the imediate chidlren are one of these.
+        /*
+        if (!in_inline && !in_pre) {
+            var cn = node.firstChild;
+            while(cn) {
+                if (Roo.htmleditor.TidyWriter.inline_elements.indexOf(cn.nodeName) > -1) {
+                    in_inline = true
+                    break;
+                }
+                cn = cn.nextSibling;
             }
+             
         }
-    },
-
-    // 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);
+        */
+        
+        
+        this.pushState({
+            indentstr : in_pre   ? '' : (this.indentstr + this.indent),
+            in_pre : in_pre,
+            in_inline :  in_inline
+        });
+        // add a line after if we are not in a
+        
+        if (!in_inline && !in_pre) {
+            this.addLine();
         }
+        
+            
+         
+        
     },
-
-    /**
-     * 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 : '';
+    
+    lastElementEndsWS : function()
+    {
+        var value = this.html.length > 0 ? this.html[this.html.length-1] : false;
+        if (value === false) {
+            return true;
         }
-        return Roo.form.ComboBox.superclass.getValue.call(this);
+        return value.match(/\s+$/);
+        
     },
-
+    
     /**
-     * Clears any text/value currently set in the field
+     * Writes the a end element such as </p>.
+     *
+     * @method end
+     * @param {String} name Name of the element.
      */
-    clearValue : function(){
-        if(this.hiddenField){
-            this.hiddenField.value = '';
+    end: function(name) {
+        var value;
+        this.popState();
+        var indentstr = '';
+        var in_inline = this.in_inline || Roo.htmleditor.TidyWriter.inline_elements.indexOf(name) > -1;
+        
+        if (!this.in_pre && !in_inline) {
+            this.addLine();
+            indentstr  = this.indentstr;
         }
-        this.value = '';
-        this.setRawValue('');
-        this.lastSelectionText = '';
+        this.html.push(indentstr + '</', name.toLowerCase(), '>');
+        this.last_inline = in_inline;
         
+        // pop the indent state..
     },
-
     /**
-     * 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
+     * Writes a text node.
+     *
+     * In pre - we should not mess with the contents.
+     * 
+     *
+     * @method text
+     * @param {String} text String to write out.
+     * @param {Boolean} raw Optional raw state if true the contents wont get encoded.
      */
-    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;
-            }
+    text: function(text, node)
+    {
+        // if not in whitespace critical
+        if (text.length < 1) {
+            return;
         }
-        this.lastSelectionText = text;
-        if(this.hiddenField){
-            this.hiddenField.value = v;
+        if (this.in_pre) {
+            this.html[this.html.length] =  text;
+            return;   
         }
-        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.in_inline) {
+            text = text.replace(/\s+/g,' '); // all white space inc line breaks to a slingle' '
+            if (text != ' ') {
+                text = text.replace(/\s+/,' ');  // all white space to single white space
+                
+                    
+                // if next tag is '<BR>', then we can trim right..
+                if (node.nextSibling &&
+                    node.nextSibling.nodeType == 1 &&
+                    node.nextSibling.nodeName == 'BR' )
+                {
+                    text = text.replace(/\s+$/g,'');
+                }
+                // if previous tag was a BR, we can also trim..
+                if (node.previousSibling &&
+                    node.previousSibling.nodeType == 1 &&
+                    node.previousSibling.nodeName == 'BR' )
+                {
+                    text = this.indentstr +  text.replace(/^\s+/g,'');
+                }
+                if (text.match(/\n/)) {
+                    text = text.replace(
+                        /(?![^\n]{1,64}$)([^\n]{1,64})\s/g, '$1\n' + this.indentstr
+                    );
+                    // remoeve the last whitespace / line break.
+                    text = text.replace(/\n\s+$/,'');
+                }
+                // repace long lines
+                
+            }
+             
+            this.html[this.html.length] =  text;
+            return;   
         }
+        // see if previous element was a inline element.
+        var indentstr = this.indentstr;
+   
+        text = text.replace(/\s+/g," "); // all whitespace into single white space.
         
-        if(this.valueField){
-            vv = !o || typeof(o[this.valueField]) == 'undefined' ? dv : o[this.valueField];
+        // should trim left?
+        if (node.previousSibling &&
+            node.previousSibling.nodeType == 1 &&
+            Roo.htmleditor.TidyWriter.inline_elements.indexOf(node.previousSibling.nodeName) > -1)
+        {
+            indentstr = '';
+            
+        } else {
+            this.addLine();
+            text = text.replace(/^\s+/,''); // trim left
+          
         }
-        if(this.hiddenField){
-            this.hiddenField.value = vv;
+        // should trim right?
+        if (node.nextSibling &&
+            node.nextSibling.nodeType == 1 &&
+            Roo.htmleditor.TidyWriter.inline_elements.indexOf(node.nextSibling.nodeName) > -1)
+        {
+          // noop
             
-            this.lastSelectionText = dv;
-            Roo.form.ComboBox.superclass.setValue.call(this, dv);
-            this.value = vv;
-            return;
+        }  else {
+            text = text.replace(/\s+$/,''); // trim right
         }
-        // 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.resetValue);
-        this.clearInvalid();
-        this.lastData = false;
-        if (this.view) {
-            this.view.clearSelections();
-        }
-    },
-    // 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 true;
-            });
-        }
-        return record;
-    },
-    
-    getName: function()
-    {
-        // returns hidden if it's set..
-        if (!this.rendered) {return ''};
-        return !this.hiddenName && this.el.dom.name  ? this.el.dom.name : (this.hiddenName || '');
         
-    },
-    // private
-    onViewMove : function(e, t){
-        this.inKeyMode = false;
-    },
-
-    // private
-    onViewOver : function(e, t){
-        if(this.inKeyMode){ // prevent key nav and mouse over conflicts
+        if (text.length < 1) {
             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();
+        if (!text.match(/\n/)) {
+            this.html.push(indentstr + text);
+            return;
         }
+        
+        text = this.indentstr + text.replace(
+            /(?![^\n]{1,64}$)([^\n]{1,64})\s/g, '$1\n' + this.indentstr
+        );
+        // remoeve the last whitespace / line break.
+        text = text.replace(/\s+$/,''); 
+        
+        this.html.push(text);
+        
+        // split and indent..
+        
+        
     },
-
-    // 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();
+    /**
+     * Writes a cdata node such as <![CDATA[data]]>.
+     *
+     * @method cdata
+     * @param {String} text String to write out inside the cdata.
+     */
+    cdata: function(text) {
+        this.html.push('<![CDATA[', text, ']]>');
     },
-
     /**
-     * Returns true if the dropdown list is expanded, else false.
+    * Writes a comment node such as <!-- Comment -->.
+    *
+    * @method cdata
+    * @param {String} text String to write out inside the comment.
+    */
+   comment: function(text) {
+       this.html.push('<!--', text, '-->');
+   },
+    /**
+     * Writes a PI node such as <?xml attr="value" ?>.
+     *
+     * @method pi
+     * @param {String} name Name of the pi.
+     * @param {String} text String to write out inside the pi.
      */
-    isExpanded : function(){
-        return this.list.isVisible();
+    pi: function(name, text) {
+        text ? this.html.push('<?', name, ' ', this.encode(text), '?>') : this.html.push('<?', name, '?>');
+        this.indent != '' && this.html.push('\n');
     },
-
     /**
-     * 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
+     * Writes a doctype node such as <!DOCTYPE data>.
+     *
+     * @method doctype
+     * @param {String} text String to write out inside the doctype.
      */
-    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;
+    doctype: function(text) {
+        this.html.push('<!DOCTYPE', text, '>', this.indent != '' ? '\n' : '');
     },
-
     /**
-     * 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)
+     * Resets the internal buffer if one wants to reuse the writer.
+     *
+     * @method reset
+     */
+    reset: function() {
+        this.html.length = 0;
+        this.state = [];
+        this.pushState({
+            indentstr : '',
+            in_pre : false, 
+            in_inline : false
+        })
+    },
+    /**
+     * Returns the contents that got serialized.
+     *
+     * @method getContent
+     * @return {String} HTML contents that got written down.
      */
-    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);
-            }
-        }
+    getContent: function() {
+        return this.html.join('').replace(/\n$/, '');
     },
-
-    // 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);
-            }
-        }
+    
+    pushState : function(cfg)
+    {
+        this.state.push(cfg);
+        Roo.apply(this, cfg);
     },
-
-    // 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);
-            }
+    
+    popState : function()
+    {
+        if (this.state.length < 1) {
+            return; // nothing to push
         }
-    },
-
-    // private
-    onKeyUp : function(e){
-        if(this.editable !== false && !e.isSpecialKey()){
-            this.lastKey = e.getKey();
-            this.dqTask.delay(this.queryDelay);
+        var cfg = {
+            in_pre: false,
+            indentstr : ''
+        };
+        this.state.pop();
+        if (this.state.length > 0) {
+            cfg = this.state[this.state.length-1]; 
         }
+        Roo.apply(this, cfg);
     },
+    
+    addLine: function()
+    {
+        if (this.html.length < 1) {
+            return;
+        }
+        
+        
+        var value = this.html[this.html.length - 1];
+        if (value.length > 0 && '\n' !== value) {
+            this.html.push('\n');
+        }
+    }
+    
+    
+//'pre script noscript style textarea video audio iframe object code'
+// shortended... 'area base basefont br col frame hr img input isindex link  meta param embed source wbr track');
+// inline 
+};
 
-    // private
-    validateBlur : function(){
-        return !this.list || !this.list.isVisible();   
-    },
-
-    // private
-    initQuery : function(){
-        this.doQuery(this.getRawValue());
-    },
+Roo.htmleditor.TidyWriter.inline_elements = [
+        'SPAN','STRONG','B','EM','I','FONT','STRIKE','U','VAR',
+        'CITE','DFN','CODE','MARK','Q','SUP','SUB','SAMP', 'A'
+];
+Roo.htmleditor.TidyWriter.shortend_elements = [
+    'AREA','BASE','BASEFONT','BR','COL','FRAME','HR','IMG','INPUT',
+    'ISINDEX','LINK','','META','PARAM','EMBED','SOURCE','WBR','TRACK'
+];
 
-    // private
-    doForce : function(){
-        if(this.el.dom.value.length > 0){
-            this.el.dom.value =
-                this.lastSelectionText === undefined ? '' : this.lastSelectionText;
-             
-        }
-    },
+Roo.htmleditor.TidyWriter.whitespace_elements = [
+    'PRE','SCRIPT','NOSCRIPT','STYLE','TEXTAREA','VIDEO','AUDIO','IFRAME','OBJECT','CODE'
+];/***
+ * This is based loosely on tinymce 
+ * @class Roo.htmleditor.TidyEntities
+ * @static
+ * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
+ *
+ * Not 100% sure this is actually used or needed.
+ */
 
+Roo.htmleditor.TidyEntities = {
+    
     /**
-     * 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)
+     * initialize data..
      */
-    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();   
-            }
-        }
+    init : function (){
+     
+        this.namedEntities = this.buildEntitiesLookup(this.namedEntitiesData, 32);
+       
     },
 
-    // private
-    getParams : function(q){
-        var p = {};
-        //p[this.queryParam] = q;
-        if(this.pageSize){
-            p.start = 0;
-            p.limit = this.pageSize;
-        }
-        return p;
-    },
 
+    buildEntitiesLookup: function(items, radix) {
+        var i, chr, entity, lookup = {};
+        if (!items) {
+            return {};
+        }
+        items = typeof(items) == 'string' ? items.split(',') : items;
+        radix = radix || 10;
+        // Build entities lookup table
+        for (i = 0; i < items.length; i += 2) {
+            chr = String.fromCharCode(parseInt(items[i], radix));
+            // Only add non base entities
+            if (!this.baseEntities[chr]) {
+                entity = '&' + items[i + 1] + ';';
+                lookup[chr] = entity;
+                lookup[entity] = chr;
+            }
+        }
+        return lookup;
+        
+    },
+    
+    asciiMap : {
+            128: '€',
+            130: '‚',
+            131: 'ƒ',
+            132: '„',
+            133: '…',
+            134: '†',
+            135: '‡',
+            136: 'ˆ',
+            137: '‰',
+            138: 'Å ',
+            139: '‹',
+            140: 'Œ',
+            142: 'Ž',
+            145: '‘',
+            146: '’',
+            147: '“',
+            148: '”',
+            149: '•',
+            150: '–',
+            151: '—',
+            152: '˜',
+            153: '™',
+            154: 'Å¡',
+            155: '›',
+            156: 'œ',
+            158: 'ž',
+            159: 'Ÿ'
+    },
+    // Raw entities
+    baseEntities : {
+        '"': '&quot;',
+        // Needs to be escaped since the YUI compressor would otherwise break the code
+        '\'': '&#39;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '&': '&amp;',
+        '`': '&#96;'
+    },
+    // Reverse lookup table for raw entities
+    reverseEntities : {
+        '&lt;': '<',
+        '&gt;': '>',
+        '&amp;': '&',
+        '&quot;': '"',
+        '&apos;': '\''
+    },
+    
+    attrsCharsRegExp : /[&<>\"\u0060\u007E-\uD7FF\uE000-\uFFEF]|[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
+    textCharsRegExp : /[<>&\u007E-\uD7FF\uE000-\uFFEF]|[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
+    rawCharsRegExp : /[<>&\"\']/g,
+    entityRegExp : /&#([a-z0-9]+);?|&([a-z0-9]+);/gi,
+    namedEntities  : false,
+    namedEntitiesData : [ 
+        '50',
+        'nbsp',
+        '51',
+        'iexcl',
+        '52',
+        'cent',
+        '53',
+        'pound',
+        '54',
+        'curren',
+        '55',
+        'yen',
+        '56',
+        'brvbar',
+        '57',
+        'sect',
+        '58',
+        'uml',
+        '59',
+        'copy',
+        '5a',
+        'ordf',
+        '5b',
+        'laquo',
+        '5c',
+        'not',
+        '5d',
+        'shy',
+        '5e',
+        'reg',
+        '5f',
+        'macr',
+        '5g',
+        'deg',
+        '5h',
+        'plusmn',
+        '5i',
+        'sup2',
+        '5j',
+        'sup3',
+        '5k',
+        'acute',
+        '5l',
+        'micro',
+        '5m',
+        'para',
+        '5n',
+        'middot',
+        '5o',
+        'cedil',
+        '5p',
+        'sup1',
+        '5q',
+        'ordm',
+        '5r',
+        'raquo',
+        '5s',
+        'frac14',
+        '5t',
+        'frac12',
+        '5u',
+        'frac34',
+        '5v',
+        'iquest',
+        '60',
+        'Agrave',
+        '61',
+        'Aacute',
+        '62',
+        'Acirc',
+        '63',
+        'Atilde',
+        '64',
+        'Auml',
+        '65',
+        'Aring',
+        '66',
+        'AElig',
+        '67',
+        'Ccedil',
+        '68',
+        'Egrave',
+        '69',
+        'Eacute',
+        '6a',
+        'Ecirc',
+        '6b',
+        'Euml',
+        '6c',
+        'Igrave',
+        '6d',
+        'Iacute',
+        '6e',
+        'Icirc',
+        '6f',
+        'Iuml',
+        '6g',
+        'ETH',
+        '6h',
+        'Ntilde',
+        '6i',
+        'Ograve',
+        '6j',
+        'Oacute',
+        '6k',
+        'Ocirc',
+        '6l',
+        'Otilde',
+        '6m',
+        'Ouml',
+        '6n',
+        'times',
+        '6o',
+        'Oslash',
+        '6p',
+        'Ugrave',
+        '6q',
+        'Uacute',
+        '6r',
+        'Ucirc',
+        '6s',
+        'Uuml',
+        '6t',
+        'Yacute',
+        '6u',
+        'THORN',
+        '6v',
+        'szlig',
+        '70',
+        'agrave',
+        '71',
+        'aacute',
+        '72',
+        'acirc',
+        '73',
+        'atilde',
+        '74',
+        'auml',
+        '75',
+        'aring',
+        '76',
+        'aelig',
+        '77',
+        'ccedil',
+        '78',
+        'egrave',
+        '79',
+        'eacute',
+        '7a',
+        'ecirc',
+        '7b',
+        'euml',
+        '7c',
+        'igrave',
+        '7d',
+        'iacute',
+        '7e',
+        'icirc',
+        '7f',
+        'iuml',
+        '7g',
+        'eth',
+        '7h',
+        'ntilde',
+        '7i',
+        'ograve',
+        '7j',
+        'oacute',
+        '7k',
+        'ocirc',
+        '7l',
+        'otilde',
+        '7m',
+        'ouml',
+        '7n',
+        'divide',
+        '7o',
+        'oslash',
+        '7p',
+        'ugrave',
+        '7q',
+        'uacute',
+        '7r',
+        'ucirc',
+        '7s',
+        'uuml',
+        '7t',
+        'yacute',
+        '7u',
+        'thorn',
+        '7v',
+        'yuml',
+        'ci',
+        'fnof',
+        'sh',
+        'Alpha',
+        'si',
+        'Beta',
+        'sj',
+        'Gamma',
+        'sk',
+        'Delta',
+        'sl',
+        'Epsilon',
+        'sm',
+        'Zeta',
+        'sn',
+        'Eta',
+        'so',
+        'Theta',
+        'sp',
+        'Iota',
+        'sq',
+        'Kappa',
+        'sr',
+        'Lambda',
+        'ss',
+        'Mu',
+        'st',
+        'Nu',
+        'su',
+        'Xi',
+        'sv',
+        'Omicron',
+        't0',
+        'Pi',
+        't1',
+        'Rho',
+        't3',
+        'Sigma',
+        't4',
+        'Tau',
+        't5',
+        'Upsilon',
+        't6',
+        'Phi',
+        't7',
+        'Chi',
+        't8',
+        'Psi',
+        't9',
+        'Omega',
+        'th',
+        'alpha',
+        'ti',
+        'beta',
+        'tj',
+        'gamma',
+        'tk',
+        'delta',
+        'tl',
+        'epsilon',
+        'tm',
+        'zeta',
+        'tn',
+        'eta',
+        'to',
+        'theta',
+        'tp',
+        'iota',
+        'tq',
+        'kappa',
+        'tr',
+        'lambda',
+        'ts',
+        'mu',
+        'tt',
+        'nu',
+        'tu',
+        'xi',
+        'tv',
+        'omicron',
+        'u0',
+        'pi',
+        'u1',
+        'rho',
+        'u2',
+        'sigmaf',
+        'u3',
+        'sigma',
+        'u4',
+        'tau',
+        'u5',
+        'upsilon',
+        'u6',
+        'phi',
+        'u7',
+        'chi',
+        'u8',
+        'psi',
+        'u9',
+        'omega',
+        'uh',
+        'thetasym',
+        'ui',
+        'upsih',
+        'um',
+        'piv',
+        '812',
+        'bull',
+        '816',
+        'hellip',
+        '81i',
+        'prime',
+        '81j',
+        'Prime',
+        '81u',
+        'oline',
+        '824',
+        'frasl',
+        '88o',
+        'weierp',
+        '88h',
+        'image',
+        '88s',
+        'real',
+        '892',
+        'trade',
+        '89l',
+        'alefsym',
+        '8cg',
+        'larr',
+        '8ch',
+        'uarr',
+        '8ci',
+        'rarr',
+        '8cj',
+        'darr',
+        '8ck',
+        'harr',
+        '8dl',
+        'crarr',
+        '8eg',
+        'lArr',
+        '8eh',
+        'uArr',
+        '8ei',
+        'rArr',
+        '8ej',
+        'dArr',
+        '8ek',
+        'hArr',
+        '8g0',
+        'forall',
+        '8g2',
+        'part',
+        '8g3',
+        'exist',
+        '8g5',
+        'empty',
+        '8g7',
+        'nabla',
+        '8g8',
+        'isin',
+        '8g9',
+        'notin',
+        '8gb',
+        'ni',
+        '8gf',
+        'prod',
+        '8gh',
+        'sum',
+        '8gi',
+        'minus',
+        '8gn',
+        'lowast',
+        '8gq',
+        'radic',
+        '8gt',
+        'prop',
+        '8gu',
+        'infin',
+        '8h0',
+        'ang',
+        '8h7',
+        'and',
+        '8h8',
+        'or',
+        '8h9',
+        'cap',
+        '8ha',
+        'cup',
+        '8hb',
+        'int',
+        '8hk',
+        'there4',
+        '8hs',
+        'sim',
+        '8i5',
+        'cong',
+        '8i8',
+        'asymp',
+        '8j0',
+        'ne',
+        '8j1',
+        'equiv',
+        '8j4',
+        'le',
+        '8j5',
+        'ge',
+        '8k2',
+        'sub',
+        '8k3',
+        'sup',
+        '8k4',
+        'nsub',
+        '8k6',
+        'sube',
+        '8k7',
+        'supe',
+        '8kl',
+        'oplus',
+        '8kn',
+        'otimes',
+        '8l5',
+        'perp',
+        '8m5',
+        'sdot',
+        '8o8',
+        'lceil',
+        '8o9',
+        'rceil',
+        '8oa',
+        'lfloor',
+        '8ob',
+        'rfloor',
+        '8p9',
+        'lang',
+        '8pa',
+        'rang',
+        '9ea',
+        'loz',
+        '9j0',
+        'spades',
+        '9j3',
+        'clubs',
+        '9j5',
+        'hearts',
+        '9j6',
+        'diams',
+        'ai',
+        'OElig',
+        'aj',
+        'oelig',
+        'b0',
+        'Scaron',
+        'b1',
+        'scaron',
+        'bo',
+        'Yuml',
+        'm6',
+        'circ',
+        'ms',
+        'tilde',
+        '802',
+        'ensp',
+        '803',
+        'emsp',
+        '809',
+        'thinsp',
+        '80c',
+        'zwnj',
+        '80d',
+        'zwj',
+        '80e',
+        'lrm',
+        '80f',
+        'rlm',
+        '80j',
+        'ndash',
+        '80k',
+        'mdash',
+        '80o',
+        'lsquo',
+        '80p',
+        'rsquo',
+        '80q',
+        'sbquo',
+        '80s',
+        'ldquo',
+        '80t',
+        'rdquo',
+        '80u',
+        'bdquo',
+        '810',
+        'dagger',
+        '811',
+        'Dagger',
+        '81g',
+        'permil',
+        '81p',
+        'lsaquo',
+        '81q',
+        'rsaquo',
+        '85c',
+        'euro'
+    ],
+
+         
     /**
-     * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
+     * Encodes the specified string using raw entities. This means only the required XML base entities will be encoded.
+     *
+     * @method encodeRaw
+     * @param {String} text Text to encode.
+     * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
+     * @return {String} Entity encoded text.
      */
-    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();
-        }
+    encodeRaw: function(text, attr)
+    {
+        var t = this;
+        return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
+            return t.baseEntities[chr] || chr;
+        });
     },
-
     /**
-     * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
+     * Encoded the specified text with both the attributes and text entities. This function will produce larger text contents
+     * since it doesn't know if the context is within a attribute or text node. This was added for compatibility
+     * and is exposed as the DOMUtils.encode function.
+     *
+     * @method encodeAllRaw
+     * @param {String} text Text to encode.
+     * @return {String} Entity encoded text.
      */
-    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();
+    encodeAllRaw: function(text) {
+        var t = this;
+        return ('' + text).replace(this.rawCharsRegExp, function(chr) {
+            return t.baseEntities[chr] || chr;
+        });
+    },
+    /**
+     * Encodes the specified string using numeric entities. The core entities will be
+     * encoded as named ones but all non lower ascii characters will be encoded into numeric entities.
+     *
+     * @method encodeNumeric
+     * @param {String} text Text to encode.
+     * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
+     * @return {String} Entity encoded text.
+     */
+    encodeNumeric: function(text, attr) {
+        var t = this;
+        return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
+            // Multi byte sequence convert it to a single entity
+            if (chr.length > 1) {
+                return '&#' + (1024 * (chr.charCodeAt(0) - 55296) + (chr.charCodeAt(1) - 56320) + 65536) + ';';
             }
-        }
+            return t.baseEntities[chr] || '&#' + chr.charCodeAt(0) + ';';
+        });
     },
-    listKeyPress : function(e)
-    {
-        //Roo.log('listkeypress');
-        // scroll to first matching element based on key pres..
-        if (e.isSpecialKey()) {
-            return false;
+    /**
+     * Encodes the specified string using named entities. The core entities will be encoded
+     * as named ones but all non lower ascii characters will be encoded into named entities.
+     *
+     * @method encodeNamed
+     * @param {String} text Text to encode.
+     * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
+     * @param {Object} entities Optional parameter with entities to use.
+     * @return {String} Entity encoded text.
+     */
+    encodeNamed: function(text, attr, entities) {
+        var t = this;
+        entities = entities || this.namedEntities;
+        return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
+            return t.baseEntities[chr] || entities[chr] || chr;
+        });
+    },
+    /**
+     * Returns an encode function based on the name(s) and it's optional entities.
+     *
+     * @method getEncodeFunc
+     * @param {String} name Comma separated list of encoders for example named,numeric.
+     * @param {String} entities Optional parameter with entities to use instead of the built in set.
+     * @return {function} Encode function to be used.
+     */
+    getEncodeFunc: function(name, entities) {
+        entities = this.buildEntitiesLookup(entities) || this.namedEntities;
+        var t = this;
+        function encodeNamedAndNumeric(text, attr) {
+            return text.replace(attr ? t.attrsCharsRegExp : t.textCharsRegExp, function(chr) {
+                return t.baseEntities[chr] || entities[chr] || '&#' + chr.charCodeAt(0) + ';' || chr;
+            });
         }
-        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;
-            }
-            
+
+        function encodeCustomNamed(text, attr) {
+            return t.encodeNamed(text, attr, entities);
         }
-        
-        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;
+        // Replace + with , to be compatible with previous TinyMCE versions
+        name = this.makeMap(name.replace(/\+/g, ','));
+        // Named and numeric encoder
+        if (name.named && name.numeric) {
+            return this.encodeNamedAndNumeric;
+        }
+        // Named encoder
+        if (name.named) {
+            // Custom names
+            if (entities) {
+                return encodeCustomNamed;
             }
-        }, this);
-        
-        if (match === false) {
-            return true; // no more action?
+            return this.encodeNamed;
         }
-        // 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 
-    */
+        // Numeric
+        if (name.numeric) {
+            return this.encodeNumeric;
+        }
+        // Raw encoder
+        return this.encodeRaw;
+    },
     /**
-     * @hide
-     * @method autoSize
+     * Decodes the specified string, this will replace entities with raw UTF characters.
+     *
+     * @method decode
+     * @param {String} text Text to entity decode.
+     * @return {String} Entity decoded string.
      */
-});/*
- * Copyright(c) 2010-2012, Roo J Solutions Limited
- *
- * Licence LGPL
- *
- */
-
+    decode: function(text)
+    {
+        var  t = this;
+        return text.replace(this.entityRegExp, function(all, numeric) {
+            if (numeric) {
+                numeric = 'x' === numeric.charAt(0).toLowerCase() ? parseInt(numeric.substr(1), 16) : parseInt(numeric, 10);
+                // Support upper UTF
+                if (numeric > 65535) {
+                    numeric -= 65536;
+                    return String.fromCharCode(55296 + (numeric >> 10), 56320 + (1023 & numeric));
+                }
+                return t.asciiMap[numeric] || String.fromCharCode(numeric);
+            }
+            return t.reverseEntities[all] || t.namedEntities[all] || t.nativeDecode(all);
+        });
+    },
+    nativeDecode : function (text) {
+        return text;
+    },
+    makeMap : function (items, delim, map) {
+		var i;
+		items = items || [];
+		delim = delim || ',';
+		if (typeof items == "string") {
+			items = items.split(delim);
+		}
+		map = map || {};
+		i = items.length;
+		while (i--) {
+			map[items[i]] = {};
+		}
+		return map;
+	}
+};
+    
+    
+    
+Roo.htmleditor.TidyEntities.init();
 /**
- * @class Roo.form.ComboBoxArray
- * @extends Roo.form.TextField
- * A facebook style adder... for lists of email / people / countries  etc...
- * pick multiple items from a combo box, and shows each one.
- *
- *  Fred [x]  Brian [x]  [Pick another |v]
- *
- *
- *  For this to work: it needs various extra information
- *    - normal combo problay has
- *      name, hiddenName
- *    + displayField, valueField
- *
- *    For our purpose...
- *
- *
- *   If we change from 'extends' to wrapping...
- *   
- *  
- *
- 
- 
+ * @class Roo.htmleditor.KeyEnter
+ * Handle Enter press..
+ * @cfg {Roo.HtmlEditorCore} core the editor.
  * @constructor
- * Create a new ComboBoxArray.
+ * Create a new Filter.
  * @param {Object} config Configuration options
  */
+
+
+
+
+
+Roo.htmleditor.KeyEnter = function(cfg) {
+    Roo.apply(this, cfg);
+    // this does not actually call walk as it's really just a abstract class
  
+    Roo.get(this.core.doc.body).on('keypress', this.keypress, this);
+}
 
-Roo.form.ComboBoxArray = function(config)
-{
-    this.addEvents({
-        /**
-         * @event beforeremove
-         * Fires before remove the value from the list
-	     * @param {Roo.form.ComboBoxArray} _self This combo box array
-             * @param {Roo.form.ComboBoxArray.Item} item removed item
-	     */
-        'beforeremove' : true,
-        /**
-         * @event remove
-         * Fires when remove the value from the list
-	     * @param {Roo.form.ComboBoxArray} _self This combo box array
-             * @param {Roo.form.ComboBoxArray.Item} item removed item
-	     */
-        'remove' : true
-        
-        
-    });
-    
-    Roo.form.ComboBoxArray.superclass.constructor.call(this, config);
-    
-    this.items = new Roo.util.MixedCollection(false);
-    
-    // construct the child combo...
+//Roo.htmleditor.KeyEnter.i = 0;
+
+
+Roo.htmleditor.KeyEnter.prototype = {
     
+    core : false,
     
+    keypress : function(e)
+    {
+        if (e.charCode != 13 && e.charCode != 10) {
+            Roo.log([e.charCode,e]);
+            return true;
+        }
+        e.preventDefault();
+        // https://stackoverflow.com/questions/18552336/prevent-contenteditable-adding-div-on-enter-chrome
+        var doc = this.core.doc;
+          //add a new line
+       
     
+        var sel = this.core.getSelection();
+        var range = sel.getRangeAt(0);
+        var n = range.commonAncestorContainer;
+        var pc = range.closest([ 'ol', 'ul']);
+        var pli = range.closest('li');
+        if (!pc || e.ctrlKey) {
+            sel.insertNode('br', 'after'); 
+         
+            this.core.undoManager.addEvent();
+            this.core.fireEditorEvent(e);
+            return false;
+        }
+        
+        // deal with <li> insetion
+        if (pli.innerText.trim() == '' &&
+            pli.previousSibling &&
+            pli.previousSibling.nodeName == 'LI' &&
+            pli.previousSibling.innerText.trim() ==  '') {
+            pli.parentNode.removeChild(pli.previousSibling);
+            sel.cursorAfter(pc);
+            this.core.undoManager.addEvent();
+            this.core.fireEditorEvent(e);
+            return false;
+        }
     
-   
+        var li = doc.createElement('LI');
+        li.innerHTML = '&nbsp;';
+        if (!pli || !pli.firstSibling) {
+            pc.appendChild(li);
+        } else {
+            pli.parentNode.insertBefore(li, pli.firstSibling);
+        }
+        sel.cursorText (li.firstChild);
+      
+        this.core.undoManager.addEvent();
+        this.core.fireEditorEvent(e);
+
+        return false;
+        
     
+        
+        
+         
+    }
+};
+     
+/**
+ * @class Roo.htmleditor.Block
+ * Base class for html editor blocks - do not use it directly .. extend it..
+ * @cfg {DomElement} node The node to apply stuff to.
+ * @cfg {String} friendly_name the name that appears in the context bar about this block
+ * @cfg {Object} Context menu - see Roo.form.HtmlEditor.ToolbarContext
+ 
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.Block  = function(cfg)
+{
+    // do nothing .. should not be called really.
 }
+/**
+ * factory method to get the block from an element (using cache if necessary)
+ * @static
+ * @param {HtmlElement} the dom element
+ */
+Roo.htmleditor.Block.factory = function(node)
+{
+    var cc = Roo.htmleditor.Block.cache;
+    var id = Roo.get(node).id;
+    if (typeof(cc[id]) != 'undefined' && (!cc[id].node || cc[id].node.closest('body'))) {
+        Roo.htmleditor.Block.cache[id].readElement(node);
+        return Roo.htmleditor.Block.cache[id];
+    }
+    var db  = node.getAttribute('data-block');
+    if (!db) {
+        db = node.nodeName.toLowerCase().toUpperCaseFirst();
+    }
+    var cls = Roo.htmleditor['Block' + db];
+    if (typeof(cls) == 'undefined') {
+        //Roo.log(node.getAttribute('data-block'));
+        Roo.log("OOps missing block : " + 'Block' + db);
+        return false;
+    }
+    Roo.htmleditor.Block.cache[id] = new cls({ node: node });
+    return Roo.htmleditor.Block.cache[id];  /// should trigger update element
+};
 
- 
-Roo.extend(Roo.form.ComboBoxArray, Roo.form.TextField,
-{ 
-    /**
-     * @cfg {Roo.form.Combo} combo The combo box that is wrapped
-     */
+/**
+ * initalize all Elements from content that are 'blockable'
+ * @static
+ * @param the body element
+ */
+Roo.htmleditor.Block.initAll = function(body, type)
+{
+    if (typeof(type) == 'undefined') {
+        var ia = Roo.htmleditor.Block.initAll;
+        ia(body,'table');
+        ia(body,'td');
+        ia(body,'figure');
+        return;
+    }
+    Roo.each(Roo.get(body).query(type), function(e) {
+        Roo.htmleditor.Block.factory(e);    
+    },this);
+};
+// question goes here... do we need to clear out this cache sometimes?
+// or show we make it relivant to the htmleditor.
+Roo.htmleditor.Block.cache = {};
+
+Roo.htmleditor.Block.prototype = {
     
-    lastData : false,
+    node : false,
     
-    // behavies liek a hiddne field
-    inputType:      'hidden',
-    /**
-     * @cfg {Number} width The width of the box that displays the selected element
-     */ 
-    width:          300,
-
+     // used by context menu
+    friendly_name : 'Based Block',
     
+    // text for button to delete this element
+    deleteTitle : false,
     
+    context : false,
     /**
-     * @cfg {String} name    The name of the visable items on this form (eg. titles not ids)
+     * Update a node with values from this object
+     * @param {DomElement} node
      */
-    name : false,
+    updateElement : function(node)
+    {
+        Roo.DomHelper.update(node === undefined ? this.node : node, this.toObject());
+    },
+     /**
+     * convert to plain HTML for calling insertAtCursor..
+     */
+    toHTML : function()
+    {
+        return Roo.DomHelper.markup(this.toObject());
+    },
     /**
-     * @cfg {String} hiddenName    The hidden name of the field, often contains an comma seperated list of names
+     * used by readEleemnt to extract data from a node
+     * may need improving as it's pretty basic
+     
+     * @param {DomElement} node
+     * @param {String} tag - tag to find, eg. IMG ?? might be better to use DomQuery ?
+     * @param {String} attribute (use html - for contents, style for using next param as style, or false to return the node)
+     * @param {String} style the style property - eg. text-align
      */
-    hiddenName : false,
+    getVal : function(node, tag, attr, style)
+    {
+        var n = node;
+        if (tag !== true && n.tagName != tag.toUpperCase()) {
+            // in theory we could do figure[3] << 3rd figure? or some more complex search..?
+            // but kiss for now.
+            n = node.getElementsByTagName(tag).item(0);
+        }
+        if (!n) {
+            return '';
+        }
+        if (attr === false) {
+            return n;
+        }
+        if (attr == 'html') {
+            return n.innerHTML;
+        }
+        if (attr == 'style') {
+            return n.style[style]; 
+        }
+        
+        return n.hasAttribute(attr) ? n.getAttribute(attr) : '';
+            
+    },
+    /**
+     * create a DomHelper friendly object - for use with 
+     * Roo.DomHelper.markup / overwrite / etc..
+     * (override this)
+     */
+    toObject : function()
+    {
+        return {};
+    },
+      /**
+     * Read a node that has a 'data-block' property - and extract the values from it.
+     * @param {DomElement} node - the node
+     */
+    readElement : function(node)
+    {
+        
+    } 
     
     
-    // private the array of items that are displayed..
-    items  : false,
-    // private - the hidden field el.
-    hiddenEl : false,
-    // private - the filed el..
-    el : false,
+};
+
+ 
+
+/**
+ * @class Roo.htmleditor.BlockFigure
+ * Block that has an image and a figcaption
+ * @cfg {String} image_src the url for the image
+ * @cfg {String} align (left|right) alignment for the block default left
+ * @cfg {String} caption the text to appear below  (and in the alt tag)
+ * @cfg {String} caption_display (block|none) display or not the caption
+ * @cfg {String|number} image_width the width of the image number or %?
+ * @cfg {String|number} image_height the height of the image number or %?
+ * 
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.BlockFigure = function(cfg)
+{
+    if (cfg.node) {
+        this.readElement(cfg.node);
+        this.updateElement(cfg.node);
+    }
+    Roo.apply(this, cfg);
+}
+Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
+ 
     
-    //validateValue : function() { return true; }, // all values are ok!
-    //onAddClick: function() { },
+    // setable values.
+    image_src: '',
+    align: 'center',
+    caption : '',
+    caption_display : 'block',
+    width : '100%',
+    cls : '',
+    href: '',
+    video_url : '',
     
-    onRender : function(ct, position) 
+    // margin: '2%', not used
+    
+    text_align: 'left', //   (left|right) alignment for the text caption default left. - not used at present
+
+    
+    // used by context menu
+    friendly_name : 'Image with caption',
+    deleteTitle : "Delete Image and Caption",
+    
+    contextMenu : function(toolbar)
     {
         
-        // create the standard hidden element
-        //Roo.form.ComboBoxArray.superclass.onRender.call(this, ct, position);
+        var block = function() {
+            return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
+        };
         
         
-        // give fake names to child combo;
-        this.combo.hiddenName = this.hiddenName ? (this.hiddenName+'-subcombo') : this.hiddenName;
-        this.combo.name = this.name? (this.name+'-subcombo') : this.name;
+        var rooui =  typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
         
-        this.combo = Roo.factory(this.combo, Roo.form);
-        this.combo.onRender(ct, position);
-        if (typeof(this.combo.width) != 'undefined') {
-            this.combo.onResize(this.combo.width,0);
-        }
+        var syncValue = toolbar.editorcore.syncValue;
         
-        this.combo.initEvents();
+        var fields = {};
         
-        // assigned so form know we need to do this..
-        this.store          = this.combo.store;
-        this.valueField     = this.combo.valueField;
-        this.displayField   = this.combo.displayField ;
+        return [
+             {
+                xtype : 'TextItem',
+                text : "Source: ",
+                xns : rooui.Toolbar  //Boostrap?
+            },
+            {
+                xtype : 'Button',
+                text: 'Change Image URL',
+                 
+                listeners : {
+                    click: function (btn, state)
+                    {
+                        var b = block();
+                        
+                        Roo.MessageBox.show({
+                            title : "Image Source URL",
+                            msg : "Enter the url for the image",
+                            buttons: Roo.MessageBox.OKCANCEL,
+                            fn: function(btn, val){
+                                if (btn != 'ok') {
+                                    return;
+                                }
+                                b.image_src = val;
+                                b.updateElement();
+                                syncValue();
+                                toolbar.editorcore.onEditorEvent();
+                            },
+                            minWidth:250,
+                            prompt:true,
+                            //multiline: multiline,
+                            modal : true,
+                            value : b.image_src
+                        });
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+         
+            {
+                xtype : 'Button',
+                text: 'Change Link URL',
+                 
+                listeners : {
+                    click: function (btn, state)
+                    {
+                        var b = block();
+                        
+                        Roo.MessageBox.show({
+                            title : "Link URL",
+                            msg : "Enter the url for the link - leave blank to have no link",
+                            buttons: Roo.MessageBox.OKCANCEL,
+                            fn: function(btn, val){
+                                if (btn != 'ok') {
+                                    return;
+                                }
+                                b.href = val;
+                                b.updateElement();
+                                syncValue();
+                                toolbar.editorcore.onEditorEvent();
+                            },
+                            minWidth:250,
+                            prompt:true,
+                            //multiline: multiline,
+                            modal : true,
+                            value : b.href
+                        });
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+            {
+                xtype : 'Button',
+                text: 'Show Video URL',
+                 
+                listeners : {
+                    click: function (btn, state)
+                    {
+                        Roo.MessageBox.alert("Video URL",
+                            block().video_url == '' ? 'This image is not linked ot a video' :
+                                'The image is linked to: <a target="_new" href="' + block().video_url + '">' + block().video_url + '</a>');
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+            
+            
+            {
+                xtype : 'TextItem',
+                text : "Width: ",
+                xns : rooui.Toolbar  //Boostrap?
+            },
+            {
+                xtype : 'ComboBox',
+                allowBlank : false,
+                displayField : 'val',
+                editable : true,
+                listWidth : 100,
+                triggerAction : 'all',
+                typeAhead : true,
+                valueField : 'val',
+                width : 70,
+                name : 'width',
+                listeners : {
+                    select : function (combo, r, index)
+                    {
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        var b = block();
+                        b.width = r.get('val');
+                        b.updateElement();
+                        syncValue();
+                        toolbar.editorcore.onEditorEvent();
+                    }
+                },
+                xns : rooui.form,
+                store : {
+                    xtype : 'SimpleStore',
+                    data : [
+                        ['auto'],
+                        ['50%'],
+                        ['80%'],
+                        ['100%']
+                    ],
+                    fields : [ 'val'],
+                    xns : Roo.data
+                }
+            },
+            {
+                xtype : 'TextItem',
+                text : "Align: ",
+                xns : rooui.Toolbar  //Boostrap?
+            },
+            {
+                xtype : 'ComboBox',
+                allowBlank : false,
+                displayField : 'val',
+                editable : true,
+                listWidth : 100,
+                triggerAction : 'all',
+                typeAhead : true,
+                valueField : 'val',
+                width : 70,
+                name : 'align',
+                listeners : {
+                    select : function (combo, r, index)
+                    {
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        var b = block();
+                        b.align = r.get('val');
+                        b.updateElement();
+                        syncValue();
+                        toolbar.editorcore.onEditorEvent();
+                    }
+                },
+                xns : rooui.form,
+                store : {
+                    xtype : 'SimpleStore',
+                    data : [
+                        ['left'],
+                        ['right'],
+                        ['center']
+                    ],
+                    fields : [ 'val'],
+                    xns : Roo.data
+                }
+            },
+            
+            
+            {
+                xtype : 'Button',
+                text: 'Hide Caption',
+                name : 'caption_display',
+                pressed : false,
+                enableToggle : true,
+                setValue : function(v) {
+                    // this trigger toggle.
+                    
+                    var b  = block();
+                    this.setText(b.caption_display == 'block' ? "Hide Caption" : "Show Caption");
+                    this.setPressed(b.caption_display == 'block' ? false: true);
+                },
+                listeners : {
+                    toggle: function (btn, state)
+                    {
+                        var b  = block();
+                        b.caption_display = b.caption_display == 'block' ? 'none' : 'block';
+                        this.setText(b.caption_display == 'block' ? "Hide Caption" : "Show Caption");
+                        b.updateElement();
+                        syncValue();
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        toolbar.editorcore.onEditorEvent();
+                    }
+                },
+                xns : rooui.Toolbar
+            }
+        ];
         
+    },
+    /**
+     * create a DomHelper friendly object - for use with
+     * Roo.DomHelper.markup / overwrite / etc..
+     */
+    toObject : function()
+    {
+        var d = document.createElement('div');
+        d.innerHTML = this.caption;
+        
+        var m = this.width != '100%' && this.align == 'center' ? '0 auto' : 0; 
+        
+        var iw = this.align == 'center' ? this.width : '100%';
+        var img =   {
+            tag : 'img',
+            contenteditable : 'false',
+            src : this.image_src,
+            alt : d.innerText.replace(/\n/g, " ").replace(/\s+/g, ' ').trim(), // removeHTML and reduce spaces..
+            style: {
+                width : iw,
+                maxWidth : iw + ' !important', // this is not getting rendered?
+                margin : m  
+                
+            }
+        };
+        /*
+        '<div class="{0}" width="420" height="315" src="{1}" frameborder="0" allowfullscreen>' +
+                    '<a href="{2}">' + 
+                        '<img class="{0}-thumbnail" src="{3}/Images/{4}/{5}#image-{4}" />' + 
+                    '</a>' + 
+                '</div>',
+        */
+                
+        if (this.href.length > 0) {
+            img = {
+                tag : 'a',
+                href: this.href,
+                contenteditable : 'true',
+                cn : [
+                    img
+                ]
+            };
+        }
         
-        this.combo.wrap.addClass('x-cbarray-grp');
         
-        var cbwrap = this.combo.wrap.createChild(
-            {tag: 'div', cls: 'x-cbarray-cb'},
-            this.combo.el.dom
-        );
+        if (this.video_url.length > 0) {
+            img = {
+                tag : 'div',
+                cls : this.cls,
+                frameborder : 0,
+                allowfullscreen : true,
+                width : 420,  // these are for video tricks - that we replace the outer
+                height : 315,
+                src : this.video_url,
+                cn : [
+                    img
+                ]
+            };
+        }
+        // we remove caption totally if its hidden... - will delete data.. but otherwise we end up with fake caption
+        var captionhtml = this.caption_display == 'none' ? '' : (this.caption.length ? this.caption : "Caption");
         
-             
-        this.hiddenEl = this.combo.wrap.createChild({
-            tag: 'input',  type:'hidden' , name: this.hiddenName, value : ''
-        });
-        this.el = this.combo.wrap.createChild({
-            tag: 'input',  type:'hidden' , name: this.name, value : ''
-        });
-         //   this.el.dom.removeAttribute("name");
+  
+        var ret =   {
+            tag: 'figure',
+            'data-block' : 'Figure',
+            
+            contenteditable : 'false',
+            
+            style : {
+                display: 'block',
+                float :  this.align ,
+                maxWidth :  this.align == 'center' ? '100% !important' : (this.width + ' !important'),
+                width : this.align == 'center' ? '100%' : this.width,
+                margin:  '0px',
+                padding: this.align == 'center' ? '0' : '0 10px' ,
+                textAlign : this.align   // seems to work for email..
+                
+            },
+           
+            
+            align : this.align,
+            cn : [
+                img,
+              
+                {
+                    tag: 'figcaption',
+                    'data-display' : this.caption_display,
+                    style : {
+                        textAlign : 'left',
+                        fontSize : '16px',
+                        lineHeight : '24px',
+                        display : this.caption_display,
+                        maxWidth : this.width + ' !important',
+                        margin: m,
+                        width: this.width
+                    
+                         
+                    },
+                    cls : this.cls.length > 0 ? (this.cls  + '-thumbnail' ) : '',
+                    cn : [
+                        {
+                            tag: 'div',
+                            style  : {
+                                marginTop : '16px',
+                                textAlign : 'left'
+                            },
+                            align: 'left',
+                            cn : [
+                                {
+                                    // we can not rely on yahoo syndication to use CSS elements - so have to use  '<i>' to encase stuff.
+                                    tag : 'i',
+                                    contenteditable : true,
+                                    html : captionhtml
+                                }
+                                
+                            ]
+                        }
+                        
+                    ]
+                    
+                }
+            ]
+        };
+        return ret;
+         
+    },
+    
+    readElement : function(node)
+    {
+        // this should not really come from the link...
+        this.video_url = this.getVal(node, 'div', 'src');
+        this.cls = this.getVal(node, 'div', 'class');
+        this.href = this.getVal(node, 'a', 'href');
         
         
-        this.outerWrap = this.combo.wrap;
-        this.wrap = cbwrap;
+        this.image_src = this.getVal(node, 'img', 'src');
+         
+        this.align = this.getVal(node, 'figure', 'align');
+        var figcaption = this.getVal(node, 'figcaption', false);
+        this.caption = this.getVal(figcaption, 'i', 'html');
+
+        this.caption_display = this.getVal(node, 'figcaption', 'data-display');
+        //this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
+        this.width = this.getVal(node, 'figcaption', 'style', 'width');
+        //this.margin = this.getVal(node, 'figure', 'style', 'margin');
         
-        this.outerWrap.setWidth(this.width);
-        this.outerWrap.dom.removeChild(this.el.dom);
+    },
+    removeNode : function()
+    {
+        return this.node;
+    }
+    
+  
+   
+     
+    
+    
+    
+    
+})
+
+ 
+
+/**
+ * @class Roo.htmleditor.BlockTable
+ * Block that manages a table
+ * 
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.BlockTable = function(cfg)
+{
+    if (cfg.node) {
+        this.readElement(cfg.node);
+        this.updateElement(cfg.node);
+    }
+    Roo.apply(this, cfg);
+    if (!cfg.node) {
+        this.rows = [];
+        for(var r = 0; r < this.no_row; r++) {
+            this.rows[r] = [];
+            for(var c = 0; c < this.no_col; c++) {
+                this.rows[r][c] = this.emptyCell();
+            }
+        }
+    }
+    
+    
+}
+Roo.extend(Roo.htmleditor.BlockTable, Roo.htmleditor.Block, {
+ 
+    rows : false,
+    no_col : 1,
+    no_row : 1,
+    
+    
+    width: '100%',
+    
+    // used by context menu
+    friendly_name : 'Table',
+    deleteTitle : 'Delete Table',
+    // context menu is drawn once..
+    
+    contextMenu : function(toolbar)
+    {
         
-        this.wrap.dom.appendChild(this.el.dom);
-        this.outerWrap.dom.removeChild(this.combo.trigger.dom);
-        this.combo.wrap.dom.appendChild(this.combo.trigger.dom);
+        var block = function() {
+            return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
+        };
         
-        this.combo.trigger.setStyle('position','relative');
-        this.combo.trigger.setStyle('left', '0px');
-        this.combo.trigger.setStyle('top', '2px');
         
-        this.combo.el.setStyle('vertical-align', 'text-bottom');
+        var rooui =  typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
         
-        //this.trigger.setStyle('vertical-align', 'top');
+        var syncValue = toolbar.editorcore.syncValue;
         
-        // this should use the code from combo really... on('add' ....)
-        if (this.adder) {
-            
+        var fields = {};
         
-            this.adder = this.outerWrap.createChild(
-                {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-adder', style: 'margin-left:2px'});  
-            var _t = this;
-            this.adder.on('click', function(e) {
-                _t.fireEvent('adderclick', this, e);
-            }, _t);
-        }
-        //var _t = this;
-        //this.adder.on('click', this.onAddClick, _t);
+        return [
+            {
+                xtype : 'TextItem',
+                text : "Width: ",
+                xns : rooui.Toolbar  //Boostrap?
+            },
+            {
+                xtype : 'ComboBox',
+                allowBlank : false,
+                displayField : 'val',
+                editable : true,
+                listWidth : 100,
+                triggerAction : 'all',
+                typeAhead : true,
+                valueField : 'val',
+                width : 100,
+                name : 'width',
+                listeners : {
+                    select : function (combo, r, index)
+                    {
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        var b = block();
+                        b.width = r.get('val');
+                        b.updateElement();
+                        syncValue();
+                        toolbar.editorcore.onEditorEvent();
+                    }
+                },
+                xns : rooui.form,
+                store : {
+                    xtype : 'SimpleStore',
+                    data : [
+                        ['100%'],
+                        ['auto']
+                    ],
+                    fields : [ 'val'],
+                    xns : Roo.data
+                }
+            },
+            // -------- Cols
+            
+            {
+                xtype : 'TextItem',
+                text : "Columns: ",
+                xns : rooui.Toolbar  //Boostrap?
+            },
+         
+            {
+                xtype : 'Button',
+                text: '-',
+                listeners : {
+                    click : function (_self, e)
+                    {
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        block().removeColumn();
+                        syncValue();
+                        toolbar.editorcore.onEditorEvent();
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+            {
+                xtype : 'Button',
+                text: '+',
+                listeners : {
+                    click : function (_self, e)
+                    {
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        block().addColumn();
+                        syncValue();
+                        toolbar.editorcore.onEditorEvent();
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+            // -------- ROWS
+            {
+                xtype : 'TextItem',
+                text : "Rows: ",
+                xns : rooui.Toolbar  //Boostrap?
+            },
+         
+            {
+                xtype : 'Button',
+                text: '-',
+                listeners : {
+                    click : function (_self, e)
+                    {
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        block().removeRow();
+                        syncValue();
+                        toolbar.editorcore.onEditorEvent();
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+            {
+                xtype : 'Button',
+                text: '+',
+                listeners : {
+                    click : function (_self, e)
+                    {
+                        block().addRow();
+                        syncValue();
+                        toolbar.editorcore.onEditorEvent();
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+            // -------- ROWS
+            {
+                xtype : 'Button',
+                text: 'Reset Column Widths',
+                listeners : {
+                    
+                    click : function (_self, e)
+                    {
+                        block().resetWidths();
+                        syncValue();
+                        toolbar.editorcore.onEditorEvent();
+                    }
+                },
+                xns : rooui.Toolbar
+            } 
+            
+            
+            
+        ];
+        
+    },
+    
+    
+  /**
+     * create a DomHelper friendly object - for use with
+     * Roo.DomHelper.markup / overwrite / etc..
+     * ?? should it be called with option to hide all editing features?
+     */
+    toObject : function()
+    {
         
+        var ret = {
+            tag : 'table',
+            contenteditable : 'false', // this stops cell selection from picking the table.
+            'data-block' : 'Table',
+            style : {
+                width:  this.width,
+                border : 'solid 1px #000', // ??? hard coded?
+                'border-collapse' : 'collapse' 
+            },
+            cn : [
+                { tag : 'tbody' , cn : [] }
+            ]
+        };
         
-        this.combo.on('select', function(cb, rec, ix) {
-            this.addItem(rec.data);
+        // do we have a head = not really 
+        var ncols = 0;
+        Roo.each(this.rows, function( row ) {
+            var tr = {
+                tag: 'tr',
+                style : {
+                    margin: '6px',
+                    border : 'solid 1px #000',
+                    textAlign : 'left' 
+                },
+                cn : [ ]
+            };
+            
+            ret.cn[0].cn.push(tr);
+            // does the row have any properties? ?? height?
+            var nc = 0;
+            Roo.each(row, function( cell ) {
+                
+                var td = {
+                    tag : 'td',
+                    contenteditable :  'true',
+                    'data-block' : 'Td',
+                    html : cell.html,
+                    style : cell.style
+                };
+                if (cell.colspan > 1) {
+                    td.colspan = cell.colspan ;
+                    nc += cell.colspan;
+                } else {
+                    nc++;
+                }
+                if (cell.rowspan > 1) {
+                    td.rowspan = cell.rowspan ;
+                }
+                
+                
+                // widths ?
+                tr.cn.push(td);
+                    
+                
+            }, this);
+            ncols = Math.max(nc, ncols);
             
-            cb.setValue('');
-            cb.el.dom.value = '';
-            //cb.lastData = rec.data;
-            // add to list
             
         }, this);
+        // add the header row..
         
+        ncols++;
+         
         
+        return ret;
+         
     },
     
-    
-    getName: function()
+    readElement : function(node)
     {
-        // returns hidden if it's set..
-        if (!this.rendered) {return ''};
-        return  this.hiddenName ? this.hiddenName : this.name;
+        node  = node ? node : this.node ;
+        this.width = this.getVal(node, true, 'style', 'width') || '100%';
+        
+        this.rows = [];
+        this.no_row = 0;
+        var trs = Array.from(node.rows);
+        trs.forEach(function(tr) {
+            var row =  [];
+            this.rows.push(row);
+            
+            this.no_row++;
+            var no_column = 0;
+            Array.from(tr.cells).forEach(function(td) {
+                
+                var add = {
+                    colspan : td.hasAttribute('colspan') ? td.getAttribute('colspan')*1 : 1,
+                    rowspan : td.hasAttribute('rowspan') ? td.getAttribute('rowspan')*1 : 1,
+                    style : td.hasAttribute('style') ? td.getAttribute('style') : '',
+                    html : td.innerHTML
+                };
+                no_column += add.colspan;
+                     
+                
+                row.push(add);
+                
+                
+            },this);
+            this.no_col = Math.max(this.no_col, no_column);
+            
+            
+        },this);
+        
         
     },
+    normalizeRows: function()
+    {
+        var ret= [];
+        var rid = -1;
+        this.rows.forEach(function(row) {
+            rid++;
+            ret[rid] = [];
+            row = this.normalizeRow(row);
+            var cid = 0;
+            row.forEach(function(c) {
+                while (typeof(ret[rid][cid]) != 'undefined') {
+                    cid++;
+                }
+                if (typeof(ret[rid]) == 'undefined') {
+                    ret[rid] = [];
+                }
+                ret[rid][cid] = c;
+                c.row = rid;
+                c.col = cid;
+                if (c.rowspan < 2) {
+                    return;
+                }
+                
+                for(var i = 1 ;i < c.rowspan; i++) {
+                    if (typeof(ret[rid+i]) == 'undefined') {
+                        ret[rid+i] = [];
+                    }
+                    ret[rid+i][cid] = c;
+                }
+            });
+        }, this);
+        return ret;
     
+    },
     
-    onResize: function(w, h){
-        
-        return;
-        // not sure if this is needed..
-        //this.combo.onResize(w,h);
-        
-        if(typeof w != 'number'){
-            // we do not handle it!?!?
-            return;
-        }
-        var tw = this.combo.trigger.getWidth();
-        tw += this.addicon ? this.addicon.getWidth() : 0;
-        tw += this.editicon ? this.editicon.getWidth() : 0;
-        var x = w - tw;
-        this.combo.el.setWidth( this.combo.adjustWidth('input', x));
-            
-        this.combo.trigger.setStyle('left', '0px');
-        
-        if(this.list && this.listWidth === undefined){
-            var lw = Math.max(x + this.combo.trigger.getWidth(), this.combo.minListWidth);
-            this.list.setWidth(lw);
-            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
-        }
-        
+    normalizeRow: function(row)
+    {
+        var ret= [];
+        row.forEach(function(c) {
+            if (c.colspan < 2) {
+                ret.push(c);
+                return;
+            }
+            for(var i =0 ;i < c.colspan; i++) {
+                ret.push(c);
+            }
+        });
+        return ret;
     
-        
     },
     
-    addItem: function(rec)
+    deleteColumn : function(sel)
     {
-        var valueField = this.combo.valueField;
-        var displayField = this.combo.displayField;
-        if (this.items.indexOfKey(rec[valueField]) > -1) {
-            //console.log("GOT " + rec.data.id);
+        if (!sel || sel.type != 'col') {
+            return;
+        }
+        if (this.no_col < 2) {
             return;
         }
         
-        var x = new Roo.form.ComboBoxArray.Item({
-            //id : rec[this.idField],
-            data : rec,
-            displayField : displayField ,
-            tipField : displayField ,
-            cb : this
+        this.rows.forEach(function(row) {
+            var cols = this.normalizeRow(row);
+            var col = cols[sel.col];
+            if (col.colspan > 1) {
+                col.colspan --;
+            } else {
+                row.remove(col);
+            }
+            
+        }, this);
+        this.no_col--;
+        
+    },
+    removeColumn : function()
+    {
+        this.deleteColumn({
+            type: 'col',
+            col : this.no_col-1
         });
-        // use the 
-        this.items.add(rec[valueField],x);
-        // add it before the element..
-        this.updateHiddenEl();
-        x.render(this.outerWrap, this.wrap.dom);
-        // add the image handler..
+        this.updateElement();
     },
     
-    updateHiddenEl : function()
+     
+    addColumn : function()
     {
-        this.validate();
-        if (!this.hiddenEl) {
-            return;
-        }
-        var ar = [];
-        var idField = this.combo.valueField;
         
-        this.items.each(function(f) {
-            ar.push(f.data[idField]);
+        this.rows.forEach(function(row) {
+            row.push(this.emptyCell());
            
-        });
-        this.hiddenEl.dom.value = ar.join(',');
-        this.validate();
+        }, this);
+        this.updateElement();
     },
     
-    reset : function()
+    deleteRow : function(sel)
     {
-        this.items.clear();
-        
-        Roo.each(this.outerWrap.select('.x-cbarray-item', true).elements, function(el){
-           el.remove();
-        });
-        
-        this.el.dom.value = '';
-        if (this.hiddenEl) {
-            this.hiddenEl.dom.value = '';
+        if (!sel || sel.type != 'row') {
+            return;
         }
         
-    },
-    getValue: function()
-    {
-        return this.hiddenEl ? this.hiddenEl.dom.value : '';
-    },
-    setValue: function(v) // not a valid action - must use addItems..
-    {
-         
-        this.reset();
+        if (this.no_row < 2) {
+            return;
+        }
         
+        var rows = this.normalizeRows();
         
         
-        if (this.store.isLocal && (typeof(v) == 'string')) {
-            // then we can use the store to find the values..
-            // comma seperated at present.. this needs to allow JSON based encoding..
-            this.hiddenEl.value  = v;
-            var v_ar = [];
-            Roo.each(v.split(','), function(k) {
-                Roo.log("CHECK " + this.valueField + ',' + k);
-                var li = this.store.query(this.valueField, k);
-                if (!li.length) {
-                    return;
+        rows[sel.row].forEach(function(col) {
+            if (col.rowspan > 1) {
+                col.rowspan--;
+            } else {
+                col.remove = 1; // flage it as removed.
+            }
+            
+        }, this);
+        var newrows = [];
+        this.rows.forEach(function(row) {
+            newrow = [];
+            row.forEach(function(c) {
+                if (typeof(c.remove) == 'undefined') {
+                    newrow.push(c);
                 }
-                var add = {};
-                add[this.valueField] = k;
-                add[this.displayField] = li.item(0).data[this.displayField];
                 
-                this.addItem(add);
-            }, this) 
-             
-        }
-        if (typeof(v) == 'object' ) {
-            // then let's assume it's an array of objects..
-            Roo.each(v, function(l) {
-                this.addItem(l);
-            }, this);
-             
-        }
+            });
+            if (newrow.length > 0) {
+                newrows.push(row);
+            }
+        });
+        this.rows =  newrows;
+        
         
         
+        this.no_row--;
+        this.updateElement();
+        
     },
-    setFromData: function(v)
+    removeRow : function()
     {
-        // this recieves an object, if setValues is called.
-        this.reset();
-        this.el.dom.value = v[this.displayField];
-        this.hiddenEl.dom.value = v[this.valueField];
-        if (typeof(v[this.valueField]) != 'string' || !v[this.valueField].length) {
-            return;
-        }
-        var kv = v[this.valueField];
-        var dv = v[this.displayField];
-        kv = typeof(kv) != 'string' ? '' : kv;
-        dv = typeof(dv) != 'string' ? '' : dv;
+        this.deleteRow({
+            type: 'row',
+            row : this.no_row-1
+        });
         
+    },
+    
+     
+    addRow : function()
+    {
         
-        var keys = kv.split(',');
-        var display = dv.split(',');
-        for (var i = 0 ; i < keys.length; i++) {
+        var row = [];
+        for (var i = 0; i < this.no_col; i++ ) {
             
-            add = {};
-            add[this.valueField] = keys[i];
-            add[this.displayField] = display[i];
-            this.addItem(add);
+            row.push(this.emptyCell());
+           
         }
-      
+        this.rows.push(row);
+        this.updateElement();
         
     },
-    
-    /**
-     * Validates the combox array value
-     * @return {Boolean} True if the value is valid, else false
-     */
-    validate : function(){
-        if(this.disabled || this.validateValue(this.processValue(this.getValue()))){
-            this.clearInvalid();
-            return true;
-        }
-        return false;
+     
+    // the default cell object... at present...
+    emptyCell : function() {
+        return (new Roo.htmleditor.BlockTd({})).toObject();
+        
+     
     },
     
-    validateValue : function(value){
-        return Roo.form.ComboBoxArray.superclass.validateValue.call(this, this.getValue());
-        
+    removeNode : function()
+    {
+        return this.node;
     },
     
-    /*@
-     * overide
-     * 
-     */
-    isDirty : function() {
-        if(this.disabled) {
-            return false;
-        }
-        
-        try {
-            var d = Roo.decode(String(this.originalValue));
-        } catch (e) {
-            return String(this.getValue()) !== String(this.originalValue);
-        }
-        
-        var originalValue = [];
-        
-        for (var i = 0; i < d.length; i++){
-            originalValue.push(d[i][this.valueField]);
-        }
-        
-        return String(this.getValue()) !== String(originalValue.join(','));
-        
+    
+    
+    resetWidths : function()
+    {
+        Array.from(this.node.getElementsByTagName('td')).forEach(function(n) {
+            var nn = Roo.htmleditor.Block.factory(n);
+            nn.width = '';
+            nn.updateElement(n);
+        });
     }
     
-});
+    
+    
+    
+})
 
+/**
+ *
+ * editing a TD?
+ *
+ * since selections really work on the table cell, then editing really should work from there
+ *
+ * The original plan was to support merging etc... - but that may not be needed yet..
+ *
+ * So this simple version will support:
+ *   add/remove cols
+ *   adjust the width +/-
+ *   reset the width...
+ *   
+ *
+ */
 
 
+ 
+
 /**
- * @class Roo.form.ComboBoxArray.Item
- * @extends Roo.BoxComponent
- * A selected item in the list
- *  Fred [x]  Brian [x]  [Pick another |v]
+ * @class Roo.htmleditor.BlockTable
+ * Block that manages a table
  * 
  * @constructor
- * Create a new item.
+ * Create a new Filter.
  * @param {Object} config Configuration options
  */
- 
-Roo.form.ComboBoxArray.Item = function(config) {
-    config.id = Roo.id();
-    Roo.form.ComboBoxArray.Item.superclass.constructor.call(this, config);
-}
 
-Roo.extend(Roo.form.ComboBoxArray.Item, Roo.BoxComponent, {
-    data : {},
-    cb: false,
-    displayField : false,
-    tipField : false,
-    
+Roo.htmleditor.BlockTd = function(cfg)
+{
+    if (cfg.node) {
+        this.readElement(cfg.node);
+        this.updateElement(cfg.node);
+    }
+    Roo.apply(this, cfg);
+     
     
-    defaultAutoCreate : {
-        tag: 'div',
-        cls: 'x-cbarray-item',
-        cn : [ 
-            { tag: 'div' },
-            {
-                tag: 'img',
-                width:16,
-                height : 16,
-                src : Roo.BLANK_IMAGE_URL ,
-                align: 'center'
-            }
-        ]
-        
-    },
     
+}
+Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
  
-    onRender : function(ct, position)
+    node : false,
+    
+    width: '',
+    textAlign : 'left',
+    valign : 'top',
+    
+    colspan : 1,
+    rowspan : 1,
+    
+    
+    // used by context menu
+    friendly_name : 'Table Cell',
+    deleteTitle : false, // use our customer delete
+    
+    // context menu is drawn once..
+    
+    contextMenu : function(toolbar)
     {
-        Roo.form.Field.superclass.onRender.call(this, ct, position);
         
-        if(!this.el){
-            var cfg = this.getAutoCreate();
-            this.el = ct.createChild(cfg, position);
-        }
+        var cell = function() {
+            return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
+        };
         
-        this.el.child('img').dom.setAttribute('src', Roo.BLANK_IMAGE_URL);
+        var table = function() {
+            return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode.closest('table'));
+        };
         
-        this.el.child('div').dom.innerHTML = this.cb.renderer ? 
-            this.cb.renderer(this.data) :
-            String.format('{0}',this.data[this.displayField]);
+        var lr = false;
+        var saveSel = function()
+        {
+            lr = toolbar.editorcore.getSelection().getRangeAt(0);
+        }
+        var restoreSel = function()
+        {
+            if (lr) {
+                (function() {
+                    toolbar.editorcore.focus();
+                    var cr = toolbar.editorcore.getSelection();
+                    cr.removeAllRanges();
+                    cr.addRange(lr);
+                    toolbar.editorcore.onEditorEvent();
+                }).defer(10, this);
+                
+                
+            }
+        }
         
-            
-        this.el.child('div').dom.setAttribute('qtip',
-                        String.format('{0}',this.data[this.tipField])
-        );
+        var rooui =  typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
         
-        this.el.child('img').on('click', this.remove, this);
+        var syncValue = toolbar.editorcore.syncValue;
         
-    },
-   
-    remove : function()
-    {
-        if(this.cb.disabled){
-            return;
-        }
+        var fields = {};
         
-        if(false !== this.cb.fireEvent('beforeremove', this.cb, this)){
-            this.cb.items.remove(this);
-            this.el.child('img').un('click', this.remove, this);
-            this.el.remove();
-            this.cb.updateHiddenEl();
-
-            this.cb.fireEvent('remove', this.cb, this);
-        }
+        return [
+            {
+                xtype : 'Button',
+                text : 'Edit Table',
+                listeners : {
+                    click : function() {
+                        var t = toolbar.tb.selectedNode.closest('table');
+                        toolbar.editorcore.selectNode(t);
+                        toolbar.editorcore.onEditorEvent();                        
+                    }
+                }
+                
+            },
+              
+           
+             
+            {
+                xtype : 'TextItem',
+                text : "Column Width: ",
+                 xns : rooui.Toolbar 
+               
+            },
+            {
+                xtype : 'Button',
+                text: '-',
+                listeners : {
+                    click : function (_self, e)
+                    {
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        cell().shrinkColumn();
+                        syncValue();
+                         toolbar.editorcore.onEditorEvent();
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+            {
+                xtype : 'Button',
+                text: '+',
+                listeners : {
+                    click : function (_self, e)
+                    {
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        cell().growColumn();
+                        syncValue();
+                        toolbar.editorcore.onEditorEvent();
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+            
+            {
+                xtype : 'TextItem',
+                text : "Vertical Align: ",
+                xns : rooui.Toolbar  //Boostrap?
+            },
+            {
+                xtype : 'ComboBox',
+                allowBlank : false,
+                displayField : 'val',
+                editable : true,
+                listWidth : 100,
+                triggerAction : 'all',
+                typeAhead : true,
+                valueField : 'val',
+                width : 100,
+                name : 'valign',
+                listeners : {
+                    select : function (combo, r, index)
+                    {
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        var b = cell();
+                        b.valign = r.get('val');
+                        b.updateElement();
+                        syncValue();
+                        toolbar.editorcore.onEditorEvent();
+                    }
+                },
+                xns : rooui.form,
+                store : {
+                    xtype : 'SimpleStore',
+                    data : [
+                        ['top'],
+                        ['middle'],
+                        ['bottom'] // there are afew more... 
+                    ],
+                    fields : [ 'val'],
+                    xns : Roo.data
+                }
+            },
+            
+            {
+                xtype : 'TextItem',
+                text : "Merge Cells: ",
+                 xns : rooui.Toolbar 
+               
+            },
+            
+            
+            {
+                xtype : 'Button',
+                text: 'Right',
+                listeners : {
+                    click : function (_self, e)
+                    {
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        cell().mergeRight();
+                        //block().growColumn();
+                        syncValue();
+                        toolbar.editorcore.onEditorEvent();
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+             
+            {
+                xtype : 'Button',
+                text: 'Below',
+                listeners : {
+                    click : function (_self, e)
+                    {
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        cell().mergeBelow();
+                        //block().growColumn();
+                        syncValue();
+                        toolbar.editorcore.onEditorEvent();
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+            {
+                xtype : 'TextItem',
+                text : "| ",
+                 xns : rooui.Toolbar 
+               
+            },
+            
+            {
+                xtype : 'Button',
+                text: 'Split',
+                listeners : {
+                    click : function (_self, e)
+                    {
+                        //toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        cell().split();
+                        syncValue();
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        toolbar.editorcore.onEditorEvent();
+                                             
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+            {
+                xtype : 'Fill',
+                xns : rooui.Toolbar 
+               
+            },
         
-    }
-});/*
- * 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...
+          
+            {
+                xtype : 'Button',
+                text: 'Delete',
+                 
+                xns : rooui.Toolbar,
+                menu : {
+                    xtype : 'Menu',
+                    xns : rooui.menu,
+                    items : [
+                        {
+                            xtype : 'Item',
+                            html: 'Column',
+                            listeners : {
+                                click : function (_self, e)
+                                {
+                                    var t = table();
+                                    
+                                    cell().deleteColumn();
+                                    syncValue();
+                                    toolbar.editorcore.selectNode(t.node);
+                                    toolbar.editorcore.onEditorEvent();   
+                                }
+                            },
+                            xns : rooui.menu
+                        },
+                        {
+                            xtype : 'Item',
+                            html: 'Row',
+                            listeners : {
+                                click : function (_self, e)
+                                {
+                                    var t = table();
+                                    cell().deleteRow();
+                                    syncValue();
+                                    
+                                    toolbar.editorcore.selectNode(t.node);
+                                    toolbar.editorcore.onEditorEvent();   
+                                                         
+                                }
+                            },
+                            xns : rooui.menu
+                        },
+                       {
+                            xtype : 'Separator',
+                            xns : rooui.menu
+                        },
+                        {
+                            xtype : 'Item',
+                            html: 'Table',
+                            listeners : {
+                                click : function (_self, e)
+                                {
+                                    var t = table();
+                                    var nn = t.node.nextSibling || t.node.previousSibling;
+                                    t.node.parentNode.removeChild(t.node);
+                                    if (nn) { 
+                                        toolbar.editorcore.selectNode(nn, true);
+                                    }
+                                    toolbar.editorcore.onEditorEvent();   
+                                                         
+                                }
+                            },
+                            xns : rooui.menu
+                        }
+                    ]
+                }
+            }
+            
+            // align... << fixme
+            
+        ];
+        
+    },
     
-    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');
+  /**
+     * create a DomHelper friendly object - for use with
+     * Roo.DomHelper.markup / overwrite / etc..
+     * ?? should it be called with option to hide all editing features?
+     */
+ /**
+     * create a DomHelper friendly object - for use with
+     * Roo.DomHelper.markup / overwrite / etc..
+     * ?? should it be called with option to hide all editing features?
+     */
+    toObject : function()
+    {
+        
+        var ret = {
+            tag : 'td',
+            contenteditable : 'true', // this stops cell selection from picking the table.
+            'data-block' : 'Td',
+            valign : this.valign,
+            style : {  
+                'text-align' :  this.textAlign,
+                border : 'solid 1px rgb(0, 0, 0)', // ??? hard coded?
+                'border-collapse' : 'collapse',
+                padding : '6px', // 8 for desktop / 4 for mobile
+                'vertical-align': this.valign
+            },
+            html : this.html
+        };
+        if (this.width != '') {
+            ret.width = this.width;
+            ret.style.width = this.width;
+        }
+        
+        
+        if (this.colspan > 1) {
+            ret.colspan = this.colspan ;
+        } 
+        if (this.rowspan > 1) {
+            ret.rowspan = this.rowspan ;
         }
+        
+           
+        
+        return ret;
+         
     },
-
-    initEvents : function(){
-        Roo.form.Checkbox.superclass.initEvents.call(this);
-        this.el.on("click", this.onClick,  this);
-        this.el.on("change", this.onClick,  this);
+    
+    readElement : function(node)
+    {
+        node  = node ? node : this.node ;
+        this.width = node.style.width;
+        this.colspan = Math.max(1,1*node.getAttribute('colspan'));
+        this.rowspan = Math.max(1,1*node.getAttribute('rowspan'));
+        this.html = node.innerHTML;
+        
+        
     },
-
-
-    getResizeEl : function(){
-        return this.wrap;
+     
+    // the default cell object... at present...
+    emptyCell : function() {
+        return {
+            colspan :  1,
+            rowspan :  1,
+            textAlign : 'left',
+            html : "&nbsp;" // is this going to be editable now?
+        };
+     
     },
-
-    getPositionEl : function(){
-        return this.wrap;
+    
+    removeNode : function()
+    {
+        return this.node.closest('table');
+         
     },
-
-    // private
-    onRender : function(ct, position){
-        Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
-        /*
-        if(this.inputValue !== undefined){
-            this.el.dom.value = this.inputValue;
+    
+    cellData : false,
+    
+    colWidths : false,
+    
+    toTableArray  : function()
+    {
+        var ret = [];
+        var tab = this.node.closest('tr').closest('table');
+        Array.from(tab.rows).forEach(function(r, ri){
+            ret[ri] = [];
+        });
+        var rn = 0;
+        this.colWidths = [];
+        var all_auto = true;
+        Array.from(tab.rows).forEach(function(r, ri){
+            
+            var cn = 0;
+            Array.from(r.cells).forEach(function(ce, ci){
+                var c =  {
+                    cell : ce,
+                    row : rn,
+                    col: cn,
+                    colspan : ce.colSpan,
+                    rowspan : ce.rowSpan
+                };
+                if (ce.isEqualNode(this.node)) {
+                    this.cellData = c;
+                }
+                // if we have been filled up by a row?
+                if (typeof(ret[rn][cn]) != 'undefined') {
+                    while(typeof(ret[rn][cn]) != 'undefined') {
+                        cn++;
+                    }
+                    c.col = cn;
+                }
+                
+                if (typeof(this.colWidths[cn]) == 'undefined') {
+                    this.colWidths[cn] =   ce.style.width;
+                    if (this.colWidths[cn] != '') {
+                        all_auto = false;
+                    }
+                }
+                
+                
+                if (c.colspan < 2 && c.rowspan < 2 ) {
+                    ret[rn][cn] = c;
+                    cn++;
+                    return;
+                }
+                for(var j = 0; j < c.rowspan; j++) {
+                    if (typeof(ret[rn+j]) == 'undefined') {
+                        continue; // we have a problem..
+                    }
+                    ret[rn+j][cn] = c;
+                    for(var i = 0; i < c.colspan; i++) {
+                        ret[rn+j][cn+i] = c;
+                    }
+                }
+                
+                cn += c.colspan;
+            }, this);
+            rn++;
+        }, this);
+        
+        // initalize widths.?
+        // either all widths or no widths..
+        if (all_auto) {
+            this.colWidths[0] = false; // no widths flag.
         }
-        */
-        //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
         
+        return ret;
         
+    },
+    
+    
+    
+    
+    mergeRight: function()
+    {
+         
+        // get the contents of the next cell along..
+        var tr = this.node.closest('tr');
+        var i = Array.prototype.indexOf.call(tr.childNodes, this.node);
+        if (i >= tr.childNodes.length - 1) {
+            return; // no cells on right to merge with.
+        }
+        var table = this.toTableArray();
         
-        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 (typeof(table[this.cellData.row][this.cellData.col+this.cellData.colspan]) == 'undefined') {
+            return; // nothing right?
         }
-        //if(this.checked){
-            this.setChecked(this.checked);
-        //}else{
-            //this.checked = this.el.dom;
-        //}
+        var rc = table[this.cellData.row][this.cellData.col+this.cellData.colspan];
+        // right cell - must be same rowspan and on the same row.
+        if (rc.rowspan != this.cellData.rowspan || rc.row != this.cellData.row) {
+            return; // right hand side is not same rowspan.
+        }
+        
+        
+        
+        this.node.innerHTML += ' ' + rc.cell.innerHTML;
+        tr.removeChild(rc.cell);
+        this.colspan += rc.colspan;
+        this.node.setAttribute('colspan', this.colspan);
 
     },
-
-    // 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;
+    
+    
+    mergeBelow : function()
+    {
+        var table = this.toTableArray();
+        if (typeof(table[this.cellData.row+this.cellData.rowspan]) == 'undefined') {
+            return; // no row below
         }
-        return this.valueOff;
+        if (typeof(table[this.cellData.row+this.cellData.rowspan][this.cellData.col]) == 'undefined') {
+            return; // nothing right?
+        }
+        var rc = table[this.cellData.row+this.cellData.rowspan][this.cellData.col];
         
+        if (rc.colspan != this.cellData.colspan || rc.col != this.cellData.col) {
+            return; // right hand side is not same rowspan.
+        }
+        this.node.innerHTML =  this.node.innerHTML + rc.cell.innerHTML ;
+        rc.cell.parentNode.removeChild(rc.cell);
+        this.rowspan += rc.rowspan;
+        this.node.setAttribute('rowspan', this.rowspan);
     },
-
-	// private
-    onClick : function(){ 
-        if (this.disabled) {
+    
+    split: function()
+    {
+        if (this.node.rowSpan < 2 && this.node.colSpan < 2) {
             return;
         }
-        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){
+        var table = this.toTableArray();
+        var cd = this.cellData;
+        this.rowspan = 1;
+        this.colspan = 1;
+        
+        for(var r = cd.row; r < cd.row + cd.rowspan; r++) {
+            
+            
+            
+            for(var c = cd.col; c < cd.col + cd.colspan; c++) {
+                if (r == cd.row && c == cd.col) {
+                    this.node.removeAttribute('rowspan');
+                    this.node.removeAttribute('colspan');
+                    continue;
+                }
+                 
+                var ntd = this.node.cloneNode(); // which col/row should be 0..
+                ntd.removeAttribute('id'); //
+                //ntd.style.width  = '';
+                ntd.innerHTML = '';
+                table[r][c] = { cell : ntd, col : c, row: r , colspan : 1 , rowspan : 1   };
+            }
+            
+        }
+        this.redrawAllCells(table);
         
+         
         
-        //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)
+    
+    
+    
+    redrawAllCells: function(table)
     {
-        if (this.inSetChecked) {
-            this.checked = state;
-            return;
+        
+         
+        var tab = this.node.closest('tr').closest('table');
+        var ctr = tab.rows[0].parentNode;
+        Array.from(tab.rows).forEach(function(r, ri){
+            
+            Array.from(r.cells).forEach(function(ce, ci){
+                ce.parentNode.removeChild(ce);
+            });
+            r.parentNode.removeChild(r);
+        });
+        for(var r = 0 ; r < table.length; r++) {
+            var re = tab.rows[r];
+            
+            var re = tab.ownerDocument.createElement('tr');
+            ctr.appendChild(re);
+            for(var c = 0 ; c < table[r].length; c++) {
+                if (table[r][c].cell === false) {
+                    continue;
+                }
+                
+                re.appendChild(table[r][c].cell);
+                 
+                table[r][c].cell = false;
+            }
         }
         
+    },
+    updateWidths : function(table)
+    {
+        for(var r = 0 ; r < table.length; r++) {
+           
+            for(var c = 0 ; c < table[r].length; c++) {
+                if (table[r][c].cell === false) {
+                    continue;
+                }
+                
+                if (this.colWidths[0] != false && table[r][c].colspan < 2) {
+                    var el = Roo.htmleditor.Block.factory(table[r][c].cell);
+                    el.width = Math.floor(this.colWidths[c])  +'%';
+                    el.updateElement(el.node);
+                }
+                table[r][c].cell = false; // done
+            }
+        }
+    },
+    normalizeWidths : function(table)
+    {
     
-        if(this.wrap){
-            this.wrap[state ? 'addClass' : 'removeClass']('x-menu-item-checked');
+        if (this.colWidths[0] === false) {
+            var nw = 100.0 / this.colWidths.length;
+            this.colWidths.forEach(function(w,i) {
+                this.colWidths[i] = nw;
+            },this);
+            return;
         }
-        this.checked = state;
-        if(suppressEvent !== true){
-            this.fireEvent('check', this, state);
+    
+        var t = 0, missing = [];
+        
+        this.colWidths.forEach(function(w,i) {
+            //if you mix % and
+            this.colWidths[i] = this.colWidths[i] == '' ? 0 : (this.colWidths[i]+'').replace(/[^0-9]+/g,'')*1;
+            var add =  this.colWidths[i];
+            if (add > 0) {
+                t+=add;
+                return;
+            }
+            missing.push(i);
+            
+            
+        },this);
+        var nc = this.colWidths.length;
+        if (missing.length) {
+            var mult = (nc - missing.length) / (1.0 * nc);
+            var t = mult * t;
+            var ew = (100 -t) / (1.0 * missing.length);
+            this.colWidths.forEach(function(w,i) {
+                if (w > 0) {
+                    this.colWidths[i] = w * mult;
+                    return;
+                }
+                
+                this.colWidths[i] = ew;
+            }, this);
+            // have to make up numbers..
+             
         }
-        this.inSetChecked = true;
-        this.el.dom.value = state ? this.inputValue : this.valueOff;
-        this.inSetChecked = false;
+        // now we should have all the widths..
         
+    
     },
-    // handle setting of hidden value by some other method!!?!?
-    setFromHidden: function()
+    
+    shrinkColumn : function()
     {
-        if(!this.el){
+        var table = this.toTableArray();
+        this.normalizeWidths(table);
+        var col = this.cellData.col;
+        var nw = this.colWidths[col] * 0.8;
+        if (nw < 5) {
             return;
         }
-        //console.log("SET FROM HIDDEN");
-        //alert('setFrom hidden');
-        this.setValue(this.el.dom.value);
+        var otherAdd = (this.colWidths[col]  * 0.2) / (this.colWidths.length -1);
+        this.colWidths.forEach(function(w,i) {
+            if (i == col) {
+                 this.colWidths[i] = nw;
+                return;
+            }
+            this.colWidths[i] += otherAdd
+        }, this);
+        this.updateWidths(table);
+         
     },
-    
-    onDestroy : function()
+    growColumn : function()
     {
-        if(this.viewEl){
-            Roo.get(this.viewEl).remove();
+        var table = this.toTableArray();
+        this.normalizeWidths(table);
+        var col = this.cellData.col;
+        var nw = this.colWidths[col] * 1.2;
+        if (nw > 90) {
+            return;
         }
+        var otherSub = (this.colWidths[col]  * 0.2) / (this.colWidths.length -1);
+        this.colWidths.forEach(function(w,i) {
+            if (i == col) {
+                this.colWidths[i] = nw;
+                return;
+            }
+            this.colWidths[i] -= otherSub
+        }, this);
+        this.updateWidths(table);
          
-        Roo.form.Checkbox.superclass.onDestroy.call(this);
     },
-    
-    setBoxLabel : function(str)
+    deleteRow : function()
     {
-        this.wrap.select('.x-form-cb-label', true).first().dom.innerHTML = str;
-    }
-
-});/*
- * 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;
-    },
-    
-    
-    onRender : function(ct, position){
-        Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
-        
-        if(this.inputValue !== undefined){
-            this.el.dom.value = this.inputValue;
+        // delete this rows 'tr'
+        // if any of the cells in this row have a rowspan > 1 && row!= this row..
+        // then reduce the rowspan.
+        var table = this.toTableArray();
+        // this.cellData.row;
+        for (var i =0;i< table[this.cellData.row].length ; i++) {
+            var c = table[this.cellData.row][i];
+            if (c.row != this.cellData.row) {
+                
+                c.rowspan--;
+                c.cell.setAttribute('rowspan', c.rowspan);
+                continue;
+            }
+            if (c.rowspan > 1) {
+                c.rowspan--;
+                c.cell.setAttribute('rowspan', c.rowspan);
+            }
         }
-         
-        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
-        
+        table.splice(this.cellData.row,1);
+        this.redrawAllCells(table);
         
+    },
+    deleteColumn : function()
+    {
+        var table = this.toTableArray();
         
-        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.el.dom.checked =   'checked' ;
+        for (var i =0;i< table.length ; i++) {
+            var c = table[i][this.cellData.col];
+            if (c.col != this.cellData.col) {
+                table[i][this.cellData.col].colspan--;
+            } else if (c.colspan > 1) {
+                c.colspan--;
+                c.cell.setAttribute('colspan', c.colspan);
+            }
+            table[i].splice(this.cellData.col,1);
         }
-         
-    } 
+        
+        this.redrawAllCells(table);
+    }
     
     
-});//<script type="text/javascript">
+    
+    
+})
+
+//<script type="text/javascript">
 
 /*
  * Based  Ext JS Library 1.1.1
@@ -24789,7 +25070,8 @@ Roo.HtmlEditorCore = function(config){
          * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
          * @param {Roo.HtmlEditorCore} this
          */
-        editorevent: true
+        editorevent: true 
+         
         
     });
     
@@ -24825,13 +25107,32 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
      * @cfg {Number} width (in pixels)
      */   
     width: 500,
+     /**
+     * @cfg {boolean} autoClean - default true - loading and saving will remove quite a bit of formating,
+     *         if you are doing an email editor, this probably needs disabling, it's designed
+     */
+    autoClean: true,
     
+    /**
+     * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled)
+     */
+    enableBlocks : true,
     /**
      * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
      * 
      */
     stylesheets: false,
+     /**
+     * @cfg {String} language default en - language of text (usefull for rtl languages)
+     * 
+     */
+    language: 'en',
     
+    /**
+     * @cfg {boolean} allowComments - default false - allow comments in HTML source
+     *          - by default they are stripped - if you are editing email you may need this.
+     */
+    allowComments: false,
     // id of frame..
     frameId: false,
     
@@ -24851,8 +25152,10 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
     black: false,
     white: false,
      
-    
+    bodyCls : '',
 
+    
+    undoManager : false,
     /**
      * 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
@@ -24878,20 +25181,33 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
                 st = '<style type="text/css">' +
                     'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
                    '</style>';
-        } else { 
+        } else {
+            for (var i in this.stylesheets) {
+                if (typeof(this.stylesheets[i]) != 'string') {
+                    continue;
+                }
+                st += '<link rel="stylesheet" href="' + this.stylesheets[i] +'" type="text/css">';
+            }
             
         }
         
         st +=  '<style type="text/css">' +
             'IMG { cursor: pointer } ' +
         '</style>';
-
         
-        return '<html><head>' + st  +
+        st += '<meta name="google" content="notranslate">';
+        
+        var cls = 'notranslate roo-htmleditor-body';
+        
+        if(this.bodyCls.length){
+            cls += ' ' + this.bodyCls;
+        }
+        
+        return '<html  class="notranslate" translate="no"><head>' + st  +
             //<style type="text/css">' +
             //'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
             //'</style>' +
-            ' </head><body class="roo-htmleditor-body"></body></html>';
+            ' </head><body contenteditable="true" data-enable-grammerly="true" class="' +  cls + '"></body></html>';
     },
 
     // private
@@ -24930,7 +25246,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
         
         this.iframe = iframe.dom;
 
-         this.assignDocWin();
+        this.assignDocWin();
         
         this.doc.designMode = 'on';
        
@@ -24946,6 +25262,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
                 if(this.doc.body || this.doc.readyState == 'complete'){
                     try {
                         this.doc.designMode="on";
+                        
                     } catch (e) {
                         return;
                     }
@@ -24993,10 +25310,10 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
         
         if(this.sourceEditMode){
  
-            Roo.get(this.iframe).addClass(['x-hidden','hide']);     //FIXME - what's the BS styles for these
+            Roo.get(this.iframe).addClass(['x-hidden','hide', 'd-none']);     //FIXME - what's the BS styles for these
             
         }else{
-            Roo.get(this.iframe).removeClass(['x-hidden','hide']);
+            Roo.get(this.iframe).removeClass(['x-hidden','hide', 'd-none']);
             //this.iframe.className = '';
             this.deferFocus();
         }
@@ -25013,7 +25330,8 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
      * @param {String} html The HTML to be cleaned
      * return {String} The cleaned HTML
      */
-    cleanHtml : function(html){
+    cleanHtml : function(html)
+    {
         html = String(html);
         if(html.length > 5){
             if(Roo.isSafari){ // strip safari nonsense
@@ -25031,11 +25349,38 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
      * Protected method that will not generally be called directly. Syncs the contents
      * of the editor iframe with the textarea.
      */
-    syncValue : function(){
+    syncValue : function()
+    {
+        //Roo.log("HtmlEditorCore:syncValue (EDITOR->TEXT)");
         if(this.initialized){
+            
+            this.undoManager.addEvent();
+
+            
             var bd = (this.doc.body || this.doc.documentElement);
-            //this.cleanUpPaste(); -- this is done else where and causes havoc..
-            var html = bd.innerHTML;
+           
+            
+            var sel = this.win.getSelection();
+            
+            var div = document.createElement('div');
+            div.innerHTML = bd.innerHTML;
+            var gtx = div.getElementsByClassName('gtx-trans-icon'); // google translate - really annoying and difficult to get rid of.
+            if (gtx.length > 0) {
+                var rm = gtx.item(0).parentNode;
+                rm.parentNode.removeChild(rm);
+            }
+            
+           
+            if (this.enableBlocks) {
+                new Roo.htmleditor.FilterBlock({ node : div });
+            }
+            //?? tidy?
+            var tidy = new Roo.htmleditor.TidySerializer({
+                inner:  true
+            });
+            var html  = tidy.serialize(div);
+            
+            
             if(Roo.isSafari){
                 var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
                 var m = bs ? bs.match(/text-align:(.*?);/i) : false;
@@ -25046,17 +25391,32 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
             html = this.cleanHtml(html);
             // fix up the special chars.. normaly like back quotes in word...
             // however we do not want to do this with chinese..
-            html = html.replace(/([\x80-\uffff])/g, function (a, b) {
-                var cc = b.charCodeAt();
-                if (
+            html = html.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g, function(match) {
+                
+                var cc = match.charCodeAt();
+
+                // Get the character value, handling surrogate pairs
+                if (match.length == 2) {
+                    // It's a surrogate pair, calculate the Unicode code point
+                    var high = match.charCodeAt(0) - 0xD800;
+                    var low  = match.charCodeAt(1) - 0xDC00;
+                    cc = (high * 0x400) + low + 0x10000;
+                }  else if (
                     (cc >= 0x4E00 && cc < 0xA000 ) ||
                     (cc >= 0x3400 && cc < 0x4E00 ) ||
                     (cc >= 0xf900 && cc < 0xfb00 )
                 ) {
-                        return b;
-                }
-                return "&#"+cc+";" 
+                        return match;
+                }  
+         
+                // No, use a numeric entity. Here we brazenly (and possibly mistakenly)
+                return "&#" + cc + ";";
+                
+                
             });
+            
+            
+             
             if(this.owner.fireEvent('beforesync', this, html) !== false){
                 this.el.dom.value = html;
                 this.owner.fireEvent('sync', this, html);
@@ -25065,24 +25425,41 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
     },
 
     /**
+     * TEXTAREA -> EDITABLE
      * Protected method that will not generally be called directly. Pushes the value of the textarea
      * into the iframe editor.
      */
-    pushValue : function(){
+    pushValue : function()
+    {
+        //Roo.log("HtmlEditorCore:pushValue (TEXT->EDITOR)");
         if(this.initialized){
             var v = this.el.dom.value.trim();
             
-//            if(v.length < 1){
-//                v = '&#160;';
-//            }
             
             if(this.owner.fireEvent('beforepush', this, v) !== false){
                 var d = (this.doc.body || this.doc.documentElement);
                 d.innerHTML = v;
-                this.cleanUpPaste();
+                 
                 this.el.dom.value = d.innerHTML;
                 this.owner.fireEvent('push', this, v);
             }
+            if (this.autoClean) {
+                new Roo.htmleditor.FilterParagraph({node : this.doc.body}); // paragraphs
+                new Roo.htmleditor.FilterSpan({node : this.doc.body}); // empty spans
+            }
+            if (this.enableBlocks) {
+                Roo.htmleditor.Block.initAll(this.doc.body);
+            }
+            
+            this.updateLanguage();
+            
+            var lc = this.doc.body.lastChild;
+            if (lc && lc.nodeType == 1 && lc.getAttribute("contenteditable") == "false") {
+                // add an extra line at the end.
+                this.doc.body.appendChild(this.doc.createElement('br'));
+            }
+            
+            
         }
     },
 
@@ -25144,28 +25521,141 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
         //var ss = this.el.getStyles( 'background-image', 'background-repeat');
         //ss['background-attachment'] = 'fixed'; // w3c
         dbody.bgProperties = 'fixed'; // ie
+        dbody.setAttribute("translate", "no");
+        
         //Roo.DomHelper.applyStyles(dbody, ss);
         Roo.EventManager.on(this.doc, {
-            //'mousedown': this.onEditorEvent,
+             
             'mouseup': this.onEditorEvent,
             'dblclick': this.onEditorEvent,
             'click': this.onEditorEvent,
             'keyup': this.onEditorEvent,
+            
             buffer:100,
             scope: this
         });
+        Roo.EventManager.on(this.doc, {
+            'paste': this.onPasteEvent,
+            scope : this
+        });
         if(Roo.isGecko){
             Roo.EventManager.on(this.doc, 'keypress', this.mozKeyPress, this);
         }
+        //??? needed???
         if(Roo.isIE || Roo.isSafari || Roo.isOpera){
             Roo.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
         }
         this.initialized = true;
 
+        
+        // initialize special key events - enter
+        new Roo.htmleditor.KeyEnter({core : this});
+        
+         
+        
         this.owner.fireEvent('initialize', this);
         this.pushValue();
     },
-
+    // this is to prevent a href clicks resulting in a redirect?
+   
+    onPasteEvent : function(e,v)
+    {
+        // I think we better assume paste is going to be a dirty load of rubish from word..
+        
+        // even pasting into a 'email version' of this widget will have to clean up that mess.
+        var cd = (e.browserEvent.clipboardData || window.clipboardData);
+        
+        // check what type of paste - if it's an image, then handle it differently.
+        if (cd.files && cd.files.length > 0) {
+            // pasting images?
+            var urlAPI = (window.createObjectURL && window) || 
+                (window.URL && URL.revokeObjectURL && URL) || 
+                (window.webkitURL && webkitURL);
+    
+            var url = urlAPI.createObjectURL( cd.files[0]);
+            this.insertAtCursor('<img src=" + url + ">');
+            return false;
+        }
+        if (cd.types.indexOf('text/html') < 0 ) {
+            return false;
+        }
+        var images = [];
+        var html = cd.getData('text/html'); // clipboard event
+        if (cd.types.indexOf('text/rtf') > -1) {
+            var parser = new Roo.rtf.Parser(cd.getData('text/rtf'));
+            images = parser.doc ? parser.doc.getElementsByType('pict') : [];
+        }
+        Roo.log(images);
+        //Roo.log(imgs);
+        // fixme..
+        images = images.filter(function(g) { return !g.path.match(/^rtf\/(head|pgdsctbl|listtable|footerf)/); }) // ignore headers/footers etc.
+                       .map(function(g) { return g.toDataURL(); })
+                       .filter(function(g) { return g != 'about:blank'; });
+        
+        
+        html = this.cleanWordChars(html);
+        
+        var d = (new DOMParser().parseFromString(html, 'text/html')).body;
+        
+        
+        var sn = this.getParentElement();
+        // check if d contains a table, and prevent nesting??
+        //Roo.log(d.getElementsByTagName('table'));
+        //Roo.log(sn);
+        //Roo.log(sn.closest('table'));
+        if (d.getElementsByTagName('table').length && sn && sn.closest('table')) {
+            e.preventDefault();
+            this.insertAtCursor("You can not nest tables");
+            //Roo.log("prevent?"); // fixme - 
+            return false;
+        }
+        
+        if (images.length > 0) {
+            Roo.each(d.getElementsByTagName('img'), function(img, i) {
+                img.setAttribute('src', images[i]);
+            });
+        }
+        if (this.autoClean) {
+            new Roo.htmleditor.FilterStyleToTag({ node : d });
+            new Roo.htmleditor.FilterAttributes({
+                node : d,
+                attrib_white : ['href', 'src', 'name', 'align', 'colspan', 'rowspan'],
+                attrib_clean : ['href', 'src' ] 
+            });
+            new Roo.htmleditor.FilterBlack({ node : d, tag : this.black});
+            // should be fonts..
+            new Roo.htmleditor.FilterKeepChildren({node : d, tag : [ 'FONT', 'O:P' ]} );
+            new Roo.htmleditor.FilterParagraph({ node : d });
+            new Roo.htmleditor.FilterSpan({ node : d });
+            new Roo.htmleditor.FilterLongBr({ node : d });
+        }
+        if (this.enableBlocks) {
+                
+            Array.from(d.getElementsByTagName('img')).forEach(function(img) {
+                if (img.closest('figure')) { // assume!! that it's aready
+                    return;
+                }
+                var fig  = new Roo.htmleditor.BlockFigure({
+                    image_src  : img.src
+                });
+                fig.updateElement(img); // replace it..
+                
+            });
+        }
+        
+        
+        this.insertAtCursor(d.innerHTML.replace(/&nbsp;/g,' '));
+        if (this.enableBlocks) {
+            Roo.htmleditor.Block.initAll(this.doc.body);
+        }
+        
+        
+        e.preventDefault();
+        return false;
+        // default behaveiour should be our local cleanup paste? (optional?)
+        // for simple editor - we want to hammer the paste and get rid of everything... - so over-rideable..
+        //this.owner.fireEvent('paste', e, v);
+    },
     // private
     onDestroy : function(){
         
@@ -25187,7 +25677,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
     onFirstFocus : function(){
         
         this.assignDocWin();
-        
+        this.undoManager = new Roo.lib.UndoManager(100,(this.doc.body || this.doc.documentElement));
         
         this.activated = true;
          
@@ -25232,15 +25722,57 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
 
     onEditorEvent : function(e)
     {
-        this.owner.fireEvent('editorevent', this, e);
+         
+        
+        if (e && (e.ctrlKey || e.metaKey) && e.keyCode === 90) {
+            return; // we do not handle this.. (undo manager does..)
+        }
+        // in theory this detects if the last element is not a br, then we try and do that.
+        // its so clicking in space at bottom triggers adding a br and moving the cursor.
+        if (e &&
+            e.target.nodeName == 'BODY' &&
+            e.type == "mouseup" &&
+            this.doc.body.lastChild
+           ) {
+            var lc = this.doc.body.lastChild;
+            // gtx-trans is google translate plugin adding crap.
+            while ((lc.nodeType == 3 && lc.nodeValue == '') || lc.id == 'gtx-trans') {
+                lc = lc.previousSibling;
+            }
+            if (lc.nodeType == 1 && lc.nodeName != 'BR') {
+            // if last element is <BR> - then dont do anything.
+            
+                var ns = this.doc.createElement('br');
+                this.doc.body.appendChild(ns);
+                range = this.doc.createRange();
+                range.setStartAfter(ns);
+                range.collapse(true);
+                var sel = this.win.getSelection();
+                sel.removeAllRanges();
+                sel.addRange(range);
+            }
+        }
+        
+        
+        
+        this.fireEditorEvent(e);
       //  this.updateToolbar();
         this.syncValue(); //we can not sync so often.. sync cleans, so this breaks stuff
     },
+    
+    fireEditorEvent: function(e)
+    {
+        this.owner.fireEvent('editorevent', this, e);
+    },
 
     insertTag : function(tg)
     {
         // could be a bit smarter... -> wrap the current selected tRoo..
-        if (tg.toLowerCase() == 'span' || tg.toLowerCase() == 'code') {
+        if (tg.toLowerCase() == 'span' ||
+            tg.toLowerCase() == 'code' ||
+            tg.toLowerCase() == 'sup' ||
+            tg.toLowerCase() == 'sub' 
+            ) {
             
             range = this.createRange(this.getSelection());
             var wrappingNode = this.doc.createElement(tg.toLowerCase());
@@ -25253,7 +25785,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
             
         }
         this.execCmd("formatblock",   tg);
-        
+        this.undoManager.addEvent(); 
     },
     
     insertText : function(txt)
@@ -25265,6 +25797,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
                //alert(Sender.getAttribute('label'));
                
         range.insertNode(this.doc.createTextNode(txt));
+        this.undoManager.addEvent();
     } ,
     
      
@@ -25275,7 +25808,37 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
      * @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){
+    relayCmd : function(cmd, value)
+    {
+        
+        switch (cmd) {
+            case 'justifyleft':
+            case 'justifyright':
+            case 'justifycenter':
+                // if we are in a cell, then we will adjust the
+                var n = this.getParentElement();
+                var td = n.closest('td');
+                if (td) {
+                    var bl = Roo.htmleditor.Block.factory(td);
+                    bl.textAlign = cmd.replace('justify','');
+                    bl.updateElement();
+                    this.owner.fireEvent('editorevent', this);
+                    return;
+                }
+                this.execCmd('styleWithCSS', true); // 
+                break;
+            case 'bold':
+            case 'italic':
+                // if there is no selection, then we insert, and set the curson inside it..
+                this.execCmd('styleWithCSS', false); 
+                break;
+                
+        
+            default:
+                break;
+        }
+        
+        
         this.win.focus();
         this.execCmd(cmd, value);
         this.owner.fireEvent('editorevent', this);
@@ -25305,25 +25868,10 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
     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();
-            
-            }
-            return;
-        }
-        */
+         
         if(Roo.isGecko || Roo.isOpera || Roo.isSafari){
             this.win.focus();
             
@@ -25333,19 +25881,31 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
             var win = this.win;
             
             if (win.getSelection && win.getSelection().getRangeAt) {
+                
+                // delete the existing?
+                
+                this.createRange(this.getSelection()).deleteContents();
                 range = win.getSelection().getRangeAt(0);
                 node = typeof(text) == 'string' ? range.createContextualFragment(text) : text;
                 range.insertNode(node);
+                range = range.cloneRange();
+                range.collapse(false);
+                 
+                win.getSelection().removeAllRanges();
+                win.getSelection().addRange(range);
+                
+                
+                
             } else if (win.document.selection && win.document.selection.createRange) {
                 // no firefox support
                 var txt = typeof(text) == 'string' ? text : text.outerHTML;
                 win.document.selection.createRange().pasteHTML(txt);
+            
             } else {
                 // no firefox support
                 var txt = typeof(text) == 'string' ? text : text.outerHTML;
                 this.execCmd('InsertHTML', txt);
             } 
-            
             this.syncValue();
             
             this.deferFocus();
@@ -25370,15 +25930,17 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
                         cmd = 'underline';
                         break;
                     
-                    case 'v':
-                        this.cleanUpPaste.defer(100, this);
-                        return;
+                    //case 'v':
+                      //  this.cleanUpPaste.defer(100, this);
+                      //  return;
                         
                 }
                 if(cmd){
-                    this.win.focus();
-                    this.execCmd(cmd);
-                    this.deferFocus();
+                    
+                    this.relayCmd(cmd);
+                    //this.win.focus();
+                    //this.execCmd(cmd);
+                    //this.deferFocus();
                     e.preventDefault();
                 }
                 
@@ -25388,6 +25950,8 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
 
     // private
     fixKeys : function(){ // load time branching for fastest keydown performance
+        
+        
         if(Roo.isIE){
             return function(e){
                 var k = e.getKey(), r;
@@ -25401,23 +25965,25 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
                     }
                     return;
                 }
-                
+                /// this is handled by Roo.htmleditor.KeyEnter
+                 /*
                 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.pasteHTML('<br/>');
                             r.collapse(false);
                             r.select();
                         }
                     }
                 }
-                if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
-                    this.cleanUpPaste.defer(100, this);
-                    return;
-                }
+                */
+                //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
+                //    this.cleanUpPaste.defer(100, this);
+                //    return;
+                //}
                 
                 
             };
@@ -25430,10 +25996,11 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
                     this.execCmd('InsertHTML','&#160;&#160;&#160;&#160;');
                     this.deferFocus();
                 }
-                if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
-                    this.cleanUpPaste.defer(100, this);
-                    return;
-                }
+               
+                //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
+                //    this.cleanUpPaste.defer(100, this);
+                 //   return;
+                //}
                 
             };
         }else if(Roo.isSafari){
@@ -25446,10 +26013,12 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
                     this.deferFocus();
                     return;
                 }
-               if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
-                    this.cleanUpPaste.defer(100, this);
-                    return;
-                }
+                 this.mozKeyPress(e);
+                
+               //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
+                 //   this.cleanUpPaste.defer(100, this);
+                 //   return;
+               // }
                 
              };
         }
@@ -25479,7 +26048,27 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
     getSelection : function() 
     {
         this.assignDocWin();
-        return Roo.isIE ? this.doc.selection : this.win.getSelection();
+        return Roo.lib.Selection.wrap(Roo.isIE ? this.doc.selection : this.win.getSelection(), this.doc);
+    },
+    /**
+     * Select a dom node
+     * @param {DomElement} node the node to select
+     */
+    selectNode : function(node, collapse)
+    {
+        var nodeRange = node.ownerDocument.createRange();
+        try {
+            nodeRange.selectNode(node);
+        } catch (e) {
+            nodeRange.selectNodeContents(node);
+        }
+        if (collapse === true) {
+            nodeRange.collapse(true);
+        }
+        //
+        var s = this.win.getSelection();
+        s.removeAllRanges();
+        s.addRange(nodeRange);
     },
     
     getSelectedNode: function() 
@@ -25488,8 +26077,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
         
         // should we cache this!!!!
         
-        
-        
+         
          
         var range = this.createRange(this.getSelection()).cloneRange();
         
@@ -25553,6 +26141,8 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
         
         return nodes[0];
     },
+    
+    
     createRange: function(sel)
     {
         // this has strange effects when using with 
@@ -25670,26 +26260,21 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
         // fully contined.
         return 3;
     },
-
-    // private? - in a new class?
-    cleanUpPaste :  function()
-    {
-        // cleans up the whole document..
-        Roo.log('cleanuppaste');
-        
-        this.cleanUpChildren(this.doc.body);
-        var clean = this.cleanWordChars(this.doc.body.innerHTML);
-        if (clean != this.doc.body.innerHTML) {
-            this.doc.body.innerHTML = clean;
-        }
-        
-    },
-    
+ 
     cleanWordChars : function(input) {// change the chars to hex code
-        var he = Roo.HtmlEditorCore;
         
+       var swapCodes  = [ 
+            [    8211, "&#8211;" ], 
+            [    8212, "&#8212;" ], 
+            [    8216,  "'" ],  
+            [    8217, "'" ],  
+            [    8220, '"' ],  
+            [    8221, '"' ],  
+            [    8226, "*" ],  
+            [    8230, "..." ]
+        ]; 
         var output = input;
-        Roo.each(he.swapCodes, function(sw) { 
+        Roo.each(swapCodes, function(sw) { 
             var swapper = new RegExp("\\u" + sw[0].toString(16), "g"); // hex codes
             
             output = output.replace(swapper, sw[1]);
@@ -25698,452 +26283,60 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
         return output;
     },
     
-    
-    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)
     {
-        var ed = this;
-        //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; 
-        }
-        var lcname = node.tagName.toLowerCase();
-        // we ignore whitelists... ?? = not really the way to go, but we probably have not got a full
-        // whitelist of tags..
-        
-        if (this.black.indexOf(lcname) > -1 && this.clearUp ) {
-            // remove node.
-            node.parentNode.removeChild(node);
-            return;
-            
-        }
-        
-        var remove_keep_children= Roo.HtmlEditorCore.remove.indexOf(node.tagName.toLowerCase()) > -1;
-        
-        // remove <a name=....> as rendering on yahoo mailer is borked with this.
-        // this will have to be flaged elsewhere - perhaps ablack=name... on the mailer..
-        
-        //if (node.tagName.toLowerCase() == 'a' && !node.hasAttribute('href')) {
-        //    remove_keep_children = true;
-        //}
-        
-        if (remove_keep_children) {
-            this.cleanUpChildren(node);
-            // inserts everything just before this node...
-            while (node.childNodes.length) {
-                var cn = node.childNodes[0];
-                node.removeChild(cn);
-                node.parentNode.insertBefore(cn, 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;
-            }
-            if (v.match(/^#/)) {
-                return;
-            }
-//            Roo.log("(REMOVE TAG)"+ node.tagName +'.' + n + '=' + v);
-            node.removeAttribute(n);
-            
-        }
-        
-        var cwhite = this.cwhite;
-        var cblack = this.cblack;
-            
-        function cleanStyle(n,v)
-        {
-            if (v.match(/expression/)) { //XSS?? should we even bother..
-                node.removeAttribute(n);
-                return;
-            }
-            
-            var parts = v.split(/;/);
-            var clean = [];
-            
-            Roo.each(parts, function(p) {
-                p = p.replace(/^\s+/g,'').replace(/\s+$/g,'');
-                if (!p.length) {
-                    return true;
-                }
-                var l = p.split(':').shift().replace(/\s+/g,'');
-                l = l.replace(/^\s+/g,'').replace(/\s+$/g,'');
-                
-                if ( cwhite.length && cblack.indexOf(l) > -1) {
-//                    Roo.log('(REMOVE CSS)' + node.tagName +'.' + n + ':'+l + '=' + v);
-                    //node.removeAttribute(n);
-                    return true;
-                }
-                //Roo.log()
-                // only allow 'c whitelisted system attributes'
-                if ( cwhite.length &&  cwhite.indexOf(l) < 0) {
-//                    Roo.log('(REMOVE CSS)' + node.tagName +'.' + n + ':'+l + '=' + v);
-                    //node.removeAttribute(n);
-                    return true;
-                }
-                
-                
-                 
-                
-                clean.push(p);
-                return true;
-            });
-            if (clean.length) { 
-                node.setAttribute(n, clean.join(';'));
-            } else {
-                node.removeAttribute(n);
-            }
-            
-        }
-        
-        
-        for (var i = node.attributes.length-1; i > -1 ; i--) {
-            var a = node.attributes[i];
-            //console.log(a);
-            
-            if (a.name.toLowerCase().substr(0,2)=='on')  {
-                node.removeAttribute(a.name);
-                continue;
-            }
-            if (Roo.HtmlEditorCore.ablack.indexOf(a.name.toLowerCase()) > -1) {
-                node.removeAttribute(a.name);
-                continue;
-            }
-            if (Roo.HtmlEditorCore.aclean.indexOf(a.name.toLowerCase()) > -1) {
-                cleanAttr(a.name,a.value); // fixme..
-                continue;
-            }
-            if (a.name == 'style') {
-                cleanStyle(a.name,a.value);
-                continue;
-            }
-            /// clean up MS crap..
-            // tecnically this should be a list of valid class'es..
-            
-            
-            if (a.name == 'class') {
-                if (a.value.match(/^Mso/)) {
-                    node.className = '';
-                }
-                
-                if (a.value.match(/body/)) {
-                    node.className = '';
-                }
-                continue;
-            }
-            
-            // style cleanup!?
-            // class cleanup?
-            
-        }
-        
-        
-        this.cleanUpChildren(node);
         
+        new Roo.htmleditor.FilterComment({node : node});
+        new Roo.htmleditor.FilterAttributes({
+                node : node,
+                attrib_black : this.ablack,
+                attrib_clean : this.aclean,
+                style_white : this.cwhite,
+                style_black : this.cblack
+        });
+        new Roo.htmleditor.FilterBlack({ node : node, tag : this.black});
+        new Roo.htmleditor.FilterKeepChildren({node : node, tag : this.tag_remove} );
+         
         
     },
     
     /**
      * Clean up MS wordisms...
+     * @deprecated - use filter directly
      */
     cleanWord : function(node)
     {
-        
-        
-        if (!node) {
-            this.cleanWord(this.doc.body);
-            return;
-        }
-        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 (node.tagName.toLowerCase().match(/^(style|script|applet|embed|noframes|noscript)$/)) {
-            node.parentNode.removeChild(node);
-            return;
-        }
-        
-        // remove - but keep children..
-        if (node.tagName.toLowerCase().match(/^(meta|link|\\?xml:|st1:|o:|font)/)) {
-            while (node.childNodes.length) {
-                var cn = node.childNodes[0];
-                node.removeChild(cn);
-                node.parentNode.insertBefore(cn, node);
-            }
-            node.parentNode.removeChild(node);
-            this.iterateChildren(node, this.cleanWord);
-            return;
-        }
-        // clean styles
-        if (node.className.length) {
-            
-            var cn = node.className.split(/\W+/);
-            var cna = [];
-            Roo.each(cn, function(cls) {
-                if (cls.match(/Mso[a-zA-Z]+/)) {
-                    return;
-                }
-                cna.push(cls);
-            });
-            node.className = cna.length ? cna.join(' ') : '';
-            if (!cna.length) {
-                node.removeAttribute("class");
-            }
-        }
-        
-        if (node.hasAttribute("lang")) {
-            node.removeAttribute("lang");
-        }
-        
-        if (node.hasAttribute("style")) {
-            
-            var styles = node.getAttribute("style").split(";");
-            var nstyle = [];
-            Roo.each(styles, function(s) {
-                if (!s.match(/:/)) {
-                    return;
-                }
-                var kv = s.split(":");
-                if (kv[0].match(/^(mso-|line|font|background|margin|padding|color)/)) {
-                    return;
-                }
-                // what ever is left... we allow.
-                nstyle.push(s);
-            });
-            node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
-            if (!nstyle.length) {
-                node.removeAttribute('style');
-            }
-        }
-        this.iterateChildren(node, this.cleanWord);
-        
-        
+        new Roo.htmleditor.FilterWord({ node : node ? node : this.doc.body });
         
     },
-    /**
-     * iterateChildren of a Node, calling fn each time, using this as the scole..
-     * @param {DomNode} node node to iterate children of.
-     * @param {Function} fn method of this class to call on each item.
-     */
-    iterateChildren : function(node, fn)
-    {
-        if (!node.childNodes.length) {
-                return;
-        }
-        for (var i = node.childNodes.length-1; i > -1 ; i--) {
-           fn.call(this, node.childNodes[i])
-        }
-    },
-    
+   
     
     /**
-     * cleanTableWidths.
-     *
-     * Quite often pasting from word etc.. results in tables with column and widths.
-     * This does not work well on fluid HTML layouts - like emails. - so this code should hunt an destroy them..
-     *
+
+     * @deprecated - use filters
      */
     cleanTableWidths : function(node)
     {
-         
-         
-        if (!node) {
-            this.cleanTableWidths(this.doc.body);
-            return;
-        }
-        
-        // ignore list...
-        if (node.nodeName == "#text" || node.nodeName == "#comment") {
-            return; 
-        }
-        Roo.log(node.tagName);
-        if (!node.tagName.toLowerCase().match(/^(table|td|tr)$/)) {
-            this.iterateChildren(node, this.cleanTableWidths);
-            return;
-        }
-        if (node.hasAttribute('width')) {
-            node.removeAttribute('width');
-        }
-        
-         
-        if (node.hasAttribute("style")) {
-            // pretty basic...
-            
-            var styles = node.getAttribute("style").split(";");
-            var nstyle = [];
-            Roo.each(styles, function(s) {
-                if (!s.match(/:/)) {
-                    return;
-                }
-                var kv = s.split(":");
-                if (kv[0].match(/^\s*(width|min-width)\s*$/)) {
-                    return;
-                }
-                // what ever is left... we allow.
-                nstyle.push(s);
-            });
-            node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
-            if (!nstyle.length) {
-                node.removeAttribute('style');
-            }
-        }
-        
-        this.iterateChildren(node, this.cleanTableWidths);
-        
+        new Roo.htmleditor.FilterTableWidth({ node : node ? node : this.doc.body});
         
+ 
     },
     
-    
-    
-    
-    domToHTML : function(currentElement, depth, nopadtext) {
-        
-        depth = depth || 0;
-        nopadtext = nopadtext || false;
-    
-        if (!currentElement) {
-            return this.domToHTML(this.doc.body);
-        }
-        
-        //Roo.log(currentElement);
-        var j;
-        var allText = false;
-        var nodeName = currentElement.nodeName;
-        var tagName = Roo.util.Format.htmlEncode(currentElement.tagName);
-        
-        if  (nodeName == '#text') {
-            
-            return nopadtext ? currentElement.nodeValue : currentElement.nodeValue.trim();
-        }
-        
-        
-        var ret = '';
-        if (nodeName != 'BODY') {
-             
-            var i = 0;
-            // Prints the node tagName, such as <A>, <IMG>, etc
-            if (tagName) {
-                var attr = [];
-                for(i = 0; i < currentElement.attributes.length;i++) {
-                    // quoting?
-                    var aname = currentElement.attributes.item(i).name;
-                    if (!currentElement.attributes.item(i).value.length) {
-                        continue;
-                    }
-                    attr.push(aname + '="' + Roo.util.Format.htmlEncode(currentElement.attributes.item(i).value) + '"' );
-                }
-                
-                ret = "<"+currentElement.tagName+ ( attr.length ? (' ' + attr.join(' ') ) : '') + ">";
-            } 
-            else {
-                
-                // eack
-            }
-        } else {
-            tagName = false;
-        }
-        if (['IMG', 'BR', 'HR', 'INPUT'].indexOf(tagName) > -1) {
-            return ret;
-        }
-        if (['PRE', 'TEXTAREA', 'TD', 'A', 'SPAN'].indexOf(tagName) > -1) { // or code?
-            nopadtext = true;
-        }
-        
-        
-        // Traverse the tree
-        i = 0;
-        var currentElementChild = currentElement.childNodes.item(i);
-        var allText = true;
-        var innerHTML  = '';
-        lastnode = '';
-        while (currentElementChild) {
-            // Formatting code (indent the tree so it looks nice on the screen)
-            var nopad = nopadtext;
-            if (lastnode == 'SPAN') {
-                nopad  = true;
-            }
-            // text
-            if  (currentElementChild.nodeName == '#text') {
-                var toadd = Roo.util.Format.htmlEncode(currentElementChild.nodeValue);
-                toadd = nopadtext ? toadd : toadd.trim();
-                if (!nopad && toadd.length > 80) {
-                    innerHTML  += "\n" + (new Array( depth + 1 )).join( "  "  );
-                }
-                innerHTML  += toadd;
-                
-                i++;
-                currentElementChild = currentElement.childNodes.item(i);
-                lastNode = '';
-                continue;
-            }
-            allText = false;
-            
-            innerHTML  += nopad ? '' : "\n" + (new Array( depth + 1 )).join( "  "  );
-                
-            // Recursively traverse the tree structure of the child node
-            innerHTML   += this.domToHTML(currentElementChild, depth+1, nopadtext);
-            lastnode = currentElementChild.nodeName;
-            i++;
-            currentElementChild=currentElement.childNodes.item(i);
-        }
-        
-        ret += innerHTML;
-        
-        if (!allText) {
-                // The remaining code is mostly for formatting the tree
-            ret+= nopadtext ? '' : "\n" + (new Array( depth  )).join( "  "  );
-        }
-        
-        
-        if (tagName) {
-            ret+= "</"+tagName+">";
-        }
-        return ret;
-        
-    },
+     
         
     applyBlacklists : function()
     {
         var w = typeof(this.owner.white) != 'undefined' && this.owner.white ? this.owner.white  : [];
         var b = typeof(this.owner.black) != 'undefined' && this.owner.black ? this.owner.black :  [];
         
+        this.aclean = typeof(this.owner.aclean) != 'undefined' && this.owner.aclean ? this.owner.aclean :  Roo.HtmlEditorCore.aclean;
+        this.ablack = typeof(this.owner.ablack) != 'undefined' && this.owner.ablack ? this.owner.ablack :  Roo.HtmlEditorCore.ablack;
+        this.tag_remove = typeof(this.owner.tag_remove) != 'undefined' && this.owner.tag_remove ? this.owner.tag_remove :  Roo.HtmlEditorCore.tag_remove;
+        
         this.white = [];
         this.black = [];
         Roo.each(Roo.HtmlEditorCore.white, function(tag) {
@@ -26261,6 +26454,16 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
         
     },
     
+    
+    updateLanguage : function()
+    {
+        if (!this.iframe || !this.iframe.contentDocument) {
+            return;
+        }
+        Roo.get(this.iframe.contentDocument.body).attr("lang", this.language);
+    },
+    
+    
     removeStylesheets : function()
     {
         var _this = this;
@@ -26268,6 +26471,17 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
         Roo.each(Roo.get(_this.iframe.contentDocument.head).select('link[rel=stylesheet]', true).elements, function(s){
             s.remove();
         });
+    },
+    
+    setStyle : function(style)
+    {
+        Roo.get(this.iframe.contentDocument.head).createChild({
+            tag : 'style',
+            type : 'text/css',
+            html : style
+        });
+
+        return;
     }
     
     // hide stuff that is not compatible
@@ -26314,36 +26528,40 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
 });
 
 Roo.HtmlEditorCore.white = [
-        'area', 'br', 'img', 'input', 'hr', 'wbr',
+        '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', 
+       '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', 
+       'CAPTION', 'COL', 'COLGROUP', 'TBODY', 'TD', 'TFOOT', 'TH', 
+      'THEAD',   'TR', 
      
-      'dir', 'menu', 'ol', 'ul', 'dl',
+      'DIR', 'MENU', 'OL', 'UL', 'DL',
        
-      'embed',  'object'
+      'EMBED',  'OBJECT'
 ];
 
 
 Roo.HtmlEditorCore.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..
+        'APPLET', // 
+        'BASE',   'BASEFONT', 'BGSOUND', 'BLINK',  'BODY', 
+        'FRAME',  'FRAMESET', 'HEAD',    'HTML',   'ILAYER', 
+        'IFRAME', 'LAYER',  'LINK',     'META',    'OBJECT',   
+        'SCRIPT', 'STYLE' ,'TITLE',  'XML',
+        //'FONT' // CLEAN LATER..
+        'COLGROUP', 'COL'   // messy tables.
+        
+        
 ];
-Roo.HtmlEditorCore.clean = [
-    'script', 'style', 'title', 'xml'
+Roo.HtmlEditorCore.clean = [ // ?? needed???
+     'SCRIPT', 'STYLE', 'TITLE', 'XML'
 ];
-Roo.HtmlEditorCore.remove = [
-    'font'
+Roo.HtmlEditorCore.tag_remove = [
+    'FONT', 'TBODY'  
 ];
 // attributes..
 
@@ -26374,16 +26592,7 @@ Roo.HtmlEditorCore.cblack= [
 ];
 
 
-Roo.HtmlEditorCore.swapCodes   =[ 
-    [    8211, "--" ], 
-    [    8212, "--" ], 
-    [    8216,  "'" ],  
-    [    8217, "'" ],  
-    [    8220, '"' ],  
-    [    8221, '"' ],  
-    [    8226, "*" ],  
-    [    8230, "..." ]
-]; 
+
 
     //<script type="text/javascript">
 
@@ -26446,7 +26655,7 @@ Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
     width: 500,
     
     /**
-     * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
+     * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets - this is usally a good idea  rootURL + '/roojs1/css/undoreset.css',   .
      * 
      */
     stylesheets: false,
@@ -26473,7 +26682,31 @@ Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
      * 
      */
     white: false,
+    /**
+     * @cfg {boolean} allowComments - default false - allow comments in HTML source - by default they are stripped - if you are editing email you may need this.
+     */
+    allowComments: false,
+    /**
+     * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled)
+     */
+    enableBlocks : true,
     
+    /**
+     * @cfg {boolean} autoClean - default true - loading and saving will remove quite a bit of formating,
+     *         if you are doing an email editor, this probably needs disabling, it's designed
+     */
+    autoClean: true,
+    /**
+     * @cfg {string} bodyCls default '' default classes to add to body of editable area - usually undoreset is a good start..
+     */
+    bodyCls : '',
+    /**
+     * @cfg {String} language default en - language of text (usefull for rtl languages)
+     * 
+     */
+    language: 'en',
+    
+     
     // id of frame..
     frameId: false,
     
@@ -26578,7 +26811,13 @@ Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
             * Fires when press the Sytlesheets button
             * @param {Roo.HtmlEditorCore} this
             */
-            stylesheetsclick: true
+            stylesheetsclick: true,
+            /**
+            * @event paste
+            * Fires when press user pastes into the editor
+            * @param {Roo.HtmlEditorCore} this
+            */
+            paste: true 
         });
         this.defaultAutoCreate =  {
             tag: "textarea",
@@ -26609,8 +26848,19 @@ Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
          
         
     },
-
-     
+    /**
+     * get the Context selected node
+     * @returns {DomElement|boolean} selected node if active or false if none
+     * 
+     */
+    getSelectedNode : function()
+    {
+        if (this.toolbars.length < 2 || !this.toolbars[1].tb) {
+            return false;
+        }
+        return this.toolbars[1].tb.selectedNode;
+    
+    },
     // private
     onRender : function(ct, position)
     {
@@ -26831,6 +27081,8 @@ Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
             this.el.removeClass('x-hidden');
             this.el.dom.removeAttribute('tabIndex');
             this.el.focus();
+            this.el.dom.scrollTop = 0;
+            
             
             for (var i = 0; i < this.toolbars.length; i++) {
                 if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
@@ -26898,7 +27150,17 @@ Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
         this.editorcore.pushValue();
     },
 
+    /**
+     * update the language in the body - really done by core
+     * @param {String} language - eg. en / ar / zh-CN etc..
+     */
+    updateLanguage : function(lang)
+    {
+        this.language = lang;
+        this.editorcore.language = lang;
+        this.editorcore.updateLanguage();
      
+    },
     // private
     deferFocus : function(){
         this.focus.defer(10, this);
@@ -27003,8 +27265,7 @@ Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
      */
 });
  
-    // <script type="text/javascript">
-/*
+    /*
  * Based on
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -27013,9 +27274,9 @@ Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
  */
 
 /**
- * @class Roo.form.HtmlEditorToolbar1
+ * @class Roo.form.HtmlEditor.ToolbarStandard
  * Basic Toolbar
- * 
+
  * Usage:
  *
  new Roo.form.HtmlEditor({
@@ -27029,7 +27290,7 @@ Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
      
  * 
  * @cfg {Object} disable List of elements to disable..
- * @cfg {Array} btns List of additional buttons.
+ * @cfg {Roo.Toolbar.Item|Roo.Toolbar.Button|Roo.Toolbar.SplitButton|Roo.form.Field} btns[] List of additional buttons.
  * 
  * 
  * NEEDS Extra CSS? 
@@ -27054,7 +27315,7 @@ Roo.form.HtmlEditor.ToolbarStandard = function(config)
     // dont call parent... till later.
 }
 
-Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
+Roo.form.HtmlEditor.ToolbarStandard.prototype = {
     
     tb: false,
     
@@ -27137,7 +27398,8 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
         ["h1"],["h2"],["h3"],["h4"],["h5"],["h6"], 
         ["pre"],[ "code"], 
         ["abbr"],[ "acronym"],[ "address"],[ "cite"],[ "samp"],[ "var"],
-        ['div'],['span']
+        ['div'],['span'],
+        ['sup'],['sub']
     ],
     
     cleanStyles : [
@@ -27399,7 +27661,7 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
                     tabIndex:-1
                 });
             }
-             cmenu.menu.items.push({
+            cmenu.menu.items.push({
                 actiontype : 'tablewidths',
                 html: 'Remove Table Widths',
                 handler: function(a,b) {
@@ -27439,8 +27701,9 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
                     
                     var c = Roo.get(editorcore.doc.body);
                     c.select('[class]').each(function(s) {
-                        s.dom.className = '';
+                        s.dom.removeAttribute('class');
                     });
+                    editorcore.cleanWord();
                     editorcore.syncValue();
                 },
                 tabIndex:-1
@@ -27450,7 +27713,7 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
                 actiontype : 'tidy',
                 html: 'Tidy HTML Source',
                 handler: function(a,b) {
-                    editorcore.doc.body.innerHTML = editorcore.domToHTML();
+                    new Roo.htmleditor.Tidy(editorcore.doc.body);
                     editorcore.syncValue();
                 },
                 tabIndex:-1
@@ -27487,7 +27750,7 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
         
         if (this.btns) {
             for(var i =0; i< this.btns.length;i++) {
-                var b = Roo.factory(this.btns[i],Roo.form);
+                var b = Roo.factory(this.btns[i],this.btns[i].xns || Roo.form);
                 b.cls =  'x-edit-none';
                 
                 if(typeof(this.btns[i].cls) != 'undefined' && this.btns[i].cls.indexOf('x-init-enable') !== -1){
@@ -27528,11 +27791,45 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
     },
     // private used internally
     createLink : function(){
-        Roo.log("create link?");
-        var url = prompt(this.createLinkText, this.defaultLinkValue);
-        if(url && url != 'http:/'+'/'){
-            this.editorcore.relayCmd('createlink', url);
+        //Roo.log("create link?");
+        var ec = this.editorcore;
+        var ar = ec.getAllAncestors();
+        var n = false;
+        for(var i = 0;i< ar.length;i++) {
+            if (ar[i] && ar[i].nodeName == 'A') {
+                n = ar[i];
+                break;
+            }
         }
+        
+        (function() {
+            
+            Roo.MessageBox.show({
+                title : "Add / Edit Link URL",
+                msg : "Enter the url for the link",
+                buttons: Roo.MessageBox.OKCANCEL,
+                fn: function(btn, url){
+                    if (btn != 'ok') {
+                        return;
+                    }
+                    if(url && url != 'http:/'+'/'){
+                        if (n) {
+                            n.setAttribute('href', url);
+                        } else {
+                            ec.relayCmd('createlink', url);
+                        }
+                    }
+                },
+                minWidth:250,
+                prompt:true,
+                //multiline: multiline,
+                modal : true,
+                value :  n  ? n.getAttribute('href') : '' 
+            });
+            
+             
+        }).defer(100, this); // we have to defer this , otherwise the mouse click gives focus to the main window.
+        
     },
 
     
@@ -27645,6 +27942,11 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
                 this.tb.items.each(function(item){
                     item.enable();
                 });
+                // initialize 'blocks'
+                Roo.each(Roo.get(this.editorcore.doc.body).query('*[data-block]'), function(e) {
+                    Roo.htmleditor.Block.factory(e).updateElement(e);
+                },this);
+            
             }
             
         }
@@ -27771,7 +28073,7 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
            item.enable();
         });
     }
-});
+};
 
 
 
@@ -27819,189 +28121,138 @@ Roo.form.HtmlEditor.ToolbarContext = function(config)
  
 
 Roo.form.HtmlEditor.ToolbarContext.types = {
-    'IMG' : {
-        width : {
+    'IMG' : [
+        {
+            name : 'width',
             title: "Width",
             width: 40
         },
-        height:  {
+        {
+            name : 'height',
             title: "Height",
             width: 40
         },
-        align: {
+        {
+            name : 'align',
             title: "Align",
             opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
             width : 80
             
         },
-        border: {
+        {
+            name : 'border',
             title: "Border",
             width: 40
         },
-        alt: {
+        {
+            name : 'alt',
             title: "Alt",
             width: 120
         },
-        src : {
+        {
+            name : 'src',
             title: "Src",
             width: 220
         }
         
-    },
-    'A' : {
-        name : {
+    ],
+    
+    'FIGURE' : [
+        {
+            name : 'align',
+            title: "Align",
+            opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
+            width : 80  
+        }
+    ],
+    'A' : [
+        {
+            name : 'name',
             title: "Name",
             width: 50
         },
-        target:  {
+        {
+            name : 'target',
             title: "Target",
             width: 120
         },
-        href:  {
+        {
+            name : '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: 80
-        },
-        valign: {
-            title: "Valign",
-            opts : [[""],[ "top"],[ "middle"],[ "bottom"],[ "baseline"]],
-            width: 80
-        },
-        colspan: {
-            title: "Colspan",
-            width: 20
-            
-        },
-         'font-family'  : {
-            title : "Font",
-            style : 'fontFamily',
-            displayField: 'display',
-            optname : 'font-family',
-            width: 140
-        }
-    },
-    'INPUT' : {
-        name : {
+    ],
+    
+    'INPUT' : [
+        {
+            name : 'name',
             title: "name",
             width: 120
         },
-        value : {
+        {
+            name : 'value',
             title: "Value",
             width: 120
         },
-        width : {
+        {
+            name : 'width',
             title: "Width",
             width: 40
         }
-    },
-    'LABEL' : {
-        'for' : {
+    ],
+    'LABEL' : [
+         {
+            name : 'for',
             title: "For",
             width: 120
         }
-    },
-    'TEXTAREA' : {
-          name : {
+    ],
+    'TEXTAREA' : [
+        {
+            name : 'name',
             title: "name",
             width: 120
         },
-        rows : {
+        {
+            name : 'rows',
             title: "Rows",
             width: 20
         },
-        cols : {
+        {
+            name : 'cols',
             title: "Cols",
             width: 20
         }
-    },
-    'SELECT' : {
-        name : {
+    ],
+    'SELECT' : [
+        {
+            name : 'name',
             title: "name",
             width: 120
         },
-        selectoptions : {
+        {
+            name : 'selectoptions',
             title: "Options",
             width: 200
         }
-    },
+    ],
     
     // should we really allow this??
     // should this just be 
-    'BODY' : {
-        title : {
+    'BODY' : [
+        
+        {
+            name : 'title',
             title: "Title",
             width: 200,
             disabled : true
         }
-    },
-    'SPAN' : {
-        'font-family'  : {
-            title : "Font",
-            style : 'fontFamily',
-            displayField: 'display',
-            optname : 'font-family',
-            width: 140
-        }
-    },
-    'DIV' : {
-        'font-family'  : {
-            title : "Font",
-            style : 'fontFamily',
-            displayField: 'display',
-            optname : 'font-family',
-            width: 140
-        }
-    },
-     'P' : {
-        'font-family'  : {
-            title : "Font",
-            style : 'fontFamily',
-            displayField: 'display',
-            optname : 'font-family',
-            width: 140
-        }
-    },
-    
-    '*' : {
-        // empty..
-    }
+    ],
+ 
+    '*' : [
+        // empty.
+    ]
 
 };
 
@@ -28087,9 +28338,9 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
         // disable everything...
         var ty= Roo.form.HtmlEditor.ToolbarContext.types;
         this.toolbars = {};
-           
+        // block toolbars are built in updateToolbar when needed.
         for (var i in  ty) {
-          
+            
             this.toolbars[i] = this.buildToolbar(ty[i],i);
         }
         this.tb = this.toolbars.BODY;
@@ -28116,8 +28367,13 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
      *
      * Note you can force an update by calling on('editorevent', scope, false)
      */
-    updateToolbar: function(editor,ev,sel){
-
+    updateToolbar: function(editor ,ev, sel)
+    {
+        
+        if (ev) {
+            ev.stopEvent(); // se if we can stop this looping with mutiple events.
+        }
+        
         //Roo.log(ev);
         // capture mouse up - this is handy for selecting images..
         // perhaps should go somewhere else...
@@ -28125,38 +28381,40 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
              this.editor.onFirstFocus();
             return;
         }
-        
+        //Roo.log(ev ? ev.target : 'NOTARGET');
         
         
         // http://developer.yahoo.com/yui/docs/simple-editor.js.html
         // selectNode - might want to handle IE?
+        
+        
+        
         if (ev &&
             (ev.type == 'mouseup' || ev.type == 'click' ) &&
-            ev.target && ev.target.tagName == 'IMG') {
+            ev.target && ev.target.tagName != 'BODY' ) { // && ev.target.tagName == 'IMG') {
             // they have click on an image...
             // let's see if we can change the selection...
             sel = ev.target;
-         
-              var nodeRange = sel.ownerDocument.createRange();
-            try {
-                nodeRange.selectNode(sel);
-            } catch (e) {
-                nodeRange.selectNodeContents(sel);
-            }
-            //nodeRange.collapse(true);
-            var s = this.editorcore.win.getSelection();
-            s.removeAllRanges();
-            s.addRange(nodeRange);
-        }  
+            
+            // this triggers looping?
+            //this.editorcore.selectNode(sel);
+             
+        }
         
+        // this forces an id..
+        Array.from(this.editorcore.doc.body.querySelectorAll('.roo-ed-selection')).forEach(function(e) {
+             e.classList.remove('roo-ed-selection');
+        });
+        //Roo.select('.roo-ed-selection', false, this.editorcore.doc).removeClass('roo-ed-selection');
+        //Roo.get(node).addClass('roo-ed-selection');
       
-        var updateFooter = sel ? false : true;
+        //var updateFooter = sel ? false : true; 
         
         
         var ans = this.editorcore.getAllAncestors();
         
         // pick
-        var ty= Roo.form.HtmlEditor.ToolbarContext.types;
+        var ty = Roo.form.HtmlEditor.ToolbarContext.types;
         
         if (!sel) { 
             sel = ans.length ? (ans[0] ?  ans[0]  : ans[1]) : this.editorcore.doc.body;
@@ -28164,86 +28422,145 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
             sel = sel.tagName.length ? sel : this.editorcore.doc.body;
             
         }
-        // pick a menu that exists..
-        var tn = sel.tagName.toUpperCase();
-        //sel = typeof(ty[tn]) != 'undefined' ? sel : this.editor.doc.body;
-        
-        tn = sel.tagName.toUpperCase();
         
+        var tn = sel.tagName.toUpperCase();
         var lastSel = this.tb.selectedNode;
-        
         this.tb.selectedNode = sel;
+        var left_label = tn;
         
-        // if current menu does not match..
+        // ok see if we are editing a block?
         
-        if ((this.tb.name != tn) || (lastSel != this.tb.selectedNode) || ev === false) {
-                
-            this.tb.el.hide();
-            ///console.log("show: " + tn);
-            this.tb =  typeof(ty[tn]) != 'undefined' ? this.toolbars[tn] : this.toolbars['*'];
-            this.tb.el.show();
-            // update name
-            this.tb.items.first().el.innerHTML = tn + ':&nbsp;';
-            
-            
-            // update attributes
-            if (this.tb.fields) {
-                this.tb.fields.each(function(e) {
-                    if (e.stylename) {
-                        e.setValue(sel.style[e.stylename]);
-                        return;
-                    } 
-                   e.setValue(sel.getAttribute(e.attrname));
-                });
-            }
+        var db = false;
+        // you are not actually selecting the block.
+        if (sel && sel.hasAttribute('data-block')) {
+            db = sel;
+        } else if (sel && sel.closest('[data-block]')) {
             
-            var hasStyles = false;
-            for(var i in this.styles) {
-                hasStyles = true;
-                break;
-            }
+            db = sel.closest('[data-block]');
+            //var cepar = sel.closest('[contenteditable=true]');
+            //if (db && cepar && cepar.tagName != 'BODY') {
+            //   db = false; // we are inside an editable block.. = not sure how we are going to handle nested blocks!?
+            //}   
+        }
+        
+        
+        var block = false;
+        //if (db && !sel.hasAttribute('contenteditable') && sel.getAttribute('contenteditable') != 'true' ) {
+        if (db && this.editorcore.enableBlocks) {
+            block = Roo.htmleditor.Block.factory(db);
             
-            // update styles
-            if (hasStyles) { 
-                var st = this.tb.fields.item(0);
-                
-                st.store.removeAll();
-               
-                
-                var cn = sel.className.split(/\s+/);
+            
+            if (block) {
+                 db.className = (
+                        db.classList.length > 0  ? db.className + ' ' : ''
+                    )  + 'roo-ed-selection';
+                 
+                 // since we removed it earlier... its not there..
+                tn = 'BLOCK.' + db.getAttribute('data-block');
                 
-                var avs = [];
-                if (this.styles['*']) {
-                    
-                    Roo.each(this.styles['*'], function(v) {
-                        avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );         
-                    });
-                }
-                if (this.styles[tn]) { 
-                    Roo.each(this.styles[tn], function(v) {
-                        avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );         
-                    });
+                //this.editorcore.selectNode(db);
+                if (typeof(this.toolbars[tn]) == 'undefined') {
+                   this.toolbars[tn] = this.buildToolbar( false  ,tn ,block.friendly_name, block);
                 }
-                
-                st.store.loadData(avs);
-                st.collapse();
-                st.setValue(cn);
+                this.toolbars[tn].selectedNode = db;
+                left_label = block.friendly_name;
+                ans = this.editorcore.getAllAncestors();
             }
-            // flag our selected Node.
-            this.tb.selectedNode = sel;
-           
-           
-            Roo.menu.MenuMgr.hideAll();
-
+            
+                
+            
         }
         
-        if (!updateFooter) {
-            //this.footDisp.dom.innerHTML = ''; 
-            return;
+        
+        if (this.tb.name == tn && lastSel == this.tb.selectedNode && ev !== false) {
+            return; // no change?
+        }
+        
+        
+          
+        this.tb.el.hide();
+        ///console.log("show: " + tn);
+        this.tb =  typeof(this.toolbars[tn]) != 'undefined' ? this.toolbars[tn] : this.toolbars['*'];
+        
+        this.tb.el.show();
+        // update name
+        this.tb.items.first().el.innerHTML = left_label + ':&nbsp;';
+        
+        
+        // update attributes
+        if (block && this.tb.fields) {
+             
+            this.tb.fields.each(function(e) {
+                e.setValue(block[e.name]);
+            });
+            
+            
+        } else  if (this.tb.fields && this.tb.selectedNode) {
+            this.tb.fields.each( function(e) {
+                if (e.stylename) {
+                    e.setValue(this.tb.selectedNode.style[e.stylename]);
+                    return;
+                } 
+                e.setValue(this.tb.selectedNode.getAttribute(e.attrname));
+            }, this);
+            this.updateToolbarStyles(this.tb.selectedNode);  
         }
+        
+        
+       
+        Roo.menu.MenuMgr.hideAll();
+
+        
+        
+    
         // update the footer
         //
+        this.updateFooter(ans);
+             
+    },
+    
+    updateToolbarStyles : function(sel)
+    {
+        var hasStyles = false;
+        for(var i in this.styles) {
+            hasStyles = true;
+            break;
+        }
+        
+        // update styles
+        if (hasStyles && this.tb.hasStyles) { 
+            var st = this.tb.fields.item(0);
+            
+            st.store.removeAll();
+            var cn = sel.className.split(/\s+/);
+            
+            var avs = [];
+            if (this.styles['*']) {
+                
+                Roo.each(this.styles['*'], function(v) {
+                    avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );         
+                });
+            }
+            if (this.styles[tn]) { 
+                Roo.each(this.styles[tn], function(v) {
+                    avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );         
+                });
+            }
+            
+            st.store.loadData(avs);
+            st.collapse();
+            st.setValue(cn);
+        }
+    },
+    
+     
+    updateFooter : function(ans)
+    {
         var html = '';
+        if (ans === false) {
+            this.footDisp.dom.innerHTML = '';
+            return;
+        }
         
         this.footerEls = ans.reverse();
         Roo.each(this.footerEls, function(a,i) {
@@ -28263,10 +28580,8 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
         
         this.footDisp.dom.innerHTML = html;
             
-        //this.editorsyncValue();
+        
     },
-     
-    
    
        
     // private
@@ -28291,7 +28606,7 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
            item.enable();
         });
     },
-    buildToolbar: function(tlist, nm)
+    buildToolbar: function(tlist, nm, friendly_name, block)
     {
         var editor = this.editor;
         var editorcore = this.editorcore;
@@ -28302,18 +28617,22 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
         
        
         var tb = new Roo.Toolbar(wdiv);
-        // add the name..
+        ///this.tb = tb; // << this sets the active toolbar..
+        if (tlist === false && block) {
+            tlist = block.contextMenu(this);
+        }
+        
+        tb.hasStyles = false;
+        tb.name = nm;
         
-        tb.add(nm+ ":&nbsp;");
+        tb.add((typeof(friendly_name) == 'undefined' ? nm : friendly_name) + ":&nbsp;");
+        
+        var styles = Array.from(this.styles);
         
-        var styles = [];
-        for(var i in this.styles) {
-            styles.push(i);
-        }
         
         // styles...
         if (styles && styles.length) {
-            
+            tb.hasStyles = true;
             // this needs a multi-select checkbox...
             tb.addField( new Roo.form.ComboBox({
                 store: new Roo.data.SimpleStore({
@@ -28343,9 +28662,18 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
         }
         
         var tbc = Roo.form.HtmlEditor.ToolbarContext;
-        var tbops = tbc.options;
         
-        for (var i in tlist) {
+        
+        for (var i = 0; i < tlist.length; i++) {
+            
+            // newer versions will use xtype cfg to create menus.
+            if (typeof(tlist[i].xtype) != 'undefined') {
+                
+                tb[typeof(tlist[i].name)== 'undefined' ? 'add' : 'addField'](Roo.factory(tlist[i]));
+                
+                
+                continue;
+            }
             
             var item = tlist[i];
             tb.add(item.title + ":&nbsp;");
@@ -28353,8 +28681,8 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
             
             //optname == used so you can configure the options available..
             var opts = item.opts ? item.opts : false;
-            if (item.optname) {
-                opts = tbops[item.optname];
+            if (item.optname) { // use the b
+                opts = Roo.form.HtmlEditor.ToolbarContext.options[item.optname];
            
             }
             
@@ -28366,13 +28694,15 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
                         fields: ['val', 'display'],
                         data : opts  
                     }),
-                    name : '-roo-edit-' + i,
-                    attrname : i,
+                    name : '-roo-edit-' + tlist[i].name,
+                    
+                    attrname : tlist[i].name,
                     stylename : item.style ? item.style : false,
+                    
                     displayField: item.displayField ? item.displayField : 'val',
                     valueField :  'val',
                     typeAhead: false,
-                    mode: typeof(tbc.stores[i]) != 'undefined'  ? 'remote' : 'local',
+                    mode: typeof(tbc.stores[tlist[i].name]) != 'undefined'  ? 'remote' : 'local',
                     editable : false,
                     triggerAction: 'all',
                     emptyText:'Select',
@@ -28380,11 +28710,20 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
                     width: item.width ? item.width  : 130,
                     listeners : {
                         'select': function(c, r, i) {
+                             
+                            
                             if (c.stylename) {
                                 tb.selectedNode.style[c.stylename] =  r.get('val');
+                                editorcore.syncValue();
+                                return;
+                            }
+                            if (r === false) {
+                                tb.selectedNode.removeAttribute(c.attrname);
+                                editorcore.syncValue();
                                 return;
                             }
                             tb.selectedNode.setAttribute(c.attrname, r.get('val'));
+                            editorcore.syncValue();
                         }
                     }
 
@@ -28392,7 +28731,7 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
                 continue;
                     
                  
-                
+                /*
                 tb.addField( new Roo.form.TextField({
                     name: i,
                     width: 100,
@@ -28400,16 +28739,19 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
                     value: ''
                 }));
                 continue;
+                */
             }
             tb.addField( new Roo.form.TextField({
-                name: '-roo-edit-' + i,
-                attrname : i,
+                name: '-roo-edit-' + tlist[i].name,
+                attrname : tlist[i].name,
                 
                 width: item.width,
                 //allowBlank:true,
                 value: '',
                 listeners: {
                     'change' : function(f, nv, ov) {
+                        
+                         
                         tb.selectedNode.setAttribute(f.attrname, nv);
                         editorcore.syncValue();
                     }
@@ -28419,8 +28761,9 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
         }
         
         var _this = this;
-        
+        var show_delete = !block || block.deleteTitle !== false;
         if(nm == 'BODY'){
+            show_delete = false;
             tb.addSeparator();
         
             tb.addButton( {
@@ -28436,60 +28779,61 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
         }
         
         tb.addFill();
-        tb.addButton( {
-            text: 'Remove Tag',
-    
-            listeners : {
-                click : function ()
-                {
-                    // remove
-                    // undo does not work.
-                     
-                    var sn = tb.selectedNode;
-                    
-                    var pn = sn.parentNode;
-                    
-                    var stn =  sn.childNodes[0];
-                    var en = sn.childNodes[sn.childNodes.length - 1 ];
-                    while (sn.childNodes.length) {
-                        var node = sn.childNodes[0];
-                        sn.removeChild(node);
-                        //Roo.log(node);
-                        pn.insertBefore(node, sn);
+        if (show_delete) {
+            tb.addButton({
+                text: block && block.deleteTitle ? block.deleteTitle  : 'Remove Block or Formating', // remove the tag, and puts the children outside...
+        
+                listeners : {
+                    click : function ()
+                    {
+                        var sn = tb.selectedNode;
+                        if (block) {
+                            sn = Roo.htmleditor.Block.factory(tb.selectedNode).removeNode();
+                            
+                        }
+                        if (!sn) {
+                            return;
+                        }
+                        var stn =  sn.childNodes[0] || sn.nextSibling || sn.previousSibling || sn.parentNode;
+                        if (sn.hasAttribute('data-block')) {
+                            stn =  sn.nextSibling || sn.previousSibling || sn.parentNode;
+                            sn.parentNode.removeChild(sn);
+                            
+                        } else if (sn && sn.tagName != 'BODY') {
+                            // remove and keep parents.
+                            a = new Roo.htmleditor.FilterKeepChildren({tag : false});
+                            a.replaceTag(sn);
+                        }
+                        
+                        
+                        var range = editorcore.createRange();
+            
+                        range.setStart(stn,0);
+                        range.setEnd(stn,0); 
+                        var selection = editorcore.getSelection();
+                        selection.removeAllRanges();
+                        selection.addRange(range);
+                        
+                        
+                        //_this.updateToolbar(null, null, pn);
+                        _this.updateToolbar(null, null, null);
+                        _this.updateFooter(false);
                         
                     }
-                    pn.removeChild(sn);
-                    var range = editorcore.createRange();
-        
-                    range.setStart(stn,0);
-                    range.setEnd(en,0); //????
-                    //range.selectNode(sel);
-                    
-                    
-                    var selection = editorcore.getSelection();
-                    selection.removeAllRanges();
-                    selection.addRange(range);
-                    
-                    
-                    
-                    //_this.updateToolbar(null, null, pn);
-                    _this.updateToolbar(null, null, null);
-                    _this.footDisp.dom.innerHTML = ''; 
                 }
-            }
-            
+                
+                        
                     
                 
-            
-        });
-        
+            });
+        }    
         
         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;
          
@@ -28533,6 +28877,7 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
         
         
     },
+    // when the footer contect changes
     onContextClick : function (ev,dom)
     {
         ev.preventDefault();
@@ -28545,17 +28890,7 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
         var ans = this.footerEls;
         var sel = ans[n];
         
-         // pick
-        var range = this.editorcore.createRange();
-        
-        range.selectNodeContents(sel);
-        //range.selectNode(sel);
-        
-        
-        var selection = this.editorcore.getSelection();
-        selection.removeAllRanges();
-        selection.addRange(range);
-        
+        this.editorcore.selectNode(sel);
         
         
         this.updateToolbar(null, null, sel);
@@ -28632,6 +28967,8 @@ Roo.form.BasicForm = function(el, config){
         this.initEl(el);
     }
     Roo.form.BasicForm.superclass.constructor.call(this);
+    
+    Roo.form.BasicForm.popover.apply();
 };
 
 Roo.extend(Roo.form.BasicForm, Roo.util.Observable, {
@@ -28697,6 +29034,21 @@ Roo.extend(Roo.form.BasicForm, Roo.util.Observable, {
      * @type Mixed
      */
     waitMsgTarget : false,
+    
+    /**
+     * @type Boolean
+     */
+    disableMask : false,
+    
+    /**
+     * @cfg {Boolean} errorMask (true|false) default false
+     */
+    errorMask : false,
+    
+    /**
+     * @cfg {Number} maskOffset Default 100
+     */
+    maskOffset : 100,
 
     // private
     initEl : function(el){
@@ -28717,14 +29069,45 @@ Roo.extend(Roo.form.BasicForm, Roo.util.Observable, {
      */
     isValid : function(){
         var valid = true;
+        var target = false;
         this.items.each(function(f){
-           if(!f.validate()){
-               valid = false;
-           }
+            if(f.validate()){
+                return;
+            }
+            
+            valid = false;
+                
+            if(!target && f.el.isVisible(true)){
+                target = f;
+            }
         });
+        
+        if(this.errorMask && !valid){
+            Roo.form.BasicForm.popover.mask(this, target);
+        }
+        
         return valid;
     },
-
+    /**
+     * Returns array of invalid form fields.
+     * @return Array
+     */
+    
+    invalidFields : function()
+    {
+        var ret = [];
+        this.items.each(function(f){
+            if(f.validate()){
+                return;
+            }
+            ret.push(f);
+            
+        });
+        
+        return ret;
+    },
+    
+    
     /**
      * DEPRICATED Returns true if any fields in this form have changed since their original load. 
      * @return Boolean
@@ -28852,15 +29235,17 @@ clientValidation  Boolean          Applies to submit only.  Pass true to call fo
     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...');
+        if(!this.disableMask) {
+            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...');
+            }
         }
+        
          
     },
 
@@ -28869,15 +29254,17 @@ clientValidation  Boolean          Applies to submit only.  Pass true to call fo
         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(!this.disableMask) {
+            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();
@@ -29065,21 +29452,39 @@ clientValidation  Boolean          Applies to submit only.  Pass true to call fo
                 
         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){
+    getValues : function(asString)
+    {
         if (this.childForms) {
             // copy values from the child forms
             Roo.each(this.childForms, function (f) {
-                this.setValues(f.getValues());
+                this.setValues(f.getFieldValues()); // get the full set of data, as we might be copying comboboxes from external into this one.
             }, this);
         }
         
+        // use formdata
+        if (typeof(FormData) != 'undefined' && asString !== true) {
+            // this relies on a 'recent' version of chrome apparently...
+            try {
+                var fd = (new FormData(this.el.dom)).entries();
+                var ret = {};
+                var ent = fd.next();
+                while (!ent.done) {
+                    ret[ent.value[0]] = ent.value[1]; // not sure how this will handle duplicates..
+                    ent = fd.next();
+                };
+                return ret;
+            } catch(e) {
+                
+            }
+            
+        }
         
         
         var fs = Roo.lib.Ajax.serializeForm(this.el.dom);
@@ -29092,21 +29497,31 @@ clientValidation  Boolean          Applies to submit only.  Pass true to call fo
     /**
      * 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.
+     * Normally this will not return readOnly data 
+     * @param {Boolean} with_readonly return readonly field data.
      * @return {Object}
      */
-    getFieldValues : function(with_hidden)
+    getFieldValues : function(with_readonly)
     {
         if (this.childForms) {
             // copy values from the child forms
             // should this call getFieldValues - probably not as we do not currently copy
             // hidden fields when we generate..
             Roo.each(this.childForms, function (f) {
-                this.setValues(f.getValues());
+                this.setValues(f.getFieldValues());
             }, this);
         }
         
         var ret = {};
         this.items.each(function(f){
+            
+            if (f.readOnly && with_readonly !== true) {
+                return; // skip read only values. - this is in theory to stop 'old' values being copied over new ones
+                        // if a subform contains a copy of them.
+                        // if you have subforms with the same editable data, you will need to copy the data back
+                        // and forth.
+            }
+            
             if (!f.getName()) {
                 return;
             }
@@ -29235,7 +29650,153 @@ clientValidation  Boolean          Applies to submit only.  Pass true to call fo
 });
 
 // back compat
-Roo.BasicForm = Roo.form.BasicForm;/*
+Roo.BasicForm = Roo.form.BasicForm;
+
+Roo.apply(Roo.form.BasicForm, {
+    
+    popover : {
+        
+        padding : 5,
+        
+        isApplied : false,
+        
+        isMasked : false,
+        
+        form : false,
+        
+        target : false,
+        
+        intervalID : false,
+        
+        maskEl : false,
+        
+        apply : function()
+        {
+            if(this.isApplied){
+                return;
+            }
+            
+            this.maskEl = {
+                top : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-top-mask" }, true),
+                left : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-left-mask" }, true),
+                bottom : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-bottom-mask" }, true),
+                right : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-right-mask" }, true)
+            };
+            
+            this.maskEl.top.enableDisplayMode("block");
+            this.maskEl.left.enableDisplayMode("block");
+            this.maskEl.bottom.enableDisplayMode("block");
+            this.maskEl.right.enableDisplayMode("block");
+            
+            Roo.get(document.body).on('click', function(){
+                this.unmask();
+            }, this);
+            
+            Roo.get(document.body).on('touchstart', function(){
+                this.unmask();
+            }, this);
+            
+            this.isApplied = true
+        },
+        
+        mask : function(form, target)
+        {
+            this.form = form;
+            
+            this.target = target;
+            
+            if(!this.form.errorMask || !target.el){
+                return;
+            }
+            
+            var scrollable = this.target.el.findScrollableParent() || this.target.el.findParent('div.x-layout-active-content', 100, true) || Roo.get(document.body);
+            
+            var ot = this.target.el.calcOffsetsTo(scrollable);
+            
+            var scrollTo = ot[1] - this.form.maskOffset;
+            
+            scrollTo = Math.min(scrollTo, scrollable.dom.scrollHeight);
+            
+            scrollable.scrollTo('top', scrollTo);
+            
+            var el = this.target.wrap || this.target.el;
+            
+            var box = el.getBox();
+            
+            this.maskEl.top.setStyle('position', 'absolute');
+            this.maskEl.top.setStyle('z-index', 10000);
+            this.maskEl.top.setSize(Roo.lib.Dom.getDocumentWidth(), box.y - this.padding);
+            this.maskEl.top.setLeft(0);
+            this.maskEl.top.setTop(0);
+            this.maskEl.top.show();
+            
+            this.maskEl.left.setStyle('position', 'absolute');
+            this.maskEl.left.setStyle('z-index', 10000);
+            this.maskEl.left.setSize(box.x - this.padding, box.height + this.padding * 2);
+            this.maskEl.left.setLeft(0);
+            this.maskEl.left.setTop(box.y - this.padding);
+            this.maskEl.left.show();
+
+            this.maskEl.bottom.setStyle('position', 'absolute');
+            this.maskEl.bottom.setStyle('z-index', 10000);
+            this.maskEl.bottom.setSize(Roo.lib.Dom.getDocumentWidth(), Roo.lib.Dom.getDocumentHeight() - box.bottom - this.padding);
+            this.maskEl.bottom.setLeft(0);
+            this.maskEl.bottom.setTop(box.bottom + this.padding);
+            this.maskEl.bottom.show();
+
+            this.maskEl.right.setStyle('position', 'absolute');
+            this.maskEl.right.setStyle('z-index', 10000);
+            this.maskEl.right.setSize(Roo.lib.Dom.getDocumentWidth() - box.right - this.padding, box.height + this.padding * 2);
+            this.maskEl.right.setLeft(box.right + this.padding);
+            this.maskEl.right.setTop(box.y - this.padding);
+            this.maskEl.right.show();
+
+            this.intervalID = window.setInterval(function() {
+                Roo.form.BasicForm.popover.unmask();
+            }, 10000);
+
+            window.onwheel = function(){ return false;};
+            
+            (function(){ this.isMasked = true; }).defer(500, this);
+            
+        },
+        
+        unmask : function()
+        {
+            if(!this.isApplied || !this.isMasked || !this.form || !this.target || !this.form.errorMask){
+                return;
+            }
+            
+            this.maskEl.top.setStyle('position', 'absolute');
+            this.maskEl.top.setSize(0, 0).setXY([0, 0]);
+            this.maskEl.top.hide();
+
+            this.maskEl.left.setStyle('position', 'absolute');
+            this.maskEl.left.setSize(0, 0).setXY([0, 0]);
+            this.maskEl.left.hide();
+
+            this.maskEl.bottom.setStyle('position', 'absolute');
+            this.maskEl.bottom.setSize(0, 0).setXY([0, 0]);
+            this.maskEl.bottom.hide();
+
+            this.maskEl.right.setStyle('position', 'absolute');
+            this.maskEl.right.setSize(0, 0).setXY([0, 0]);
+            this.maskEl.right.hide();
+            
+            window.onwheel = function(){ return true;};
+            
+            if(this.intervalID){
+                window.clearInterval(this.intervalID);
+                this.intervalID = false;
+            }
+            
+            this.isMasked = false;
+            
+        }
+        
+    }
+    
+});/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -29249,6 +29810,7 @@ Roo.BasicForm = Roo.form.BasicForm;/*
 /**
  * @class Roo.form.Form
  * @extends Roo.form.BasicForm
+ * @children Roo.form.Column Roo.form.FieldSet Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
  * Adds the ability to dynamically render forms with JavaScript to {@link Roo.form.BasicForm}.
  * @constructor
  * @param {Object} config Configuration options
@@ -29303,11 +29865,13 @@ Roo.form.Form = function(config){
     
     Roo.each(xitems, this.addxtype, this);
     
-    
-    
 };
 
 Roo.extend(Roo.form.Form, Roo.form.BasicForm, {
+     /**
+     * @cfg {Roo.Button} buttons[] buttons at bottom of form
+     */
+    
     /**
      * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
      */
@@ -29315,7 +29879,7 @@ Roo.extend(Roo.form.Form, Roo.form.BasicForm, {
      * @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")
+     * @cfg {String} (left|center|right) buttonAlign Valid values are "left," "center" and "right" (defaults to "center")
      */
     buttonAlign:'center',
 
@@ -29325,7 +29889,7 @@ Roo.extend(Roo.form.Form, Roo.form.BasicForm, {
     minButtonWidth:75,
 
     /**
-     * @cfg {String} labelAlign Valid values are "left," "top" and "right" (defaults to "left").
+     * @cfg {String} labelAlign (left|top|right) Valid values are "left," "top" and "right" (defaults to "left").
      * This property cascades to child containers if not set.
      */
     labelAlign:'left',
@@ -29347,7 +29911,13 @@ Roo.extend(Roo.form.Form, Roo.form.BasicForm, {
      */
     
     progressUrl : false,
-  
+    /**
+     * @cfg {boolean|FormData} formData - true to use new 'FormData' post, or set to a new FormData({dom form}) Object, if
+     * sending a formdata with extra parameters - eg uploaded elements.
+     */
+    
+    formData : 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
@@ -29903,7 +30473,8 @@ Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
                 url:this.getUrl(!isPost),
                 method: method,
                 params:isPost ? this.getParams() : null,
-                isUpload: this.form.fileUpload
+                isUpload: this.form.fileUpload,
+                formData : this.form.formData
             }));
             
             this.uploadProgress();
@@ -30040,6 +30611,7 @@ Roo.form.Action.ACTION_TYPES = {
 /**
  * @class Roo.form.Layout
  * @extends Roo.Component
+ * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
  * Creates a container for layout and rendering of fields in an {@link Roo.form.Form}.
  * @constructor
  * @param {Object} config Configuration options
@@ -30190,6 +30762,7 @@ Roo.extend(Roo.form.Layout, Roo.Component, {
 /**
  * @class Roo.form.Column
  * @extends Roo.form.Layout
+ * @children Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
  * Creates a column container for layout and rendering of fields in an {@link Roo.form.Form}.
  * @constructor
  * @param {Object} config Configuration options
@@ -30224,6 +30797,7 @@ Roo.extend(Roo.form.Column, Roo.form.Layout, {
 /**
  * @class Roo.form.Row
  * @extends Roo.form.Layout
+ * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
  * Creates a row container for layout and rendering of fields in an {@link Roo.form.Form}.
  * @constructor
  * @param {Object} config Configuration options
@@ -30300,6 +30874,7 @@ Roo.extend(Roo.form.Row, Roo.form.Layout, {
 /**
  * @class Roo.form.FieldSet
  * @extends Roo.form.Layout
+ * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
  * Creates a fieldset container for layout and rendering of fields in an {@link Roo.form.Form}.
  * @constructor
  * @param {Object} config Configuration options
@@ -30348,7 +30923,7 @@ Roo.extend(Roo.form.FieldSet, Roo.form.Layout, {
 /**
  * @class Roo.form.VTypes
  * Overridable validation definitions. The validations provided are basic and intended to be easily customizable and extended.
- * @singleton
+ * @static
  */
 Roo.form.VTypes = function(){
     // closure these in so they are only created once.
@@ -32400,10 +32975,10 @@ Roo.DDView = function(container, tpl, config) {
     this.getEl().setStyle("outline", "0px none");
     this.getEl().unselectable();
     if (this.dragGroup) {
-		this.setDraggable(this.dragGroup.split(","));
+	this.setDraggable(this.dragGroup.split(","));
     }
     if (this.dropGroup) {
-		this.setDroppable(this.dropGroup.split(","));
+	this.setDroppable(this.dropGroup.split(","));
     }
     if (this.deletable) {
     	this.setDeletable();
@@ -32945,6 +33520,7 @@ Roo.extend(Roo.LayoutManager, Roo.util.Observable, {
 /**
  * @class Roo.BorderLayout
  * @extends Roo.LayoutManager
+ * @children Roo.ContentPanel
  * 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>
@@ -33026,6 +33602,22 @@ Roo.BorderLayout = function(container, config){
 };
 
 Roo.extend(Roo.BorderLayout, Roo.LayoutManager, {
+	
+	/**
+	 * @cfg {Roo.LayoutRegion} east
+	 */
+	/**
+	 * @cfg {Roo.LayoutRegion} west
+	 */
+	/**
+	 * @cfg {Roo.LayoutRegion} north
+	 */
+	/**
+	 * @cfg {Roo.LayoutRegion} south
+	 */
+	/**
+	 * @cfg {Roo.LayoutRegion} center
+	 */
     /**
      * 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).
@@ -34177,7 +34769,7 @@ Roo.extend(Roo.LayoutRegion, Roo.BasicLayoutRegion, {
      * Collapses this region.
      * @param {Boolean} skipAnim (optional) true to collapse the element without animation (if animate is true)
      */
-    collapse : function(skipAnim, skipCheck = false){
+    collapse : function(skipAnim, skipCheck){
         if(this.collapsed) {
             return;
         }
@@ -35130,22 +35722,26 @@ Roo.LayoutStateManager.prototype = {
 /**
  * @class Roo.ContentPanel
  * @extends Roo.util.Observable
+ * @children Roo.form.Form Roo.JsonView Roo.View
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
  * 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|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 {String|HTMLElement|Element} resizeEl An element to resize if {@link #fitToFrame} is true (instead of this panel's element)
+ * @cfg {Roo.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 {String} region (center|north|south|east|west) [required] 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
  * @cfg {String}    content        Raw content to fill content panel with (uses setContent on construction.)
+ * @cfg {String}    style  Extra style to add to the content panel
+ * @cfg {Roo.menu.Menu} menu  popup menu
 
  * @constructor
  * Create a new ContentPanel.
@@ -35183,6 +35779,8 @@ Roo.ContentPanel = function(el, config, content){
                         {tag: "div", cls: "x-layout-inactive-content", id: config.id||el}, true);
         }
     }
+    
+    
     this.closable = false;
     this.loaded = false;
     this.active = false;
@@ -35249,8 +35847,7 @@ Roo.ContentPanel = function(el, config, content){
          * @param {Roo.ContentPanel} this
          */
         "render" : true
-        
-        
+         
         
     });
     
@@ -35426,7 +36023,7 @@ panel.load({
         }
         if(this.footer){
             var te = this.footer.getEl();
-            Roo.log("footer:" + te.getHeight());
+            //Roo.log("footer:" + te.getHeight());
             
             height -= te.getHeight();
             te.setWidth(width);
@@ -35574,17 +36171,32 @@ layout.addxtype({
     }
 });
 
+
+
+
+
+
+
+
+
+
+
+
 /**
  * @class Roo.GridPanel
  * @extends Roo.ContentPanel
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
  * @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
+ * @cfg {Roo.grid.Grid} grid The grid for this panel
  */
 Roo.GridPanel = function(grid, config){
     
-  
+    // universal ctor...
+    if (typeof(grid.grid) != 'undefined') {
+        config = grid;
+        grid = config.grid;
+    }
     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);
         
@@ -35652,11 +36264,15 @@ Roo.extend(Roo.GridPanel, Roo.ContentPanel, {
 /**
  * @class Roo.NestedLayoutPanel
  * @extends Roo.ContentPanel
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
+ * @cfg {Roo.BorderLayout} layout   [required] The layout for this panel
+ *
+ * 
  * @constructor
  * Create a new NestedLayoutPanel.
  * 
  * 
- * @param {Roo.BorderLayout} layout The layout for this panel
+ * @param {Roo.BorderLayout} layout [required] 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)
@@ -35688,6 +36304,8 @@ Roo.NestedLayoutPanel = function(layout, config)
 
 Roo.extend(Roo.NestedLayoutPanel, Roo.ContentPanel, {
 
+    layout : false,
+
     setSize : function(width, height){
         if(!this.ignoreResize(width, height)){
             var size = this.adjustForComponents(width, height);
@@ -35738,7 +36356,7 @@ Roo.extend(Roo.NestedLayoutPanel, Roo.ContentPanel, {
     
     /**
      * Returns the nested BorderLayout for this panel
-     * @return {Roo.BorderLayout} 
+     * @return {Roo.BorderLayout}
      */
     getLayout : function(){
         return this.layout;
@@ -35837,19 +36455,15 @@ Roo.extend(Roo.ScrollPanel, Roo.ContentPanel, {
 
 
 
-
-
-
-
-
-
 /**
  * @class Roo.TreePanel
  * @extends Roo.ContentPanel
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
+ * Treepanel component
+ * 
  * @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;
@@ -35892,19 +36506,13 @@ Roo.TreePanel = function(config){
 
 Roo.extend(Roo.TreePanel, Roo.ContentPanel, {   
     fitToFrame : true,
-    autoScroll : true
-});
-
-
-
-
-
-
-
-
-
-
+    autoScroll : true,
+    /*
+     * @cfg {Roo.tree.TreePanel} tree [required] The tree TreePanel, with config etc.
+     */
+    tree : false
 
+});
 /*
  * Based on:
  * Ext JS Library 1.1.1
@@ -36333,8 +36941,26 @@ Roo.grid.Grid = function(container, config){
 Roo.extend(Roo.grid.Grid, Roo.util.Observable, {
     
     /**
+	 * @cfg {Roo.grid.AbstractSelectionModel} sm The selection Model (default = Roo.grid.RowSelectionModel)
+	 */
+	/**
+	 * @cfg {Roo.grid.GridView} view  The view that renders the grid (default = Roo.grid.GridView)
+	 */
+	/**
+	 * @cfg {Roo.grid.ColumnModel} cm[] The columns of the grid
+	 */
+	/**
+	 * @cfg {Roo.data.Store} ds The data store for the grid
+	 */
+	/**
+	 * @cfg {Roo.Toolbar} toolbar a toolbar for buttons etc.
+	 */
+	/**
      * @cfg {String} ddGroup - drag drop group.
      */
+      /**
+     * @cfg {String} dragGroup - drag group (?? not sure if needed.)
+     */
 
     /**
      * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Default is 25.
@@ -36371,6 +36997,9 @@ Roo.extend(Roo.grid.Grid, Roo.util.Observable, {
 
     /**
     * @cfg {Boolean} enableDrag  True to enable drag of rows. Default is false. (double check if this is needed?)
+    */
+      /**
+    * @cfg {Boolean} enableDrop  True to enable drop of elements. Default is false. (double check if this is needed?)
     */
     
     /**
@@ -36432,8 +37061,10 @@ Roo.extend(Roo.grid.Grid, Roo.util.Observable, {
     * @cfg {Roo.dd.DropTarget} dropTarget An {@link Roo.dd.DropTarget} config
     */
     dropTarget: false,
-    
-   
+     /**
+    * @cfg {boolean} sortColMenu Sort the column order menu when it shows (usefull for long lists..) default false
+    */ 
+    sortColMenu : false,
     
     // private
     rendered : false,
@@ -36445,6 +37076,15 @@ Roo.extend(Roo.grid.Grid, Roo.util.Observable, {
     /**
     * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if autoHeight is not on.
     */
+    
+    
+    /**
+    * @cfg {String} ddText Configures the text is the drag proxy (defaults to "%0 selected row(s)").
+    * %0 is replaced with the number of selected rows.
+    */
+    ddText : "{0} selected row{1}",
+    
+    
     /**
      * Called once after all setup has been completed and the grid is ready to be rendered.
      * @return {Roo.grid.Grid} this
@@ -36499,12 +37139,12 @@ Roo.extend(Roo.grid.Grid, Roo.util.Observable, {
         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
-	 */
+    /**
+     * 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();
@@ -36516,7 +37156,41 @@ Roo.extend(Roo.grid.Grid, Roo.util.Observable, {
         this.colModel = colModel;
         this.view.refresh(true);
     },
-
+    /**
+     * addColumns
+     * Add's a column, default at the end..
+     
+     * @param {int} position to add (default end)
+     * @param {Array} of objects of column configuration see {@link Roo.grid.ColumnModel} 
+     */
+    addColumns : function(pos, ar)
+    {
+        
+        for (var i =0;i< ar.length;i++) {
+            var cfg = ar[i];
+            cfg.id = typeof(cfg.id) == 'undefined' ? Roo.id() : cfg.id; // don't normally use this..
+            this.cm.lookup[cfg.id] = cfg;
+        }
+        
+        
+        if (typeof(pos) == 'undefined' || pos >= this.cm.config.length) {
+            pos = this.cm.config.length; //this.cm.config.push(cfg);
+        } 
+        pos = Math.max(0,pos);
+        ar.unshift(0);
+        ar.unshift(pos);
+        this.cm.config.splice.apply(this.cm.config, ar);
+        
+        
+        
+        this.view.generateRules(this.cm);
+        this.view.refresh(true);
+        
+    },
+    
+    
+    
+    
     // private
     onKeyDown : function(e){
         this.fireEvent("keydown", e);
@@ -36721,11 +37395,17 @@ Roo.extend(Roo.grid.Grid, Roo.util.Observable, {
     getView : function(){
         if(!this.view){
             this.view = new Roo.grid.GridView(this.viewConfig);
+ 	    this.relayEvents(this.view, [
+		"beforerowremoved", "beforerowsinserted",
+		"beforerefresh", "rowremoved",
+		"rowsinserted", "rowupdated" ,"refresh"
+	    ]);
         }
         return this.view;
     },
     /**
      * Called to get grid's drag proxy text, by default returns this.ddText.
+     * Override this to put something different in the dragged text.
      * @return {String}
      */
     getDragDropText : function(){
@@ -36733,12 +37413,7 @@ Roo.extend(Roo.grid.Grid, Roo.util.Observable, {
         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.
@@ -36748,7 +37423,13 @@ Roo.grid.Grid.prototype.ddText = "{0} selected row{1}";/*
  * Fork - LGPL
  * <script type="text/javascript">
  */
- 
+ /**
+ * @class Roo.grid.AbstractGridView
+ * @extends Roo.util.Observable
+ * @abstract
+ * Abstract base class for grid Views
+ * @constructor
+ */
 Roo.grid.AbstractGridView = function(){
 	this.grid = null;
 	
@@ -37653,7 +38334,7 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
                 );
         */
         if(ctop < stop){
-             c.scrollTop = ctop;
+            c.scrollTop = ctop;
             //Roo.log("set scrolltop to ctop DISABLE?");
         }else if(cbot > sbot){
             //Roo.log("set scrolltop to cbot-ch");
@@ -38445,13 +39126,28 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
     beforeColMenuShow : function(){
         var cm = this.cm,  colCount = cm.getColumnCount();
         this.colMenu.removeAll();
+        
+        var items = [];
         for(var i = 0; i < colCount; i++){
-            this.colMenu.add(new Roo.menu.CheckItem({
+            items.push({
                 id: "col-"+cm.getColumnId(i),
                 text: cm.getColumnHeader(i),
                 checked: !cm.isHidden(i),
                 hideOnClick:false
-            }));
+            });
+        }
+        
+        if (this.grid.sortColMenu) {
+            items.sort(function(a,b) {
+                if (a.text == b.text) {
+                    return 0;
+                }
+                return a.text.toUpperCase() > b.text.toUpperCase() ? 1 : -1;
+            });
+        }
+        
+        for(var i = 0; i < colCount; i++){
+            this.colMenu.add(new Roo.menu.CheckItem(items[i]));
         }
     },
 
@@ -38648,7 +39344,8 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
         }
     },
 
-    layout : function(initialRender, is2ndPass){
+    layout : function(initialRender, is2ndPass)
+    {
         var g = this.grid;
         var auto = g.autoHeight;
         var scrollOffset = 16;
@@ -38805,19 +39502,34 @@ Roo.extend(Roo.grid.GridView.ColumnDragZone, Roo.grid.HeaderDragZone, {
  * Fork - LGPL
  * <script type="text/javascript">
  */
- 
+ /**
+ * @extends Roo.dd.DDProxy
+ * @class Roo.grid.SplitDragZone
+ * Support for Column Header resizing
+ * @constructor
+ * @param {Object} config
+ */
 // 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
-    });
+    Roo.grid.SplitDragZone.superclass.constructor.call(
+        this,
+        hd, // ID
+        "gridSplitters" + this.grid.getGridEl().id, // SGROUP
+        {  // CONFIG
+            dragElId : Roo.id(this.proxy.dom),
+            resizeFrame:false
+        }
+    );
+    
     this.setHandleElId(Roo.id(hd));
-    this.setOuterHandleElId(Roo.id(hd2));
+    if (hd2 !== false) {
+        this.setOuterHandleElId(Roo.id(hd2));
+    }
+    
     this.scroll = false;
 };
 Roo.extend(Roo.grid.SplitDragZone, Roo.dd.DDProxy, {
@@ -38825,8 +39537,25 @@ Roo.extend(Roo.grid.SplitDragZone, Roo.dd.DDProxy, {
 
     b4StartDrag : function(x, y){
         this.view.headersDisabled = true;
-        this.proxy.setHeight(this.view.mainWrap.getHeight());
+        var h = this.view.mainWrap ? this.view.mainWrap.getHeight() : (
+                    this.view.headEl.getHeight() + this.view.bodyEl.getHeight()
+        );
+        this.proxy.setHeight(h);
+        
+        // for old system colWidth really stored the actual width?
+        // in bootstrap we tried using xs/ms/etc.. to do % sizing?
+        // which in reality did not work.. - it worked only for fixed sizes
+        // for resizable we need to use actual sizes.
         var w = this.cm.getColumnWidth(this.cellIndex);
+        if (!this.view.mainWrap) {
+            // bootstrap.
+            w = this.view.getHeaderIndex(this.cellIndex).getWidth();
+        }
+        
+        
+        
+        // this was w-this.grid.minColumnWidth;
+        // doesnt really make sense? - w = thie curren width or the rendered one?
         var minw = Math.max(w-this.grid.minColumnWidth, 0);
         this.resetConstraints();
         this.setXConstraint(minw, 1000);
@@ -38834,6 +39563,10 @@ Roo.extend(Roo.grid.SplitDragZone, Roo.dd.DDProxy, {
         this.minX = x - minw;
         this.maxX = x + 1000;
         this.startPos = x;
+        if (!this.view.mainWrap) { // this is Bootstrap code..
+            this.getDragEl().style.display='block';
+        }
+        
         Roo.dd.DDProxy.prototype.b4StartDrag.call(this, x, y);
     },
 
@@ -38855,7 +39588,12 @@ Roo.extend(Roo.grid.SplitDragZone, Roo.dd.DDProxy, {
         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);
+        // 
+        var w = this.cm.getColumnWidth(this.cellIndex);
+        if (!this.view.mainWrap) {
+            w = 0;
+        }
+        this.view.onColumnSplitterMoved(this.cellIndex, w+diff);
     },
 
     autoOffset : function(){
@@ -38907,7 +39645,12 @@ Roo.extend(Roo.grid.GridDragZone, Roo.dd.DragZone, {
             }
         
         }
+        if (sm.getSelections && sm.getSelections().length < 1) {
+            return false;
+        }
+        
         
+        // before it used to all dragging of unseleted... - now we dont do that.
         if(rowIndex !== false){
             
             // if editorgrid.. 
@@ -38928,14 +39671,14 @@ Roo.extend(Roo.grid.GridDragZone, Roo.dd.DragZone, {
                 grid: this.grid,
                 ddel: this.ddel,
                 rowIndex: rowIndex,
-                selections:sm.getSelections ? sm.getSelections() : (
-                    sm.getSelectedCell() ? [ this.grid.ds.getAt(sm.getSelectedCell()[0]) ] : []
-                )
+                selections: sm.getSelections ? sm.getSelections() : (
+                    sm.getSelectedCell() ? [ this.grid.ds.getAt(sm.getSelectedCell()[0]) ] : [])
             };
         }
         return false;
     },
-
+    
+    
     onInitDrag : function(e){
         var data = this.dragData;
         this.ddel.innerHTML = this.grid.getDragDropText();
@@ -39003,30 +39746,15 @@ Roo.grid.ColumnModel = function(config){
 	/**
      * The config passed into the constructor
      */
-    this.config = config;
+    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;
+	this.addColumn(config[i]);
+	
     }
 
     /**
@@ -39087,63 +39815,84 @@ Roo.grid.ColumnModel = function(config){
 };
 Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
     /**
-     * @cfg {String} header The header text to display in the Grid view.
+     * @cfg {String} header [required] The header text to display in the Grid view.
+     */
+	/**
+     * @cfg {String} xsHeader Header at Bootsrap Extra Small width (default for all)
+     */
+	/**
+     * @cfg {String} smHeader Header at Bootsrap Small width
+     */
+	/**
+     * @cfg {String} mdHeader Header at Bootsrap Medium width
+     */
+	/**
+     * @cfg {String} lgHeader Header at Bootsrap Large width
+     */
+	/**
+     * @cfg {String} xlHeader Header at Bootsrap extra Large width
      */
     /**
-     * @cfg {String} dataIndex (Optional) The name of the field in the grid's {@link Roo.data.Store}'s
+     * @cfg {String} dataIndex  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
+     * @cfg {Number} width  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.
+     * @cfg {Boolean} sortable 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} locked  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} fixed  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} resizable  False to disable column resizing. Defaults to true.
      */
     /**
-     * @cfg {Boolean} hidden (Optional) True to hide the column. Defaults to false.
+     * @cfg {Boolean} hidden  True to hide the column. Defaults to false.
      */
     /**
-     * @cfg {Function} renderer (Optional) A function used to generate HTML markup for a cell
+     * @cfg {Function} renderer 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. If an object is returned (bootstrap only)
+     * default renderer returns the escaped data value. If an object is returned (bootstrap only)
      * then it is treated as a Roo Component object instance, and it is rendered after the initial row is rendered
      */
        /**
-     * @cfg {Roo.grid.GridEditor} editor (Optional) For grid editors - returns the grid editor 
+     * @cfg {Roo.grid.GridEditor} editor  For grid editors - returns the grid editor 
+     */
+    /**
+     * @cfg {String} align (left|right) Set the CSS text-align property of the column.  Defaults to undefined (left).
      */
     /**
-     * @cfg {String} align (Optional) Set the CSS text-align property of the column.  Defaults to undefined.
+     * @cfg {String} valign (top|bottom|middle) Set the CSS vertical-align property of the column (eg. middle, top, bottom etc).  Defaults to undefined (middle)
      */
     /**
-     * @cfg {String} cursor (Optional)
+     * @cfg {String} cursor ( auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|row-resize|all-scroll|zoom-in|zoom-out|grab|grabbing)
      */
     /**
-     * @cfg {String} tooltip (Optional)
+     * @cfg {String} tooltip mouse over tooltip text
      */
     /**
-     * @cfg {Number} xs (Optional)
+     * @cfg {Number} xs  can be '0' for hidden at this size (number less than 12)
      */
     /**
-     * @cfg {Number} sm (Optional)
+     * @cfg {Number} sm can be '0' for hidden at this size (number less than 12)
      */
     /**
-     * @cfg {Number} md (Optional)
+     * @cfg {Number} md can be '0' for hidden at this size (number less than 12)
      */
     /**
-     * @cfg {Number} lg (Optional)
+     * @cfg {Number} lg   can be '0' for hidden at this size (number less than 12)
+     */
+	/**
+     * @cfg {Number} xl   can be '0' for hidden at this size (number less than 12)
      */
     /**
      * Returns the id of the column at the specified index.
@@ -39165,7 +39914,7 @@ Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
 
     
     /**
-     * Returns the column for a specified dataIndex.
+     * Returns the column Object for a specified dataIndex.
      * @param {String} dataIndex The column dataIndex
      * @return {Object|Boolean} the column or false if not found
      */
@@ -39326,10 +40075,29 @@ Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
     /**
      * Returns the width for the specified column.
      * @param {Number} col The column index
+     * @param (optional) {String} gridSize bootstrap width size.
      * @return {Number}
      */
-    getColumnWidth : function(col){
-        return this.config[col].width * 1 || this.defaultWidth;
+    getColumnWidth : function(col, gridSize)
+	{
+		var cfg = this.config[col];
+		
+		if (typeof(gridSize) == 'undefined') {
+			return cfg.width * 1 || this.defaultWidth;
+		}
+		if (gridSize === false) { // if we set it..
+			return cfg.width || false;
+		}
+		var sizes = ['xl', 'lg', 'md', 'sm', 'xs'];
+		
+		for(var i = sizes.indexOf(gridSize); i < sizes.length; i++) {
+			if (typeof(cfg[ sizes[i] ] ) == 'undefined') {
+				continue;
+			}
+			return cfg[ sizes[i] ];
+		}
+		return 1;
+		
     },
 
     /**
@@ -39491,14 +40259,47 @@ Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
      */
     setEditor : function(col, editor){
         this.config[col].editor = editor;
+    },
+    /**
+     * Add a column (experimental...) - defaults to adding to the end..
+     * @param {Object} config 
+    */
+    addColumn : function(c)
+    {
+    
+	var i = this.config.length;
+	this.config[i] = c;
+	
+	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;
     }
+    
 });
 
-Roo.grid.ColumnModel.defaultRenderer = function(value){
+Roo.grid.ColumnModel.defaultRenderer = function(value)
+{
+    if(typeof value == "object") {
+        return value;
+    }
 	if(typeof value == "string" && value.length < 1){
 	    return "&#160;";
 	}
-	return value;
+    
+	return String.format("{0}", value);
 };
 
 // Alias for backwards compatibility
@@ -39517,6 +40318,7 @@ Roo.grid.DefaultColumnModel = Roo.grid.ColumnModel;
 /**
  * @class Roo.grid.AbstractSelectionModel
  * @extends Roo.util.Observable
+ * @abstract
  * 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
@@ -39583,39 +40385,39 @@ Roo.grid.RowSelectionModel = function(config){
 
     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
-	     */
+        * @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);
@@ -39637,7 +40439,8 @@ Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
         }else{ // allow click to work like normal
             this.grid.on("rowclick", this.handleDragableRowClick, this);
         }
-
+        // bootstrap does not have a view..
+        var view = this.grid.view ? this.grid.view : this.grid;
         this.rowNav = new Roo.KeyNav(this.grid.getGridEl(), {
             "up" : function(e){
                 if(!e.shiftKey){
@@ -39645,7 +40448,7 @@ Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
                 }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);
+                    view.focusRow(this.lastActive);
                     if(last !== false){
                         this.last = last;
                     }
@@ -39660,7 +40463,7 @@ Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
                 }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);
+                    view.focusRow(this.lastActive);
                     if(last !== false){
                         this.last = last;
                     }
@@ -39672,7 +40475,7 @@ Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
             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);
@@ -39680,7 +40483,7 @@ Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
 
     // private
     onRefresh : function(){
-        var ds = this.grid.dataSource, i, v = this.grid.view;
+        var ds = this.grid.ds, i, v = this.grid.view;
         var s = this.selections;
         s.each(function(r){
             if((i = ds.indexOfId(r.id)) != -1){
@@ -39713,7 +40516,7 @@ Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
         if(!keepExisting){
             this.clearSelections();
         }
-        var ds = this.grid.dataSource;
+        var ds = this.grid.ds;
         for(var i = 0, len = records.length; i < len; i++){
             this.selectRow(ds.indexOf(records[i]), true);
         }
@@ -39739,7 +40542,7 @@ Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
      * @param {Boolean} keepExisting (optional) True to keep existing selections
      */
     selectLastRow : function(keepExisting){
-        this.selectRow(this.grid.dataSource.getCount() - 1, keepExisting);
+        this.selectRow(this.grid.ds.getCount() - 1, keepExisting);
     },
 
     /**
@@ -39747,9 +40550,10 @@ Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
      * @param {Boolean} keepExisting (optional) True to keep existing selections
      */
     selectNext : function(keepExisting){
-        if(this.last !== false && (this.last+1) < this.grid.dataSource.getCount()){
+        if(this.last !== false && (this.last+1) < this.grid.ds.getCount()){
             this.selectRow(this.last+1, keepExisting);
-            this.grid.getView().focusRow(this.last);
+            var view = this.grid.view ? this.grid.view : this.grid;
+            view.focusRow(this.last);
         }
     },
 
@@ -39760,7 +40564,8 @@ Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
     selectPrevious : function(keepExisting){
         if(this.last){
             this.selectRow(this.last-1, keepExisting);
-            this.grid.getView().focusRow(this.last);
+            var view = this.grid.view ? this.grid.view : this.grid;
+            view.focusRow(this.last);
         }
     },
 
@@ -39789,7 +40594,7 @@ Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
             return;
         }
         if(fast !== true){
-            var ds = this.grid.dataSource;
+            var ds = this.grid.ds;
             var s = this.selections;
             s.each(function(r){
                 this.deselectRow(ds.indexOfId(r.id));
@@ -39810,7 +40615,7 @@ Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
             return;
         }
         this.selections.clear();
-        for(var i = 0, len = this.grid.dataSource.getCount(); i < len; i++){
+        for(var i = 0, len = this.grid.ds.getCount(); i < len; i++){
             this.selectRow(i, true);
         }
     },
@@ -39829,7 +40634,7 @@ Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
      * @return {Boolean}
      */
     isSelected : function(index){
-        var r = typeof index == "number" ? this.grid.dataSource.getAt(index) : index;
+        var r = typeof index == "number" ? this.grid.ds.getAt(index) : index;
         return (r && this.selections.key(r.id) ? true : false);
     },
 
@@ -39843,8 +40648,10 @@ Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
     },
 
     // private
-    handleMouseDown : function(e, t){
-        var view = this.grid.getView(), rowIndex;
+    handleMouseDown : function(e, t)
+    {
+        var view = this.grid.view ? this.grid.view : this.grid;
+        var rowIndex;
         if(this.isLocked() || (rowIndex = view.findRowIndex(t)) === false){
             return;
         };
@@ -39871,7 +40678,8 @@ Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
     {
         if(e.button === 0 && !e.shiftKey && !e.ctrlKey) {
             this.selectRow(rowIndex, false);
-            grid.view.focusRow(rowIndex);
+            var view = this.grid.view ? this.grid.view : this.grid;
+            view.focusRow(rowIndex);
              this.fireEvent("afterselectionchange", this);
         }
     },
@@ -39934,18 +40742,19 @@ Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
      * @param {Boolean} keepExisting (optional) True to keep existing selections
      */
     selectRow : function(index, keepExisting, preventViewNotify){
-        if(this.locked || (index < 0 || index >= this.grid.dataSource.getCount())) {
+        if(this.locked || (index < 0 || index >= this.grid.ds.getCount())) {
             return;
         }
         if(this.fireEvent("beforerowselect", this, index, keepExisting) !== false){
             if(!keepExisting || this.singleSelect){
                 this.clearSelections();
             }
-            var r = this.grid.dataSource.getAt(index);
+            var r = this.grid.ds.getAt(index);
             this.selections.add(r);
             this.last = this.lastActive = index;
             if(!preventViewNotify){
-                this.grid.getView().onRowSelect(index);
+                var view = this.grid.view ? this.grid.view : this.grid;
+                view.onRowSelect(index);
             }
             this.fireEvent("rowselect", this, index, r);
             this.fireEvent("selectionchange", this);
@@ -39966,10 +40775,11 @@ Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
         if(this.lastActive == index){
             this.lastActive = false;
         }
-        var r = this.grid.dataSource.getAt(index);
+        var r = this.grid.ds.getAt(index);
         this.selections.remove(r);
         if(!preventViewNotify){
-            this.grid.getView().onRowDeselect(index);
+            var view = this.grid.view ? this.grid.view : this.grid;
+            view.onRowDeselect(index);
         }
         this.fireEvent("rowdeselect", this, index);
         this.fireEvent("selectionchange", this);
@@ -40868,7 +41678,7 @@ Roo.extend(Roo.grid.PropertyGrid, Roo.grid.EditorGrid, {
  
 /**
  * @class Roo.grid.Calendar
- * @extends Roo.util.Grid
+ * @extends Roo.grid.Grid
  * This class extends the Grid to provide a calendar widget
  * <br><br>Usage:<pre><code>
  var grid = new Roo.grid.Calendar("my-container-id", {
@@ -42183,6 +42993,7 @@ Roo.LoadMask.prototype = {
      * 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.
      */
+    removeMask : false,
     /**
      * @cfg {String} msg
      * The text to display in a centered loading message box (defaults to 'Loading...')
@@ -42231,20 +43042,18 @@ Roo.LoadMask.prototype = {
         }
         */
     
-        
-        
-        this.el.unmask(this.removeMask);
+        (function() { this.el.unmask(this.removeMask); }).defer(50, this);
     },
     // private
     onLoad : function()
     {
-        this.el.unmask(this.removeMask);
+        (function() { this.el.unmask(this.removeMask); }).defer(50, this);
     },
 
     // private
     onBeforeLoad : function(){
         if(!this.disabled){
-            this.el.mask(this.msg, this.msgCls);
+            (function() { this.el.mask(this.msg, this.msgCls); }).defer(50, this);
         }
     },