From 049b8b38154edc6d84ccedaab166d50ac9c415b1 Mon Sep 17 00:00:00 2001
From: Alan Knowles <alan@roojs.com>
Date: Thu, 14 Jul 2016 17:22:31 +0800
Subject: [PATCH] roojs-ui.js roojs-ui-debug.js

---
 roojs-ui-debug.js | 42551 ++++++++++++++++++++++++++++++++++++++++++++
 roojs-ui.js       |  1806 ++
 2 files changed, 44357 insertions(+)

diff --git a/roojs-ui-debug.js b/roojs-ui-debug.js
index e69de29bb2..f8797b4122 100644
--- a/roojs-ui-debug.js
+++ b/roojs-ui-debug.js
@@ -0,0 +1,42551 @@
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+
+
+/*
+ * These classes are 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
+ */
+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) {  },
+
+    /**
+     * Event handler that fires when a drag/drop obj gets a mousedown
+     * @method onMouseDown
+     * @param {Event} e the mousedown event
+     */
+    onMouseDown: function(e) { /* override this */ },
+
+    /**
+     * Event handler that fires when a drag/drop obj gets a mouseup
+     * @method onMouseUp
+     * @param {Event} e the mouseup event
+     */
+    onMouseUp: function(e) { /* override this */ },
+
+    /**
+     * Override the onAvailable method to do what is needed after the initial
+     * position was determined.
+     * @method onAvailable
+     */
+    onAvailable: function () {
+    },
+
+    /*
+     * Provides default constraint padding to "constrainTo" elements (defaults to {left: 0, right:0, top:0, bottom:0}).
+     * @type Object
+     */
+    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
+        );
+    },
+
+    /**
+     * Returns a reference to the linked element
+     * @method getEl
+     * @return {HTMLElement} the html element
+     */
+    getEl: function() {
+        if (!this._domRef) {
+            this._domRef = Roo.getDom(this.id);
+        }
+
+        return this._domRef;
+    },
+
+    /**
+     * 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
+     */
+    getDragEl: function() {
+        return Roo.getDom(this.dragElId);
+    },
+
+    /**
+     * 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
+     */
+    init: function(id, sGroup, config) {
+        this.initTarget(id, sGroup, config);
+        if (!Roo.isTouch) {
+            Event.on(this.id, "mousedown", this.handleMouseDown, this);
+        }
+        Event.on(this.id, "touchstart", this.handleMouseDown, this);
+        // Event.on(this.id, "selectstart", Event.preventDefault);
+    },
+
+    /**
+     * 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
+     */
+    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);
+        }
+
+        // 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();
+    },
+
+    /**
+     * 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() {
+
+        // 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);
+
+    },
+
+    /**
+     * Executed when the linked element is available
+     * @method handleOnAvailable
+     * @private
+     */
+    handleOnAvailable: function() {
+        this.available = true;
+        this.resetConstraints();
+        this.onAvailable();
+    },
+
+     /**
+     * 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];
+        }
+    },
+
+    /**
+     * 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
+     */
+    setInitPosition: function(diffX, diffY) {
+        var el = this.getEl();
+
+        if (!this.DDM.verifyEl(el)) {
+            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);
+    },
+
+    /**
+     * 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
+     */
+    setStartPosition: function(pos) {
+        var p = pos || Dom.getXY( this.getEl() );
+        this.deltaSetXY = null;
+
+        this.startPageX = p[0];
+        this.startPageY = p[1];
+    },
+
+    /**
+     * 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);
+    },
+
+    /**
+     * 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);
+    },
+
+    /**
+     * 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;
+    },
+
+    /**
+     * 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.
+     */
+    setHandleElId: function(id) {
+        if (typeof id !== "string") {
+            id = Roo.id(id);
+        }
+        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
+     */
+    setOuterHandleElId: function(id) {
+        if (typeof id !== "string") {
+            id = Roo.id(id);
+        }
+        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);
+    },
+
+    destroy : function(){
+        this.unreg();
+    },
+
+    /**
+     * 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
+     */
+    isLocked: function() {
+        return (this.DDM.isLocked() || this.locked);
+    },
+
+    /**
+     * 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;
+        }
+        if (e.browserEvent.touches && e.browserEvent.touches.length != 1) {
+            return; // double touch..
+        }
+        
+
+        if (this.isLocked()) {
+            //Roo.log('locked');
+            return;
+        }
+
+        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.b4MouseDown(e);
+                this.onMouseDown(e);
+
+                this.DDM.handleMouseDown(e, this);
+
+                this.DDM.stopEvent(e);
+            } else {
+
+
+            }
+        }
+    },
+
+    clickValidator: function(e) {
+        var target = e.getTarget();
+        return ( this.isValidHandleChild(target) &&
+                    (this.id == this.handleElId ||
+                        this.DDM.handleWasClicked(target, this.id)) );
+    },
+
+    /**
+     * 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
+     */
+    addInvalidHandleType: function(tagName) {
+        var type = tagName.toUpperCase();
+        this.invalidHandleTypes[type] = type;
+    },
+
+    /**
+     * 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
+     */
+    addInvalidHandleId: function(id) {
+        if (typeof id !== "string") {
+            id = Roo.id(id);
+        }
+        this.invalidHandleIds[id] = id;
+    },
+
+    /**
+     * 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
+     */
+    addInvalidHandleClass: function(cssClass) {
+        this.invalidHandleClasses.push(cssClass);
+    },
+
+    /**
+     * Unsets an excluded tag name set by addInvalidHandleType
+     * @method removeInvalidHandleType
+     * @param {string} tagName the type of element to unexclude
+     */
+    removeInvalidHandleType: function(tagName) {
+        var type = tagName.toUpperCase();
+        // this.invalidHandleTypes[type] = null;
+        delete this.invalidHandleTypes[type];
+    },
+
+    /**
+     * Unsets an invalid handle id
+     * @method removeInvalidHandleId
+     * @param {string} id the id of the element to re-enable
+     */
+    removeInvalidHandleId: function(id) {
+        if (typeof id !== "string") {
+            id = Roo.id(id);
+        }
+        delete this.invalidHandleIds[id];
+    },
+
+    /**
+     * Unsets an invalid css class
+     * @method removeInvalidHandleClass
+     * @param {string} cssClass the class of the element(s) you wish to
+     * re-enable
+     */
+    removeInvalidHandleClass: function(cssClass) {
+        for (var i=0, len=this.invalidHandleClasses.length; i<len; ++i) {
+            if (this.invalidHandleClasses[i] == cssClass) {
+                delete this.invalidHandleClasses[i];
+            }
+        }
+    },
+
+    /**
+     * 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
+     */
+    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;
+
+    },
+
+    /**
+     * Create the array of horizontal tick marks if an interval was specified
+     * in setXConstraint().
+     * @method setXTicks
+     * @private
+     */
+    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;
+            }
+        }
+
+        for (i = this.initPageX; i <= this.maxX; i = i + iTickSize) {
+            if (!tickMap[i]) {
+                this.xTicks[this.xTicks.length] = i;
+                tickMap[i] = true;
+            }
+        }
+
+        this.xTicks.sort(this.DDM.numericSort) ;
+    },
+
+    /**
+     * Create the array of vertical tick marks if an interval was specified in
+     * setYConstraint().
+     * @method setYTicks
+     * @private
+     */
+    setYTicks: function(iStartY, iTickSize) {
+        this.yTicks = [];
+        this.yTickSize = iTickSize;
+
+        var tickMap = {};
+
+        for (var i = this.initPageY; i >= this.minY; i = i - iTickSize) {
+            if (!tickMap[i]) {
+                this.yTicks[this.yTicks.length] = i;
+                tickMap[i] = true;
+            }
+        }
+
+        for (i = this.initPageY; i <= this.maxY; i = i + iTickSize) {
+            if (!tickMap[i]) {
+                this.yTicks[this.yTicks.length] = i;
+                tickMap[i] = true;
+            }
+        }
+
+        this.yTicks.sort(this.DDM.numericSort) ;
+    },
+
+    /**
+     * 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.
+     */
+    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;
+    },
+
+    /**
+     * Clears any constraints applied to this instance.  Also clears ticks
+     * since they can't exist independent of a constraint at this time.
+     * @method clearConstraints
+     */
+    clearConstraints: function() {
+        this.constrainX = false;
+        this.constrainY = false;
+        this.clearTicks();
+    },
+
+    /**
+     * Clears any tick interval defined for this instance
+     * @method clearTicks
+     */
+    clearTicks: function() {
+        this.xTicks = null;
+        this.yTicks = null;
+        this.xTickSize = 0;
+        this.yTickSize = 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.
+     */
+    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;
+
+    },
+
+    /**
+     * resetConstraints must be called if you manually reposition a dd element.
+     * @method resetConstraints
+     * @param {boolean} maintainOffset
+     */
+    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);
+
+        // This is the first time we have detected the element's position
+        } else {
+            this.setInitPosition();
+        }
+
+        if (this.constrainX) {
+            this.setXConstraint( this.leftConstraint,
+                                 this.rightConstraint,
+                                 this.xTickSize        );
+        }
+
+        if (this.constrainY) {
+            this.setYConstraint( this.topConstraint,
+                                 this.bottomConstraint,
+                                 this.yTickSize         );
+        }
+    },
+
+    /**
+     * 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
+     */
+    getTick: function(val, tickArray) {
+
+        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];
+                }
+            }
+
+            // The value is larger than the last tick, so we return the last
+            // tick.
+            return tickArray[tickArray.length - 1];
+        }
+    },
+
+    /**
+     * toString method
+     * @method toString
+     * @return {string} string representation of the dd obj
+     */
+    toString: function() {
+        return ("DragDrop " + 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">
+ */
+
+
+/**
+ * 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.
+ */
+
+// 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
+ */
+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,
+
+        /**
+         * The current drag and drop mode.  Default: POINT
+         * @property mode
+         * @type int
+         * @static
+         */
+        mode: 0,
+
+        /**
+         * 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;
+                    }
+                    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);
+            
+            Event.on(window,   "unload",    this._onUnload, this, true);
+            Event.on(window,   "resize",    this._onResize, this, true);
+            // Event.on(window,   "mouseout",    this._test);
+
+        },
+
+        /**
+         * Reset constraints on all drag and drop objs
+         * @method _onResize
+         * @private
+         * @static
+         */
+        _onResize: function(e) {
+            this._execOnAll("resetConstraints", []);
+        },
+
+        /**
+         * Lock all drag and drop functionality
+         * @method lock
+         * @static
+         */
+        lock: function() { this.locked = true; },
+
+        /**
+         * Unlock all drag and drop functionality
+         * @method unlock
+         * @static
+         */
+        unlock: function() { this.locked = false; },
+
+        /**
+         * Is drag and drop locked?
+         * @method isLocked
+         * @return {boolean} True if drag and drop is locked, false otherwise.
+         * @static
+         */
+        isLocked: function() { return this.locked; },
+
+        /**
+         * 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
+         */
+        locationCache: {},
+
+        /**
+         * 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
+         */
+        useCache: true,
+
+        /**
+         * 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,
+
+        /**
+         * 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,
+
+        /**
+         * 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;
+        }
+
+    };
+
+}();
+
+// shorter alias, save a few bytes
+Roo.dd.DDM = Roo.dd.DragDropMgr;
+Roo.dd.DDM._addListeners();
+
+}/*
+ * 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.DD
+ * A DragDrop implementation where the linked element follows the
+ * mouse cursor during a drag.
+ * @extends Roo.dd.DragDrop
+ * @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
+ */
+Roo.dd.DD = function(id, sGroup, config) {
+    if (id) {
+        this.init(id, sGroup, config);
+    }
+};
+
+Roo.extend(Roo.dd.DD, Roo.dd.DragDrop, {
+
+    /**
+     * 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
+     */
+    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
+     */
+    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
+     */
+    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
+     */
+    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
+     */
+    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;
+    },
+
+    /**
+     * 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)
+     */
+    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
+     */
+    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);
+            }
+        }
+    },
+
+    /**
+     * 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
+     */
+    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) {
+    },
+
+    onDragEnter: function(e, id) {
+    },
+
+    onDragOver: function(e, id) {
+    },
+
+    onDragOut: function(e, id) {
+    },
+
+    onDragDrop: function(e, id) {
+    },
+
+    endDrag: function(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.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.
+ *
+ * @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
+ */
+Roo.dd.DDProxy = function(id, sGroup, config) {
+    if (id) {
+        this.init(id, sGroup, config);
+        this.initFrame();
+    }
+};
+
+/**
+ * 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, {
+
+    /**
+     * 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
+     */
+    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
+     */
+    centerFrame: false,
+
+    /**
+     * Creates the proxy element if it does not yet exist
+     * @method createFrame
+     */
+    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);
+        }
+    },
+
+    /**
+     * Initialization for the drag frame element.  Must be called in the
+     * constructor of all subclasses
+     * @method initFrame
+     */
+    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);
+    },
+
+    /**
+     * 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
+     */
+    showFrame: function(iPageX, iPageY) {
+        var el = this.getEl();
+        var dragEl = this.getDragEl();
+        var s = dragEl.style;
+
+        this._resizeProxy();
+
+        if (this.centerFrame) {
+            this.setDelta( Math.round(parseInt(s.width,  10)/2),
+                           Math.round(parseInt(s.height, 10)/2) );
+        }
+
+        this.setDragElPos(iPageX, iPageY);
+
+        Roo.fly(dragEl).show();
+    },
+
+    /**
+     * 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);
+        }
+    },
+
+    // overrides Roo.dd.DragDrop
+    b4MouseDown: function(e) {
+        var x = e.getPageX();
+        var y = e.getPageY();
+        this.autoOffset(x, y);
+        this.setDragElPos(x, y);
+    },
+
+    // overrides Roo.dd.DragDrop
+    b4StartDrag: function(x, y) {
+        // show the drag frame
+        this.showFrame(x, y);
+    },
+
+    // overrides Roo.dd.DragDrop
+    b4EndDrag: function(e) {
+        Roo.fly(this.getDragEl()).hide();
+    },
+
+    // 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();
+    },
+
+    beforeMove : function(){
+
+    },
+
+    afterDrag : function(){
+
+    },
+
+    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 || {} 
+        });    
+    }
+};
+
+// Roo.dd.DDTarget.prototype = new Roo.dd.DragDrop();
+Roo.extend(Roo.dd.DDTarget, Roo.dd.DragDrop, {
+    toString: function() {
+        return ("DDTarget " + 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.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
+ */
+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);
+        }
+    };
+    
+    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);
+            }
+        }
+    };
+    
+    var clearProc = function(){
+        if(proc.id){
+            clearInterval(proc.id);
+        }
+        proc.id = 0;
+        proc.el = null;
+        proc.dir = "";
+    };
+    
+    var startProc = function(el, dir){
+         Roo.log('scroll startproc');
+        clearProc();
+        proc.el = el;
+        proc.dir = dir;
+        proc.id = setInterval(doScroll, Roo.dd.ScrollManager.frequency);
+    };
+    
+    var onFire = function(e, isDrop){
+       
+        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;
+                }
+            }
+        }
+        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();
+                }
+            }
+        }
+    };
+}();/*
+ * 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.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;
+                }
+            }
+        },
+
+    /**
+     * 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];
+        },
+
+    /**
+     * 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;
+        },
+
+    /**
+     * 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
+     */
+        getTarget : function(id){
+            if(typeof id != "string"){ // must be element?
+                id = id.id;
+            }
+            return elements[id];
+        },
+
+    /**
+     * 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.
+ *
+ * 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.
+ * @constructor
+ * @param {Object} config
+ */
+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.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');
+		}
+    },
+    
+    /**
+     * 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
+     */
+    hide : function(clear){
+        this.el.hide();
+        if(clear){
+            this.reset(true);
+        }
+    },
+
+    /**
+     * Stops the repair animation if it's currently running
+     */
+    stop : function(){
+        if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){
+            this.anim.stop();
+        }
+    },
+
+    /**
+     * Displays this proxy
+     */
+    show : function(){
+        this.el.show();
+    },
+
+    /**
+     * Force the Layer to sync its shadow and shim positions to the element
+     */
+    sync : function(){
+        this.el.sync();
+    },
+
+    /**
+     * 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
+     */
+    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();
+        }
+    },
+
+    // private
+    afterRepair : function(){
+        this.hide(true);
+        if(typeof this.callback == "function"){
+            this.callback.call(this.scope || this);
+        }
+        this.callback = null;
+        this.scope = null;
+    }
+};/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.dd.DragSource
+ * @extends Roo.dd.DDProxy
+ * A simple class that provides the basic implementation needed to make any element draggable.
+ * @constructor
+ * @param {String/HTMLElement/Element} el The container element
+ * @param {Object} config
+ */
+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.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.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",
+
+    /**
+     * Returns the data object associated with this drag source
+     * @return {Object} data An object containing arbitrary data
+     */
+    getDragData : function(e){
+        return this.dragData;
+    },
+
+    // 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);
+            }
+        }
+    },
+
+    /**
+     * 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
+     */
+    beforeDragEnter : function(target, e, id){
+        return true;
+    },
+
+    // private
+    alignElWithMouse: function() {
+        Roo.dd.DragSource.superclass.alignElWithMouse.apply(this, arguments);
+        this.proxy.sync();
+    },
+
+    // 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);
+            }
+        }
+    },
+
+    /**
+     * 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
+     */
+    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;
+    },
+
+    /**
+     * 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
+     */
+    beforeDragOut : function(target, e, id){
+        return true;
+    },
+    
+    // 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);
+                }
+            }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;
+    },
+
+    /**
+     * 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
+     */
+    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;
+    },
+
+    /**
+     * 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
+     */
+    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);
+        } 
+    },
+
+    /**
+     * 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
+     */
+    onBeforeDrag : function(data, e){
+        return true;
+    },
+
+    /**
+     * 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
+     */
+    onStartDrag : Roo.emptyFn,
+
+    // private - YUI override
+    startDrag : function(x, y){
+        this.proxy.reset();
+        this.dragging = true;
+        this.proxy.update("");
+        this.onInitDrag(x, y);
+        this.proxy.show();
+    },
+
+    // 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);
+        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}
+     */
+    hideProxy : function(){
+        this.proxy.hide();  
+        this.proxy.reset(true);
+        this.dragging = false;
+    },
+
+    // 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);
+    },
+
+    // private
+    onEndDrag : function(data, e){
+    },
+    
+    // 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..
+     */
+    valid : false,
+    // private
+    isTarget : true,
+
+    // private
+    isNotifyTarget : true,
+    
+    /**
+     * @hide
+     */
+    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
+        );
+    },
+
+    /**
+     * @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
+        );
+    },
+
+    /**
+     * @hide
+     */
+    notifyOut : function(dd, e, data)
+    {
+        this.fireEvent('out', dd, e, data);
+        if(this.overClass){
+            this.el.removeClass(this.overClass);
+        }
+    },
+
+    /**
+     * @hide
+     */
+    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);
+    }
+};
+
+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)
+     */
+
+    /**
+     * 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");
+        }
+        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);
+};
+
+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);
+    },
+
+    /**
+     * 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
+     */
+    onNodeEnter : function(n, dd, e, data){
+        
+    },
+
+    /**
+     * 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;
+    },
+
+    /**
+     * 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){
+        
+    },
+
+    /**
+     * 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;
+    },
+
+    /**
+     * 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
+     */
+    onContainerOver : function(dd, e, data){
+        return this.dropNotAllowed;
+    },
+
+    /**
+     * 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
+     */
+    onContainerDrop : function(dd, e, data){
+        return false;
+    },
+
+    /**
+     * 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
+     */
+    notifyEnter : function(dd, e, data){
+        return this.dropNotAllowed;
+    },
+
+    /**
+     * 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
+     */
+    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);
+            }
+            this.onNodeEnter(n, dd, e, data);
+            this.lastOverNode = n;
+        }
+        return this.onNodeOver(n, dd, e, data);
+    },
+
+    /**
+     * 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
+     */
+    notifyOut : function(dd, e, data){
+        if(this.lastOverNode){
+            this.onNodeOut(this.lastOverNode, dd, e, data);
+            this.lastOverNode = null;
+        }
+    },
+
+    /**
+     * 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
+     */
+    notifyDrop : function(dd, e, data){
+        if(this.lastOverNode){
+            this.onNodeOut(this.lastOverNode, dd, e, data);
+            this.lastOverNode = null;
+        }
+        var n = this.getTargetFromEvent(e);
+        return n ?
+            this.onNodeDrop(n, dd, e, data) :
+            this.onContainerDrop(dd, e, data);
+    },
+
+    // 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
+     */
+    none : function(s){
+        return s;
+    },
+    
+    /**
+     * The regular expression used to strip tags
+     * @type {RegExp}
+     * @property
+     */
+    stripTagsRE : /<\/?[^>]+>/gi,
+    
+    /**
+     * Strips all HTML tags to sort on text only
+     * @param {Mixed} s The value being converted
+     * @return {String} The comparison value
+     */
+    asText : function(s){
+        return String(s).replace(this.stripTagsRE, "");
+    },
+    
+    /**
+     * Strips all HTML tags to sort on text only - Case insensitive
+     * @param {Mixed} s The value being converted
+     * @return {String} The comparison value
+     */
+    asUCText : function(s){
+        return String(s).toUpperCase().replace(this.stripTagsRE, "");
+    },
+    
+    /**
+     * Case insensitive string
+     * @param {Mixed} s The value being converted
+     * @return {String} The comparison value
+     */
+    asUCString : function(s) {
+    	return String(s).toUpperCase();
+    },
+    
+    /**
+     * Date sorting
+     * @param {Mixed} s The value being converted
+     * @return {Number} The comparison value
+     */
+    asDate : function(s) {
+        if(!s){
+            return 0;
+        }
+        if(s instanceof Date){
+            return s.getTime();
+        }
+    	return Date.parse(String(s));
+    },
+    
+    /**
+     * Float sorting
+     * @param {Mixed} s The value being converted
+     * @return {Float} The comparison value
+     */
+    asFloat : function(s) {
+    	var val = parseFloat(String(s).replace(/,/g, ""));
+        if(isNaN(val)) {
+            val = 0;
+        }
+    	return val;
+    },
+    
+    /**
+     * Integer sorting
+     * @param {Mixed} s The value being converted
+     * @return {Number} The comparison value
+     */
+    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">
+ */
+
+/**
+* @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
+ */
+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 = {
+    /**
+     * Readonly flag - true if this record has been modified.
+     * @type Boolean
+     */
+    dirty : false,
+    editing : false,
+    error: null,
+    modified: null,
+
+    // private
+    join : function(store){
+        this.store = store;
+    },
+
+    /**
+     * 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.
+     */
+    set : function(name, value){
+        if(this.data[name] == value){
+            return;
+        }
+        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);
+        }       
+    },
+
+    /**
+     * 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.
+     */
+    get : function(name){
+        return this.data[name]; 
+    },
+
+    // private
+    beginEdit : function(){
+        this.editing = true;
+        this.modified = {}; 
+    },
+
+    // private
+    cancelEdit : function(){
+        this.editing = false;
+        delete this.modified;
+    },
+
+    // private
+    endEdit : function(){
+        this.editing = false;
+        if(this.dirty && this.store){
+            this.store.afterEdit(this);
+        }
+    },
+
+    /**
+     * 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.
+     */
+    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);
+        }
+    },
+
+    /**
+     * 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.
+     */
+    commit : function(){
+        this.dirty = false;
+        delete this.modified;
+        this.editing = false;
+        if(this.store){
+            this.store.afterCommit(this);
+        }
+    },
+
+    // private
+    hasError : function(){
+        return this.error != null;
+    },
+
+    // private
+    clearError : function(){
+        this.error = null;
+    },
+
+    /**
+     * 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);
+    }
+};/*
+ * 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.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(this.reader.onMetaChange){
+            this.reader.onMetaChange = this.onMetaChange.createDelegate(this);
+        }
+    }
+
+    if(this.recordType){
+        this.fields = this.recordType.prototype.fields;
+    }
+    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)
+         */
+        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);
+
+    if(this.inlineData){
+        this.loadData(this.inlineData);
+        delete this.inlineData;
+    }
+};
+
+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);
+        }
+        var index = this.data.length;
+        this.data.addAll(records);
+        this.fireEvent("add", this, records, index);
+    },
+
+    /**
+     * 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);
+    },
+
+    /**
+     * Remove all Records from the Store and fires the clear event.
+     */
+    removeAll : function(){
+        this.data.clear();
+        if(this.pruneModifiedRecords){
+            this.modified = [];
+        }
+        this.fireEvent("clear", this);
+    },
+
+    /**
+     * 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.
+     */
+    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);
+    },
+
+    /**
+     * 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.
+     */
+    indexOf : function(record){
+        return this.data.indexOf(record);
+    },
+
+    /**
+     * 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.
+     */
+    indexOfId : function(id){
+        return this.data.indexOfKey(id);
+    },
+
+    /**
+     * 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.
+     */
+    getById : function(id){
+        return this.data.key(id);
+    },
+
+    /**
+     * 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.
+     */
+    getAt : function(index){
+        return this.data.itemAt(index);
+    },
+
+    /**
+     * 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
+     */
+    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);
+        }
+    },
+
+    /**
+     * 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).
+     */
+    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);
+        }
+        this.fireEvent("load", this, r, options, o);
+        if(options.callback){
+            options.callback.call(options.scope || this, r, options, true);
+        }
+    },
+
+
+    /**
+     * 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);
+    },
+
+    /**
+     * 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;
+    },
+
+    /**
+     * 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;
+    },
+
+    /**
+     * 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>
+     */
+    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);
+            }
+        }
+    },
+
+    /**
+     * 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")
+     */
+    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;
+            }
+        }
+        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;
+            }
+            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();
+    },
+
+    /**
+     * 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.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @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
+ */
+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);/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+/**
+ * @extends Roo.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.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;
+        }
+    }
+
+    // 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;
+    }
+};
+
+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));
+    }
+    
+};/*
+ * 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(){
+    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.
+         */
+        beforeload : 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.
+         */
+        load : 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.
+         */
+        loadexception : true
+    });
+    Roo.data.DataProxy.superclass.constructor.call(this);
+};
+
+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);
+    },
+    
+    // private
+    update : function(params, records){
+        
+    }
+});/*
+ * 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.extend(Roo.data.HttpProxy, Roo.data.DataProxy, {
+    // thse are take from connection...
+    
+    /**
+     * @cfg {String} url (Optional) The default URL to be used for requests to the server. (defaults to undefined)
+     */
+    /**
+     * @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 {Object} defaultHeaders (Optional) An object containing request headers which are added
+     *  to each request made by this object. (defaults to undefined)
+     */
+    /**
+     * @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 {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
+     */
+     /**
+     * @cfg {Boolean} autoAbort (Optional) Whether this request should abort any pending requests. (defaults to false)
+     * @type Boolean
+     */
+  
+
+    /**
+     * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)
+     * @type Boolean
+     */
+    /**
+     * 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.
+     */
+    getConnection : function(){
+        return this.useAjax ? Roo.Ajax : this.conn;
+    },
+
+    /**
+     * 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.
+     */
+    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);
+        }
+    },
+
+    // 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){
+            this.fireEvent("loadexception", this, o, response, e);
+            o.request.callback.call(o.request.scope, null, 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);
+    },
+
+    // private
+    update : function(dataSet){
+
+    },
+
+    // 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">
+ */
+
+/**
+ * @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];
+};
+
+Roo.data.ScriptTagProxy.TRANS_ID = 1000;
+
+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.
+     */
+    timeout : 30000,
+    /**
+     * @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.
+     */
+    callbackParam : "callback",
+    /**
+     *  @cfg {Boolean} nocache (Optional) Defaults to true. Disable cacheing by adding a unique parameter
+     * name to the request.
+     */
+    nocache : true,
+
+    /**
+     * 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.
+     */
+    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());
+            }
+            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);
+
+            if(this.autoAbort !== false){
+                this.abort();
+            }
+
+            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);
+        }
+    },
+
+    // private
+    isLoading : function(){
+        return this.trans ? true : false;
+    },
+
+    /**
+     * Abort the current server request.
+     */
+    abort : function(){
+        if(this.isLoading()){
+            this.destroyTrans(this.trans);
+        }
+    },
+
+    // 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){}
+            };
+        }
+    },
+
+    // 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);
+    },
+
+    // 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">
+ */
+
+/**
+ * @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.
+     * 
+     */
+    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;
+       
+        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);
+        }
+        return this.readRecords(o);
+    },
+
+    // private function a store will implement
+    onMetaChange : function(meta, recordType, o){
+
+    },
+
+    /**
+	 * @ignore
+	 */
+    simpleAccess: function(obj, subsc) {
+    	return obj[subsc];
+    },
+
+	/**
+	 * @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.
+     */
+    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);
+            }
+        }
+
+    	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);
+            }
+            var record = new Record(values, id);
+            record.json = n;
+            records[i] = record;
+        }
+        return {
+            raw : o,
+            success : success,
+            records : records,
+            totalRecords : totalRecords
+        };
+    }
+});/*
+ * 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.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
+ * 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.data.XmlReader = function(meta, recordType){
+    meta = meta || {};
+    Roo.data.XmlReader.superclass.constructor.call(this, meta, recordType||meta.fields);
+};
+Roo.extend(Roo.data.XmlReader, Roo.data.DataReader, {
+    /**
+     * 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.
+     */
+    read : function(response){
+        var doc = response.responseXML;
+        if(!doc) {
+            throw {message: "XmlReader.read: XML Document not available"};
+        }
+        return this.readRecords(doc);
+    },
+
+    /**
+     * 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.
+     */
+    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;
+	    }
+
+	    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">
+ */
+
+/**
+ * @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>
+ * @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}.
+ */
+Roo.data.ArrayReader = function(meta, recordType){
+    Roo.data.ArrayReader.superclass.constructor.call(this, meta, recordType);
+};
+
+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.
+     */
+    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
+	    };
+    }
+});/*
+ * 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.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 {Node} root (optional) The root node
+ */
+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: "/",
+
+    proxyNodeEvent : function(){
+        return this.fireEvent.apply(this, arguments);
+    },
+
+    /**
+     * Returns the root node for this tree.
+     * @return {Node}
+     */
+    getRootNode : function(){
+        return this.root;
+    },
+
+    /**
+     * 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;
+    },
+
+    /**
+     * Gets a node in this tree by its id.
+     * @param {String} id
+     * @return {Node}
+     */
+    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){
+    /**
+     * The attributes supplied for the node. You can use this property to access any custom attributes you supplied.
+     * @type {Object}
+     */
+    this.attributes = attributes || {};
+    this.leaf = this.attributes.leaf;
+    /**
+     * The node id. @type String
+     */
+    this.id = this.attributes.id;
+    if(!this.id){
+        this.id = Roo.id(null, "ynode-");
+        this.attributes.id = this.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;
+                }
+            }
+            return -1;
+        };
+    }
+    /**
+     * The parent node for this node. @type Node
+     */
+    this.parentNode = null;
+    /**
+     * The first direct child node of this node, or null if this node has no child nodes. @type Node
+     */
+    this.firstChild = null;
+    /**
+     * The last direct child node of this node, or null if this node has no child nodes. @type Node
+     */
+    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;
+    /**
+     * The node immediately following this node in the tree, or null if there is no sibling node. @type Node
+     */
+    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;
+    },
+
+    /**
+     * Returns true if this node is a leaf
+     * @return {Boolean}
+     */
+    isLeaf : function(){
+        return this.leaf === true;
+    },
+
+    // private
+    setFirstChild : function(node){
+        this.firstChild = node;
+    },
+
+    //private
+    setLastChild : function(node){
+        this.lastChild = node;
+    },
+
+
+    /**
+     * Returns true if this node is the last child of its parent
+     * @return {Boolean}
+     */
+    isLast : function(){
+       return (!this.parentNode ? true : this.parentNode.lastChild == this);
+    },
+
+    /**
+     * Returns true if this node is the first child of its parent
+     * @return {Boolean}
+     */
+    isFirst : function(){
+       return (!this.parentNode ? true : this.parentNode.firstChild == this);
+    },
+
+    hasChildNodes : function(){
+        return !this.isLeaf() && this.childNodes.length > 0;
+    },
+
+    /**
+     * 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
+     */
+    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;
+        }
+    },
+
+    /**
+     * Removes a child node from this node.
+     * @param {Node} node The node to remove
+     * @return {Node} The removed node
+     */
+    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;
+    },
+
+    /**
+     * 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
+     */
+    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;
+    },
+
+    /**
+     * Returns the child node at the specified index.
+     * @param {Number} index
+     * @return {Node}
+     */
+    item : function(index){
+        return this.childNodes[index];
+    },
+
+    /**
+     * 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
+     */
+    replaceChild : function(newChild, oldChild){
+        this.insertBefore(newChild, oldChild);
+        this.removeChild(oldChild);
+        return oldChild;
+    },
+
+    /**
+     * Returns the index of a child node
+     * @param {Node} node
+     * @return {Number} The index of the node or -1 if it was not found
+     */
+    indexOf : function(child){
+        return this.childNodes.indexOf(child);
+    },
+
+    /**
+     * Returns the tree this node is in.
+     * @return {Tree}
+     */
+    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;
+            }
+        }
+        return this.ownerTree;
+    },
+
+    /**
+     * Returns depth of this node (the root node has a depth of 0)
+     * @return {Number}
+     */
+    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);
+            }
+        }
+    },
+
+    /**
+     * 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;
+        }
+        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;
+            }
+            p = p.parentNode;
+        }
+    },
+
+    /**
+     * 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);
+            }
+        }
+    },
+
+    /**
+     * 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;
+        	}
+        }
+    },
+
+    /**
+     * 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;
+    },
+
+    /**
+     * 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;
+    },
+
+    /**
+     * 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);
+                }
+            }
+        }
+    },
+
+    /**
+     * 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);
+    },
+
+    /**
+     * 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;
+    },
+
+    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.
+ */
+
+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
+        });
+    }else{
+        this.shadowOffset = 0;
+    }
+    this.useShim = config.shim !== false && Roo.useShims;
+    this.useDisplay = config.useDisplay;
+    this.hide();
+};
+
+var supr = Roo.Element.prototype;
+
+// shims are shared among layer to keep from having 100 iframes
+var shims = [];
+
+Roo.extend(Roo.Layer, Roo.Element, {
+
+    getZIndex : function(){
+        return this.zindex || parseInt(this.getStyle("z-index"), 10) || 11000;
+    },
+
+    getShim : function(){
+        if(!this.useShim){
+            return null;
+        }
+        if(this.shim){
+            return this.shim;
+        }
+        var shim = shims.shift();
+        if(!shim){
+            shim = this.createShim();
+            shim.enableDisplayMode('block');
+            shim.dom.style.display = 'none';
+            shim.dom.style.visibility = 'visible';
+        }
+        var pn = this.dom.parentNode;
+        if(shim.dom.parentNode != pn){
+            pn.insertBefore(shim.dom, this.dom);
+        }
+        shim.setStyle('z-index', this.getZIndex()-2);
+        this.shim = shim;
+        return shim;
+    },
+
+    hideShim : function(){
+        if(this.shim){
+            this.shim.setDisplayed(false);
+            shims.push(this.shim);
+            delete this.shim;
+        }
+    },
+
+    disableShadow : function(){
+        if(this.shadow){
+            this.shadowDisabled = true;
+            this.shadow.hide();
+            this.lastShadowOffset = this.shadowOffset;
+            this.shadowOffset = 0;
+        }
+    },
+
+    enableShadow : function(show){
+        if(this.shadow){
+            this.shadowDisabled = false;
+            this.shadowOffset = this.lastShadowOffset;
+            delete this.lastShadowOffset;
+            if(show){
+                this.sync(true);
+            }
+        }
+    },
+
+    // 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();
+
+            var l = this.getLeft(true),
+                t = this.getTop(true);
+
+            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);
+            }
+            
+        }
+    },
+
+    // private
+    destroy : function(){
+        this.hideShim();
+        if(this.shadow){
+            this.shadow.hide();
+        }
+        this.removeAllListeners();
+        var pn = this.dom.parentNode;
+        if(pn){
+            pn.removeChild(this.dom);
+        }
+        Roo.Element.uncache(this.id);
+    },
+
+    remove : function(){
+        this.destroy();
+    },
+
+    // private
+    beginUpdate : function(){
+        this.updating = true;
+    },
+
+    // private
+    endUpdate : function(){
+        this.updating = false;
+        this.sync(true);
+    },
+
+    // private
+    hideUnders : function(negOffset){
+        if(this.shadow){
+            this.shadow.hide();
+        }
+        this.hideShim();
+    },
+
+    // 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;    
+    },
+
+    // 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]);
+        }
+    },
+
+    // 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();
+            }
+        }
+    },
+
+    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());
+    },
+
+    // private
+    beforeAction : function(){
+        if(!this.updating && this.shadow){
+            this.shadow.hide();
+        }
+    },
+
+    // overridden Element method
+    setLeft : function(left){
+        this.storeLeftTop(left, this.getTop(true));
+        supr.setLeft.apply(this, arguments);
+        this.sync();
+    },
+
+    setTop : function(top){
+        this.storeLeftTop(this.getLeft(true), top);
+        supr.setTop.apply(this, arguments);
+        this.sync();
+    },
+
+    setLeftTop : function(left, top){
+        this.storeLeftTop(left, top);
+        supr.setLeftTop.apply(this, arguments);
+        this.sync();
+    },
+
+    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();
+        }
+    },
+
+    // private
+    createCB : function(c){
+        var el = this;
+        return function(){
+            el.constrainXY();
+            el.sync(true);
+            if(c){
+                c();
+            }
+        };
+    },
+
+    // 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();
+        }
+    },
+
+    // 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();
+        }
+    },
+
+    // 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();
+        }
+    },
+
+    // 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);
+        }
+    }
+});
+})();/*
+ * 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.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.Shadow = function(config){
+    Roo.apply(this, config);
+    if(typeof this.mode != "string"){
+        this.mode = this.defaultMode;
+    }
+    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;
+    };
+
+    this.adjusts = a;
+};
+
+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)
+     */
+    /**
+     * @cfg {String} offset
+     * The number of pixels to offset the shadow from the element (defaults to 4)
+     */
+    offset: 4,
+
+    // private
+    defaultMode: "drop",
+
+    /**
+     * Displays the shadow under the target element
+     * @param {String/HTMLElement/Element} targetEl The id or element under which the shadow should display
+     */
+    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)+")";
+        }
+        this.realign(
+            target.getLeft(true),
+            target.getTop(true),
+            target.getWidth(),
+            target.getHeight()
+        );
+        this.el.dom.style.display = "block";
+    },
+
+    /**
+     * Returns true if the shadow is visible, else false
+     */
+    isVisible : function(){
+        return this.el ? true : false;  
+    },
+
+    /**
+     * 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";
+            }
+        }
+    },
+
+    /**
+     * Hides this shadow
+     */
+    hide : function(){
+        if(this.el){
+            this.el.dom.style.display = "none";
+            Roo.Shadow.Pool.push(this.el);
+            delete this.el;
+        }
+    },
+
+    /**
+     * Adjust the z-index of this shadow
+     * @param {Number} zindex The new z-index
+     */
+    setZIndex : function(z){
+        this.zIndex = z;
+        if(this.el){
+            this.el.setStyle("z-index", z);
+        }
+    }
+};
+
+// 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;
+        },
+
+        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">
+ */
+
+
+/**
+ * @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);
+
+    /**
+     * @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
+     */
+    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 = {};
+    
+    /**
+     * @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.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);
+    },
+    
+    /** 
+     * @private Called after the drag operation by the DDProxy
+     */
+    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);
+            }
+        }
+    },
+    
+    /**
+     * Get the adapter this SplitBar uses
+     * @return The adapter object
+     */
+    getAdapter : function(){
+        return this.adapter;
+    },
+    
+    /**
+     * Set the adapter this SplitBar uses
+     * @param {Object} adapter A SplitBar adapter object
+     */
+    setAdapter : function(adapter){
+        this.adapter = adapter;
+        this.adapter.init(this);
+    },
+    
+    /**
+     * Gets the minimum size for the resizing element
+     * @return {Number} The minimum size
+     */
+    getMinimumSize : function(){
+        return this.minSize;
+    },
+    
+    /**
+     * Sets the minimum size for the resizing element
+     * @param {Number} minSize The minimum size
+     */
+    setMinimumSize : function(minSize){
+        this.minSize = minSize;
+    },
+    
+    /**
+     * Gets the maximum size for the resizing element
+     * @return {Number} The maximum size
+     */
+    getMaximumSize : function(){
+        return this.maxSize;
+    },
+    
+    /**
+     * Sets the maximum size for the resizing element
+     * @param {Number} maxSize The maximum size
+     */
+    setMaximumSize : function(maxSize){
+        this.maxSize = maxSize;
+    },
+    
+    /**
+     * Sets the initialize size for the resizing element
+     * @param {Number} size The initial size
+     */
+    setCurrentSize : function(size){
+        var oldAnimate = this.animate;
+        this.animate = false;
+        this.adapter.setElementSize(this, size);
+        this.animate = oldAnimate;
+    },
+    
+    /**
+     * Destroy this splitbar. 
+     * @param {Boolean} removeEl True to remove the element
+     */
+    destroy : function(removeEl){
+        if(this.shim){
+            this.shim.remove();
+        }
+        this.dd.unreg();
+        this.proxy.parentNode.removeChild(this.proxy);
+        if(removeEl){
+            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.
+ */
+Roo.SplitBar.BasicLayoutAdapter = function(){
+};
+
+Roo.SplitBar.BasicLayoutAdapter.prototype = {
+    // do nothing for now
+    init : function(s){
+    
+    },
+    /**
+     * Called before drag operations to get the current size of the resizing element. 
+     * @param {Roo.SplitBar} s The SplitBar using this adapter
+     */
+     getElementSize : function(s){
+        if(s.orientation == Roo.SplitBar.HORIZONTAL){
+            return s.resizingEl.getWidth();
+        }else{
+            return s.resizingEl.getHeight();
+        }
+    },
+    
+    /**
+     * 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
+     */
+    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');
+            }
+        }
+    }
+};
+
+/** 
+ *@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);
+};
+
+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();
+    
+    /** @private */
+    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
+         */
+            "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
+          
+          
+        });
+
+
+
+    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);
+    }
+    
+    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.extend(Roo.View, Roo.util.Observable, {
+    
+     /**
+     * @cfg {Roo.data.Store} store Data store to load data from.
+     */
+    store : false,
+    
+    /**
+     * @cfg {String|Roo.Element} el The container element.
+     */
+    el : '',
+    
+    /**
+     * @cfg {String|Roo.Template} tpl The template used by this View 
+     */
+    tpl : false,
+    /**
+     * @cfg {String} dataName the named area of the template to use as the data area
+     *                          Works with domtemplates roo-name="name"
+     */
+    dataName: false,
+    /**
+     * @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.
+     */
+    emptyText : "",
+    
+    /**
+     * @cfg {String} text to display on mask (default Loading)
+     */
+    mask : false,
+    /**
+     * @cfg {Boolean} multiSelect Allow multiple selection
+     */
+    multiSelect : false,
+    /**
+     * @cfg {Boolean} singleSelect Allow single selection
+     */
+    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;
+    },
+    
+    
+
+    /**
+     * 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 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);
+    },
+    
+
+    /**
+     * 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;
+    },
+
+    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);
+    },
+
+    /**
+     * Refresh an individual node.
+     * @param {Number} index
+     */
+    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;
+        }
+    },
+
+    /**
+     * Changes the data store this view uses and refresh the view.
+     * @param {Store} store
+     */
+    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();
+        }
+    },
+    /**
+     * onbeforeLoad - masks the loading area.
+     *
+     */
+    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();
+    },
+    
+
+    /**
+     * 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
+     */
+    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();
+        }
+    },
+
+    /** @ignore */
+    onContextMenu : function(e){
+        var item = this.findItemFromChild(e.getTarget());
+        if(item){
+            this.fireEvent("contextmenu", this, this.indexOf(item), item, e);
+        }
+    },
+
+    /** @ignore */
+    onDblClick : function(e){
+        var item = this.findItemFromChild(e.getTarget());
+        if(item){
+            this.fireEvent("dblclick", this, this.indexOf(item), item, e);
+        }
+    },
+
+    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;
+        }
+        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;
+    },
+
+    /**
+     * 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
+     */
+    getSelectedNodes : function(){
+        return this.selections;
+    },
+
+    /**
+     * Get the indexes of the selected nodes.
+     * @return {Array}
+     */
+    getSelectedIndexes : function(){
+        var indexes = [], s = this.selections;
+        for(var i = 0, len = s.length; i < len; i++){
+            indexes.push(s[i].nodeIndex);
+        }
+        return indexes;
+    },
+
+    /**
+     * 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);
+            }
+        }
+    },
+
+    /**
+     * 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;
+    },
+
+    /**
+     * 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
+     */
+    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
+     */
+    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];
+        }
+        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]);
+            }
+        } else{
+            for(var i = start; i >= end; i--){
+                nodes.push(ns[i]);
+            }
+        }
+        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.
+ *
+ * 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){
+    
+    
+    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.JsonView, Roo.View, {
+    /**
+     * @type {String} The root property in the loaded JSON object that contains the data
+     */
+    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);
+        }
+        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.
+     */
+    load : function(){
+        var um = this.el.getUpdateManager();
+        um.update.apply(um, arguments);
+    },
+
+    render : function(el, response){
+        this.clearSelections();
+        this.el.update("");
+        var o;
+        try{
+            o = Roo.util.JSON.decode(response.responseText);
+            if(this.jsonRoot){
+                
+                o = o[this.jsonRoot];
+            }
+        } catch(e){
+        }
+        /**
+         * The current JSON data or null
+         */
+        this.jsonData = o;
+        this.beforeRender();
+        this.refresh();
+    },
+
+/**
+ * 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:
+ * 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.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>
+ * @constructor
+ * Create a new ColorPalette
+ * @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, {
+    /**
+     * @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",
+
+    /**
+     * @cfg {Boolean} allowReselect If set to true then reselecting a color that is already selected fires the selection event
+     */
+    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");
+            }
+            el.child("a.color-"+color).addClass("x-color-palette-sel");
+            this.value = color;
+            this.fireEvent("select", this, color);
+        }
+    }
+});/*
+ * 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.DatePicker
+ * @extends Roo.Component
+ * Simple date picker 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);
+    }
+    // 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, {
+    /**
+     * @cfg {String} todayText
+     * The text to display on the button that selects the current date (defaults to "Today")
+     */
+    todayText : "Today",
+    /**
+     * @cfg {String} okText
+     * The text to display on the ok button
+     */
+    okText : "&#160;OK&#160;", // &#160; to give the user extra clicking room
+    /**
+     * @cfg {String} cancelText
+     * The text to display on the cancel button
+     */
+    cancelText : "Cancel",
+    /**
+     * @cfg {String} todayTip
+     * The tooltip to display for the button that selects the current date (defaults to "{current date} (Spacebar)")
+     */
+    todayTip : "{0} (Spacebar)",
+    /**
+     * @cfg {Date} minDate
+     * Minimum allowable date (JavaScript date object, defaults to null)
+     */
+    minDate : null,
+    /**
+     * @cfg {Date} maxDate
+     * Maximum allowable date (JavaScript date object, defaults to null)
+     */
+    maxDate : null,
+    /**
+     * @cfg {String} minText
+     * The error text to display if the minDate validation fails (defaults to "This date is before the minimum date")
+     */
+    minText : "This date is before the minimum date",
+    /**
+     * @cfg {String} maxText
+     * The error text to display if the maxDate validation fails (defaults to "This date is after the maximum date")
+     */
+    maxText : "This date is after the maximum date",
+    /**
+     * @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 {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 "")
+     */
+    disabledDaysText : "",
+    /**
+     * @cfg {RegExp} disabledDatesRE
+     * JavaScript regular expression used to disable a pattern of dates (defaults to null)
+     */
+    disabledDatesRE : null,
+    /**
+     * @cfg {String} disabledDatesText
+     * The tooltip text to display when the date falls on a disabled date (defaults to "")
+     */
+    disabledDatesText : "",
+    /**
+     * @cfg {Boolean} constrainToViewport
+     * True to constrain the date picker to the viewport (defaults to true)
+     */
+    constrainToViewport : true,
+    /**
+     * @cfg {Array} monthNames
+     * An array of textual month names which can be overriden for localization support (defaults to Date.monthNames)
+     */
+    monthNames : Date.monthNames,
+    /**
+     * @cfg {Array} dayNames
+     * An array of textual day names which can be overriden for localization support (defaults to Date.dayNames)
+     */
+    dayNames : Date.dayNames,
+    /**
+     * @cfg {String} nextText
+     * The next month navigation button tooltip (defaults to 'Next Month (Control+Right)')
+     */
+    nextText: 'Next Month (Control+Right)',
+    /**
+     * @cfg {String} prevText
+     * The previous month navigation button tooltip (defaults to 'Previous Month (Control+Left)')
+     */
+    prevText: 'Previous Month (Control+Left)',
+    /**
+     * @cfg {String} monthYearText
+     * The header month selector tooltip (defaults to 'Choose a month (Control+Up/Down to move years)')
+     */
+    monthYearText: 'Choose a month (Control+Up/Down to move years)',
+    /**
+     * @cfg {Number} startDay
+     * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
+     */
+    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);
+        }
+    },
+
+    /**
+     * Gets the current selected value of the date field
+     * @return {Date} The selected date
+     */
+    getValue : function(){
+        return this.value;
+    },
+
+    // private
+    focus : function(){
+        if(this.el){
+            this.update(this.activeDate);
+        }
+    },
+
+    // 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);
+
+        this.el = Roo.get(el);
+        this.eventEl = Roo.get(el.firstChild);
+
+        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);
+
+        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));
+            },
+
+            "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
+        });
+
+        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.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
+        });
+        
+        //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.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>'
+                );
+            }
+            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);
+                }
+            });
+        }
+    },
+
+    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});
+    },
+
+    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');
+        }
+    },
+
+    updateMPMonth : function(sm){
+        this.mpMonths.each(function(m, a, i){
+            m[m.dom.xmonth == sm ? 'addClass' : 'removeClass']('x-date-mp-sel');
+        });
+    },
+
+    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();
+        }
+        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();
+        }
+    },
+
+    hideMonthPicker : function(disableAnim){
+        if(this.monthPicker){
+            if(disableAnim === true){
+                this.monthPicker.hide();
+            }else{
+                this.monthPicker.slideOut('t', {duration:.2});
+            }
+        }
+    },
+
+    // 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();
+        }
+    },
+
+    // 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);
+        }
+    },
+
+    // private
+    selectToday : function(){
+        this.setValue(new Date().clearTime());
+        this.fireEvent("select", this, this.value);
+    },
+
+    // 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]);
+            }
+        }
+        
+        
+    }
+});        /*
+ * 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.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.");
+
+// 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 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.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.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.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
+     */
+    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;
+    },
+
+    /**
+     * 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];
+    },
+
+    /**
+     * 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();
+        }
+    },
+
+    /**
+     * "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();
+        }
+    },
+
+    /**
+     * 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();
+        }
+    },
+
+    /**
+     * 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();
+            }
+        }
+        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;
+            }
+        }
+        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();
+        }
+    },
+
+    /**
+     * 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();
+    },
+
+    /**
+     * 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();
+            }
+            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;
+    },
+
+    onResize : function(){
+        if(this.monitorResize){
+            this.autoSizeTabs();
+        }
+    },
+
+    /**
+     * Disables tab resizing while tabs are being added (if {@link #resizeTabs} is false this does nothing)
+     */
+    beginUpdate : function(){
+        this.updating = true;
+    },
+
+    /**
+     * Stops an update and resizes the tabs (if {@link #resizeTabs} is false this does nothing)
+     */
+    endUpdate : function(){
+        this.updating = false;
+        this.autoSizeTabs();
+    },
+
+    /**
+     * 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);
+            }
+        }
+    },
+
+    /**
+     * Returns the number of tabs in this TabPanel.
+     * @return {Number}
+     */
+     getCount : function(){
+         return this.items.length;
+     },
+
+    /**
+     * 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);
+            }
+        }
+    },
+
+    /**
+     * 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();
+        }
+    }
+});
+
+/**
+ * @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();
+
+    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 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;
+
+    Roo.TabPanelItem.superclass.constructor.call(this);
+};
+
+Roo.extend(Roo.TabPanelItem, Roo.util.Observable, {
+    purgeListeners : function(){
+       Roo.util.Observable.prototype.purgeListeners.call(this);
+       this.el.removeAllListeners();
+    },
+    /**
+     * 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();
+        }
+        this.fireEvent("activate", this.tabPanel, this);
+    },
+
+    /**
+     * Returns true if this tab is the active tab.
+     * @return {Boolean}
+     */
+    isActive : function(){
+        return this.tabPanel.getActiveTab() == this;
+    },
+
+    /**
+     * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
+     */
+    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();
+    },
+
+    /**
+     * Set the tooltip for the tab.
+     * @param {String} tooltip The tab's tooltip
+     */
+    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);
+    },
+
+    /**
+     * 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" : "");
+    },
+
+    /**
+     * Returns true if this tab is "hidden"
+     * @return {Boolean}
+     */
+    isHidden : function(){
+        return this.hidden;
+    },
+
+    /**
+     * Returns the text for this tab
+     * @return {String}
+     */
+    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
+     */
+    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.
+     */
+    activate : function(){
+        this.tabPanel.activate(this.id);
+    },
+
+    /**
+     * Disables this TabPanelItem -- this does nothing if this is the active TabPanelItem.
+     */
+    disable : function(){
+        if(this.tabPanel.active != this){
+            this.disabled = true;
+            this.pnode.addClass("disabled");
+        }
+    },
+
+    /**
+     * Enables this TabPanelItem if it was previously disabled.
+     */
+    enable : function(){
+        this.disabled = false;
+        this.pnode.removeClass("disabled");
+    },
+
+    /**
+     * Sets the content for this TabPanelItem.
+     * @param {String} content The content
+     * @param {Boolean} loadScripts true to look for and load scripts
+     */
+    setContent : function(content, loadScripts){
+        this.bodyEl.update(content, loadScripts);
+    },
+
+    /**
+     * Gets the {@link Roo.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
+     * @return {Roo.UpdateManager} The UpdateManager
+     */
+    getUpdateManager : function(){
+        return this.bodyEl.getUpdateManager();
+    },
+
+    /**
+     * 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
+     */
+    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();
+    },
+
+    /** @private */
+    _handleRefresh : function(url, params, loadOnce){
+        if(!loadOnce || !this.loaded){
+            var updater = this.bodyEl.getUpdateManager();
+            updater.update(url, params, this._setLoaded.createDelegate(this));
+        }
+    },
+
+    /**
+     *   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.
+     */
+    refresh : function(){
+        if(this.refreshDelegate){
+           this.loaded = false;
+           this.refreshDelegate();
+        }
+    },
+
+    /** @private */
+    _setLoaded : function(){
+        this.loaded = true;
+    },
+
+    /** @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"
+});
+
+/** @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};
+    }
+};/*
+ * 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, {
+    /**
+     * 
+     */
+    
+    /**
+     * 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,
+
+    /**
+     * @cfg {Number} tabIndex 
+     * The DOM tabIndex for this button (defaults to undefined)
+     */
+    tabIndex : undefined,
+
+    /**
+     * @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?",
+
+    /**
+     * @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',
+
+    // private
+    menuClassTarget: 'tr',
+
+    /**
+     * @cfg {String} clickEvent
+     * The type of event to map to the button's event handler (defaults to 'click')
+     */
+    clickEvent : 'click',
+
+    /**
+     * @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',
+
+    /**
+     * @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;
+            }
+            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.repeat){
+            var repeater = new Roo.util.ClickRepeater(btn,
+                typeof this.repeat == "object" ? this.repeat : {}
+            );
+            repeater.on("click", this.onClick,  this);
+        }
+        
+        this.fireEvent('render', this);
+        
+    },
+    /**
+     * Returns the button's underlying element
+     * @return {Roo.Element} The element
+     */
+    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();
+                }
+            }
+        }
+    },
+
+    /**
+     * 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();
+    },
+    
+    /**
+     * Gets the text for this button
+     * @return {String} The button text
+     */
+    getText : function(){
+        return this.text;  
+    },
+    
+    /**
+     * Show this button
+     */
+    show: function(){
+        this.hidden = false;
+        if(this.el){
+            this[this.hideParent? 'parentEl' : 'el'].setStyle("display", "");
+        }
+    },
+    
+    /**
+     * Hide this button
+     */
+    hide: function(){
+        this.hidden = true;
+        if(this.el){
+            this[this.hideParent? 'parentEl' : 'el'].setStyle("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 a state it passed, it becomes the pressed state otherwise the current state is toggled.
+     * @param {Boolean} state (optional) Force a particular state
+     */
+    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);
+            }
+        }
+    },
+    
+    /**
+     * Focus the button
+     */
+    focus : function(){
+        this.el.child('button:first').focus();
+    },
+    
+    /**
+     * Disable this button
+     */
+    disable : function(){
+        if(this.el){
+            this.el.addClass("x-btn-disabled");
+        }
+        this.disabled = true;
+    },
+    
+    /**
+     * Enable this button
+     */
+    enable : function(){
+        if(this.el){
+            this.el.removeClass("x-btn-disabled");
+        }
+        this.disabled = false;
+    },
+
+    /**
+     * Convenience function for boolean enable/disable
+     * @param {Boolean} enabled True to enable, false to disable
+     */
+    setDisabled : function(v){
+        this[v !== true ? "enable" : "disable"]();
+    },
+
+    // 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);
+            }
+        }
+    },
+    // private
+    onMouseOver : function(e){
+        if(!this.disabled){
+            this.el.addClass("x-btn-over");
+            this.fireEvent('mouseover', this, e);
+        }
+    },
+    // private
+    onMouseOut : function(e){
+        if(!e.within(this.el,  true)){
+            this.el.removeClass("x-btn-over");
+            this.fireEvent('mouseout', this, e);
+        }
+    },
+    // private
+    onFocus : function(e){
+        if(!this.disabled){
+            this.el.addClass("x-btn-focus");
+        }
+    },
+    // private
+    onBlur : function(e){
+        this.el.removeClass("x-btn-focus");
+    },
+    // private
+    onMouseDown : function(e){
+        if(!this.disabled && e.button == 0){
+            this.el.addClass("x-btn-click");
+            Roo.get(document).on('mouseup', this.onMouseUp, this);
+        }
+    },
+    // 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");
+    }   
+});
+
+// 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
+     */
+    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());
+        } 
+    },
+    /**
+     * 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;  
+    },
+    
+    /**
+     * Focus the button
+     */
+    focus : function(){
+        if(this.el){
+            this.el.child("button:first").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);
+                }
+            }else{
+                this.fireEvent("click", this, e);
+                if(this.handler){
+                    this.handler.call(this.scope || this, this, e);
+                }
+            }
+        }
+    },
+    // private
+    onMouseDown : function(e){
+        if(!this.disabled){
+            Roo.fly(e.getTarget("table")).addClass("x-btn-click");
+        }
+    },
+    // 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);
+    
+};
+
+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);
+        }
+        // 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;
+        }
+    },
+
+    /**
+     * 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.
+     */
+    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;
+        
+    },
+    
+    /**
+     * Add an Xtype element
+     * @param {Object} xtype Xtype Object
+     * @return {Object} created Object
+     */
+    addxtype : function(e){
+        return this.add(e);  
+    },
+    
+    /**
+     * Returns the Element for this toolbar.
+     * @return {Roo.Element}
+     */
+    getEl : function(){
+        return this.el;  
+    },
+    
+    /**
+     * Adds a separator
+     * @return {Roo.Toolbar.Item} The separator item
+     */
+    addSeparator : function(){
+        return this.addItem(new Roo.Toolbar.Separator());
+    },
+
+    /**
+     * Adds a spacer element
+     * @return {Roo.Toolbar.Spacer} The spacer item
+     */
+    addSpacer : function(){
+        return this.addItem(new Roo.Toolbar.Spacer());
+    },
+
+    /**
+     * Adds a fill element that forces subsequent additions to the right side of the toolbar
+     * @return {Roo.Toolbar.Fill} The fill item
+     */
+    addFill : function(){
+        return this.addItem(new Roo.Toolbar.Fill());
+    },
+
+    /**
+     * 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
+     */
+    addElement : function(el){
+        return this.addItem(new Roo.Toolbar.Item(el));
+    },
+    /**
+     * 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
+     */
+    addItem : function(item){
+        var td = this.nextBlock();
+        item.render(td);
+        this.items.add(item);
+        return item;
+    },
+    
+    /**
+     * 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}
+     */
+    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;
+    },
+    
+    /**
+     * Adds text to the toolbar
+     * @param {String} text The text to add
+     * @return {Roo.Toolbar.Item} The element's item
+     */
+    addText : function(text){
+        return this.addItem(new Roo.Toolbar.TextItem(text));
+    },
+    
+    /**
+     * 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}
+     */
+    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;
+    },
+    
+    /**
+     * 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;
+    },
+
+    /**
+     * 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));
+            });
+
+        }
+        
+        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
+    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 = {
+    
+    /**
+     * 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();
+        }
+    },
+    
+    /**
+     * 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.
+     */
+    enable : function(){
+        Roo.fly(this.td).removeClass("x-item-disabled");
+        this.disabled = false;
+        this.el.disabled = false;
+    }
+});
+
+
+/**
+ * @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
+});
+
+/**
+ * @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
+});
+
+/**
+ * @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);
+    }
+});
+
+/**
+ * @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;
+    }
+    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
+});
+
+/**
+ * @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";
+    },
+
+    /**
+     * Disables this item
+     */
+    disable : function(){
+        Roo.fly(this.td).addClass("x-item-disabled");
+        this.disabled = true;
+    },
+
+    /**
+     * Enables this item
+     */
+    enable : function(){
+        Roo.fly(this.td).removeClass("x-item-disabled");
+        this.disabled = false;
+    }
+});
+// backwards compat
+Roo.ToolbarButton = Roo.Toolbar.Button;
+
+/**
+ * @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";
+    }
+});
+
+// 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
+ * 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);
+    
+};
+
+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",
+
+    // 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'});
+        }
+    },
+
+    // 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);
+        }
+    },
+
+    // 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();
+    },
+
+    // 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)
+        };
+    },
+
+    // private
+    onLoadError : function(){
+        this.loading.enable();
+    },
+
+    // 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(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();
+        }
+    },
+
+    // private
+    beforeLoad : function(){
+        if(this.loading){
+            this.loading.disable();
+        }
+    },
+
+    // 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;
+        }
+    },
+
+    /**
+     * 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;
+    },
+
+    /**
+     * 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">
+ */
+
+/**
+ * @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
+});
+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');
+
+    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.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;
+    }
+
+    this.activeHandle = null;
+
+    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 beforeresize
+         * Fired before resize is allowed. Set enabled to false to cancel resize.
+         * @param {Roo.Resizable} this
+         * @param {Roo.EventObject} e The mousedown event
+         */
+        "beforeresize" : 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
+         */
+        "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
+    });
+
+    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,
+
+        /**
+         * @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,
+
+
+    /**
+     * 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();
+
+            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');
+            }
+        }
+    },
+
+    // private
+    onMouseDown : function(handle, e){
+        if(this.enabled){
+            e.stopEvent();
+            this.activeHandle = handle;
+            this.startSizing(e, handle);
+        }
+    },
+
+    // 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);
+            }
+        }
+    },
+
+    // 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);
+    },
+
+    // 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;
+    },
+
+    // private
+    constrain : function(v, diff, m, mx){
+        if(v - diff < m){
+            diff = v - m;
+        }else if(v - diff > mx){
+            diff = mx - v;
+        }
+        return diff;
+    },
+
+    // private
+    onMouseMove : function(e){
+        
+        if(this.enabled){
+            try{// try catch so if something goes wrong the user doesn't get hung
+
+            if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {
+            	return;
+            }
+
+            //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;
+
+            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]));
+
+            var pos = this.activeHandle.position;
+
+            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 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;
+            }
+
+            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;
+
+                }
+            }
+            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);
+    },
+
+    // private
+    handleOver : function(){
+        if(this.enabled){
+            this.el.addClass("x-resizable-over");
+        }
+    },
+
+    // private
+    handleOut : function(){
+        if(!this.resizing){
+            this.el.removeClass("x-resizable-over");
+        }
+    },
+
+    /**
+     * Returns the element this component is bound to.
+     * @return {Roo.Element}
+     */
+    getEl : function(){
+        return this.el;
+    },
+
+    /**
+     * Returns the resizeChild element (or null).
+     * @return {Roo.Element}
+     */
+    getResizeChild : function(){
+        return this.resizeChild;
+    },
+    groupHandler : function()
+    {
+        
+    },
+    /**
+     * 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
+     */
+    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();
+        }
+    }
+});
+
+// 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);
+    }
+};
+
+// private
+Roo.Resizable.Handle.prototype = {
+    afterResize : function(rz){
+        Roo.log('after?');
+        // do nothing
+    },
+    // private
+    onMouseDown : function(e){
+        this.rz.onMouseDown(this, e);
+    },
+    // 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, {
+    /**
+     * @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,
+
+    // 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);
+    
+    },
+
+    /**
+     * 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.
+     */
+    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();
+    },
+
+    /**
+     * Sets the height and width of this editor.
+     * @param {Number} width The new width
+     * @param {Number} height The new height
+     */
+    setSize : function(w, h){
+        this.field.setSize(w, h);
+        if(this.el){
+            this.el.sync();
+        }
+    },
+
+    /**
+     * Realigns the editor to the bound field based on the current alignment config value.
+     */
+    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);
+        }
+    },
+
+    // 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();
+        }
+    },
+
+    /**
+     * 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)
+     */
+    cancelEdit : function(remainVisible){
+        if(this.editing){
+            this.setValue(this.startValue);
+            if(remainVisible !== true){
+                this.hide();
+            }
+        }
+    },
+
+    // private
+    onBlur : function(){
+        if(this.allowBlur !== true && this.editing){
+            this.completeEdit();
+        }
+    },
+
+    // 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();
+        }
+    },
+
+    /**
+     * Sets the data value of the editor
+     * @param {Mixed} value Any valid value supported by the underlying field
+     */
+    setValue : function(v){
+        this.field.setValue(v);
+    },
+
+    /**
+     * 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.
+ *
+ * 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");
+
+
+    if(this.autoScroll !== false && !this.autoTabs){
+        this.body.setStyle("overflow", "auto");
+    }
+
+    this.toolbox = this.el.createChild({cls: "x-dlg-toolbox"});
+
+    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);
+    }
+    
+    
+    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,
+
+    /**
+     * Sets the dialog title text
+     * @param {String} text The title text to display
+     * @return {Roo.BasicDialog} this
+     */
+    setTitle : function(text){
+        this.header.update(text);
+        return this;
+    },
+
+    // private
+    closeClick : function(){
+        this.hide();
+    },
+
+    // private
+    collapseClick : function(){
+        this[this.collapsed ? "expand" : "collapse"]();
+    },
+
+    /**
+     * Collapses the dialog to its minimized state (only the title bar is visible).
+     * Equivalent to the user clicking the collapse dialog button.
+     */
+    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());
+        }
+    },
+
+    /**
+     * Expands a collapsed dialog back to its normal state.  Equivalent to the user
+     * clicking the expand dialog button.
+     */
+    expand : function(){
+        if(this.collapsed){
+            this.collapsed = false;
+            this.el.removeClass("x-dlg-collapsed");
+            this.resizeTo(this.el.getWidth(), this.restoreHeight);
+        }
+    },
+
+    /**
+     * 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);
+        }
+        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);
+    },
+
+    // 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);
+        }
+    },
+
+    /**
+     * Resizes the dialog.
+     * @param {Number} width
+     * @param {Number} height
+     * @return {Roo.BasicDialog} this
+     */
+    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;
+    },
+
+
+    /**
+     * Resizes the dialog to fit the specified content size.
+     * @param {Number} width
+     * @param {Number} height
+     * @return {Roo.BasicDialog} this
+     */
+    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;
+    },
+
+    /**
+     * 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
+     */
+    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;
+    },
+
+    /**
+     * 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
+     */
+    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;
+    },
+
+    /**
+     * 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
+     */
+    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);
+            }
+        }
+        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;
+    },
+
+    /**
+     * 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
+    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
+    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();
+            }
+        }
+    },
+
+    /**
+     * 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
+    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
+    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));
+    },
+
+    /**
+     * Shows the dialog.
+     * @param {String/HTMLElement/Roo.Element} animateTarget (optional) Reset the animation target
+     * @return {Roo.BasicDialog} this
+     */
+    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();
+            }
+        }
+        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();
+        }
+        this.fireEvent("show", this);
+    },
+
+    /**
+     * Focuses the dialog.  If a defaultButton is set, it will receive focus, otherwise the
+     * dialog itself will receive focus.
+     */
+    focus : function(){
+        if(this.defaultButton){
+            this.defaultButton.focus();
+        }else{
+            this.focusEl.focus();
+        }
+    },
+
+    // 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();
+                }
+            }
+        }
+    },
+
+    // private
+    onDrag : function(){
+        if(!this.proxyDrag){
+            this.xy = this.el.getXY();
+            this.adjustAssets();
+        }
+    },
+
+    // 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);
+        }
+    },
+
+    // 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));
+        }
+        if(this.isVisible()){
+            this.constrainXY();
+        }
+    },
+
+    /**
+     * 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
+     */
+    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();
+           }
+        }
+        this.el.removeAllListeners();
+        if(removeEl === true){
+            this.el.update("");
+            this.el.remove();
+        }
+        Roo.DialogManager.unregister(this);
+    },
+
+    // private
+    startMove : function(){
+        if(this.proxyDrag){
+            this.proxy.show();
+        }
+        if(this.constraintoviewport !== false){
+            this.dd.constrainTo(document.body, {right: this.shadowOffset, bottom: this.shadowOffset});
+        }
+    },
+
+    // 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]);
+    },
+
+    /**
+     * Brings this dialog to the front of any other visible dialogs
+     * @return {Roo.BasicDialog} this
+     */
+    toFront : function(){
+        Roo.DialogManager.bringToFront(this);
+        return this;
+    },
+
+    /**
+     * Sends this dialog to the back (under) of any other visible dialogs
+     * @return {Roo.BasicDialog} this
+     */
+    toBack : function(){
+        Roo.DialogManager.sendToBack(this);
+        return this;
+    },
+
+    /**
+     * 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;
+    },
+
+    /**
+     * 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;
+    },
+
+    /**
+     * 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();
+        }
+        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});
+        }
+        action.call(this);
+        return this;
+    },
+
+    /**
+     * Returns true if the dialog is visible
+     * @return {Boolean}
+     */
+    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]));
+    },
+
+    /**
+     * 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);
+        }
+        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();
+        }
+    },
+
+    // private
+    hideAction : function(){
+        this.setLeft("-10000px");
+        this.setTop("-10000px");
+        this.setStyle("visibility", "hidden");
+    },
+
+    // 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());
+    },
+
+    // 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);
+        }
+        if(this.shim){
+            this.shim.setStyle("z-index", ++index);
+        }
+        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;
+    },
+
+    /**
+     * Returns the element for this dialog
+     * @return {Roo.Element} The underlying dialog Element
+     */
+    getEl : function(){
+        return this.el;
+    }
+});
+
+/**
+ * @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;
+
+    // private
+    var sortDialogs = function(d1, d2){
+        return (!d1._lastAccess || d1._lastAccess < d2._lastAccess) ? -1 : 1;
+    };
+
+    // 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));
+            }
+        }
+    };
+
+    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.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
+        }
+    });
+    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;
+    }
+    
+    
+    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();
+    },
+
+    /**
+     * 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();
+    },
+
+    /**
+     * Get the BorderLayout for this dialog
+     * @return {Roo.BorderLayout}
+     */
+    getLayout : function(){
+        return this.layout;
+    },
+
+    showEl : function(){
+        Roo.LayoutDialog.superclass.showEl.apply(this, arguments);
+        if(Roo.isIE7){
+            this.layout.layout();
+        }
+    },
+
+    // private
+    // Use the syncHeightBeforeShow config option to control this automatically
+    syncBodyHeight : function(){
+        Roo.LayoutDialog.superclass.syncBodyHeight.call(this);
+        if(this.layout){this.layout.layout();}
+    },
+    
+      /**
+     * 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...
+    }
+});
+
+// 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;
+
+    // private
+    var handleButton = function(button){
+        dlg.hide();
+        Roo.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value], 1);
+    };
+
+    // private
+    var handleHide = function(){
+        if(opt && opt.cls){
+            dlg.el.removeClass(opt.cls);
+        }
+        if(waitTimer){
+            Roo.TaskMgr.stop(waitTimer);
+            waitTimer = null;
+        }
+    };
+
+    // 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();
+                }
+            }
+        }
+        return width;
+    };
+
+    // private
+    var handleEsc = function(d, k, e){
+        if(opt && opt.closable !== false){
+            dlg.hide();
+        }
+        if(e){
+            e.stopEvent();
+        }
+    };
+
+    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({
+
+                    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;
+        },
+
+        /**
+         * 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;
+        },
+
+        /**
+         * 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;
+        },        
+
+        /**
+         * 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();  
+        },
+
+        /**
+         * Hides the message box if it is displayed
+         */
+        hide : function(){
+            if(this.isVisible()){
+                dlg.hide();
+            }  
+        },
+
+        /**
+         * 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;
+                }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);
+            }
+            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;
+        },
+
+        /**
+         * 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;
+        },
+
+        /**
+         * 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;
+        },
+
+        /**
+         * 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;
+        },
+
+        /**
+         * Button config that displays a single OK button
+         * @type Object
+         */
+        OK : {ok:true},
+        /**
+         * Button config that displays Yes and No buttons
+         * @type Object
+         */
+        YESNO : {yes:true, no:true},
+        /**
+         * Button config that displays OK and Cancel buttons
+         * @type Object
+         */
+        OKCANCEL : {ok:true, cancel:true},
+        /**
+         * Button config that displays Yes, No and Cancel buttons
+         * @type Object
+         */
+        YESNOCANCEL : {yes:true, no:true, cancel: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"
+        }
+    };
+}();
+
+/**
+ * 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.
+ * @singleton
+ */
+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;
+        }
+        var t = e.getTarget();
+        if(!t || t.nodeType !== 1 || t == document || t == document.body){
+            return;
+        }
+        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, 
+                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');
+    };
+
+    var show = function(o){
+        if(disabled){
+            return;
+        }
+        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{
+                w = aw;
+            }
+        }
+        //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();
+            }
+        }
+        if(xy){
+            el.avoidY = xy[1]-18;
+            el.setXY(xy);
+        }
+        if(tm.animate){
+            el.setOpacity(.1);
+            el.setStyle("visibility", "visible");
+            el.fadeIn({callback: afterShow});
+        }else{
+            afterShow();
+        }
+    };
+    
+    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,
+
+       /**
+        * @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.
+ *
+ * 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 {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
+        
+    });
+    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
+    restrictExpand : function(node){
+        var p = node.parentNode;
+        if(p){
+            if(p.expandedChild && p.expandedChild.parentNode == p){
+                p.expandedChild.collapse();
+            }
+            p.expandedChild = node;
+        }
+    },
+
+    // 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 container element for this TreePanel
+     */
+    getEl : function(){
+        return this.el;
+    },
+
+    /**
+     * Returns the default TreeLoader for this TreePanel
+     */
+    getLoader : function(){
+        return this.loader;
+    },
+
+    /**
+     * Expand all nodes
+     */
+    expandAll : function(){
+        this.root.expand(true);
+    },
+
+    /**
+     * Collapse all nodes
+     */
+    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();
+        }
+        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]));
+            }
+        }
+        startNode.cascade(f);
+        return r;
+    },
+
+    /**
+     * 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);
+    },
+
+    /**
+     * 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);
+            }
+        }
+    },
+
+    getTreeEl : function(){
+        return this.el;
+    },
+
+    /**
+     * 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.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+
+/**
+ * @class Roo.tree.DefaultSelectionModel
+ * @extends Roo.util.Observable
+ * The default single selection for a TreePanel.
+ * @param {Object} cfg Configuration
+ */
+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);
+    },
+    
+    onNodeClick : function(node, e){
+        if (e.ctrlKey && this.selNode == node)  {
+            this.unselect(node);
+            return;
+        }
+        this.select(node);
+    },
+    
+    /**
+     * 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);
+        }
+        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);
+        }
+        return n;
+    },
+    
+    /**
+     * 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);
+        }
+        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;
+    },
+
+    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);
+    },
+    
+    /**
+     * 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;
+    },
+    
+    /**
+     * 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);
+        }
+    },
+    
+    /**
+     * 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);
+            }
+        }
+    },
+    
+    /**
+     * 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,
+
+    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 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 collapse
+        * Fires when this node is collapsed
+        * @param {Node} this This node
+        */
+        "collapse" : 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
+    });
+
+    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;
+    }
+    
+    
+    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,
+    /**
+     * Returns true if this node is expanded
+     * @return {Boolean}
+     */
+    isExpanded : function(){
+        return this.expanded;
+    },
+
+    /**
+     * Returns the UI object for this node
+     * @return {TreeNodeUI}
+     */
+    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);
+        }
+    },
+
+    // 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);
+        }
+    },
+
+    // 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 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 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;
+    },
+
+    /**
+     * 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);
+        }
+        this.fireEvent("textchange", this, text, oldText);
+    },
+
+    /**
+     * Triggers selection of this node
+     */
+    select : function(){
+        this.getOwnerTree().getSelectionModel().select(this);
+    },
+
+    /**
+     * Triggers deselection of this node
+     */
+    unselect : function(){
+        this.getOwnerTree().getSelectionModel().unselect(this);
+    },
+
+    /**
+     * Returns true if this node is selected
+     * @return {Boolean}
+     */
+    isSelected : function(){
+        return this.getOwnerTree().getSelectionModel().isSelected(this);
+    },
+
+    /**
+     * 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.
+     */
+    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);
+           }
+        }
+        if(deep === true){
+            this.expandChildNodes(true);
+        }
+    },
+
+    isHiddenRoot : function(){
+        return this.isRoot && !this.getOwnerTree().rootVisible;
+    },
+
+    /**
+     * Collapse this node.
+     * @param {Boolean} deep (optional) True to collapse all children as well
+     * @param {Boolean} anim (optional) false to cancel the default animation
+     */
+    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
+    delayedExpand : function(delay){
+        if(!this.expandProcId){
+            this.expandProcId = this.expand.defer(delay, this);
+        }
+    },
+
+    // private
+    cancelExpand : function(){
+        if(this.expandProcId){
+            clearTimeout(this.expandProcId);
+        }
+        this.expandProcId = false;
+    },
+
+    /**
+     * Toggles expanded/collapsed state of the node
+     */
+    toggle : function(){
+        if(this.expanded){
+            this.collapse();
+        }else{
+            this.expand();
+        }
+    },
+
+    /**
+     * 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));
+    },
+
+    /**
+     * 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);
+        }
+    },
+
+    /**
+     * Collapse all child nodes
+     * @param {Boolean} deep (optional) true if the child nodes should also collapse their child nodes
+     */
+    collapseChildNodes : function(deep){
+        var cs = this.childNodes;
+        for(var i = 0, len = cs.length; i < len; i++) {
+        	cs[i].collapse(deep);
+        }
+    },
+
+    /**
+     * 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("disabledchange", this, true);
+    },
+
+    /**
+     * Enables this node
+     */
+    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
+    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
+    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
+    render : function(bulkRender){
+        this.ui.render(bulkRender);
+        if(!this.rendered){
+            this.rendered = true;
+            if(this.expanded){
+                this.expanded = false;
+                this.expand(false, false);
+            }
+        }
+    },
+
+    // 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;
+            }
+        }
+        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);
+        }
+    },
+
+    /**
+     * 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;
+        }
+        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());
+        }
+    },
+
+    beforeLoad : function(){
+         this.addClass("x-tree-node-loading");
+    },
+
+    afterLoad : function(){
+         this.removeClass("x-tree-node-loading");
+    },
+
+    onTextChange : function(node, text, oldText){
+        if(this.rendered){
+            this.textNode.innerHTML = text;
+        }
+    },
+
+    onDisableChange : function(node, state){
+        this.disabled = state;
+        if(state){
+            this.addClass("x-tree-node-disabled");
+        }else{
+            this.removeClass("x-tree-node-disabled");
+        }
+    },
+
+    onSelectedChange : function(state){
+        if(state){
+            this.focus();
+            this.addClass("x-tree-selected");
+        }else{
+            //this.blur();
+            this.removeClass("x-tree-selected");
+        }
+    },
+
+    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);
+        }
+    },
+
+    addClass : function(cls){
+        if(this.elNode){
+            Roo.fly(this.elNode).addClass(cls);
+        }
+    },
+
+    removeClass : function(cls){
+        if(this.elNode){
+            Roo.fly(this.elNode).removeClass(cls);
+        }
+    },
+
+    remove : function(){
+        if(this.rendered){
+            this.holder = document.createElement("div");
+            this.holder.appendChild(this.wrap);
+        }
+    },
+
+    fireEvent : function(){
+        return this.node.fireEvent.apply(this.node, arguments);
+    },
+
+    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");
+        }
+
+        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);
+        }
+
+        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");
+        }
+        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
+            });
+        }
+    },
+
+    getDDHandles : function(){
+        return [this.iconNode, this.textNode];
+    },
+
+    hide : function(){
+        if(this.rendered){
+            this.wrap.style.display = "none";
+        }
+    },
+
+    show : function(){
+        if(this.rendered){
+            this.wrap.style.display = "";
+        }
+    },
+
+    onContextMenu : function(e){
+        if (this.node.hasListener("contextmenu") || this.node.getOwnerTree().hasListener("contextmenu")) {
+            e.preventDefault();
+            this.focus();
+            this.fireEvent("contextmenu", this.node, e);
+        }
+    },
+
+    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();
+        }
+    },
+
+    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);
+    },
+
+    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();
+        }
+    },
+
+    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 = "";
+    },
+
+    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){}
+        }
+    },
+
+    toggleCheck : function(value){
+        var cb = this.checkbox;
+        if(cb){
+            cb.checked = (value === undefined ? !cb.checked : value);
+        }
+    },
+
+    blur : function(){
+        try{
+            this.anchor.blur();
+        }catch(e){}
+    },
+
+    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
+        });
+    },
+
+    highlight : function(){
+        var tree = this.node.getOwnerTree();
+        Roo.fly(this.wrap).highlight(
+            tree.hlColor || "C3DAF9",
+            {endColor: tree.hlBaseColor}
+        );
+    },
+
+    collapse : function(){
+        this.updateExpandIcon();
+        this.ctNode.style.display = "none";
+    },
+
+    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
+        });
+    },
+
+    getContainer : function(){
+        return this.ctNode;
+    },
+
+    getEl : function(){
+        return this.wrap;
+    },
+
+    appendDDGhost : function(ghostNode){
+        ghostNode.appendChild(this.elNode.cloneNode(true));
+    },
+
+    getDDRepairXY : function(){
+        return Roo.lib.Dom.getXY(this.iconNode);
+    },
+
+    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;
+
+        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);
+            }
+        }
+    },
+
+    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;
+        }
+        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>"];
+
+        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.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;
+    },
+
+    getAnchor : function(){
+        return this.anchor;
+    },
+
+    getTextEl : function(){
+        return this.textNode;
+    },
+
+    getIconEl : function(){
+        return this.iconNode;
+    },
+
+    isChecked : function(){
+        return this.checkbox ? this.checkbox.checked : false;
+    },
+
+    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;
+            }
+        }
+    },
+
+    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;
+    },
+
+    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;
+        }
+    },
+    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 }
+    ]
+}
+
+
+</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({
+    
+        /**
+         * @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.
+         */
+        loadexception : 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)
+         */
+        create : true
+    });
+
+    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);
+        }
+    },
+
+    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.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * 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)
+ */
+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';
+        }
+        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();
+        }
+        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);
+                   }
+               }
+           }
+        }
+    },
+
+    /**
+     * 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();
+                }
+            }
+        }
+        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;
+            }
+        }
+    	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);
+    },
+    
+    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){
+    
+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));
+        }
+    },
+    
+    queueExpand : function(node){
+        this.expandProcId = this.expandNode.defer(this.expandDelay, this, [node]);
+    },
+    
+    cancelExpand : function(){
+        if(this.expandProcId){
+            clearTimeout(this.expandProcId);
+            this.expandProcId = false;
+        }
+    },
+    
+    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;
+    },
+    
+    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";
+        }
+        var noBelow = false;
+        if(!this.allowParentInsert){
+            noBelow = tn.hasChildNodes() && tn.isExpanded();
+        }
+        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";
+        }
+    },
+    
+    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();
+        }
+        
+        // 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;
+        }
+        // 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);
+        }
+        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);
+    },
+    
+    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);
+    },
+    
+    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";
+        }
+    },
+    
+    beforeDragDrop : function(target, e, id){
+        this.cancelExpand();
+        return true;
+    },
+    
+    afterRepair : function(data){
+        if(data && Roo.enableFx){
+            data.node.ui.highlight();
+        }
+        this.hideProxy();
+    } 
+    
+});
+
+}
+/*
+ * 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;
+};
+
+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);
+        
+        
+    },
+    
+    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);
+    }
+});
+}/*
+ * 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|Object} field 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 || {};
+    
+    
+    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);
+
+    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, {
+    /**
+     * @cfg {String} alignment
+     * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to "l-l").
+     */
+    alignment: "l-l",
+    // inherit
+    autoSize: false,
+    /**
+     * @cfg {Boolean} hideEl
+     * True to hide the bound element while the editor is displayed (defaults to false)
+     */
+    hideEl : false,
+    /**
+     * @cfg {String} cls
+     * CSS class to apply to the editor (defaults to "x-small-editor x-tree-editor")
+     */
+    cls: "x-small-editor x-tree-editor",
+    /**
+     * @cfg {Boolean} shim
+     * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
+     */
+    shim:false,
+    // inherit
+    shadow:"frame",
+    /**
+     * @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.
+     */
+    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;
+        }
+        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);
+        
+    },
+
+    // private
+    triggerEdit : function(node){
+        this.completeEdit();
+        this.editNode = node;
+        this.startEdit(node.ui.textNode, node.text);
+    },
+
+    // private
+    bindScroll : function(){
+        this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
+    },
+
+    // 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;
+    },
+
+    // private
+    updateNode : function(ed, value){
+        this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
+        this.editNode.setText(value);
+    },
+
+    // private
+    onHide : function(){
+        Roo.tree.TreeEditor.superclass.onHide.call(this);
+        if(this.editNode){
+            this.editNode.ui.focus();
+        }
+    },
+
+    // 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();
+        }
+    }
+});//<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;
+        
+        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(""));
+        }
+        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);
+    },
+    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");
+        }
+
+        el.on("click", this.onClick, this);
+        el.on("dblclick", this.onDblClick, this);
+        el.on("contextmenu", this.onContextMenu, this);
+        
+    },
+    
+    /*onSelectedChange : function(state){
+        if(state){
+            this.focus();
+            this.addClass("x-tree-selected");
+        }else{
+            //this.blur();
+            this.removeClass("x-tree-selected");
+        }
+    },*/
+    addClass : function(cls){
+        if(this.elRow){
+            Roo.fly(this.elRow).addClass(cls);
+        }
+        
+    },
+    
+    
+    removeClass : function(cls){
+        if(this.elRow){
+            Roo.fly(this.elRow).removeClass(cls);
+        }
+    }
+
+    
+    
+});//<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">
+ */
+ 
+
+/**
+ * @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
+ * @constructor
+ * @param {String/HTMLElement/Element} el The container element
+ * @param {Object} config
+ */
+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);
+};
+
+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
+ * 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.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).
+ * @constructor
+ * Creates a new Menu
+ * @param {Object} config Configuration options
+ */
+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.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",
+    /**
+     * @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,
+
+    hidden:true,
+
+    // private
+    render : function(){
+        if(this.el){
+            return;
+        }
+        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
+    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){
+            if(!this.awTask){
+                this.awTask = new Roo.util.DelayedTask(this.autoWidth, this);
+            }
+            this.awTask.delay(20);
+        }
+    },
+
+    // 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);
+        }
+    },
+
+    // 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);
+    },
+
+    // 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();
+        }
+    },
+
+    // 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;
+            }
+        }
+        return false;
+    },
+
+    // private
+    onMouseOver : function(e){
+        var t;
+        if(t = this.findTargetItem(e)){
+            if(t.canActivate && !t.disabled){
+                this.setActiveItem(t, true);
+            }
+        }
+        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);
+    },
+
+    /**
+     * Read-only.  Returns true if the menu is currently displayed, else false.
+     * @type Boolean
+     */
+    isVisible : function(){
+        return this.el && !this.hidden;
+    },
+
+    /**
+     * 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);
+    },
+
+    /**
+     * 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)
+     */
+    showAt : function(xy, parentMenu, /* private: */_e){
+        this.parentMenu = parentMenu;
+        if(!this.el){
+            this.render();
+        }
+        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);
+        }
+    },
+
+    doFocus : function(){
+        if(!this.hidden){
+            this.focusEl.focus();
+        }
+    },
+
+    /**
+     * Hides this menu and optionally all parent menus
+     * @param {Boolean} deep (optional) True to hide all parent menus recursively, if any (defaults to false)
+     */
+    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);
+        }
+    },
+
+    /**
+     * 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;
+    },
+
+    /**
+     * Returns this menu's underlying {@link Roo.Element} object
+     * @return {Roo.Element} The element
+     */
+    getEl : function(){
+        if(!this.el){
+            this.render();
+        }
+        return this.el;
+    },
+
+    /**
+     * Adds a separator bar to the menu
+     * @return {Roo.menu.Item} The menu item that was added
+     */
+    addSeparator : function(){
+        return this.addItem(new Roo.menu.Separator());
+    },
+
+    /**
+     * 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
+     */
+    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;
+    },
+
+    /**
+     * 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
+     */
+    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);
+    },
+
+    /**
+     * 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
+     */
+    addText : function(text){
+        return this.addItem(new Roo.menu.TextItem({ text : text }));
+    },
+
+    /**
+     * 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
+     */
+    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;
+    },
+
+    /**
+     * Removes an {@link Roo.menu.Item} from the menu and destroys the object
+     * @param {Roo.menu.Item} item The menu item to remove
+     */
+    remove : function(item){
+        this.items.removeKey(item.id);
+        item.destroy();
+    },
+
+    /**
+     * Removes and destroys all items in the menu
+     */
+    removeAll : function(){
+        var f;
+        while(f = this.items.first()){
+            this.remove(f);
+        }
+    }
+});
+
+// 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;
+        }
+        return h.call(this.scope || this, e, this.menu);
+    },
+
+    up : function(e, m){
+        if(!m.tryActivate(m.items.indexOf(m.activeItem)-1, -1)){
+            m.tryActivate(m.items.length-1, -1);
+        }
+    },
+
+    down : function(e, m){
+        if(!m.tryActivate(m.items.indexOf(m.activeItem)+1, 1)){
+            m.tryActivate(0, 1);
+        }
+    },
+
+    right : function(e, m){
+        if(m.activeItem){
+            m.activeItem.expandMenu(true);
+        }
+    },
+
+    left : function(e, m){
+        m.hide();
+        if(m.parentMenu && m.parentMenu.activeItem){
+            m.parentMenu.activeItem.activate();
+        }
+    },
+
+    enter : function(e, m){
+        if(m.activeItem){
+            e.stopPropagation();
+            m.activeItem.onClick(e);
+            m.fireEvent("click", this, m.activeItem);
+            return true;
+        }
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+/**
+ * @class Roo.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
+ */
+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,
+        /**
+         * @event deactivate
+         * Fires when this item is deactivated
+         * @param {Roo.menu.BaseItem} this
+         */
+        deactivate : true
+    });
+
+    if(this.handler){
+        this.on("click", this.handler, this.scope, true);
+    }
+};
+
+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,
+
+    // private
+    ctype: "Roo.menu.BaseItem",
+
+    // private
+    actionMode : "container",
+
+    // private
+    render : function(container, parentMenu){
+        this.parentMenu = parentMenu;
+        Roo.menu.BaseItem.superclass.render.call(this, container);
+        this.container.menuItemId = this.id;
+    },
+
+    // private
+    onRender : function(container, position){
+        this.el = Roo.get(this.el);
+        container.dom.appendChild(this.el.dom);
+    },
+
+    // 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();
+        }
+    },
+
+    // private
+    activate : function(){
+        if(this.disabled){
+            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);
+    },
+
+    // private
+    shouldDeactivate : function(e){
+        return !this.region || !this.region.contains(e.getPoint());
+    },
+
+    // private
+    handleClick : function(e){
+        if(this.hideOnClick){
+            this.parentMenu.hide.defer(this.hideDelay, this.parentMenu, [true]);
+        }
+    },
+
+    // private
+    expandMenu : function(autoActivate){
+        // do nothing
+    },
+
+    // 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,
+
+    // private
+    onRender : function(container, position){
+        this.component.render(container);
+        this.el = this.component.getEl();
+    },
+
+    // private
+    activate : function(){
+        if(this.disabled){
+            return false;
+        }
+        this.component.focus();
+        this.fireEvent("activate", this);
+        return true;
+    },
+
+    // private
+    deactivate : function(){
+        this.fireEvent("deactivate", this);
+    },
+
+    // private
+    disable : function(){
+        this.component.disable();
+        Roo.menu.Adapter.superclass.disable.call(this);
+    },
+
+    // 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">
+ */
+
+/**
+ * @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);
+};
+
+Roo.extend(Roo.menu.TextItem, Roo.menu.BaseItem, {
+    /**
+     * @cfg {Boolean} 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(){
+        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, {
+    /**
+     * @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,
+
+    // 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 {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,
+
+    // 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 : "");
+        
+        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);
+    },
+
+    /**
+     * 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 = '';
+        }
+        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();
+        }
+    },
+
+    // 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);
+    },
+
+    // private
+    activate : function(autoExpand){
+        if(Roo.menu.Item.superclass.activate.apply(this, arguments)){
+            this.focus();
+            if(autoExpand){
+                this.expandMenu();
+            }
+        }
+        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());
+            }
+            return true;
+        }
+        return false;
+    },
+
+    // private
+    deactivate : function(){
+        Roo.menu.Item.superclass.deactivate.apply(this, arguments);
+        this.hideMenu();
+    },
+
+    // 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);
+            }
+        }
+    },
+
+    // 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);
+        }
+    },
+
+    // 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);
+        }
+    },
+
+    // private
+    deferHide : function(){
+        delete this.hideTimer;
+        this.menu.hide();
+    }
+});/*
+ * 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.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 CheckItem
+ * @param {Object} config Configuration options
+ */
+Roo.menu.CheckItem = function(config){
+    Roo.menu.CheckItem.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 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
+    });
+    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);
+        }
+        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);
+            }
+        }
+    },
+
+    // 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);
+    }
+});/*
+ * 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">
+ */
+ 
+
+/**
+ * @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
+     */
+    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);
+};
+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
+     */
+    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.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} 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,
+    
+    /**
+     * @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 || '');
+    },
+
+    // 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);
+        }
+        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);
+        }
+
+        this.el.addClass([this.fieldClass, this.cls]);
+        this.initValue();
+    },
+
+    /**
+     * 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;
+    },
+
+    // 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);
+        }
+    },
+
+    /**
+     * 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);
+    },
+
+    /**
+     * 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;
+        }
+        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);
+        }
+    },
+
+    /**
+     * Resets the current field value to the originally loaded value and clears any validation messages
+     */
+    reset : function(){
+        this.setValue(this.resetValue);
+        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(!this.hasFocus){
+            this.hasFocus = true;
+            this.startValue = this.getValue();
+            this.fireEvent("focus", this);
+        }
+    },
+
+    beforeBlur : Roo.emptyFn,
+
+    // private
+    onBlur : function(){
+        this.beforeBlur();
+        if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
+            this.el.removeClass(this.focusClass);
+        }
+        this.hasFocus = false;
+        if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){
+            this.validate();
+        }
+        var v = this.getValue();
+        if(String(v) !== String(this.startValue)){
+            this.fireEvent('change', this, v, this.startValue);
+        }
+        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;
+        }
+        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;
+        }
+        return false;
+    },
+
+    processValue : function(value){
+        return value;
+    },
+
+    // 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;
+        }
+        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
+            return;
+        }
+        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);
+    },
+
+    /**
+     * 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
+     */
+    setValue : function(v){
+        this.value = v;
+        if(this.rendered){
+            this.el.dom.value = (v === null || v === undefined ? '' : v);
+             this.validate();
+        }
+    },
+
+    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;
+    },
+
+    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;
+                }
+            }
+        }
+        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('');
+        }
+    },
+
+    slide : {
+        show: function(msgEl, f){
+            msgEl.slideIn('t', {stopFx:true});
+        },
+
+        hide : function(msgEl, f){
+            msgEl.slideOut('t', {stopFx:true,useDisplay:true});
+        }
+    },
+
+    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.
+ *
+ * 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
+    });
+};
+
+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")
+     */
+    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
+    initEvents : function()
+    {
+        if (this.emptyText) {
+            this.el.attr('placeholder', this.emptyText);
+        }
+        
+        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.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);
+        }
+    },
+
+    processValue : function(value){
+        if(this.stripCharsRe){
+            var newValue = value.replace(this.stripCharsRe, '');
+            if(newValue !== value){
+                this.setRawValue(newValue);
+                return newValue;
+            }
+        }
+        return value;
+    },
+
+    filterValidation : function(e){
+        if(!e.isNavKeyPress()){
+            this.validationTask.delay(this.validationDelay);
+        }
+    },
+
+    // private
+    onKeyUp : function(e){
+        if(!e.isNavKeyPress()){
+            this.autoSize();
+        }
+    },
+
+    /**
+     * 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
+    preFocus : function(){
+        
+        if(this.selectOnFocus){
+            this.el.dom.select();
+        }
+    },
+
+    
+    // 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;
+        }
+        if(!this.maskRe.test(cc)){
+            e.stopEvent();
+        }
+    },
+
+    setValue : function(v){
+        
+        Roo.form.TextField.superclass.setValue.apply(this, arguments);
+        
+        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;
+            }
+        }
+        if(this.regex && !this.regex.test(value)){
+            this.markInvalid(this.regexText);
+            return false;
+        }
+        return true;
+    },
+
+    /**
+     * 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();
+            }
+        }
+    },
+
+    /**
+     * 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);
+    },
+    
+    // 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;
+        }
+        if(((event.getKey() == 8 || event.getKey() == 46) && this.getValue().length ==1)){ // backspace and delete key
+            event.preventDefault();
+            this.setValue('');
+            return;
+        }
+        
+        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());
+            
+        }
+        
+        
+    }
+});/*
+ * 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.Hidden
+ * @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.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * 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.
+ * @constructor
+ * Create a new TriggerField.
+ * @param {Object} config Configuration options (valid {@Roo.form.TextField} config options will also be applied
+ * to the base TextField)
+ */
+Roo.form.TriggerField = function(config){
+    this.mimicing = false;
+    Roo.form.TriggerField.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.form.TriggerField, Roo.form.TextField,  {
+    /**
+     * @cfg {String} triggerClass A CSS class to apply to the trigger
+     */
+    /**
+     * @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 {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false)
+     */
+    hideTrigger:false,
+
+    /** @cfg {Boolean} grow @hide */
+    /** @cfg {Number} growMin @hide */
+    /** @cfg {Number} growMax @hide */
+
+    /**
+     * @hide 
+     * @method
+     */
+    autoSize: Roo.emptyFn,
+    // private
+    monitorTab : true,
+    // private
+    deferHeight : 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
+    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);
+        }
+        this.initTrigger();
+        if(!this.width){
+            this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
+        }
+    },
+
+    // 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');
+    },
+
+    // private
+    onDestroy : function(){
+        if(this.trigger){
+            this.trigger.removeAllListeners();
+            this.trigger.remove();
+        }
+        if(this.wrap){
+            this.wrap.remove();
+        }
+        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);
+            }
+        }
+    },
+
+    // private
+    checkTab : function(e){
+        if(e.getKey() == e.TAB){
+            this.triggerBlur();
+        }
+    },
+
+    // private
+    onBlur : function(){
+        // do nothing
+    },
+
+    // private
+    mimicBlur : function(e, t){
+        if(!this.wrap.contains(t) && this.validateBlur()){
+            this.triggerBlur();
+        }
+    },
+
+    // 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);
+        }
+        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;
+    },
+
+    // private
+    onDisable : function(){
+        Roo.form.TriggerField.superclass.onDisable.call(this);
+        if(this.wrap){
+            this.wrap.addClass('x-item-disabled');
+        }
+    },
+
+    // private
+    onEnable : function(){
+        Roo.form.TriggerField.superclass.onEnable.call(this);
+        if(this.wrap){
+            this.wrap.removeClass('x-item-disabled');
+        }
+    },
+
+    // private
+    onShow : function(){
+        var ae = this.getActionEl();
+        
+        if(ae){
+            ae.dom.style.display = '';
+            ae.dom.style.visibility = 'visible';
+        }
+    },
+
+    // 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
+     */
+    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}
+        ]};
+    },
+
+    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,  {
+    /**
+     * @cfg {Number} growMin The minimum height to allow when grow = true (defaults to 60)
+     */
+    growMin : 60,
+    /**
+     * @cfg {Number} growMax The maximum height to allow when grow = true (defaults to 1000)
+     */
+    growMax: 1000,
+    /**
+     * @cfg {Boolean} preventScrollbars True to prevent scrollbars from appearing regardless of how much text is
+     * in the field (equivalent to setting overflow: hidden, defaults to false)
+     */
+    preventScrollbars: false,
+    /**
+     * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+     * {tag: "textarea", style: "width:300px;height:60px;", autocomplete: "off"})
+     */
+
+    // private
+    onRender : function(ct, position){
+        if(!this.el){
+            this.defaultAutoCreate = {
+                tag: "textarea",
+                style:"width:300px;height:60px;",
+                autocomplete: "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");
+            }
+            this.el.setHeight(this.growMin);
+        }
+    },
+
+    onDestroy : function(){
+        if(this.textSizeEl){
+            this.textSizeEl.parentNode.removeChild(this.textSizeEl);
+        }
+        Roo.form.TextArea.superclass.onDestroy.call(this);
+    },
+
+    // private
+    onKeyUp : function(e){
+        if(!e.isNavKeyPress() || e.getKey() == e.ENTER){
+            this.autoSize();
+        }
+    },
+
+    /**
+     * Automatically grows the field to accomodate the height of the text up to the maximum field height allowed.
+     * This only takes effect if grow = true, and fires the autosize event if the height changes.
+     */
+    autoSize : function(){
+        if(!this.grow || !this.textSizeEl){
+            return;
+        }
+        var el = this.el;
+        var v = el.dom.value;
+        var ts = this.textSizeEl;
+
+        ts.innerHTML = '';
+        ts.appendChild(document.createTextNode(v));
+        v = ts.innerHTML;
+
+        Roo.fly(ts).setWidth(this.el.getWidth());
+        if(v.length < 1){
+            v = "&#160;&#160;";
+        }else{
+            if(Roo.isIE){
+                v = v.replace(/\n/g, '<p>&#160;</p>');
+            }
+            v += "&#160;\n&#160;";
+        }
+        ts.innerHTML = v;
+        var h = Math.min(this.growMax, Math.max(ts.offsetHeight, this.growMin));
+        if(h != this.lastHeight){
+            this.lastHeight = h;
+            this.el.setHeight(h);
+            this.fireEvent("autosize", this, h);
+        }
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+
+/**
+ * @class Roo.form.NumberField
+ * @extends Roo.form.TextField
+ * Numeric text field that provides automatic keystroke filtering and numeric validation.
+ * @constructor
+ * Creates a new NumberField
+ * @param {Object} config Configuration options
+ */
+Roo.form.NumberField = function(config){
+    Roo.form.NumberField.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.form.NumberField, Roo.form.TextField,  {
+    /**
+     * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field x-form-num-field")
+     */
+    fieldClass: "x-form-field x-form-num-field",
+    /**
+     * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
+     */
+    allowDecimals : true,
+    /**
+     * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
+     */
+    decimalSeparator : ".",
+    /**
+     * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
+     */
+    decimalPrecision : 2,
+    /**
+     * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)
+     */
+    allowNegative : true,
+    /**
+     * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
+     */
+    minValue : Number.NEGATIVE_INFINITY,
+    /**
+     * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE)
+     */
+    maxValue : Number.MAX_VALUE,
+    /**
+     * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
+     */
+    minText : "The minimum value for this field is {0}",
+    /**
+     * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
+     */
+    maxText : "The maximum value for this field is {0}",
+    /**
+     * @cfg {String} nanText Error text to display if the value is not a valid number.  For example, this can happen
+     * if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
+     */
+    nanText : "{0} is not a valid number",
+
+    // private
+    initEvents : function(){
+        Roo.form.NumberField.superclass.initEvents.call(this);
+        var allowed = "0123456789";
+        if(this.allowDecimals){
+            allowed += this.decimalSeparator;
+        }
+        if(this.allowNegative){
+            allowed += "-";
+        }
+        this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');
+        var keyPress = function(e){
+            var k = e.getKey();
+            if(!Roo.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
+                return;
+            }
+            var c = e.getCharCode();
+            if(allowed.indexOf(String.fromCharCode(c)) === -1){
+                e.stopEvent();
+            }
+        };
+        this.el.on("keypress", keyPress, this);
+    },
+
+    // private
+    validateValue : function(value){
+        if(!Roo.form.NumberField.superclass.validateValue.call(this, value)){
+            return false;
+        }
+        if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
+             return true;
+        }
+        var num = this.parseValue(value);
+        if(isNaN(num)){
+            this.markInvalid(String.format(this.nanText, value));
+            return false;
+        }
+        if(num < this.minValue){
+            this.markInvalid(String.format(this.minText, this.minValue));
+            return false;
+        }
+        if(num > this.maxValue){
+            this.markInvalid(String.format(this.maxText, this.maxValue));
+            return false;
+        }
+        return true;
+    },
+
+    getValue : function(){
+        return this.fixPrecision(this.parseValue(Roo.form.NumberField.superclass.getValue.call(this)));
+    },
+
+    // private
+    parseValue : function(value){
+        value = parseFloat(String(value).replace(this.decimalSeparator, "."));
+        return isNaN(value) ? '' : value;
+    },
+
+    // private
+    fixPrecision : function(value){
+        var nan = isNaN(value);
+        if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
+            return nan ? '' : value;
+        }
+        return parseFloat(value).toFixed(this.decimalPrecision);
+    },
+
+    setValue : function(v){
+        v = this.fixPrecision(v);
+        Roo.form.NumberField.superclass.setValue.call(this, String(v).replace(".", this.decimalSeparator));
+    },
+
+    // private
+    decimalPrecisionFcn : function(v){
+        return Math.floor(v);
+    },
+
+    beforeBlur : function(){
+        var v = this.parseValue(this.getRawValue());
+        if(v){
+            this.setValue(v);
+        }
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+/**
+ * @class Roo.form.DateField
+ * @extends Roo.form.TriggerField
+ * Provides a date input field with a {@link Roo.DatePicker} dropdown and automatic date validation.
+* @constructor
+* Create a new DateField
+* @param {Object} config
+ */
+Roo.form.DateField = function(config){
+    Roo.form.DateField.superclass.constructor.call(this, config);
+    
+      this.addEvents({
+         
+        /**
+         * @event select
+         * Fires when a date is selected
+	     * @param {Roo.form.DateField} combo This combo box
+	     * @param {Date} date The date selected
+	     */
+        'select' : true
+         
+    });
+    
+    
+    if(typeof this.minValue == "string") {
+        this.minValue = this.parseDate(this.minValue);
+    }
+    if(typeof this.maxValue == "string") {
+        this.maxValue = this.parseDate(this.maxValue);
+    }
+    this.ddMatch = null;
+    if(this.disabledDates){
+        var dd = this.disabledDates;
+        var re = "(?:";
+        for(var i = 0; i < dd.length; i++){
+            re += dd[i];
+            if(i != dd.length-1) {
+                re += "|";
+            }
+        }
+        this.ddMatch = new RegExp(re + ")");
+    }
+};
+
+Roo.extend(Roo.form.DateField, Roo.form.TriggerField,  {
+    /**
+     * @cfg {String} format
+     * The default date format string which can be overriden for localization support.  The format must be
+     * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
+     */
+    format : "m/d/y",
+    /**
+     * @cfg {String} altFormats
+     * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
+     * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d').
+     */
+    altFormats : "m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d",
+    /**
+     * @cfg {Array} disabledDays
+     * An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
+     */
+    disabledDays : null,
+    /**
+     * @cfg {String} disabledDaysText
+     * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
+     */
+    disabledDaysText : "Disabled",
+    /**
+     * @cfg {Array} disabledDates
+     * An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular
+     * expression so they are very powerful. Some examples:
+     * <ul>
+     * <li>["03/08/2003", "09/16/2003"] would disable those exact dates</li>
+     * <li>["03/08", "09/16"] would disable those days for every year</li>
+     * <li>["^03/08"] would only match the beginning (useful if you are using short years)</li>
+     * <li>["03/../2006"] would disable every day in March 2006</li>
+     * <li>["^03"] would disable every day in every March</li>
+     * </ul>
+     * In order to support regular expressions, if you are using a date format that has "." in it, you will have to
+     * escape the dot when restricting dates. For example: ["03\\.08\\.03"].
+     */
+    disabledDates : null,
+    /**
+     * @cfg {String} disabledDatesText
+     * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
+     */
+    disabledDatesText : "Disabled",
+    /**
+     * @cfg {Date/String} minValue
+     * The minimum allowed date. Can be either a Javascript date object or a string date in a
+     * valid format (defaults to null).
+     */
+    minValue : null,
+    /**
+     * @cfg {Date/String} maxValue
+     * The maximum allowed date. Can be either a Javascript date object or a string date in a
+     * valid format (defaults to null).
+     */
+    maxValue : null,
+    /**
+     * @cfg {String} minText
+     * The error text to display when the date in the cell is before minValue (defaults to
+     * 'The date in this field must be after {minValue}').
+     */
+    minText : "The date in this field must be equal to or after {0}",
+    /**
+     * @cfg {String} maxText
+     * The error text to display when the date in the cell is after maxValue (defaults to
+     * 'The date in this field must be before {maxValue}').
+     */
+    maxText : "The date in this field must be equal to or before {0}",
+    /**
+     * @cfg {String} invalidText
+     * The error text to display when the date in the field is invalid (defaults to
+     * '{value} is not a valid date - it must be in the format {format}').
+     */
+    invalidText : "{0} is not a valid date - it must be in the format {1}",
+    /**
+     * @cfg {String} triggerClass
+     * An additional CSS class used to style the trigger button.  The trigger will always get the
+     * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-date-trigger'
+     * which displays a calendar icon).
+     */
+    triggerClass : 'x-form-date-trigger',
+    
+
+    /**
+     * @cfg {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
+    defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "off"},
+    
+    // private
+    hiddenField: false,
+    
+    onRender : function(ct, position)
+    {
+        Roo.form.DateField.superclass.onRender.call(this, ct, position);
+        if (this.useIso) {
+            //this.el.dom.removeAttribute('name'); 
+            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
+    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();
+    },
+    
+    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 || '');
+        
+    },
+
+    /**
+     * Returns the current date value of the date field.
+     * @return {Date} The date value
+     */
+    getValue : function(){
+        
+        return  this.hiddenField ?
+                this.hiddenField.value :
+                this.parseDate(Roo.form.DateField.superclass.getValue.call(this)) || "";
+    },
+
+    /**
+     * Sets the value of the date field.  You can pass a date object or any string that can be parsed into a valid
+     * date, using DateField.format as the date format, according to the same rules as {@link Date#parseDate}
+     * (the default format used is "m/d/y").
+     * <br />Usage:
+     * <pre><code>
+//All of these calls set the same date value (May 4, 2006)
+
+//Pass a date object:
+var dt = new Date('5/4/06');
+dateField.setValue(dt);
+
+//Pass a date string (default format):
+dateField.setValue('5/4/06');
+
+//Pass a date string (custom format):
+dateField.format = 'Y-m-d';
+dateField.setValue('2006-5-4');
+</code></pre>
+     * @param {String/Date} date The date or valid date string
+     */
+    setValue : function(date){
+        if (this.hiddenField) {
+            this.hiddenField.value = this.formatDate(this.parseDate(date), 'Y-m-d');
+        }
+        Roo.form.DateField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
+        // make sure the value field is always stored as a date..
+        this.value = this.parseDate(date);
+        
+        
+    },
+
+    // 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');
+        }
+        if(!v && this.altFormats){
+            if(!this.altFormatsArray){
+                this.altFormatsArray = this.altFormats.split("|");
+            }
+            for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
+                v = Date.parseDate(value, this.altFormatsArray[i]);
+            }
+        }
+        return v;
+    },
+
+    // private
+    formatDate : function(date, fmt){
+        return (!date || !(date instanceof Date)) ?
+               date : date.dateFormat(fmt || this.format);
+    },
+
+    // private
+    menuListeners : {
+        select: function(m, d){
+            
+            this.setValue(d);
+            this.fireEvent('select', this, d);
+        },
+        show : function(){ // retain focus styling
+            this.onFocus();
+        },
+        hide : function(){
+            this.focus.defer(10, this);
+            var ml = this.menuListeners;
+            this.menu.un("select", ml.select,  this);
+            this.menu.un("show", ml.show,  this);
+            this.menu.un("hide", ml.hide,  this);
+        }
+    },
+
+    // private
+    // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
+    onTriggerClick : function(){
+        if(this.disabled){
+            return;
+        }
+        if(this.menu == null){
+            this.menu = new Roo.menu.DateMenu();
+        }
+        Roo.apply(this.menu.picker,  {
+            showClear: this.allowBlank,
+            minDate : this.minValue,
+            maxDate : this.maxValue,
+            disabledDatesRE : this.ddMatch,
+            disabledDatesText : this.disabledDatesText,
+            disabledDays : this.disabledDays,
+            disabledDaysText : this.disabledDaysText,
+            format : this.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?");
+    },
+
+    beforeBlur : function(){
+        var v = this.parseDate(this.getRawValue());
+        if(v){
+            this.setValue(v);
+        }
+    },
+
+    /*@
+     * overide
+     * 
+     */
+    isDirty : function() {
+        if(this.disabled) {
+            return false;
+        }
+        
+        if(typeof(this.startValue) === 'undefined'){
+            return false;
+        }
+        
+        return String(this.getValue()) !== String(this.startValue);
+        
+    }
+});/*
+ * 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.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.form.MonthField = function(config){
+    
+    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.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"},
+    
+    // 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();
+    },
+
+    /**
+     * 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.MonthField.superclass.getValue.call(this)) || "";
+    },
+
+    /**
+     * Sets the value of the date field.  You can pass a date object or any string that can be parsed into a valid
+     * date, using 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
+     */
+    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
+    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');
+        }
+        
+        
+        if(!v && this.altFormats){
+            if(!this.altFormatsArray){
+                this.altFormatsArray = this.altFormats.split("|");
+            }
+            for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
+                v = Date.parseDate(value, this.altFormatsArray[i]);
+            }
+        }
+        return v;
+    },
+
+    // private
+    formatDate : function(date, fmt){
+        return (!date || !(date instanceof Date)) ?
+               date : date.dateFormat(fmt || this.format);
+    },
+
+    // private
+    menuListeners : {
+        select: function(m, d){
+            this.setValue(d);
+            this.fireEvent('select', this, d);
+        },
+        show : function(){ // retain focus styling
+            this.onFocus();
+        },
+        hide : function(){
+            this.focus.defer(10, this);
+            var ml = this.menuListeners;
+            this.menu.un("select", ml.select,  this);
+            this.menu.un("show", ml.show,  this);
+            this.menu.un("hide", ml.hide,  this);
+        }
+    },
+    // private
+    // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
+    onTriggerClick : function(){
+        if(this.disabled){
+            return;
+        }
+        if(this.menu == null){
+            this.menu = new Roo.menu.DateMenu();
+           
+        }
+        
+        Roo.apply(this.menu.picker,  {
+            
+            showClear: this.allowBlank,
+            minDate : this.minValue,
+            maxDate : this.maxValue,
+            disabledDatesRE : this.ddMatch,
+            disabledDatesText : this.disabledDatesText,
+            
+            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);
+    
+        
+       
+    },
+
+    beforeBlur : function(){
+        var v = this.parseDate(this.getRawValue());
+        if(v){
+            this.setValue(v);
+        }
+    }
+
+    /** @cfg {Boolean} grow @hide */
+    /** @cfg {Number} growMin @hide */
+    /** @cfg {Number} growMax @hide */
+    /**
+     * @hide
+     * @method autoSize
+     */
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+
+/**
+ * @class Roo.form.ComboBox
+ * @extends Roo.form.TriggerField
+ * A combobox control with support for autocomplete, remote-loading, paging and many other features.
+ * @constructor
+ * Create a new ComboBox.
+ * @param {Object} config Configuration options
+ */
+Roo.form.ComboBox = function(config){
+    Roo.form.ComboBox.superclass.constructor.call(this, config);
+    this.addEvents({
+        /**
+         * @event expand
+         * Fires when the dropdown list is expanded
+	     * @param {Roo.form.ComboBox} combo This combo box
+	     */
+        'expand' : true,
+        /**
+         * @event collapse
+         * Fires when the dropdown list is collapsed
+	     * @param {Roo.form.ComboBox} combo This combo box
+	     */
+        'collapse' : true,
+        /**
+         * @event beforeselect
+         * Fires before a list item is selected. Return false to cancel the selection.
+	     * @param {Roo.form.ComboBox} combo This combo box
+	     * @param {Roo.data.Record} record The data record returned from the underlying store
+	     * @param {Number} index The index of the selected item in the dropdown list
+	     */
+        'beforeselect' : true,
+        /**
+         * @event select
+         * Fires when a list item is selected
+	     * @param {Roo.form.ComboBox} combo This combo box
+	     * @param {Roo.data.Record} record The data record returned from the underlying store (or false on clear)
+	     * @param {Number} index The index of the selected item in the dropdown list
+	     */
+        'select' : true,
+        /**
+         * @event beforequery
+         * Fires before all queries are processed. Return false to cancel the query or set cancel to true.
+         * The event object passed has these properties:
+	     * @param {Roo.form.ComboBox} combo This combo box
+	     * @param {String} query The query
+	     * @param {Boolean} forceAll true to force "all" query
+	     * @param {Boolean} cancel true to cancel the query
+	     * @param {Object} e The query event object
+	     */
+        'beforequery': true,
+         /**
+         * @event add
+         * Fires when the 'add' icon is pressed (add a listener to enable add button)
+	     * @param {Roo.form.ComboBox} combo This combo box
+	     */
+        'add' : true,
+        /**
+         * @event edit
+         * Fires when the 'edit' icon is pressed (add a listener to enable add button)
+	     * @param {Roo.form.ComboBox} combo This combo box
+	     * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
+	     */
+        'edit' : true
+        
+        
+    });
+    if(this.transform){
+        this.allowDomMove = false;
+        var s = Roo.getDom(this.transform);
+        if(!this.hiddenName){
+            this.hiddenName = s.name;
+        }
+        if(!this.store){
+            this.mode = 'local';
+            var d = [], opts = s.options;
+            for(var i = 0, len = opts.length;i < len; i++){
+                var o = opts[i];
+                var value = (Roo.isIE ? o.getAttributeNode('value').specified : o.hasAttribute('value')) ? o.value : o.text;
+                if(o.selected) {
+                    this.value = value;
+                }
+                d.push([value, o.text]);
+            }
+            this.store = new Roo.data.SimpleStore({
+                'id': 0,
+                fields: ['value', 'text'],
+                data : d
+            });
+            this.valueField = 'value';
+            this.displayField = 'text';
+        }
+        s.name = Roo.id(); // wipe out the name in case somewhere else they have a reference
+        if(!this.lazyRender){
+            this.target = true;
+            this.el = Roo.DomHelper.insertBefore(s, this.autoCreate || this.defaultAutoCreate);
+            s.parentNode.removeChild(s); // remove it
+            this.render(this.el.parentNode);
+        }else{
+            s.parentNode.removeChild(s); // remove it
+        }
+
+    }
+    if (this.store) {
+        this.store = Roo.factory(this.store, Roo.data);
+    }
+    
+    this.selectedIndex = -1;
+    if(this.mode == 'local'){
+        if(config.queryDelay === undefined){
+            this.queryDelay = 10;
+        }
+        if(config.minChars === undefined){
+            this.minChars = 0;
+        }
+    }
+};
+
+Roo.extend(Roo.form.ComboBox, Roo.form.TriggerField, {
+    /**
+     * @cfg {String/HTMLElement/Element} transform The id, DOM node or element of an existing select to convert to a ComboBox
+     */
+    /**
+     * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
+     * rendering into an Roo.Editor, defaults to false)
+     */
+    /**
+     * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:
+     * {tag: "input", type: "text", size: "24", autocomplete: "off"})
+     */
+    /**
+     * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
+     */
+    /**
+     * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
+     * the dropdown list (defaults to undefined, with no header element)
+     */
+
+     /**
+     * @cfg {String/Roo.Template} tpl The template to use to render the output
+     */
+     
+    // private
+    defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},
+    /**
+     * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
+     */
+    listWidth: undefined,
+    /**
+     * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
+     * mode = 'remote' or 'text' if mode = 'local')
+     */
+    displayField: undefined,
+    /**
+     * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
+     * mode = 'remote' or 'value' if mode = 'local'). 
+     * Note: use of a valueField requires the user make a selection
+     * in order for a value to be mapped.
+     */
+    valueField: undefined,
+    
+    
+    /**
+     * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
+     * field's data value (defaults to the underlying DOM element's name)
+     */
+    hiddenName: undefined,
+    /**
+     * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
+     */
+    listClass: '',
+    /**
+     * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
+     */
+    selectedClass: 'x-combo-selected',
+    /**
+     * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
+     * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-arrow-trigger'
+     * which displays a downward arrow icon).
+     */
+    triggerClass : 'x-form-arrow-trigger',
+    /**
+     * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
+     */
+    shadow:'sides',
+    /**
+     * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
+     * anchor positions (defaults to 'tl-bl')
+     */
+    listAlign: 'tl-bl?',
+    /**
+     * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
+     */
+    maxHeight: 300,
+    /**
+     * @cfg {String} triggerAction The action to execute when the trigger field is activated.  Use 'all' to run the
+     * query specified by the allQuery config option (defaults to 'query')
+     */
+    triggerAction: 'query',
+    /**
+     * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
+     * (defaults to 4, does not apply if editable = false)
+     */
+    minChars : 4,
+    /**
+     * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
+     * delay (typeAheadDelay) if it matches a known value (defaults to false)
+     */
+    typeAhead: false,
+    /**
+     * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the
+     * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')
+     */
+    queryDelay: 500,
+    /**
+     * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the
+     * filter queries will execute with page start and limit parameters.  Only applies when mode = 'remote' (defaults to 0)
+     */
+    pageSize: 0,
+    /**
+     * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus.  Only applies
+     * when editable = true (defaults to false)
+     */
+    selectOnFocus:false,
+    /**
+     * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
+     */
+    queryParam: 'query',
+    /**
+     * @cfg {String} loadingText The text to display in the dropdown list while data is loading.  Only applies
+     * when mode = 'remote' (defaults to 'Loading...')
+     */
+    loadingText: 'Loading...',
+    /**
+     * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
+     */
+    resizable: false,
+    /**
+     * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
+     */
+    handleHeight : 8,
+    /**
+     * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
+     * traditional select (defaults to true)
+     */
+    editable: true,
+    /**
+     * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
+     */
+    allQuery: '',
+    /**
+     * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
+     */
+    mode: 'remote',
+    /**
+     * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
+     * listWidth has a higher value)
+     */
+    minListWidth : 70,
+    /**
+     * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to
+     * allow the user to set arbitrary text into the field (defaults to false)
+     */
+    forceSelection:false,
+    /**
+     * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
+     * if typeAhead = true (defaults to 250)
+     */
+    typeAheadDelay : 250,
+    /**
+     * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
+     * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)
+     */
+    valueNotFoundText : undefined,
+    /**
+     * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
+     */
+    blockFocus : false,
+    
+    /**
+     * @cfg {Boolean} disableClear Disable showing of clear button.
+     */
+    disableClear : false,
+    /**
+     * @cfg {Boolean} alwaysQuery  Disable caching of results, and always send query
+     */
+    alwaysQuery : false,
+    
+    //private
+    addicon : false,
+    editicon: false,
+    
+    // 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');
+             
+             
+        }
+        if(Roo.isGecko){
+            this.el.dom.setAttribute('autocomplete', 'off');
+        }
+
+        var cls = 'x-combo-list';
+
+        this.list = new Roo.Layer({
+            shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
+        });
+
+        var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
+        this.list.setWidth(lw);
+        this.list.swallowEvent('mousewheel');
+        this.assetHeight = 0;
+
+        if(this.title){
+            this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
+            this.assetHeight += this.header.getHeight();
+        }
+
+        this.innerList = this.list.createChild({cls:cls+'-inner'});
+        this.innerList.on('mouseover', this.onViewOver, this);
+        this.innerList.on('mousemove', this.onViewMove, this);
+        this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
+        
+        if(this.allowBlank && !this.pageSize && !this.disableClear){
+            this.footer = this.list.createChild({cls:cls+'-ft'});
+            this.pageTb = new Roo.Toolbar(this.footer);
+           
+        }
+        if(this.pageSize){
+            this.footer = this.list.createChild({cls:cls+'-ft'});
+            this.pageTb = new Roo.PagingToolbar(this.footer, this.store,
+                    {pageSize: this.pageSize});
+            
+        }
+        
+        if (this.pageTb && this.allowBlank && !this.disableClear) {
+            var _this = this;
+            this.pageTb.add(new Roo.Toolbar.Fill(), {
+                cls: 'x-btn-icon x-btn-clear',
+                text: '&#160;',
+                handler: function()
+                {
+                    _this.collapse();
+                    _this.clearValue();
+                    _this.onSelect(false, -1);
+                }
+            });
+        }
+        if (this.footer) {
+            this.assetHeight += this.footer.getHeight();
+        }
+        
+
+        if(!this.tpl){
+            this.tpl = '<div class="'+cls+'-item">{' + this.displayField + '}</div>';
+        }
+
+        this.view = new Roo.View(this.innerList, this.tpl, {
+            singleSelect:true, store: this.store, selectedClass: this.selectedClass
+        });
+
+        this.view.on('click', this.onViewClick, this);
+
+        this.store.on('beforeload', this.onBeforeLoad, this);
+        this.store.on('load', this.onLoad, this);
+        this.store.on('loadexception', this.onLoadException, this);
+
+        if(this.resizable){
+            this.resizer = new Roo.Resizable(this.list,  {
+               pinned:true, handles:'se'
+            });
+            this.resizer.on('resize', function(r, w, h){
+                this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
+                this.listWidth = w;
+                this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
+                this.restrictHeight();
+            }, this);
+            this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
+        }
+        if(!this.editable){
+            this.editable = true;
+            this.setEditable(false);
+        }  
+        
+        
+        if (typeof(this.events.add.listeners) != 'undefined') {
+            
+            this.addicon = this.wrap.createChild(
+                {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-add' });  
+       
+            this.addicon.on('click', function(e) {
+                this.fireEvent('add', this);
+            }, this);
+        }
+        if (typeof(this.events.edit.listeners) != 'undefined') {
+            
+            this.editicon = this.wrap.createChild(
+                {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-edit' });  
+            if (this.addicon) {
+                this.editicon.setStyle('margin-left', '40px');
+            }
+            this.editicon.on('click', function(e) {
+                
+                // we fire even  if inothing is selected..
+                this.fireEvent('edit', this, this.lastData );
+                
+            }, this);
+        }
+        
+        
+        
+    },
+
+    // private
+    initEvents : function(){
+        Roo.form.ComboBox.superclass.initEvents.call(this);
+
+        this.keyNav = new Roo.KeyNav(this.el, {
+            "up" : function(e){
+                this.inKeyMode = true;
+                this.selectPrev();
+            },
+
+            "down" : function(e){
+                if(!this.isExpanded()){
+                    this.onTriggerClick();
+                }else{
+                    this.inKeyMode = true;
+                    this.selectNext();
+                }
+            },
+
+            "enter" : function(e){
+                this.onViewClick();
+                //return true;
+            },
+
+            "esc" : function(e){
+                this.collapse();
+            },
+
+            "tab" : function(e){
+                this.onViewClick(false);
+                this.fireEvent("specialkey", this, e);
+                return true;
+            },
+
+            scope : this,
+
+            doRelay : function(foo, bar, hname){
+                if(hname == 'down' || this.scope.isExpanded()){
+                   return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
+                }
+                return true;
+            },
+
+            forceKeyDown: true
+        });
+        this.queryDelay = Math.max(this.queryDelay || 10,
+                this.mode == 'local' ? 10 : 250);
+        this.dqTask = new Roo.util.DelayedTask(this.initQuery, this);
+        if(this.typeAhead){
+            this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
+        }
+        if(this.editable !== false){
+            this.el.on("keyup", this.onKeyUp, this);
+        }
+        if(this.forceSelection){
+            this.on('blur', this.doForce, this);
+        }
+    },
+
+    onDestroy : function(){
+        if(this.view){
+            this.view.setStore(null);
+            this.view.el.removeAllListeners();
+            this.view.el.remove();
+            this.view.purgeListeners();
+        }
+        if(this.list){
+            this.list.destroy();
+        }
+        if(this.store){
+            this.store.un('beforeload', this.onBeforeLoad, this);
+            this.store.un('load', this.onLoad, this);
+            this.store.un('loadexception', this.onLoadException, this);
+        }
+        Roo.form.ComboBox.superclass.onDestroy.call(this);
+    },
+
+    // private
+    fireKey : function(e){
+        if(e.isNavKeyPress() && !this.list.isVisible()){
+            this.fireEvent("specialkey", this, e);
+        }
+    },
+
+    // private
+    onResize: function(w, h){
+        Roo.form.ComboBox.superclass.onResize.apply(this, arguments);
+        
+        if(typeof w != 'number'){
+            // we do not handle it!?!?
+            return;
+        }
+        var tw = this.trigger.getWidth();
+        tw += this.addicon ? this.addicon.getWidth() : 0;
+        tw += this.editicon ? this.editicon.getWidth() : 0;
+        var x = w - tw;
+        this.el.setWidth( this.adjustWidth('input', x));
+            
+        this.trigger.setStyle('left', x+'px');
+        
+        if(this.list && this.listWidth === undefined){
+            var lw = Math.max(x + this.trigger.getWidth(), this.minListWidth);
+            this.list.setWidth(lw);
+            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
+        }
+        
+    
+        
+    },
+
+    /**
+     * Allow or prevent the user from directly editing the field text.  If false is passed,
+     * the user will only be able to select from the items defined in the dropdown list.  This method
+     * is the runtime equivalent of setting the 'editable' config option at config time.
+     * @param {Boolean} value True to allow the user to directly edit the field text
+     */
+    setEditable : function(value){
+        if(value == this.editable){
+            return;
+        }
+        this.editable = value;
+        if(!value){
+            this.el.dom.setAttribute('readOnly', true);
+            this.el.on('mousedown', this.onTriggerClick,  this);
+            this.el.addClass('x-combo-noedit');
+        }else{
+            this.el.dom.setAttribute('readOnly', false);
+            this.el.un('mousedown', this.onTriggerClick,  this);
+            this.el.removeClass('x-combo-noedit');
+        }
+    },
+
+    // private
+    onBeforeLoad : function(){
+        if(!this.hasFocus){
+            return;
+        }
+        this.innerList.update(this.loadingText ?
+               '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
+        this.restrictHeight();
+        this.selectedIndex = -1;
+    },
+
+    // private
+    onLoad : function(){
+        if(!this.hasFocus){
+            return;
+        }
+        if(this.store.getCount() > 0){
+            this.expand();
+            this.restrictHeight();
+            if(this.lastQuery == this.allQuery){
+                if(this.editable){
+                    this.el.dom.select();
+                }
+                if(!this.selectByValue(this.value, true)){
+                    this.select(0, true);
+                }
+            }else{
+                this.selectNext();
+                if(this.typeAhead && this.lastKey != Roo.EventObject.BACKSPACE && this.lastKey != Roo.EventObject.DELETE){
+                    this.taTask.delay(this.typeAheadDelay);
+                }
+            }
+        }else{
+            this.onEmptyResults();
+        }
+        //this.el.focus();
+    },
+    // private
+    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);
+        }
+        
+        
+    },
+    // private
+    onTypeAhead : function(){
+        if(this.store.getCount() > 0){
+            var r = this.store.getAt(0);
+            var newValue = r.data[this.displayField];
+            var len = newValue.length;
+            var selStart = this.getRawValue().length;
+            if(selStart != len){
+                this.setRawValue(newValue);
+                this.selectText(selStart, newValue.length);
+            }
+        }
+    },
+
+    // private
+    onSelect : function(record, index){
+        if(this.fireEvent('beforeselect', this, record, index) !== false){
+            this.setFromData(index > -1 ? record.data : false);
+            this.collapse();
+            this.fireEvent('select', this, record, index);
+        }
+    },
+
+    /**
+     * Returns the currently selected field value or empty string if no value is set.
+     * @return {String} value The selected value
+     */
+    getValue : function(){
+        if(this.valueField){
+            return typeof this.value != 'undefined' ? this.value : '';
+        }
+        return Roo.form.ComboBox.superclass.getValue.call(this);
+    },
+
+    /**
+     * Clears any text/value currently set in the field
+     */
+    clearValue : function(){
+        if(this.hiddenField){
+            this.hiddenField.value = '';
+        }
+        this.value = '';
+        this.setRawValue('');
+        this.lastSelectionText = '';
+        
+    },
+
+    /**
+     * Sets the specified value into the field.  If the value finds a match, the corresponding record text
+     * will be displayed in the field.  If the value does not match the data value of an existing item,
+     * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
+     * Otherwise the field will be blank (although the value will still be set).
+     * @param {String} value The value to match
+     */
+    setValue : function(v){
+        var text = v;
+        if(this.valueField){
+            var r = this.findRecord(this.valueField, v);
+            if(r){
+                text = r.data[this.displayField];
+            }else if(this.valueNotFoundText !== undefined){
+                text = this.valueNotFoundText;
+            }
+        }
+        this.lastSelectionText = text;
+        if(this.hiddenField){
+            this.hiddenField.value = v;
+        }
+        Roo.form.ComboBox.superclass.setValue.call(this, text);
+        this.value = v;
+    },
+    /**
+     * @property {Object} the last set data for the element
+     */
+    
+    lastData : false,
+    /**
+     * Sets the value of the field based on a object which is related to the record format for the store.
+     * @param {Object} value the value to set as. or false on reset?
+     */
+    setFromData : function(o){
+        var dv = ''; // display value
+        var vv = ''; // value value..
+        this.lastData = o;
+        if (this.displayField) {
+            dv = !o || typeof(o[this.displayField]) == 'undefined' ? '' : o[this.displayField];
+        } else {
+            // this is an error condition!!!
+            Roo.log('no  displayField value set for '+ (this.name ? this.name : this.id));
+        }
+        
+        if(this.valueField){
+            vv = !o || typeof(o[this.valueField]) == 'undefined' ? dv : o[this.valueField];
+        }
+        if(this.hiddenField){
+            this.hiddenField.value = vv;
+            
+            this.lastSelectionText = dv;
+            Roo.form.ComboBox.superclass.setValue.call(this, dv);
+            this.value = vv;
+            return;
+        }
+        // no hidden field.. - we store the value in 'value', but still display
+        // display field!!!!
+        this.lastSelectionText = dv;
+        Roo.form.ComboBox.superclass.setValue.call(this, dv);
+        this.value = vv;
+        
+        
+    },
+    // private
+    reset : function(){
+        // overridden so that last data is reset..
+        this.setValue(this.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
+            return;
+        }
+        var item = this.view.findItemFromChild(t);
+        if(item){
+            var index = this.view.indexOf(item);
+            this.select(index, false);
+        }
+    },
+
+    // private
+    onViewClick : function(doFocus)
+    {
+        var index = this.view.getSelectedIndexes()[0];
+        var r = this.store.getAt(index);
+        if(r){
+            this.onSelect(r, index);
+        }
+        if(doFocus !== false && !this.blockFocus){
+            this.el.focus();
+        }
+    },
+
+    // private
+    restrictHeight : function(){
+        this.innerList.dom.style.height = '';
+        var inner = this.innerList.dom;
+        var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight);
+        this.innerList.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
+        this.list.beginUpdate();
+        this.list.setHeight(this.innerList.getHeight()+this.list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight);
+        this.list.alignTo(this.el, this.listAlign);
+        this.list.endUpdate();
+    },
+
+    // private
+    onEmptyResults : function(){
+        this.collapse();
+    },
+
+    /**
+     * Returns true if the dropdown list is expanded, else false.
+     */
+    isExpanded : function(){
+        return this.list.isVisible();
+    },
+
+    /**
+     * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
+     * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
+     * @param {String} value The data value of the item to select
+     * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
+     * selected item if it is not currently in view (defaults to true)
+     * @return {Boolean} True if the value matched an item in the list, else false
+     */
+    selectByValue : function(v, scrollIntoView){
+        if(v !== undefined && v !== null){
+            var r = this.findRecord(this.valueField || this.displayField, v);
+            if(r){
+                this.select(this.store.indexOf(r), scrollIntoView);
+                return true;
+            }
+        }
+        return false;
+    },
+
+    /**
+     * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
+     * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
+     * @param {Number} index The zero-based index of the list item to select
+     * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
+     * selected item if it is not currently in view (defaults to true)
+     */
+    select : function(index, scrollIntoView){
+        this.selectedIndex = index;
+        this.view.select(index);
+        if(scrollIntoView !== false){
+            var el = this.view.getNode(index);
+            if(el){
+                this.innerList.scrollChildIntoView(el, false);
+            }
+        }
+    },
+
+    // private
+    selectNext : function(){
+        var ct = this.store.getCount();
+        if(ct > 0){
+            if(this.selectedIndex == -1){
+                this.select(0);
+            }else if(this.selectedIndex < ct-1){
+                this.select(this.selectedIndex+1);
+            }
+        }
+    },
+
+    // private
+    selectPrev : function(){
+        var ct = this.store.getCount();
+        if(ct > 0){
+            if(this.selectedIndex == -1){
+                this.select(0);
+            }else if(this.selectedIndex != 0){
+                this.select(this.selectedIndex-1);
+            }
+        }
+    },
+
+    // private
+    onKeyUp : function(e){
+        if(this.editable !== false && !e.isSpecialKey()){
+            this.lastKey = e.getKey();
+            this.dqTask.delay(this.queryDelay);
+        }
+    },
+
+    // private
+    validateBlur : function(){
+        return !this.list || !this.list.isVisible();   
+    },
+
+    // private
+    initQuery : function(){
+        this.doQuery(this.getRawValue());
+    },
+
+    // private
+    doForce : function(){
+        if(this.el.dom.value.length > 0){
+            this.el.dom.value =
+                this.lastSelectionText === undefined ? '' : this.lastSelectionText;
+             
+        }
+    },
+
+    /**
+     * Execute a query to filter the dropdown list.  Fires the beforequery event prior to performing the
+     * query allowing the query action to be canceled if needed.
+     * @param {String} query The SQL query to execute
+     * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
+     * in the field than the minimum specified by the minChars config option.  It also clears any filter previously
+     * saved in the current store (defaults to false)
+     */
+    doQuery : function(q, forceAll){
+        if(q === undefined || q === null){
+            q = '';
+        }
+        var qe = {
+            query: q,
+            forceAll: forceAll,
+            combo: this,
+            cancel:false
+        };
+        if(this.fireEvent('beforequery', qe)===false || qe.cancel){
+            return false;
+        }
+        q = qe.query;
+        forceAll = qe.forceAll;
+        if(forceAll === true || (q.length >= this.minChars)){
+            if(this.lastQuery != q || this.alwaysQuery){
+                this.lastQuery = q;
+                if(this.mode == 'local'){
+                    this.selectedIndex = -1;
+                    if(forceAll){
+                        this.store.clearFilter();
+                    }else{
+                        this.store.filter(this.displayField, q);
+                    }
+                    this.onLoad();
+                }else{
+                    this.store.baseParams[this.queryParam] = q;
+                    this.store.load({
+                        params: this.getParams(q)
+                    });
+                    this.expand();
+                }
+            }else{
+                this.selectedIndex = -1;
+                this.onLoad();   
+            }
+        }
+    },
+
+    // private
+    getParams : function(q){
+        var p = {};
+        //p[this.queryParam] = q;
+        if(this.pageSize){
+            p.start = 0;
+            p.limit = this.pageSize;
+        }
+        return p;
+    },
+
+    /**
+     * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
+     */
+    collapse : function(){
+        if(!this.isExpanded()){
+            return;
+        }
+        this.list.hide();
+        Roo.get(document).un('mousedown', this.collapseIf, this);
+        Roo.get(document).un('mousewheel', this.collapseIf, this);
+        if (!this.editable) {
+            Roo.get(document).un('keydown', this.listKeyPress, this);
+        }
+        this.fireEvent('collapse', this);
+    },
+
+    // private
+    collapseIf : function(e){
+        if(!e.within(this.wrap) && !e.within(this.list)){
+            this.collapse();
+        }
+    },
+
+    /**
+     * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
+     */
+    expand : function(){
+        if(this.isExpanded() || !this.hasFocus){
+            return;
+        }
+        this.list.alignTo(this.el, this.listAlign);
+        this.list.show();
+        Roo.get(document).on('mousedown', this.collapseIf, this);
+        Roo.get(document).on('mousewheel', this.collapseIf, this);
+        if (!this.editable) {
+            Roo.get(document).on('keydown', this.listKeyPress, this);
+        }
+        
+        this.fireEvent('expand', this);
+    },
+
+    // private
+    // Implements the default empty TriggerField.onTriggerClick function
+    onTriggerClick : function(){
+        if(this.disabled){
+            return;
+        }
+        if(this.isExpanded()){
+            this.collapse();
+            if (!this.blockFocus) {
+                this.el.focus();
+            }
+            
+        }else {
+            this.hasFocus = true;
+            if(this.triggerAction == 'all') {
+                this.doQuery(this.allQuery, true);
+            } else {
+                this.doQuery(this.getRawValue());
+            }
+            if (!this.blockFocus) {
+                this.el.focus();
+            }
+        }
+    },
+    listKeyPress : function(e)
+    {
+        //Roo.log('listkeypress');
+        // scroll to first matching element based on key pres..
+        if (e.isSpecialKey()) {
+            return false;
+        }
+        var k = String.fromCharCode(e.getKey()).toUpperCase();
+        //Roo.log(k);
+        var match  = false;
+        var csel = this.view.getSelectedNodes();
+        var cselitem = false;
+        if (csel.length) {
+            var ix = this.view.indexOf(csel[0]);
+            cselitem  = this.store.getAt(ix);
+            if (!cselitem.get(this.displayField) || cselitem.get(this.displayField).substring(0,1).toUpperCase() != k) {
+                cselitem = false;
+            }
+            
+        }
+        
+        this.store.each(function(v) { 
+            if (cselitem) {
+                // start at existing selection.
+                if (cselitem.id == v.id) {
+                    cselitem = false;
+                }
+                return;
+            }
+                
+            if (v.get(this.displayField) && v.get(this.displayField).substring(0,1).toUpperCase() == k) {
+                match = this.store.indexOf(v);
+                return false;
+            }
+        }, this);
+        
+        if (match === false) {
+            return true; // no more action?
+        }
+        // scroll to?
+        this.view.select(match);
+        var sn = Roo.get(this.view.getSelectedNodes()[0]);
+        sn.scrollIntoView(sn.dom.parentNode, false);
+    }
+
+    /** 
+    * @cfg {Boolean} grow 
+    * @hide 
+    */
+    /** 
+    * @cfg {Number} growMin 
+    * @hide 
+    */
+    /** 
+    * @cfg {Number} growMax 
+    * @hide 
+    */
+    /**
+     * @hide
+     * @method autoSize
+     */
+});/*
+ * Copyright(c) 2010-2012, Roo J Solutions Limited
+ *
+ * Licence LGPL
+ *
+ */
+
+/**
+ * @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...
+ *   
+ *  
+ *
+ 
+ 
+ * @constructor
+ * Create a new ComboBoxArray.
+ * @param {Object} config Configuration options
+ */
+ 
+
+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 {Roo.form.Combo} combo The combo box that is wrapped
+     */
+    
+    lastData : false,
+    
+    // behavies liek a hiddne field
+    inputType:      'hidden',
+    /**
+     * @cfg {Number} width The width of the box that displays the selected element
+     */ 
+    width:          300,
+
+    
+    
+    /**
+     * @cfg {String} name    The name of the visable items on this form (eg. titles not ids)
+     */
+    name : false,
+    /**
+     * @cfg {String} hiddenName    The hidden name of the field, often contains an comma seperated list of names
+     */
+    hiddenName : 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.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);
+        
+        
+    },
+    
+    
+    getName: function()
+    {
+        // returns hidden if it's set..
+        if (!this.rendered) {return ''};
+        return  this.hiddenName ? this.hiddenName : this.name;
+        
+    },
+    
+    
+    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'));
+        }
+        
+    
+        
+    },
+    
+    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..
+    },
+    
+    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.validate();
+    },
+    
+    reset : function()
+    {
+        //Roo.form.ComboBoxArray.superclass.reset.call(this); 
+        this.items.each(function(f) {
+           f.remove(); 
+        });
+        this.el.dom.value = '';
+        if (this.hiddenEl) {
+            this.hiddenEl.dom.value = '';
+        }
+        
+    },
+    getValue: function()
+    {
+        return this.hiddenEl ? this.hiddenEl.dom.value : '';
+    },
+    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(','), 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) {
+                this.addItem(l);
+            }, this);
+             
+        }
+        
+        
+    },
+    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;
+        }
+        var kv = v[this.valueField];
+        var dv = v[this.displayField];
+        kv = typeof(kv) != 'string' ? '' : kv;
+        dv = typeof(dv) != 'string' ? '' : dv;
+        
+        
+        var keys = kv.split(',');
+        var display = dv.split(',');
+        for (var i = 0 ; i < keys.length; i++) {
+            
+            add = {};
+            add[this.valueField] = keys[i];
+            add[this.displayField] = display[i];
+            this.addItem(add);
+        }
+      
+        
+    },
+    
+    /**
+     * 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;
+    },
+    
+    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(','));
+        
+    }
+    
+});
+
+
+
+/**
+ * @class Roo.form.ComboBoxArray.Item
+ * @extends Roo.BoxComponent
+ * A selected item in the list
+ *  Fred [x]  Brian [x]  [Pick another |v]
+ * 
+ * @constructor
+ * Create a new item.
+ * @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,
+    
+    
+    defaultAutoCreate : {
+        tag: 'div',
+        cls: 'x-cbarray-item',
+        cn : [ 
+            { tag: 'div' },
+            {
+                tag: 'img',
+                width:16,
+                height : 16,
+                src : Roo.BLANK_IMAGE_URL ,
+                align: 'center'
+            }
+        ]
+        
+    },
+    
+ 
+    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);
+        
+    },
+   
+    remove : function()
+    {
+        if(this.cb.disabled){
+            return;
+        }
+        
+        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);
+        }
+        
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.form.Checkbox
+ * @extends Roo.form.Field
+ * Single checkbox field.  Can be used as a direct replacement for traditional checkbox fields.
+ * @constructor
+ * Creates a new Checkbox
+ * @param {Object} config Configuration options
+ */
+Roo.form.Checkbox = function(config){
+    Roo.form.Checkbox.superclass.constructor.call(this, config);
+    this.addEvents({
+        /**
+         * @event check
+         * Fires when the checkbox is checked or unchecked.
+	     * @param {Roo.form.Checkbox} this This checkbox
+	     * @param {Boolean} checked The new checked value
+	     */
+        check : true
+    });
+};
+
+Roo.extend(Roo.form.Checkbox, Roo.form.Field,  {
+    /**
+     * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
+     */
+    focusClass : undefined,
+    /**
+     * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
+     */
+    fieldClass: "x-form-field",
+    /**
+     * @cfg {Boolean} checked True if the the checkbox should render already checked (defaults to false)
+     */
+    checked: false,
+    /**
+     * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+     * {tag: "input", type: "checkbox", autocomplete: "off"})
+     */
+    defaultAutoCreate : { tag: "input", type: 'hidden', autocomplete: "off"},
+    /**
+     * @cfg {String} boxLabel The text that appears beside the checkbox
+     */
+    boxLabel : "",
+    /**
+     * @cfg {String} inputValue The value that should go into the generated input element's value attribute
+     */  
+    inputValue : '1',
+    /**
+     * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
+     */
+     valueOff: '0', // value when not checked..
+
+    actionMode : 'viewEl', 
+    //
+    // private
+    itemCls : 'x-menu-check-item x-form-item',
+    groupClass : 'x-menu-group-item',
+    inputType : 'hidden',
+    
+    
+    inSetChecked: false, // check that we are not calling self...
+    
+    inputElement: false, // real input element?
+    basedOn: false, // ????
+    
+    isFormField: true, // not sure where this is needed!!!!
+
+    onResize : function(){
+        Roo.form.Checkbox.superclass.onResize.apply(this, arguments);
+        if(!this.boxLabel){
+            this.el.alignTo(this.wrap, 'c-c');
+        }
+    },
+
+    initEvents : function(){
+        Roo.form.Checkbox.superclass.initEvents.call(this);
+        this.el.on("click", this.onClick,  this);
+        this.el.on("change", this.onClick,  this);
+    },
+
+
+    getResizeEl : function(){
+        return this.wrap;
+    },
+
+    getPositionEl : function(){
+        return this.wrap;
+    },
+
+    // private
+    onRender : function(ct, position){
+        Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
+        /*
+        if(this.inputValue !== undefined){
+            this.el.dom.value = this.inputValue;
+        }
+        */
+        //this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
+        this.wrap = this.el.wrap({cls: 'x-menu-check-item '});
+        var viewEl = this.wrap.createChild({ 
+            tag: 'img', cls: 'x-menu-item-icon', style: 'margin: 0px;' ,src : Roo.BLANK_IMAGE_URL });
+        this.viewEl = viewEl;   
+        this.wrap.on('click', this.onClick,  this); 
+        
+        this.el.on('DOMAttrModified', this.setFromHidden,  this); //ff
+        this.el.on('propertychange', this.setFromHidden,  this);  //ie
+        
+        
+        
+        if(this.boxLabel){
+            this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
+        //    viewEl.on('click', this.onClick,  this); 
+        }
+        //if(this.checked){
+            this.setChecked(this.checked);
+        //}else{
+            //this.checked = this.el.dom;
+        //}
+
+    },
+
+    // private
+    initValue : Roo.emptyFn,
+
+    /**
+     * Returns the checked state of the checkbox.
+     * @return {Boolean} True if checked, else false
+     */
+    getValue : function(){
+        if(this.el){
+            return String(this.el.dom.value) == String(this.inputValue ) ? this.inputValue : this.valueOff;
+        }
+        return this.valueOff;
+        
+    },
+
+	// private
+    onClick : function(){ 
+        if (this.disabled) {
+            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){
+        
+        
+        //this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
+        //if(this.el && this.el.dom){
+        //    this.el.dom.checked = this.checked;
+        //    this.el.dom.defaultChecked = this.checked;
+        //}
+        this.setChecked(String(v) === String(this.inputValue), suppressEvent);
+        //this.fireEvent("check", this, this.checked);
+    },
+    // private..
+    setChecked : function(state,suppressEvent)
+    {
+        if (this.inSetChecked) {
+            this.checked = state;
+            return;
+        }
+        
+    
+        if(this.wrap){
+            this.wrap[state ? 'addClass' : 'removeClass']('x-menu-item-checked');
+        }
+        this.checked = state;
+        if(suppressEvent !== true){
+            this.fireEvent('check', this, state);
+        }
+        this.inSetChecked = true;
+        this.el.dom.value = state ? this.inputValue : this.valueOff;
+        this.inSetChecked = false;
+        
+    },
+    // handle setting of hidden value by some other method!!?!?
+    setFromHidden: function()
+    {
+        if(!this.el){
+            return;
+        }
+        //console.log("SET FROM HIDDEN");
+        //alert('setFrom hidden');
+        this.setValue(this.el.dom.value);
+    },
+    
+    onDestroy : function()
+    {
+        if(this.viewEl){
+            Roo.get(this.viewEl).remove();
+        }
+         
+        Roo.form.Checkbox.superclass.onDestroy.call(this);
+    }
+
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+/**
+ * @class Roo.form.Radio
+ * @extends Roo.form.Checkbox
+ * Single radio field.  Same as Checkbox, but provided as a convenience for automatically setting the input type.
+ * Radio grouping is handled automatically by the browser if you give each radio in a group the same name.
+ * @constructor
+ * Creates a new Radio
+ * @param {Object} config Configuration options
+ */
+Roo.form.Radio = function(){
+    Roo.form.Radio.superclass.constructor.apply(this, arguments);
+};
+Roo.extend(Roo.form.Radio, Roo.form.Checkbox, {
+    inputType: 'radio',
+
+    /**
+     * If this radio is part of a group, it will return the selected value
+     * @return {String}
+     */
+    getGroupValue : function(){
+        return this.el.up('form').child('input[name='+this.el.dom.name+']:checked', true).value;
+    },
+    
+    
+    onRender : function(ct, position){
+        Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
+        
+        if(this.inputValue !== undefined){
+            this.el.dom.value = this.inputValue;
+        }
+         
+        this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
+        //this.wrap = this.el.wrap({cls: 'x-menu-check-item '});
+        //var viewEl = this.wrap.createChild({ 
+        //    tag: 'img', cls: 'x-menu-item-icon', style: 'margin: 0px;' ,src : Roo.BLANK_IMAGE_URL });
+        //this.viewEl = viewEl;   
+        //this.wrap.on('click', this.onClick,  this); 
+        
+        //this.el.on('DOMAttrModified', this.setFromHidden,  this); //ff
+        //this.el.on('propertychange', this.setFromHidden,  this);  //ie
+        
+        
+        
+        if(this.boxLabel){
+            this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
+        //    viewEl.on('click', this.onClick,  this); 
+        }
+         if(this.checked){
+            this.el.dom.checked =   'checked' ;
+        }
+         
+    } 
+    
+    
+});//<script type="text/javascript">
+
+/*
+ * Based  Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * LGPL
+ *
+ */
+ 
+/**
+ * @class Roo.HtmlEditorCore
+ * @extends Roo.Component
+ * Provides a the editing component for the HTML editors in Roo. (bootstrap and Roo.form)
+ *
+ * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
+ */
+
+Roo.HtmlEditorCore = function(config){
+    
+    
+    Roo.HtmlEditorCore.superclass.constructor.call(this, config);
+    
+    
+    this.addEvents({
+        /**
+         * @event initialize
+         * Fires when the editor is fully initialized (including the iframe)
+         * @param {Roo.HtmlEditorCore} this
+         */
+        initialize: true,
+        /**
+         * @event activate
+         * Fires when the editor is first receives the focus. Any insertion must wait
+         * until after this event.
+         * @param {Roo.HtmlEditorCore} this
+         */
+        activate: true,
+         /**
+         * @event beforesync
+         * Fires before the textarea is updated with content from the editor iframe. Return false
+         * to cancel the sync.
+         * @param {Roo.HtmlEditorCore} this
+         * @param {String} html
+         */
+        beforesync: true,
+         /**
+         * @event beforepush
+         * Fires before the iframe editor is updated with content from the textarea. Return false
+         * to cancel the push.
+         * @param {Roo.HtmlEditorCore} this
+         * @param {String} html
+         */
+        beforepush: true,
+         /**
+         * @event sync
+         * Fires when the textarea is updated with content from the editor iframe.
+         * @param {Roo.HtmlEditorCore} this
+         * @param {String} html
+         */
+        sync: true,
+         /**
+         * @event push
+         * Fires when the iframe editor is updated with content from the textarea.
+         * @param {Roo.HtmlEditorCore} this
+         * @param {String} html
+         */
+        push: true,
+        
+        /**
+         * @event editorevent
+         * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
+         * @param {Roo.HtmlEditorCore} this
+         */
+        editorevent: true
+        
+    });
+    
+    // at this point this.owner is set, so we can start working out the whitelisted / blacklisted elements
+    
+    // defaults : white / black...
+    this.applyBlacklists();
+    
+    
+    
+};
+
+
+Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
+
+
+     /**
+     * @cfg {Roo.form.HtmlEditor|Roo.bootstrap.HtmlEditor} the owner field 
+     */
+    
+    owner : false,
+    
+     /**
+     * @cfg {String} resizable  's' or 'se' or 'e' - wrapps the element in a
+     *                        Roo.resizable.
+     */
+    resizable : false,
+     /**
+     * @cfg {Number} height (in pixels)
+     */   
+    height: 300,
+   /**
+     * @cfg {Number} width (in pixels)
+     */   
+    width: 500,
+    
+    /**
+     * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
+     * 
+     */
+    stylesheets: false,
+    
+    // id of frame..
+    frameId: false,
+    
+    // private properties
+    validationEvent : false,
+    deferHeight: true,
+    initialized : false,
+    activated : false,
+    sourceEditMode : false,
+    onFocus : Roo.emptyFn,
+    iframePad:3,
+    hideMode:'offsets',
+    
+    clearUp: true,
+    
+    // blacklist + whitelisted elements..
+    black: false,
+    white: 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
+     * want to change the initialization markup of the iframe (e.g. to add stylesheets).
+     */
+    getDocMarkup : function(){
+        // body styles..
+        var st = '';
+        
+        // inherit styels from page...?? 
+        if (this.stylesheets === false) {
+            
+            Roo.get(document.head).select('style').each(function(node) {
+                st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
+            });
+            
+            Roo.get(document.head).select('link').each(function(node) { 
+                st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
+            });
+            
+        } else if (!this.stylesheets.length) {
+                // simple..
+                st = '<style type="text/css">' +
+                    'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
+                   '</style>';
+        } else { 
+            
+        }
+        
+        st +=  '<style type="text/css">' +
+            'IMG { cursor: pointer } ' +
+        '</style>';
+
+        
+        return '<html><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>';
+    },
+
+    // private
+    onRender : function(ct, position)
+    {
+        var _t = this;
+        //Roo.HtmlEditorCore.superclass.onRender.call(this, ct, position);
+        this.el = this.owner.inputEl ? this.owner.inputEl() : this.owner.el;
+        
+        
+        this.el.dom.style.border = '0 none';
+        this.el.dom.setAttribute('tabIndex', -1);
+        this.el.addClass('x-hidden hide');
+        
+        
+        
+        if(Roo.isIE){ // fix IE 1px bogus margin
+            this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
+        }
+       
+        
+        this.frameId = Roo.id();
+        
+         
+        
+        var iframe = this.owner.wrap.createChild({
+            tag: 'iframe',
+            cls: 'form-control', // bootstrap..
+            id: this.frameId,
+            name: this.frameId,
+            frameBorder : 'no',
+            'src' : Roo.SSL_SECURE_URL ? Roo.SSL_SECURE_URL  :  "javascript:false"
+        }, this.el
+        );
+        
+        
+        this.iframe = iframe.dom;
+
+         this.assignDocWin();
+        
+        this.doc.designMode = 'on';
+       
+        this.doc.open();
+        this.doc.write(this.getDocMarkup());
+        this.doc.close();
+
+        
+        var task = { // must defer to wait for browser to be ready
+            run : function(){
+                //console.log("run task?" + this.doc.readyState);
+                this.assignDocWin();
+                if(this.doc.body || this.doc.readyState == 'complete'){
+                    try {
+                        this.doc.designMode="on";
+                    } catch (e) {
+                        return;
+                    }
+                    Roo.TaskMgr.stop(task);
+                    this.initEditor.defer(10, this);
+                }
+            },
+            interval : 10,
+            duration: 10000,
+            scope: this
+        };
+        Roo.TaskMgr.start(task);
+
+    },
+
+    // private
+    onResize : function(w, h)
+    {
+         Roo.log('resize: ' +w + ',' + h );
+        //Roo.HtmlEditorCore.superclass.onResize.apply(this, arguments);
+        if(!this.iframe){
+            return;
+        }
+        if(typeof w == 'number'){
+            
+            this.iframe.style.width = w + 'px';
+        }
+        if(typeof h == 'number'){
+            
+            this.iframe.style.height = h + 'px';
+            if(this.doc){
+                (this.doc.body || this.doc.documentElement).style.height = (h - (this.iframePad*2)) + 'px';
+            }
+        }
+        
+    },
+
+    /**
+     * Toggles the editor between standard and source edit mode.
+     * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
+     */
+    toggleSourceEdit : function(sourceEditMode){
+        
+        this.sourceEditMode = sourceEditMode === true;
+        
+        if(this.sourceEditMode){
+ 
+            Roo.get(this.iframe).addClass(['x-hidden','hide']);     //FIXME - what's the BS styles for these
+            
+        }else{
+            Roo.get(this.iframe).removeClass(['x-hidden','hide']);
+            //this.iframe.className = '';
+            this.deferFocus();
+        }
+        //this.setSize(this.owner.wrap.getSize());
+        //this.fireEvent('editmodechange', this, this.sourceEditMode);
+    },
+
+    
+  
+
+    /**
+     * Protected method that will not generally be called directly. If you need/want
+     * custom HTML cleanup, this is the method you should override.
+     * @param {String} html The HTML to be cleaned
+     * return {String} The cleaned HTML
+     */
+    cleanHtml : function(html){
+        html = String(html);
+        if(html.length > 5){
+            if(Roo.isSafari){ // strip safari nonsense
+                html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
+            }
+        }
+        if(html == '&nbsp;'){
+            html = '';
+        }
+        return html;
+    },
+
+    /**
+     * HTML Editor -> Textarea
+     * Protected method that will not generally be called directly. Syncs the contents
+     * of the editor iframe with the textarea.
+     */
+    syncValue : function(){
+        if(this.initialized){
+            var bd = (this.doc.body || this.doc.documentElement);
+            //this.cleanUpPaste(); -- this is done else where and causes havoc..
+            var html = bd.innerHTML;
+            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;
+                if(m && m[1]){
+                    html = '<div style="'+m[0]+'">' + html + '</div>';
+                }
+            }
+            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 (
+                    (cc >= 0x4E00 && cc < 0xA000 ) ||
+                    (cc >= 0x3400 && cc < 0x4E00 ) ||
+                    (cc >= 0xf900 && cc < 0xfb00 )
+                ) {
+                        return b;
+                }
+                return "&#"+cc+";" 
+            });
+            if(this.owner.fireEvent('beforesync', this, html) !== false){
+                this.el.dom.value = html;
+                this.owner.fireEvent('sync', this, html);
+            }
+        }
+    },
+
+    /**
+     * Protected method that will not generally be called directly. Pushes the value of the textarea
+     * into the iframe editor.
+     */
+    pushValue : function(){
+        if(this.initialized){
+            var v = this.el.dom.value.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);
+            }
+        }
+    },
+
+    // private
+    deferFocus : function(){
+        this.focus.defer(10, this);
+    },
+
+    // doc'ed in Field
+    focus : function(){
+        if(this.win && !this.sourceEditMode){
+            this.win.focus();
+        }else{
+            this.el.focus();
+        }
+    },
+    
+    assignDocWin: function()
+    {
+        var iframe = this.iframe;
+        
+         if(Roo.isIE){
+            this.doc = iframe.contentWindow.document;
+            this.win = iframe.contentWindow;
+        } else {
+//            if (!Roo.get(this.frameId)) {
+//                return;
+//            }
+//            this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
+//            this.win = Roo.get(this.frameId).dom.contentWindow;
+            
+            if (!Roo.get(this.frameId) && !iframe.contentDocument) {
+                return;
+            }
+            
+            this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
+            this.win = (iframe.contentWindow || Roo.get(this.frameId).dom.contentWindow);
+        }
+    },
+    
+    // private
+    initEditor : function(){
+        //console.log("INIT EDITOR");
+        this.assignDocWin();
+        
+        
+        
+        this.doc.designMode="on";
+        this.doc.open();
+        this.doc.write(this.getDocMarkup());
+        this.doc.close();
+        
+        var dbody = (this.doc.body || this.doc.documentElement);
+        //var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
+        // this copies styles from the containing element into thsi one..
+        // not sure why we need all of this..
+        //var ss = this.el.getStyles('font-size', 'background-image', 'background-repeat');
+        
+        //var ss = this.el.getStyles( 'background-image', 'background-repeat');
+        //ss['background-attachment'] = 'fixed'; // w3c
+        dbody.bgProperties = 'fixed'; // ie
+        //Roo.DomHelper.applyStyles(dbody, ss);
+        Roo.EventManager.on(this.doc, {
+            //'mousedown': this.onEditorEvent,
+            'mouseup': this.onEditorEvent,
+            'dblclick': this.onEditorEvent,
+            'click': this.onEditorEvent,
+            'keyup': this.onEditorEvent,
+            buffer:100,
+            scope: this
+        });
+        if(Roo.isGecko){
+            Roo.EventManager.on(this.doc, 'keypress', this.mozKeyPress, this);
+        }
+        if(Roo.isIE || Roo.isSafari || Roo.isOpera){
+            Roo.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
+        }
+        this.initialized = true;
+
+        this.owner.fireEvent('initialize', this);
+        this.pushValue();
+    },
+
+    // private
+    onDestroy : function(){
+        
+        
+        
+        if(this.rendered){
+            
+            //for (var i =0; i < this.toolbars.length;i++) {
+            //    // fixme - ask toolbars for heights?
+            //    this.toolbars[i].onDestroy();
+           // }
+            
+            //this.wrap.dom.innerHTML = '';
+            //this.wrap.remove();
+        }
+    },
+
+    // private
+    onFirstFocus : function(){
+        
+        this.assignDocWin();
+        
+        
+        this.activated = true;
+         
+    
+        if(Roo.isGecko){ // prevent silly gecko errors
+            this.win.focus();
+            var s = this.win.getSelection();
+            if(!s.focusNode || s.focusNode.nodeType != 3){
+                var r = s.getRangeAt(0);
+                r.selectNodeContents((this.doc.body || this.doc.documentElement));
+                r.collapse(true);
+                this.deferFocus();
+            }
+            try{
+                this.execCmd('useCSS', true);
+                this.execCmd('styleWithCSS', false);
+            }catch(e){}
+        }
+        this.owner.fireEvent('activate', this);
+    },
+
+    // private
+    adjustFont: function(btn){
+        var adjust = btn.cmd == 'increasefontsize' ? 1 : -1;
+        //if(Roo.isSafari){ // safari
+        //    adjust *= 2;
+       // }
+        var v = parseInt(this.doc.queryCommandValue('FontSize')|| 3, 10);
+        if(Roo.isSafari){ // safari
+            var sm = { 10 : 1, 13: 2, 16:3, 18:4, 24: 5, 32:6, 48: 7 };
+            v =  (v < 10) ? 10 : v;
+            v =  (v > 48) ? 48 : v;
+            v = typeof(sm[v]) == 'undefined' ? 1 : sm[v];
+            
+        }
+        
+        
+        v = Math.max(1, v+adjust);
+        
+        this.execCmd('FontSize', v  );
+    },
+
+    onEditorEvent : function(e)
+    {
+        this.owner.fireEvent('editorevent', this, e);
+      //  this.updateToolbar();
+        this.syncValue(); //we can not sync so often.. sync cleans, so this breaks stuff
+    },
+
+    insertTag : function(tg)
+    {
+        // could be a bit smarter... -> wrap the current selected tRoo..
+        if (tg.toLowerCase() == 'span' || tg.toLowerCase() == 'code') {
+            
+            range = this.createRange(this.getSelection());
+            var wrappingNode = this.doc.createElement(tg.toLowerCase());
+            wrappingNode.appendChild(range.extractContents());
+            range.insertNode(wrappingNode);
+
+            return;
+            
+            
+            
+        }
+        this.execCmd("formatblock",   tg);
+        
+    },
+    
+    insertText : function(txt)
+    {
+        
+        
+        var range = this.createRange();
+        range.deleteContents();
+               //alert(Sender.getAttribute('label'));
+               
+        range.insertNode(this.doc.createTextNode(txt));
+    } ,
+    
+     
+
+    /**
+     * Executes a Midas editor command on the editor document and performs necessary focus and
+     * toolbar updates. <b>This should only be called after the editor is initialized.</b>
+     * @param {String} cmd The Midas command
+     * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
+     */
+    relayCmd : function(cmd, value){
+        this.win.focus();
+        this.execCmd(cmd, value);
+        this.owner.fireEvent('editorevent', this);
+        //this.updateToolbar();
+        this.owner.deferFocus();
+    },
+
+    /**
+     * Executes a Midas editor command directly on the editor document.
+     * For visual commands, you should use {@link #relayCmd} instead.
+     * <b>This should only be called after the editor is initialized.</b>
+     * @param {String} cmd The Midas command
+     * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
+     */
+    execCmd : function(cmd, value){
+        this.doc.execCommand(cmd, false, value === undefined ? null : value);
+        this.syncValue();
+    },
+ 
+ 
+   
+    /**
+     * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
+     * to insert tRoo.
+     * @param {String} text | dom node.. 
+     */
+    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();
+            
+            
+            // from jquery ui (MIT licenced)
+            var range, node;
+            var win = this.win;
+            
+            if (win.getSelection && win.getSelection().getRangeAt) {
+                range = win.getSelection().getRangeAt(0);
+                node = typeof(text) == 'string' ? range.createContextualFragment(text) : text;
+                range.insertNode(node);
+            } 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();
+        }
+    },
+ // private
+    mozKeyPress : function(e){
+        if(e.ctrlKey){
+            var c = e.getCharCode(), cmd;
+          
+            if(c > 0){
+                c = String.fromCharCode(c).toLowerCase();
+                switch(c){
+                    case 'b':
+                        cmd = 'bold';
+                        break;
+                    case 'i':
+                        cmd = 'italic';
+                        break;
+                    
+                    case 'u':
+                        cmd = 'underline';
+                        break;
+                    
+                    case 'v':
+                        this.cleanUpPaste.defer(100, this);
+                        return;
+                        
+                }
+                if(cmd){
+                    this.win.focus();
+                    this.execCmd(cmd);
+                    this.deferFocus();
+                    e.preventDefault();
+                }
+                
+            }
+        }
+    },
+
+    // private
+    fixKeys : function(){ // load time branching for fastest keydown performance
+        if(Roo.isIE){
+            return function(e){
+                var k = e.getKey(), r;
+                if(k == e.TAB){
+                    e.stopEvent();
+                    r = this.doc.selection.createRange();
+                    if(r){
+                        r.collapse(true);
+                        r.pasteHTML('&#160;&#160;&#160;&#160;');
+                        this.deferFocus();
+                    }
+                    return;
+                }
+                
+                if(k == e.ENTER){
+                    r = this.doc.selection.createRange();
+                    if(r){
+                        var target = r.parentElement();
+                        if(!target || target.tagName.toLowerCase() != 'li'){
+                            e.stopEvent();
+                            r.pasteHTML('<br />');
+                            r.collapse(false);
+                            r.select();
+                        }
+                    }
+                }
+                if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
+                    this.cleanUpPaste.defer(100, this);
+                    return;
+                }
+                
+                
+            };
+        }else if(Roo.isOpera){
+            return function(e){
+                var k = e.getKey();
+                if(k == e.TAB){
+                    e.stopEvent();
+                    this.win.focus();
+                    this.execCmd('InsertHTML','&#160;&#160;&#160;&#160;');
+                    this.deferFocus();
+                }
+                if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
+                    this.cleanUpPaste.defer(100, this);
+                    return;
+                }
+                
+            };
+        }else if(Roo.isSafari){
+            return function(e){
+                var k = e.getKey();
+                
+                if(k == e.TAB){
+                    e.stopEvent();
+                    this.execCmd('InsertText','\t');
+                    this.deferFocus();
+                    return;
+                }
+               if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
+                    this.cleanUpPaste.defer(100, this);
+                    return;
+                }
+                
+             };
+        }
+    }(),
+    
+    getAllAncestors: function()
+    {
+        var p = this.getSelectedNode();
+        var a = [];
+        if (!p) {
+            a.push(p); // push blank onto stack..
+            p = this.getParentElement();
+        }
+        
+        
+        while (p && (p.nodeType == 1) && (p.tagName.toLowerCase() != 'body')) {
+            a.push(p);
+            p = p.parentNode;
+        }
+        a.push(this.doc.body);
+        return a;
+    },
+    lastSel : false,
+    lastSelNode : false,
+    
+    
+    getSelection : function() 
+    {
+        this.assignDocWin();
+        return Roo.isIE ? this.doc.selection : this.win.getSelection();
+    },
+    
+    getSelectedNode: function() 
+    {
+        // this may only work on Gecko!!!
+        
+        // should we cache this!!!!
+        
+        
+        
+         
+        var range = this.createRange(this.getSelection()).cloneRange();
+        
+        if (Roo.isIE) {
+            var parent = range.parentElement();
+            while (true) {
+                var testRange = range.duplicate();
+                testRange.moveToElementText(parent);
+                if (testRange.inRange(range)) {
+                    break;
+                }
+                if ((parent.nodeType != 1) || (parent.tagName.toLowerCase() == 'body')) {
+                    break;
+                }
+                parent = parent.parentElement;
+            }
+            return parent;
+        }
+        
+        // is ancestor a text element.
+        var ac =  range.commonAncestorContainer;
+        if (ac.nodeType == 3) {
+            ac = ac.parentNode;
+        }
+        
+        var ar = ac.childNodes;
+         
+        var nodes = [];
+        var other_nodes = [];
+        var has_other_nodes = false;
+        for (var i=0;i<ar.length;i++) {
+            if ((ar[i].nodeType == 3) && (!ar[i].data.length)) { // empty text ? 
+                continue;
+            }
+            // fullly contained node.
+            
+            if (this.rangeIntersectsNode(range,ar[i]) && this.rangeCompareNode(range,ar[i]) == 3) {
+                nodes.push(ar[i]);
+                continue;
+            }
+            
+            // probably selected..
+            if ((ar[i].nodeType == 1) && this.rangeIntersectsNode(range,ar[i]) && (this.rangeCompareNode(range,ar[i]) > 0)) {
+                other_nodes.push(ar[i]);
+                continue;
+            }
+            // outer..
+            if (!this.rangeIntersectsNode(range,ar[i])|| (this.rangeCompareNode(range,ar[i]) == 0))  {
+                continue;
+            }
+            
+            
+            has_other_nodes = true;
+        }
+        if (!nodes.length && other_nodes.length) {
+            nodes= other_nodes;
+        }
+        if (has_other_nodes || !nodes.length || (nodes.length > 1)) {
+            return false;
+        }
+        
+        return nodes[0];
+    },
+    createRange: function(sel)
+    {
+        // this has strange effects when using with 
+        // top toolbar - not sure if it's a great idea.
+        //this.editor.contentWindow.focus();
+        if (typeof sel != "undefined") {
+            try {
+                return sel.getRangeAt ? sel.getRangeAt(0) : sel.createRange();
+            } catch(e) {
+                return this.doc.createRange();
+            }
+        } else {
+            return this.doc.createRange();
+        }
+    },
+    getParentElement: function()
+    {
+        
+        this.assignDocWin();
+        var sel = Roo.isIE ? this.doc.selection : this.win.getSelection();
+        
+        var range = this.createRange(sel);
+         
+        try {
+            var p = range.commonAncestorContainer;
+            while (p.nodeType == 3) { // text node
+                p = p.parentNode;
+            }
+            return p;
+        } catch (e) {
+            return null;
+        }
+    
+    },
+    /***
+     *
+     * Range intersection.. the hard stuff...
+     *  '-1' = before
+     *  '0' = hits..
+     *  '1' = after.
+     *         [ -- selected range --- ]
+     *   [fail]                        [fail]
+     *
+     *    basically..
+     *      if end is before start or  hits it. fail.
+     *      if start is after end or hits it fail.
+     *
+     *   if either hits (but other is outside. - then it's not 
+     *   
+     *    
+     **/
+    
+    
+    // @see http://www.thismuchiknow.co.uk/?p=64.
+    rangeIntersectsNode : function(range, node)
+    {
+        var nodeRange = node.ownerDocument.createRange();
+        try {
+            nodeRange.selectNode(node);
+        } catch (e) {
+            nodeRange.selectNodeContents(node);
+        }
+    
+        var rangeStartRange = range.cloneRange();
+        rangeStartRange.collapse(true);
+    
+        var rangeEndRange = range.cloneRange();
+        rangeEndRange.collapse(false);
+    
+        var nodeStartRange = nodeRange.cloneRange();
+        nodeStartRange.collapse(true);
+    
+        var nodeEndRange = nodeRange.cloneRange();
+        nodeEndRange.collapse(false);
+    
+        return rangeStartRange.compareBoundaryPoints(
+                 Range.START_TO_START, nodeEndRange) == -1 &&
+               rangeEndRange.compareBoundaryPoints(
+                 Range.START_TO_START, nodeStartRange) == 1;
+        
+         
+    },
+    rangeCompareNode : function(range, node)
+    {
+        var nodeRange = node.ownerDocument.createRange();
+        try {
+            nodeRange.selectNode(node);
+        } catch (e) {
+            nodeRange.selectNodeContents(node);
+        }
+        
+        
+        range.collapse(true);
+    
+        nodeRange.collapse(true);
+     
+        var ss = range.compareBoundaryPoints( Range.START_TO_START, nodeRange);
+        var ee = range.compareBoundaryPoints(  Range.END_TO_END, nodeRange);
+         
+        //Roo.log(node.tagName + ': ss='+ss +', ee='+ee)
+        
+        var nodeIsBefore   =  ss == 1;
+        var nodeIsAfter    = ee == -1;
+        
+        if (nodeIsBefore && nodeIsAfter) {
+            return 0; // outer
+        }
+        if (!nodeIsBefore && nodeIsAfter) {
+            return 1; //right trailed.
+        }
+        
+        if (nodeIsBefore && !nodeIsAfter) {
+            return 2;  // left trailed.
+        }
+        // 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 output = input;
+        Roo.each(he.swapCodes, function(sw) { 
+            var swapper = new RegExp("\\u" + sw[0].toString(16), "g"); // hex codes
+            
+            output = output.replace(swapper, sw[1]);
+        });
+        
+        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);
+        
+        
+    },
+    
+    /**
+     * Clean up MS wordisms...
+     */
+    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);
+        
+        
+        
+    },
+    /**
+     * 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..
+     *
+     */
+    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);
+        
+        
+    },
+    
+    
+    
+    
+    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.white = [];
+        this.black = [];
+        Roo.each(Roo.HtmlEditorCore.white, function(tag) {
+            if (b.indexOf(tag) > -1) {
+                return;
+            }
+            this.white.push(tag);
+            
+        }, this);
+        
+        Roo.each(w, function(tag) {
+            if (b.indexOf(tag) > -1) {
+                return;
+            }
+            if (this.white.indexOf(tag) > -1) {
+                return;
+            }
+            this.white.push(tag);
+            
+        }, this);
+        
+        
+        Roo.each(Roo.HtmlEditorCore.black, function(tag) {
+            if (w.indexOf(tag) > -1) {
+                return;
+            }
+            this.black.push(tag);
+            
+        }, this);
+        
+        Roo.each(b, function(tag) {
+            if (w.indexOf(tag) > -1) {
+                return;
+            }
+            if (this.black.indexOf(tag) > -1) {
+                return;
+            }
+            this.black.push(tag);
+            
+        }, this);
+        
+        
+        w = typeof(this.owner.cwhite) != 'undefined' && this.owner.cwhite ? this.owner.cwhite  : [];
+        b = typeof(this.owner.cblack) != 'undefined' && this.owner.cblack ? this.owner.cblack :  [];
+        
+        this.cwhite = [];
+        this.cblack = [];
+        Roo.each(Roo.HtmlEditorCore.cwhite, function(tag) {
+            if (b.indexOf(tag) > -1) {
+                return;
+            }
+            this.cwhite.push(tag);
+            
+        }, this);
+        
+        Roo.each(w, function(tag) {
+            if (b.indexOf(tag) > -1) {
+                return;
+            }
+            if (this.cwhite.indexOf(tag) > -1) {
+                return;
+            }
+            this.cwhite.push(tag);
+            
+        }, this);
+        
+        
+        Roo.each(Roo.HtmlEditorCore.cblack, function(tag) {
+            if (w.indexOf(tag) > -1) {
+                return;
+            }
+            this.cblack.push(tag);
+            
+        }, this);
+        
+        Roo.each(b, function(tag) {
+            if (w.indexOf(tag) > -1) {
+                return;
+            }
+            if (this.cblack.indexOf(tag) > -1) {
+                return;
+            }
+            this.cblack.push(tag);
+            
+        }, this);
+    },
+    
+    setStylesheets : function(stylesheets)
+    {
+        if(typeof(stylesheets) == 'string'){
+            Roo.get(this.iframe.contentDocument.head).createChild({
+                tag : 'link',
+                rel : 'stylesheet',
+                type : 'text/css',
+                href : stylesheets
+            });
+            
+            return;
+        }
+        var _this = this;
+     
+        Roo.each(stylesheets, function(s) {
+            if(!s.length){
+                return;
+            }
+            
+            Roo.get(_this.iframe.contentDocument.head).createChild({
+                tag : 'link',
+                rel : 'stylesheet',
+                type : 'text/css',
+                href : s
+            });
+        });
+
+        
+    },
+    
+    removeStylesheets : function()
+    {
+        var _this = this;
+        
+        Roo.each(Roo.get(_this.iframe.contentDocument.head).select('link[rel=stylesheet]', true).elements, function(s){
+            s.remove();
+        });
+    }
+    
+    // hide stuff that is not compatible
+    /**
+     * @event blur
+     * @hide
+     */
+    /**
+     * @event change
+     * @hide
+     */
+    /**
+     * @event focus
+     * @hide
+     */
+    /**
+     * @event specialkey
+     * @hide
+     */
+    /**
+     * @cfg {String} fieldClass @hide
+     */
+    /**
+     * @cfg {String} focusClass @hide
+     */
+    /**
+     * @cfg {String} autoCreate @hide
+     */
+    /**
+     * @cfg {String} inputType @hide
+     */
+    /**
+     * @cfg {String} invalidClass @hide
+     */
+    /**
+     * @cfg {String} invalidText @hide
+     */
+    /**
+     * @cfg {String} msgFx @hide
+     */
+    /**
+     * @cfg {String} validateOnBlur @hide
+     */
+});
+
+Roo.HtmlEditorCore.white = [
+        'area', 'br', 'img', 'input', 'hr', 'wbr',
+        
+       'address', 'blockquote', 'center', 'dd',      'dir',       'div', 
+       'dl',      'dt',         'h1',     'h2',      'h3',        'h4', 
+       'h5',      'h6',         'hr',     'isindex', 'listing',   'marquee', 
+       'menu',    'multicol',   'ol',     'p',       'plaintext', 'pre', 
+       'table',   'ul',         'xmp', 
+       
+       'caption', 'col', 'colgroup', 'tbody', 'td', 'tfoot', 'th', 
+      'thead',   'tr', 
+     
+      'dir', 'menu', 'ol', 'ul', 'dl',
+       
+      'embed',  'object'
+];
+
+
+Roo.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..
+];
+Roo.HtmlEditorCore.clean = [
+    'script', 'style', 'title', 'xml'
+];
+Roo.HtmlEditorCore.remove = [
+    'font'
+];
+// attributes..
+
+Roo.HtmlEditorCore.ablack = [
+    'on'
+];
+    
+Roo.HtmlEditorCore.aclean = [ 
+    'action', 'background', 'codebase', 'dynsrc', 'href', 'lowsrc' 
+];
+
+// protocols..
+Roo.HtmlEditorCore.pwhite= [
+        'http',  'https',  'mailto'
+];
+
+// white listed style attributes.
+Roo.HtmlEditorCore.cwhite= [
+      //  'text-align', /// default is to allow most things..
+      
+         
+//        'font-size'//??
+];
+
+// black listed style attributes.
+Roo.HtmlEditorCore.cblack= [
+      //  'font-size' -- this can be set by the project 
+];
+
+
+Roo.HtmlEditorCore.swapCodes   =[ 
+    [    8211, "--" ], 
+    [    8212, "--" ], 
+    [    8216,  "'" ],  
+    [    8217, "'" ],  
+    [    8220, '"' ],  
+    [    8221, '"' ],  
+    [    8226, "*" ],  
+    [    8230, "..." ]
+]; 
+
+    //<script type="text/javascript">
+
+/*
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * Licence LGPL
+ * 
+ */
+ 
+ 
+Roo.form.HtmlEditor = function(config){
+    
+    
+    
+    Roo.form.HtmlEditor.superclass.constructor.call(this, config);
+    
+    if (!this.toolbars) {
+        this.toolbars = [];
+    }
+    this.editorcore = new Roo.HtmlEditorCore(Roo.apply({ owner : this} , config));
+    
+    
+};
+
+/**
+ * @class Roo.form.HtmlEditor
+ * @extends Roo.form.Field
+ * Provides a lightweight HTML Editor component.
+ *
+ * This has been tested on Fireforx / Chrome.. IE may not be so great..
+ * 
+ * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
+ * supported by this editor.</b><br/><br/>
+ * An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within
+ * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
+ */
+Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
+    /**
+     * @cfg {Boolean} clearUp
+     */
+    clearUp : true,
+      /**
+     * @cfg {Array} toolbars Array of toolbars. - defaults to just the Standard one
+     */
+    toolbars : false,
+   
+     /**
+     * @cfg {String} resizable  's' or 'se' or 'e' - wrapps the element in a
+     *                        Roo.resizable.
+     */
+    resizable : false,
+     /**
+     * @cfg {Number} height (in pixels)
+     */   
+    height: 300,
+   /**
+     * @cfg {Number} width (in pixels)
+     */   
+    width: 500,
+    
+    /**
+     * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
+     * 
+     */
+    stylesheets: false,
+    
+    
+     /**
+     * @cfg {Array} blacklist of css styles style attributes (blacklist overrides whitelist)
+     * 
+     */
+    cblack: false,
+    /**
+     * @cfg {Array} whitelist of css styles style attributes (blacklist overrides whitelist)
+     * 
+     */
+    cwhite: false,
+    
+     /**
+     * @cfg {Array} blacklist of html tags - in addition to standard blacklist.
+     * 
+     */
+    black: false,
+    /**
+     * @cfg {Array} whitelist of html tags - in addition to statndard whitelist
+     * 
+     */
+    white: false,
+    
+    // id of frame..
+    frameId: false,
+    
+    // private properties
+    validationEvent : false,
+    deferHeight: true,
+    initialized : false,
+    activated : false,
+    
+    onFocus : Roo.emptyFn,
+    iframePad:3,
+    hideMode:'offsets',
+    
+    actionMode : 'container', // defaults to hiding it...
+    
+    defaultAutoCreate : { // modified by initCompnoent..
+        tag: "textarea",
+        style:"width:500px;height:300px;",
+        autocomplete: "new-password"
+    },
+
+    // private
+    initComponent : function(){
+        this.addEvents({
+            /**
+             * @event initialize
+             * Fires when the editor is fully initialized (including the iframe)
+             * @param {HtmlEditor} this
+             */
+            initialize: true,
+            /**
+             * @event activate
+             * Fires when the editor is first receives the focus. Any insertion must wait
+             * until after this event.
+             * @param {HtmlEditor} this
+             */
+            activate: true,
+             /**
+             * @event beforesync
+             * Fires before the textarea is updated with content from the editor iframe. Return false
+             * to cancel the sync.
+             * @param {HtmlEditor} this
+             * @param {String} html
+             */
+            beforesync: true,
+             /**
+             * @event beforepush
+             * Fires before the iframe editor is updated with content from the textarea. Return false
+             * to cancel the push.
+             * @param {HtmlEditor} this
+             * @param {String} html
+             */
+            beforepush: true,
+             /**
+             * @event sync
+             * Fires when the textarea is updated with content from the editor iframe.
+             * @param {HtmlEditor} this
+             * @param {String} html
+             */
+            sync: true,
+             /**
+             * @event push
+             * Fires when the iframe editor is updated with content from the textarea.
+             * @param {HtmlEditor} this
+             * @param {String} html
+             */
+            push: true,
+             /**
+             * @event editmodechange
+             * Fires when the editor switches edit modes
+             * @param {HtmlEditor} this
+             * @param {Boolean} sourceEdit True if source edit, false if standard editing.
+             */
+            editmodechange: true,
+            /**
+             * @event editorevent
+             * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
+             * @param {HtmlEditor} this
+             */
+            editorevent: true,
+            /**
+             * @event firstfocus
+             * Fires when on first focus - needed by toolbars..
+             * @param {HtmlEditor} this
+             */
+            firstfocus: true,
+            /**
+             * @event autosave
+             * Auto save the htmlEditor value as a file into Events
+             * @param {HtmlEditor} this
+             */
+            autosave: true,
+            /**
+             * @event savedpreview
+             * preview the saved version of htmlEditor
+             * @param {HtmlEditor} this
+             */
+            savedpreview: true,
+            
+            /**
+            * @event stylesheetsclick
+            * Fires when press the Sytlesheets button
+            * @param {Roo.HtmlEditorCore} this
+            */
+            stylesheetsclick: true
+        });
+        this.defaultAutoCreate =  {
+            tag: "textarea",
+            style:'width: ' + this.width + 'px;height: ' + this.height + 'px;',
+            autocomplete: "new-password"
+        };
+    },
+
+    /**
+     * Protected method that will not generally be called directly. It
+     * is called when the editor creates its toolbar. Override this method if you need to
+     * add custom toolbar buttons.
+     * @param {HtmlEditor} editor
+     */
+    createToolbar : function(editor){
+        Roo.log("create toolbars");
+        if (!editor.toolbars || !editor.toolbars.length) {
+            editor.toolbars = [ new Roo.form.HtmlEditor.ToolbarStandard() ]; // can be empty?
+        }
+        
+        for (var i =0 ; i < editor.toolbars.length;i++) {
+            editor.toolbars[i] = Roo.factory(
+                    typeof(editor.toolbars[i]) == 'string' ?
+                        { xtype: editor.toolbars[i]} : editor.toolbars[i],
+                Roo.form.HtmlEditor);
+            editor.toolbars[i].init(editor);
+        }
+         
+        
+    },
+
+     
+    // private
+    onRender : function(ct, position)
+    {
+        var _t = this;
+        Roo.form.HtmlEditor.superclass.onRender.call(this, ct, position);
+        
+        this.wrap = this.el.wrap({
+            cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
+        });
+        
+        this.editorcore.onRender(ct, position);
+         
+        if (this.resizable) {
+            this.resizeEl = new Roo.Resizable(this.wrap, {
+                pinned : true,
+                wrap: true,
+                dynamic : true,
+                minHeight : this.height,
+                height: this.height,
+                handles : this.resizable,
+                width: this.width,
+                listeners : {
+                    resize : function(r, w, h) {
+                        _t.onResize(w,h); // -something
+                    }
+                }
+            });
+            
+        }
+        this.createToolbar(this);
+       
+        
+        if(!this.width){
+            this.setSize(this.wrap.getSize());
+        }
+        if (this.resizeEl) {
+            this.resizeEl.resizeTo.defer(100, this.resizeEl,[ this.width,this.height ] );
+            // should trigger onReize..
+        }
+        
+        this.keyNav = new Roo.KeyNav(this.el, {
+            
+            "tab" : function(e){
+                e.preventDefault();
+                
+                var value = this.getValue();
+                
+                var start = this.el.dom.selectionStart;
+                var end = this.el.dom.selectionEnd;
+                
+                if(!e.shiftKey){
+                    
+                    this.setValue(value.substring(0, start) + "\t" + value.substring(end));
+                    this.el.dom.setSelectionRange(end + 1, end + 1);
+                    return;
+                }
+                
+                var f = value.substring(0, start).split("\t");
+                
+                if(f.pop().length != 0){
+                    return;
+                }
+                
+                this.setValue(f.join("\t") + value.substring(end));
+                this.el.dom.setSelectionRange(start - 1, start - 1);
+                
+            },
+            
+            "home" : function(e){
+                e.preventDefault();
+                
+                var curr = this.el.dom.selectionStart;
+                var lines = this.getValue().split("\n");
+                
+                if(!lines.length){
+                    return;
+                }
+                
+                if(e.ctrlKey){
+                    this.el.dom.setSelectionRange(0, 0);
+                    return;
+                }
+                
+                var pos = 0;
+                
+                for (var i = 0; i < lines.length;i++) {
+                    pos += lines[i].length;
+                    
+                    if(i != 0){
+                        pos += 1;
+                    }
+                    
+                    if(pos < curr){
+                        continue;
+                    }
+                    
+                    pos -= lines[i].length;
+                    
+                    break;
+                }
+                
+                if(!e.shiftKey){
+                    this.el.dom.setSelectionRange(pos, pos);
+                    return;
+                }
+                
+                this.el.dom.selectionStart = pos;
+                this.el.dom.selectionEnd = curr;
+            },
+            
+            "end" : function(e){
+                e.preventDefault();
+                
+                var curr = this.el.dom.selectionStart;
+                var lines = this.getValue().split("\n");
+                
+                if(!lines.length){
+                    return;
+                }
+                
+                if(e.ctrlKey){
+                    this.el.dom.setSelectionRange(this.getValue().length, this.getValue().length);
+                    return;
+                }
+                
+                var pos = 0;
+                
+                for (var i = 0; i < lines.length;i++) {
+                    
+                    pos += lines[i].length;
+                    
+                    if(i != 0){
+                        pos += 1;
+                    }
+                    
+                    if(pos < curr){
+                        continue;
+                    }
+                    
+                    break;
+                }
+                
+                if(!e.shiftKey){
+                    this.el.dom.setSelectionRange(pos, pos);
+                    return;
+                }
+                
+                this.el.dom.selectionStart = curr;
+                this.el.dom.selectionEnd = pos;
+            },
+
+            scope : this,
+
+            doRelay : function(foo, bar, hname){
+                return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
+            },
+
+            forceKeyDown: true
+        });
+        
+//        if(this.autosave && this.w){
+//            this.autoSaveFn = setInterval(this.autosave, 1000);
+//        }
+    },
+
+    // private
+    onResize : function(w, h)
+    {
+        Roo.form.HtmlEditor.superclass.onResize.apply(this, arguments);
+        var ew = false;
+        var eh = false;
+        
+        if(this.el ){
+            if(typeof w == 'number'){
+                var aw = w - this.wrap.getFrameWidth('lr');
+                this.el.setWidth(this.adjustWidth('textarea', aw));
+                ew = aw;
+            }
+            if(typeof h == 'number'){
+                var tbh = 0;
+                for (var i =0; i < this.toolbars.length;i++) {
+                    // fixme - ask toolbars for heights?
+                    tbh += this.toolbars[i].tb.el.getHeight();
+                    if (this.toolbars[i].footer) {
+                        tbh += this.toolbars[i].footer.el.getHeight();
+                    }
+                }
+                
+                
+                
+                
+                var ah = h - this.wrap.getFrameWidth('tb') - tbh;// this.tb.el.getHeight();
+                ah -= 5; // knock a few pixes off for look..
+//                Roo.log(ah);
+                this.el.setHeight(this.adjustWidth('textarea', ah));
+                var eh = ah;
+            }
+        }
+        Roo.log('onResize:' + [w,h,ew,eh].join(',') );
+        this.editorcore.onResize(ew,eh);
+        
+    },
+
+    /**
+     * Toggles the editor between standard and source edit mode.
+     * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
+     */
+    toggleSourceEdit : function(sourceEditMode)
+    {
+        this.editorcore.toggleSourceEdit(sourceEditMode);
+        
+        if(this.editorcore.sourceEditMode){
+            Roo.log('editor - showing textarea');
+            
+//            Roo.log('in');
+//            Roo.log(this.syncValue());
+            this.editorcore.syncValue();
+            this.el.removeClass('x-hidden');
+            this.el.dom.removeAttribute('tabIndex');
+            this.el.focus();
+            
+            for (var i = 0; i < this.toolbars.length; i++) {
+                if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
+                    this.toolbars[i].tb.hide();
+                    this.toolbars[i].footer.hide();
+                }
+            }
+            
+        }else{
+            Roo.log('editor - hiding textarea');
+//            Roo.log('out')
+//            Roo.log(this.pushValue()); 
+            this.editorcore.pushValue();
+            
+            this.el.addClass('x-hidden');
+            this.el.dom.setAttribute('tabIndex', -1);
+            
+            for (var i = 0; i < this.toolbars.length; i++) {
+                if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
+                    this.toolbars[i].tb.show();
+                    this.toolbars[i].footer.show();
+                }
+            }
+            
+            //this.deferFocus();
+        }
+        
+        this.setSize(this.wrap.getSize());
+        this.onResize(this.wrap.getSize().width, this.wrap.getSize().height);
+        
+        this.fireEvent('editmodechange', this, this.editorcore.sourceEditMode);
+    },
+ 
+    // private (for BoxComponent)
+    adjustSize : Roo.BoxComponent.prototype.adjustSize,
+
+    // private (for BoxComponent)
+    getResizeEl : function(){
+        return this.wrap;
+    },
+
+    // private (for BoxComponent)
+    getPositionEl : function(){
+        return this.wrap;
+    },
+
+    // private
+    initEvents : function(){
+        this.originalValue = this.getValue();
+    },
+
+    /**
+     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
+     * @method
+     */
+    markInvalid : Roo.emptyFn,
+    /**
+     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
+     * @method
+     */
+    clearInvalid : Roo.emptyFn,
+
+    setValue : function(v){
+        Roo.form.HtmlEditor.superclass.setValue.call(this, v);
+        this.editorcore.pushValue();
+    },
+
+     
+    // private
+    deferFocus : function(){
+        this.focus.defer(10, this);
+    },
+
+    // doc'ed in Field
+    focus : function(){
+        this.editorcore.focus();
+        
+    },
+      
+
+    // private
+    onDestroy : function(){
+        
+        
+        
+        if(this.rendered){
+            
+            for (var i =0; i < this.toolbars.length;i++) {
+                // fixme - ask toolbars for heights?
+                this.toolbars[i].onDestroy();
+            }
+            
+            this.wrap.dom.innerHTML = '';
+            this.wrap.remove();
+        }
+    },
+
+    // private
+    onFirstFocus : function(){
+        //Roo.log("onFirstFocus");
+        this.editorcore.onFirstFocus();
+         for (var i =0; i < this.toolbars.length;i++) {
+            this.toolbars[i].onFirstFocus();
+        }
+        
+    },
+    
+    // private
+    syncValue : function()
+    {
+        this.editorcore.syncValue();
+    },
+    
+    pushValue : function()
+    {
+        this.editorcore.pushValue();
+    },
+    
+    setStylesheets : function(stylesheets)
+    {
+        this.editorcore.setStylesheets(stylesheets);
+    },
+    
+    removeStylesheets : function()
+    {
+        this.editorcore.removeStylesheets();
+    }
+     
+    
+    // hide stuff that is not compatible
+    /**
+     * @event blur
+     * @hide
+     */
+    /**
+     * @event change
+     * @hide
+     */
+    /**
+     * @event focus
+     * @hide
+     */
+    /**
+     * @event specialkey
+     * @hide
+     */
+    /**
+     * @cfg {String} fieldClass @hide
+     */
+    /**
+     * @cfg {String} focusClass @hide
+     */
+    /**
+     * @cfg {String} autoCreate @hide
+     */
+    /**
+     * @cfg {String} inputType @hide
+     */
+    /**
+     * @cfg {String} invalidClass @hide
+     */
+    /**
+     * @cfg {String} invalidText @hide
+     */
+    /**
+     * @cfg {String} msgFx @hide
+     */
+    /**
+     * @cfg {String} validateOnBlur @hide
+     */
+});
+ 
+    // <script type="text/javascript">
+/*
+ * Based on
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *  
+ 
+ */
+
+/**
+ * @class Roo.form.HtmlEditorToolbar1
+ * Basic Toolbar
+ * 
+ * Usage:
+ *
+ new Roo.form.HtmlEditor({
+    ....
+    toolbars : [
+        new Roo.form.HtmlEditorToolbar1({
+            disable : { fonts: 1 , format: 1, ..., ... , ...],
+            btns : [ .... ]
+        })
+    }
+     
+ * 
+ * @cfg {Object} disable List of elements to disable..
+ * @cfg {Array} btns List of additional buttons.
+ * 
+ * 
+ * NEEDS Extra CSS? 
+ * .x-html-editor-tb .x-edit-none .x-btn-text { background: none; }
+ */
+ 
+Roo.form.HtmlEditor.ToolbarStandard = function(config)
+{
+    
+    Roo.apply(this, config);
+    
+    // default disabled, based on 'good practice'..
+    this.disable = this.disable || {};
+    Roo.applyIf(this.disable, {
+        fontSize : true,
+        colors : true,
+        specialElements : true
+    });
+    
+    
+    //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
+    // dont call parent... till later.
+}
+
+Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
+    
+    tb: false,
+    
+    rendered: false,
+    
+    editor : false,
+    editorcore : false,
+    /**
+     * @cfg {Object} disable  List of toolbar elements to disable
+         
+     */
+    disable : false,
+    
+    
+     /**
+     * @cfg {String} createLinkText The default text for the create link prompt
+     */
+    createLinkText : 'Please enter the URL for the link:',
+    /**
+     * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
+     */
+    defaultLinkValue : 'http:/'+'/',
+   
+    
+      /**
+     * @cfg {Array} fontFamilies An array of available font families
+     */
+    fontFamilies : [
+        'Arial',
+        'Courier New',
+        'Tahoma',
+        'Times New Roman',
+        'Verdana'
+    ],
+    
+    specialChars : [
+           "&#169;",
+          "&#174;",     
+          "&#8482;",    
+          "&#163;" ,    
+         // "&#8212;",    
+          "&#8230;",    
+          "&#247;" ,    
+        //  "&#225;" ,     ?? a acute?
+           "&#8364;"    , //Euro
+       //   "&#8220;"    ,
+        //  "&#8221;"    ,
+        //  "&#8226;"    ,
+          "&#176;"  //   , // degrees
+
+         // "&#233;"     , // e ecute
+         // "&#250;"     , // u ecute?
+    ],
+    
+    specialElements : [
+        {
+            text: "Insert Table",
+            xtype: 'MenuItem',
+            xns : Roo.Menu,
+            ihtml :  '<table><tr><td>Cell</td></tr></table>' 
+                
+        },
+        {    
+            text: "Insert Image",
+            xtype: 'MenuItem',
+            xns : Roo.Menu,
+            ihtml : '<img src="about:blank"/>'
+            
+        }
+        
+         
+    ],
+    
+    
+    inputElements : [ 
+            "form", "input:text", "input:hidden", "input:checkbox", "input:radio", "input:password", 
+            "input:submit", "input:button", "select", "textarea", "label" ],
+    formats : [
+        ["p"] ,  
+        ["h1"],["h2"],["h3"],["h4"],["h5"],["h6"], 
+        ["pre"],[ "code"], 
+        ["abbr"],[ "acronym"],[ "address"],[ "cite"],[ "samp"],[ "var"],
+        ['div'],['span']
+    ],
+    
+    cleanStyles : [
+        "font-size"
+    ],
+     /**
+     * @cfg {String} defaultFont default font to use.
+     */
+    defaultFont: 'tahoma',
+   
+    fontSelect : false,
+    
+    
+    formatCombo : false,
+    
+    init : function(editor)
+    {
+        this.editor = editor;
+        this.editorcore = editor.editorcore ? editor.editorcore : editor;
+        var editorcore = this.editorcore;
+        
+        var _t = this;
+        
+        var fid = editorcore.frameId;
+        var etb = this;
+        function btn(id, toggle, handler){
+            var xid = fid + '-'+ id ;
+            return {
+                id : xid,
+                cmd : id,
+                cls : 'x-btn-icon x-edit-'+id,
+                enableToggle:toggle !== false,
+                scope: _t, // was editor...
+                handler:handler||_t.relayBtnCmd,
+                clickEvent:'mousedown',
+                tooltip: etb.buttonTips[id] || undefined, ///tips ???
+                tabIndex:-1
+            };
+        }
+        
+        
+        
+        var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
+        this.tb = tb;
+         // stop form submits
+        tb.el.on('click', function(e){
+            e.preventDefault(); // what does this do?
+        });
+
+        if(!this.disable.font) { // && !Roo.isSafari){
+            /* why no safari for fonts 
+            editor.fontSelect = tb.el.createChild({
+                tag:'select',
+                tabIndex: -1,
+                cls:'x-font-select',
+                html: this.createFontOptions()
+            });
+            
+            editor.fontSelect.on('change', function(){
+                var font = editor.fontSelect.dom.value;
+                editor.relayCmd('fontname', font);
+                editor.deferFocus();
+            }, editor);
+            
+            tb.add(
+                editor.fontSelect.dom,
+                '-'
+            );
+            */
+            
+        };
+        if(!this.disable.formats){
+            this.formatCombo = new Roo.form.ComboBox({
+                store: new Roo.data.SimpleStore({
+                    id : 'tag',
+                    fields: ['tag'],
+                    data : this.formats // from states.js
+                }),
+                blockFocus : true,
+                name : '',
+                //autoCreate : {tag: "div",  size: "20"},
+                displayField:'tag',
+                typeAhead: false,
+                mode: 'local',
+                editable : false,
+                triggerAction: 'all',
+                emptyText:'Add tag',
+                selectOnFocus:true,
+                width:135,
+                listeners : {
+                    'select': function(c, r, i) {
+                        editorcore.insertTag(r.get('tag'));
+                        editor.focus();
+                    }
+                }
+
+            });
+            tb.addField(this.formatCombo);
+            
+        }
+        
+        if(!this.disable.format){
+            tb.add(
+                btn('bold'),
+                btn('italic'),
+                btn('underline'),
+                btn('strikethrough')
+            );
+        };
+        if(!this.disable.fontSize){
+            tb.add(
+                '-',
+                
+                
+                btn('increasefontsize', false, editorcore.adjustFont),
+                btn('decreasefontsize', false, editorcore.adjustFont)
+            );
+        };
+        
+        
+        if(!this.disable.colors){
+            tb.add(
+                '-', {
+                    id:editorcore.frameId +'-forecolor',
+                    cls:'x-btn-icon x-edit-forecolor',
+                    clickEvent:'mousedown',
+                    tooltip: this.buttonTips['forecolor'] || undefined,
+                    tabIndex:-1,
+                    menu : new Roo.menu.ColorMenu({
+                        allowReselect: true,
+                        focus: Roo.emptyFn,
+                        value:'000000',
+                        plain:true,
+                        selectHandler: function(cp, color){
+                            editorcore.execCmd('forecolor', Roo.isSafari || Roo.isIE ? '#'+color : color);
+                            editor.deferFocus();
+                        },
+                        scope: editorcore,
+                        clickEvent:'mousedown'
+                    })
+                }, {
+                    id:editorcore.frameId +'backcolor',
+                    cls:'x-btn-icon x-edit-backcolor',
+                    clickEvent:'mousedown',
+                    tooltip: this.buttonTips['backcolor'] || undefined,
+                    tabIndex:-1,
+                    menu : new Roo.menu.ColorMenu({
+                        focus: Roo.emptyFn,
+                        value:'FFFFFF',
+                        plain:true,
+                        allowReselect: true,
+                        selectHandler: function(cp, color){
+                            if(Roo.isGecko){
+                                editorcore.execCmd('useCSS', false);
+                                editorcore.execCmd('hilitecolor', color);
+                                editorcore.execCmd('useCSS', true);
+                                editor.deferFocus();
+                            }else{
+                                editorcore.execCmd(Roo.isOpera ? 'hilitecolor' : 'backcolor', 
+                                    Roo.isSafari || Roo.isIE ? '#'+color : color);
+                                editor.deferFocus();
+                            }
+                        },
+                        scope:editorcore,
+                        clickEvent:'mousedown'
+                    })
+                }
+            );
+        };
+        // now add all the items...
+        
+
+        if(!this.disable.alignments){
+            tb.add(
+                '-',
+                btn('justifyleft'),
+                btn('justifycenter'),
+                btn('justifyright')
+            );
+        };
+
+        //if(!Roo.isSafari){
+            if(!this.disable.links){
+                tb.add(
+                    '-',
+                    btn('createlink', false, this.createLink)    /// MOVE TO HERE?!!?!?!?!
+                );
+            };
+
+            if(!this.disable.lists){
+                tb.add(
+                    '-',
+                    btn('insertorderedlist'),
+                    btn('insertunorderedlist')
+                );
+            }
+            if(!this.disable.sourceEdit){
+                tb.add(
+                    '-',
+                    btn('sourceedit', true, function(btn){
+                        this.toggleSourceEdit(btn.pressed);
+                    })
+                );
+            }
+        //}
+        
+        var smenu = { };
+        // special menu.. - needs to be tidied up..
+        if (!this.disable.special) {
+            smenu = {
+                text: "&#169;",
+                cls: 'x-edit-none',
+                
+                menu : {
+                    items : []
+                }
+            };
+            for (var i =0; i < this.specialChars.length; i++) {
+                smenu.menu.items.push({
+                    
+                    html: this.specialChars[i],
+                    handler: function(a,b) {
+                        editorcore.insertAtCursor(String.fromCharCode(a.html.replace('&#','').replace(';', '')));
+                        //editor.insertAtCursor(a.html);
+                        
+                    },
+                    tabIndex:-1
+                });
+            }
+            
+            
+            tb.add(smenu);
+            
+            
+        }
+        
+        var cmenu = { };
+        if (!this.disable.cleanStyles) {
+            cmenu = {
+                cls: 'x-btn-icon x-btn-clear',
+                
+                menu : {
+                    items : []
+                }
+            };
+            for (var i =0; i < this.cleanStyles.length; i++) {
+                cmenu.menu.items.push({
+                    actiontype : this.cleanStyles[i],
+                    html: 'Remove ' + this.cleanStyles[i],
+                    handler: function(a,b) {
+//                        Roo.log(a);
+//                        Roo.log(b);
+                        var c = Roo.get(editorcore.doc.body);
+                        c.select('[style]').each(function(s) {
+                            s.dom.style.removeProperty(a.actiontype);
+                        });
+                        editorcore.syncValue();
+                    },
+                    tabIndex:-1
+                });
+            }
+             cmenu.menu.items.push({
+                actiontype : 'tablewidths',
+                html: 'Remove Table Widths',
+                handler: function(a,b) {
+                    editorcore.cleanTableWidths();
+                    editorcore.syncValue();
+                },
+                tabIndex:-1
+            });
+            cmenu.menu.items.push({
+                actiontype : 'word',
+                html: 'Remove MS Word Formating',
+                handler: function(a,b) {
+                    editorcore.cleanWord();
+                    editorcore.syncValue();
+                },
+                tabIndex:-1
+            });
+            
+            cmenu.menu.items.push({
+                actiontype : 'all',
+                html: 'Remove All Styles',
+                handler: function(a,b) {
+                    
+                    var c = Roo.get(editorcore.doc.body);
+                    c.select('[style]').each(function(s) {
+                        s.dom.removeAttribute('style');
+                    });
+                    editorcore.syncValue();
+                },
+                tabIndex:-1
+            });
+            
+            cmenu.menu.items.push({
+                actiontype : 'all',
+                html: 'Remove All CSS Classes',
+                handler: function(a,b) {
+                    
+                    var c = Roo.get(editorcore.doc.body);
+                    c.select('[class]').each(function(s) {
+                        s.dom.className = '';
+                    });
+                    editorcore.syncValue();
+                },
+                tabIndex:-1
+            });
+            
+             cmenu.menu.items.push({
+                actiontype : 'tidy',
+                html: 'Tidy HTML Source',
+                handler: function(a,b) {
+                    editorcore.doc.body.innerHTML = editorcore.domToHTML();
+                    editorcore.syncValue();
+                },
+                tabIndex:-1
+            });
+            
+            
+            tb.add(cmenu);
+        }
+         
+        if (!this.disable.specialElements) {
+            var semenu = {
+                text: "Other;",
+                cls: 'x-edit-none',
+                menu : {
+                    items : []
+                }
+            };
+            for (var i =0; i < this.specialElements.length; i++) {
+                semenu.menu.items.push(
+                    Roo.apply({ 
+                        handler: function(a,b) {
+                            editor.insertAtCursor(this.ihtml);
+                        }
+                    }, this.specialElements[i])
+                );
+                    
+            }
+            
+            tb.add(semenu);
+            
+            
+        }
+         
+        
+        if (this.btns) {
+            for(var i =0; i< this.btns.length;i++) {
+                var b = Roo.factory(this.btns[i],Roo.form);
+                b.cls =  'x-edit-none';
+                
+                if(typeof(this.btns[i].cls) != 'undefined' && this.btns[i].cls.indexOf('x-init-enable') !== -1){
+                    b.cls += ' x-init-enable';
+                }
+                
+                b.scope = editorcore;
+                tb.add(b);
+            }
+        
+        }
+        
+        
+        
+        // disable everything...
+        
+        this.tb.items.each(function(item){
+            
+           if(
+                item.id != editorcore.frameId+ '-sourceedit' && 
+                (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)
+            ){
+                
+                item.disable();
+            }
+        });
+        this.rendered = true;
+        
+        // the all the btns;
+        editor.on('editorevent', this.updateToolbar, this);
+        // other toolbars need to implement this..
+        //editor.on('editmodechange', this.updateToolbar, this);
+    },
+    
+    
+    relayBtnCmd : function(btn) {
+        this.editorcore.relayCmd(btn.cmd);
+    },
+    // 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);
+        }
+    },
+
+    
+    /**
+     * Protected method that will not generally be called directly. It triggers
+     * a toolbar update by reading the markup state of the current selection in the editor.
+     */
+    updateToolbar: function(){
+
+        if(!this.editorcore.activated){
+            this.editor.onFirstFocus();
+            return;
+        }
+
+        var btns = this.tb.items.map, 
+            doc = this.editorcore.doc,
+            frameId = this.editorcore.frameId;
+
+        if(!this.disable.font && !Roo.isSafari){
+            /*
+            var name = (doc.queryCommandValue('FontName')||this.editor.defaultFont).toLowerCase();
+            if(name != this.fontSelect.dom.value){
+                this.fontSelect.dom.value = name;
+            }
+            */
+        }
+        if(!this.disable.format){
+            btns[frameId + '-bold'].toggle(doc.queryCommandState('bold'));
+            btns[frameId + '-italic'].toggle(doc.queryCommandState('italic'));
+            btns[frameId + '-underline'].toggle(doc.queryCommandState('underline'));
+            btns[frameId + '-strikethrough'].toggle(doc.queryCommandState('strikethrough'));
+        }
+        if(!this.disable.alignments){
+            btns[frameId + '-justifyleft'].toggle(doc.queryCommandState('justifyleft'));
+            btns[frameId + '-justifycenter'].toggle(doc.queryCommandState('justifycenter'));
+            btns[frameId + '-justifyright'].toggle(doc.queryCommandState('justifyright'));
+        }
+        if(!Roo.isSafari && !this.disable.lists){
+            btns[frameId + '-insertorderedlist'].toggle(doc.queryCommandState('insertorderedlist'));
+            btns[frameId + '-insertunorderedlist'].toggle(doc.queryCommandState('insertunorderedlist'));
+        }
+        
+        var ans = this.editorcore.getAllAncestors();
+        if (this.formatCombo) {
+            
+            
+            var store = this.formatCombo.store;
+            this.formatCombo.setValue("");
+            for (var i =0; i < ans.length;i++) {
+                if (ans[i] && store.query('tag',ans[i].tagName.toLowerCase(), false).length) {
+                    // select it..
+                    this.formatCombo.setValue(ans[i].tagName.toLowerCase());
+                    break;
+                }
+            }
+        }
+        
+        
+        
+        // hides menus... - so this cant be on a menu...
+        Roo.menu.MenuMgr.hideAll();
+
+        //this.editorsyncValue();
+    },
+   
+    
+    createFontOptions : function(){
+        var buf = [], fs = this.fontFamilies, ff, lc;
+        
+        
+        
+        for(var i = 0, len = fs.length; i< len; i++){
+            ff = fs[i];
+            lc = ff.toLowerCase();
+            buf.push(
+                '<option value="',lc,'" style="font-family:',ff,';"',
+                    (this.defaultFont == lc ? ' selected="true">' : '>'),
+                    ff,
+                '</option>'
+            );
+        }
+        return buf.join('');
+    },
+    
+    toggleSourceEdit : function(sourceEditMode){
+        
+        Roo.log("toolbar toogle");
+        if(sourceEditMode === undefined){
+            sourceEditMode = !this.sourceEditMode;
+        }
+        this.sourceEditMode = sourceEditMode === true;
+        var btn = this.tb.items.get(this.editorcore.frameId +'-sourceedit');
+        // just toggle the button?
+        if(btn.pressed !== this.sourceEditMode){
+            btn.toggle(this.sourceEditMode);
+            return;
+        }
+        
+        if(sourceEditMode){
+            Roo.log("disabling buttons");
+            this.tb.items.each(function(item){
+                if(item.cmd != 'sourceedit' && (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)){
+                    item.disable();
+                }
+            });
+          
+        }else{
+            Roo.log("enabling buttons");
+            if(this.editorcore.initialized){
+                this.tb.items.each(function(item){
+                    item.enable();
+                });
+            }
+            
+        }
+        Roo.log("calling toggole on editor");
+        // tell the editor that it's been pressed..
+        this.editor.toggleSourceEdit(sourceEditMode);
+       
+    },
+     /**
+     * Object collection of toolbar tooltips for the buttons in the editor. The key
+     * is the command id associated with that button and the value is a valid QuickTips object.
+     * For example:
+<pre><code>
+{
+    bold : {
+        title: 'Bold (Ctrl+B)',
+        text: 'Make the selected text bold.',
+        cls: 'x-html-editor-tip'
+    },
+    italic : {
+        title: 'Italic (Ctrl+I)',
+        text: 'Make the selected text italic.',
+        cls: 'x-html-editor-tip'
+    },
+    ...
+</code></pre>
+    * @type Object
+     */
+    buttonTips : {
+        bold : {
+            title: 'Bold (Ctrl+B)',
+            text: 'Make the selected text bold.',
+            cls: 'x-html-editor-tip'
+        },
+        italic : {
+            title: 'Italic (Ctrl+I)',
+            text: 'Make the selected text italic.',
+            cls: 'x-html-editor-tip'
+        },
+        underline : {
+            title: 'Underline (Ctrl+U)',
+            text: 'Underline the selected text.',
+            cls: 'x-html-editor-tip'
+        },
+        strikethrough : {
+            title: 'Strikethrough',
+            text: 'Strikethrough the selected text.',
+            cls: 'x-html-editor-tip'
+        },
+        increasefontsize : {
+            title: 'Grow Text',
+            text: 'Increase the font size.',
+            cls: 'x-html-editor-tip'
+        },
+        decreasefontsize : {
+            title: 'Shrink Text',
+            text: 'Decrease the font size.',
+            cls: 'x-html-editor-tip'
+        },
+        backcolor : {
+            title: 'Text Highlight Color',
+            text: 'Change the background color of the selected text.',
+            cls: 'x-html-editor-tip'
+        },
+        forecolor : {
+            title: 'Font Color',
+            text: 'Change the color of the selected text.',
+            cls: 'x-html-editor-tip'
+        },
+        justifyleft : {
+            title: 'Align Text Left',
+            text: 'Align text to the left.',
+            cls: 'x-html-editor-tip'
+        },
+        justifycenter : {
+            title: 'Center Text',
+            text: 'Center text in the editor.',
+            cls: 'x-html-editor-tip'
+        },
+        justifyright : {
+            title: 'Align Text Right',
+            text: 'Align text to the right.',
+            cls: 'x-html-editor-tip'
+        },
+        insertunorderedlist : {
+            title: 'Bullet List',
+            text: 'Start a bulleted list.',
+            cls: 'x-html-editor-tip'
+        },
+        insertorderedlist : {
+            title: 'Numbered List',
+            text: 'Start a numbered list.',
+            cls: 'x-html-editor-tip'
+        },
+        createlink : {
+            title: 'Hyperlink',
+            text: 'Make the selected text a hyperlink.',
+            cls: 'x-html-editor-tip'
+        },
+        sourceedit : {
+            title: 'Source Edit',
+            text: 'Switch to source editing mode.',
+            cls: 'x-html-editor-tip'
+        }
+    },
+    // private
+    onDestroy : function(){
+        if(this.rendered){
+            
+            this.tb.items.each(function(item){
+                if(item.menu){
+                    item.menu.removeAll();
+                    if(item.menu.el){
+                        item.menu.el.destroy();
+                    }
+                }
+                item.destroy();
+            });
+             
+        }
+    },
+    onFirstFocus: function() {
+        this.tb.items.each(function(item){
+           item.enable();
+        });
+    }
+});
+
+
+
+
+// <script type="text/javascript">
+/*
+ * Based on
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *  
+ 
+ */
+
+ 
+/**
+ * @class Roo.form.HtmlEditor.ToolbarContext
+ * Context Toolbar
+ * 
+ * Usage:
+ *
+ new Roo.form.HtmlEditor({
+    ....
+    toolbars : [
+        { xtype: 'ToolbarStandard', styles : {} }
+        { xtype: 'ToolbarContext', disable : {} }
+    ]
+})
+
+     
+ * 
+ * @config : {Object} disable List of elements to disable.. (not done yet.)
+ * @config : {Object} styles  Map of styles available.
+ * 
+ */
+
+Roo.form.HtmlEditor.ToolbarContext = function(config)
+{
+    
+    Roo.apply(this, config);
+    //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
+    // dont call parent... till later.
+    this.styles = this.styles || {};
+}
+
+ 
+
+Roo.form.HtmlEditor.ToolbarContext.types = {
+    'IMG' : {
+        width : {
+            title: "Width",
+            width: 40
+        },
+        height:  {
+            title: "Height",
+            width: 40
+        },
+        align: {
+            title: "Align",
+            opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
+            width : 80
+            
+        },
+        border: {
+            title: "Border",
+            width: 40
+        },
+        alt: {
+            title: "Alt",
+            width: 120
+        },
+        src : {
+            title: "Src",
+            width: 220
+        }
+        
+    },
+    'A' : {
+        name : {
+            title: "Name",
+            width: 50
+        },
+        target:  {
+            title: "Target",
+            width: 120
+        },
+        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 : {
+            title: "name",
+            width: 120
+        },
+        value : {
+            title: "Value",
+            width: 120
+        },
+        width : {
+            title: "Width",
+            width: 40
+        }
+    },
+    'LABEL' : {
+        'for' : {
+            title: "For",
+            width: 120
+        }
+    },
+    'TEXTAREA' : {
+          name : {
+            title: "name",
+            width: 120
+        },
+        rows : {
+            title: "Rows",
+            width: 20
+        },
+        cols : {
+            title: "Cols",
+            width: 20
+        }
+    },
+    'SELECT' : {
+        name : {
+            title: "name",
+            width: 120
+        },
+        selectoptions : {
+            title: "Options",
+            width: 200
+        }
+    },
+    
+    // should we really allow this??
+    // should this just be 
+    'BODY' : {
+        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..
+    }
+
+};
+
+// this should be configurable.. - you can either set it up using stores, or modify options somehwere..
+Roo.form.HtmlEditor.ToolbarContext.stores = false;
+
+Roo.form.HtmlEditor.ToolbarContext.options = {
+        'font-family'  : [ 
+                [ 'Helvetica,Arial,sans-serif', 'Helvetica'],
+                [ 'Courier New', 'Courier New'],
+                [ 'Tahoma', 'Tahoma'],
+                [ 'Times New Roman,serif', 'Times'],
+                [ 'Verdana','Verdana' ]
+        ]
+};
+
+// fixme - these need to be configurable..
+ 
+
+//Roo.form.HtmlEditor.ToolbarContext.types
+
+
+Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
+    
+    tb: false,
+    
+    rendered: false,
+    
+    editor : false,
+    editorcore : false,
+    /**
+     * @cfg {Object} disable  List of toolbar elements to disable
+         
+     */
+    disable : false,
+    /**
+     * @cfg {Object} styles List of styles 
+     *    eg. { '*' : [ 'headline' ] , 'TD' : [ 'underline', 'double-underline' ] } 
+     *
+     * These must be defined in the page, so they get rendered correctly..
+     * .headline { }
+     * TD.underline { }
+     * 
+     */
+    styles : false,
+    
+    options: false,
+    
+    toolbars : false,
+    
+    init : function(editor)
+    {
+        this.editor = editor;
+        this.editorcore = editor.editorcore ? editor.editorcore : editor;
+        var editorcore = this.editorcore;
+        
+        var fid = editorcore.frameId;
+        var etb = this;
+        function btn(id, toggle, handler){
+            var xid = fid + '-'+ id ;
+            return {
+                id : xid,
+                cmd : id,
+                cls : 'x-btn-icon x-edit-'+id,
+                enableToggle:toggle !== false,
+                scope: editorcore, // was editor...
+                handler:handler||editorcore.relayBtnCmd,
+                clickEvent:'mousedown',
+                tooltip: etb.buttonTips[id] || undefined, ///tips ???
+                tabIndex:-1
+            };
+        }
+        // create a new element.
+        var wdiv = editor.wrap.createChild({
+                tag: 'div'
+            }, editor.wrap.dom.firstChild.nextSibling, true);
+        
+        // can we do this more than once??
+        
+         // stop form submits
+      
+ 
+        // disable everything...
+        var ty= Roo.form.HtmlEditor.ToolbarContext.types;
+        this.toolbars = {};
+           
+        for (var i in  ty) {
+          
+            this.toolbars[i] = this.buildToolbar(ty[i],i);
+        }
+        this.tb = this.toolbars.BODY;
+        this.tb.el.show();
+        this.buildFooter();
+        this.footer.show();
+        editor.on('hide', function( ) { this.footer.hide() }, this);
+        editor.on('show', function( ) { this.footer.show() }, this);
+        
+         
+        this.rendered = true;
+        
+        // the all the btns;
+        editor.on('editorevent', this.updateToolbar, this);
+        // other toolbars need to implement this..
+        //editor.on('editmodechange', this.updateToolbar, this);
+    },
+    
+    
+    
+    /**
+     * Protected method that will not generally be called directly. It triggers
+     * a toolbar update by reading the markup state of the current selection in the editor.
+     *
+     * Note you can force an update by calling on('editorevent', scope, false)
+     */
+    updateToolbar: function(editor,ev,sel){
+
+        //Roo.log(ev);
+        // capture mouse up - this is handy for selecting images..
+        // perhaps should go somewhere else...
+        if(!this.editorcore.activated){
+             this.editor.onFirstFocus();
+            return;
+        }
+        
+        
+        
+        // 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') {
+            // 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);
+        }  
+        
+      
+        var updateFooter = sel ? false : true;
+        
+        
+        var ans = this.editorcore.getAllAncestors();
+        
+        // pick
+        var ty= Roo.form.HtmlEditor.ToolbarContext.types;
+        
+        if (!sel) { 
+            sel = ans.length ? (ans[0] ?  ans[0]  : ans[1]) : this.editorcore.doc.body;
+            sel = sel ? sel : this.editorcore.doc.body;
+            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 lastSel = this.tb.selectedNode;
+        
+        this.tb.selectedNode = sel;
+        
+        // if current menu does not match..
+        
+        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 hasStyles = false;
+            for(var i in this.styles) {
+                hasStyles = true;
+                break;
+            }
+            
+            // update styles
+            if (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);
+            }
+            // flag our selected Node.
+            this.tb.selectedNode = sel;
+           
+           
+            Roo.menu.MenuMgr.hideAll();
+
+        }
+        
+        if (!updateFooter) {
+            //this.footDisp.dom.innerHTML = ''; 
+            return;
+        }
+        // update the footer
+        //
+        var html = '';
+        
+        this.footerEls = ans.reverse();
+        Roo.each(this.footerEls, function(a,i) {
+            if (!a) { return; }
+            html += html.length ? ' &gt; '  :  '';
+            
+            html += '<span class="x-ed-loc-' + i + '">' + a.tagName + '</span>';
+            
+        });
+       
+        // 
+        var sz = this.footDisp.up('td').getSize();
+        this.footDisp.dom.style.width = (sz.width -10) + 'px';
+        this.footDisp.dom.style.marginLeft = '5px';
+        
+        this.footDisp.dom.style.overflow = 'hidden';
+        
+        this.footDisp.dom.innerHTML = html;
+            
+        //this.editorsyncValue();
+    },
+     
+    
+   
+       
+    // private
+    onDestroy : function(){
+        if(this.rendered){
+            
+            this.tb.items.each(function(item){
+                if(item.menu){
+                    item.menu.removeAll();
+                    if(item.menu.el){
+                        item.menu.el.destroy();
+                    }
+                }
+                item.destroy();
+            });
+             
+        }
+    },
+    onFirstFocus: function() {
+        // need to do this for all the toolbars..
+        this.tb.items.each(function(item){
+           item.enable();
+        });
+    },
+    buildToolbar: function(tlist, nm)
+    {
+        var editor = this.editor;
+        var editorcore = this.editorcore;
+         // create a new element.
+        var wdiv = editor.wrap.createChild({
+                tag: 'div'
+            }, editor.wrap.dom.firstChild.nextSibling, true);
+        
+       
+        var tb = new Roo.Toolbar(wdiv);
+        // add the name..
+        
+        tb.add(nm+ ":&nbsp;");
+        
+        var styles = [];
+        for(var i in this.styles) {
+            styles.push(i);
+        }
+        
+        // styles...
+        if (styles && styles.length) {
+            
+            // this needs a multi-select checkbox...
+            tb.addField( new Roo.form.ComboBox({
+                store: new Roo.data.SimpleStore({
+                    id : 'val',
+                    fields: ['val', 'selected'],
+                    data : [] 
+                }),
+                name : '-roo-edit-className',
+                attrname : 'className',
+                displayField: 'val',
+                typeAhead: false,
+                mode: 'local',
+                editable : false,
+                triggerAction: 'all',
+                emptyText:'Select Style',
+                selectOnFocus:true,
+                width: 130,
+                listeners : {
+                    'select': function(c, r, i) {
+                        // initial support only for on class per el..
+                        tb.selectedNode.className =  r ? r.get('val') : '';
+                        editorcore.syncValue();
+                    }
+                }
+    
+            }));
+        }
+        
+        var tbc = Roo.form.HtmlEditor.ToolbarContext;
+        var tbops = tbc.options;
+        
+        for (var i in tlist) {
+            
+            var item = tlist[i];
+            tb.add(item.title + ":&nbsp;");
+            
+            
+            //optname == used so you can configure the options available..
+            var opts = item.opts ? item.opts : false;
+            if (item.optname) {
+                opts = tbops[item.optname];
+           
+            }
+            
+            if (opts) {
+                // opts == pulldown..
+                tb.addField( new Roo.form.ComboBox({
+                    store:   typeof(tbc.stores[i]) != 'undefined' ?  Roo.factory(tbc.stores[i],Roo.data) : new Roo.data.SimpleStore({
+                        id : 'val',
+                        fields: ['val', 'display'],
+                        data : opts  
+                    }),
+                    name : '-roo-edit-' + i,
+                    attrname : i,
+                    stylename : item.style ? item.style : false,
+                    displayField: item.displayField ? item.displayField : 'val',
+                    valueField :  'val',
+                    typeAhead: false,
+                    mode: typeof(tbc.stores[i]) != 'undefined'  ? 'remote' : 'local',
+                    editable : false,
+                    triggerAction: 'all',
+                    emptyText:'Select',
+                    selectOnFocus:true,
+                    width: item.width ? item.width  : 130,
+                    listeners : {
+                        'select': function(c, r, i) {
+                            if (c.stylename) {
+                                tb.selectedNode.style[c.stylename] =  r.get('val');
+                                return;
+                            }
+                            tb.selectedNode.setAttribute(c.attrname, r.get('val'));
+                        }
+                    }
+
+                }));
+                continue;
+                    
+                 
+                
+                tb.addField( new Roo.form.TextField({
+                    name: i,
+                    width: 100,
+                    //allowBlank:false,
+                    value: ''
+                }));
+                continue;
+            }
+            tb.addField( new Roo.form.TextField({
+                name: '-roo-edit-' + i,
+                attrname : i,
+                
+                width: item.width,
+                //allowBlank:true,
+                value: '',
+                listeners: {
+                    'change' : function(f, nv, ov) {
+                        tb.selectedNode.setAttribute(f.attrname, nv);
+                    }
+                }
+            }));
+             
+        }
+        
+        var _this = this;
+        
+        if(nm == 'BODY'){
+            tb.addSeparator();
+        
+            tb.addButton( {
+                text: 'Stylesheets',
+
+                listeners : {
+                    click : function ()
+                    {
+                        _this.editor.fireEvent('stylesheetsclick', _this.editor);
+                    }
+                }
+            });
+        }
+        
+        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);
+                        
+                    }
+                    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;
+         
+        
+    },
+    buildFooter : function()
+    {
+        
+        var fel = this.editor.wrap.createChild();
+        this.footer = new Roo.Toolbar(fel);
+        // toolbar has scrolly on left / right?
+        var footDisp= new Roo.Toolbar.Fill();
+        var _t = this;
+        this.footer.add(
+            {
+                text : '&lt;',
+                xtype: 'Button',
+                handler : function() {
+                    _t.footDisp.scrollTo('left',0,true)
+                }
+            }
+        );
+        this.footer.add( footDisp );
+        this.footer.add( 
+            {
+                text : '&gt;',
+                xtype: 'Button',
+                handler : function() {
+                    // no animation..
+                    _t.footDisp.select('span').last().scrollIntoView(_t.footDisp,true);
+                }
+            }
+        );
+        var fel = Roo.get(footDisp.el);
+        fel.addClass('x-editor-context');
+        this.footDispWrap = fel; 
+        this.footDispWrap.overflow  = 'hidden';
+        
+        this.footDisp = fel.createChild();
+        this.footDispWrap.on('click', this.onContextClick, this)
+        
+        
+    },
+    onContextClick : function (ev,dom)
+    {
+        ev.preventDefault();
+        var  cn = dom.className;
+        //Roo.log(cn);
+        if (!cn.match(/x-ed-loc-/)) {
+            return;
+        }
+        var n = cn.split('-').pop();
+        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.updateToolbar(null, null, sel);
+        
+        
+    }
+    
+    
+    
+    
+    
+});
+
+
+
+
+
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+/**
+ * @class Roo.form.BasicForm
+ * @extends Roo.util.Observable
+ * Supplies the functionality to do "actions" on forms and initialize Roo.form.Field types on existing markup.
+ * @constructor
+ * @param {String/HTMLElement/Roo.Element} el The form element or its id
+ * @param {Object} config Configuration options
+ */
+Roo.form.BasicForm = function(el, config){
+    this.allItems = [];
+    this.childForms = [];
+    Roo.apply(this, config);
+    /*
+     * The Roo.form.Field items in this form.
+     * @type MixedCollection
+     */
+     
+     
+    this.items = new Roo.util.MixedCollection(false, function(o){
+        return o.id || (o.id = Roo.id());
+    });
+    this.addEvents({
+        /**
+         * @event beforeaction
+         * Fires before any action is performed. Return false to cancel the action.
+         * @param {Form} this
+         * @param {Action} action The action to be performed
+         */
+        beforeaction: true,
+        /**
+         * @event actionfailed
+         * Fires when an action fails.
+         * @param {Form} this
+         * @param {Action} action The action that failed
+         */
+        actionfailed : true,
+        /**
+         * @event actioncomplete
+         * Fires when an action is completed.
+         * @param {Form} this
+         * @param {Action} action The action that completed
+         */
+        actioncomplete : true
+    });
+    if(el){
+        this.initEl(el);
+    }
+    Roo.form.BasicForm.superclass.constructor.call(this);
+};
+
+Roo.extend(Roo.form.BasicForm, Roo.util.Observable, {
+    /**
+     * @cfg {String} method
+     * The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
+     */
+    /**
+     * @cfg {DataReader} reader
+     * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when executing "load" actions.
+     * This is optional as there is built-in support for processing JSON.
+     */
+    /**
+     * @cfg {DataReader} errorReader
+     * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when reading validation errors on "submit" actions.
+     * This is completely optional as there is built-in support for processing JSON.
+     */
+    /**
+     * @cfg {String} url
+     * The URL to use for form actions if one isn't supplied in the action options.
+     */
+    /**
+     * @cfg {Boolean} fileUpload
+     * Set to true if this form is a file upload.
+     */
+     
+    /**
+     * @cfg {Object} baseParams
+     * Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.
+     */
+     /**
+     
+    /**
+     * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds).
+     */
+    timeout: 30,
+
+    // private
+    activeAction : null,
+
+    /**
+     * @cfg {Boolean} trackResetOnLoad If set to true, form.reset() resets to the last loaded
+     * or setValues() data instead of when the form was first created.
+     */
+    trackResetOnLoad : false,
+    
+    
+    /**
+     * childForms - used for multi-tab forms
+     * @type {Array}
+     */
+    childForms : false,
+    
+    /**
+     * allItems - full list of fields.
+     * @type {Array}
+     */
+    allItems : false,
+    
+    /**
+     * By default wait messages are displayed with Roo.MessageBox.wait. You can target a specific
+     * element by passing it or its id or mask the form itself by passing in true.
+     * @type Mixed
+     */
+    waitMsgTarget : false,
+
+    // private
+    initEl : function(el){
+        this.el = Roo.get(el);
+        this.id = this.el.id || Roo.id();
+        this.el.on('submit', this.onSubmit, this);
+        this.el.addClass('x-form');
+    },
+
+    // private
+    onSubmit : function(e){
+        e.stopEvent();
+    },
+
+    /**
+     * Returns true if client-side validation on the form is successful.
+     * @return Boolean
+     */
+    isValid : function(){
+        var valid = true;
+        this.items.each(function(f){
+           if(!f.validate()){
+               valid = false;
+           }
+        });
+        return valid;
+    },
+
+    /**
+     * DEPRICATED Returns true if any fields in this form have changed since their original load. 
+     * @return Boolean
+     */
+    isDirty : function(){
+        var dirty = false;
+        this.items.each(function(f){
+           if(f.isDirty()){
+               dirty = true;
+               return false;
+           }
+        });
+        return dirty;
+    },
+    
+    /**
+     * Returns true if any fields in this form have changed since their original load. (New version)
+     * @return Boolean
+     */
+    
+    hasChanged : function()
+    {
+        var dirty = false;
+        this.items.each(function(f){
+           if(f.hasChanged()){
+               dirty = true;
+               return false;
+           }
+        });
+        return dirty;
+        
+    },
+    /**
+     * Resets all hasChanged to 'false' -
+     * The old 'isDirty' used 'original value..' however this breaks reset() and a few other things.
+     * So hasChanged storage is only to be used for this purpose
+     * @return Boolean
+     */
+    resetHasChanged : function()
+    {
+        this.items.each(function(f){
+           f.resetHasChanged();
+        });
+        
+    },
+    
+    
+    /**
+     * Performs a predefined action (submit or load) or custom actions you define on this form.
+     * @param {String} actionName The name of the action type
+     * @param {Object} options (optional) The options to pass to the action.  All of the config options listed
+     * below are supported by both the submit and load actions unless otherwise noted (custom actions could also
+     * accept other config options):
+     * <pre>
+Property          Type             Description
+----------------  ---------------  ----------------------------------------------------------------------------------
+url               String           The url for the action (defaults to the form's url)
+method            String           The form method to use (defaults to the form's method, or POST if not defined)
+params            String/Object    The params to pass (defaults to the form's baseParams, or none if not defined)
+clientValidation  Boolean          Applies to submit only.  Pass true to call form.isValid() prior to posting to
+                                   validate the form on the client (defaults to false)
+     * </pre>
+     * @return {BasicForm} this
+     */
+    doAction : function(action, options){
+        if(typeof action == 'string'){
+            action = new Roo.form.Action.ACTION_TYPES[action](this, options);
+        }
+        if(this.fireEvent('beforeaction', this, action) !== false){
+            this.beforeAction(action);
+            action.run.defer(100, action);
+        }
+        return this;
+    },
+
+    /**
+     * Shortcut to do a submit action.
+     * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
+     * @return {BasicForm} this
+     */
+    submit : function(options){
+        this.doAction('submit', options);
+        return this;
+    },
+
+    /**
+     * Shortcut to do a load action.
+     * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
+     * @return {BasicForm} this
+     */
+    load : function(options){
+        this.doAction('load', options);
+        return this;
+    },
+
+    /**
+     * Persists the values in this form into the passed Roo.data.Record object in a beginEdit/endEdit block.
+     * @param {Record} record The record to edit
+     * @return {BasicForm} this
+     */
+    updateRecord : function(record){
+        record.beginEdit();
+        var fs = record.fields;
+        fs.each(function(f){
+            var field = this.findField(f.name);
+            if(field){
+                record.set(f.name, field.getValue());
+            }
+        }, this);
+        record.endEdit();
+        return this;
+    },
+
+    /**
+     * Loads an Roo.data.Record into this form.
+     * @param {Record} record The record to load
+     * @return {BasicForm} this
+     */
+    loadRecord : function(record){
+        this.setValues(record.data);
+        return this;
+    },
+
+    // private
+    beforeAction : function(action){
+        var o = action.options;
+        
+       
+        if(this.waitMsgTarget === true){
+            this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
+        }else if(this.waitMsgTarget){
+            this.waitMsgTarget = Roo.get(this.waitMsgTarget);
+            this.waitMsgTarget.mask(o.waitMsg || "Sending", 'x-mask-loading');
+        }else {
+            Roo.MessageBox.wait(o.waitMsg || "Sending", o.waitTitle || this.waitTitle || 'Please Wait...');
+        }
+         
+    },
+
+    // private
+    afterAction : function(action, success){
+        this.activeAction = null;
+        var o = action.options;
+        
+        if(this.waitMsgTarget === true){
+            this.el.unmask();
+        }else if(this.waitMsgTarget){
+            this.waitMsgTarget.unmask();
+        }else{
+            Roo.MessageBox.updateProgress(1);
+            Roo.MessageBox.hide();
+        }
+         
+        if(success){
+            if(o.reset){
+                this.reset();
+            }
+            Roo.callback(o.success, o.scope, [this, action]);
+            this.fireEvent('actioncomplete', this, action);
+            
+        }else{
+            
+            // failure condition..
+            // we have a scenario where updates need confirming.
+            // eg. if a locking scenario exists..
+            // we look for { errors : { needs_confirm : true }} in the response.
+            if (
+                (typeof(action.result) != 'undefined')  &&
+                (typeof(action.result.errors) != 'undefined')  &&
+                (typeof(action.result.errors.needs_confirm) != 'undefined')
+           ){
+                var _t = this;
+                Roo.MessageBox.confirm(
+                    "Change requires confirmation",
+                    action.result.errorMsg,
+                    function(r) {
+                        if (r != 'yes') {
+                            return;
+                        }
+                        _t.doAction('submit', { params :  { _submit_confirmed : 1 } }  );
+                    }
+                    
+                );
+                
+                
+                
+                return;
+            }
+            
+            Roo.callback(o.failure, o.scope, [this, action]);
+            // show an error message if no failed handler is set..
+            if (!this.hasListener('actionfailed')) {
+                Roo.MessageBox.alert("Error",
+                    (typeof(action.result) != 'undefined' && typeof(action.result.errorMsg) != 'undefined') ?
+                        action.result.errorMsg :
+                        "Saving Failed, please check your entries or try again"
+                );
+            }
+            
+            this.fireEvent('actionfailed', this, action);
+        }
+        
+    },
+
+    /**
+     * Find a Roo.form.Field in this form by id, dataIndex, name or hiddenName
+     * @param {String} id The value to search for
+     * @return Field
+     */
+    findField : function(id){
+        var field = this.items.get(id);
+        if(!field){
+            this.items.each(function(f){
+                if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
+                    field = f;
+                    return false;
+                }
+            });
+        }
+        return field || null;
+    },
+
+    /**
+     * Add a secondary form to this one, 
+     * Used to provide tabbed forms. One form is primary, with hidden values 
+     * which mirror the elements from the other forms.
+     * 
+     * @param {Roo.form.Form} form to add.
+     * 
+     */
+    addForm : function(form)
+    {
+       
+        if (this.childForms.indexOf(form) > -1) {
+            // already added..
+            return;
+        }
+        this.childForms.push(form);
+        var n = '';
+        Roo.each(form.allItems, function (fe) {
+            
+            n = typeof(fe.getName) == 'undefined' ? fe.name : fe.getName();
+            if (this.findField(n)) { // already added..
+                return;
+            }
+            var add = new Roo.form.Hidden({
+                name : n
+            });
+            add.render(this.el);
+            
+            this.add( add );
+        }, this);
+        
+    },
+    /**
+     * Mark fields in this form invalid in bulk.
+     * @param {Array/Object} errors Either an array in the form [{id:'fieldId', msg:'The message'},...] or an object hash of {id: msg, id2: msg2}
+     * @return {BasicForm} this
+     */
+    markInvalid : function(errors){
+        if(errors instanceof Array){
+            for(var i = 0, len = errors.length; i < len; i++){
+                var fieldError = errors[i];
+                var f = this.findField(fieldError.id);
+                if(f){
+                    f.markInvalid(fieldError.msg);
+                }
+            }
+        }else{
+            var field, id;
+            for(id in errors){
+                if(typeof errors[id] != 'function' && (field = this.findField(id))){
+                    field.markInvalid(errors[id]);
+                }
+            }
+        }
+        Roo.each(this.childForms || [], function (f) {
+            f.markInvalid(errors);
+        });
+        
+        return this;
+    },
+
+    /**
+     * Set values for fields in this form in bulk.
+     * @param {Array/Object} values Either an array in the form [{id:'fieldId', value:'foo'},...] or an object hash of {id: value, id2: value2}
+     * @return {BasicForm} this
+     */
+    setValues : function(values){
+        if(values instanceof Array){ // array of objects
+            for(var i = 0, len = values.length; i < len; i++){
+                var v = values[i];
+                var f = this.findField(v.id);
+                if(f){
+                    f.setValue(v.value);
+                    if(this.trackResetOnLoad){
+                        f.originalValue = f.getValue();
+                    }
+                }
+            }
+        }else{ // object hash
+            var field, id;
+            for(id in values){
+                if(typeof values[id] != 'function' && (field = this.findField(id))){
+                    
+                    if (field.setFromData && 
+                        field.valueField && 
+                        field.displayField &&
+                        // combos' with local stores can 
+                        // be queried via setValue()
+                        // to set their value..
+                        (field.store && !field.store.isLocal)
+                        ) {
+                        // it's a combo
+                        var sd = { };
+                        sd[field.valueField] = typeof(values[field.hiddenName]) == 'undefined' ? '' : values[field.hiddenName];
+                        sd[field.displayField] = typeof(values[field.name]) == 'undefined' ? '' : values[field.name];
+                        field.setFromData(sd);
+                        
+                    } else {
+                        field.setValue(values[id]);
+                    }
+                    
+                    
+                    if(this.trackResetOnLoad){
+                        field.originalValue = field.getValue();
+                    }
+                }
+            }
+        }
+        this.resetHasChanged();
+        
+        
+        Roo.each(this.childForms || [], function (f) {
+            f.setValues(values);
+            f.resetHasChanged();
+        });
+                
+        return this;
+    },
+
+    /**
+     * Returns the fields in this form as an object with key/value pairs. If multiple fields exist with the same name
+     * they are returned as an array.
+     * @param {Boolean} asString
+     * @return {Object}
+     */
+    getValues : function(asString){
+        if (this.childForms) {
+            // copy values from the child forms
+            Roo.each(this.childForms, function (f) {
+                this.setValues(f.getValues());
+            }, this);
+        }
+        
+        
+        
+        var fs = Roo.lib.Ajax.serializeForm(this.el.dom);
+        if(asString === true){
+            return fs;
+        }
+        return Roo.urlDecode(fs);
+    },
+    
+    /**
+     * Returns the fields in this form as an object with key/value pairs. 
+     * This differs from getValues as it calls getValue on each child item, rather than using dom data.
+     * @return {Object}
+     */
+    getFieldValues : function(with_hidden)
+    {
+        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);
+        }
+        
+        var ret = {};
+        this.items.each(function(f){
+            if (!f.getName()) {
+                return;
+            }
+            var v = f.getValue();
+            if (f.inputType =='radio') {
+                if (typeof(ret[f.getName()]) == 'undefined') {
+                    ret[f.getName()] = ''; // empty..
+                }
+                
+                if (!f.el.dom.checked) {
+                    return;
+                    
+                }
+                v = f.el.dom.value;
+                
+            }
+            
+            // not sure if this supported any more..
+            if ((typeof(v) == 'object') && f.getRawValue) {
+                v = f.getRawValue() ; // dates..
+            }
+            // combo boxes where name != hiddenName...
+            if (f.name != f.getName()) {
+                ret[f.name] = f.getRawValue();
+            }
+            ret[f.getName()] = v;
+        });
+        
+        return ret;
+    },
+
+    /**
+     * Clears all invalid messages in this form.
+     * @return {BasicForm} this
+     */
+    clearInvalid : function(){
+        this.items.each(function(f){
+           f.clearInvalid();
+        });
+        
+        Roo.each(this.childForms || [], function (f) {
+            f.clearInvalid();
+        });
+        
+        
+        return this;
+    },
+
+    /**
+     * Resets this form.
+     * @return {BasicForm} this
+     */
+    reset : function(){
+        this.items.each(function(f){
+            f.reset();
+        });
+        
+        Roo.each(this.childForms || [], function (f) {
+            f.reset();
+        });
+        this.resetHasChanged();
+        
+        return this;
+    },
+
+    /**
+     * Add Roo.form components to this form.
+     * @param {Field} field1
+     * @param {Field} field2 (optional)
+     * @param {Field} etc (optional)
+     * @return {BasicForm} this
+     */
+    add : function(){
+        this.items.addAll(Array.prototype.slice.call(arguments, 0));
+        return this;
+    },
+
+
+    /**
+     * Removes a field from the items collection (does NOT remove its markup).
+     * @param {Field} field
+     * @return {BasicForm} this
+     */
+    remove : function(field){
+        this.items.remove(field);
+        return this;
+    },
+
+    /**
+     * Looks at the fields in this form, checks them for an id attribute,
+     * and calls applyTo on the existing dom element with that id.
+     * @return {BasicForm} this
+     */
+    render : function(){
+        this.items.each(function(f){
+            if(f.isFormField && !f.rendered && document.getElementById(f.id)){ // if the element exists
+                f.applyTo(f.id);
+            }
+        });
+        return this;
+    },
+
+    /**
+     * Calls {@link Ext#apply} for all fields in this form with the passed object.
+     * @param {Object} values
+     * @return {BasicForm} this
+     */
+    applyToFields : function(o){
+        this.items.each(function(f){
+           Roo.apply(f, o);
+        });
+        return this;
+    },
+
+    /**
+     * Calls {@link Ext#applyIf} for all field in this form with the passed object.
+     * @param {Object} values
+     * @return {BasicForm} this
+     */
+    applyIfToFields : function(o){
+        this.items.each(function(f){
+           Roo.applyIf(f, o);
+        });
+        return this;
+    }
+});
+
+// back compat
+Roo.BasicForm = Roo.form.BasicForm;/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.form.Form
+ * @extends Roo.form.BasicForm
+ * Adds the ability to dynamically render forms with JavaScript to {@link Roo.form.BasicForm}.
+ * @constructor
+ * @param {Object} config Configuration options
+ */
+Roo.form.Form = function(config){
+    var xitems =  [];
+    if (config.items) {
+        xitems = config.items;
+        delete config.items;
+    }
+   
+    
+    Roo.form.Form.superclass.constructor.call(this, null, config);
+    this.url = this.url || this.action;
+    if(!this.root){
+        this.root = new Roo.form.Layout(Roo.applyIf({
+            id: Roo.id()
+        }, config));
+    }
+    this.active = this.root;
+    /**
+     * Array of all the buttons that have been added to this form via {@link addButton}
+     * @type Array
+     */
+    this.buttons = [];
+    this.allItems = [];
+    this.addEvents({
+        /**
+         * @event clientvalidation
+         * If the monitorValid config option is true, this event fires repetitively to notify of valid state
+         * @param {Form} this
+         * @param {Boolean} valid true if the form has passed client-side validation
+         */
+        clientvalidation: true,
+        /**
+         * @event rendered
+         * Fires when the form is rendered
+         * @param {Roo.form.Form} form
+         */
+        rendered : true
+    });
+    
+    if (this.progressUrl) {
+            // push a hidden field onto the list of fields..
+            this.addxtype( {
+                    xns: Roo.form, 
+                    xtype : 'Hidden', 
+                    name : 'UPLOAD_IDENTIFIER' 
+            });
+        }
+        
+    
+    Roo.each(xitems, this.addxtype, this);
+    
+    
+    
+};
+
+Roo.extend(Roo.form.Form, Roo.form.BasicForm, {
+    /**
+     * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
+     */
+    /**
+     * @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
+     */
+    /**
+     * @cfg {String} buttonAlign Valid values are "left," "center" and "right" (defaults to "center")
+     */
+    buttonAlign:'center',
+
+    /**
+     * @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to 75)
+     */
+    minButtonWidth:75,
+
+    /**
+     * @cfg {String} labelAlign Valid values are "left," "top" and "right" (defaults to "left").
+     * This property cascades to child containers if not set.
+     */
+    labelAlign:'left',
+
+    /**
+     * @cfg {Boolean} monitorValid If true the form monitors its valid state <b>client-side</b> and
+     * fires a looping event with that state. This is required to bind buttons to the valid
+     * state using the config value formBind:true on the button.
+     */
+    monitorValid : false,
+
+    /**
+     * @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
+     */
+    monitorPoll : 200,
+    
+    /**
+     * @cfg {String} progressUrl - Url to return progress data 
+     */
+    
+    progressUrl : false,
+  
+    /**
+     * Opens a new {@link Roo.form.Column} container in the layout stack. If fields are passed after the config, the
+     * fields are added and the column is closed. If no fields are passed the column remains open
+     * until end() is called.
+     * @param {Object} config The config to pass to the column
+     * @param {Field} field1 (optional)
+     * @param {Field} field2 (optional)
+     * @param {Field} etc (optional)
+     * @return Column The column container object
+     */
+    column : function(c){
+        var col = new Roo.form.Column(c);
+        this.start(col);
+        if(arguments.length > 1){ // duplicate code required because of Opera
+            this.add.apply(this, Array.prototype.slice.call(arguments, 1));
+            this.end();
+        }
+        return col;
+    },
+
+    /**
+     * Opens a new {@link Roo.form.FieldSet} container in the layout stack. If fields are passed after the config, the
+     * fields are added and the fieldset is closed. If no fields are passed the fieldset remains open
+     * until end() is called.
+     * @param {Object} config The config to pass to the fieldset
+     * @param {Field} field1 (optional)
+     * @param {Field} field2 (optional)
+     * @param {Field} etc (optional)
+     * @return FieldSet The fieldset container object
+     */
+    fieldset : function(c){
+        var fs = new Roo.form.FieldSet(c);
+        this.start(fs);
+        if(arguments.length > 1){ // duplicate code required because of Opera
+            this.add.apply(this, Array.prototype.slice.call(arguments, 1));
+            this.end();
+        }
+        return fs;
+    },
+
+    /**
+     * Opens a new {@link Roo.form.Layout} container in the layout stack. If fields are passed after the config, the
+     * fields are added and the container is closed. If no fields are passed the container remains open
+     * until end() is called.
+     * @param {Object} config The config to pass to the Layout
+     * @param {Field} field1 (optional)
+     * @param {Field} field2 (optional)
+     * @param {Field} etc (optional)
+     * @return Layout The container object
+     */
+    container : function(c){
+        var l = new Roo.form.Layout(c);
+        this.start(l);
+        if(arguments.length > 1){ // duplicate code required because of Opera
+            this.add.apply(this, Array.prototype.slice.call(arguments, 1));
+            this.end();
+        }
+        return l;
+    },
+
+    /**
+     * Opens the passed container in the layout stack. The container can be any {@link Roo.form.Layout} or subclass.
+     * @param {Object} container A Roo.form.Layout or subclass of Layout
+     * @return {Form} this
+     */
+    start : function(c){
+        // cascade label info
+        Roo.applyIf(c, {'labelAlign': this.active.labelAlign, 'labelWidth': this.active.labelWidth, 'itemCls': this.active.itemCls});
+        this.active.stack.push(c);
+        c.ownerCt = this.active;
+        this.active = c;
+        return this;
+    },
+
+    /**
+     * Closes the current open container
+     * @return {Form} this
+     */
+    end : function(){
+        if(this.active == this.root){
+            return this;
+        }
+        this.active = this.active.ownerCt;
+        return this;
+    },
+
+    /**
+     * Add Roo.form components to the current open container (e.g. column, fieldset, etc.).  Fields added via this method
+     * can also be passed with an additional property of fieldLabel, which if supplied, will provide the text to display
+     * as the label of the field.
+     * @param {Field} field1
+     * @param {Field} field2 (optional)
+     * @param {Field} etc. (optional)
+     * @return {Form} this
+     */
+    add : function(){
+        this.active.stack.push.apply(this.active.stack, arguments);
+        this.allItems.push.apply(this.allItems,arguments);
+        var r = [];
+        for(var i = 0, a = arguments, len = a.length; i < len; i++) {
+            if(a[i].isFormField){
+                r.push(a[i]);
+            }
+        }
+        if(r.length > 0){
+            Roo.form.Form.superclass.add.apply(this, r);
+        }
+        return this;
+    },
+    
+
+    
+    
+    
+     /**
+     * Find any element that has been added to a form, using it's ID or name
+     * This can include framesets, columns etc. along with regular fields..
+     * @param {String} id - id or name to find.
+     
+     * @return {Element} e - or false if nothing found.
+     */
+    findbyId : function(id)
+    {
+        var ret = false;
+        if (!id) {
+            return ret;
+        }
+        Roo.each(this.allItems, function(f){
+            if (f.id == id || f.name == id ){
+                ret = f;
+                return false;
+            }
+        });
+        return ret;
+    },
+
+    
+    
+    /**
+     * Render this form into the passed container. This should only be called once!
+     * @param {String/HTMLElement/Element} container The element this component should be rendered into
+     * @return {Form} this
+     */
+    render : function(ct)
+    {
+        
+        
+        
+        ct = Roo.get(ct);
+        var o = this.autoCreate || {
+            tag: 'form',
+            method : this.method || 'POST',
+            id : this.id || Roo.id()
+        };
+        this.initEl(ct.createChild(o));
+
+        this.root.render(this.el);
+        
+       
+             
+        this.items.each(function(f){
+            f.render('x-form-el-'+f.id);
+        });
+
+        if(this.buttons.length > 0){
+            // tables are required to maintain order and for correct IE layout
+            var tb = this.el.createChild({cls:'x-form-btns-ct', cn: {
+                cls:"x-form-btns x-form-btns-"+this.buttonAlign,
+                html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
+            }}, null, true);
+            var tr = tb.getElementsByTagName('tr')[0];
+            for(var i = 0, len = this.buttons.length; i < len; i++) {
+                var b = this.buttons[i];
+                var td = document.createElement('td');
+                td.className = 'x-form-btn-td';
+                b.render(tr.appendChild(td));
+            }
+        }
+        if(this.monitorValid){ // initialize after render
+            this.startMonitoring();
+        }
+        this.fireEvent('rendered', this);
+        return this;
+    },
+
+    /**
+     * Adds a button to the footer of the form - this <b>must</b> be called before the form is rendered.
+     * @param {String/Object} config A string becomes the button text, an object can either be a Button config
+     * object or a valid Roo.DomHelper element config
+     * @param {Function} handler The function called when the button is clicked
+     * @param {Object} scope (optional) The scope of the handler function
+     * @return {Roo.Button}
+     */
+    addButton : function(config, handler, scope){
+        var bc = {
+            handler: handler,
+            scope: scope,
+            minWidth: this.minButtonWidth,
+            hideParent:true
+        };
+        if(typeof config == "string"){
+            bc.text = config;
+        }else{
+            Roo.apply(bc, config);
+        }
+        var btn = new Roo.Button(null, bc);
+        this.buttons.push(btn);
+        return btn;
+    },
+
+     /**
+     * Adds a series of form elements (using the xtype property as the factory method.
+     * Valid xtypes are:  TextField, TextArea .... Button, Layout, FieldSet, Column, (and 'end' to close a block)
+     * @param {Object} config 
+     */
+    
+    addxtype : function()
+    {
+        var ar = Array.prototype.slice.call(arguments, 0);
+        var ret = false;
+        for(var i = 0; i < ar.length; i++) {
+            if (!ar[i]) {
+                continue; // skip -- if this happends something invalid got sent, we 
+                // should ignore it, as basically that interface element will not show up
+                // and that should be pretty obvious!!
+            }
+            
+            if (Roo.form[ar[i].xtype]) {
+                ar[i].form = this;
+                var fe = Roo.factory(ar[i], Roo.form);
+                if (!ret) {
+                    ret = fe;
+                }
+                fe.form = this;
+                if (fe.store) {
+                    fe.store.form = this;
+                }
+                if (fe.isLayout) {  
+                         
+                    this.start(fe);
+                    this.allItems.push(fe);
+                    if (fe.items && fe.addxtype) {
+                        fe.addxtype.apply(fe, fe.items);
+                        delete fe.items;
+                    }
+                     this.end();
+                    continue;
+                }
+                
+                
+                 
+                this.add(fe);
+              //  console.log('adding ' + ar[i].xtype);
+            }
+            if (ar[i].xtype == 'Button') {  
+                //console.log('adding button');
+                //console.log(ar[i]);
+                this.addButton(ar[i]);
+                this.allItems.push(fe);
+                continue;
+            }
+            
+            if (ar[i].xtype == 'end') { // so we can add fieldsets... / layout etc.
+                alert('end is not supported on xtype any more, use items');
+            //    this.end();
+            //    //console.log('adding end');
+            }
+            
+        }
+        return ret;
+    },
+    
+    /**
+     * Starts monitoring of the valid state of this form. Usually this is done by passing the config
+     * option "monitorValid"
+     */
+    startMonitoring : function(){
+        if(!this.bound){
+            this.bound = true;
+            Roo.TaskMgr.start({
+                run : this.bindHandler,
+                interval : this.monitorPoll || 200,
+                scope: this
+            });
+        }
+    },
+
+    /**
+     * Stops monitoring of the valid state of this form
+     */
+    stopMonitoring : function(){
+        this.bound = false;
+    },
+
+    // private
+    bindHandler : function(){
+        if(!this.bound){
+            return false; // stops binding
+        }
+        var valid = true;
+        this.items.each(function(f){
+            if(!f.isValid(true)){
+                valid = false;
+                return false;
+            }
+        });
+        for(var i = 0, len = this.buttons.length; i < len; i++){
+            var btn = this.buttons[i];
+            if(btn.formBind === true && btn.disabled === valid){
+                btn.setDisabled(!valid);
+            }
+        }
+        this.fireEvent('clientvalidation', this, valid);
+    }
+    
+    
+    
+    
+    
+    
+    
+    
+});
+
+
+// back compat
+Roo.Form = Roo.form.Form;
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+// as we use this in bootstrap.
+Roo.namespace('Roo.form');
+ /**
+ * @class Roo.form.Action
+ * Internal Class used to handle form actions
+ * @constructor
+ * @param {Roo.form.BasicForm} el The form element or its id
+ * @param {Object} config Configuration options
+ */
+
+ 
+ 
+// define the action interface
+Roo.form.Action = function(form, options){
+    this.form = form;
+    this.options = options || {};
+};
+/**
+ * Client Validation Failed
+ * @const 
+ */
+Roo.form.Action.CLIENT_INVALID = 'client';
+/**
+ * Server Validation Failed
+ * @const 
+ */
+Roo.form.Action.SERVER_INVALID = 'server';
+ /**
+ * Connect to Server Failed
+ * @const 
+ */
+Roo.form.Action.CONNECT_FAILURE = 'connect';
+/**
+ * Reading Data from Server Failed
+ * @const 
+ */
+Roo.form.Action.LOAD_FAILURE = 'load';
+
+Roo.form.Action.prototype = {
+    type : 'default',
+    failureType : undefined,
+    response : undefined,
+    result : undefined,
+
+    // interface method
+    run : function(options){
+
+    },
+
+    // interface method
+    success : function(response){
+
+    },
+
+    // interface method
+    handleResponse : function(response){
+
+    },
+
+    // default connection failure
+    failure : function(response){
+        
+        this.response = response;
+        this.failureType = Roo.form.Action.CONNECT_FAILURE;
+        this.form.afterAction(this, false);
+    },
+
+    processResponse : function(response){
+        this.response = response;
+        if(!response.responseText){
+            return true;
+        }
+        this.result = this.handleResponse(response);
+        return this.result;
+    },
+
+    // utility functions used internally
+    getUrl : function(appendParams){
+        var url = this.options.url || this.form.url || this.form.el.dom.action;
+        if(appendParams){
+            var p = this.getParams();
+            if(p){
+                url += (url.indexOf('?') != -1 ? '&' : '?') + p;
+            }
+        }
+        return url;
+    },
+
+    getMethod : function(){
+        return (this.options.method || this.form.method || this.form.el.dom.method || 'POST').toUpperCase();
+    },
+
+    getParams : function(){
+        var bp = this.form.baseParams;
+        var p = this.options.params;
+        if(p){
+            if(typeof p == "object"){
+                p = Roo.urlEncode(Roo.applyIf(p, bp));
+            }else if(typeof p == 'string' && bp){
+                p += '&' + Roo.urlEncode(bp);
+            }
+        }else if(bp){
+            p = Roo.urlEncode(bp);
+        }
+        return p;
+    },
+
+    createCallback : function(){
+        return {
+            success: this.success,
+            failure: this.failure,
+            scope: this,
+            timeout: (this.form.timeout*1000),
+            upload: this.form.fileUpload ? this.success : undefined
+        };
+    }
+};
+
+Roo.form.Action.Submit = function(form, options){
+    Roo.form.Action.Submit.superclass.constructor.call(this, form, options);
+};
+
+Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
+    type : 'submit',
+
+    haveProgress : false,
+    uploadComplete : false,
+    
+    // uploadProgress indicator.
+    uploadProgress : function()
+    {
+        if (!this.form.progressUrl) {
+            return;
+        }
+        
+        if (!this.haveProgress) {
+            Roo.MessageBox.progress("Uploading", "Uploading");
+        }
+        if (this.uploadComplete) {
+           Roo.MessageBox.hide();
+           return;
+        }
+        
+        this.haveProgress = true;
+   
+        var uid = this.form.findField('UPLOAD_IDENTIFIER').getValue();
+        
+        var c = new Roo.data.Connection();
+        c.request({
+            url : this.form.progressUrl,
+            params: {
+                id : uid
+            },
+            method: 'GET',
+            success : function(req){
+               //console.log(data);
+                var rdata = false;
+                var edata;
+                try  {
+                   rdata = Roo.decode(req.responseText)
+                } catch (e) {
+                    Roo.log("Invalid data from server..");
+                    Roo.log(edata);
+                    return;
+                }
+                if (!rdata || !rdata.success) {
+                    Roo.log(rdata);
+                    Roo.MessageBox.alert(Roo.encode(rdata));
+                    return;
+                }
+                var data = rdata.data;
+                
+                if (this.uploadComplete) {
+                   Roo.MessageBox.hide();
+                   return;
+                }
+                   
+                if (data){
+                    Roo.MessageBox.updateProgress(data.bytes_uploaded/data.bytes_total,
+                       Math.floor((data.bytes_total - data.bytes_uploaded)/1000) + 'k remaining'
+                    );
+                }
+                this.uploadProgress.defer(2000,this);
+            },
+       
+            failure: function(data) {
+                Roo.log('progress url failed ');
+                Roo.log(data);
+            },
+            scope : this
+        });
+           
+    },
+    
+    
+    run : function()
+    {
+        // run get Values on the form, so it syncs any secondary forms.
+        this.form.getValues();
+        
+        var o = this.options;
+        var method = this.getMethod();
+        var isPost = method == 'POST';
+        if(o.clientValidation === false || this.form.isValid()){
+            
+            if (this.form.progressUrl) {
+                this.form.findField('UPLOAD_IDENTIFIER').setValue(
+                    (new Date() * 1) + '' + Math.random());
+                    
+            } 
+            
+            
+            Roo.Ajax.request(Roo.apply(this.createCallback(), {
+                form:this.form.el.dom,
+                url:this.getUrl(!isPost),
+                method: method,
+                params:isPost ? this.getParams() : null,
+                isUpload: this.form.fileUpload
+            }));
+            
+            this.uploadProgress();
+
+        }else if (o.clientValidation !== false){ // client validation failed
+            this.failureType = Roo.form.Action.CLIENT_INVALID;
+            this.form.afterAction(this, false);
+        }
+    },
+
+    success : function(response)
+    {
+        this.uploadComplete= true;
+        if (this.haveProgress) {
+            Roo.MessageBox.hide();
+        }
+        
+        
+        var result = this.processResponse(response);
+        if(result === true || result.success){
+            this.form.afterAction(this, true);
+            return;
+        }
+        if(result.errors){
+            this.form.markInvalid(result.errors);
+            this.failureType = Roo.form.Action.SERVER_INVALID;
+        }
+        this.form.afterAction(this, false);
+    },
+    failure : function(response)
+    {
+        this.uploadComplete= true;
+        if (this.haveProgress) {
+            Roo.MessageBox.hide();
+        }
+        
+        this.response = response;
+        this.failureType = Roo.form.Action.CONNECT_FAILURE;
+        this.form.afterAction(this, false);
+    },
+    
+    handleResponse : function(response){
+        if(this.form.errorReader){
+            var rs = this.form.errorReader.read(response);
+            var errors = [];
+            if(rs.records){
+                for(var i = 0, len = rs.records.length; i < len; i++) {
+                    var r = rs.records[i];
+                    errors[i] = r.data;
+                }
+            }
+            if(errors.length < 1){
+                errors = null;
+            }
+            return {
+                success : rs.success,
+                errors : errors
+            };
+        }
+        var ret = false;
+        try {
+            ret = Roo.decode(response.responseText);
+        } catch (e) {
+            ret = {
+                success: false,
+                errorMsg: "Failed to read server message: " + (response ? response.responseText : ' - no message'),
+                errors : []
+            };
+        }
+        return ret;
+        
+    }
+});
+
+
+Roo.form.Action.Load = function(form, options){
+    Roo.form.Action.Load.superclass.constructor.call(this, form, options);
+    this.reader = this.form.reader;
+};
+
+Roo.extend(Roo.form.Action.Load, Roo.form.Action, {
+    type : 'load',
+
+    run : function(){
+        
+        Roo.Ajax.request(Roo.apply(
+                this.createCallback(), {
+                    method:this.getMethod(),
+                    url:this.getUrl(false),
+                    params:this.getParams()
+        }));
+    },
+
+    success : function(response){
+        
+        var result = this.processResponse(response);
+        if(result === true || !result.success || !result.data){
+            this.failureType = Roo.form.Action.LOAD_FAILURE;
+            this.form.afterAction(this, false);
+            return;
+        }
+        this.form.clearInvalid();
+        this.form.setValues(result.data);
+        this.form.afterAction(this, true);
+    },
+
+    handleResponse : function(response){
+        if(this.form.reader){
+            var rs = this.form.reader.read(response);
+            var data = rs.records && rs.records[0] ? rs.records[0].data : null;
+            return {
+                success : rs.success,
+                data : data
+            };
+        }
+        return Roo.decode(response.responseText);
+    }
+});
+
+Roo.form.Action.ACTION_TYPES = {
+    'load' : Roo.form.Action.Load,
+    'submit' : Roo.form.Action.Submit
+};/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+/**
+ * @class Roo.form.Layout
+ * @extends Roo.Component
+ * Creates a container for layout and rendering of fields in an {@link Roo.form.Form}.
+ * @constructor
+ * @param {Object} config Configuration options
+ */
+Roo.form.Layout = function(config){
+    var xitems = [];
+    if (config.items) {
+        xitems = config.items;
+        delete config.items;
+    }
+    Roo.form.Layout.superclass.constructor.call(this, config);
+    this.stack = [];
+    Roo.each(xitems, this.addxtype, this);
+     
+};
+
+Roo.extend(Roo.form.Layout, Roo.Component, {
+    /**
+     * @cfg {String/Object} autoCreate
+     * A DomHelper element spec used to autocreate the layout (defaults to {tag: 'div', cls: 'x-form-ct'})
+     */
+    /**
+     * @cfg {String/Object/Function} style
+     * A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
+     * a function which returns such a specification.
+     */
+    /**
+     * @cfg {String} labelAlign
+     * Valid values are "left," "top" and "right" (defaults to "left")
+     */
+    /**
+     * @cfg {Number} labelWidth
+     * Fixed width in pixels of all field labels (defaults to undefined)
+     */
+    /**
+     * @cfg {Boolean} clear
+     * True to add a clearing element at the end of this layout, equivalent to CSS clear: both (defaults to true)
+     */
+    clear : true,
+    /**
+     * @cfg {String} labelSeparator
+     * The separator to use after field labels (defaults to ':')
+     */
+    labelSeparator : ':',
+    /**
+     * @cfg {Boolean} hideLabels
+     * True to suppress the display of field labels in this layout (defaults to false)
+     */
+    hideLabels : false,
+
+    // private
+    defaultAutoCreate : {tag: 'div', cls: 'x-form-ct'},
+    
+    isLayout : true,
+    
+    // private
+    onRender : function(ct, position){
+        if(this.el){ // from markup
+            this.el = Roo.get(this.el);
+        }else {  // generate
+            var cfg = this.getAutoCreate();
+            this.el = ct.createChild(cfg, position);
+        }
+        if(this.style){
+            this.el.applyStyles(this.style);
+        }
+        if(this.labelAlign){
+            this.el.addClass('x-form-label-'+this.labelAlign);
+        }
+        if(this.hideLabels){
+            this.labelStyle = "display:none";
+            this.elementStyle = "padding-left:0;";
+        }else{
+            if(typeof this.labelWidth == 'number'){
+                this.labelStyle = "width:"+this.labelWidth+"px;";
+                this.elementStyle = "padding-left:"+((this.labelWidth+(typeof this.labelPad == 'number' ? this.labelPad : 5))+'px')+";";
+            }
+            if(this.labelAlign == 'top'){
+                this.labelStyle = "width:auto;";
+                this.elementStyle = "padding-left:0;";
+            }
+        }
+        var stack = this.stack;
+        var slen = stack.length;
+        if(slen > 0){
+            if(!this.fieldTpl){
+                var t = new Roo.Template(
+                    '<div class="x-form-item {5}">',
+                        '<label for="{0}" style="{2}">{1}{4}</label>',
+                        '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
+                        '</div>',
+                    '</div><div class="x-form-clear-left"></div>'
+                );
+                t.disableFormats = true;
+                t.compile();
+                Roo.form.Layout.prototype.fieldTpl = t;
+            }
+            for(var i = 0; i < slen; i++) {
+                if(stack[i].isFormField){
+                    this.renderField(stack[i]);
+                }else{
+                    this.renderComponent(stack[i]);
+                }
+            }
+        }
+        if(this.clear){
+            this.el.createChild({cls:'x-form-clear'});
+        }
+    },
+
+    // private
+    renderField : function(f){
+        f.fieldEl = Roo.get(this.fieldTpl.append(this.el, [
+               f.id, //0
+               f.fieldLabel, //1
+               f.labelStyle||this.labelStyle||'', //2
+               this.elementStyle||'', //3
+               typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator, //4
+               f.itemCls||this.itemCls||''  //5
+       ], true).getPrevSibling());
+    },
+
+    // private
+    renderComponent : function(c){
+        c.render(c.isLayout ? this.el : this.el.createChild());    
+    },
+    /**
+     * Adds a object form elements (using the xtype property as the factory method.)
+     * Valid xtypes are:  TextField, TextArea .... Button, Layout, FieldSet, Column
+     * @param {Object} config 
+     */
+    addxtype : function(o)
+    {
+        // create the lement.
+        o.form = this.form;
+        var fe = Roo.factory(o, Roo.form);
+        this.form.allItems.push(fe);
+        this.stack.push(fe);
+        
+        if (fe.isFormField) {
+            this.form.items.add(fe);
+        }
+         
+        return fe;
+    }
+});
+
+/**
+ * @class Roo.form.Column
+ * @extends Roo.form.Layout
+ * Creates a column container for layout and rendering of fields in an {@link Roo.form.Form}.
+ * @constructor
+ * @param {Object} config Configuration options
+ */
+Roo.form.Column = function(config){
+    Roo.form.Column.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.form.Column, Roo.form.Layout, {
+    /**
+     * @cfg {Number/String} width
+     * The fixed width of the column in pixels or CSS value (defaults to "auto")
+     */
+    /**
+     * @cfg {String/Object} autoCreate
+     * A DomHelper element spec used to autocreate the column (defaults to {tag: 'div', cls: 'x-form-ct x-form-column'})
+     */
+
+    // private
+    defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-column'},
+
+    // private
+    onRender : function(ct, position){
+        Roo.form.Column.superclass.onRender.call(this, ct, position);
+        if(this.width){
+            this.el.setWidth(this.width);
+        }
+    }
+});
+
+
+/**
+ * @class Roo.form.Row
+ * @extends Roo.form.Layout
+ * Creates a row container for layout and rendering of fields in an {@link Roo.form.Form}.
+ * @constructor
+ * @param {Object} config Configuration options
+ */
+
+ 
+Roo.form.Row = function(config){
+    Roo.form.Row.superclass.constructor.call(this, config);
+};
+ 
+Roo.extend(Roo.form.Row, Roo.form.Layout, {
+      /**
+     * @cfg {Number/String} width
+     * The fixed width of the column in pixels or CSS value (defaults to "auto")
+     */
+    /**
+     * @cfg {Number/String} height
+     * The fixed height of the column in pixels or CSS value (defaults to "auto")
+     */
+    defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-row'},
+    
+    padWidth : 20,
+    // private
+    onRender : function(ct, position){
+        //console.log('row render');
+        if(!this.rowTpl){
+            var t = new Roo.Template(
+                '<div class="x-form-item {5}" style="float:left;width:{6}px">',
+                    '<label for="{0}" style="{2}">{1}{4}</label>',
+                    '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
+                    '</div>',
+                '</div>'
+            );
+            t.disableFormats = true;
+            t.compile();
+            Roo.form.Layout.prototype.rowTpl = t;
+        }
+        this.fieldTpl = this.rowTpl;
+        
+        //console.log('lw' + this.labelWidth +', la:' + this.labelAlign);
+        var labelWidth = 100;
+        
+        if ((this.labelAlign != 'top')) {
+            if (typeof this.labelWidth == 'number') {
+                labelWidth = this.labelWidth
+            }
+            this.padWidth =  20 + labelWidth;
+            
+        }
+        
+        Roo.form.Column.superclass.onRender.call(this, ct, position);
+        if(this.width){
+            this.el.setWidth(this.width);
+        }
+        if(this.height){
+            this.el.setHeight(this.height);
+        }
+    },
+    
+    // private
+    renderField : function(f){
+        f.fieldEl = this.fieldTpl.append(this.el, [
+               f.id, f.fieldLabel,
+               f.labelStyle||this.labelStyle||'',
+               this.elementStyle||'',
+               typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator,
+               f.itemCls||this.itemCls||'',
+               f.width ? f.width + this.padWidth : 160 + this.padWidth
+       ],true);
+    }
+});
+ 
+
+/**
+ * @class Roo.form.FieldSet
+ * @extends Roo.form.Layout
+ * Creates a fieldset container for layout and rendering of fields in an {@link Roo.form.Form}.
+ * @constructor
+ * @param {Object} config Configuration options
+ */
+Roo.form.FieldSet = function(config){
+    Roo.form.FieldSet.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.form.FieldSet, Roo.form.Layout, {
+    /**
+     * @cfg {String} legend
+     * The text to display as the legend for the FieldSet (defaults to '')
+     */
+    /**
+     * @cfg {String/Object} autoCreate
+     * A DomHelper element spec used to autocreate the fieldset (defaults to {tag: 'fieldset', cn: {tag:'legend'}})
+     */
+
+    // private
+    defaultAutoCreate : {tag: 'fieldset', cn: {tag:'legend'}},
+
+    // private
+    onRender : function(ct, position){
+        Roo.form.FieldSet.superclass.onRender.call(this, ct, position);
+        if(this.legend){
+            this.setLegend(this.legend);
+        }
+    },
+
+    // private
+    setLegend : function(text){
+        if(this.rendered){
+            this.el.child('legend').update(text);
+        }
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.form.VTypes
+ * Overridable validation definitions. The validations provided are basic and intended to be easily customizable and extended.
+ * @singleton
+ */
+Roo.form.VTypes = function(){
+    // closure these in so they are only created once.
+    var alpha = /^[a-zA-Z_]+$/;
+    var alphanum = /^[a-zA-Z0-9_]+$/;
+    var email = /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,24}$/;
+    var url = /(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
+
+    // All these messages and functions are configurable
+    return {
+        /**
+         * The function used to validate email addresses
+         * @param {String} value The email address
+         */
+        'email' : function(v){
+            return email.test(v);
+        },
+        /**
+         * The error text to display when the email validation function returns false
+         * @type String
+         */
+        'emailText' : 'This field should be an e-mail address in the format "user@domain.com"',
+        /**
+         * The keystroke filter mask to be applied on email input
+         * @type RegExp
+         */
+        'emailMask' : /[a-z0-9_\.\-@]/i,
+
+        /**
+         * The function used to validate URLs
+         * @param {String} value The URL
+         */
+        'url' : function(v){
+            return url.test(v);
+        },
+        /**
+         * The error text to display when the url validation function returns false
+         * @type String
+         */
+        'urlText' : 'This field should be a URL in the format "http:/'+'/www.domain.com"',
+        
+        /**
+         * The function used to validate alpha values
+         * @param {String} value The value
+         */
+        'alpha' : function(v){
+            return alpha.test(v);
+        },
+        /**
+         * The error text to display when the alpha validation function returns false
+         * @type String
+         */
+        'alphaText' : 'This field should only contain letters and _',
+        /**
+         * The keystroke filter mask to be applied on alpha input
+         * @type RegExp
+         */
+        'alphaMask' : /[a-z_]/i,
+
+        /**
+         * The function used to validate alphanumeric values
+         * @param {String} value The value
+         */
+        'alphanum' : function(v){
+            return alphanum.test(v);
+        },
+        /**
+         * The error text to display when the alphanumeric validation function returns false
+         * @type String
+         */
+        'alphanumText' : 'This field should only contain letters, numbers and _',
+        /**
+         * The keystroke filter mask to be applied on alphanumeric input
+         * @type RegExp
+         */
+        'alphanumMask' : /[a-z0-9_]/i
+    };
+}();//<script type="text/javascript">
+
+/**
+ * @class Roo.form.FCKeditor
+ * @extends Roo.form.TextArea
+ * Wrapper around the FCKEditor http://www.fckeditor.net
+ * @constructor
+ * Creates a new FCKeditor
+ * @param {Object} config Configuration options
+ */
+Roo.form.FCKeditor = function(config){
+    Roo.form.FCKeditor.superclass.constructor.call(this, config);
+    this.addEvents({
+         /**
+         * @event editorinit
+         * Fired when the editor is initialized - you can add extra handlers here..
+         * @param {FCKeditor} this
+         * @param {Object} the FCK object.
+         */
+        editorinit : true
+    });
+    
+    
+};
+Roo.form.FCKeditor.editors = { };
+Roo.extend(Roo.form.FCKeditor, Roo.form.TextArea,
+{
+    //defaultAutoCreate : {
+    //    tag : "textarea",style   : "width:100px;height:60px;" ,autocomplete    : "off"
+    //},
+    // private
+    /**
+     * @cfg {Object} fck options - see fck manual for details.
+     */
+    fckconfig : false,
+    
+    /**
+     * @cfg {Object} fck toolbar set (Basic or Default)
+     */
+    toolbarSet : 'Basic',
+    /**
+     * @cfg {Object} fck BasePath
+     */ 
+    basePath : '/fckeditor/',
+    
+    
+    frame : false,
+    
+    value : '',
+    
+   
+    onRender : function(ct, position)
+    {
+        if(!this.el){
+            this.defaultAutoCreate = {
+                tag: "textarea",
+                style:"width:300px;height:60px;",
+                autocomplete: "new-password"
+            };
+        }
+        Roo.form.FCKeditor.superclass.onRender.call(this, ct, position);
+        /*
+        if(this.grow){
+            this.textSizeEl = Roo.DomHelper.append(document.body, {tag: "pre", cls: "x-form-grow-sizer"});
+            if(this.preventScrollbars){
+                this.el.setStyle("overflow", "hidden");
+            }
+            this.el.setHeight(this.growMin);
+        }
+        */
+        //console.log('onrender' + this.getId() );
+        Roo.form.FCKeditor.editors[this.getId()] = this;
+         
+
+        this.replaceTextarea() ;
+        
+    },
+    
+    getEditor : function() {
+        return this.fckEditor;
+    },
+    /**
+     * Sets a data value into the field and validates it.  To set the value directly without validation see {@link #setRawValue}.
+     * @param {Mixed} value The value to set
+     */
+    
+    
+    setValue : function(value)
+    {
+        //console.log('setValue: ' + value);
+        
+        if(typeof(value) == 'undefined') { // not sure why this is happending...
+            return;
+        }
+        Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
+        
+        //if(!this.el || !this.getEditor()) {
+        //    this.value = value;
+            //this.setValue.defer(100,this,[value]);    
+        //    return;
+        //} 
+        
+        if(!this.getEditor()) {
+            return;
+        }
+        
+        this.getEditor().SetData(value);
+        
+        //
+
+    },
+
+    /**
+     * Returns the normalized data value (undefined or emptyText will be returned as '').  To return the raw value see {@link #getRawValue}.
+     * @return {Mixed} value The field value
+     */
+    getValue : function()
+    {
+        
+        if (this.frame && this.frame.dom.style.display == 'none') {
+            return Roo.form.FCKeditor.superclass.getValue.call(this);
+        }
+        
+        if(!this.el || !this.getEditor()) {
+           
+           // this.getValue.defer(100,this); 
+            return this.value;
+        }
+       
+        
+        var value=this.getEditor().GetData();
+        Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
+        return Roo.form.FCKeditor.superclass.getValue.call(this);
+        
+
+    },
+
+    /**
+     * Returns the raw data value which may or may not be a valid, defined value.  To return a normalized value see {@link #getValue}.
+     * @return {Mixed} value The field value
+     */
+    getRawValue : function()
+    {
+        if (this.frame && this.frame.dom.style.display == 'none') {
+            return Roo.form.FCKeditor.superclass.getRawValue.call(this);
+        }
+        
+        if(!this.el || !this.getEditor()) {
+            //this.getRawValue.defer(100,this); 
+            return this.value;
+            return;
+        }
+        
+        
+        
+        var value=this.getEditor().GetData();
+        Roo.form.FCKeditor.superclass.setRawValue.apply(this,[value]);
+        return Roo.form.FCKeditor.superclass.getRawValue.call(this);
+         
+    },
+    
+    setSize : function(w,h) {
+        
+        
+        
+        //if (this.frame && this.frame.dom.style.display == 'none') {
+        //    Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
+        //    return;
+        //}
+        //if(!this.el || !this.getEditor()) {
+        //    this.setSize.defer(100,this, [w,h]); 
+        //    return;
+        //}
+        
+        
+        
+        Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
+        
+        this.frame.dom.setAttribute('width', w);
+        this.frame.dom.setAttribute('height', h);
+        this.frame.setSize(w,h);
+        
+    },
+    
+    toggleSourceEdit : function(value) {
+        
+      
+         
+        this.el.dom.style.display = value ? '' : 'none';
+        this.frame.dom.style.display = value ?  'none' : '';
+        
+    },
+    
+    
+    focus: function(tag)
+    {
+        if (this.frame.dom.style.display == 'none') {
+            return Roo.form.FCKeditor.superclass.focus.call(this);
+        }
+        if(!this.el || !this.getEditor()) {
+            this.focus.defer(100,this, [tag]); 
+            return;
+        }
+        
+        
+        
+        
+        var tgs = this.getEditor().EditorDocument.getElementsByTagName(tag);
+        this.getEditor().Focus();
+        if (tgs.length) {
+            if (!this.getEditor().Selection.GetSelection()) {
+                this.focus.defer(100,this, [tag]); 
+                return;
+            }
+            
+            
+            var r = this.getEditor().EditorDocument.createRange();
+            r.setStart(tgs[0],0);
+            r.setEnd(tgs[0],0);
+            this.getEditor().Selection.GetSelection().removeAllRanges();
+            this.getEditor().Selection.GetSelection().addRange(r);
+            this.getEditor().Focus();
+        }
+        
+    },
+    
+    
+    
+    replaceTextarea : function()
+    {
+        if ( document.getElementById( this.getId() + '___Frame' ) ) {
+            return ;
+        }
+        //if ( !this.checkBrowser || this._isCompatibleBrowser() )
+        //{
+            // We must check the elements firstly using the Id and then the name.
+        var oTextarea = document.getElementById( this.getId() );
+        
+        var colElementsByName = document.getElementsByName( this.getId() ) ;
+         
+        oTextarea.style.display = 'none' ;
+
+        if ( oTextarea.tabIndex ) {            
+            this.TabIndex = oTextarea.tabIndex ;
+        }
+        
+        this._insertHtmlBefore( this._getConfigHtml(), oTextarea ) ;
+        this._insertHtmlBefore( this._getIFrameHtml(), oTextarea ) ;
+        this.frame = Roo.get(this.getId() + '___Frame')
+    },
+    
+    _getConfigHtml : function()
+    {
+        var sConfig = '' ;
+
+        for ( var o in this.fckconfig ) {
+            sConfig += sConfig.length > 0  ? '&amp;' : '';
+            sConfig += encodeURIComponent( o ) + '=' + encodeURIComponent( this.fckconfig[o] ) ;
+        }
+
+        return '<input type="hidden" id="' + this.getId() + '___Config" value="' + sConfig + '" style="display:none" />' ;
+    },
+    
+    
+    _getIFrameHtml : function()
+    {
+        var sFile = 'fckeditor.html' ;
+        /* no idea what this is about..
+        try
+        {
+            if ( (/fcksource=true/i).test( window.top.location.search ) )
+                sFile = 'fckeditor.original.html' ;
+        }
+        catch (e) { 
+        */
+
+        var sLink = this.basePath + 'editor/' + sFile + '?InstanceName=' + encodeURIComponent( this.getId() ) ;
+        sLink += this.toolbarSet ? ( '&amp;Toolbar=' + this.toolbarSet)  : '';
+        
+        
+        var html = '<iframe id="' + this.getId() +
+            '___Frame" src="' + sLink +
+            '" width="' + this.width +
+            '" height="' + this.height + '"' +
+            (this.tabIndex ?  ' tabindex="' + this.tabIndex + '"' :'' ) +
+            ' frameborder="0" scrolling="no"></iframe>' ;
+
+        return html ;
+    },
+    
+    _insertHtmlBefore : function( html, element )
+    {
+        if ( element.insertAdjacentHTML )	{
+            // IE
+            element.insertAdjacentHTML( 'beforeBegin', html ) ;
+        } else { // Gecko
+            var oRange = document.createRange() ;
+            oRange.setStartBefore( element ) ;
+            var oFragment = oRange.createContextualFragment( html );
+            element.parentNode.insertBefore( oFragment, element ) ;
+        }
+    }
+    
+    
+  
+    
+    
+    
+    
+
+});
+
+//Roo.reg('fckeditor', Roo.form.FCKeditor);
+
+function FCKeditor_OnComplete(editorInstance){
+    var f = Roo.form.FCKeditor.editors[editorInstance.Name];
+    f.fckEditor = editorInstance;
+    //console.log("loaded");
+    f.fireEvent('editorinit', f, editorInstance);
+} 
+  
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//<script type="text/javascript">
+/**
+ * @class Roo.form.GridField
+ * @extends Roo.form.Field
+ * Embed a grid (or editable grid into a form)
+ * STATUS ALPHA
+ * 
+ * This embeds a grid in a form, the value of the field should be the json encoded array of rows
+ * it needs 
+ * xgrid.store = Roo.data.Store
+ * xgrid.store.proxy = Roo.data.MemoryProxy (data = [] )
+ * xgrid.store.reader = Roo.data.JsonReader 
+ * 
+ * 
+ * @constructor
+ * Creates a new GridField
+ * @param {Object} config Configuration options
+ */
+Roo.form.GridField = function(config){
+    Roo.form.GridField.superclass.constructor.call(this, config);
+     
+};
+
+Roo.extend(Roo.form.GridField, Roo.form.Field,  {
+    /**
+     * @cfg {Number} width  - used to restrict width of grid..
+     */
+    width : 100,
+    /**
+     * @cfg {Number} height - used to restrict height of grid..
+     */
+    height : 50,
+     /**
+     * @cfg {Object} xgrid (xtype'd description of grid) { xtype : 'Grid', dataSource: .... }
+         * 
+         *}
+     */
+    xgrid : false, 
+    /**
+     * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+     * {tag: "input", type: "checkbox", autocomplete: "off"})
+     */
+   // defaultAutoCreate : { tag: 'div' },
+    defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'new-password'},
+    /**
+     * @cfg {String} addTitle Text to include for adding a title.
+     */
+    addTitle : false,
+    //
+    onResize : function(){
+        Roo.form.Field.superclass.onResize.apply(this, arguments);
+    },
+
+    initEvents : function(){
+        // Roo.form.Checkbox.superclass.initEvents.call(this);
+        // has no events...
+       
+    },
+
+
+    getResizeEl : function(){
+        return this.wrap;
+    },
+
+    getPositionEl : function(){
+        return this.wrap;
+    },
+
+    // private
+    onRender : function(ct, position){
+        
+        this.style = this.style || 'overflow: hidden; border:1px solid #c3daf9;';
+        var style = this.style;
+        delete this.style;
+        
+        Roo.form.GridField.superclass.onRender.call(this, ct, position);
+        this.wrap = this.el.wrap({cls: ''}); // not sure why ive done thsi...
+        this.viewEl = this.wrap.createChild({ tag: 'div' });
+        if (style) {
+            this.viewEl.applyStyles(style);
+        }
+        if (this.width) {
+            this.viewEl.setWidth(this.width);
+        }
+        if (this.height) {
+            this.viewEl.setHeight(this.height);
+        }
+        //if(this.inputValue !== undefined){
+        //this.setValue(this.value);
+        
+        
+        this.grid = new Roo.grid[this.xgrid.xtype](this.viewEl, this.xgrid);
+        
+        
+        this.grid.render();
+        this.grid.getDataSource().on('remove', this.refreshValue, this);
+        this.grid.getDataSource().on('update', this.refreshValue, this);
+        this.grid.on('afteredit', this.refreshValue, this);
+ 
+    },
+     
+    
+    /**
+     * Sets the value of the item. 
+     * @param {String} either an object  or a string..
+     */
+    setValue : function(v){
+        //this.value = v;
+        v = v || []; // empty set..
+        // this does not seem smart - it really only affects memoryproxy grids..
+        if (this.grid && this.grid.getDataSource() && typeof(v) != 'undefined') {
+            var ds = this.grid.getDataSource();
+            // assumes a json reader..
+            var data = {}
+            data[ds.reader.meta.root ] =  typeof(v) == 'string' ? Roo.decode(v) : v;
+            ds.loadData( data);
+        }
+        // clear selection so it does not get stale.
+        if (this.grid.sm) { 
+            this.grid.sm.clearSelections();
+        }
+        
+        Roo.form.GridField.superclass.setValue.call(this, v);
+        this.refreshValue();
+        // should load data in the grid really....
+    },
+    
+    // private
+    refreshValue: function() {
+         var val = [];
+        this.grid.getDataSource().each(function(r) {
+            val.push(r.data);
+        });
+        this.el.dom.value = Roo.encode(val);
+    }
+    
+     
+    
+    
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.form.DisplayField
+ * @extends Roo.form.Field
+ * A generic Field to display non-editable data.
+ * @cfg {Boolean} closable (true|false) default false
+ * @constructor
+ * Creates a new Display Field item.
+ * @param {Object} config Configuration options
+ */
+Roo.form.DisplayField = function(config){
+    Roo.form.DisplayField.superclass.constructor.call(this, config);
+    
+    this.addEvents({
+        /**
+         * @event close
+         * Fires after the click the close btn
+	     * @param {Roo.form.DisplayField} this
+	     */
+        close : true
+    });
+};
+
+Roo.extend(Roo.form.DisplayField, Roo.form.TextField,  {
+    inputType:      'hidden',
+    allowBlank:     true,
+    readOnly:         true,
+    
+ 
+    /**
+     * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
+     */
+    focusClass : undefined,
+    /**
+     * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
+     */
+    fieldClass: 'x-form-field',
+    
+     /**
+     * @cfg {Function} valueRenderer The renderer for the field (so you can reformat output). should return raw HTML
+     */
+    valueRenderer: undefined,
+    
+    width: 100,
+    /**
+     * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+     * {tag: "input", type: "checkbox", autocomplete: "off"})
+     */
+     
+ //   defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'off'},
+ 
+    closable : false,
+    
+    onResize : function(){
+        Roo.form.DisplayField.superclass.onResize.apply(this, arguments);
+        
+    },
+
+    initEvents : function(){
+        // Roo.form.Checkbox.superclass.initEvents.call(this);
+        // has no events...
+        
+        if(this.closable){
+            this.closeEl.on('click', this.onClose, this);
+        }
+       
+    },
+
+
+    getResizeEl : function(){
+        return this.wrap;
+    },
+
+    getPositionEl : function(){
+        return this.wrap;
+    },
+
+    // private
+    onRender : function(ct, position){
+        
+        Roo.form.DisplayField.superclass.onRender.call(this, ct, position);
+        //if(this.inputValue !== undefined){
+        this.wrap = this.el.wrap();
+        
+        this.viewEl = this.wrap.createChild({ tag: 'div', cls: 'x-form-displayfield'});
+        
+        if(this.closable){
+            this.closeEl = this.wrap.createChild({ tag: 'div', cls: 'x-dlg-close'});
+        }
+        
+        if (this.bodyStyle) {
+            this.viewEl.applyStyles(this.bodyStyle);
+        }
+        //this.viewEl.setStyle('padding', '2px');
+        
+        this.setValue(this.value);
+        
+    },
+/*
+    // private
+    initValue : Roo.emptyFn,
+
+  */
+
+	// private
+    onClick : function(){
+        
+    },
+
+    /**
+     * Sets the checked state of the checkbox.
+     * @param {Boolean/String} checked True, 'true', '1', or 'on' to check the checkbox, any other value will uncheck it.
+     */
+    setValue : function(v){
+        this.value = v;
+        var html = this.valueRenderer ?  this.valueRenderer(v) : String.format('{0}', v);
+        // this might be called before we have a dom element..
+        if (!this.viewEl) {
+            return;
+        }
+        this.viewEl.dom.innerHTML = html;
+        Roo.form.DisplayField.superclass.setValue.call(this, v);
+
+    },
+    
+    onClose : function(e)
+    {
+        e.preventDefault();
+        
+        this.fireEvent('close', this);
+    }
+});/*
+ * 
+ * Licence- LGPL
+ * 
+ */
+
+/**
+ * @class Roo.form.DayPicker
+ * @extends Roo.form.Field
+ * A Day picker show [M] [T] [W] ....
+ * @constructor
+ * Creates a new Day Picker
+ * @param {Object} config Configuration options
+ */
+Roo.form.DayPicker= function(config){
+    Roo.form.DayPicker.superclass.constructor.call(this, config);
+     
+};
+
+Roo.extend(Roo.form.DayPicker, 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 {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: "new-password"},
+    
+   
+    actionMode : 'viewEl', 
+    //
+    // private
+ 
+    inputType : 'hidden',
+    
+     
+    inputElement: false, // real input element?
+    basedOn: false, // ????
+    
+    isFormField: true, // not sure where this is needed!!!!
+
+    onResize : function(){
+        Roo.form.Checkbox.superclass.onResize.apply(this, arguments);
+        if(!this.boxLabel){
+            this.el.alignTo(this.wrap, 'c-c');
+        }
+    },
+
+    initEvents : function(){
+        Roo.form.Checkbox.superclass.initEvents.call(this);
+        this.el.on("click", this.onClick,  this);
+        this.el.on("change", this.onClick,  this);
+    },
+
+
+    getResizeEl : function(){
+        return this.wrap;
+    },
+
+    getPositionEl : function(){
+        return this.wrap;
+    },
+
+    
+    // private
+    onRender : function(ct, position){
+        Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
+       
+        this.wrap = this.el.wrap({cls: 'x-form-daypick-item '});
+        
+        var r1 = '<table><tr>';
+        var r2 = '<tr class="x-form-daypick-icons">';
+        for (var i=0; i < 7; i++) {
+            r1+= '<td><div>' + Date.dayNames[i].substring(0,3) + '</div></td>';
+            r2+= '<td><img class="x-menu-item-icon" src="' + Roo.BLANK_IMAGE_URL  +'"></td>';
+        }
+        
+        var viewEl = this.wrap.createChild( r1 + '</tr>' + r2 + '</tr></table>');
+        viewEl.select('img').on('click', this.onClick, this);
+        this.viewEl = viewEl;   
+        
+        
+        // this will not work on Chrome!!!
+        this.el.on('DOMAttrModified', this.setFromHidden,  this); //ff
+        this.el.on('propertychange', this.setFromHidden,  this);  //ie
+        
+        
+          
+
+    },
+
+    // private
+    initValue : Roo.emptyFn,
+
+    /**
+     * Returns the checked state of the checkbox.
+     * @return {Boolean} True if checked, else false
+     */
+    getValue : function(){
+        return this.el.dom.value;
+        
+    },
+
+	// private
+    onClick : function(e){ 
+        //this.setChecked(!this.checked);
+        Roo.get(e.target).toggleClass('x-menu-item-checked');
+        this.refreshValue();
+        //if(this.el.dom.checked != this.checked){
+        //    this.setValue(this.el.dom.checked);
+       // }
+    },
+    
+    // private
+    refreshValue : function()
+    {
+        var val = '';
+        this.viewEl.select('img',true).each(function(e,i,n)  {
+            val += e.is(".x-menu-item-checked") ? String(n) : '';
+        });
+        this.setValue(val, true);
+    },
+
+    /**
+     * 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){
+        if (!this.el.dom) {
+            return;
+        }
+        var old = this.el.dom.value ;
+        this.el.dom.value = v;
+        if (suppressEvent) {
+            return ;
+        }
+         
+        // update display..
+        this.viewEl.select('img',true).each(function(e,i,n)  {
+            
+            var on = e.is(".x-menu-item-checked");
+            var newv = v.indexOf(String(n)) > -1;
+            if (on != newv) {
+                e.toggleClass('x-menu-item-checked');
+            }
+            
+        });
+        
+        
+        this.fireEvent('change', this, v, old);
+        
+        
+    },
+   
+    // 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.DayPicker.superclass.onDestroy.call(this);
+    }
+
+});/*
+ * RooJS Library 1.1.1
+ * Copyright(c) 2008-2011  Alan Knowles
+ *
+ * License - LGPL
+ */
+ 
+
+/**
+ * @class Roo.form.ComboCheck
+ * @extends Roo.form.ComboBox
+ * A combobox for multiple select items.
+ *
+ * FIXME - could do with a reset button..
+ * 
+ * @constructor
+ * Create a new ComboCheck
+ * @param {Object} config Configuration options
+ */
+Roo.form.ComboCheck = 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.ComboCheck : missing value for: " + e;
+        }
+    });
+    
+    
+};
+
+Roo.extend(Roo.form.ComboCheck, Roo.form.ComboBox, {
+     
+     
+    editable : false,
+     
+    selectedClass: 'x-menu-item-checked', 
+    
+    // private
+    onRender : function(ct, position){
+        var _t = this;
+        
+        
+        
+        if(!this.tpl){
+            var cls = 'x-combo-list';
+
+            
+            this.tpl =  new Roo.Template({
+                html :  '<div class="'+cls+'-item x-menu-check-item">' +
+                   '<img class="x-menu-item-icon" style="margin: 0px;" src="' + Roo.BLANK_IMAGE_URL + '">' + 
+                   '<span>{' + this.displayField + '}</span>' +
+                    '</div>' 
+                
+            });
+        }
+ 
+        
+        Roo.form.ComboCheck.superclass.onRender.call(this, ct, position);
+        this.view.singleSelect = false;
+        this.view.multiSelect = true;
+        this.view.toggleSelect = true;
+        this.pageTb.add(new Roo.Toolbar.Fill(), {
+            
+            text: 'Done',
+            handler: function()
+            {
+                _t.collapse();
+            }
+        });
+    },
+    
+    onViewOver : function(e, t){
+        // do nothing...
+        return;
+        
+    },
+    
+    onViewClick : function(doFocus,index){
+        return;
+        
+    },
+    select: function () {
+        //Roo.log("SELECT CALLED");
+    },
+     
+    selectByValue : function(xv, scrollIntoView){
+        var ar = this.getValueArray();
+        var sels = [];
+        
+        Roo.each(ar, function(v) {
+            if(v === undefined || v === null){
+                return;
+            }
+            var r = this.findRecord(this.valueField, v);
+            if(r){
+                sels.push(this.store.indexOf(r))
+                
+            }
+        },this);
+        this.view.select(sels);
+        return false;
+    },
+    
+    
+    
+    onSelect : function(record, index){
+       // Roo.log("onselect Called");
+       // this is only called by the clear button now..
+        this.view.clearSelections();
+        this.setValue('[]');
+        if (this.value != this.valueBefore) {
+            this.fireEvent('change', this, this.value, this.valueBefore);
+            this.valueBefore = this.value;
+        }
+    },
+    getValueArray : function()
+    {
+        var ar = [] ;
+        
+        try {
+            //Roo.log(this.value);
+            if (typeof(this.value) == 'undefined') {
+                return [];
+            }
+            var ar = Roo.decode(this.value);
+            return  ar instanceof Array ? ar : []; //?? valid?
+            
+        } catch(e) {
+            Roo.log(e + "\nRoo.form.ComboCheck:getValueArray  invalid data:" + this.getValue());
+            return [];
+        }
+         
+    },
+    expand : function ()
+    {
+        
+        Roo.form.ComboCheck.superclass.expand.call(this);
+        this.valueBefore = typeof(this.value) == 'undefined' ? '' : this.value;
+        //this.valueBefore = typeof(this.valueBefore) == 'undefined' ? '' : this.valueBefore;
+        
+
+    },
+    
+    collapse : function(){
+        Roo.form.ComboCheck.superclass.collapse.call(this);
+        var sl = this.view.getSelectedIndexes();
+        var st = this.store;
+        var nv = [];
+        var tv = [];
+        var r;
+        Roo.each(sl, function(i) {
+            r = st.getAt(i);
+            nv.push(r.get(this.valueField));
+        },this);
+        this.setValue(Roo.encode(nv));
+        if (this.value != this.valueBefore) {
+
+            this.fireEvent('change', this, this.value, this.valueBefore);
+            this.valueBefore = this.value;
+        }
+        
+    },
+    
+    setValue : function(v){
+        // Roo.log(v);
+        this.value = v;
+        
+        var vals = this.getValueArray();
+        var tv = [];
+        Roo.each(vals, function(k) {
+            var r = this.findRecord(this.valueField, k);
+            if(r){
+                tv.push(r.data[this.displayField]);
+            }else if(this.valueNotFoundText !== undefined){
+                tv.push( this.valueNotFoundText );
+            }
+        },this);
+       // Roo.log(tv);
+        
+        Roo.form.ComboBox.superclass.setValue.call(this, tv.join(', '));
+        this.hiddenField.value = v;
+        this.value = v;
+    }
+    
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+/**
+ * @class Roo.form.Signature
+ * @extends Roo.form.Field
+ * Signature field.  
+ * @constructor
+ * 
+ * @param {Object} config Configuration options
+ */
+
+Roo.form.Signature = function(config){
+    Roo.form.Signature.superclass.constructor.call(this, config);
+    
+    this.addEvents({// not in used??
+         /**
+         * @event confirm
+         * Fires when the 'confirm' icon is pressed (add a listener to enable add button)
+	     * @param {Roo.form.Signature} combo This combo box
+	     */
+        'confirm' : true,
+        /**
+         * @event reset
+         * 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)
+	     */
+        'reset' : true
+    });
+};
+
+Roo.extend(Roo.form.Signature, Roo.form.Field,  {
+    /**
+     * @cfg {Object} labels Label to use when rendering a form.
+     * defaults to 
+     * labels : { 
+     *      clear : "Clear",
+     *      confirm : "Confirm"
+     *  }
+     */
+    labels : { 
+        clear : "Clear",
+        confirm : "Confirm"
+    },
+    /**
+     * @cfg {Number} width The signature panel width (defaults to 300)
+     */
+    width: 300,
+    /**
+     * @cfg {Number} height The signature panel height (defaults to 100)
+     */
+    height : 100,
+    /**
+     * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to false)
+     */
+    allowBlank : false,
+    
+    //private
+    // {Object} signPanel The signature SVG panel element (defaults to {})
+    signPanel : {},
+    // {Boolean} isMouseDown False to validate that the mouse down event (defaults to false)
+    isMouseDown : false,
+    // {Boolean} isConfirmed validate the signature is confirmed or not for submitting form (defaults to false)
+    isConfirmed : false,
+    // {String} signatureTmp SVG mapping string (defaults to empty string)
+    signatureTmp : '',
+    
+    
+    defaultAutoCreate : { // modified by initCompnoent..
+        tag: "input",
+        type:"hidden"
+    },
+
+    // private
+    onRender : function(ct, position){
+        
+        Roo.form.Signature.superclass.onRender.call(this, ct, position);
+        
+        this.wrap = this.el.wrap({
+            cls:'x-form-signature-wrap', style : 'width: ' + this.width + 'px', cn:{cls:'x-form-signature'}
+        });
+        
+        this.createToolbar(this);
+        this.signPanel = this.wrap.createChild({
+                tag: 'div',
+                style: 'width: ' + this.width + 'px; height: ' + this.height + 'px; border: 0;'
+            }, this.el
+        );
+            
+        this.svgID = Roo.id();
+        this.svgEl = this.signPanel.createChild({
+              xmlns : 'http://www.w3.org/2000/svg',
+              tag : 'svg',
+              id : this.svgID + "-svg",
+              width: this.width,
+              height: this.height,
+              viewBox: '0 0 '+this.width+' '+this.height,
+              cn : [
+                {
+                    tag: "rect",
+                    id: this.svgID + "-svg-r",
+                    width: this.width,
+                    height: this.height,
+                    fill: "#ffa"
+                },
+                {
+                    tag: "line",
+                    id: this.svgID + "-svg-l",
+                    x1: "0", // start
+                    y1: (this.height*0.8), // start set the line in 80% of height
+                    x2: this.width, // end
+                    y2: (this.height*0.8), // end set the line in 80% of height
+                    'stroke': "#666",
+                    'stroke-width': "1",
+                    'stroke-dasharray': "3",
+                    'shape-rendering': "crispEdges",
+                    'pointer-events': "none"
+                },
+                {
+                    tag: "path",
+                    id: this.svgID + "-svg-p",
+                    'stroke': "navy",
+                    'stroke-width': "3",
+                    'fill': "none",
+                    'pointer-events': 'none'
+                }
+              ]
+        });
+        this.createSVG();
+        this.svgBox = this.svgEl.dom.getScreenCTM();
+    },
+    createSVG : function(){ 
+        var svg = this.signPanel;
+        var r = svg.select('#'+ this.svgID + '-svg-r', true).first().dom;
+        var t = this;
+
+        r.addEventListener('mousedown', function(e) { return t.down(e); }, false);
+        r.addEventListener('mousemove', function(e) { return t.move(e); }, false);
+        r.addEventListener('mouseup', function(e) { return t.up(e); }, false);
+        r.addEventListener('mouseout', function(e) { return t.up(e); }, false);
+        r.addEventListener('touchstart', function(e) { return t.down(e); }, false);
+        r.addEventListener('touchmove', function(e) { return t.move(e); }, false);
+        r.addEventListener('touchend', function(e) { return t.up(e); }, false);
+        
+    },
+    isTouchEvent : function(e){
+        return e.type.match(/^touch/);
+    },
+    getCoords : function (e) {
+        var pt    = this.svgEl.dom.createSVGPoint();
+        pt.x = e.clientX; 
+        pt.y = e.clientY;
+        if (this.isTouchEvent(e)) {
+            pt.x =  e.targetTouches[0].clientX;
+            pt.y = e.targetTouches[0].clientY;
+        }
+        var a = this.svgEl.dom.getScreenCTM();
+        var b = a.inverse();
+        var mx = pt.matrixTransform(b);
+        return mx.x + ',' + mx.y;
+    },
+    //mouse event headler 
+    down : function (e) {
+        this.signatureTmp += 'M' + this.getCoords(e) + ' ';
+        this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr('d', this.signatureTmp);
+        
+        this.isMouseDown = true;
+        
+        e.preventDefault();
+    },
+    move : function (e) {
+        if (this.isMouseDown) {
+            this.signatureTmp += 'L' + this.getCoords(e) + ' ';
+            this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', this.signatureTmp);
+        }
+        
+        e.preventDefault();
+    },
+    up : function (e) {
+        this.isMouseDown = false;
+        var sp = this.signatureTmp.split(' ');
+        
+        if(sp.length > 1){
+            if(!sp[sp.length-2].match(/^L/)){
+                sp.pop();
+                sp.pop();
+                sp.push("");
+                this.signatureTmp = sp.join(" ");
+            }
+        }
+        if(this.getValue() != this.signatureTmp){
+            this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
+            this.isConfirmed = false;
+        }
+        e.preventDefault();
+    },
+    
+    /**
+     * Protected method that will not generally be called directly. It
+     * is called when the editor creates its toolbar. Override this method if you need to
+     * add custom toolbar buttons.
+     * @param {HtmlEditor} editor
+     */
+    createToolbar : function(editor){
+         function btn(id, toggle, handler){
+            var xid = fid + '-'+ id ;
+            return {
+                id : xid,
+                cmd : id,
+                cls : 'x-btn-icon x-edit-'+id,
+                enableToggle:toggle !== false,
+                scope: editor, // was editor...
+                handler:handler||editor.relayBtnCmd,
+                clickEvent:'mousedown',
+                tooltip: etb.buttonTips[id] || undefined, ///tips ???
+                tabIndex:-1
+            };
+        }
+        
+        
+        var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
+        this.tb = tb;
+        this.tb.add(
+           {
+                cls : ' x-signature-btn x-signature-'+id,
+                scope: editor, // was editor...
+                handler: this.reset,
+                clickEvent:'mousedown',
+                text: this.labels.clear
+            },
+            {
+                 xtype : 'Fill',
+                 xns: Roo.Toolbar
+            }, 
+            {
+                cls : '  x-signature-btn x-signature-'+id,
+                scope: editor, // was editor...
+                handler: this.confirmHandler,
+                clickEvent:'mousedown',
+                text: this.labels.confirm
+            }
+        );
+    
+    },
+    //public
+    /**
+     * when user is clicked confirm then show this image.....
+     * 
+     * @return {String} Image Data URI
+     */
+    getImageDataURI : function(){
+        var svg = this.svgEl.dom.parentNode.innerHTML;
+        var src = 'data:image/svg+xml;base64,'+window.btoa(svg);
+        return src; 
+    },
+    /**
+     * 
+     * @return {Boolean} this.isConfirmed
+     */
+    getConfirmed : function(){
+        return this.isConfirmed;
+    },
+    /**
+     * 
+     * @return {Number} this.width
+     */
+    getWidth : function(){
+        return this.width;
+    },
+    /**
+     * 
+     * @return {Number} this.height
+     */
+    getHeight : function(){
+        return this.height;
+    },
+    // private
+    getSignature : function(){
+        return this.signatureTmp;
+    },
+    // private
+    reset : function(){
+        this.signatureTmp = '';
+        this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
+        this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', '');
+        this.isConfirmed = false;
+        Roo.form.Signature.superclass.reset.call(this);
+    },
+    setSignature : function(s){
+        this.signatureTmp = s;
+        this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
+        this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', s);
+        this.setValue(s);
+        this.isConfirmed = false;
+        Roo.form.Signature.superclass.reset.call(this);
+    }, 
+    test : function(){
+//        Roo.log(this.signPanel.dom.contentWindow.up())
+    },
+    //private
+    setConfirmed : function(){
+        
+        
+        
+//        Roo.log(Roo.get(this.signPanel.dom.contentWindow.r).attr('fill', '#cfc'));
+    },
+    // private
+    confirmHandler : function(){
+        if(!this.getSignature()){
+            return;
+        }
+        
+        this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#cfc');
+        this.setValue(this.getSignature());
+        this.isConfirmed = true;
+        
+        this.fireEvent('confirm', this);
+    },
+    // private
+    // Subclasses should provide the validation implementation by overriding this
+    validateValue : function(value){
+        if(this.allowBlank){
+            return true;
+        }
+        
+        if(this.isConfirmed){
+            return true;
+        }
+        return false;
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+
+/**
+ * @class Roo.form.ComboBox
+ * @extends Roo.form.TriggerField
+ * A combobox control with support for autocomplete, remote-loading, paging and many other features.
+ * @constructor
+ * Create a new ComboBox.
+ * @param {Object} config Configuration options
+ */
+Roo.form.Select = function(config){
+    Roo.form.Select.superclass.constructor.call(this, config);
+     
+};
+
+Roo.extend(Roo.form.Select , Roo.form.ComboBox, {
+    /**
+     * @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: "select"  },
+    /**
+     * @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 {String} defaultValue The value displayed after loading the store.
+     */
+    defaultValue: '',
+    
+    /**
+     * @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
+    onRender : function(ct, position){
+        Roo.form.Field.prototype.onRender.call(this, ct, position);
+        
+        if(this.store){
+            this.store.on('beforeload', this.onBeforeLoad, this);
+            this.store.on('load', this.onLoad, this);
+            this.store.on('loadexception', this.onLoadException, this);
+            this.store.load({});
+        }
+        
+        
+        
+    },
+
+    // private
+    initEvents : function(){
+        //Roo.form.ComboBox.superclass.initEvents.call(this);
+ 
+    },
+
+    onDestroy : function(){
+       
+        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
+    fireKey : function(e){
+        if(e.isNavKeyPress() && !this.list.isVisible()){
+            this.fireEvent("specialkey", this, e);
+        }
+    },
+
+    // private
+    onResize: function(w, h){
+        
+        return; 
+    
+        
+    },
+
+    /**
+     * Allow or prevent the user from directly editing the field text.  If false is passed,
+     * the user will only be able to select from the items defined in the dropdown list.  This method
+     * is the runtime equivalent of setting the 'editable' config option at config time.
+     * @param {Boolean} value True to allow the user to directly edit the field text
+     */
+    setEditable : function(value){
+         
+    },
+
+    // private
+    onBeforeLoad : function(){
+        
+        Roo.log("Select before load");
+        return;
+    
+        this.innerList.update(this.loadingText ?
+               '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
+        //this.restrictHeight();
+        this.selectedIndex = -1;
+    },
+
+    // private
+    onLoad : function(){
+
+    
+        var dom = this.el.dom;
+        dom.innerHTML = '';
+         var od = dom.ownerDocument;
+         
+        if (this.emptyText) {
+            var op = od.createElement('option');
+            op.setAttribute('value', '');
+            op.innerHTML = String.format('{0}', this.emptyText);
+            dom.appendChild(op);
+        }
+        if(this.store.getCount() > 0){
+           
+            var vf = this.valueField;
+            var df = this.displayField;
+            this.store.data.each(function(r) {
+                // which colmsn to use... testing - cdoe / title..
+                var op = od.createElement('option');
+                op.setAttribute('value', r.data[vf]);
+                op.innerHTML = String.format('{0}', r.data[df]);
+                dom.appendChild(op);
+            });
+            if (typeof(this.defaultValue != 'undefined')) {
+                this.setValue(this.defaultValue);
+            }
+            
+             
+        }else{
+            //this.onEmptyResults();
+        }
+        //this.el.focus();
+    },
+    // private
+    onLoadException : function()
+    {
+        dom.innerHTML = '';
+            
+        Roo.log("Select on load exception");
+        return;
+    
+        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);
+        }
+        
+        
+    },
+    // private
+    onTypeAhead : function(){
+         
+    },
+
+    // private
+    onSelect : function(record, index){
+        Roo.log('on select?');
+        return;
+        if(this.fireEvent('beforeselect', this, record, index) !== false){
+            this.setFromData(index > -1 ? record.data : false);
+            this.collapse();
+            this.fireEvent('select', this, record, index);
+        }
+    },
+
+    /**
+     * Returns the currently selected field value or empty string if no value is set.
+     * @return {String} value The selected value
+     */
+    getValue : function(){
+        var dom = this.el.dom;
+        this.value = dom.options[dom.selectedIndex].value;
+        return this.value;
+        
+    },
+
+    /**
+     * Clears any text/value currently set in the field
+     */
+    clearValue : function(){
+        this.value = '';
+        this.el.dom.selectedIndex = this.emptyText ? 0 : -1;
+        
+    },
+
+    /**
+     * Sets the specified value into the field.  If the value finds a match, the corresponding record text
+     * will be displayed in the field.  If the value does not match the data value of an existing item,
+     * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
+     * Otherwise the field will be blank (although the value will still be set).
+     * @param {String} value The value to match
+     */
+    setValue : function(v){
+        var d = this.el.dom;
+        for (var i =0; i < d.options.length;i++) {
+            if (v == d.options[i].value) {
+                d.selectedIndex = i;
+                this.value = v;
+                return;
+            }
+        }
+        this.clearValue();
+    },
+    /**
+     * @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){
+        Roo.log('setfrom data?');
+         
+        
+        
+    },
+    // private
+    reset : function(){
+        this.clearValue();
+    },
+    // private
+    findRecord : function(prop, value){
+        
+        return false;
+    
+        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
+    onEmptyResults : function(){
+        Roo.log('empty results');
+        //this.collapse();
+    },
+
+    /**
+     * Returns true if the dropdown list is expanded, else false.
+     */
+    isExpanded : function(){
+        return false;
+    },
+
+    /**
+     * 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){
+        Roo.log('select By Value');
+        return false;
+    
+        if(v !== undefined && v !== null){
+            var r = this.findRecord(this.valueField || this.displayField, v);
+            if(r){
+                this.select(this.store.indexOf(r), scrollIntoView);
+                return true;
+            }
+        }
+        return false;
+    },
+
+    /**
+     * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
+     * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
+     * @param {Number} index The zero-based index of the list item to select
+     * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
+     * selected item if it is not currently in view (defaults to true)
+     */
+    select : function(index, scrollIntoView){
+        Roo.log('select ');
+        return  ;
+        
+        this.selectedIndex = index;
+        this.view.select(index);
+        if(scrollIntoView !== false){
+            var el = this.view.getNode(index);
+            if(el){
+                this.innerList.scrollChildIntoView(el, false);
+            }
+        }
+    },
+
+      
+
+    // private
+    validateBlur : function(){
+        
+        return;
+        
+    },
+
+    // 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;
+             
+        }
+    },
+
+    /**
+     * Execute a query to filter the dropdown list.  Fires the beforequery event prior to performing the
+     * query allowing the query action to be canceled if needed.
+     * @param {String} query The SQL query to execute
+     * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
+     * in the field than the minimum specified by the minChars config option.  It also clears any filter previously
+     * saved in the current store (defaults to false)
+     */
+    doQuery : function(q, forceAll){
+        
+        Roo.log('doQuery?');
+        if(q === undefined || q === null){
+            q = '';
+        }
+        var qe = {
+            query: q,
+            forceAll: forceAll,
+            combo: this,
+            cancel:false
+        };
+        if(this.fireEvent('beforequery', qe)===false || qe.cancel){
+            return false;
+        }
+        q = qe.query;
+        forceAll = qe.forceAll;
+        if(forceAll === true || (q.length >= this.minChars)){
+            if(this.lastQuery != q || this.alwaysQuery){
+                this.lastQuery = q;
+                if(this.mode == 'local'){
+                    this.selectedIndex = -1;
+                    if(forceAll){
+                        this.store.clearFilter();
+                    }else{
+                        this.store.filter(this.displayField, q);
+                    }
+                    this.onLoad();
+                }else{
+                    this.store.baseParams[this.queryParam] = q;
+                    this.store.load({
+                        params: this.getParams(q)
+                    });
+                    this.expand();
+                }
+            }else{
+                this.selectedIndex = -1;
+                this.onLoad();   
+            }
+        }
+    },
+
+    // private
+    getParams : function(q){
+        var p = {};
+        //p[this.queryParam] = q;
+        if(this.pageSize){
+            p.start = 0;
+            p.limit = this.pageSize;
+        }
+        return p;
+    },
+
+    /**
+     * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
+     */
+    collapse : function(){
+        
+    },
+
+    // private
+    collapseIf : function(e){
+        
+    },
+
+    /**
+     * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
+     */
+    expand : function(){
+        
+    } ,
+
+    // private
+     
+
+    /** 
+    * @cfg {Boolean} grow 
+    * @hide 
+    */
+    /** 
+    * @cfg {Number} growMin 
+    * @hide 
+    */
+    /** 
+    * @cfg {Number} growMax 
+    * @hide 
+    */
+    /**
+     * @hide
+     * @method autoSize
+     */
+    
+    setWidth : function()
+    {
+        
+    },
+    getResizeEl : function(){
+        return this.el;
+    }
+});//<script type="text/javasscript">
+ 
+
+/**
+ * @class Roo.DDView
+ * A DnD enabled version of Roo.View.
+ * @param {Element/String} container The Element in which to create the View.
+ * @param {String} tpl The template string used to create the markup for each element of the View
+ * @param {Object} config The configuration properties. These include all the config options of
+ * {@link Roo.View} plus some specific to this class.<br>
+ * <p>
+ * Drag/drop is implemented by adding {@link Roo.data.Record}s to the target DDView. If copying is
+ * not being performed, the original {@link Roo.data.Record} is removed from the source DDView.<br>
+ * <p>
+ * The following extra CSS rules are needed to provide insertion point highlighting:<pre><code>
+.x-view-drag-insert-above {
+	border-top:1px dotted #3366cc;
+}
+.x-view-drag-insert-below {
+	border-bottom:1px dotted #3366cc;
+}
+</code></pre>
+ * 
+ */
+ 
+Roo.DDView = function(container, tpl, config) {
+    Roo.DDView.superclass.constructor.apply(this, arguments);
+    this.getEl().setStyle("outline", "0px none");
+    this.getEl().unselectable();
+    if (this.dragGroup) {
+		this.setDraggable(this.dragGroup.split(","));
+    }
+    if (this.dropGroup) {
+		this.setDroppable(this.dropGroup.split(","));
+    }
+    if (this.deletable) {
+    	this.setDeletable();
+    }
+    this.isDirtyFlag = false;
+	this.addEvents({
+		"drop" : true
+	});
+};
+
+Roo.extend(Roo.DDView, Roo.View, {
+/**	@cfg {String/Array} dragGroup The ddgroup name(s) for the View's DragZone. */
+/**	@cfg {String/Array} dropGroup The ddgroup name(s) for the View's DropZone. */
+/**	@cfg {Boolean} copy Causes drag operations to copy nodes rather than move. */
+/**	@cfg {Boolean} allowCopy Causes ctrl/drag operations to copy nodes rather than move. */
+
+	isFormField: true,
+
+	reset: Roo.emptyFn,
+	
+	clearInvalid: Roo.form.Field.prototype.clearInvalid,
+
+	validate: function() {
+		return true;
+	},
+	
+	destroy: function() {
+		this.purgeListeners();
+		this.getEl.removeAllListeners();
+		this.getEl().remove();
+		if (this.dragZone) {
+			if (this.dragZone.destroy) {
+				this.dragZone.destroy();
+			}
+		}
+		if (this.dropZone) {
+			if (this.dropZone.destroy) {
+				this.dropZone.destroy();
+			}
+		}
+	},
+
+/**	Allows this class to be an Roo.form.Field so it can be found using {@link Roo.form.BasicForm#findField}. */
+	getName: function() {
+		return this.name;
+	},
+
+/**	Loads the View from a JSON string representing the Records to put into the Store. */
+	setValue: function(v) {
+		if (!this.store) {
+			throw "DDView.setValue(). DDView must be constructed with a valid Store";
+		}
+		var data = {};
+		data[this.store.reader.meta.root] = v ? [].concat(v) : [];
+		this.store.proxy = new Roo.data.MemoryProxy(data);
+		this.store.load();
+	},
+
+/**	@return {String} a parenthesised list of the ids of the Records in the View. */
+	getValue: function() {
+		var result = '(';
+		this.store.each(function(rec) {
+			result += rec.id + ',';
+		});
+		return result.substr(0, result.length - 1) + ')';
+	},
+	
+	getIds: function() {
+		var i = 0, result = new Array(this.store.getCount());
+		this.store.each(function(rec) {
+			result[i++] = rec.id;
+		});
+		return result;
+	},
+	
+	isDirty: function() {
+		return this.isDirtyFlag;
+	},
+
+/**
+ *	Part of the Roo.dd.DropZone interface. If no target node is found, the
+ *	whole Element becomes the target, and this causes the drop gesture to append.
+ */
+    getTargetFromEvent : function(e) {
+		var target = e.getTarget();
+		while ((target !== null) && (target.parentNode != this.el.dom)) {
+    		target = target.parentNode;
+		}
+		if (!target) {
+			target = this.el.dom.lastChild || this.el.dom;
+		}
+		return target;
+    },
+
+/**
+ *	Create the drag data which consists of an object which has the property "ddel" as
+ *	the drag proxy element. 
+ */
+    getDragData : function(e) {
+        var target = this.findItemFromChild(e.getTarget());
+		if(target) {
+			this.handleSelection(e);
+			var selNodes = this.getSelectedNodes();
+            var dragData = {
+                source: this,
+                copy: this.copy || (this.allowCopy && e.ctrlKey),
+                nodes: selNodes,
+                records: []
+			};
+			var selectedIndices = this.getSelectedIndexes();
+			for (var i = 0; i < selectedIndices.length; i++) {
+				dragData.records.push(this.store.getAt(selectedIndices[i]));
+			}
+			if (selNodes.length == 1) {
+				dragData.ddel = target.cloneNode(true);	// the div element
+			} else {
+				var div = document.createElement('div'); // create the multi element drag "ghost"
+				div.className = 'multi-proxy';
+				for (var i = 0, len = selNodes.length; i < len; i++) {
+					div.appendChild(selNodes[i].cloneNode(true));
+				}
+				dragData.ddel = div;
+			}
+            //console.log(dragData)
+            //console.log(dragData.ddel.innerHTML)
+			return dragData;
+		}
+        //console.log('nodragData')
+		return false;
+    },
+    
+/**	Specify to which ddGroup items in this DDView may be dragged. */
+    setDraggable: function(ddGroup) {
+    	if (ddGroup instanceof Array) {
+    		Roo.each(ddGroup, this.setDraggable, this);
+    		return;
+    	}
+    	if (this.dragZone) {
+    		this.dragZone.addToGroup(ddGroup);
+    	} else {
+			this.dragZone = new Roo.dd.DragZone(this.getEl(), {
+				containerScroll: true,
+				ddGroup: ddGroup 
+
+			});
+//			Draggability implies selection. DragZone's mousedown selects the element.
+			if (!this.multiSelect) { this.singleSelect = true; }
+
+//			Wire the DragZone's handlers up to methods in *this*
+			this.dragZone.getDragData = this.getDragData.createDelegate(this);
+		}
+    },
+
+/**	Specify from which ddGroup this DDView accepts drops. */
+    setDroppable: function(ddGroup) {
+    	if (ddGroup instanceof Array) {
+    		Roo.each(ddGroup, this.setDroppable, this);
+    		return;
+    	}
+    	if (this.dropZone) {
+    		this.dropZone.addToGroup(ddGroup);
+    	} else {
+			this.dropZone = new Roo.dd.DropZone(this.getEl(), {
+				containerScroll: true,
+				ddGroup: ddGroup
+			});
+
+//			Wire the DropZone's handlers up to methods in *this*
+			this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this);
+			this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this);
+			this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this);
+			this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this);
+			this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this);
+		}
+    },
+
+/**	Decide whether to drop above or below a View node. */
+    getDropPoint : function(e, n, dd){
+    	if (n == this.el.dom) { return "above"; }
+		var t = Roo.lib.Dom.getY(n), b = t + n.offsetHeight;
+		var c = t + (b - t) / 2;
+		var y = Roo.lib.Event.getPageY(e);
+		if(y <= c) {
+			return "above";
+		}else{
+			return "below";
+		}
+    },
+
+    onNodeEnter : function(n, dd, e, data){
+		return false;
+    },
+    
+    onNodeOver : function(n, dd, e, data){
+		var pt = this.getDropPoint(e, n, dd);
+		// set the insert point style on the target node
+		var dragElClass = this.dropNotAllowed;
+		if (pt) {
+			var targetElClass;
+			if (pt == "above"){
+				dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";
+				targetElClass = "x-view-drag-insert-above";
+			} else {
+				dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";
+				targetElClass = "x-view-drag-insert-below";
+			}
+			if (this.lastInsertClass != targetElClass){
+				Roo.fly(n).replaceClass(this.lastInsertClass, targetElClass);
+				this.lastInsertClass = targetElClass;
+			}
+		}
+		return dragElClass;
+	},
+
+    onNodeOut : function(n, dd, e, data){
+		this.removeDropIndicators(n);
+    },
+
+    onNodeDrop : function(n, dd, e, data){
+    	if (this.fireEvent("drop", this, n, dd, e, data) === false) {
+    		return false;
+    	}
+    	var pt = this.getDropPoint(e, n, dd);
+		var insertAt = (n == this.el.dom) ? this.nodes.length : n.nodeIndex;
+		if (pt == "below") { insertAt++; }
+		for (var i = 0; i < data.records.length; i++) {
+			var r = data.records[i];
+			var dup = this.store.getById(r.id);
+			if (dup && (dd != this.dragZone)) {
+				Roo.fly(this.getNode(this.store.indexOf(dup))).frame("red", 1);
+			} else {
+				if (data.copy) {
+					this.store.insert(insertAt++, r.copy());
+				} else {
+					data.source.isDirtyFlag = true;
+					r.store.remove(r);
+					this.store.insert(insertAt++, r);
+				}
+				this.isDirtyFlag = true;
+			}
+		}
+		this.dragZone.cachedTarget = null;
+		return true;
+    },
+
+    removeDropIndicators : function(n){
+		if(n){
+			Roo.fly(n).removeClass([
+				"x-view-drag-insert-above",
+				"x-view-drag-insert-below"]);
+			this.lastInsertClass = "_noclass";
+		}
+    },
+
+/**
+ *	Utility method. Add a delete option to the DDView's context menu.
+ *	@param {String} imageUrl The URL of the "delete" icon image.
+ */
+	setDeletable: function(imageUrl) {
+		if (!this.singleSelect && !this.multiSelect) {
+			this.singleSelect = true;
+		}
+		var c = this.getContextMenu();
+		this.contextMenu.on("itemclick", function(item) {
+			switch (item.id) {
+				case "delete":
+					this.remove(this.getSelectedIndexes());
+					break;
+			}
+		}, this);
+		this.contextMenu.add({
+			icon: imageUrl,
+			id: "delete",
+			text: 'Delete'
+		});
+	},
+	
+/**	Return the context menu for this DDView. */
+	getContextMenu: function() {
+		if (!this.contextMenu) {
+//			Create the View's context menu
+			this.contextMenu = new Roo.menu.Menu({
+				id: this.id + "-contextmenu"
+			});
+			this.el.on("contextmenu", this.showContextMenu, this);
+		}
+		return this.contextMenu;
+	},
+	
+	disableContextMenu: function() {
+		if (this.contextMenu) {
+			this.el.un("contextmenu", this.showContextMenu, this);
+		}
+	},
+
+	showContextMenu: function(e, item) {
+        item = this.findItemFromChild(e.getTarget());
+		if (item) {
+			e.stopEvent();
+			this.select(this.getNode(item), this.multiSelect && e.ctrlKey, true);
+			this.contextMenu.showAt(e.getXY());
+	    }
+    },
+
+/**
+ *	Remove {@link Roo.data.Record}s at the specified indices.
+ *	@param {Array/Number} selectedIndices The index (or Array of indices) of Records to remove.
+ */
+    remove: function(selectedIndices) {
+		selectedIndices = [].concat(selectedIndices);
+		for (var i = 0; i < selectedIndices.length; i++) {
+			var rec = this.store.getAt(selectedIndices[i]);
+			this.store.remove(rec);
+		}
+    },
+
+/**
+ *	Double click fires the event, but also, if this is draggable, and there is only one other
+ *	related DropZone, it transfers the selected node.
+ */
+    onDblClick : function(e){
+        var item = this.findItemFromChild(e.getTarget());
+        if(item){
+            if (this.fireEvent("dblclick", this, this.indexOf(item), item, e) === false) {
+            	return false;
+            }
+            if (this.dragGroup) {
+	            var targets = Roo.dd.DragDropMgr.getRelated(this.dragZone, true);
+	            while (targets.indexOf(this.dropZone) > -1) {
+		            targets.remove(this.dropZone);
+				}
+	            if (targets.length == 1) {
+					this.dragZone.cachedTarget = null;
+	            	var el = Roo.get(targets[0].getEl());
+	            	var box = el.getBox(true);
+	            	targets[0].onNodeDrop(el.dom, {
+	            		target: el.dom,
+	            		xy: [box.x, box.y + box.height - 1]
+	            	}, null, this.getDragData(e));
+	            }
+	        }
+        }
+    },
+    
+    handleSelection: function(e) {
+		this.dragZone.cachedTarget = null;
+        var item = this.findItemFromChild(e.getTarget());
+        if (!item) {
+        	this.clearSelections(true);
+        	return;
+        }
+		if (item && (this.multiSelect || this.singleSelect)){
+			if(this.multiSelect && e.shiftKey && (!e.ctrlKey) && this.lastSelection){
+				this.select(this.getNodes(this.indexOf(this.lastSelection), item.nodeIndex), false);
+			}else if (this.isSelected(this.getNode(item)) && e.ctrlKey){
+				this.unselect(item);
+			} else {
+				this.select(item, this.multiSelect && e.ctrlKey);
+				this.lastSelection = item;
+			}
+		}
+    },
+
+    onItemClick : function(item, index, e){
+		if(this.fireEvent("beforeclick", this, index, item, e) === false){
+			return false;
+		}
+		return true;
+    },
+
+    unselect : function(nodeInfo, suppressEvent){
+		var node = this.getNode(nodeInfo);
+		if(node && this.isSelected(node)){
+			if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
+				Roo.fly(node).removeClass(this.selectedClass);
+				this.selections.remove(node);
+				if(!suppressEvent){
+					this.fireEvent("selectionchange", this, this.selections);
+				}
+			}
+		}
+    }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+/**
+ * @class Roo.LayoutManager
+ * @extends Roo.util.Observable
+ * Base class for layout managers.
+ */
+Roo.LayoutManager = function(container, config){
+    Roo.LayoutManager.superclass.constructor.call(this);
+    this.el = Roo.get(container);
+    // ie scrollbar fix
+    if(this.el.dom == document.body && Roo.isIE && !config.allowScroll){
+        document.body.scroll = "no";
+    }else if(this.el.dom != document.body && this.el.getStyle('position') == 'static'){
+        this.el.position('relative');
+    }
+    this.id = this.el.id;
+    this.el.addClass("x-layout-container");
+    /** false to disable window resize monitoring @type Boolean */
+    this.monitorWindowResize = true;
+    this.regions = {};
+    this.addEvents({
+        /**
+         * @event layout
+         * Fires when a layout is performed. 
+         * @param {Roo.LayoutManager} this
+         */
+        "layout" : true,
+        /**
+         * @event regionresized
+         * Fires when the user resizes a region. 
+         * @param {Roo.LayoutRegion} region The resized region
+         * @param {Number} newSize The new size (width for east/west, height for north/south)
+         */
+        "regionresized" : true,
+        /**
+         * @event regioncollapsed
+         * Fires when a region is collapsed. 
+         * @param {Roo.LayoutRegion} region The collapsed region
+         */
+        "regioncollapsed" : true,
+        /**
+         * @event regionexpanded
+         * Fires when a region is expanded.  
+         * @param {Roo.LayoutRegion} region The expanded region
+         */
+        "regionexpanded" : true
+    });
+    this.updating = false;
+    Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
+};
+
+Roo.extend(Roo.LayoutManager, Roo.util.Observable, {
+    /**
+     * Returns true if this layout is currently being updated
+     * @return {Boolean}
+     */
+    isUpdating : function(){
+        return this.updating; 
+    },
+    
+    /**
+     * Suspend the LayoutManager from doing auto-layouts while
+     * making multiple add or remove calls
+     */
+    beginUpdate : function(){
+        this.updating = true;    
+    },
+    
+    /**
+     * Restore auto-layouts and optionally disable the manager from performing a layout
+     * @param {Boolean} noLayout true to disable a layout update 
+     */
+    endUpdate : function(noLayout){
+        this.updating = false;
+        if(!noLayout){
+            this.layout();
+        }    
+    },
+    
+    layout: function(){
+        
+    },
+    
+    onRegionResized : function(region, newSize){
+        this.fireEvent("regionresized", region, newSize);
+        this.layout();
+    },
+    
+    onRegionCollapsed : function(region){
+        this.fireEvent("regioncollapsed", region);
+    },
+    
+    onRegionExpanded : function(region){
+        this.fireEvent("regionexpanded", region);
+    },
+        
+    /**
+     * Returns the size of the current view. This method normalizes document.body and element embedded layouts and
+     * performs box-model adjustments.
+     * @return {Object} The size as an object {width: (the width), height: (the height)}
+     */
+    getViewSize : function(){
+        var size;
+        if(this.el.dom != document.body){
+            size = this.el.getSize();
+        }else{
+            size = {width: Roo.lib.Dom.getViewWidth(), height: Roo.lib.Dom.getViewHeight()};
+        }
+        size.width -= this.el.getBorderWidth("lr")-this.el.getPadding("lr");
+        size.height -= this.el.getBorderWidth("tb")-this.el.getPadding("tb");
+        return size;
+    },
+    
+    /**
+     * Returns the Element this layout is bound to.
+     * @return {Roo.Element}
+     */
+    getEl : function(){
+        return this.el;
+    },
+    
+    /**
+     * Returns the specified region.
+     * @param {String} target The region key ('center', 'north', 'south', 'east' or 'west')
+     * @return {Roo.LayoutRegion}
+     */
+    getRegion : function(target){
+        return this.regions[target.toLowerCase()];
+    },
+    
+    onWindowResize : function(){
+        if(this.monitorWindowResize){
+            this.layout();
+        }
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.BorderLayout
+ * @extends Roo.LayoutManager
+ * This class represents a common layout manager used in desktop applications. For screenshots and more details,
+ * please see: <br><br>
+ * <a href="http://www.jackslocum.com/yui/2006/10/19/cross-browser-web-20-layouts-with-yahoo-ui/">Cross Browser Layouts - Part 1</a><br>
+ * <a href="http://www.jackslocum.com/yui/2006/10/28/cross-browser-web-20-layouts-part-2-ajax-feed-viewer-20/">Cross Browser Layouts - Part 2</a><br><br>
+ * Example:
+ <pre><code>
+ var layout = new Roo.BorderLayout(document.body, {
+    north: {
+        initialSize: 25,
+        titlebar: false
+    },
+    west: {
+        split:true,
+        initialSize: 200,
+        minSize: 175,
+        maxSize: 400,
+        titlebar: true,
+        collapsible: true
+    },
+    east: {
+        split:true,
+        initialSize: 202,
+        minSize: 175,
+        maxSize: 400,
+        titlebar: true,
+        collapsible: true
+    },
+    south: {
+        split:true,
+        initialSize: 100,
+        minSize: 100,
+        maxSize: 200,
+        titlebar: true,
+        collapsible: true
+    },
+    center: {
+        titlebar: true,
+        autoScroll:true,
+        resizeTabs: true,
+        minTabWidth: 50,
+        preferredTabWidth: 150
+    }
+});
+
+// shorthand
+var CP = Roo.ContentPanel;
+
+layout.beginUpdate();
+layout.add("north", new CP("north", "North"));
+layout.add("south", new CP("south", {title: "South", closable: true}));
+layout.add("west", new CP("west", {title: "West"}));
+layout.add("east", new CP("autoTabs", {title: "Auto Tabs", closable: true}));
+layout.add("center", new CP("center1", {title: "Close Me", closable: true}));
+layout.add("center", new CP("center2", {title: "Center Panel", closable: false}));
+layout.getRegion("center").showPanel("center1");
+layout.endUpdate();
+</code></pre>
+
+<b>The container the layout is rendered into can be either the body element or any other element.
+If it is not the body element, the container needs to either be an absolute positioned element,
+or you will need to add "position:relative" to the css of the container.  You will also need to specify
+the container size if it is not the body element.</b>
+
+* @constructor
+* Create a new BorderLayout
+* @param {String/HTMLElement/Element} container The container this layout is bound to
+* @param {Object} config Configuration options
+ */
+Roo.BorderLayout = function(container, config){
+    config = config || {};
+    Roo.BorderLayout.superclass.constructor.call(this, container, config);
+    this.factory = config.factory || Roo.BorderLayout.RegionFactory;
+    for(var i = 0, len = this.factory.validRegions.length; i < len; i++) {
+    	var target = this.factory.validRegions[i];
+    	if(config[target]){
+    	    this.addRegion(target, config[target]);
+    	}
+    }
+};
+
+Roo.extend(Roo.BorderLayout, Roo.LayoutManager, {
+    /**
+     * Creates and adds a new region if it doesn't already exist.
+     * @param {String} target The target region key (north, south, east, west or center).
+     * @param {Object} config The regions config object
+     * @return {BorderLayoutRegion} The new region
+     */
+    addRegion : function(target, config){
+        if(!this.regions[target]){
+            var r = this.factory.create(target, this, config);
+    	    this.bindRegion(target, r);
+        }
+        return this.regions[target];
+    },
+
+    // private (kinda)
+    bindRegion : function(name, r){
+        this.regions[name] = r;
+        r.on("visibilitychange", this.layout, this);
+        r.on("paneladded", this.layout, this);
+        r.on("panelremoved", this.layout, this);
+        r.on("invalidated", this.layout, this);
+        r.on("resized", this.onRegionResized, this);
+        r.on("collapsed", this.onRegionCollapsed, this);
+        r.on("expanded", this.onRegionExpanded, this);
+    },
+
+    /**
+     * Performs a layout update.
+     */
+    layout : function(){
+        if(this.updating) {
+            return;
+        }
+        var size = this.getViewSize();
+        var w = size.width;
+        var h = size.height;
+        var centerW = w;
+        var centerH = h;
+        var centerY = 0;
+        var centerX = 0;
+        //var x = 0, y = 0;
+
+        var rs = this.regions;
+        var north = rs["north"];
+        var south = rs["south"]; 
+        var west = rs["west"];
+        var east = rs["east"];
+        var center = rs["center"];
+        //if(this.hideOnLayout){ // not supported anymore
+            //c.el.setStyle("display", "none");
+        //}
+        if(north && north.isVisible()){
+            var b = north.getBox();
+            var m = north.getMargins();
+            b.width = w - (m.left+m.right);
+            b.x = m.left;
+            b.y = m.top;
+            centerY = b.height + b.y + m.bottom;
+            centerH -= centerY;
+            north.updateBox(this.safeBox(b));
+        }
+        if(south && south.isVisible()){
+            var b = south.getBox();
+            var m = south.getMargins();
+            b.width = w - (m.left+m.right);
+            b.x = m.left;
+            var totalHeight = (b.height + m.top + m.bottom);
+            b.y = h - totalHeight + m.top;
+            centerH -= totalHeight;
+            south.updateBox(this.safeBox(b));
+        }
+        if(west && west.isVisible()){
+            var b = west.getBox();
+            var m = west.getMargins();
+            b.height = centerH - (m.top+m.bottom);
+            b.x = m.left;
+            b.y = centerY + m.top;
+            var totalWidth = (b.width + m.left + m.right);
+            centerX += totalWidth;
+            centerW -= totalWidth;
+            west.updateBox(this.safeBox(b));
+        }
+        if(east && east.isVisible()){
+            var b = east.getBox();
+            var m = east.getMargins();
+            b.height = centerH - (m.top+m.bottom);
+            var totalWidth = (b.width + m.left + m.right);
+            b.x = w - totalWidth + m.left;
+            b.y = centerY + m.top;
+            centerW -= totalWidth;
+            east.updateBox(this.safeBox(b));
+        }
+        if(center){
+            var m = center.getMargins();
+            var centerBox = {
+                x: centerX + m.left,
+                y: centerY + m.top,
+                width: centerW - (m.left+m.right),
+                height: centerH - (m.top+m.bottom)
+            };
+            //if(this.hideOnLayout){
+                //center.el.setStyle("display", "block");
+            //}
+            center.updateBox(this.safeBox(centerBox));
+        }
+        this.el.repaint();
+        this.fireEvent("layout", this);
+    },
+
+    // private
+    safeBox : function(box){
+        box.width = Math.max(0, box.width);
+        box.height = Math.max(0, box.height);
+        return box;
+    },
+
+    /**
+     * Adds a ContentPanel (or subclass) to this layout.
+     * @param {String} target The target region key (north, south, east, west or center).
+     * @param {Roo.ContentPanel} panel The panel to add
+     * @return {Roo.ContentPanel} The added panel
+     */
+    add : function(target, panel){
+         
+        target = target.toLowerCase();
+        return this.regions[target].add(panel);
+    },
+
+    /**
+     * Remove a ContentPanel (or subclass) to this layout.
+     * @param {String} target The target region key (north, south, east, west or center).
+     * @param {Number/String/Roo.ContentPanel} panel The index, id or panel to remove
+     * @return {Roo.ContentPanel} The removed panel
+     */
+    remove : function(target, panel){
+        target = target.toLowerCase();
+        return this.regions[target].remove(panel);
+    },
+
+    /**
+     * Searches all regions for a panel with the specified id
+     * @param {String} panelId
+     * @return {Roo.ContentPanel} The panel or null if it wasn't found
+     */
+    findPanel : function(panelId){
+        var rs = this.regions;
+        for(var target in rs){
+            if(typeof rs[target] != "function"){
+                var p = rs[target].getPanel(panelId);
+                if(p){
+                    return p;
+                }
+            }
+        }
+        return null;
+    },
+
+    /**
+     * Searches all regions for a panel with the specified id and activates (shows) it.
+     * @param {String/ContentPanel} panelId The panels id or the panel itself
+     * @return {Roo.ContentPanel} The shown panel or null
+     */
+    showPanel : function(panelId) {
+      var rs = this.regions;
+      for(var target in rs){
+         var r = rs[target];
+         if(typeof r != "function"){
+            if(r.hasPanel(panelId)){
+               return r.showPanel(panelId);
+            }
+         }
+      }
+      return null;
+   },
+
+   /**
+     * Restores this layout's state using Roo.state.Manager or the state provided by the passed provider.
+     * @param {Roo.state.Provider} provider (optional) An alternate state provider
+     */
+    restoreState : function(provider){
+        if(!provider){
+            provider = Roo.state.Manager;
+        }
+        var sm = new Roo.LayoutStateManager();
+        sm.init(this, provider);
+    },
+
+    /**
+     * Adds a batch of multiple ContentPanels dynamically by passing a special regions config object.  This config
+     * object should contain properties for each region to add ContentPanels to, and each property's value should be
+     * a valid ContentPanel config object.  Example:
+     * <pre><code>
+// Create the main layout
+var layout = new Roo.BorderLayout('main-ct', {
+    west: {
+        split:true,
+        minSize: 175,
+        titlebar: true
+    },
+    center: {
+        title:'Components'
+    }
+}, 'main-ct');
+
+// Create and add multiple ContentPanels at once via configs
+layout.batchAdd({
+   west: {
+       id: 'source-files',
+       autoCreate:true,
+       title:'Ext Source Files',
+       autoScroll:true,
+       fitToFrame:true
+   },
+   center : {
+       el: cview,
+       autoScroll:true,
+       fitToFrame:true,
+       toolbar: tb,
+       resizeEl:'cbody'
+   }
+});
+</code></pre>
+     * @param {Object} regions An object containing ContentPanel configs by region name
+     */
+    batchAdd : function(regions){
+        this.beginUpdate();
+        for(var rname in regions){
+            var lr = this.regions[rname];
+            if(lr){
+                this.addTypedPanels(lr, regions[rname]);
+            }
+        }
+        this.endUpdate();
+    },
+
+    // private
+    addTypedPanels : function(lr, ps){
+        if(typeof ps == 'string'){
+            lr.add(new Roo.ContentPanel(ps));
+        }
+        else if(ps instanceof Array){
+            for(var i =0, len = ps.length; i < len; i++){
+                this.addTypedPanels(lr, ps[i]);
+            }
+        }
+        else if(!ps.events){ // raw config?
+            var el = ps.el;
+            delete ps.el; // prevent conflict
+            lr.add(new Roo.ContentPanel(el || Roo.id(), ps));
+        }
+        else {  // panel object assumed!
+            lr.add(ps);
+        }
+    },
+    /**
+     * Adds a xtype elements to the layout.
+     * <pre><code>
+
+layout.addxtype({
+       xtype : 'ContentPanel',
+       region: 'west',
+       items: [ .... ]
+   }
+);
+
+layout.addxtype({
+        xtype : 'NestedLayoutPanel',
+        region: 'west',
+        layout: {
+           center: { },
+           west: { }   
+        },
+        items : [ ... list of content panels or nested layout panels.. ]
+   }
+);
+</code></pre>
+     * @param {Object} cfg Xtype definition of item to add.
+     */
+    addxtype : function(cfg)
+    {
+        // basically accepts a pannel...
+        // can accept a layout region..!?!?
+        //Roo.log('Roo.BorderLayout add ' + cfg.xtype)
+        
+        if (!cfg.xtype.match(/Panel$/)) {
+            return false;
+        }
+        var ret = false;
+        
+        if (typeof(cfg.region) == 'undefined') {
+            Roo.log("Failed to add Panel, region was not set");
+            Roo.log(cfg);
+            return false;
+        }
+        var region = cfg.region;
+        delete cfg.region;
+        
+          
+        var xitems = [];
+        if (cfg.items) {
+            xitems = cfg.items;
+            delete cfg.items;
+        }
+        var nb = false;
+        
+        switch(cfg.xtype) 
+        {
+            case 'ContentPanel':  // ContentPanel (el, cfg)
+            case 'ScrollPanel':  // ContentPanel (el, cfg)
+            case 'ViewPanel': 
+                if(cfg.autoCreate) {
+                    ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
+                } else {
+                    var el = this.el.createChild();
+                    ret = new Roo[cfg.xtype](el, cfg); // new panel!!!!!
+                }
+                
+                this.add(region, ret);
+                break;
+            
+            
+            case 'TreePanel': // our new panel!
+                cfg.el = this.el.createChild();
+                ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
+                this.add(region, ret);
+                break;
+            
+            case 'NestedLayoutPanel': 
+                // create a new Layout (which is  a Border Layout...
+                var el = this.el.createChild();
+                var clayout = cfg.layout;
+                delete cfg.layout;
+                clayout.items   = clayout.items  || [];
+                // replace this exitems with the clayout ones..
+                xitems = clayout.items;
+                 
+                
+                if (region == 'center' && this.active && this.getRegion('center').panels.length < 1) {
+                    cfg.background = false;
+                }
+                var layout = new Roo.BorderLayout(el, clayout);
+                
+                ret = new Roo[cfg.xtype](layout, cfg); // new panel!!!!!
+                //console.log('adding nested layout panel '  + cfg.toSource());
+                this.add(region, ret);
+                nb = {}; /// find first...
+                break;
+                
+            case 'GridPanel': 
+            
+                // needs grid and region
+                
+                //var el = this.getRegion(region).el.createChild();
+                var el = this.el.createChild();
+                // create the grid first...
+                
+                var grid = new Roo.grid[cfg.grid.xtype](el, cfg.grid);
+                delete cfg.grid;
+                if (region == 'center' && this.active ) {
+                    cfg.background = false;
+                }
+                ret = new Roo[cfg.xtype](grid, cfg); // new panel!!!!!
+                
+                this.add(region, ret);
+                if (cfg.background) {
+                    ret.on('activate', function(gp) {
+                        if (!gp.grid.rendered) {
+                            gp.grid.render();
+                        }
+                    });
+                } else {
+                    grid.render();
+                }
+                break;
+           
+           
+           
+                
+                
+                
+            default:
+                if (typeof(Roo[cfg.xtype]) != 'undefined') {
+                    
+                    ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
+                    this.add(region, ret);
+                } else {
+                
+                    alert("Can not add '" + cfg.xtype + "' to BorderLayout");
+                    return null;
+                }
+                
+             // GridPanel (grid, cfg)
+            
+        }
+        this.beginUpdate();
+        // add children..
+        var region = '';
+        var abn = {};
+        Roo.each(xitems, function(i)  {
+            region = nb && i.region ? i.region : false;
+            
+            var add = ret.addxtype(i);
+           
+            if (region) {
+                nb[region] = nb[region] == undefined ? 0 : nb[region]+1;
+                if (!i.background) {
+                    abn[region] = nb[region] ;
+                }
+            }
+            
+        });
+        this.endUpdate();
+
+        // make the last non-background panel active..
+        //if (nb) { Roo.log(abn); }
+        if (nb) {
+            
+            for(var r in abn) {
+                region = this.getRegion(r);
+                if (region) {
+                    // tried using nb[r], but it does not work..
+                     
+                    region.showPanel(abn[r]);
+                   
+                }
+            }
+        }
+        return ret;
+        
+    }
+});
+
+/**
+ * Shortcut for creating a new BorderLayout object and adding one or more ContentPanels to it in a single step, handling
+ * the beginUpdate and endUpdate calls internally.  The key to this method is the <b>panels</b> property that can be
+ * provided with each region config, which allows you to add ContentPanel configs in addition to the region configs
+ * during creation.  The following code is equivalent to the constructor-based example at the beginning of this class:
+ * <pre><code>
+// shorthand
+var CP = Roo.ContentPanel;
+
+var layout = Roo.BorderLayout.create({
+    north: {
+        initialSize: 25,
+        titlebar: false,
+        panels: [new CP("north", "North")]
+    },
+    west: {
+        split:true,
+        initialSize: 200,
+        minSize: 175,
+        maxSize: 400,
+        titlebar: true,
+        collapsible: true,
+        panels: [new CP("west", {title: "West"})]
+    },
+    east: {
+        split:true,
+        initialSize: 202,
+        minSize: 175,
+        maxSize: 400,
+        titlebar: true,
+        collapsible: true,
+        panels: [new CP("autoTabs", {title: "Auto Tabs", closable: true})]
+    },
+    south: {
+        split:true,
+        initialSize: 100,
+        minSize: 100,
+        maxSize: 200,
+        titlebar: true,
+        collapsible: true,
+        panels: [new CP("south", {title: "South", closable: true})]
+    },
+    center: {
+        titlebar: true,
+        autoScroll:true,
+        resizeTabs: true,
+        minTabWidth: 50,
+        preferredTabWidth: 150,
+        panels: [
+            new CP("center1", {title: "Close Me", closable: true}),
+            new CP("center2", {title: "Center Panel", closable: false})
+        ]
+    }
+}, document.body);
+
+layout.getRegion("center").showPanel("center1");
+</code></pre>
+ * @param config
+ * @param targetEl
+ */
+Roo.BorderLayout.create = function(config, targetEl){
+    var layout = new Roo.BorderLayout(targetEl || document.body, config);
+    layout.beginUpdate();
+    var regions = Roo.BorderLayout.RegionFactory.validRegions;
+    for(var j = 0, jlen = regions.length; j < jlen; j++){
+        var lr = regions[j];
+        if(layout.regions[lr] && config[lr].panels){
+            var r = layout.regions[lr];
+            var ps = config[lr].panels;
+            layout.addTypedPanels(r, ps);
+        }
+    }
+    layout.endUpdate();
+    return layout;
+};
+
+// private
+Roo.BorderLayout.RegionFactory = {
+    // private
+    validRegions : ["north","south","east","west","center"],
+
+    // private
+    create : function(target, mgr, config){
+        target = target.toLowerCase();
+        if(config.lightweight || config.basic){
+            return new Roo.BasicLayoutRegion(mgr, config, target);
+        }
+        switch(target){
+            case "north":
+                return new Roo.NorthLayoutRegion(mgr, config);
+            case "south":
+                return new Roo.SouthLayoutRegion(mgr, config);
+            case "east":
+                return new Roo.EastLayoutRegion(mgr, config);
+            case "west":
+                return new Roo.WestLayoutRegion(mgr, config);
+            case "center":
+                return new Roo.CenterLayoutRegion(mgr, config);
+        }
+        throw 'Layout region "'+target+'" not supported.';
+    }
+};/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+/**
+ * @class Roo.BasicLayoutRegion
+ * @extends Roo.util.Observable
+ * This class represents a lightweight region in a layout manager. This region does not move dom nodes
+ * and does not have a titlebar, tabs or any other features. All it does is size and position 
+ * panels. To create a BasicLayoutRegion, add lightweight:true or basic:true to your regions config.
+ */
+Roo.BasicLayoutRegion = function(mgr, config, pos, skipConfig){
+    this.mgr = mgr;
+    this.position  = pos;
+    this.events = {
+        /**
+         * @scope Roo.BasicLayoutRegion
+         */
+        
+        /**
+         * @event beforeremove
+         * Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
+         * @param {Roo.LayoutRegion} this
+         * @param {Roo.ContentPanel} panel The panel
+         * @param {Object} e The cancel event object
+         */
+        "beforeremove" : true,
+        /**
+         * @event invalidated
+         * Fires when the layout for this region is changed.
+         * @param {Roo.LayoutRegion} this
+         */
+        "invalidated" : true,
+        /**
+         * @event visibilitychange
+         * Fires when this region is shown or hidden 
+         * @param {Roo.LayoutRegion} this
+         * @param {Boolean} visibility true or false
+         */
+        "visibilitychange" : true,
+        /**
+         * @event paneladded
+         * Fires when a panel is added. 
+         * @param {Roo.LayoutRegion} this
+         * @param {Roo.ContentPanel} panel The panel
+         */
+        "paneladded" : true,
+        /**
+         * @event panelremoved
+         * Fires when a panel is removed. 
+         * @param {Roo.LayoutRegion} this
+         * @param {Roo.ContentPanel} panel The panel
+         */
+        "panelremoved" : true,
+        /**
+         * @event collapsed
+         * Fires when this region is collapsed.
+         * @param {Roo.LayoutRegion} this
+         */
+        "collapsed" : true,
+        /**
+         * @event expanded
+         * Fires when this region is expanded.
+         * @param {Roo.LayoutRegion} this
+         */
+        "expanded" : true,
+        /**
+         * @event slideshow
+         * Fires when this region is slid into view.
+         * @param {Roo.LayoutRegion} this
+         */
+        "slideshow" : true,
+        /**
+         * @event slidehide
+         * Fires when this region slides out of view. 
+         * @param {Roo.LayoutRegion} this
+         */
+        "slidehide" : true,
+        /**
+         * @event panelactivated
+         * Fires when a panel is activated. 
+         * @param {Roo.LayoutRegion} this
+         * @param {Roo.ContentPanel} panel The activated panel
+         */
+        "panelactivated" : true,
+        /**
+         * @event resized
+         * Fires when the user resizes this region. 
+         * @param {Roo.LayoutRegion} this
+         * @param {Number} newSize The new size (width for east/west, height for north/south)
+         */
+        "resized" : true
+    };
+    /** A collection of panels in this region. @type Roo.util.MixedCollection */
+    this.panels = new Roo.util.MixedCollection();
+    this.panels.getKey = this.getPanelId.createDelegate(this);
+    this.box = null;
+    this.activePanel = null;
+    // ensure listeners are added...
+    
+    if (config.listeners || config.events) {
+        Roo.BasicLayoutRegion.superclass.constructor.call(this, {
+            listeners : config.listeners || {},
+            events : config.events || {}
+        });
+    }
+    
+    if(skipConfig !== true){
+        this.applyConfig(config);
+    }
+};
+
+Roo.extend(Roo.BasicLayoutRegion, Roo.util.Observable, {
+    getPanelId : function(p){
+        return p.getId();
+    },
+    
+    applyConfig : function(config){
+        this.margins = config.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
+        this.config = config;
+        
+    },
+    
+    /**
+     * Resizes the region to the specified size. For vertical regions (west, east) this adjusts 
+     * the width, for horizontal (north, south) the height.
+     * @param {Number} newSize The new width or height
+     */
+    resizeTo : function(newSize){
+        var el = this.el ? this.el :
+                 (this.activePanel ? this.activePanel.getEl() : null);
+        if(el){
+            switch(this.position){
+                case "east":
+                case "west":
+                    el.setWidth(newSize);
+                    this.fireEvent("resized", this, newSize);
+                break;
+                case "north":
+                case "south":
+                    el.setHeight(newSize);
+                    this.fireEvent("resized", this, newSize);
+                break;                
+            }
+        }
+    },
+    
+    getBox : function(){
+        return this.activePanel ? this.activePanel.getEl().getBox(false, true) : null;
+    },
+    
+    getMargins : function(){
+        return this.margins;
+    },
+    
+    updateBox : function(box){
+        this.box = box;
+        var el = this.activePanel.getEl();
+        el.dom.style.left = box.x + "px";
+        el.dom.style.top = box.y + "px";
+        this.activePanel.setSize(box.width, box.height);
+    },
+    
+    /**
+     * Returns the container element for this region.
+     * @return {Roo.Element}
+     */
+    getEl : function(){
+        return this.activePanel;
+    },
+    
+    /**
+     * Returns true if this region is currently visible.
+     * @return {Boolean}
+     */
+    isVisible : function(){
+        return this.activePanel ? true : false;
+    },
+    
+    setActivePanel : function(panel){
+        panel = this.getPanel(panel);
+        if(this.activePanel && this.activePanel != panel){
+            this.activePanel.setActiveState(false);
+            this.activePanel.getEl().setLeftTop(-10000,-10000);
+        }
+        this.activePanel = panel;
+        panel.setActiveState(true);
+        if(this.box){
+            panel.setSize(this.box.width, this.box.height);
+        }
+        this.fireEvent("panelactivated", this, panel);
+        this.fireEvent("invalidated");
+    },
+    
+    /**
+     * Show the specified panel.
+     * @param {Number/String/ContentPanel} panelId The panels index, id or the panel itself
+     * @return {Roo.ContentPanel} The shown panel or null
+     */
+    showPanel : function(panel){
+        if(panel = this.getPanel(panel)){
+            this.setActivePanel(panel);
+        }
+        return panel;
+    },
+    
+    /**
+     * Get the active panel for this region.
+     * @return {Roo.ContentPanel} The active panel or null
+     */
+    getActivePanel : function(){
+        return this.activePanel;
+    },
+    
+    /**
+     * Add the passed ContentPanel(s)
+     * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
+     * @return {Roo.ContentPanel} The panel added (if only one was added)
+     */
+    add : function(panel){
+        if(arguments.length > 1){
+            for(var i = 0, len = arguments.length; i < len; i++) {
+            	this.add(arguments[i]);
+            }
+            return null;
+        }
+        if(this.hasPanel(panel)){
+            this.showPanel(panel);
+            return panel;
+        }
+        var el = panel.getEl();
+        if(el.dom.parentNode != this.mgr.el.dom){
+            this.mgr.el.dom.appendChild(el.dom);
+        }
+        if(panel.setRegion){
+            panel.setRegion(this);
+        }
+        this.panels.add(panel);
+        el.setStyle("position", "absolute");
+        if(!panel.background){
+            this.setActivePanel(panel);
+            if(this.config.initialSize && this.panels.getCount()==1){
+                this.resizeTo(this.config.initialSize);
+            }
+        }
+        this.fireEvent("paneladded", this, panel);
+        return panel;
+    },
+    
+    /**
+     * Returns true if the panel is in this region.
+     * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
+     * @return {Boolean}
+     */
+    hasPanel : function(panel){
+        if(typeof panel == "object"){ // must be panel obj
+            panel = panel.getId();
+        }
+        return this.getPanel(panel) ? true : false;
+    },
+    
+    /**
+     * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
+     * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
+     * @param {Boolean} preservePanel Overrides the config preservePanel option
+     * @return {Roo.ContentPanel} The panel that was removed
+     */
+    remove : function(panel, preservePanel){
+        panel = this.getPanel(panel);
+        if(!panel){
+            return null;
+        }
+        var e = {};
+        this.fireEvent("beforeremove", this, panel, e);
+        if(e.cancel === true){
+            return null;
+        }
+        var panelId = panel.getId();
+        this.panels.removeKey(panelId);
+        return panel;
+    },
+    
+    /**
+     * Returns the panel specified or null if it's not in this region.
+     * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
+     * @return {Roo.ContentPanel}
+     */
+    getPanel : function(id){
+        if(typeof id == "object"){ // must be panel obj
+            return id;
+        }
+        return this.panels.get(id);
+    },
+    
+    /**
+     * Returns this regions position (north/south/east/west/center).
+     * @return {String} 
+     */
+    getPosition: function(){
+        return this.position;    
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+/**
+ * @class Roo.LayoutRegion
+ * @extends Roo.BasicLayoutRegion
+ * This class represents a region in a layout manager.
+ * @cfg {Boolean}   collapsible     False to disable collapsing (defaults to true)
+ * @cfg {Boolean}   collapsed       True to set the initial display to collapsed (defaults to false)
+ * @cfg {Boolean}   floatable       False to disable floating (defaults to true)
+ * @cfg {Object}    margins         Margins for the element (defaults to {top: 0, left: 0, right:0, bottom: 0})
+ * @cfg {Object}    cmargins        Margins for the element when collapsed (defaults to: north/south {top: 2, left: 0, right:0, bottom: 2} or east/west {top: 0, left: 2, right:2, bottom: 0})
+ * @cfg {String}    tabPosition     (top|bottom) "top" or "bottom" (defaults to "bottom")
+ * @cfg {String}    collapsedTitle  Optional string message to display in the collapsed block of a north or south region
+ * @cfg {Boolean}   alwaysShowTabs  True to always display tabs even when there is only 1 panel (defaults to false)
+ * @cfg {Boolean}   autoScroll      True to enable overflow scrolling (defaults to false)
+ * @cfg {Boolean}   titlebar        True to display a title bar (defaults to true)
+ * @cfg {String}    title           The title for the region (overrides panel titles)
+ * @cfg {Boolean}   animate         True to animate expand/collapse (defaults to false)
+ * @cfg {Boolean}   autoHide        False to disable auto hiding when the mouse leaves the "floated" region (defaults to true)
+ * @cfg {Boolean}   preservePanels  True to preserve removed panels so they can be readded later (defaults to false)
+ * @cfg {Boolean}   closeOnTab      True to place the close icon on the tabs instead of the region titlebar (defaults to false)
+ * @cfg {Boolean}   hideTabs        True to hide the tab strip (defaults to false)
+ * @cfg {Boolean}   resizeTabs      True to enable automatic tab resizing. This will resize the tabs so they are all the same size and fit within
+ *                      the space available, similar to FireFox 1.5 tabs (defaults to false)
+ * @cfg {Number}    minTabWidth     The minimum tab width (defaults to 40)
+ * @cfg {Number}    preferredTabWidth The preferred tab width (defaults to 150)
+ * @cfg {Boolean}   showPin         True to show a pin button
+ * @cfg {Boolean}   hidden          True to start the region hidden (defaults to false)
+ * @cfg {Boolean}   hideWhenEmpty   True to hide the region when it has no panels
+ * @cfg {Boolean}   disableTabTips  True to disable tab tooltips
+ * @cfg {Number}    width           For East/West panels
+ * @cfg {Number}    height          For North/South panels
+ * @cfg {Boolean}   split           To show the splitter
+ * @cfg {Boolean}   toolbar         xtype configuration for a toolbar - shows on right of tabbar
+ */
+Roo.LayoutRegion = function(mgr, config, pos){
+    Roo.LayoutRegion.superclass.constructor.call(this, mgr, config, pos, true);
+    var dh = Roo.DomHelper;
+    /** This region's container element 
+    * @type Roo.Element */
+    this.el = dh.append(mgr.el.dom, {tag: "div", cls: "x-layout-panel x-layout-panel-" + this.position}, true);
+    /** This region's title element 
+    * @type Roo.Element */
+
+    this.titleEl = dh.append(this.el.dom, {tag: "div", unselectable: "on", cls: "x-unselectable x-layout-panel-hd x-layout-title-"+this.position, children:[
+        {tag: "span", cls: "x-unselectable x-layout-panel-hd-text", unselectable: "on", html: "&#160;"},
+        {tag: "div", cls: "x-unselectable x-layout-panel-hd-tools", unselectable: "on"}
+    ]}, true);
+    this.titleEl.enableDisplayMode();
+    /** This region's title text element 
+    * @type HTMLElement */
+    this.titleTextEl = this.titleEl.dom.firstChild;
+    this.tools = Roo.get(this.titleEl.dom.childNodes[1], true);
+    this.closeBtn = this.createTool(this.tools.dom, "x-layout-close");
+    this.closeBtn.enableDisplayMode();
+    this.closeBtn.on("click", this.closeClicked, this);
+    this.closeBtn.hide();
+
+    this.createBody(config);
+    this.visible = true;
+    this.collapsed = false;
+
+    if(config.hideWhenEmpty){
+        this.hide();
+        this.on("paneladded", this.validateVisibility, this);
+        this.on("panelremoved", this.validateVisibility, this);
+    }
+    this.applyConfig(config);
+};
+
+Roo.extend(Roo.LayoutRegion, Roo.BasicLayoutRegion, {
+
+    createBody : function(){
+        /** This region's body element 
+        * @type Roo.Element */
+        this.bodyEl = this.el.createChild({tag: "div", cls: "x-layout-panel-body"});
+    },
+
+    applyConfig : function(c){
+        if(c.collapsible && this.position != "center" && !this.collapsedEl){
+            var dh = Roo.DomHelper;
+            if(c.titlebar !== false){
+                this.collapseBtn = this.createTool(this.tools.dom, "x-layout-collapse-"+this.position);
+                this.collapseBtn.on("click", this.collapse, this);
+                this.collapseBtn.enableDisplayMode();
+
+                if(c.showPin === true || this.showPin){
+                    this.stickBtn = this.createTool(this.tools.dom, "x-layout-stick");
+                    this.stickBtn.enableDisplayMode();
+                    this.stickBtn.on("click", this.expand, this);
+                    this.stickBtn.hide();
+                }
+            }
+            /** This region's collapsed element
+            * @type Roo.Element */
+            this.collapsedEl = dh.append(this.mgr.el.dom, {cls: "x-layout-collapsed x-layout-collapsed-"+this.position, children:[
+                {cls: "x-layout-collapsed-tools", children:[{cls: "x-layout-ctools-inner"}]}
+            ]}, true);
+            if(c.floatable !== false){
+               this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
+               this.collapsedEl.on("click", this.collapseClick, this);
+            }
+
+            if(c.collapsedTitle && (this.position == "north" || this.position== "south")) {
+                this.collapsedTitleTextEl = dh.append(this.collapsedEl.dom, {tag: "div", cls: "x-unselectable x-layout-panel-hd-text",
+                   id: "message", unselectable: "on", style:{"float":"left"}});
+               this.collapsedTitleTextEl.innerHTML = c.collapsedTitle;
+             }
+            this.expandBtn = this.createTool(this.collapsedEl.dom.firstChild.firstChild, "x-layout-expand-"+this.position);
+            this.expandBtn.on("click", this.expand, this);
+        }
+        if(this.collapseBtn){
+            this.collapseBtn.setVisible(c.collapsible == true);
+        }
+        this.cmargins = c.cmargins || this.cmargins ||
+                         (this.position == "west" || this.position == "east" ?
+                             {top: 0, left: 2, right:2, bottom: 0} :
+                             {top: 2, left: 0, right:0, bottom: 2});
+        this.margins = c.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
+        this.bottomTabs = c.tabPosition != "top";
+        this.autoScroll = c.autoScroll || false;
+        if(this.autoScroll){
+            this.bodyEl.setStyle("overflow", "auto");
+        }else{
+            this.bodyEl.setStyle("overflow", "hidden");
+        }
+        //if(c.titlebar !== false){
+            if((!c.titlebar && !c.title) || c.titlebar === false){
+                this.titleEl.hide();
+            }else{
+                this.titleEl.show();
+                if(c.title){
+                    this.titleTextEl.innerHTML = c.title;
+                }
+            }
+        //}
+        this.duration = c.duration || .30;
+        this.slideDuration = c.slideDuration || .45;
+        this.config = c;
+        if(c.collapsed){
+            this.collapse(true);
+        }
+        if(c.hidden){
+            this.hide();
+        }
+    },
+    /**
+     * Returns true if this region is currently visible.
+     * @return {Boolean}
+     */
+    isVisible : function(){
+        return this.visible;
+    },
+
+    /**
+     * Updates the title for collapsed north/south regions (used with {@link #collapsedTitle} config option)
+     * @param {String} title (optional) The title text (accepts HTML markup, defaults to the numeric character reference for a non-breaking space, "&amp;#160;")
+     */
+    setCollapsedTitle : function(title){
+        title = title || "&#160;";
+        if(this.collapsedTitleTextEl){
+            this.collapsedTitleTextEl.innerHTML = title;
+        }
+    },
+
+    getBox : function(){
+        var b;
+        if(!this.collapsed){
+            b = this.el.getBox(false, true);
+        }else{
+            b = this.collapsedEl.getBox(false, true);
+        }
+        return b;
+    },
+
+    getMargins : function(){
+        return this.collapsed ? this.cmargins : this.margins;
+    },
+
+    highlight : function(){
+        this.el.addClass("x-layout-panel-dragover");
+    },
+
+    unhighlight : function(){
+        this.el.removeClass("x-layout-panel-dragover");
+    },
+
+    updateBox : function(box){
+        this.box = box;
+        if(!this.collapsed){
+            this.el.dom.style.left = box.x + "px";
+            this.el.dom.style.top = box.y + "px";
+            this.updateBody(box.width, box.height);
+        }else{
+            this.collapsedEl.dom.style.left = box.x + "px";
+            this.collapsedEl.dom.style.top = box.y + "px";
+            this.collapsedEl.setSize(box.width, box.height);
+        }
+        if(this.tabs){
+            this.tabs.autoSizeTabs();
+        }
+    },
+
+    updateBody : function(w, h){
+        if(w !== null){
+            this.el.setWidth(w);
+            w -= this.el.getBorderWidth("rl");
+            if(this.config.adjustments){
+                w += this.config.adjustments[0];
+            }
+        }
+        if(h !== null){
+            this.el.setHeight(h);
+            h = this.titleEl && this.titleEl.isDisplayed() ? h - (this.titleEl.getHeight()||0) : h;
+            h -= this.el.getBorderWidth("tb");
+            if(this.config.adjustments){
+                h += this.config.adjustments[1];
+            }
+            this.bodyEl.setHeight(h);
+            if(this.tabs){
+                h = this.tabs.syncHeight(h);
+            }
+        }
+        if(this.panelSize){
+            w = w !== null ? w : this.panelSize.width;
+            h = h !== null ? h : this.panelSize.height;
+        }
+        if(this.activePanel){
+            var el = this.activePanel.getEl();
+            w = w !== null ? w : el.getWidth();
+            h = h !== null ? h : el.getHeight();
+            this.panelSize = {width: w, height: h};
+            this.activePanel.setSize(w, h);
+        }
+        if(Roo.isIE && this.tabs){
+            this.tabs.el.repaint();
+        }
+    },
+
+    /**
+     * Returns the container element for this region.
+     * @return {Roo.Element}
+     */
+    getEl : function(){
+        return this.el;
+    },
+
+    /**
+     * Hides this region.
+     */
+    hide : function(){
+        if(!this.collapsed){
+            this.el.dom.style.left = "-2000px";
+            this.el.hide();
+        }else{
+            this.collapsedEl.dom.style.left = "-2000px";
+            this.collapsedEl.hide();
+        }
+        this.visible = false;
+        this.fireEvent("visibilitychange", this, false);
+    },
+
+    /**
+     * Shows this region if it was previously hidden.
+     */
+    show : function(){
+        if(!this.collapsed){
+            this.el.show();
+        }else{
+            this.collapsedEl.show();
+        }
+        this.visible = true;
+        this.fireEvent("visibilitychange", this, true);
+    },
+
+    closeClicked : function(){
+        if(this.activePanel){
+            this.remove(this.activePanel);
+        }
+    },
+
+    collapseClick : function(e){
+        if(this.isSlid){
+           e.stopPropagation();
+           this.slideIn();
+        }else{
+           e.stopPropagation();
+           this.slideOut();
+        }
+    },
+
+    /**
+     * Collapses this region.
+     * @param {Boolean} skipAnim (optional) true to collapse the element without animation (if animate is true)
+     */
+    collapse : function(skipAnim){
+        if(this.collapsed) {
+            return;
+        }
+        this.collapsed = true;
+        if(this.split){
+            this.split.el.hide();
+        }
+        if(this.config.animate && skipAnim !== true){
+            this.fireEvent("invalidated", this);
+            this.animateCollapse();
+        }else{
+            this.el.setLocation(-20000,-20000);
+            this.el.hide();
+            this.collapsedEl.show();
+            this.fireEvent("collapsed", this);
+            this.fireEvent("invalidated", this);
+        }
+    },
+
+    animateCollapse : function(){
+        // overridden
+    },
+
+    /**
+     * Expands this region if it was previously collapsed.
+     * @param {Roo.EventObject} e The event that triggered the expand (or null if calling manually)
+     * @param {Boolean} skipAnim (optional) true to expand the element without animation (if animate is true)
+     */
+    expand : function(e, skipAnim){
+        if(e) {
+            e.stopPropagation();
+        }
+        if(!this.collapsed || this.el.hasActiveFx()) {
+            return;
+        }
+        if(this.isSlid){
+            this.afterSlideIn();
+            skipAnim = true;
+        }
+        this.collapsed = false;
+        if(this.config.animate && skipAnim !== true){
+            this.animateExpand();
+        }else{
+            this.el.show();
+            if(this.split){
+                this.split.el.show();
+            }
+            this.collapsedEl.setLocation(-2000,-2000);
+            this.collapsedEl.hide();
+            this.fireEvent("invalidated", this);
+            this.fireEvent("expanded", this);
+        }
+    },
+
+    animateExpand : function(){
+        // overridden
+    },
+
+    initTabs : function()
+    {
+        this.bodyEl.setStyle("overflow", "hidden");
+        var ts = new Roo.TabPanel(
+                this.bodyEl.dom,
+                {
+                    tabPosition: this.bottomTabs ? 'bottom' : 'top',
+                    disableTooltips: this.config.disableTabTips,
+                    toolbar : this.config.toolbar
+                }
+        );
+        if(this.config.hideTabs){
+            ts.stripWrap.setDisplayed(false);
+        }
+        this.tabs = ts;
+        ts.resizeTabs = this.config.resizeTabs === true;
+        ts.minTabWidth = this.config.minTabWidth || 40;
+        ts.maxTabWidth = this.config.maxTabWidth || 250;
+        ts.preferredTabWidth = this.config.preferredTabWidth || 150;
+        ts.monitorResize = false;
+        ts.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
+        ts.bodyEl.addClass('x-layout-tabs-body');
+        this.panels.each(this.initPanelAsTab, this);
+    },
+
+    initPanelAsTab : function(panel){
+        var ti = this.tabs.addTab(panel.getEl().id, panel.getTitle(), null,
+                    this.config.closeOnTab && panel.isClosable());
+        if(panel.tabTip !== undefined){
+            ti.setTooltip(panel.tabTip);
+        }
+        ti.on("activate", function(){
+              this.setActivePanel(panel);
+        }, this);
+        if(this.config.closeOnTab){
+            ti.on("beforeclose", function(t, e){
+                e.cancel = true;
+                this.remove(panel);
+            }, this);
+        }
+        return ti;
+    },
+
+    updatePanelTitle : function(panel, title){
+        if(this.activePanel == panel){
+            this.updateTitle(title);
+        }
+        if(this.tabs){
+            var ti = this.tabs.getTab(panel.getEl().id);
+            ti.setText(title);
+            if(panel.tabTip !== undefined){
+                ti.setTooltip(panel.tabTip);
+            }
+        }
+    },
+
+    updateTitle : function(title){
+        if(this.titleTextEl && !this.config.title){
+            this.titleTextEl.innerHTML = (typeof title != "undefined" && title.length > 0 ? title : "&#160;");
+        }
+    },
+
+    setActivePanel : function(panel){
+        panel = this.getPanel(panel);
+        if(this.activePanel && this.activePanel != panel){
+            this.activePanel.setActiveState(false);
+        }
+        this.activePanel = panel;
+        panel.setActiveState(true);
+        if(this.panelSize){
+            panel.setSize(this.panelSize.width, this.panelSize.height);
+        }
+        if(this.closeBtn){
+            this.closeBtn.setVisible(!this.config.closeOnTab && !this.isSlid && panel.isClosable());
+        }
+        this.updateTitle(panel.getTitle());
+        if(this.tabs){
+            this.fireEvent("invalidated", this);
+        }
+        this.fireEvent("panelactivated", this, panel);
+    },
+
+    /**
+     * Shows the specified panel.
+     * @param {Number/String/ContentPanel} panelId The panel's index, id or the panel itself
+     * @return {Roo.ContentPanel} The shown panel, or null if a panel could not be found from panelId
+     */
+    showPanel : function(panel)
+    {
+        panel = this.getPanel(panel);
+        if(panel){
+            if(this.tabs){
+                var tab = this.tabs.getTab(panel.getEl().id);
+                if(tab.isHidden()){
+                    this.tabs.unhideTab(tab.id);
+                }
+                tab.activate();
+            }else{
+                this.setActivePanel(panel);
+            }
+        }
+        return panel;
+    },
+
+    /**
+     * Get the active panel for this region.
+     * @return {Roo.ContentPanel} The active panel or null
+     */
+    getActivePanel : function(){
+        return this.activePanel;
+    },
+
+    validateVisibility : function(){
+        if(this.panels.getCount() < 1){
+            this.updateTitle("&#160;");
+            this.closeBtn.hide();
+            this.hide();
+        }else{
+            if(!this.isVisible()){
+                this.show();
+            }
+        }
+    },
+
+    /**
+     * Adds the passed ContentPanel(s) to this region.
+     * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
+     * @return {Roo.ContentPanel} The panel added (if only one was added; null otherwise)
+     */
+    add : function(panel){
+        if(arguments.length > 1){
+            for(var i = 0, len = arguments.length; i < len; i++) {
+                this.add(arguments[i]);
+            }
+            return null;
+        }
+        if(this.hasPanel(panel)){
+            this.showPanel(panel);
+            return panel;
+        }
+        panel.setRegion(this);
+        this.panels.add(panel);
+        if(this.panels.getCount() == 1 && !this.config.alwaysShowTabs){
+            this.bodyEl.dom.appendChild(panel.getEl().dom);
+            if(panel.background !== true){
+                this.setActivePanel(panel);
+            }
+            this.fireEvent("paneladded", this, panel);
+            return panel;
+        }
+        if(!this.tabs){
+            this.initTabs();
+        }else{
+            this.initPanelAsTab(panel);
+        }
+        if(panel.background !== true){
+            this.tabs.activate(panel.getEl().id);
+        }
+        this.fireEvent("paneladded", this, panel);
+        return panel;
+    },
+
+    /**
+     * Hides the tab for the specified panel.
+     * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
+     */
+    hidePanel : function(panel){
+        if(this.tabs && (panel = this.getPanel(panel))){
+            this.tabs.hideTab(panel.getEl().id);
+        }
+    },
+
+    /**
+     * Unhides the tab for a previously hidden panel.
+     * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
+     */
+    unhidePanel : function(panel){
+        if(this.tabs && (panel = this.getPanel(panel))){
+            this.tabs.unhideTab(panel.getEl().id);
+        }
+    },
+
+    clearPanels : function(){
+        while(this.panels.getCount() > 0){
+             this.remove(this.panels.first());
+        }
+    },
+
+    /**
+     * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
+     * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
+     * @param {Boolean} preservePanel Overrides the config preservePanel option
+     * @return {Roo.ContentPanel} The panel that was removed
+     */
+    remove : function(panel, preservePanel){
+        panel = this.getPanel(panel);
+        if(!panel){
+            return null;
+        }
+        var e = {};
+        this.fireEvent("beforeremove", this, panel, e);
+        if(e.cancel === true){
+            return null;
+        }
+        preservePanel = (typeof preservePanel != "undefined" ? preservePanel : (this.config.preservePanels === true || panel.preserve === true));
+        var panelId = panel.getId();
+        this.panels.removeKey(panelId);
+        if(preservePanel){
+            document.body.appendChild(panel.getEl().dom);
+        }
+        if(this.tabs){
+            this.tabs.removeTab(panel.getEl().id);
+        }else if (!preservePanel){
+            this.bodyEl.dom.removeChild(panel.getEl().dom);
+        }
+        if(this.panels.getCount() == 1 && this.tabs && !this.config.alwaysShowTabs){
+            var p = this.panels.first();
+            var tempEl = document.createElement("div"); // temp holder to keep IE from deleting the node
+            tempEl.appendChild(p.getEl().dom);
+            this.bodyEl.update("");
+            this.bodyEl.dom.appendChild(p.getEl().dom);
+            tempEl = null;
+            this.updateTitle(p.getTitle());
+            this.tabs = null;
+            this.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
+            this.setActivePanel(p);
+        }
+        panel.setRegion(null);
+        if(this.activePanel == panel){
+            this.activePanel = null;
+        }
+        if(this.config.autoDestroy !== false && preservePanel !== true){
+            try{panel.destroy();}catch(e){}
+        }
+        this.fireEvent("panelremoved", this, panel);
+        return panel;
+    },
+
+    /**
+     * Returns the TabPanel component used by this region
+     * @return {Roo.TabPanel}
+     */
+    getTabs : function(){
+        return this.tabs;
+    },
+
+    createTool : function(parentEl, className){
+        var btn = Roo.DomHelper.append(parentEl, {tag: "div", cls: "x-layout-tools-button",
+            children: [{tag: "div", cls: "x-layout-tools-button-inner " + className, html: "&#160;"}]}, true);
+        btn.addClassOnOver("x-layout-tools-button-over");
+        return btn;
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+
+
+/**
+ * @class Roo.SplitLayoutRegion
+ * @extends Roo.LayoutRegion
+ * Adds a splitbar and other (private) useful functionality to a {@link Roo.LayoutRegion}.
+ */
+Roo.SplitLayoutRegion = function(mgr, config, pos, cursor){
+    this.cursor = cursor;
+    Roo.SplitLayoutRegion.superclass.constructor.call(this, mgr, config, pos);
+};
+
+Roo.extend(Roo.SplitLayoutRegion, Roo.LayoutRegion, {
+    splitTip : "Drag to resize.",
+    collapsibleSplitTip : "Drag to resize. Double click to hide.",
+    useSplitTips : false,
+
+    applyConfig : function(config){
+        Roo.SplitLayoutRegion.superclass.applyConfig.call(this, config);
+        if(config.split){
+            if(!this.split){
+                var splitEl = Roo.DomHelper.append(this.mgr.el.dom, 
+                        {tag: "div", id: this.el.id + "-split", cls: "x-layout-split x-layout-split-"+this.position, html: "&#160;"});
+                /** The SplitBar for this region 
+                * @type Roo.SplitBar */
+                this.split = new Roo.SplitBar(splitEl, this.el, this.orientation);
+                this.split.on("moved", this.onSplitMove, this);
+                this.split.useShim = config.useShim === true;
+                this.split.getMaximumSize = this[this.position == 'north' || this.position == 'south' ? 'getVMaxSize' : 'getHMaxSize'].createDelegate(this);
+                if(this.useSplitTips){
+                    this.split.el.dom.title = config.collapsible ? this.collapsibleSplitTip : this.splitTip;
+                }
+                if(config.collapsible){
+                    this.split.el.on("dblclick", this.collapse,  this);
+                }
+            }
+            if(typeof config.minSize != "undefined"){
+                this.split.minSize = config.minSize;
+            }
+            if(typeof config.maxSize != "undefined"){
+                this.split.maxSize = config.maxSize;
+            }
+            if(config.hideWhenEmpty || config.hidden || config.collapsed){
+                this.hideSplitter();
+            }
+        }
+    },
+
+    getHMaxSize : function(){
+         var cmax = this.config.maxSize || 10000;
+         var center = this.mgr.getRegion("center");
+         return Math.min(cmax, (this.el.getWidth()+center.getEl().getWidth())-center.getMinWidth());
+    },
+
+    getVMaxSize : function(){
+         var cmax = this.config.maxSize || 10000;
+         var center = this.mgr.getRegion("center");
+         return Math.min(cmax, (this.el.getHeight()+center.getEl().getHeight())-center.getMinHeight());
+    },
+
+    onSplitMove : function(split, newSize){
+        this.fireEvent("resized", this, newSize);
+    },
+    
+    /** 
+     * Returns the {@link Roo.SplitBar} for this region.
+     * @return {Roo.SplitBar}
+     */
+    getSplitBar : function(){
+        return this.split;
+    },
+    
+    hide : function(){
+        this.hideSplitter();
+        Roo.SplitLayoutRegion.superclass.hide.call(this);
+    },
+
+    hideSplitter : function(){
+        if(this.split){
+            this.split.el.setLocation(-2000,-2000);
+            this.split.el.hide();
+        }
+    },
+
+    show : function(){
+        if(this.split){
+            this.split.el.show();
+        }
+        Roo.SplitLayoutRegion.superclass.show.call(this);
+    },
+    
+    beforeSlide: function(){
+        if(Roo.isGecko){// firefox overflow auto bug workaround
+            this.bodyEl.clip();
+            if(this.tabs) {
+                this.tabs.bodyEl.clip();
+            }
+            if(this.activePanel){
+                this.activePanel.getEl().clip();
+                
+                if(this.activePanel.beforeSlide){
+                    this.activePanel.beforeSlide();
+                }
+            }
+        }
+    },
+    
+    afterSlide : function(){
+        if(Roo.isGecko){// firefox overflow auto bug workaround
+            this.bodyEl.unclip();
+            if(this.tabs) {
+                this.tabs.bodyEl.unclip();
+            }
+            if(this.activePanel){
+                this.activePanel.getEl().unclip();
+                if(this.activePanel.afterSlide){
+                    this.activePanel.afterSlide();
+                }
+            }
+        }
+    },
+
+    initAutoHide : function(){
+        if(this.autoHide !== false){
+            if(!this.autoHideHd){
+                var st = new Roo.util.DelayedTask(this.slideIn, this);
+                this.autoHideHd = {
+                    "mouseout": function(e){
+                        if(!e.within(this.el, true)){
+                            st.delay(500);
+                        }
+                    },
+                    "mouseover" : function(e){
+                        st.cancel();
+                    },
+                    scope : this
+                };
+            }
+            this.el.on(this.autoHideHd);
+        }
+    },
+
+    clearAutoHide : function(){
+        if(this.autoHide !== false){
+            this.el.un("mouseout", this.autoHideHd.mouseout);
+            this.el.un("mouseover", this.autoHideHd.mouseover);
+        }
+    },
+
+    clearMonitor : function(){
+        Roo.get(document).un("click", this.slideInIf, this);
+    },
+
+    // these names are backwards but not changed for compat
+    slideOut : function(){
+        if(this.isSlid || this.el.hasActiveFx()){
+            return;
+        }
+        this.isSlid = true;
+        if(this.collapseBtn){
+            this.collapseBtn.hide();
+        }
+        this.closeBtnState = this.closeBtn.getStyle('display');
+        this.closeBtn.hide();
+        if(this.stickBtn){
+            this.stickBtn.show();
+        }
+        this.el.show();
+        this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
+        this.beforeSlide();
+        this.el.setStyle("z-index", 10001);
+        this.el.slideIn(this.getSlideAnchor(), {
+            callback: function(){
+                this.afterSlide();
+                this.initAutoHide();
+                Roo.get(document).on("click", this.slideInIf, this);
+                this.fireEvent("slideshow", this);
+            },
+            scope: this,
+            block: true
+        });
+    },
+
+    afterSlideIn : function(){
+        this.clearAutoHide();
+        this.isSlid = false;
+        this.clearMonitor();
+        this.el.setStyle("z-index", "");
+        if(this.collapseBtn){
+            this.collapseBtn.show();
+        }
+        this.closeBtn.setStyle('display', this.closeBtnState);
+        if(this.stickBtn){
+            this.stickBtn.hide();
+        }
+        this.fireEvent("slidehide", this);
+    },
+
+    slideIn : function(cb){
+        if(!this.isSlid || this.el.hasActiveFx()){
+            Roo.callback(cb);
+            return;
+        }
+        this.isSlid = false;
+        this.beforeSlide();
+        this.el.slideOut(this.getSlideAnchor(), {
+            callback: function(){
+                this.el.setLeftTop(-10000, -10000);
+                this.afterSlide();
+                this.afterSlideIn();
+                Roo.callback(cb);
+            },
+            scope: this,
+            block: true
+        });
+    },
+    
+    slideInIf : function(e){
+        if(!e.within(this.el)){
+            this.slideIn();
+        }
+    },
+
+    animateCollapse : function(){
+        this.beforeSlide();
+        this.el.setStyle("z-index", 20000);
+        var anchor = this.getSlideAnchor();
+        this.el.slideOut(anchor, {
+            callback : function(){
+                this.el.setStyle("z-index", "");
+                this.collapsedEl.slideIn(anchor, {duration:.3});
+                this.afterSlide();
+                this.el.setLocation(-10000,-10000);
+                this.el.hide();
+                this.fireEvent("collapsed", this);
+            },
+            scope: this,
+            block: true
+        });
+    },
+
+    animateExpand : function(){
+        this.beforeSlide();
+        this.el.alignTo(this.collapsedEl, this.getCollapseAnchor(), this.getExpandAdj());
+        this.el.setStyle("z-index", 20000);
+        this.collapsedEl.hide({
+            duration:.1
+        });
+        this.el.slideIn(this.getSlideAnchor(), {
+            callback : function(){
+                this.el.setStyle("z-index", "");
+                this.afterSlide();
+                if(this.split){
+                    this.split.el.show();
+                }
+                this.fireEvent("invalidated", this);
+                this.fireEvent("expanded", this);
+            },
+            scope: this,
+            block: true
+        });
+    },
+
+    anchors : {
+        "west" : "left",
+        "east" : "right",
+        "north" : "top",
+        "south" : "bottom"
+    },
+
+    sanchors : {
+        "west" : "l",
+        "east" : "r",
+        "north" : "t",
+        "south" : "b"
+    },
+
+    canchors : {
+        "west" : "tl-tr",
+        "east" : "tr-tl",
+        "north" : "tl-bl",
+        "south" : "bl-tl"
+    },
+
+    getAnchor : function(){
+        return this.anchors[this.position];
+    },
+
+    getCollapseAnchor : function(){
+        return this.canchors[this.position];
+    },
+
+    getSlideAnchor : function(){
+        return this.sanchors[this.position];
+    },
+
+    getAlignAdj : function(){
+        var cm = this.cmargins;
+        switch(this.position){
+            case "west":
+                return [0, 0];
+            break;
+            case "east":
+                return [0, 0];
+            break;
+            case "north":
+                return [0, 0];
+            break;
+            case "south":
+                return [0, 0];
+            break;
+        }
+    },
+
+    getExpandAdj : function(){
+        var c = this.collapsedEl, cm = this.cmargins;
+        switch(this.position){
+            case "west":
+                return [-(cm.right+c.getWidth()+cm.left), 0];
+            break;
+            case "east":
+                return [cm.right+c.getWidth()+cm.left, 0];
+            break;
+            case "north":
+                return [0, -(cm.top+cm.bottom+c.getHeight())];
+            break;
+            case "south":
+                return [0, cm.top+cm.bottom+c.getHeight()];
+            break;
+        }
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/*
+ * These classes are private internal classes
+ */
+Roo.CenterLayoutRegion = function(mgr, config){
+    Roo.LayoutRegion.call(this, mgr, config, "center");
+    this.visible = true;
+    this.minWidth = config.minWidth || 20;
+    this.minHeight = config.minHeight || 20;
+};
+
+Roo.extend(Roo.CenterLayoutRegion, Roo.LayoutRegion, {
+    hide : function(){
+        // center panel can't be hidden
+    },
+    
+    show : function(){
+        // center panel can't be hidden
+    },
+    
+    getMinWidth: function(){
+        return this.minWidth;
+    },
+    
+    getMinHeight: function(){
+        return this.minHeight;
+    }
+});
+
+
+Roo.NorthLayoutRegion = function(mgr, config){
+    Roo.LayoutRegion.call(this, mgr, config, "north", "n-resize");
+    if(this.split){
+        this.split.placement = Roo.SplitBar.TOP;
+        this.split.orientation = Roo.SplitBar.VERTICAL;
+        this.split.el.addClass("x-layout-split-v");
+    }
+    var size = config.initialSize || config.height;
+    if(typeof size != "undefined"){
+        this.el.setHeight(size);
+    }
+};
+Roo.extend(Roo.NorthLayoutRegion, Roo.SplitLayoutRegion, {
+    orientation: Roo.SplitBar.VERTICAL,
+    getBox : function(){
+        if(this.collapsed){
+            return this.collapsedEl.getBox();
+        }
+        var box = this.el.getBox();
+        if(this.split){
+            box.height += this.split.el.getHeight();
+        }
+        return box;
+    },
+    
+    updateBox : function(box){
+        if(this.split && !this.collapsed){
+            box.height -= this.split.el.getHeight();
+            this.split.el.setLeft(box.x);
+            this.split.el.setTop(box.y+box.height);
+            this.split.el.setWidth(box.width);
+        }
+        if(this.collapsed){
+            this.updateBody(box.width, null);
+        }
+        Roo.LayoutRegion.prototype.updateBox.call(this, box);
+    }
+});
+
+Roo.SouthLayoutRegion = function(mgr, config){
+    Roo.SplitLayoutRegion.call(this, mgr, config, "south", "s-resize");
+    if(this.split){
+        this.split.placement = Roo.SplitBar.BOTTOM;
+        this.split.orientation = Roo.SplitBar.VERTICAL;
+        this.split.el.addClass("x-layout-split-v");
+    }
+    var size = config.initialSize || config.height;
+    if(typeof size != "undefined"){
+        this.el.setHeight(size);
+    }
+};
+Roo.extend(Roo.SouthLayoutRegion, Roo.SplitLayoutRegion, {
+    orientation: Roo.SplitBar.VERTICAL,
+    getBox : function(){
+        if(this.collapsed){
+            return this.collapsedEl.getBox();
+        }
+        var box = this.el.getBox();
+        if(this.split){
+            var sh = this.split.el.getHeight();
+            box.height += sh;
+            box.y -= sh;
+        }
+        return box;
+    },
+    
+    updateBox : function(box){
+        if(this.split && !this.collapsed){
+            var sh = this.split.el.getHeight();
+            box.height -= sh;
+            box.y += sh;
+            this.split.el.setLeft(box.x);
+            this.split.el.setTop(box.y-sh);
+            this.split.el.setWidth(box.width);
+        }
+        if(this.collapsed){
+            this.updateBody(box.width, null);
+        }
+        Roo.LayoutRegion.prototype.updateBox.call(this, box);
+    }
+});
+
+Roo.EastLayoutRegion = function(mgr, config){
+    Roo.SplitLayoutRegion.call(this, mgr, config, "east", "e-resize");
+    if(this.split){
+        this.split.placement = Roo.SplitBar.RIGHT;
+        this.split.orientation = Roo.SplitBar.HORIZONTAL;
+        this.split.el.addClass("x-layout-split-h");
+    }
+    var size = config.initialSize || config.width;
+    if(typeof size != "undefined"){
+        this.el.setWidth(size);
+    }
+};
+Roo.extend(Roo.EastLayoutRegion, Roo.SplitLayoutRegion, {
+    orientation: Roo.SplitBar.HORIZONTAL,
+    getBox : function(){
+        if(this.collapsed){
+            return this.collapsedEl.getBox();
+        }
+        var box = this.el.getBox();
+        if(this.split){
+            var sw = this.split.el.getWidth();
+            box.width += sw;
+            box.x -= sw;
+        }
+        return box;
+    },
+
+    updateBox : function(box){
+        if(this.split && !this.collapsed){
+            var sw = this.split.el.getWidth();
+            box.width -= sw;
+            this.split.el.setLeft(box.x);
+            this.split.el.setTop(box.y);
+            this.split.el.setHeight(box.height);
+            box.x += sw;
+        }
+        if(this.collapsed){
+            this.updateBody(null, box.height);
+        }
+        Roo.LayoutRegion.prototype.updateBox.call(this, box);
+    }
+});
+
+Roo.WestLayoutRegion = function(mgr, config){
+    Roo.SplitLayoutRegion.call(this, mgr, config, "west", "w-resize");
+    if(this.split){
+        this.split.placement = Roo.SplitBar.LEFT;
+        this.split.orientation = Roo.SplitBar.HORIZONTAL;
+        this.split.el.addClass("x-layout-split-h");
+    }
+    var size = config.initialSize || config.width;
+    if(typeof size != "undefined"){
+        this.el.setWidth(size);
+    }
+};
+Roo.extend(Roo.WestLayoutRegion, Roo.SplitLayoutRegion, {
+    orientation: Roo.SplitBar.HORIZONTAL,
+    getBox : function(){
+        if(this.collapsed){
+            return this.collapsedEl.getBox();
+        }
+        var box = this.el.getBox();
+        if(this.split){
+            box.width += this.split.el.getWidth();
+        }
+        return box;
+    },
+    
+    updateBox : function(box){
+        if(this.split && !this.collapsed){
+            var sw = this.split.el.getWidth();
+            box.width -= sw;
+            this.split.el.setLeft(box.x+box.width);
+            this.split.el.setTop(box.y);
+            this.split.el.setHeight(box.height);
+        }
+        if(this.collapsed){
+            this.updateBody(null, box.height);
+        }
+        Roo.LayoutRegion.prototype.updateBox.call(this, box);
+    }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+ 
+/*
+ * Private internal class for reading and applying state
+ */
+Roo.LayoutStateManager = function(layout){
+     // default empty state
+     this.state = {
+        north: {},
+        south: {},
+        east: {},
+        west: {}       
+    };
+};
+
+Roo.LayoutStateManager.prototype = {
+    init : function(layout, provider){
+        this.provider = provider;
+        var state = provider.get(layout.id+"-layout-state");
+        if(state){
+            var wasUpdating = layout.isUpdating();
+            if(!wasUpdating){
+                layout.beginUpdate();
+            }
+            for(var key in state){
+                if(typeof state[key] != "function"){
+                    var rstate = state[key];
+                    var r = layout.getRegion(key);
+                    if(r && rstate){
+                        if(rstate.size){
+                            r.resizeTo(rstate.size);
+                        }
+                        if(rstate.collapsed == true){
+                            r.collapse(true);
+                        }else{
+                            r.expand(null, true);
+                        }
+                    }
+                }
+            }
+            if(!wasUpdating){
+                layout.endUpdate();
+            }
+            this.state = state; 
+        }
+        this.layout = layout;
+        layout.on("regionresized", this.onRegionResized, this);
+        layout.on("regioncollapsed", this.onRegionCollapsed, this);
+        layout.on("regionexpanded", this.onRegionExpanded, this);
+    },
+    
+    storeState : function(){
+        this.provider.set(this.layout.id+"-layout-state", this.state);
+    },
+    
+    onRegionResized : function(region, newSize){
+        this.state[region.getPosition()].size = newSize;
+        this.storeState();
+    },
+    
+    onRegionCollapsed : function(region){
+        this.state[region.getPosition()].collapsed = true;
+        this.storeState();
+    },
+    
+    onRegionExpanded : function(region){
+        this.state[region.getPosition()].collapsed = false;
+        this.storeState();
+    }
+};/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.ContentPanel
+ * @extends Roo.util.Observable
+ * A basic ContentPanel element.
+ * @cfg {Boolean}   fitToFrame    True for this panel to adjust its size to fit when the region resizes  (defaults to false)
+ * @cfg {Boolean}   fitContainer   When using {@link #fitToFrame} and {@link #resizeEl}, you can also fit the parent container  (defaults to false)
+ * @cfg {Boolean/Object} autoCreate True to auto generate the DOM element for this panel, or a {@link Roo.DomHelper} config of the element to create
+ * @cfg {Boolean}   closable      True if the panel can be closed/removed
+ * @cfg {Boolean}   background    True if the panel should not be activated when it is added (defaults to false)
+ * @cfg {String/HTMLElement/Element} resizeEl An element to resize if {@link #fitToFrame} is true (instead of this panel's element)
+ * @cfg {Toolbar}   toolbar       A toolbar for this panel
+ * @cfg {Boolean} autoScroll    True to scroll overflow in this panel (use with {@link #fitToFrame})
+ * @cfg {String} title          The title for this panel
+ * @cfg {Array} adjustments     Values to <b>add</b> to the width/height when doing a {@link #fitToFrame} (default is [0, 0])
+ * @cfg {String} url            Calls {@link #setUrl} with this value
+ * @cfg {String} region         (center|north|south|east|west) which region to put this panel on (when used with xtype constructors)
+ * @cfg {String/Object} params  When used with {@link #url}, calls {@link #setUrl} with this value
+ * @cfg {Boolean} loadOnce      When used with {@link #url}, calls {@link #setUrl} with this value
+ * @cfg {String}    content        Raw content to fill content panel with (uses setContent on construction.)
+
+ * @constructor
+ * Create a new ContentPanel.
+ * @param {String/HTMLElement/Roo.Element} el The container element for this panel
+ * @param {String/Object} config A string to set only the title or a config object
+ * @param {String} content (optional) Set the HTML content for this panel
+ * @param {String} region (optional) Used by xtype constructors to add to regions. (values center,east,west,south,north)
+ */
+Roo.ContentPanel = function(el, config, content){
+    
+     
+    /*
+    if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory
+        config = el;
+        el = Roo.id();
+    }
+    if (config && config.parentLayout) { 
+        el = config.parentLayout.el.createChild(); 
+    }
+    */
+    if(el.autoCreate){ // xtype is available if this is called from factory
+        config = el;
+        el = Roo.id();
+    }
+    this.el = Roo.get(el);
+    if(!this.el && config && config.autoCreate){
+        if(typeof config.autoCreate == "object"){
+            if(!config.autoCreate.id){
+                config.autoCreate.id = config.id||el;
+            }
+            this.el = Roo.DomHelper.append(document.body,
+                        config.autoCreate, true);
+        }else{
+            this.el = Roo.DomHelper.append(document.body,
+                        {tag: "div", cls: "x-layout-inactive-content", id: config.id||el}, true);
+        }
+    }
+    this.closable = false;
+    this.loaded = false;
+    this.active = false;
+    if(typeof config == "string"){
+        this.title = config;
+    }else{
+        Roo.apply(this, config);
+    }
+    
+    if (this.toolbar && !this.toolbar.el && this.toolbar.xtype) {
+        this.wrapEl = this.el.wrap();
+        this.toolbar.container = this.el.insertSibling(false, 'before');
+        this.toolbar = new Roo.Toolbar(this.toolbar);
+    }
+    
+    // xtype created footer. - not sure if will work as we normally have to render first..
+    if (this.footer && !this.footer.el && this.footer.xtype) {
+        if (!this.wrapEl) {
+            this.wrapEl = this.el.wrap();
+        }
+    
+        this.footer.container = this.wrapEl.createChild();
+         
+        this.footer = Roo.factory(this.footer, Roo);
+        
+    }
+    
+    if(this.resizeEl){
+        this.resizeEl = Roo.get(this.resizeEl, true);
+    }else{
+        this.resizeEl = this.el;
+    }
+    // handle view.xtype
+    
+ 
+    
+    
+    this.addEvents({
+        /**
+         * @event activate
+         * Fires when this panel is activated. 
+         * @param {Roo.ContentPanel} this
+         */
+        "activate" : true,
+        /**
+         * @event deactivate
+         * Fires when this panel is activated. 
+         * @param {Roo.ContentPanel} this
+         */
+        "deactivate" : true,
+
+        /**
+         * @event resize
+         * Fires when this panel is resized if fitToFrame is true.
+         * @param {Roo.ContentPanel} this
+         * @param {Number} width The width after any component adjustments
+         * @param {Number} height The height after any component adjustments
+         */
+        "resize" : true,
+        
+         /**
+         * @event render
+         * Fires when this tab is created
+         * @param {Roo.ContentPanel} this
+         */
+        "render" : true
+        
+        
+        
+    });
+    
+
+    
+    
+    if(this.autoScroll){
+        this.resizeEl.setStyle("overflow", "auto");
+    } else {
+        // fix randome scrolling
+        this.el.on('scroll', function() {
+            Roo.log('fix random scolling');
+            this.scrollTo('top',0); 
+        });
+    }
+    content = content || this.content;
+    if(content){
+        this.setContent(content);
+    }
+    if(config && config.url){
+        this.setUrl(this.url, this.params, this.loadOnce);
+    }
+    
+    
+    
+    Roo.ContentPanel.superclass.constructor.call(this);
+    
+    if (this.view && typeof(this.view.xtype) != 'undefined') {
+        this.view.el = this.el.appendChild(document.createElement("div"));
+        this.view = Roo.factory(this.view); 
+        this.view.render  &&  this.view.render(false, '');  
+    }
+    
+    
+    this.fireEvent('render', this);
+};
+
+Roo.extend(Roo.ContentPanel, Roo.util.Observable, {
+    tabTip:'',
+    setRegion : function(region){
+        this.region = region;
+        if(region){
+           this.el.replaceClass("x-layout-inactive-content", "x-layout-active-content");
+        }else{
+           this.el.replaceClass("x-layout-active-content", "x-layout-inactive-content");
+        } 
+    },
+    
+    /**
+     * Returns the toolbar for this Panel if one was configured. 
+     * @return {Roo.Toolbar} 
+     */
+    getToolbar : function(){
+        return this.toolbar;
+    },
+    
+    setActiveState : function(active){
+        this.active = active;
+        if(!active){
+            this.fireEvent("deactivate", this);
+        }else{
+            this.fireEvent("activate", this);
+        }
+    },
+    /**
+     * Updates this panel's element
+     * @param {String} content The new content
+     * @param {Boolean} loadScripts (optional) true to look for and process scripts
+    */
+    setContent : function(content, loadScripts){
+        this.el.update(content, loadScripts);
+    },
+
+    ignoreResize : function(w, h){
+        if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
+            return true;
+        }else{
+            this.lastSize = {width: w, height: h};
+            return false;
+        }
+    },
+    /**
+     * Get the {@link Roo.UpdateManager} for this panel. Enables you to perform Ajax updates.
+     * @return {Roo.UpdateManager} The UpdateManager
+     */
+    getUpdateManager : function(){
+        return this.el.getUpdateManager();
+    },
+     /**
+     * Loads this content panel immediately with content from XHR. Note: to delay loading until the panel is activated, use {@link #setUrl}.
+     * @param {Object/String/Function} url The url for this request or a function to call to get the url or a config object containing any of the following options:
+<pre><code>
+panel.load({
+    url: "your-url.php",
+    params: {param1: "foo", param2: "bar"}, // or a URL encoded string
+    callback: yourFunction,
+    scope: yourObject, //(optional scope)
+    discardUrl: false,
+    nocache: false,
+    text: "Loading...",
+    timeout: 30,
+    scripts: false
+});
+</code></pre>
+     * The only required property is <i>url</i>. The optional properties <i>nocache</i>, <i>text</i> and <i>scripts</i>
+     * are shorthand for <i>disableCaching</i>, <i>indicatorText</i> and <i>loadScripts</i> and are used to set their associated property on this panel UpdateManager instance.
+     * @param {String/Object} params (optional) The parameters to pass as either a URL encoded string "param1=1&amp;param2=2" or an object {param1: 1, param2: 2}
+     * @param {Function} callback (optional) Callback when transaction is complete -- called with signature (oElement, bSuccess, oResponse)
+     * @param {Boolean} discardUrl (optional) By default when you execute an update the defaultUrl is changed to the last used URL. If true, it will not store the URL.
+     * @return {Roo.ContentPanel} this
+     */
+    load : function(){
+        var um = this.el.getUpdateManager();
+        um.update.apply(um, arguments);
+        return this;
+    },
+
+
+    /**
+     * Set a URL to be used to load the content for this panel. When this panel is activated, the content will be loaded from that URL.
+     * @param {String/Function} url The URL to load the content from or a function to call to get the URL
+     * @param {String/Object} params (optional) The string params for the update call or an object of the params. See {@link Roo.UpdateManager#update} for more details. (Defaults to null)
+     * @param {Boolean} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this panel is activated. (Defaults to false)
+     * @return {Roo.UpdateManager} The UpdateManager
+     */
+    setUrl : function(url, params, loadOnce){
+        if(this.refreshDelegate){
+            this.removeListener("activate", this.refreshDelegate);
+        }
+        this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
+        this.on("activate", this.refreshDelegate);
+        return this.el.getUpdateManager();
+    },
+    
+    _handleRefresh : function(url, params, loadOnce){
+        if(!loadOnce || !this.loaded){
+            var updater = this.el.getUpdateManager();
+            updater.update(url, params, this._setLoaded.createDelegate(this));
+        }
+    },
+    
+    _setLoaded : function(){
+        this.loaded = true;
+    }, 
+    
+    /**
+     * Returns this panel's id
+     * @return {String} 
+     */
+    getId : function(){
+        return this.el.id;
+    },
+    
+    /** 
+     * Returns this panel's element - used by regiosn to add.
+     * @return {Roo.Element} 
+     */
+    getEl : function(){
+        return this.wrapEl || this.el;
+    },
+    
+    adjustForComponents : function(width, height)
+    {
+        //Roo.log('adjustForComponents ');
+        if(this.resizeEl != this.el){
+            width -= this.el.getFrameWidth('lr');
+            height -= this.el.getFrameWidth('tb');
+        }
+        if(this.toolbar){
+            var te = this.toolbar.getEl();
+            height -= te.getHeight();
+            te.setWidth(width);
+        }
+        if(this.footer){
+            var te = this.footer.getEl();
+            Roo.log("footer:" + te.getHeight());
+            
+            height -= te.getHeight();
+            te.setWidth(width);
+        }
+        
+        
+        if(this.adjustments){
+            width += this.adjustments[0];
+            height += this.adjustments[1];
+        }
+        return {"width": width, "height": height};
+    },
+    
+    setSize : function(width, height){
+        if(this.fitToFrame && !this.ignoreResize(width, height)){
+            if(this.fitContainer && this.resizeEl != this.el){
+                this.el.setSize(width, height);
+            }
+            var size = this.adjustForComponents(width, height);
+            this.resizeEl.setSize(this.autoWidth ? "auto" : size.width, this.autoHeight ? "auto" : size.height);
+            this.fireEvent('resize', this, size.width, size.height);
+        }
+    },
+    
+    /**
+     * Returns this panel's title
+     * @return {String} 
+     */
+    getTitle : function(){
+        return this.title;
+    },
+    
+    /**
+     * Set this panel's title
+     * @param {String} title
+     */
+    setTitle : function(title){
+        this.title = title;
+        if(this.region){
+            this.region.updatePanelTitle(this, title);
+        }
+    },
+    
+    /**
+     * Returns true is this panel was configured to be closable
+     * @return {Boolean} 
+     */
+    isClosable : function(){
+        return this.closable;
+    },
+    
+    beforeSlide : function(){
+        this.el.clip();
+        this.resizeEl.clip();
+    },
+    
+    afterSlide : function(){
+        this.el.unclip();
+        this.resizeEl.unclip();
+    },
+    
+    /**
+     *   Force a content refresh from the URL specified in the {@link #setUrl} method.
+     *   Will fail silently if the {@link #setUrl} method has not been called.
+     *   This does not activate the panel, just updates its content.
+     */
+    refresh : function(){
+        if(this.refreshDelegate){
+           this.loaded = false;
+           this.refreshDelegate();
+        }
+    },
+    
+    /**
+     * Destroys this panel
+     */
+    destroy : function(){
+        this.el.removeAllListeners();
+        var tempEl = document.createElement("span");
+        tempEl.appendChild(this.el.dom);
+        tempEl.innerHTML = "";
+        this.el.remove();
+        this.el = null;
+    },
+    
+    /**
+     * form - if the content panel contains a form - this is a reference to it.
+     * @type {Roo.form.Form}
+     */
+    form : false,
+    /**
+     * view - if the content panel contains a view (Roo.DatePicker / Roo.View / Roo.JsonView)
+     *    This contains a reference to it.
+     * @type {Roo.View}
+     */
+    view : false,
+    
+      /**
+     * Adds a xtype elements to the panel - currently only supports Forms, View, JsonView.
+     * <pre><code>
+
+layout.addxtype({
+       xtype : 'Form',
+       items: [ .... ]
+   }
+);
+
+</code></pre>
+     * @param {Object} cfg Xtype definition of item to add.
+     */
+    
+    addxtype : function(cfg) {
+        // add form..
+        if (cfg.xtype.match(/^Form$/)) {
+            
+            var el;
+            //if (this.footer) {
+            //    el = this.footer.container.insertSibling(false, 'before');
+            //} else {
+                el = this.el.createChild();
+            //}
+
+            this.form = new  Roo.form.Form(cfg);
+            
+            
+            if ( this.form.allItems.length) {
+                this.form.render(el.dom);
+            }
+            return this.form;
+        }
+        // should only have one of theses..
+        if ([ 'View', 'JsonView', 'DatePicker'].indexOf(cfg.xtype) > -1) {
+            // views.. should not be just added - used named prop 'view''
+            
+            cfg.el = this.el.appendChild(document.createElement("div"));
+            // factory?
+            
+            var ret = new Roo.factory(cfg);
+             
+             ret.render && ret.render(false, ''); // render blank..
+            this.view = ret;
+            return ret;
+        }
+        return false;
+    }
+});
+
+/**
+ * @class Roo.GridPanel
+ * @extends Roo.ContentPanel
+ * @constructor
+ * Create a new GridPanel.
+ * @param {Roo.grid.Grid} grid The grid for this panel
+ * @param {String/Object} config A string to set only the panel's title, or a config object
+ */
+Roo.GridPanel = function(grid, config){
+    
+  
+    this.wrapper = Roo.DomHelper.append(document.body, // wrapper for IE7 strict & safari scroll issue
+        {tag: "div", cls: "x-layout-grid-wrapper x-layout-inactive-content"}, true);
+        
+    this.wrapper.dom.appendChild(grid.getGridEl().dom);
+    
+    Roo.GridPanel.superclass.constructor.call(this, this.wrapper, config);
+    
+    if(this.toolbar){
+        this.toolbar.el.insertBefore(this.wrapper.dom.firstChild);
+    }
+    // xtype created footer. - not sure if will work as we normally have to render first..
+    if (this.footer && !this.footer.el && this.footer.xtype) {
+        
+        this.footer.container = this.grid.getView().getFooterPanel(true);
+        this.footer.dataSource = this.grid.dataSource;
+        this.footer = Roo.factory(this.footer, Roo);
+        
+    }
+    
+    grid.monitorWindowResize = false; // turn off autosizing
+    grid.autoHeight = false;
+    grid.autoWidth = false;
+    this.grid = grid;
+    this.grid.getGridEl().replaceClass("x-layout-inactive-content", "x-layout-component-panel");
+};
+
+Roo.extend(Roo.GridPanel, Roo.ContentPanel, {
+    getId : function(){
+        return this.grid.id;
+    },
+    
+    /**
+     * Returns the grid for this panel
+     * @return {Roo.grid.Grid} 
+     */
+    getGrid : function(){
+        return this.grid;    
+    },
+    
+    setSize : function(width, height){
+        if(!this.ignoreResize(width, height)){
+            var grid = this.grid;
+            var size = this.adjustForComponents(width, height);
+            grid.getGridEl().setSize(size.width, size.height);
+            grid.autoSize();
+        }
+    },
+    
+    beforeSlide : function(){
+        this.grid.getView().scroller.clip();
+    },
+    
+    afterSlide : function(){
+        this.grid.getView().scroller.unclip();
+    },
+    
+    destroy : function(){
+        this.grid.destroy();
+        delete this.grid;
+        Roo.GridPanel.superclass.destroy.call(this); 
+    }
+});
+
+
+/**
+ * @class Roo.NestedLayoutPanel
+ * @extends Roo.ContentPanel
+ * @constructor
+ * Create a new NestedLayoutPanel.
+ * 
+ * 
+ * @param {Roo.BorderLayout} layout The layout for this panel
+ * @param {String/Object} config A string to set only the title or a config object
+ */
+Roo.NestedLayoutPanel = function(layout, config)
+{
+    // construct with only one argument..
+    /* FIXME - implement nicer consturctors
+    if (layout.layout) {
+        config = layout;
+        layout = config.layout;
+        delete config.layout;
+    }
+    if (layout.xtype && !layout.getEl) {
+        // then layout needs constructing..
+        layout = Roo.factory(layout, Roo);
+    }
+    */
+    
+    
+    Roo.NestedLayoutPanel.superclass.constructor.call(this, layout.getEl(), config);
+    
+    layout.monitorWindowResize = false; // turn off autosizing
+    this.layout = layout;
+    this.layout.getEl().addClass("x-layout-nested-layout");
+    
+    
+    
+    
+};
+
+Roo.extend(Roo.NestedLayoutPanel, Roo.ContentPanel, {
+
+    setSize : function(width, height){
+        if(!this.ignoreResize(width, height)){
+            var size = this.adjustForComponents(width, height);
+            var el = this.layout.getEl();
+            el.setSize(size.width, size.height);
+            var touch = el.dom.offsetWidth;
+            this.layout.layout();
+            // ie requires a double layout on the first pass
+            if(Roo.isIE && !this.initialized){
+                this.initialized = true;
+                this.layout.layout();
+            }
+        }
+    },
+    
+    // activate all subpanels if not currently active..
+    
+    setActiveState : function(active){
+        this.active = active;
+        if(!active){
+            this.fireEvent("deactivate", this);
+            return;
+        }
+        
+        this.fireEvent("activate", this);
+        // not sure if this should happen before or after..
+        if (!this.layout) {
+            return; // should not happen..
+        }
+        var reg = false;
+        for (var r in this.layout.regions) {
+            reg = this.layout.getRegion(r);
+            if (reg.getActivePanel()) {
+                //reg.showPanel(reg.getActivePanel()); // force it to activate.. 
+                reg.setActivePanel(reg.getActivePanel());
+                continue;
+            }
+            if (!reg.panels.length) {
+                continue;
+            }
+            reg.showPanel(reg.getPanel(0));
+        }
+        
+        
+        
+        
+    },
+    
+    /**
+     * Returns the nested BorderLayout for this panel
+     * @return {Roo.BorderLayout} 
+     */
+    getLayout : function(){
+        return this.layout;
+    },
+    
+     /**
+     * Adds a xtype elements to the layout of the nested panel
+     * <pre><code>
+
+panel.addxtype({
+       xtype : 'ContentPanel',
+       region: 'west',
+       items: [ .... ]
+   }
+);
+
+panel.addxtype({
+        xtype : 'NestedLayoutPanel',
+        region: 'west',
+        layout: {
+           center: { },
+           west: { }   
+        },
+        items : [ ... list of content panels or nested layout panels.. ]
+   }
+);
+</code></pre>
+     * @param {Object} cfg Xtype definition of item to add.
+     */
+    addxtype : function(cfg) {
+        return this.layout.addxtype(cfg);
+    
+    }
+});
+
+Roo.ScrollPanel = function(el, config, content){
+    config = config || {};
+    config.fitToFrame = true;
+    Roo.ScrollPanel.superclass.constructor.call(this, el, config, content);
+    
+    this.el.dom.style.overflow = "hidden";
+    var wrap = this.el.wrap({cls: "x-scroller x-layout-inactive-content"});
+    this.el.removeClass("x-layout-inactive-content");
+    this.el.on("mousewheel", this.onWheel, this);
+
+    var up = wrap.createChild({cls: "x-scroller-up", html: "&#160;"}, this.el.dom);
+    var down = wrap.createChild({cls: "x-scroller-down", html: "&#160;"});
+    up.unselectable(); down.unselectable();
+    up.on("click", this.scrollUp, this);
+    down.on("click", this.scrollDown, this);
+    up.addClassOnOver("x-scroller-btn-over");
+    down.addClassOnOver("x-scroller-btn-over");
+    up.addClassOnClick("x-scroller-btn-click");
+    down.addClassOnClick("x-scroller-btn-click");
+    this.adjustments = [0, -(up.getHeight() + down.getHeight())];
+
+    this.resizeEl = this.el;
+    this.el = wrap; this.up = up; this.down = down;
+};
+
+Roo.extend(Roo.ScrollPanel, Roo.ContentPanel, {
+    increment : 100,
+    wheelIncrement : 5,
+    scrollUp : function(){
+        this.resizeEl.scroll("up", this.increment, {callback: this.afterScroll, scope: this});
+    },
+
+    scrollDown : function(){
+        this.resizeEl.scroll("down", this.increment, {callback: this.afterScroll, scope: this});
+    },
+
+    afterScroll : function(){
+        var el = this.resizeEl;
+        var t = el.dom.scrollTop, h = el.dom.scrollHeight, ch = el.dom.clientHeight;
+        this.up[t == 0 ? "addClass" : "removeClass"]("x-scroller-btn-disabled");
+        this.down[h - t <= ch ? "addClass" : "removeClass"]("x-scroller-btn-disabled");
+    },
+
+    setSize : function(){
+        Roo.ScrollPanel.superclass.setSize.apply(this, arguments);
+        this.afterScroll();
+    },
+
+    onWheel : function(e){
+        var d = e.getWheelDelta();
+        this.resizeEl.dom.scrollTop -= (d*this.wheelIncrement);
+        this.afterScroll();
+        e.stopEvent();
+    },
+
+    setContent : function(content, loadScripts){
+        this.resizeEl.update(content, loadScripts);
+    }
+
+});
+
+
+
+
+
+
+
+
+
+/**
+ * @class Roo.TreePanel
+ * @extends Roo.ContentPanel
+ * @constructor
+ * Create a new TreePanel. - defaults to fit/scoll contents.
+ * @param {String/Object} config A string to set only the panel's title, or a config object
+ * @cfg {Roo.tree.TreePanel} tree The tree TreePanel, with config etc.
+ */
+Roo.TreePanel = function(config){
+    var el = config.el;
+    var tree = config.tree;
+    delete config.tree; 
+    delete config.el; // hopefull!
+    
+    // wrapper for IE7 strict & safari scroll issue
+    
+    var treeEl = el.createChild();
+    config.resizeEl = treeEl;
+    
+    
+    
+    Roo.TreePanel.superclass.constructor.call(this, el, config);
+ 
+ 
+    this.tree = new Roo.tree.TreePanel(treeEl , tree);
+    //console.log(tree);
+    this.on('activate', function()
+    {
+        if (this.tree.rendered) {
+            return;
+        }
+        //console.log('render tree');
+        this.tree.render();
+    });
+    // this should not be needed.. - it's actually the 'el' that resizes?
+    // actuall it breaks the containerScroll - dragging nodes auto scroll at top
+    
+    //this.on('resize',  function (cp, w, h) {
+    //        this.tree.innerCt.setWidth(w);
+    //        this.tree.innerCt.setHeight(h);
+    //        //this.tree.innerCt.setStyle('overflow-y', 'auto');
+    //});
+
+        
+    
+};
+
+Roo.extend(Roo.TreePanel, Roo.ContentPanel, {   
+    fitToFrame : true,
+    autoScroll : true
+});
+
+
+
+
+
+
+
+
+
+
+
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+
+/**
+ * @class Roo.ReaderLayout
+ * @extends Roo.BorderLayout
+ * This is a pre-built layout that represents a classic, 5-pane application.  It consists of a header, a primary
+ * center region containing two nested regions (a top one for a list view and one for item preview below),
+ * and regions on either side that can be used for navigation, application commands, informational displays, etc.
+ * The setup and configuration work exactly the same as it does for a {@link Roo.BorderLayout} - this class simply
+ * expedites the setup of the overall layout and regions for this common application style.
+ * Example:
+ <pre><code>
+var reader = new Roo.ReaderLayout();
+var CP = Roo.ContentPanel;  // shortcut for adding
+
+reader.beginUpdate();
+reader.add("north", new CP("north", "North"));
+reader.add("west", new CP("west", {title: "West"}));
+reader.add("east", new CP("east", {title: "East"}));
+
+reader.regions.listView.add(new CP("listView", "List"));
+reader.regions.preview.add(new CP("preview", "Preview"));
+reader.endUpdate();
+</code></pre>
+* @constructor
+* Create a new ReaderLayout
+* @param {Object} config Configuration options
+* @param {String/HTMLElement/Element} container (optional) The container this layout is bound to (defaults to
+* document.body if omitted)
+*/
+Roo.ReaderLayout = function(config, renderTo){
+    var c = config || {size:{}};
+    Roo.ReaderLayout.superclass.constructor.call(this, renderTo || document.body, {
+        north: c.north !== false ? Roo.apply({
+            split:false,
+            initialSize: 32,
+            titlebar: false
+        }, c.north) : false,
+        west: c.west !== false ? Roo.apply({
+            split:true,
+            initialSize: 200,
+            minSize: 175,
+            maxSize: 400,
+            titlebar: true,
+            collapsible: true,
+            animate: true,
+            margins:{left:5,right:0,bottom:5,top:5},
+            cmargins:{left:5,right:5,bottom:5,top:5}
+        }, c.west) : false,
+        east: c.east !== false ? Roo.apply({
+            split:true,
+            initialSize: 200,
+            minSize: 175,
+            maxSize: 400,
+            titlebar: true,
+            collapsible: true,
+            animate: true,
+            margins:{left:0,right:5,bottom:5,top:5},
+            cmargins:{left:5,right:5,bottom:5,top:5}
+        }, c.east) : false,
+        center: Roo.apply({
+            tabPosition: 'top',
+            autoScroll:false,
+            closeOnTab: true,
+            titlebar:false,
+            margins:{left:c.west!==false ? 0 : 5,right:c.east!==false ? 0 : 5,bottom:5,top:2}
+        }, c.center)
+    });
+
+    this.el.addClass('x-reader');
+
+    this.beginUpdate();
+
+    var inner = new Roo.BorderLayout(Roo.get(document.body).createChild(), {
+        south: c.preview !== false ? Roo.apply({
+            split:true,
+            initialSize: 200,
+            minSize: 100,
+            autoScroll:true,
+            collapsible:true,
+            titlebar: true,
+            cmargins:{top:5,left:0, right:0, bottom:0}
+        }, c.preview) : false,
+        center: Roo.apply({
+            autoScroll:false,
+            titlebar:false,
+            minHeight:200
+        }, c.listView)
+    });
+    this.add('center', new Roo.NestedLayoutPanel(inner,
+            Roo.apply({title: c.mainTitle || '',tabTip:''},c.innerPanelCfg)));
+
+    this.endUpdate();
+
+    this.regions.preview = inner.getRegion('south');
+    this.regions.listView = inner.getRegion('center');
+};
+
+Roo.extend(Roo.ReaderLayout, Roo.BorderLayout);/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+/**
+ * @class Roo.grid.Grid
+ * @extends Roo.util.Observable
+ * This class represents the primary interface of a component based grid control.
+ * <br><br>Usage:<pre><code>
+ var grid = new Roo.grid.Grid("my-container-id", {
+     ds: myDataStore,
+     cm: myColModel,
+     selModel: mySelectionModel,
+     autoSizeColumns: true,
+     monitorWindowResize: false,
+     trackMouseOver: true
+ });
+ // set any options
+ grid.render();
+ * </code></pre>
+ * <b>Common Problems:</b><br/>
+ * - Grid does not resize properly when going smaller: Setting overflow hidden on the container
+ * element will correct this<br/>
+ * - If you get el.style[camel]= NaNpx or -2px or something related, be certain you have given your container element
+ * dimensions. The grid adapts to your container's size, if your container has no size defined then the results
+ * are unpredictable.<br/>
+ * - Do not render the grid into an element with display:none. Try using visibility:hidden. Otherwise there is no way for the
+ * grid to calculate dimensions/offsets.<br/>
+  * @constructor
+ * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
+ * The container MUST have some type of size defined for the grid to fill. The container will be
+ * automatically set to position relative if it isn't already.
+ * @param {Object} config A config object that sets properties on this grid.
+ */
+Roo.grid.Grid = function(container, config){
+	// initialize the container
+	this.container = Roo.get(container);
+	this.container.update("");
+	this.container.setStyle("overflow", "hidden");
+    this.container.addClass('x-grid-container');
+
+    this.id = this.container.id;
+
+    Roo.apply(this, config);
+    // check and correct shorthanded configs
+    if(this.ds){
+        this.dataSource = this.ds;
+        delete this.ds;
+    }
+    if(this.cm){
+        this.colModel = this.cm;
+        delete this.cm;
+    }
+    if(this.sm){
+        this.selModel = this.sm;
+        delete this.sm;
+    }
+
+    if (this.selModel) {
+        this.selModel = Roo.factory(this.selModel, Roo.grid);
+        this.sm = this.selModel;
+        this.sm.xmodule = this.xmodule || false;
+    }
+    if (typeof(this.colModel.config) == 'undefined') {
+        this.colModel = new Roo.grid.ColumnModel(this.colModel);
+        this.cm = this.colModel;
+        this.cm.xmodule = this.xmodule || false;
+    }
+    if (this.dataSource) {
+        this.dataSource= Roo.factory(this.dataSource, Roo.data);
+        this.ds = this.dataSource;
+        this.ds.xmodule = this.xmodule || false;
+         
+    }
+    
+    
+    
+    if(this.width){
+        this.container.setWidth(this.width);
+    }
+
+    if(this.height){
+        this.container.setHeight(this.height);
+    }
+    /** @private */
+	this.addEvents({
+        // raw events
+        /**
+         * @event click
+         * The raw click event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "click" : true,
+        /**
+         * @event dblclick
+         * The raw dblclick event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "dblclick" : true,
+        /**
+         * @event contextmenu
+         * The raw contextmenu event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "contextmenu" : true,
+        /**
+         * @event mousedown
+         * The raw mousedown event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "mousedown" : true,
+        /**
+         * @event mouseup
+         * The raw mouseup event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "mouseup" : true,
+        /**
+         * @event mouseover
+         * The raw mouseover event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "mouseover" : true,
+        /**
+         * @event mouseout
+         * The raw mouseout event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "mouseout" : true,
+        /**
+         * @event keypress
+         * The raw keypress event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "keypress" : true,
+        /**
+         * @event keydown
+         * The raw keydown event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "keydown" : true,
+
+        // custom events
+
+        /**
+         * @event cellclick
+         * Fires when a cell is clicked
+         * @param {Grid} this
+         * @param {Number} rowIndex
+         * @param {Number} columnIndex
+         * @param {Roo.EventObject} e
+         */
+        "cellclick" : true,
+        /**
+         * @event celldblclick
+         * Fires when a cell is double clicked
+         * @param {Grid} this
+         * @param {Number} rowIndex
+         * @param {Number} columnIndex
+         * @param {Roo.EventObject} e
+         */
+        "celldblclick" : true,
+        /**
+         * @event rowclick
+         * Fires when a row is clicked
+         * @param {Grid} this
+         * @param {Number} rowIndex
+         * @param {Roo.EventObject} e
+         */
+        "rowclick" : true,
+        /**
+         * @event rowdblclick
+         * Fires when a row is double clicked
+         * @param {Grid} this
+         * @param {Number} rowIndex
+         * @param {Roo.EventObject} e
+         */
+        "rowdblclick" : true,
+        /**
+         * @event headerclick
+         * Fires when a header is clicked
+         * @param {Grid} this
+         * @param {Number} columnIndex
+         * @param {Roo.EventObject} e
+         */
+        "headerclick" : true,
+        /**
+         * @event headerdblclick
+         * Fires when a header cell is double clicked
+         * @param {Grid} this
+         * @param {Number} columnIndex
+         * @param {Roo.EventObject} e
+         */
+        "headerdblclick" : true,
+        /**
+         * @event rowcontextmenu
+         * Fires when a row is right clicked
+         * @param {Grid} this
+         * @param {Number} rowIndex
+         * @param {Roo.EventObject} e
+         */
+        "rowcontextmenu" : true,
+        /**
+         * @event cellcontextmenu
+         * Fires when a cell is right clicked
+         * @param {Grid} this
+         * @param {Number} rowIndex
+         * @param {Number} cellIndex
+         * @param {Roo.EventObject} e
+         */
+         "cellcontextmenu" : true,
+        /**
+         * @event headercontextmenu
+         * Fires when a header is right clicked
+         * @param {Grid} this
+         * @param {Number} columnIndex
+         * @param {Roo.EventObject} e
+         */
+        "headercontextmenu" : true,
+        /**
+         * @event bodyscroll
+         * Fires when the body element is scrolled
+         * @param {Number} scrollLeft
+         * @param {Number} scrollTop
+         */
+        "bodyscroll" : true,
+        /**
+         * @event columnresize
+         * Fires when the user resizes a column
+         * @param {Number} columnIndex
+         * @param {Number} newSize
+         */
+        "columnresize" : true,
+        /**
+         * @event columnmove
+         * Fires when the user moves a column
+         * @param {Number} oldIndex
+         * @param {Number} newIndex
+         */
+        "columnmove" : true,
+        /**
+         * @event startdrag
+         * Fires when row(s) start being dragged
+         * @param {Grid} this
+         * @param {Roo.GridDD} dd The drag drop object
+         * @param {event} e The raw browser event
+         */
+        "startdrag" : true,
+        /**
+         * @event enddrag
+         * Fires when a drag operation is complete
+         * @param {Grid} this
+         * @param {Roo.GridDD} dd The drag drop object
+         * @param {event} e The raw browser event
+         */
+        "enddrag" : true,
+        /**
+         * @event dragdrop
+         * Fires when dragged row(s) are dropped on a valid DD target
+         * @param {Grid} this
+         * @param {Roo.GridDD} dd The drag drop object
+         * @param {String} targetId The target drag drop object
+         * @param {event} e The raw browser event
+         */
+        "dragdrop" : true,
+        /**
+         * @event dragover
+         * Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
+         * @param {Grid} this
+         * @param {Roo.GridDD} dd The drag drop object
+         * @param {String} targetId The target drag drop object
+         * @param {event} e The raw browser event
+         */
+        "dragover" : true,
+        /**
+         * @event dragenter
+         *  Fires when the dragged row(s) first cross another DD target while being dragged
+         * @param {Grid} this
+         * @param {Roo.GridDD} dd The drag drop object
+         * @param {String} targetId The target drag drop object
+         * @param {event} e The raw browser event
+         */
+        "dragenter" : true,
+        /**
+         * @event dragout
+         * Fires when the dragged row(s) leave another DD target while being dragged
+         * @param {Grid} this
+         * @param {Roo.GridDD} dd The drag drop object
+         * @param {String} targetId The target drag drop object
+         * @param {event} e The raw browser event
+         */
+        "dragout" : true,
+        /**
+         * @event rowclass
+         * Fires when a row is rendered, so you can change add a style to it.
+         * @param {GridView} gridview   The grid view
+         * @param {Object} rowcfg   contains record  rowIndex and rowClass - set rowClass to add a style.
+         */
+        'rowclass' : true,
+
+        /**
+         * @event render
+         * Fires when the grid is rendered
+         * @param {Grid} grid
+         */
+        'render' : true
+    });
+
+    Roo.grid.Grid.superclass.constructor.call(this);
+};
+Roo.extend(Roo.grid.Grid, Roo.util.Observable, {
+    
+    /**
+     * @cfg {String} ddGroup - drag drop group.
+     */
+
+    /**
+     * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Default is 25.
+     */
+    minColumnWidth : 25,
+
+    /**
+     * @cfg {Boolean} autoSizeColumns True to automatically resize the columns to fit their content
+     * <b>on initial render.</b> It is more efficient to explicitly size the columns
+     * through the ColumnModel's {@link Roo.grid.ColumnModel#width} config option.  Default is false.
+     */
+    autoSizeColumns : false,
+
+    /**
+     * @cfg {Boolean} autoSizeHeaders True to measure headers with column data when auto sizing columns. Default is true.
+     */
+    autoSizeHeaders : true,
+
+    /**
+     * @cfg {Boolean} monitorWindowResize True to autoSize the grid when the window resizes. Default is true.
+     */
+    monitorWindowResize : true,
+
+    /**
+     * @cfg {Boolean} maxRowsToMeasure If autoSizeColumns is on, maxRowsToMeasure can be used to limit the number of
+     * rows measured to get a columns size. Default is 0 (all rows).
+     */
+    maxRowsToMeasure : 0,
+
+    /**
+     * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is true.
+     */
+    trackMouseOver : true,
+
+    /**
+    * @cfg {Boolean} enableDrag  True to enable drag of rows. Default is false. (double check if this is needed?)
+    */
+    
+    /**
+    * @cfg {Boolean} enableDragDrop True to enable drag and drop of rows. Default is false.
+    */
+    enableDragDrop : false,
+    
+    /**
+    * @cfg {Boolean} enableColumnMove True to enable drag and drop reorder of columns. Default is true.
+    */
+    enableColumnMove : true,
+    
+    /**
+    * @cfg {Boolean} enableColumnHide True to enable hiding of columns with the header context menu. Default is true.
+    */
+    enableColumnHide : true,
+    
+    /**
+    * @cfg {Boolean} enableRowHeightSync True to manually sync row heights across locked and not locked rows. Default is false.
+    */
+    enableRowHeightSync : false,
+    
+    /**
+    * @cfg {Boolean} stripeRows True to stripe the rows.  Default is true.
+    */
+    stripeRows : true,
+    
+    /**
+    * @cfg {Boolean} autoHeight True to fit the height of the grid container to the height of the data. Default is false.
+    */
+    autoHeight : false,
+
+    /**
+     * @cfg {String} autoExpandColumn The id (or dataIndex) of a column in this grid that should expand to fill unused space. This id can not be 0. Default is false.
+     */
+    autoExpandColumn : false,
+
+    /**
+    * @cfg {Number} autoExpandMin The minimum width the autoExpandColumn can have (if enabled).
+    * Default is 50.
+    */
+    autoExpandMin : 50,
+
+    /**
+    * @cfg {Number} autoExpandMax The maximum width the autoExpandColumn can have (if enabled). Default is 1000.
+    */
+    autoExpandMax : 1000,
+
+    /**
+    * @cfg {Object} view The {@link Roo.grid.GridView} used by the grid. This can be set before a call to render().
+    */
+    view : null,
+
+    /**
+    * @cfg {Object} loadMask An {@link Roo.LoadMask} config or true to mask the grid while loading. Default is false.
+    */
+    loadMask : false,
+    /**
+    * @cfg {Roo.dd.DropTarget} dropTarget An {@link Roo.dd.DropTarget} config
+    */
+    dropTarget: false,
+    
+   
+    
+    // private
+    rendered : false,
+
+    /**
+    * @cfg {Boolean} autoWidth True to set the grid's width to the default total width of the grid's columns instead
+    * of a fixed width. Default is false.
+    */
+    /**
+    * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if autoHeight is not on.
+    */
+    /**
+     * Called once after all setup has been completed and the grid is ready to be rendered.
+     * @return {Roo.grid.Grid} this
+     */
+    render : function()
+    {
+        var c = this.container;
+        // try to detect autoHeight/width mode
+        if((!c.dom.offsetHeight || c.dom.offsetHeight < 20) || c.getStyle("height") == "auto"){
+    	    this.autoHeight = true;
+    	}
+    	var view = this.getView();
+        view.init(this);
+
+        c.on("click", this.onClick, this);
+        c.on("dblclick", this.onDblClick, this);
+        c.on("contextmenu", this.onContextMenu, this);
+        c.on("keydown", this.onKeyDown, this);
+        if (Roo.isTouch) {
+            c.on("touchstart", this.onTouchStart, this);
+        }
+
+        this.relayEvents(c, ["mousedown","mouseup","mouseover","mouseout","keypress"]);
+
+        this.getSelectionModel().init(this);
+
+        view.render();
+
+        if(this.loadMask){
+            this.loadMask = new Roo.LoadMask(this.container,
+                    Roo.apply({store:this.dataSource}, this.loadMask));
+        }
+        
+        
+        if (this.toolbar && this.toolbar.xtype) {
+            this.toolbar.container = this.getView().getHeaderPanel(true);
+            this.toolbar = new Roo.Toolbar(this.toolbar);
+        }
+        if (this.footer && this.footer.xtype) {
+            this.footer.dataSource = this.getDataSource();
+            this.footer.container = this.getView().getFooterPanel(true);
+            this.footer = Roo.factory(this.footer, Roo);
+        }
+        if (this.dropTarget && this.dropTarget.xtype) {
+            delete this.dropTarget.xtype;
+            this.dropTarget =  new Roo.dd.DropTarget(this.getView().mainBody, this.dropTarget);
+        }
+        
+        
+        this.rendered = true;
+        this.fireEvent('render', this);
+        return this;
+    },
+
+	/**
+	 * Reconfigures the grid to use a different Store and Column Model.
+	 * The View will be bound to the new objects and refreshed.
+	 * @param {Roo.data.Store} dataSource The new {@link Roo.data.Store} object
+	 * @param {Roo.grid.ColumnModel} The new {@link Roo.grid.ColumnModel} object
+	 */
+    reconfigure : function(dataSource, colModel){
+        if(this.loadMask){
+            this.loadMask.destroy();
+            this.loadMask = new Roo.LoadMask(this.container,
+                    Roo.apply({store:dataSource}, this.loadMask));
+        }
+        this.view.bind(dataSource, colModel);
+        this.dataSource = dataSource;
+        this.colModel = colModel;
+        this.view.refresh(true);
+    },
+
+    // private
+    onKeyDown : function(e){
+        this.fireEvent("keydown", e);
+    },
+
+    /**
+     * Destroy this grid.
+     * @param {Boolean} removeEl True to remove the element
+     */
+    destroy : function(removeEl, keepListeners){
+        if(this.loadMask){
+            this.loadMask.destroy();
+        }
+        var c = this.container;
+        c.removeAllListeners();
+        this.view.destroy();
+        this.colModel.purgeListeners();
+        if(!keepListeners){
+            this.purgeListeners();
+        }
+        c.update("");
+        if(removeEl === true){
+            c.remove();
+        }
+    },
+
+    // private
+    processEvent : function(name, e){
+        // does this fire select???
+        //Roo.log('grid:processEvent '  + name);
+        
+        if (name != 'touchstart' ) {
+            this.fireEvent(name, e);    
+        }
+        
+        var t = e.getTarget();
+        var v = this.view;
+        var header = v.findHeaderIndex(t);
+        if(header !== false){
+            var ename = name == 'touchstart' ? 'click' : name;
+             
+            this.fireEvent("header" + ename, this, header, e);
+        }else{
+            var row = v.findRowIndex(t);
+            var cell = v.findCellIndex(t);
+            if (name == 'touchstart') {
+                // first touch is always a click.
+                // hopefull this happens after selection is updated.?
+                name = false;
+                
+                if (typeof(this.selModel.getSelectedCell) != 'undefined') {
+                    var cs = this.selModel.getSelectedCell();
+                    if (row == cs[0] && cell == cs[1]){
+                        name = 'dblclick';
+                    }
+                }
+                if (typeof(this.selModel.getSelections) != 'undefined') {
+                    var cs = this.selModel.getSelections();
+                    var ds = this.dataSource;
+                    if (cs.length == 1 && ds.getAt(row) == cs[0]){
+                        name = 'dblclick';
+                    }
+                }
+                if (!name) {
+                    return;
+                }
+            }
+            
+            
+            if(row !== false){
+                this.fireEvent("row" + name, this, row, e);
+                if(cell !== false){
+                    this.fireEvent("cell" + name, this, row, cell, e);
+                }
+            }
+        }
+    },
+
+    // private
+    onClick : function(e){
+        this.processEvent("click", e);
+    },
+   // private
+    onTouchStart : function(e){
+        this.processEvent("touchstart", e);
+    },
+
+    // private
+    onContextMenu : function(e, t){
+        this.processEvent("contextmenu", e);
+    },
+
+    // private
+    onDblClick : function(e){
+        this.processEvent("dblclick", e);
+    },
+
+    // private
+    walkCells : function(row, col, step, fn, scope){
+        var cm = this.colModel, clen = cm.getColumnCount();
+        var ds = this.dataSource, rlen = ds.getCount(), first = true;
+        if(step < 0){
+            if(col < 0){
+                row--;
+                first = false;
+            }
+            while(row >= 0){
+                if(!first){
+                    col = clen-1;
+                }
+                first = false;
+                while(col >= 0){
+                    if(fn.call(scope || this, row, col, cm) === true){
+                        return [row, col];
+                    }
+                    col--;
+                }
+                row--;
+            }
+        } else {
+            if(col >= clen){
+                row++;
+                first = false;
+            }
+            while(row < rlen){
+                if(!first){
+                    col = 0;
+                }
+                first = false;
+                while(col < clen){
+                    if(fn.call(scope || this, row, col, cm) === true){
+                        return [row, col];
+                    }
+                    col++;
+                }
+                row++;
+            }
+        }
+        return null;
+    },
+
+    // private
+    getSelections : function(){
+        return this.selModel.getSelections();
+    },
+
+    /**
+     * Causes the grid to manually recalculate its dimensions. Generally this is done automatically,
+     * but if manual update is required this method will initiate it.
+     */
+    autoSize : function(){
+        if(this.rendered){
+            this.view.layout();
+            if(this.view.adjustForScroll){
+                this.view.adjustForScroll();
+            }
+        }
+    },
+
+    /**
+     * Returns the grid's underlying element.
+     * @return {Element} The element
+     */
+    getGridEl : function(){
+        return this.container;
+    },
+
+    // private for compatibility, overridden by editor grid
+    stopEditing : function(){},
+
+    /**
+     * Returns the grid's SelectionModel.
+     * @return {SelectionModel}
+     */
+    getSelectionModel : function(){
+        if(!this.selModel){
+            this.selModel = new Roo.grid.RowSelectionModel();
+        }
+        return this.selModel;
+    },
+
+    /**
+     * Returns the grid's DataSource.
+     * @return {DataSource}
+     */
+    getDataSource : function(){
+        return this.dataSource;
+    },
+
+    /**
+     * Returns the grid's ColumnModel.
+     * @return {ColumnModel}
+     */
+    getColumnModel : function(){
+        return this.colModel;
+    },
+
+    /**
+     * Returns the grid's GridView object.
+     * @return {GridView}
+     */
+    getView : function(){
+        if(!this.view){
+            this.view = new Roo.grid.GridView(this.viewConfig);
+        }
+        return this.view;
+    },
+    /**
+     * Called to get grid's drag proxy text, by default returns this.ddText.
+     * @return {String}
+     */
+    getDragDropText : function(){
+        var count = this.selModel.getCount();
+        return String.format(this.ddText, count, count == 1 ? '' : 's');
+    }
+});
+/**
+ * Configures the text is the drag proxy (defaults to "%0 selected row(s)").
+ * %0 is replaced with the number of selected rows.
+ * @type String
+ */
+Roo.grid.Grid.prototype.ddText = "{0} selected row{1}";/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+Roo.grid.AbstractGridView = function(){
+	this.grid = null;
+	
+	this.events = {
+	    "beforerowremoved" : true,
+	    "beforerowsinserted" : true,
+	    "beforerefresh" : true,
+	    "rowremoved" : true,
+	    "rowsinserted" : true,
+	    "rowupdated" : true,
+	    "refresh" : true
+	};
+    Roo.grid.AbstractGridView.superclass.constructor.call(this);
+};
+
+Roo.extend(Roo.grid.AbstractGridView, Roo.util.Observable, {
+    rowClass : "x-grid-row",
+    cellClass : "x-grid-cell",
+    tdClass : "x-grid-td",
+    hdClass : "x-grid-hd",
+    splitClass : "x-grid-hd-split",
+    
+    init: function(grid){
+        this.grid = grid;
+		var cid = this.grid.getGridEl().id;
+        this.colSelector = "#" + cid + " ." + this.cellClass + "-";
+        this.tdSelector = "#" + cid + " ." + this.tdClass + "-";
+        this.hdSelector = "#" + cid + " ." + this.hdClass + "-";
+        this.splitSelector = "#" + cid + " ." + this.splitClass + "-";
+	},
+	
+    getColumnRenderers : function(){
+    	var renderers = [];
+    	var cm = this.grid.colModel;
+        var colCount = cm.getColumnCount();
+        for(var i = 0; i < colCount; i++){
+            renderers[i] = cm.getRenderer(i);
+        }
+        return renderers;
+    },
+    
+    getColumnIds : function(){
+    	var ids = [];
+    	var cm = this.grid.colModel;
+        var colCount = cm.getColumnCount();
+        for(var i = 0; i < colCount; i++){
+            ids[i] = cm.getColumnId(i);
+        }
+        return ids;
+    },
+    
+    getDataIndexes : function(){
+    	if(!this.indexMap){
+            this.indexMap = this.buildIndexMap();
+        }
+        return this.indexMap.colToData;
+    },
+    
+    getColumnIndexByDataIndex : function(dataIndex){
+        if(!this.indexMap){
+            this.indexMap = this.buildIndexMap();
+        }
+    	return this.indexMap.dataToCol[dataIndex];
+    },
+    
+    /**
+     * Set a css style for a column dynamically. 
+     * @param {Number} colIndex The index of the column
+     * @param {String} name The css property name
+     * @param {String} value The css value
+     */
+    setCSSStyle : function(colIndex, name, value){
+        var selector = "#" + this.grid.id + " .x-grid-col-" + colIndex;
+        Roo.util.CSS.updateRule(selector, name, value);
+    },
+    
+    generateRules : function(cm){
+        var ruleBuf = [], rulesId = this.grid.id + '-cssrules';
+        Roo.util.CSS.removeStyleSheet(rulesId);
+        for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+            var cid = cm.getColumnId(i);
+            ruleBuf.push(this.colSelector, cid, " {\n", cm.config[i].css, "}\n",
+                         this.tdSelector, cid, " {\n}\n",
+                         this.hdSelector, cid, " {\n}\n",
+                         this.splitSelector, cid, " {\n}\n");
+        }
+        return Roo.util.CSS.createStyleSheet(ruleBuf.join(""), rulesId);
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+// private
+// This is a support class used internally by the Grid components
+Roo.grid.HeaderDragZone = function(grid, hd, hd2){
+    this.grid = grid;
+    this.view = grid.getView();
+    this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
+    Roo.grid.HeaderDragZone.superclass.constructor.call(this, hd);
+    if(hd2){
+        this.setHandleElId(Roo.id(hd));
+        this.setOuterHandleElId(Roo.id(hd2));
+    }
+    this.scroll = false;
+};
+Roo.extend(Roo.grid.HeaderDragZone, Roo.dd.DragZone, {
+    maxDragWidth: 120,
+    getDragData : function(e){
+        var t = Roo.lib.Event.getTarget(e);
+        var h = this.view.findHeaderCell(t);
+        if(h){
+            return {ddel: h.firstChild, header:h};
+        }
+        return false;
+    },
+
+    onInitDrag : function(e){
+        this.view.headersDisabled = true;
+        var clone = this.dragData.ddel.cloneNode(true);
+        clone.id = Roo.id();
+        clone.style.width = Math.min(this.dragData.header.offsetWidth,this.maxDragWidth) + "px";
+        this.proxy.update(clone);
+        return true;
+    },
+
+    afterValidDrop : function(){
+        var v = this.view;
+        setTimeout(function(){
+            v.headersDisabled = false;
+        }, 50);
+    },
+
+    afterInvalidDrop : function(){
+        var v = this.view;
+        setTimeout(function(){
+            v.headersDisabled = false;
+        }, 50);
+    }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+// private
+// This is a support class used internally by the Grid components
+Roo.grid.HeaderDropZone = function(grid, hd, hd2){
+    this.grid = grid;
+    this.view = grid.getView();
+    // split the proxies so they don't interfere with mouse events
+    this.proxyTop = Roo.DomHelper.append(document.body, {
+        cls:"col-move-top", html:"&#160;"
+    }, true);
+    this.proxyBottom = Roo.DomHelper.append(document.body, {
+        cls:"col-move-bottom", html:"&#160;"
+    }, true);
+    this.proxyTop.hide = this.proxyBottom.hide = function(){
+        this.setLeftTop(-100,-100);
+        this.setStyle("visibility", "hidden");
+    };
+    this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
+    // temporarily disabled
+    //Roo.dd.ScrollManager.register(this.view.scroller.dom);
+    Roo.grid.HeaderDropZone.superclass.constructor.call(this, grid.getGridEl().dom);
+};
+Roo.extend(Roo.grid.HeaderDropZone, Roo.dd.DropZone, {
+    proxyOffsets : [-4, -9],
+    fly: Roo.Element.fly,
+
+    getTargetFromEvent : function(e){
+        var t = Roo.lib.Event.getTarget(e);
+        var cindex = this.view.findCellIndex(t);
+        if(cindex !== false){
+            return this.view.getHeaderCell(cindex);
+        }
+        return null;
+    },
+
+    nextVisible : function(h){
+        var v = this.view, cm = this.grid.colModel;
+        h = h.nextSibling;
+        while(h){
+            if(!cm.isHidden(v.getCellIndex(h))){
+                return h;
+            }
+            h = h.nextSibling;
+        }
+        return null;
+    },
+
+    prevVisible : function(h){
+        var v = this.view, cm = this.grid.colModel;
+        h = h.prevSibling;
+        while(h){
+            if(!cm.isHidden(v.getCellIndex(h))){
+                return h;
+            }
+            h = h.prevSibling;
+        }
+        return null;
+    },
+
+    positionIndicator : function(h, n, e){
+        var x = Roo.lib.Event.getPageX(e);
+        var r = Roo.lib.Dom.getRegion(n.firstChild);
+        var px, pt, py = r.top + this.proxyOffsets[1];
+        if((r.right - x) <= (r.right-r.left)/2){
+            px = r.right+this.view.borderWidth;
+            pt = "after";
+        }else{
+            px = r.left;
+            pt = "before";
+        }
+        var oldIndex = this.view.getCellIndex(h);
+        var newIndex = this.view.getCellIndex(n);
+
+        if(this.grid.colModel.isFixed(newIndex)){
+            return false;
+        }
+
+        var locked = this.grid.colModel.isLocked(newIndex);
+
+        if(pt == "after"){
+            newIndex++;
+        }
+        if(oldIndex < newIndex){
+            newIndex--;
+        }
+        if(oldIndex == newIndex && (locked == this.grid.colModel.isLocked(oldIndex))){
+            return false;
+        }
+        px +=  this.proxyOffsets[0];
+        this.proxyTop.setLeftTop(px, py);
+        this.proxyTop.show();
+        if(!this.bottomOffset){
+            this.bottomOffset = this.view.mainHd.getHeight();
+        }
+        this.proxyBottom.setLeftTop(px, py+this.proxyTop.dom.offsetHeight+this.bottomOffset);
+        this.proxyBottom.show();
+        return pt;
+    },
+
+    onNodeEnter : function(n, dd, e, data){
+        if(data.header != n){
+            this.positionIndicator(data.header, n, e);
+        }
+    },
+
+    onNodeOver : function(n, dd, e, data){
+        var result = false;
+        if(data.header != n){
+            result = this.positionIndicator(data.header, n, e);
+        }
+        if(!result){
+            this.proxyTop.hide();
+            this.proxyBottom.hide();
+        }
+        return result ? this.dropAllowed : this.dropNotAllowed;
+    },
+
+    onNodeOut : function(n, dd, e, data){
+        this.proxyTop.hide();
+        this.proxyBottom.hide();
+    },
+
+    onNodeDrop : function(n, dd, e, data){
+        var h = data.header;
+        if(h != n){
+            var cm = this.grid.colModel;
+            var x = Roo.lib.Event.getPageX(e);
+            var r = Roo.lib.Dom.getRegion(n.firstChild);
+            var pt = (r.right - x) <= ((r.right-r.left)/2) ? "after" : "before";
+            var oldIndex = this.view.getCellIndex(h);
+            var newIndex = this.view.getCellIndex(n);
+            var locked = cm.isLocked(newIndex);
+            if(pt == "after"){
+                newIndex++;
+            }
+            if(oldIndex < newIndex){
+                newIndex--;
+            }
+            if(oldIndex == newIndex && (locked == cm.isLocked(oldIndex))){
+                return false;
+            }
+            cm.setLocked(oldIndex, locked, true);
+            cm.moveColumn(oldIndex, newIndex);
+            this.grid.fireEvent("columnmove", oldIndex, newIndex);
+            return true;
+        }
+        return false;
+    }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+  
+/**
+ * @class Roo.grid.GridView
+ * @extends Roo.util.Observable
+ *
+ * @constructor
+ * @param {Object} config
+ */
+Roo.grid.GridView = function(config){
+    Roo.grid.GridView.superclass.constructor.call(this);
+    this.el = null;
+
+    Roo.apply(this, config);
+};
+
+Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
+
+    unselectable :  'unselectable="on"',
+    unselectableCls :  'x-unselectable',
+    
+    
+    rowClass : "x-grid-row",
+
+    cellClass : "x-grid-col",
+
+    tdClass : "x-grid-td",
+
+    hdClass : "x-grid-hd",
+
+    splitClass : "x-grid-split",
+
+    sortClasses : ["sort-asc", "sort-desc"],
+
+    enableMoveAnim : false,
+
+    hlColor: "C3DAF9",
+
+    dh : Roo.DomHelper,
+
+    fly : Roo.Element.fly,
+
+    css : Roo.util.CSS,
+
+    borderWidth: 1,
+
+    splitOffset: 3,
+
+    scrollIncrement : 22,
+
+    cellRE: /(?:.*?)x-grid-(?:hd|cell|csplit)-(?:[\d]+)-([\d]+)(?:.*?)/,
+
+    findRE: /\s?(?:x-grid-hd|x-grid-col|x-grid-csplit)\s/,
+
+    bind : function(ds, cm){
+        if(this.ds){
+            this.ds.un("load", this.onLoad, this);
+            this.ds.un("datachanged", this.onDataChange, this);
+            this.ds.un("add", this.onAdd, this);
+            this.ds.un("remove", this.onRemove, this);
+            this.ds.un("update", this.onUpdate, this);
+            this.ds.un("clear", this.onClear, this);
+        }
+        if(ds){
+            ds.on("load", this.onLoad, this);
+            ds.on("datachanged", this.onDataChange, this);
+            ds.on("add", this.onAdd, this);
+            ds.on("remove", this.onRemove, this);
+            ds.on("update", this.onUpdate, this);
+            ds.on("clear", this.onClear, this);
+        }
+        this.ds = ds;
+
+        if(this.cm){
+            this.cm.un("widthchange", this.onColWidthChange, this);
+            this.cm.un("headerchange", this.onHeaderChange, this);
+            this.cm.un("hiddenchange", this.onHiddenChange, this);
+            this.cm.un("columnmoved", this.onColumnMove, this);
+            this.cm.un("columnlockchange", this.onColumnLock, this);
+        }
+        if(cm){
+            this.generateRules(cm);
+            cm.on("widthchange", this.onColWidthChange, this);
+            cm.on("headerchange", this.onHeaderChange, this);
+            cm.on("hiddenchange", this.onHiddenChange, this);
+            cm.on("columnmoved", this.onColumnMove, this);
+            cm.on("columnlockchange", this.onColumnLock, this);
+        }
+        this.cm = cm;
+    },
+
+    init: function(grid){
+        Roo.grid.GridView.superclass.init.call(this, grid);
+
+        this.bind(grid.dataSource, grid.colModel);
+
+        grid.on("headerclick", this.handleHeaderClick, this);
+
+        if(grid.trackMouseOver){
+            grid.on("mouseover", this.onRowOver, this);
+            grid.on("mouseout", this.onRowOut, this);
+        }
+        grid.cancelTextSelection = function(){};
+        this.gridId = grid.id;
+
+        var tpls = this.templates || {};
+
+        if(!tpls.master){
+            tpls.master = new Roo.Template(
+               '<div class="x-grid" hidefocus="true">',
+                '<a href="#" class="x-grid-focus" tabIndex="-1"></a>',
+                  '<div class="x-grid-topbar"></div>',
+                  '<div class="x-grid-scroller"><div></div></div>',
+                  '<div class="x-grid-locked">',
+                      '<div class="x-grid-header">{lockedHeader}</div>',
+                      '<div class="x-grid-body">{lockedBody}</div>',
+                  "</div>",
+                  '<div class="x-grid-viewport">',
+                      '<div class="x-grid-header">{header}</div>',
+                      '<div class="x-grid-body">{body}</div>',
+                  "</div>",
+                  '<div class="x-grid-bottombar"></div>',
+                 
+                  '<div class="x-grid-resize-proxy">&#160;</div>',
+               "</div>"
+            );
+            tpls.master.disableformats = true;
+        }
+
+        if(!tpls.header){
+            tpls.header = new Roo.Template(
+               '<table border="0" cellspacing="0" cellpadding="0">',
+               '<tbody><tr class="x-grid-hd-row">{cells}</tr></tbody>',
+               "</table>{splits}"
+            );
+            tpls.header.disableformats = true;
+        }
+        tpls.header.compile();
+
+        if(!tpls.hcell){
+            tpls.hcell = new Roo.Template(
+                '<td class="x-grid-hd x-grid-td-{id} {cellId}"><div " title="{title}" class="x-grid-hd-inner x-grid-hd-{id}">',
+                '<div class="x-grid-hd-text ' + this.unselectableCls +  '" ' + this.unselectable +'>{value}<img class="x-grid-sort-icon" src="', Roo.BLANK_IMAGE_URL, '" /></div>',
+                "</div></td>"
+             );
+             tpls.hcell.disableFormats = true;
+        }
+        tpls.hcell.compile();
+
+        if(!tpls.hsplit){
+            tpls.hsplit = new Roo.Template('<div class="x-grid-split {splitId} x-grid-split-{id}" style="{style} ' +
+                                            this.unselectableCls +  '" ' + this.unselectable +'>&#160;</div>');
+            tpls.hsplit.disableFormats = true;
+        }
+        tpls.hsplit.compile();
+
+        if(!tpls.body){
+            tpls.body = new Roo.Template(
+               '<table border="0" cellspacing="0" cellpadding="0">',
+               "<tbody>{rows}</tbody>",
+               "</table>"
+            );
+            tpls.body.disableFormats = true;
+        }
+        tpls.body.compile();
+
+        if(!tpls.row){
+            tpls.row = new Roo.Template('<tr class="x-grid-row {alt}">{cells}</tr>');
+            tpls.row.disableFormats = true;
+        }
+        tpls.row.compile();
+
+        if(!tpls.cell){
+            tpls.cell = new Roo.Template(
+                '<td class="x-grid-col x-grid-td-{id} {cellId} {css}" tabIndex="0">',
+                '<div class="x-grid-col-{id} x-grid-cell-inner"><div class="x-grid-cell-text ' +
+                    this.unselectableCls +  '" ' + this.unselectable +'" {attr}>{value}</div></div>',
+                "</td>"
+            );
+            tpls.cell.disableFormats = true;
+        }
+        tpls.cell.compile();
+
+        this.templates = tpls;
+    },
+
+    // remap these for backwards compat
+    onColWidthChange : function(){
+        this.updateColumns.apply(this, arguments);
+    },
+    onHeaderChange : function(){
+        this.updateHeaders.apply(this, arguments);
+    }, 
+    onHiddenChange : function(){
+        this.handleHiddenChange.apply(this, arguments);
+    },
+    onColumnMove : function(){
+        this.handleColumnMove.apply(this, arguments);
+    },
+    onColumnLock : function(){
+        this.handleLockChange.apply(this, arguments);
+    },
+
+    onDataChange : function(){
+        this.refresh();
+        this.updateHeaderSortState();
+    },
+
+    onClear : function(){
+        this.refresh();
+    },
+
+    onUpdate : function(ds, record){
+        this.refreshRow(record);
+    },
+
+    refreshRow : function(record){
+        var ds = this.ds, index;
+        if(typeof record == 'number'){
+            index = record;
+            record = ds.getAt(index);
+        }else{
+            index = ds.indexOf(record);
+        }
+        this.insertRows(ds, index, index, true);
+        this.onRemove(ds, record, index+1, true);
+        this.syncRowHeights(index, index);
+        this.layout();
+        this.fireEvent("rowupdated", this, index, record);
+    },
+
+    onAdd : function(ds, records, index){
+        this.insertRows(ds, index, index + (records.length-1));
+    },
+
+    onRemove : function(ds, record, index, isUpdate){
+        if(isUpdate !== true){
+            this.fireEvent("beforerowremoved", this, index, record);
+        }
+        var bt = this.getBodyTable(), lt = this.getLockedTable();
+        if(bt.rows[index]){
+            bt.firstChild.removeChild(bt.rows[index]);
+        }
+        if(lt.rows[index]){
+            lt.firstChild.removeChild(lt.rows[index]);
+        }
+        if(isUpdate !== true){
+            this.stripeRows(index);
+            this.syncRowHeights(index, index);
+            this.layout();
+            this.fireEvent("rowremoved", this, index, record);
+        }
+    },
+
+    onLoad : function(){
+        this.scrollToTop();
+    },
+
+    /**
+     * Scrolls the grid to the top
+     */
+    scrollToTop : function(){
+        if(this.scroller){
+            this.scroller.dom.scrollTop = 0;
+            this.syncScroll();
+        }
+    },
+
+    /**
+     * Gets a panel in the header of the grid that can be used for toolbars etc.
+     * After modifying the contents of this panel a call to grid.autoSize() may be
+     * required to register any changes in size.
+     * @param {Boolean} doShow By default the header is hidden. Pass true to show the panel
+     * @return Roo.Element
+     */
+    getHeaderPanel : function(doShow){
+        if(doShow){
+            this.headerPanel.show();
+        }
+        return this.headerPanel;
+    },
+
+    /**
+     * Gets a panel in the footer of the grid that can be used for toolbars etc.
+     * After modifying the contents of this panel a call to grid.autoSize() may be
+     * required to register any changes in size.
+     * @param {Boolean} doShow By default the footer is hidden. Pass true to show the panel
+     * @return Roo.Element
+     */
+    getFooterPanel : function(doShow){
+        if(doShow){
+            this.footerPanel.show();
+        }
+        return this.footerPanel;
+    },
+
+    initElements : function(){
+        var E = Roo.Element;
+        var el = this.grid.getGridEl().dom.firstChild;
+        var cs = el.childNodes;
+
+        this.el = new E(el);
+        
+         this.focusEl = new E(el.firstChild);
+        this.focusEl.swallowEvent("click", true);
+        
+        this.headerPanel = new E(cs[1]);
+        this.headerPanel.enableDisplayMode("block");
+
+        this.scroller = new E(cs[2]);
+        this.scrollSizer = new E(this.scroller.dom.firstChild);
+
+        this.lockedWrap = new E(cs[3]);
+        this.lockedHd = new E(this.lockedWrap.dom.firstChild);
+        this.lockedBody = new E(this.lockedWrap.dom.childNodes[1]);
+
+        this.mainWrap = new E(cs[4]);
+        this.mainHd = new E(this.mainWrap.dom.firstChild);
+        this.mainBody = new E(this.mainWrap.dom.childNodes[1]);
+
+        this.footerPanel = new E(cs[5]);
+        this.footerPanel.enableDisplayMode("block");
+
+        this.resizeProxy = new E(cs[6]);
+
+        this.headerSelector = String.format(
+           '#{0} td.x-grid-hd, #{1} td.x-grid-hd',
+           this.lockedHd.id, this.mainHd.id
+        );
+
+        this.splitterSelector = String.format(
+           '#{0} div.x-grid-split, #{1} div.x-grid-split',
+           this.idToCssName(this.lockedHd.id), this.idToCssName(this.mainHd.id)
+        );
+    },
+    idToCssName : function(s)
+    {
+        return s.replace(/[^a-z0-9]+/ig, '-');
+    },
+
+    getHeaderCell : function(index){
+        return Roo.DomQuery.select(this.headerSelector)[index];
+    },
+
+    getHeaderCellMeasure : function(index){
+        return this.getHeaderCell(index).firstChild;
+    },
+
+    getHeaderCellText : function(index){
+        return this.getHeaderCell(index).firstChild.firstChild;
+    },
+
+    getLockedTable : function(){
+        return this.lockedBody.dom.firstChild;
+    },
+
+    getBodyTable : function(){
+        return this.mainBody.dom.firstChild;
+    },
+
+    getLockedRow : function(index){
+        return this.getLockedTable().rows[index];
+    },
+
+    getRow : function(index){
+        return this.getBodyTable().rows[index];
+    },
+
+    getRowComposite : function(index){
+        if(!this.rowEl){
+            this.rowEl = new Roo.CompositeElementLite();
+        }
+        var els = [], lrow, mrow;
+        if(lrow = this.getLockedRow(index)){
+            els.push(lrow);
+        }
+        if(mrow = this.getRow(index)){
+            els.push(mrow);
+        }
+        this.rowEl.elements = els;
+        return this.rowEl;
+    },
+    /**
+     * Gets the 'td' of the cell
+     * 
+     * @param {Integer} rowIndex row to select
+     * @param {Integer} colIndex column to select
+     * 
+     * @return {Object} 
+     */
+    getCell : function(rowIndex, colIndex){
+        var locked = this.cm.getLockedCount();
+        var source;
+        if(colIndex < locked){
+            source = this.lockedBody.dom.firstChild;
+        }else{
+            source = this.mainBody.dom.firstChild;
+            colIndex -= locked;
+        }
+        return source.rows[rowIndex].childNodes[colIndex];
+    },
+
+    getCellText : function(rowIndex, colIndex){
+        return this.getCell(rowIndex, colIndex).firstChild.firstChild;
+    },
+
+    getCellBox : function(cell){
+        var b = this.fly(cell).getBox();
+        if(Roo.isOpera){ // opera fails to report the Y
+            b.y = cell.offsetTop + this.mainBody.getY();
+        }
+        return b;
+    },
+
+    getCellIndex : function(cell){
+        var id = String(cell.className).match(this.cellRE);
+        if(id){
+            return parseInt(id[1], 10);
+        }
+        return 0;
+    },
+
+    findHeaderIndex : function(n){
+        var r = Roo.fly(n).findParent("td." + this.hdClass, 6);
+        return r ? this.getCellIndex(r) : false;
+    },
+
+    findHeaderCell : function(n){
+        var r = Roo.fly(n).findParent("td." + this.hdClass, 6);
+        return r ? r : false;
+    },
+
+    findRowIndex : function(n){
+        if(!n){
+            return false;
+        }
+        var r = Roo.fly(n).findParent("tr." + this.rowClass, 6);
+        return r ? r.rowIndex : false;
+    },
+
+    findCellIndex : function(node){
+        var stop = this.el.dom;
+        while(node && node != stop){
+            if(this.findRE.test(node.className)){
+                return this.getCellIndex(node);
+            }
+            node = node.parentNode;
+        }
+        return false;
+    },
+
+    getColumnId : function(index){
+        return this.cm.getColumnId(index);
+    },
+
+    getSplitters : function()
+    {
+        if(this.splitterSelector){
+           return Roo.DomQuery.select(this.splitterSelector);
+        }else{
+            return null;
+      }
+    },
+
+    getSplitter : function(index){
+        return this.getSplitters()[index];
+    },
+
+    onRowOver : function(e, t){
+        var row;
+        if((row = this.findRowIndex(t)) !== false){
+            this.getRowComposite(row).addClass("x-grid-row-over");
+        }
+    },
+
+    onRowOut : function(e, t){
+        var row;
+        if((row = this.findRowIndex(t)) !== false && row !== this.findRowIndex(e.getRelatedTarget())){
+            this.getRowComposite(row).removeClass("x-grid-row-over");
+        }
+    },
+
+    renderHeaders : function(){
+        var cm = this.cm;
+        var ct = this.templates.hcell, ht = this.templates.header, st = this.templates.hsplit;
+        var cb = [], lb = [], sb = [], lsb = [], p = {};
+        for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+            p.cellId = "x-grid-hd-0-" + i;
+            p.splitId = "x-grid-csplit-0-" + i;
+            p.id = cm.getColumnId(i);
+            p.title = cm.getColumnTooltip(i) || cm.getColumnHeader(i) || "";
+            p.value = cm.getColumnHeader(i) || "";
+            p.style = (this.grid.enableColumnResize === false || !cm.isResizable(i) || cm.isFixed(i)) ? 'cursor:default' : '';
+            if(!cm.isLocked(i)){
+                cb[cb.length] = ct.apply(p);
+                sb[sb.length] = st.apply(p);
+            }else{
+                lb[lb.length] = ct.apply(p);
+                lsb[lsb.length] = st.apply(p);
+            }
+        }
+        return [ht.apply({cells: lb.join(""), splits:lsb.join("")}),
+                ht.apply({cells: cb.join(""), splits:sb.join("")})];
+    },
+
+    updateHeaders : function(){
+        var html = this.renderHeaders();
+        this.lockedHd.update(html[0]);
+        this.mainHd.update(html[1]);
+    },
+
+    /**
+     * Focuses the specified row.
+     * @param {Number} row The row index
+     */
+    focusRow : function(row)
+    {
+        //Roo.log('GridView.focusRow');
+        var x = this.scroller.dom.scrollLeft;
+        this.focusCell(row, 0, false);
+        this.scroller.dom.scrollLeft = x;
+    },
+
+    /**
+     * Focuses the specified cell.
+     * @param {Number} row The row index
+     * @param {Number} col The column index
+     * @param {Boolean} hscroll false to disable horizontal scrolling
+     */
+    focusCell : function(row, col, hscroll)
+    {
+        //Roo.log('GridView.focusCell');
+        var el = this.ensureVisible(row, col, hscroll);
+        this.focusEl.alignTo(el, "tl-tl");
+        if(Roo.isGecko){
+            this.focusEl.focus();
+        }else{
+            this.focusEl.focus.defer(1, this.focusEl);
+        }
+    },
+
+    /**
+     * Scrolls the specified cell into view
+     * @param {Number} row The row index
+     * @param {Number} col The column index
+     * @param {Boolean} hscroll false to disable horizontal scrolling
+     */
+    ensureVisible : function(row, col, hscroll)
+    {
+        //Roo.log('GridView.ensureVisible,' + row + ',' + col);
+        //return null; //disable for testing.
+        if(typeof row != "number"){
+            row = row.rowIndex;
+        }
+        if(row < 0 && row >= this.ds.getCount()){
+            return  null;
+        }
+        col = (col !== undefined ? col : 0);
+        var cm = this.grid.colModel;
+        while(cm.isHidden(col)){
+            col++;
+        }
+
+        var el = this.getCell(row, col);
+        if(!el){
+            return null;
+        }
+        var c = this.scroller.dom;
+
+        var ctop = parseInt(el.offsetTop, 10);
+        var cleft = parseInt(el.offsetLeft, 10);
+        var cbot = ctop + el.offsetHeight;
+        var cright = cleft + el.offsetWidth;
+        
+        var ch = c.clientHeight - this.mainHd.dom.offsetHeight;
+        var stop = parseInt(c.scrollTop, 10);
+        var sleft = parseInt(c.scrollLeft, 10);
+        var sbot = stop + ch;
+        var sright = sleft + c.clientWidth;
+        /*
+        Roo.log('GridView.ensureVisible:' +
+                ' ctop:' + ctop +
+                ' c.clientHeight:' + c.clientHeight +
+                ' this.mainHd.dom.offsetHeight:' + this.mainHd.dom.offsetHeight +
+                ' stop:' + stop +
+                ' cbot:' + cbot +
+                ' sbot:' + sbot +
+                ' ch:' + ch  
+                );
+        */
+        if(ctop < stop){
+             c.scrollTop = ctop;
+            //Roo.log("set scrolltop to ctop DISABLE?");
+        }else if(cbot > sbot){
+            //Roo.log("set scrolltop to cbot-ch");
+            c.scrollTop = cbot-ch;
+        }
+        
+        if(hscroll !== false){
+            if(cleft < sleft){
+                c.scrollLeft = cleft;
+            }else if(cright > sright){
+                c.scrollLeft = cright-c.clientWidth;
+            }
+        }
+         
+        return el;
+    },
+
+    updateColumns : function(){
+        this.grid.stopEditing();
+        var cm = this.grid.colModel, colIds = this.getColumnIds();
+        //var totalWidth = cm.getTotalWidth();
+        var pos = 0;
+        for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+            //if(cm.isHidden(i)) continue;
+            var w = cm.getColumnWidth(i);
+            this.css.updateRule(this.colSelector+this.idToCssName(colIds[i]), "width", (w - this.borderWidth) + "px");
+            this.css.updateRule(this.hdSelector+this.idToCssName(colIds[i]), "width", (w - this.borderWidth) + "px");
+        }
+        this.updateSplitters();
+    },
+
+    generateRules : function(cm){
+        var ruleBuf = [], rulesId = this.idToCssName(this.grid.id)+ '-cssrules';
+        Roo.util.CSS.removeStyleSheet(rulesId);
+        for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+            var cid = cm.getColumnId(i);
+            var align = '';
+            if(cm.config[i].align){
+                align = 'text-align:'+cm.config[i].align+';';
+            }
+            var hidden = '';
+            if(cm.isHidden(i)){
+                hidden = 'display:none;';
+            }
+            var width = "width:" + (cm.getColumnWidth(i) - this.borderWidth) + "px;";
+            ruleBuf.push(
+                    this.colSelector, cid, " {\n", cm.config[i].css, align, width, "\n}\n",
+                    this.hdSelector, cid, " {\n", align, width, "}\n",
+                    this.tdSelector, cid, " {\n",hidden,"\n}\n",
+                    this.splitSelector, cid, " {\n", hidden , "\n}\n");
+        }
+        return Roo.util.CSS.createStyleSheet(ruleBuf.join(""), rulesId);
+    },
+
+    updateSplitters : function(){
+        var cm = this.cm, s = this.getSplitters();
+        if(s){ // splitters not created yet
+            var pos = 0, locked = true;
+            for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+                if(cm.isHidden(i)) {
+                    continue;
+                }
+                var w = cm.getColumnWidth(i); // make sure it's a number
+                if(!cm.isLocked(i) && locked){
+                    pos = 0;
+                    locked = false;
+                }
+                pos += w;
+                s[i].style.left = (pos-this.splitOffset) + "px";
+            }
+        }
+    },
+
+    handleHiddenChange : function(colModel, colIndex, hidden){
+        if(hidden){
+            this.hideColumn(colIndex);
+        }else{
+            this.unhideColumn(colIndex);
+        }
+    },
+
+    hideColumn : function(colIndex){
+        var cid = this.getColumnId(colIndex);
+        this.css.updateRule(this.tdSelector+this.idToCssName(cid), "display", "none");
+        this.css.updateRule(this.splitSelector+this.idToCssName(cid), "display", "none");
+        if(Roo.isSafari){
+            this.updateHeaders();
+        }
+        this.updateSplitters();
+        this.layout();
+    },
+
+    unhideColumn : function(colIndex){
+        var cid = this.getColumnId(colIndex);
+        this.css.updateRule(this.tdSelector+this.idToCssName(cid), "display", "");
+        this.css.updateRule(this.splitSelector+this.idToCssName(cid), "display", "");
+
+        if(Roo.isSafari){
+            this.updateHeaders();
+        }
+        this.updateSplitters();
+        this.layout();
+    },
+
+    insertRows : function(dm, firstRow, lastRow, isUpdate){
+        if(firstRow == 0 && lastRow == dm.getCount()-1){
+            this.refresh();
+        }else{
+            if(!isUpdate){
+                this.fireEvent("beforerowsinserted", this, firstRow, lastRow);
+            }
+            var s = this.getScrollState();
+            var markup = this.renderRows(firstRow, lastRow);
+            this.bufferRows(markup[0], this.getLockedTable(), firstRow);
+            this.bufferRows(markup[1], this.getBodyTable(), firstRow);
+            this.restoreScroll(s);
+            if(!isUpdate){
+                this.fireEvent("rowsinserted", this, firstRow, lastRow);
+                this.syncRowHeights(firstRow, lastRow);
+                this.stripeRows(firstRow);
+                this.layout();
+            }
+        }
+    },
+
+    bufferRows : function(markup, target, index){
+        var before = null, trows = target.rows, tbody = target.tBodies[0];
+        if(index < trows.length){
+            before = trows[index];
+        }
+        var b = document.createElement("div");
+        b.innerHTML = "<table><tbody>"+markup+"</tbody></table>";
+        var rows = b.firstChild.rows;
+        for(var i = 0, len = rows.length; i < len; i++){
+            if(before){
+                tbody.insertBefore(rows[0], before);
+            }else{
+                tbody.appendChild(rows[0]);
+            }
+        }
+        b.innerHTML = "";
+        b = null;
+    },
+
+    deleteRows : function(dm, firstRow, lastRow){
+        if(dm.getRowCount()<1){
+            this.fireEvent("beforerefresh", this);
+            this.mainBody.update("");
+            this.lockedBody.update("");
+            this.fireEvent("refresh", this);
+        }else{
+            this.fireEvent("beforerowsdeleted", this, firstRow, lastRow);
+            var bt = this.getBodyTable();
+            var tbody = bt.firstChild;
+            var rows = bt.rows;
+            for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){
+                tbody.removeChild(rows[firstRow]);
+            }
+            this.stripeRows(firstRow);
+            this.fireEvent("rowsdeleted", this, firstRow, lastRow);
+        }
+    },
+
+    updateRows : function(dataSource, firstRow, lastRow){
+        var s = this.getScrollState();
+        this.refresh();
+        this.restoreScroll(s);
+    },
+
+    handleSort : function(dataSource, sortColumnIndex, sortDir, noRefresh){
+        if(!noRefresh){
+           this.refresh();
+        }
+        this.updateHeaderSortState();
+    },
+
+    getScrollState : function(){
+        
+        var sb = this.scroller.dom;
+        return {left: sb.scrollLeft, top: sb.scrollTop};
+    },
+
+    stripeRows : function(startRow){
+        if(!this.grid.stripeRows || this.ds.getCount() < 1){
+            return;
+        }
+        startRow = startRow || 0;
+        var rows = this.getBodyTable().rows;
+        var lrows = this.getLockedTable().rows;
+        var cls = ' x-grid-row-alt ';
+        for(var i = startRow, len = rows.length; i < len; i++){
+            var row = rows[i], lrow = lrows[i];
+            var isAlt = ((i+1) % 2 == 0);
+            var hasAlt = (' '+row.className + ' ').indexOf(cls) != -1;
+            if(isAlt == hasAlt){
+                continue;
+            }
+            if(isAlt){
+                row.className += " x-grid-row-alt";
+            }else{
+                row.className = row.className.replace("x-grid-row-alt", "");
+            }
+            if(lrow){
+                lrow.className = row.className;
+            }
+        }
+    },
+
+    restoreScroll : function(state){
+        //Roo.log('GridView.restoreScroll');
+        var sb = this.scroller.dom;
+        sb.scrollLeft = state.left;
+        sb.scrollTop = state.top;
+        this.syncScroll();
+    },
+
+    syncScroll : function(){
+        //Roo.log('GridView.syncScroll');
+        var sb = this.scroller.dom;
+        var sh = this.mainHd.dom;
+        var bs = this.mainBody.dom;
+        var lv = this.lockedBody.dom;
+        sh.scrollLeft = bs.scrollLeft = sb.scrollLeft;
+        lv.scrollTop = bs.scrollTop = sb.scrollTop;
+    },
+
+    handleScroll : function(e){
+        this.syncScroll();
+        var sb = this.scroller.dom;
+        this.grid.fireEvent("bodyscroll", sb.scrollLeft, sb.scrollTop);
+        e.stopEvent();
+    },
+
+    handleWheel : function(e){
+        var d = e.getWheelDelta();
+        this.scroller.dom.scrollTop -= d*22;
+        // set this here to prevent jumpy scrolling on large tables
+        this.lockedBody.dom.scrollTop = this.mainBody.dom.scrollTop = this.scroller.dom.scrollTop;
+        e.stopEvent();
+    },
+
+    renderRows : function(startRow, endRow){
+        // pull in all the crap needed to render rows
+        var g = this.grid, cm = g.colModel, ds = g.dataSource, stripe = g.stripeRows;
+        var colCount = cm.getColumnCount();
+
+        if(ds.getCount() < 1){
+            return ["", ""];
+        }
+
+        // build a map for all the columns
+        var cs = [];
+        for(var i = 0; i < colCount; i++){
+            var name = cm.getDataIndex(i);
+            cs[i] = {
+                name : typeof name == 'undefined' ? ds.fields.get(i).name : name,
+                renderer : cm.getRenderer(i),
+                id : cm.getColumnId(i),
+                locked : cm.isLocked(i),
+                has_editor : cm.isCellEditable(i)
+            };
+        }
+
+        startRow = startRow || 0;
+        endRow = typeof endRow == "undefined"? ds.getCount()-1 : endRow;
+
+        // records to render
+        var rs = ds.getRange(startRow, endRow);
+
+        return this.doRender(cs, rs, ds, startRow, colCount, stripe);
+    },
+
+    // As much as I hate to duplicate code, this was branched because FireFox really hates
+    // [].join("") on strings. The performance difference was substantial enough to
+    // branch this function
+    doRender : Roo.isGecko ?
+            function(cs, rs, ds, startRow, colCount, stripe){
+                var ts = this.templates, ct = ts.cell, rt = ts.row;
+                // buffers
+                var buf = "", lbuf = "", cb, lcb, c, p = {}, rp = {}, r, rowIndex;
+                
+                var hasListener = this.grid.hasListener('rowclass');
+                var rowcfg = {};
+                for(var j = 0, len = rs.length; j < len; j++){
+                    r = rs[j]; cb = ""; lcb = ""; rowIndex = (j+startRow);
+                    for(var i = 0; i < colCount; i++){
+                        c = cs[i];
+                        p.cellId = "x-grid-cell-" + rowIndex + "-" + i;
+                        p.id = c.id;
+                        p.css = p.attr = "";
+                        p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
+                        if(p.value == undefined || p.value === "") {
+                            p.value = "&#160;";
+                        }
+                        if(c.has_editor){
+                            p.css += ' x-grid-editable-cell';
+                        }
+                        if(c.dirty && typeof r.modified[c.name] !== 'undefined'){
+                            p.css +=  ' x-grid-dirty-cell';
+                        }
+                        var markup = ct.apply(p);
+                        if(!c.locked){
+                            cb+= markup;
+                        }else{
+                            lcb+= markup;
+                        }
+                    }
+                    var alt = [];
+                    if(stripe && ((rowIndex+1) % 2 == 0)){
+                        alt.push("x-grid-row-alt")
+                    }
+                    if(r.dirty){
+                        alt.push(  " x-grid-dirty-row");
+                    }
+                    rp.cells = lcb;
+                    if(this.getRowClass){
+                        alt.push(this.getRowClass(r, rowIndex));
+                    }
+                    if (hasListener) {
+                        rowcfg = {
+                             
+                            record: r,
+                            rowIndex : rowIndex,
+                            rowClass : ''
+                        };
+                        this.grid.fireEvent('rowclass', this, rowcfg);
+                        alt.push(rowcfg.rowClass);
+                    }
+                    rp.alt = alt.join(" ");
+                    lbuf+= rt.apply(rp);
+                    rp.cells = cb;
+                    buf+=  rt.apply(rp);
+                }
+                return [lbuf, buf];
+            } :
+            function(cs, rs, ds, startRow, colCount, stripe){
+                var ts = this.templates, ct = ts.cell, rt = ts.row;
+                // buffers
+                var buf = [], lbuf = [], cb, lcb, c, p = {}, rp = {}, r, rowIndex;
+                var hasListener = this.grid.hasListener('rowclass');
+ 
+                var rowcfg = {};
+                for(var j = 0, len = rs.length; j < len; j++){
+                    r = rs[j]; cb = []; lcb = []; rowIndex = (j+startRow);
+                    for(var i = 0; i < colCount; i++){
+                        c = cs[i];
+                        p.cellId = "x-grid-cell-" + rowIndex + "-" + i;
+                        p.id = c.id;
+                        p.css = p.attr = "";
+                        p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
+                        if(p.value == undefined || p.value === "") {
+                            p.value = "&#160;";
+                        }
+                        //Roo.log(c);
+                         if(c.has_editor){
+                            p.css += ' x-grid-editable-cell';
+                        }
+                        if(r.dirty && typeof r.modified[c.name] !== 'undefined'){
+                            p.css += ' x-grid-dirty-cell' 
+                        }
+                        
+                        var markup = ct.apply(p);
+                        if(!c.locked){
+                            cb[cb.length] = markup;
+                        }else{
+                            lcb[lcb.length] = markup;
+                        }
+                    }
+                    var alt = [];
+                    if(stripe && ((rowIndex+1) % 2 == 0)){
+                        alt.push( "x-grid-row-alt");
+                    }
+                    if(r.dirty){
+                        alt.push(" x-grid-dirty-row");
+                    }
+                    rp.cells = lcb;
+                    if(this.getRowClass){
+                        alt.push( this.getRowClass(r, rowIndex));
+                    }
+                    if (hasListener) {
+                        rowcfg = {
+                             
+                            record: r,
+                            rowIndex : rowIndex,
+                            rowClass : ''
+                        };
+                        this.grid.fireEvent('rowclass', this, rowcfg);
+                        alt.push(rowcfg.rowClass);
+                    }
+                    
+                    rp.alt = alt.join(" ");
+                    rp.cells = lcb.join("");
+                    lbuf[lbuf.length] = rt.apply(rp);
+                    rp.cells = cb.join("");
+                    buf[buf.length] =  rt.apply(rp);
+                }
+                return [lbuf.join(""), buf.join("")];
+            },
+
+    renderBody : function(){
+        var markup = this.renderRows();
+        var bt = this.templates.body;
+        return [bt.apply({rows: markup[0]}), bt.apply({rows: markup[1]})];
+    },
+
+    /**
+     * Refreshes the grid
+     * @param {Boolean} headersToo
+     */
+    refresh : function(headersToo){
+        this.fireEvent("beforerefresh", this);
+        this.grid.stopEditing();
+        var result = this.renderBody();
+        this.lockedBody.update(result[0]);
+        this.mainBody.update(result[1]);
+        if(headersToo === true){
+            this.updateHeaders();
+            this.updateColumns();
+            this.updateSplitters();
+            this.updateHeaderSortState();
+        }
+        this.syncRowHeights();
+        this.layout();
+        this.fireEvent("refresh", this);
+    },
+
+    handleColumnMove : function(cm, oldIndex, newIndex){
+        this.indexMap = null;
+        var s = this.getScrollState();
+        this.refresh(true);
+        this.restoreScroll(s);
+        this.afterMove(newIndex);
+    },
+
+    afterMove : function(colIndex){
+        if(this.enableMoveAnim && Roo.enableFx){
+            this.fly(this.getHeaderCell(colIndex).firstChild).highlight(this.hlColor);
+        }
+        // if multisort - fix sortOrder, and reload..
+        if (this.grid.dataSource.multiSort) {
+            // the we can call sort again..
+            var dm = this.grid.dataSource;
+            var cm = this.grid.colModel;
+            var so = [];
+            for(var i = 0; i < cm.config.length; i++ ) {
+                
+                if ((typeof(dm.sortToggle[cm.config[i].dataIndex]) == 'undefined')) {
+                    continue; // dont' bother, it's not in sort list or being set.
+                }
+                
+                so.push(cm.config[i].dataIndex);
+            };
+            dm.sortOrder = so;
+            dm.load(dm.lastOptions);
+            
+            
+        }
+        
+    },
+
+    updateCell : function(dm, rowIndex, dataIndex){
+        var colIndex = this.getColumnIndexByDataIndex(dataIndex);
+        if(typeof colIndex == "undefined"){ // not present in grid
+            return;
+        }
+        var cm = this.grid.colModel;
+        var cell = this.getCell(rowIndex, colIndex);
+        var cellText = this.getCellText(rowIndex, colIndex);
+
+        var p = {
+            cellId : "x-grid-cell-" + rowIndex + "-" + colIndex,
+            id : cm.getColumnId(colIndex),
+            css: colIndex == cm.getColumnCount()-1 ? "x-grid-col-last" : ""
+        };
+        var renderer = cm.getRenderer(colIndex);
+        var val = renderer(dm.getValueAt(rowIndex, dataIndex), p, rowIndex, colIndex, dm);
+        if(typeof val == "undefined" || val === "") {
+            val = "&#160;";
+        }
+        cellText.innerHTML = val;
+        cell.className = this.cellClass + " " + this.idToCssName(p.cellId) + " " + p.css;
+        this.syncRowHeights(rowIndex, rowIndex);
+    },
+
+    calcColumnWidth : function(colIndex, maxRowsToMeasure){
+        var maxWidth = 0;
+        if(this.grid.autoSizeHeaders){
+            var h = this.getHeaderCellMeasure(colIndex);
+            maxWidth = Math.max(maxWidth, h.scrollWidth);
+        }
+        var tb, index;
+        if(this.cm.isLocked(colIndex)){
+            tb = this.getLockedTable();
+            index = colIndex;
+        }else{
+            tb = this.getBodyTable();
+            index = colIndex - this.cm.getLockedCount();
+        }
+        if(tb && tb.rows){
+            var rows = tb.rows;
+            var stopIndex = Math.min(maxRowsToMeasure || rows.length, rows.length);
+            for(var i = 0; i < stopIndex; i++){
+                var cell = rows[i].childNodes[index].firstChild;
+                maxWidth = Math.max(maxWidth, cell.scrollWidth);
+            }
+        }
+        return maxWidth + /*margin for error in IE*/ 5;
+    },
+    /**
+     * Autofit a column to its content.
+     * @param {Number} colIndex
+     * @param {Boolean} forceMinSize true to force the column to go smaller if possible
+     */
+     autoSizeColumn : function(colIndex, forceMinSize, suppressEvent){
+         if(this.cm.isHidden(colIndex)){
+             return; // can't calc a hidden column
+         }
+        if(forceMinSize){
+            var cid = this.cm.getColumnId(colIndex);
+            this.css.updateRule(this.colSelector +this.idToCssName( cid), "width", this.grid.minColumnWidth + "px");
+           if(this.grid.autoSizeHeaders){
+               this.css.updateRule(this.hdSelector + this.idToCssName(cid), "width", this.grid.minColumnWidth + "px");
+           }
+        }
+        var newWidth = this.calcColumnWidth(colIndex);
+        this.cm.setColumnWidth(colIndex,
+            Math.max(this.grid.minColumnWidth, newWidth), suppressEvent);
+        if(!suppressEvent){
+            this.grid.fireEvent("columnresize", colIndex, newWidth);
+        }
+    },
+
+    /**
+     * Autofits all columns to their content and then expands to fit any extra space in the grid
+     */
+     autoSizeColumns : function(){
+        var cm = this.grid.colModel;
+        var colCount = cm.getColumnCount();
+        for(var i = 0; i < colCount; i++){
+            this.autoSizeColumn(i, true, true);
+        }
+        if(cm.getTotalWidth() < this.scroller.dom.clientWidth){
+            this.fitColumns();
+        }else{
+            this.updateColumns();
+            this.layout();
+        }
+    },
+
+    /**
+     * Autofits all columns to the grid's width proportionate with their current size
+     * @param {Boolean} reserveScrollSpace Reserve space for a scrollbar
+     */
+    fitColumns : function(reserveScrollSpace){
+        var cm = this.grid.colModel;
+        var colCount = cm.getColumnCount();
+        var cols = [];
+        var width = 0;
+        var i, w;
+        for (i = 0; i < colCount; i++){
+            if(!cm.isHidden(i) && !cm.isFixed(i)){
+                w = cm.getColumnWidth(i);
+                cols.push(i);
+                cols.push(w);
+                width += w;
+            }
+        }
+        var avail = Math.min(this.scroller.dom.clientWidth, this.el.getWidth());
+        if(reserveScrollSpace){
+            avail -= 17;
+        }
+        var frac = (avail - cm.getTotalWidth())/width;
+        while (cols.length){
+            w = cols.pop();
+            i = cols.pop();
+            cm.setColumnWidth(i, Math.floor(w + w*frac), true);
+        }
+        this.updateColumns();
+        this.layout();
+    },
+
+    onRowSelect : function(rowIndex){
+        var row = this.getRowComposite(rowIndex);
+        row.addClass("x-grid-row-selected");
+    },
+
+    onRowDeselect : function(rowIndex){
+        var row = this.getRowComposite(rowIndex);
+        row.removeClass("x-grid-row-selected");
+    },
+
+    onCellSelect : function(row, col){
+        var cell = this.getCell(row, col);
+        if(cell){
+            Roo.fly(cell).addClass("x-grid-cell-selected");
+        }
+    },
+
+    onCellDeselect : function(row, col){
+        var cell = this.getCell(row, col);
+        if(cell){
+            Roo.fly(cell).removeClass("x-grid-cell-selected");
+        }
+    },
+
+    updateHeaderSortState : function(){
+        
+        // sort state can be single { field: xxx, direction : yyy}
+        // or   { xxx=>ASC , yyy : DESC ..... }
+        
+        var mstate = {};
+        if (!this.ds.multiSort) { 
+            var state = this.ds.getSortState();
+            if(!state){
+                return;
+            }
+            mstate[state.field] = state.direction;
+            // FIXME... - this is not used here.. but might be elsewhere..
+            this.sortState = state;
+            
+        } else {
+            mstate = this.ds.sortToggle;
+        }
+        //remove existing sort classes..
+        
+        var sc = this.sortClasses;
+        var hds = this.el.select(this.headerSelector).removeClass(sc);
+        
+        for(var f in mstate) {
+        
+            var sortColumn = this.cm.findColumnIndex(f);
+            
+            if(sortColumn != -1){
+                var sortDir = mstate[f];        
+                hds.item(sortColumn).addClass(sc[sortDir == "DESC" ? 1 : 0]);
+            }
+        }
+        
+         
+        
+    },
+
+
+    handleHeaderClick : function(g, index,e){
+        
+        Roo.log("header click");
+        
+        if (Roo.isTouch) {
+            // touch events on header are handled by context
+            this.handleHdCtx(g,index,e);
+            return;
+        }
+        
+        
+        if(this.headersDisabled){
+            return;
+        }
+        var dm = g.dataSource, cm = g.colModel;
+        if(!cm.isSortable(index)){
+            return;
+        }
+        g.stopEditing();
+        
+        if (dm.multiSort) {
+            // update the sortOrder
+            var so = [];
+            for(var i = 0; i < cm.config.length; i++ ) {
+                
+                if ((typeof(dm.sortToggle[cm.config[i].dataIndex]) == 'undefined') && (index != i)) {
+                    continue; // dont' bother, it's not in sort list or being set.
+                }
+                
+                so.push(cm.config[i].dataIndex);
+            };
+            dm.sortOrder = so;
+        }
+        
+        
+        dm.sort(cm.getDataIndex(index));
+    },
+
+
+    destroy : function(){
+        if(this.colMenu){
+            this.colMenu.removeAll();
+            Roo.menu.MenuMgr.unregister(this.colMenu);
+            this.colMenu.getEl().remove();
+            delete this.colMenu;
+        }
+        if(this.hmenu){
+            this.hmenu.removeAll();
+            Roo.menu.MenuMgr.unregister(this.hmenu);
+            this.hmenu.getEl().remove();
+            delete this.hmenu;
+        }
+        if(this.grid.enableColumnMove){
+            var dds = Roo.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
+            if(dds){
+                for(var dd in dds){
+                    if(!dds[dd].config.isTarget && dds[dd].dragElId){
+                        var elid = dds[dd].dragElId;
+                        dds[dd].unreg();
+                        Roo.get(elid).remove();
+                    } else if(dds[dd].config.isTarget){
+                        dds[dd].proxyTop.remove();
+                        dds[dd].proxyBottom.remove();
+                        dds[dd].unreg();
+                    }
+                    if(Roo.dd.DDM.locationCache[dd]){
+                        delete Roo.dd.DDM.locationCache[dd];
+                    }
+                }
+                delete Roo.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
+            }
+        }
+        Roo.util.CSS.removeStyleSheet(this.idToCssName(this.grid.id) + '-cssrules');
+        this.bind(null, null);
+        Roo.EventManager.removeResizeListener(this.onWindowResize, this);
+    },
+
+    handleLockChange : function(){
+        this.refresh(true);
+    },
+
+    onDenyColumnLock : function(){
+
+    },
+
+    onDenyColumnHide : function(){
+
+    },
+
+    handleHdMenuClick : function(item){
+        var index = this.hdCtxIndex;
+        var cm = this.cm, ds = this.ds;
+        switch(item.id){
+            case "asc":
+                ds.sort(cm.getDataIndex(index), "ASC");
+                break;
+            case "desc":
+                ds.sort(cm.getDataIndex(index), "DESC");
+                break;
+            case "lock":
+                var lc = cm.getLockedCount();
+                if(cm.getColumnCount(true) <= lc+1){
+                    this.onDenyColumnLock();
+                    return;
+                }
+                if(lc != index){
+                    cm.setLocked(index, true, true);
+                    cm.moveColumn(index, lc);
+                    this.grid.fireEvent("columnmove", index, lc);
+                }else{
+                    cm.setLocked(index, true);
+                }
+            break;
+            case "unlock":
+                var lc = cm.getLockedCount();
+                if((lc-1) != index){
+                    cm.setLocked(index, false, true);
+                    cm.moveColumn(index, lc-1);
+                    this.grid.fireEvent("columnmove", index, lc-1);
+                }else{
+                    cm.setLocked(index, false);
+                }
+            break;
+            case 'wider': // used to expand cols on touch..
+            case 'narrow':
+                var cw = cm.getColumnWidth(index);
+                cw += (item.id == 'wider' ? 1 : -1) * 50;
+                cw = Math.max(0, cw);
+                cw = Math.min(cw,4000);
+                cm.setColumnWidth(index, cw);
+                break;
+                
+            default:
+                index = cm.getIndexById(item.id.substr(4));
+                if(index != -1){
+                    if(item.checked && cm.getColumnCount(true) <= 1){
+                        this.onDenyColumnHide();
+                        return false;
+                    }
+                    cm.setHidden(index, item.checked);
+                }
+        }
+        return true;
+    },
+
+    beforeColMenuShow : function(){
+        var cm = this.cm,  colCount = cm.getColumnCount();
+        this.colMenu.removeAll();
+        for(var i = 0; i < colCount; i++){
+            this.colMenu.add(new Roo.menu.CheckItem({
+                id: "col-"+cm.getColumnId(i),
+                text: cm.getColumnHeader(i),
+                checked: !cm.isHidden(i),
+                hideOnClick:false
+            }));
+        }
+    },
+
+    handleHdCtx : function(g, index, e){
+        e.stopEvent();
+        var hd = this.getHeaderCell(index);
+        this.hdCtxIndex = index;
+        var ms = this.hmenu.items, cm = this.cm;
+        ms.get("asc").setDisabled(!cm.isSortable(index));
+        ms.get("desc").setDisabled(!cm.isSortable(index));
+        if(this.grid.enableColLock !== false){
+            ms.get("lock").setDisabled(cm.isLocked(index));
+            ms.get("unlock").setDisabled(!cm.isLocked(index));
+        }
+        this.hmenu.show(hd, "tl-bl");
+    },
+
+    handleHdOver : function(e){
+        var hd = this.findHeaderCell(e.getTarget());
+        if(hd && !this.headersDisabled){
+            if(this.grid.colModel.isSortable(this.getCellIndex(hd))){
+               this.fly(hd).addClass("x-grid-hd-over");
+            }
+        }
+    },
+
+    handleHdOut : function(e){
+        var hd = this.findHeaderCell(e.getTarget());
+        if(hd){
+            this.fly(hd).removeClass("x-grid-hd-over");
+        }
+    },
+
+    handleSplitDblClick : function(e, t){
+        var i = this.getCellIndex(t);
+        if(this.grid.enableColumnResize !== false && this.cm.isResizable(i) && !this.cm.isFixed(i)){
+            this.autoSizeColumn(i, true);
+            this.layout();
+        }
+    },
+
+    render : function(){
+
+        var cm = this.cm;
+        var colCount = cm.getColumnCount();
+
+        if(this.grid.monitorWindowResize === true){
+            Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
+        }
+        var header = this.renderHeaders();
+        var body = this.templates.body.apply({rows:""});
+        var html = this.templates.master.apply({
+            lockedBody: body,
+            body: body,
+            lockedHeader: header[0],
+            header: header[1]
+        });
+
+        //this.updateColumns();
+
+        this.grid.getGridEl().dom.innerHTML = html;
+
+        this.initElements();
+        
+        // a kludge to fix the random scolling effect in webkit
+        this.el.on("scroll", function() {
+            this.el.dom.scrollTop=0; // hopefully not recursive..
+        },this);
+
+        this.scroller.on("scroll", this.handleScroll, this);
+        this.lockedBody.on("mousewheel", this.handleWheel, this);
+        this.mainBody.on("mousewheel", this.handleWheel, this);
+
+        this.mainHd.on("mouseover", this.handleHdOver, this);
+        this.mainHd.on("mouseout", this.handleHdOut, this);
+        this.mainHd.on("dblclick", this.handleSplitDblClick, this,
+                {delegate: "."+this.splitClass});
+
+        this.lockedHd.on("mouseover", this.handleHdOver, this);
+        this.lockedHd.on("mouseout", this.handleHdOut, this);
+        this.lockedHd.on("dblclick", this.handleSplitDblClick, this,
+                {delegate: "."+this.splitClass});
+
+        if(this.grid.enableColumnResize !== false && Roo.grid.SplitDragZone){
+            new Roo.grid.SplitDragZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
+        }
+
+        this.updateSplitters();
+
+        if(this.grid.enableColumnMove && Roo.grid.HeaderDragZone){
+            new Roo.grid.HeaderDragZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
+            new Roo.grid.HeaderDropZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
+        }
+
+        if(this.grid.enableCtxMenu !== false && Roo.menu.Menu){
+            this.hmenu = new Roo.menu.Menu({id: this.grid.id + "-hctx"});
+            this.hmenu.add(
+                {id:"asc", text: this.sortAscText, cls: "xg-hmenu-sort-asc"},
+                {id:"desc", text: this.sortDescText, cls: "xg-hmenu-sort-desc"}
+            );
+            if(this.grid.enableColLock !== false){
+                this.hmenu.add('-',
+                    {id:"lock", text: this.lockText, cls: "xg-hmenu-lock"},
+                    {id:"unlock", text: this.unlockText, cls: "xg-hmenu-unlock"}
+                );
+            }
+            if (Roo.isTouch) {
+                 this.hmenu.add('-',
+                    {id:"wider", text: this.columnsWiderText},
+                    {id:"narrow", text: this.columnsNarrowText }
+                );
+                
+                 
+            }
+            
+            if(this.grid.enableColumnHide !== false){
+
+                this.colMenu = new Roo.menu.Menu({id:this.grid.id + "-hcols-menu"});
+                this.colMenu.on("beforeshow", this.beforeColMenuShow, this);
+                this.colMenu.on("itemclick", this.handleHdMenuClick, this);
+
+                this.hmenu.add('-',
+                    {id:"columns", text: this.columnsText, menu: this.colMenu}
+                );
+            }
+            this.hmenu.on("itemclick", this.handleHdMenuClick, this);
+
+            this.grid.on("headercontextmenu", this.handleHdCtx, this);
+        }
+
+        if((this.grid.enableDragDrop || this.grid.enableDrag) && Roo.grid.GridDragZone){
+            this.dd = new Roo.grid.GridDragZone(this.grid, {
+                ddGroup : this.grid.ddGroup || 'GridDD'
+            });
+            
+        }
+
+        /*
+        for(var i = 0; i < colCount; i++){
+            if(cm.isHidden(i)){
+                this.hideColumn(i);
+            }
+            if(cm.config[i].align){
+                this.css.updateRule(this.colSelector + i, "textAlign", cm.config[i].align);
+                this.css.updateRule(this.hdSelector + i, "textAlign", cm.config[i].align);
+            }
+        }*/
+        
+        this.updateHeaderSortState();
+
+        this.beforeInitialResize();
+        this.layout(true);
+
+        // two part rendering gives faster view to the user
+        this.renderPhase2.defer(1, this);
+    },
+
+    renderPhase2 : function(){
+        // render the rows now
+        this.refresh();
+        if(this.grid.autoSizeColumns){
+            this.autoSizeColumns();
+        }
+    },
+
+    beforeInitialResize : function(){
+
+    },
+
+    onColumnSplitterMoved : function(i, w){
+        this.userResized = true;
+        var cm = this.grid.colModel;
+        cm.setColumnWidth(i, w, true);
+        var cid = cm.getColumnId(i);
+        this.css.updateRule(this.colSelector + this.idToCssName(cid), "width", (w-this.borderWidth) + "px");
+        this.css.updateRule(this.hdSelector + this.idToCssName(cid), "width", (w-this.borderWidth) + "px");
+        this.updateSplitters();
+        this.layout();
+        this.grid.fireEvent("columnresize", i, w);
+    },
+
+    syncRowHeights : function(startIndex, endIndex){
+        if(this.grid.enableRowHeightSync === true && this.cm.getLockedCount() > 0){
+            startIndex = startIndex || 0;
+            var mrows = this.getBodyTable().rows;
+            var lrows = this.getLockedTable().rows;
+            var len = mrows.length-1;
+            endIndex = Math.min(endIndex || len, len);
+            for(var i = startIndex; i <= endIndex; i++){
+                var m = mrows[i], l = lrows[i];
+                var h = Math.max(m.offsetHeight, l.offsetHeight);
+                m.style.height = l.style.height = h + "px";
+            }
+        }
+    },
+
+    layout : function(initialRender, is2ndPass){
+        var g = this.grid;
+        var auto = g.autoHeight;
+        var scrollOffset = 16;
+        var c = g.getGridEl(), cm = this.cm,
+                expandCol = g.autoExpandColumn,
+                gv = this;
+        //c.beginMeasure();
+
+        if(!c.dom.offsetWidth){ // display:none?
+            if(initialRender){
+                this.lockedWrap.show();
+                this.mainWrap.show();
+            }
+            return;
+        }
+
+        var hasLock = this.cm.isLocked(0);
+
+        var tbh = this.headerPanel.getHeight();
+        var bbh = this.footerPanel.getHeight();
+
+        if(auto){
+            var ch = this.getBodyTable().offsetHeight + tbh + bbh + this.mainHd.getHeight();
+            var newHeight = ch + c.getBorderWidth("tb");
+            if(g.maxHeight){
+                newHeight = Math.min(g.maxHeight, newHeight);
+            }
+            c.setHeight(newHeight);
+        }
+
+        if(g.autoWidth){
+            c.setWidth(cm.getTotalWidth()+c.getBorderWidth('lr'));
+        }
+
+        var s = this.scroller;
+
+        var csize = c.getSize(true);
+
+        this.el.setSize(csize.width, csize.height);
+
+        this.headerPanel.setWidth(csize.width);
+        this.footerPanel.setWidth(csize.width);
+
+        var hdHeight = this.mainHd.getHeight();
+        var vw = csize.width;
+        var vh = csize.height - (tbh + bbh);
+
+        s.setSize(vw, vh);
+
+        var bt = this.getBodyTable();
+        var ltWidth = hasLock ?
+                      Math.max(this.getLockedTable().offsetWidth, this.lockedHd.dom.firstChild.offsetWidth) : 0;
+
+        var scrollHeight = bt.offsetHeight;
+        var scrollWidth = ltWidth + bt.offsetWidth;
+        var vscroll = false, hscroll = false;
+
+        this.scrollSizer.setSize(scrollWidth, scrollHeight+hdHeight);
+
+        var lw = this.lockedWrap, mw = this.mainWrap;
+        var lb = this.lockedBody, mb = this.mainBody;
+
+        setTimeout(function(){
+            var t = s.dom.offsetTop;
+            var w = s.dom.clientWidth,
+                h = s.dom.clientHeight;
+
+            lw.setTop(t);
+            lw.setSize(ltWidth, h);
+
+            mw.setLeftTop(ltWidth, t);
+            mw.setSize(w-ltWidth, h);
+
+            lb.setHeight(h-hdHeight);
+            mb.setHeight(h-hdHeight);
+
+            if(is2ndPass !== true && !gv.userResized && expandCol){
+                // high speed resize without full column calculation
+                
+                var ci = cm.getIndexById(expandCol);
+                if (ci < 0) {
+                    ci = cm.findColumnIndex(expandCol);
+                }
+                ci = Math.max(0, ci); // make sure it's got at least the first col.
+                var expandId = cm.getColumnId(ci);
+                var  tw = cm.getTotalWidth(false);
+                var currentWidth = cm.getColumnWidth(ci);
+                var cw = Math.min(Math.max(((w-tw)+currentWidth-2)-/*scrollbar*/(w <= s.dom.offsetWidth ? 0 : 18), g.autoExpandMin), g.autoExpandMax);
+                if(currentWidth != cw){
+                    cm.setColumnWidth(ci, cw, true);
+                    gv.css.updateRule(gv.colSelector+gv.idToCssName(expandId), "width", (cw - gv.borderWidth) + "px");
+                    gv.css.updateRule(gv.hdSelector+gv.idToCssName(expandId), "width", (cw - gv.borderWidth) + "px");
+                    gv.updateSplitters();
+                    gv.layout(false, true);
+                }
+            }
+
+            if(initialRender){
+                lw.show();
+                mw.show();
+            }
+            //c.endMeasure();
+        }, 10);
+    },
+
+    onWindowResize : function(){
+        if(!this.grid.monitorWindowResize || this.grid.autoHeight){
+            return;
+        }
+        this.layout();
+    },
+
+    appendFooter : function(parentEl){
+        return null;
+    },
+
+    sortAscText : "Sort Ascending",
+    sortDescText : "Sort Descending",
+    lockText : "Lock Column",
+    unlockText : "Unlock Column",
+    columnsText : "Columns",
+ 
+    columnsWiderText : "Wider",
+    columnsNarrowText : "Thinner"
+});
+
+
+Roo.grid.GridView.ColumnDragZone = function(grid, hd){
+    Roo.grid.GridView.ColumnDragZone.superclass.constructor.call(this, grid, hd, null);
+    this.proxy.el.addClass('x-grid3-col-dd');
+};
+
+Roo.extend(Roo.grid.GridView.ColumnDragZone, Roo.grid.HeaderDragZone, {
+    handleMouseDown : function(e){
+
+    },
+
+    callHandleMouseDown : function(e){
+        Roo.grid.GridView.ColumnDragZone.superclass.handleMouseDown.call(this, e);
+    }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+// private
+// This is a support class used internally by the Grid components
+Roo.grid.SplitDragZone = function(grid, hd, hd2){
+    this.grid = grid;
+    this.view = grid.getView();
+    this.proxy = this.view.resizeProxy;
+    Roo.grid.SplitDragZone.superclass.constructor.call(this, hd,
+        "gridSplitters" + this.grid.getGridEl().id, {
+        dragElId : Roo.id(this.proxy.dom), resizeFrame:false
+    });
+    this.setHandleElId(Roo.id(hd));
+    this.setOuterHandleElId(Roo.id(hd2));
+    this.scroll = false;
+};
+Roo.extend(Roo.grid.SplitDragZone, Roo.dd.DDProxy, {
+    fly: Roo.Element.fly,
+
+    b4StartDrag : function(x, y){
+        this.view.headersDisabled = true;
+        this.proxy.setHeight(this.view.mainWrap.getHeight());
+        var w = this.cm.getColumnWidth(this.cellIndex);
+        var minw = Math.max(w-this.grid.minColumnWidth, 0);
+        this.resetConstraints();
+        this.setXConstraint(minw, 1000);
+        this.setYConstraint(0, 0);
+        this.minX = x - minw;
+        this.maxX = x + 1000;
+        this.startPos = x;
+        Roo.dd.DDProxy.prototype.b4StartDrag.call(this, x, y);
+    },
+
+
+    handleMouseDown : function(e){
+        ev = Roo.EventObject.setEvent(e);
+        var t = this.fly(ev.getTarget());
+        if(t.hasClass("x-grid-split")){
+            this.cellIndex = this.view.getCellIndex(t.dom);
+            this.split = t.dom;
+            this.cm = this.grid.colModel;
+            if(this.cm.isResizable(this.cellIndex) && !this.cm.isFixed(this.cellIndex)){
+                Roo.grid.SplitDragZone.superclass.handleMouseDown.apply(this, arguments);
+            }
+        }
+    },
+
+    endDrag : function(e){
+        this.view.headersDisabled = false;
+        var endX = Math.max(this.minX, Roo.lib.Event.getPageX(e));
+        var diff = endX - this.startPos;
+        this.view.onColumnSplitterMoved(this.cellIndex, this.cm.getColumnWidth(this.cellIndex)+diff);
+    },
+
+    autoOffset : function(){
+        this.setDelta(0,0);
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+// private
+// This is a support class used internally by the Grid components
+Roo.grid.GridDragZone = function(grid, config){
+    this.view = grid.getView();
+    Roo.grid.GridDragZone.superclass.constructor.call(this, this.view.mainBody.dom, config);
+    if(this.view.lockedBody){
+        this.setHandleElId(Roo.id(this.view.mainBody.dom));
+        this.setOuterHandleElId(Roo.id(this.view.lockedBody.dom));
+    }
+    this.scroll = false;
+    this.grid = grid;
+    this.ddel = document.createElement('div');
+    this.ddel.className = 'x-grid-dd-wrap';
+};
+
+Roo.extend(Roo.grid.GridDragZone, Roo.dd.DragZone, {
+    ddGroup : "GridDD",
+
+    getDragData : function(e){
+        var t = Roo.lib.Event.getTarget(e);
+        var rowIndex = this.view.findRowIndex(t);
+        var sm = this.grid.selModel;
+            
+        //Roo.log(rowIndex);
+        
+        if (sm.getSelectedCell) {
+            // cell selection..
+            if (!sm.getSelectedCell()) {
+                return false;
+            }
+            if (rowIndex != sm.getSelectedCell()[0]) {
+                return false;
+            }
+        
+        }
+        
+        if(rowIndex !== false){
+            
+            // if editorgrid.. 
+            
+            
+            //Roo.log([ sm.getSelectedCell() ? sm.getSelectedCell()[0] : 'NO' , rowIndex ]);
+               
+            //if(!sm.isSelected(rowIndex) || e.hasModifier()){
+              //  
+            //}
+            if (e.hasModifier()){
+                sm.handleMouseDown(e, t); // non modifier buttons are handled by row select.
+            }
+            
+            Roo.log("getDragData");
+            
+            return {
+                grid: this.grid,
+                ddel: this.ddel,
+                rowIndex: rowIndex,
+                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();
+        this.proxy.update(this.ddel);
+        // fire start drag?
+    },
+
+    afterRepair : function(){
+        this.dragging = false;
+    },
+
+    getRepairXY : function(e, data){
+        return false;
+    },
+
+    onEndDrag : function(data, e){
+        // fire end drag?
+    },
+
+    onValidDrop : function(dd, e, id){
+        // fire drag drop?
+        this.hideProxy();
+    },
+
+    beforeInvalidDrop : function(e, id){
+
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+
+/**
+ * @class Roo.grid.ColumnModel
+ * @extends Roo.util.Observable
+ * This is the default implementation of a ColumnModel used by the Grid. It defines
+ * the columns in the grid.
+ * <br>Usage:<br>
+ <pre><code>
+ var colModel = new Roo.grid.ColumnModel([
+	{header: "Ticker", width: 60, sortable: true, locked: true},
+	{header: "Company Name", width: 150, sortable: true},
+	{header: "Market Cap.", width: 100, sortable: true},
+	{header: "$ Sales", width: 100, sortable: true, renderer: money},
+	{header: "Employees", width: 100, sortable: true, resizable: false}
+ ]);
+ </code></pre>
+ * <p>
+ 
+ * The config options listed for this class are options which may appear in each
+ * individual column definition.
+ * <br/>RooJS Fix - column id's are not sequential but use Roo.id() - fixes bugs with layouts.
+ * @constructor
+ * @param {Object} config An Array of column config objects. See this class's
+ * config objects for details.
+*/
+Roo.grid.ColumnModel = function(config){
+	/**
+     * The config passed into the constructor
+     */
+    this.config = config;
+    this.lookup = {};
+
+    // if no id, create one
+    // if the column does not have a dataIndex mapping,
+    // map it to the order it is in the config
+    for(var i = 0, len = config.length; i < len; i++){
+        var c = config[i];
+        if(typeof c.dataIndex == "undefined"){
+            c.dataIndex = i;
+        }
+        if(typeof c.renderer == "string"){
+            c.renderer = Roo.util.Format[c.renderer];
+        }
+        if(typeof c.id == "undefined"){
+            c.id = Roo.id();
+        }
+        if(c.editor && c.editor.xtype){
+            c.editor  = Roo.factory(c.editor, Roo.grid);
+        }
+        if(c.editor && c.editor.isFormField){
+            c.editor = new Roo.grid.GridEditor(c.editor);
+        }
+        this.lookup[c.id] = c;
+    }
+
+    /**
+     * The width of columns which have no width specified (defaults to 100)
+     * @type Number
+     */
+    this.defaultWidth = 100;
+
+    /**
+     * Default sortable of columns which have no sortable specified (defaults to false)
+     * @type Boolean
+     */
+    this.defaultSortable = false;
+
+    this.addEvents({
+        /**
+	     * @event widthchange
+	     * Fires when the width of a column changes.
+	     * @param {ColumnModel} this
+	     * @param {Number} columnIndex The column index
+	     * @param {Number} newWidth The new width
+	     */
+	    "widthchange": true,
+        /**
+	     * @event headerchange
+	     * Fires when the text of a header changes.
+	     * @param {ColumnModel} this
+	     * @param {Number} columnIndex The column index
+	     * @param {Number} newText The new header text
+	     */
+	    "headerchange": true,
+        /**
+	     * @event hiddenchange
+	     * Fires when a column is hidden or "unhidden".
+	     * @param {ColumnModel} this
+	     * @param {Number} columnIndex The column index
+	     * @param {Boolean} hidden true if hidden, false otherwise
+	     */
+	    "hiddenchange": true,
+	    /**
+         * @event columnmoved
+         * Fires when a column is moved.
+         * @param {ColumnModel} this
+         * @param {Number} oldIndex
+         * @param {Number} newIndex
+         */
+        "columnmoved" : true,
+        /**
+         * @event columlockchange
+         * Fires when a column's locked state is changed
+         * @param {ColumnModel} this
+         * @param {Number} colIndex
+         * @param {Boolean} locked true if locked
+         */
+        "columnlockchange" : true
+    });
+    Roo.grid.ColumnModel.superclass.constructor.call(this);
+};
+Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
+    /**
+     * @cfg {String} header The header text to display in the Grid view.
+     */
+    /**
+     * @cfg {String} dataIndex (Optional) The name of the field in the grid's {@link Roo.data.Store}'s
+     * {@link Roo.data.Record} definition from which to draw the column's value. If not
+     * specified, the column's index is used as an index into the Record's data Array.
+     */
+    /**
+     * @cfg {Number} width (Optional) The initial width in pixels of the column. Using this
+     * instead of {@link Roo.grid.Grid#autoSizeColumns} is more efficient.
+     */
+    /**
+     * @cfg {Boolean} sortable (Optional) True if sorting is to be allowed on this column.
+     * Defaults to the value of the {@link #defaultSortable} property.
+     * Whether local/remote sorting is used is specified in {@link Roo.data.Store#remoteSort}.
+     */
+    /**
+     * @cfg {Boolean} locked (Optional) True to lock the column in place while scrolling the Grid.  Defaults to false.
+     */
+    /**
+     * @cfg {Boolean} fixed (Optional) True if the column width cannot be changed.  Defaults to false.
+     */
+    /**
+     * @cfg {Boolean} resizable (Optional) False to disable column resizing. Defaults to true.
+     */
+    /**
+     * @cfg {Boolean} hidden (Optional) True to hide the column. Defaults to false.
+     */
+    /**
+     * @cfg {Function} renderer (Optional) A function used to generate HTML markup for a cell
+     * given the cell's data value. See {@link #setRenderer}. If not specified, the
+     * default renderer uses the raw data value. 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 {String} align (Optional) Set the CSS text-align property of the column.  Defaults to undefined.
+     */
+    /**
+     * @cfg {String} cursor (Optional)
+     */
+    /**
+     * @cfg {String} tooltip (Optional)
+     */
+    /**
+     * @cfg {Number} xs (Optional)
+     */
+    /**
+     * @cfg {Number} sm (Optional)
+     */
+    /**
+     * @cfg {Number} md (Optional)
+     */
+    /**
+     * @cfg {Number} lg (Optional)
+     */
+    /**
+     * Returns the id of the column at the specified index.
+     * @param {Number} index The column index
+     * @return {String} the id
+     */
+    getColumnId : function(index){
+        return this.config[index].id;
+    },
+
+    /**
+     * Returns the column for a specified id.
+     * @param {String} id The column id
+     * @return {Object} the column
+     */
+    getColumnById : function(id){
+        return this.lookup[id];
+    },
+
+    
+    /**
+     * Returns the column for a specified dataIndex.
+     * @param {String} dataIndex The column dataIndex
+     * @return {Object|Boolean} the column or false if not found
+     */
+    getColumnByDataIndex: function(dataIndex){
+        var index = this.findColumnIndex(dataIndex);
+        return index > -1 ? this.config[index] : false;
+    },
+    
+    /**
+     * Returns the index for a specified column id.
+     * @param {String} id The column id
+     * @return {Number} the index, or -1 if not found
+     */
+    getIndexById : function(id){
+        for(var i = 0, len = this.config.length; i < len; i++){
+            if(this.config[i].id == id){
+                return i;
+            }
+        }
+        return -1;
+    },
+    
+    /**
+     * Returns the index for a specified column dataIndex.
+     * @param {String} dataIndex The column dataIndex
+     * @return {Number} the index, or -1 if not found
+     */
+    
+    findColumnIndex : function(dataIndex){
+        for(var i = 0, len = this.config.length; i < len; i++){
+            if(this.config[i].dataIndex == dataIndex){
+                return i;
+            }
+        }
+        return -1;
+    },
+    
+    
+    moveColumn : function(oldIndex, newIndex){
+        var c = this.config[oldIndex];
+        this.config.splice(oldIndex, 1);
+        this.config.splice(newIndex, 0, c);
+        this.dataMap = null;
+        this.fireEvent("columnmoved", this, oldIndex, newIndex);
+    },
+
+    isLocked : function(colIndex){
+        return this.config[colIndex].locked === true;
+    },
+
+    setLocked : function(colIndex, value, suppressEvent){
+        if(this.isLocked(colIndex) == value){
+            return;
+        }
+        this.config[colIndex].locked = value;
+        if(!suppressEvent){
+            this.fireEvent("columnlockchange", this, colIndex, value);
+        }
+    },
+
+    getTotalLockedWidth : function(){
+        var totalWidth = 0;
+        for(var i = 0; i < this.config.length; i++){
+            if(this.isLocked(i) && !this.isHidden(i)){
+                this.totalWidth += this.getColumnWidth(i);
+            }
+        }
+        return totalWidth;
+    },
+
+    getLockedCount : function(){
+        for(var i = 0, len = this.config.length; i < len; i++){
+            if(!this.isLocked(i)){
+                return i;
+            }
+        }
+    },
+
+    /**
+     * Returns the number of columns.
+     * @return {Number}
+     */
+    getColumnCount : function(visibleOnly){
+        if(visibleOnly === true){
+            var c = 0;
+            for(var i = 0, len = this.config.length; i < len; i++){
+                if(!this.isHidden(i)){
+                    c++;
+                }
+            }
+            return c;
+        }
+        return this.config.length;
+    },
+
+    /**
+     * Returns the column configs that return true by the passed function that is called with (columnConfig, index)
+     * @param {Function} fn
+     * @param {Object} scope (optional)
+     * @return {Array} result
+     */
+    getColumnsBy : function(fn, scope){
+        var r = [];
+        for(var i = 0, len = this.config.length; i < len; i++){
+            var c = this.config[i];
+            if(fn.call(scope||this, c, i) === true){
+                r[r.length] = c;
+            }
+        }
+        return r;
+    },
+
+    /**
+     * Returns true if the specified column is sortable.
+     * @param {Number} col The column index
+     * @return {Boolean}
+     */
+    isSortable : function(col){
+        if(typeof this.config[col].sortable == "undefined"){
+            return this.defaultSortable;
+        }
+        return this.config[col].sortable;
+    },
+
+    /**
+     * Returns the rendering (formatting) function defined for the column.
+     * @param {Number} col The column index.
+     * @return {Function} The function used to render the cell. See {@link #setRenderer}.
+     */
+    getRenderer : function(col){
+        if(!this.config[col].renderer){
+            return Roo.grid.ColumnModel.defaultRenderer;
+        }
+        return this.config[col].renderer;
+    },
+
+    /**
+     * Sets the rendering (formatting) function for a column.
+     * @param {Number} col The column index
+     * @param {Function} fn The function to use to process the cell's raw data
+     * to return HTML markup for the grid view. The render function is called with
+     * the following parameters:<ul>
+     * <li>Data value.</li>
+     * <li>Cell metadata. An object in which you may set the following attributes:<ul>
+     * <li>css A CSS style string to apply to the table cell.</li>
+     * <li>attr An HTML attribute definition string to apply to the data container element <i>within</i> the table cell.</li></ul>
+     * <li>The {@link Roo.data.Record} from which the data was extracted.</li>
+     * <li>Row index</li>
+     * <li>Column index</li>
+     * <li>The {@link Roo.data.Store} object from which the Record was extracted</li></ul>
+     */
+    setRenderer : function(col, fn){
+        this.config[col].renderer = fn;
+    },
+
+    /**
+     * Returns the width for the specified column.
+     * @param {Number} col The column index
+     * @return {Number}
+     */
+    getColumnWidth : function(col){
+        return this.config[col].width * 1 || this.defaultWidth;
+    },
+
+    /**
+     * Sets the width for a column.
+     * @param {Number} col The column index
+     * @param {Number} width The new width
+     */
+    setColumnWidth : function(col, width, suppressEvent){
+        this.config[col].width = width;
+        this.totalWidth = null;
+        if(!suppressEvent){
+             this.fireEvent("widthchange", this, col, width);
+        }
+    },
+
+    /**
+     * Returns the total width of all columns.
+     * @param {Boolean} includeHidden True to include hidden column widths
+     * @return {Number}
+     */
+    getTotalWidth : function(includeHidden){
+        if(!this.totalWidth){
+            this.totalWidth = 0;
+            for(var i = 0, len = this.config.length; i < len; i++){
+                if(includeHidden || !this.isHidden(i)){
+                    this.totalWidth += this.getColumnWidth(i);
+                }
+            }
+        }
+        return this.totalWidth;
+    },
+
+    /**
+     * Returns the header for the specified column.
+     * @param {Number} col The column index
+     * @return {String}
+     */
+    getColumnHeader : function(col){
+        return this.config[col].header;
+    },
+
+    /**
+     * Sets the header for a column.
+     * @param {Number} col The column index
+     * @param {String} header The new header
+     */
+    setColumnHeader : function(col, header){
+        this.config[col].header = header;
+        this.fireEvent("headerchange", this, col, header);
+    },
+
+    /**
+     * Returns the tooltip for the specified column.
+     * @param {Number} col The column index
+     * @return {String}
+     */
+    getColumnTooltip : function(col){
+            return this.config[col].tooltip;
+    },
+    /**
+     * Sets the tooltip for a column.
+     * @param {Number} col The column index
+     * @param {String} tooltip The new tooltip
+     */
+    setColumnTooltip : function(col, tooltip){
+            this.config[col].tooltip = tooltip;
+    },
+
+    /**
+     * Returns the dataIndex for the specified column.
+     * @param {Number} col The column index
+     * @return {Number}
+     */
+    getDataIndex : function(col){
+        return this.config[col].dataIndex;
+    },
+
+    /**
+     * Sets the dataIndex for a column.
+     * @param {Number} col The column index
+     * @param {Number} dataIndex The new dataIndex
+     */
+    setDataIndex : function(col, dataIndex){
+        this.config[col].dataIndex = dataIndex;
+    },
+
+    
+    
+    /**
+     * Returns true if the cell is editable.
+     * @param {Number} colIndex The column index
+     * @param {Number} rowIndex The row index - this is nto actually used..?
+     * @return {Boolean}
+     */
+    isCellEditable : function(colIndex, rowIndex){
+        return (this.config[colIndex].editable || (typeof this.config[colIndex].editable == "undefined" && this.config[colIndex].editor)) ? true : false;
+    },
+
+    /**
+     * Returns the editor defined for the cell/column.
+     * return false or null to disable editing.
+     * @param {Number} colIndex The column index
+     * @param {Number} rowIndex The row index
+     * @return {Object}
+     */
+    getCellEditor : function(colIndex, rowIndex){
+        return this.config[colIndex].editor;
+    },
+
+    /**
+     * Sets if a column is editable.
+     * @param {Number} col The column index
+     * @param {Boolean} editable True if the column is editable
+     */
+    setEditable : function(col, editable){
+        this.config[col].editable = editable;
+    },
+
+
+    /**
+     * Returns true if the column is hidden.
+     * @param {Number} colIndex The column index
+     * @return {Boolean}
+     */
+    isHidden : function(colIndex){
+        return this.config[colIndex].hidden;
+    },
+
+
+    /**
+     * Returns true if the column width cannot be changed
+     */
+    isFixed : function(colIndex){
+        return this.config[colIndex].fixed;
+    },
+
+    /**
+     * Returns true if the column can be resized
+     * @return {Boolean}
+     */
+    isResizable : function(colIndex){
+        return colIndex >= 0 && this.config[colIndex].resizable !== false && this.config[colIndex].fixed !== true;
+    },
+    /**
+     * Sets if a column is hidden.
+     * @param {Number} colIndex The column index
+     * @param {Boolean} hidden True if the column is hidden
+     */
+    setHidden : function(colIndex, hidden){
+        this.config[colIndex].hidden = hidden;
+        this.totalWidth = null;
+        this.fireEvent("hiddenchange", this, colIndex, hidden);
+    },
+
+    /**
+     * Sets the editor for a column.
+     * @param {Number} col The column index
+     * @param {Object} editor The editor object
+     */
+    setEditor : function(col, editor){
+        this.config[col].editor = editor;
+    }
+});
+
+Roo.grid.ColumnModel.defaultRenderer = function(value){
+	if(typeof value == "string" && value.length < 1){
+	    return "&#160;";
+	}
+	return value;
+};
+
+// Alias for backwards compatibility
+Roo.grid.DefaultColumnModel = Roo.grid.ColumnModel;
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.grid.AbstractSelectionModel
+ * @extends Roo.util.Observable
+ * Abstract base class for grid SelectionModels.  It provides the interface that should be
+ * implemented by descendant classes.  This class should not be directly instantiated.
+ * @constructor
+ */
+Roo.grid.AbstractSelectionModel = function(){
+    this.locked = false;
+    Roo.grid.AbstractSelectionModel.superclass.constructor.call(this);
+};
+
+Roo.extend(Roo.grid.AbstractSelectionModel, Roo.util.Observable,  {
+    /** @ignore Called by the grid automatically. Do not call directly. */
+    init : function(grid){
+        this.grid = grid;
+        this.initEvents();
+    },
+
+    /**
+     * Locks the selections.
+     */
+    lock : function(){
+        this.locked = true;
+    },
+
+    /**
+     * Unlocks the selections.
+     */
+    unlock : function(){
+        this.locked = false;
+    },
+
+    /**
+     * Returns true if the selections are locked.
+     * @return {Boolean}
+     */
+    isLocked : function(){
+        return this.locked;
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @extends Roo.grid.AbstractSelectionModel
+ * @class Roo.grid.RowSelectionModel
+ * The default SelectionModel used by {@link Roo.grid.Grid}.
+ * It supports multiple selections and keyboard selection/navigation. 
+ * @constructor
+ * @param {Object} config
+ */
+Roo.grid.RowSelectionModel = function(config){
+    Roo.apply(this, config);
+    this.selections = new Roo.util.MixedCollection(false, function(o){
+        return o.id;
+    });
+
+    this.last = false;
+    this.lastActive = false;
+
+    this.addEvents({
+        /**
+	     * @event selectionchange
+	     * Fires when the selection changes
+	     * @param {SelectionModel} this
+	     */
+	    "selectionchange" : true,
+        /**
+	     * @event afterselectionchange
+	     * Fires after the selection changes (eg. by key press or clicking)
+	     * @param {SelectionModel} this
+	     */
+	    "afterselectionchange" : true,
+        /**
+	     * @event beforerowselect
+	     * Fires when a row is selected being selected, return false to cancel.
+	     * @param {SelectionModel} this
+	     * @param {Number} rowIndex The selected index
+	     * @param {Boolean} keepExisting False if other selections will be cleared
+	     */
+	    "beforerowselect" : true,
+        /**
+	     * @event rowselect
+	     * Fires when a row is selected.
+	     * @param {SelectionModel} this
+	     * @param {Number} rowIndex The selected index
+	     * @param {Roo.data.Record} r The record
+	     */
+	    "rowselect" : true,
+        /**
+	     * @event rowdeselect
+	     * Fires when a row is deselected.
+	     * @param {SelectionModel} this
+	     * @param {Number} rowIndex The selected index
+	     */
+        "rowdeselect" : true
+    });
+    Roo.grid.RowSelectionModel.superclass.constructor.call(this);
+    this.locked = false;
+};
+
+Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
+    /**
+     * @cfg {Boolean} singleSelect
+     * True to allow selection of only one row at a time (defaults to false)
+     */
+    singleSelect : false,
+
+    // private
+    initEvents : function(){
+
+        if(!this.grid.enableDragDrop && !this.grid.enableDrag){
+            this.grid.on("mousedown", this.handleMouseDown, this);
+        }else{ // allow click to work like normal
+            this.grid.on("rowclick", this.handleDragableRowClick, this);
+        }
+
+        this.rowNav = new Roo.KeyNav(this.grid.getGridEl(), {
+            "up" : function(e){
+                if(!e.shiftKey){
+                    this.selectPrevious(e.shiftKey);
+                }else if(this.last !== false && this.lastActive !== false){
+                    var last = this.last;
+                    this.selectRange(this.last,  this.lastActive-1);
+                    this.grid.getView().focusRow(this.lastActive);
+                    if(last !== false){
+                        this.last = last;
+                    }
+                }else{
+                    this.selectFirstRow();
+                }
+                this.fireEvent("afterselectionchange", this);
+            },
+            "down" : function(e){
+                if(!e.shiftKey){
+                    this.selectNext(e.shiftKey);
+                }else if(this.last !== false && this.lastActive !== false){
+                    var last = this.last;
+                    this.selectRange(this.last,  this.lastActive+1);
+                    this.grid.getView().focusRow(this.lastActive);
+                    if(last !== false){
+                        this.last = last;
+                    }
+                }else{
+                    this.selectFirstRow();
+                }
+                this.fireEvent("afterselectionchange", this);
+            },
+            scope: this
+        });
+
+        var view = this.grid.view;
+        view.on("refresh", this.onRefresh, this);
+        view.on("rowupdated", this.onRowUpdated, this);
+        view.on("rowremoved", this.onRemove, this);
+    },
+
+    // private
+    onRefresh : function(){
+        var ds = this.grid.dataSource, i, v = this.grid.view;
+        var s = this.selections;
+        s.each(function(r){
+            if((i = ds.indexOfId(r.id)) != -1){
+                v.onRowSelect(i);
+                s.add(ds.getAt(i)); // updating the selection relate data
+            }else{
+                s.remove(r);
+            }
+        });
+    },
+
+    // private
+    onRemove : function(v, index, r){
+        this.selections.remove(r);
+    },
+
+    // private
+    onRowUpdated : function(v, index, r){
+        if(this.isSelected(r)){
+            v.onRowSelect(index);
+        }
+    },
+
+    /**
+     * Select records.
+     * @param {Array} records The records to select
+     * @param {Boolean} keepExisting (optional) True to keep existing selections
+     */
+    selectRecords : function(records, keepExisting){
+        if(!keepExisting){
+            this.clearSelections();
+        }
+        var ds = this.grid.dataSource;
+        for(var i = 0, len = records.length; i < len; i++){
+            this.selectRow(ds.indexOf(records[i]), true);
+        }
+    },
+
+    /**
+     * Gets the number of selected rows.
+     * @return {Number}
+     */
+    getCount : function(){
+        return this.selections.length;
+    },
+
+    /**
+     * Selects the first row in the grid.
+     */
+    selectFirstRow : function(){
+        this.selectRow(0);
+    },
+
+    /**
+     * Select the last row.
+     * @param {Boolean} keepExisting (optional) True to keep existing selections
+     */
+    selectLastRow : function(keepExisting){
+        this.selectRow(this.grid.dataSource.getCount() - 1, keepExisting);
+    },
+
+    /**
+     * Selects the row immediately following the last selected row.
+     * @param {Boolean} keepExisting (optional) True to keep existing selections
+     */
+    selectNext : function(keepExisting){
+        if(this.last !== false && (this.last+1) < this.grid.dataSource.getCount()){
+            this.selectRow(this.last+1, keepExisting);
+            this.grid.getView().focusRow(this.last);
+        }
+    },
+
+    /**
+     * Selects the row that precedes the last selected row.
+     * @param {Boolean} keepExisting (optional) True to keep existing selections
+     */
+    selectPrevious : function(keepExisting){
+        if(this.last){
+            this.selectRow(this.last-1, keepExisting);
+            this.grid.getView().focusRow(this.last);
+        }
+    },
+
+    /**
+     * Returns the selected records
+     * @return {Array} Array of selected records
+     */
+    getSelections : function(){
+        return [].concat(this.selections.items);
+    },
+
+    /**
+     * Returns the first selected record.
+     * @return {Record}
+     */
+    getSelected : function(){
+        return this.selections.itemAt(0);
+    },
+
+
+    /**
+     * Clears all selections.
+     */
+    clearSelections : function(fast){
+        if(this.locked) {
+            return;
+        }
+        if(fast !== true){
+            var ds = this.grid.dataSource;
+            var s = this.selections;
+            s.each(function(r){
+                this.deselectRow(ds.indexOfId(r.id));
+            }, this);
+            s.clear();
+        }else{
+            this.selections.clear();
+        }
+        this.last = false;
+    },
+
+
+    /**
+     * Selects all rows.
+     */
+    selectAll : function(){
+        if(this.locked) {
+            return;
+        }
+        this.selections.clear();
+        for(var i = 0, len = this.grid.dataSource.getCount(); i < len; i++){
+            this.selectRow(i, true);
+        }
+    },
+
+    /**
+     * Returns True if there is a selection.
+     * @return {Boolean}
+     */
+    hasSelection : function(){
+        return this.selections.length > 0;
+    },
+
+    /**
+     * Returns True if the specified row is selected.
+     * @param {Number/Record} record The record or index of the record to check
+     * @return {Boolean}
+     */
+    isSelected : function(index){
+        var r = typeof index == "number" ? this.grid.dataSource.getAt(index) : index;
+        return (r && this.selections.key(r.id) ? true : false);
+    },
+
+    /**
+     * Returns True if the specified record id is selected.
+     * @param {String} id The id of record to check
+     * @return {Boolean}
+     */
+    isIdSelected : function(id){
+        return (this.selections.key(id) ? true : false);
+    },
+
+    // private
+    handleMouseDown : function(e, t){
+        var view = this.grid.getView(), rowIndex;
+        if(this.isLocked() || (rowIndex = view.findRowIndex(t)) === false){
+            return;
+        };
+        if(e.shiftKey && this.last !== false){
+            var last = this.last;
+            this.selectRange(last, rowIndex, e.ctrlKey);
+            this.last = last; // reset the last
+            view.focusRow(rowIndex);
+        }else{
+            var isSelected = this.isSelected(rowIndex);
+            if(e.button !== 0 && isSelected){
+                view.focusRow(rowIndex);
+            }else if(e.ctrlKey && isSelected){
+                this.deselectRow(rowIndex);
+            }else if(!isSelected){
+                this.selectRow(rowIndex, e.button === 0 && (e.ctrlKey || e.shiftKey));
+                view.focusRow(rowIndex);
+            }
+        }
+        this.fireEvent("afterselectionchange", this);
+    },
+    // private
+    handleDragableRowClick :  function(grid, rowIndex, e) 
+    {
+        if(e.button === 0 && !e.shiftKey && !e.ctrlKey) {
+            this.selectRow(rowIndex, false);
+            grid.view.focusRow(rowIndex);
+             this.fireEvent("afterselectionchange", this);
+        }
+    },
+    
+    /**
+     * Selects multiple rows.
+     * @param {Array} rows Array of the indexes of the row to select
+     * @param {Boolean} keepExisting (optional) True to keep existing selections
+     */
+    selectRows : function(rows, keepExisting){
+        if(!keepExisting){
+            this.clearSelections();
+        }
+        for(var i = 0, len = rows.length; i < len; i++){
+            this.selectRow(rows[i], true);
+        }
+    },
+
+    /**
+     * Selects a range of rows. All rows in between startRow and endRow are also selected.
+     * @param {Number} startRow The index of the first row in the range
+     * @param {Number} endRow The index of the last row in the range
+     * @param {Boolean} keepExisting (optional) True to retain existing selections
+     */
+    selectRange : function(startRow, endRow, keepExisting){
+        if(this.locked) {
+            return;
+        }
+        if(!keepExisting){
+            this.clearSelections();
+        }
+        if(startRow <= endRow){
+            for(var i = startRow; i <= endRow; i++){
+                this.selectRow(i, true);
+            }
+        }else{
+            for(var i = startRow; i >= endRow; i--){
+                this.selectRow(i, true);
+            }
+        }
+    },
+
+    /**
+     * Deselects a range of rows. All rows in between startRow and endRow are also deselected.
+     * @param {Number} startRow The index of the first row in the range
+     * @param {Number} endRow The index of the last row in the range
+     */
+    deselectRange : function(startRow, endRow, preventViewNotify){
+        if(this.locked) {
+            return;
+        }
+        for(var i = startRow; i <= endRow; i++){
+            this.deselectRow(i, preventViewNotify);
+        }
+    },
+
+    /**
+     * Selects a row.
+     * @param {Number} row The index of the row to select
+     * @param {Boolean} keepExisting (optional) True to keep existing selections
+     */
+    selectRow : function(index, keepExisting, preventViewNotify){
+        if(this.locked || (index < 0 || index >= this.grid.dataSource.getCount())) {
+            return;
+        }
+        if(this.fireEvent("beforerowselect", this, index, keepExisting) !== false){
+            if(!keepExisting || this.singleSelect){
+                this.clearSelections();
+            }
+            var r = this.grid.dataSource.getAt(index);
+            this.selections.add(r);
+            this.last = this.lastActive = index;
+            if(!preventViewNotify){
+                this.grid.getView().onRowSelect(index);
+            }
+            this.fireEvent("rowselect", this, index, r);
+            this.fireEvent("selectionchange", this);
+        }
+    },
+
+    /**
+     * Deselects a row.
+     * @param {Number} row The index of the row to deselect
+     */
+    deselectRow : function(index, preventViewNotify){
+        if(this.locked) {
+            return;
+        }
+        if(this.last == index){
+            this.last = false;
+        }
+        if(this.lastActive == index){
+            this.lastActive = false;
+        }
+        var r = this.grid.dataSource.getAt(index);
+        this.selections.remove(r);
+        if(!preventViewNotify){
+            this.grid.getView().onRowDeselect(index);
+        }
+        this.fireEvent("rowdeselect", this, index);
+        this.fireEvent("selectionchange", this);
+    },
+
+    // private
+    restoreLast : function(){
+        if(this._last){
+            this.last = this._last;
+        }
+    },
+
+    // private
+    acceptsNav : function(row, col, cm){
+        return !cm.isHidden(col) && cm.isCellEditable(col, row);
+    },
+
+    // private
+    onEditorKey : function(field, e){
+        var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
+        if(k == e.TAB){
+            e.stopEvent();
+            ed.completeEdit();
+            if(e.shiftKey){
+                newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
+            }else{
+                newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
+            }
+        }else if(k == e.ENTER && !e.ctrlKey){
+            e.stopEvent();
+            ed.completeEdit();
+            if(e.shiftKey){
+                newCell = g.walkCells(ed.row-1, ed.col, -1, this.acceptsNav, this);
+            }else{
+                newCell = g.walkCells(ed.row+1, ed.col, 1, this.acceptsNav, this);
+            }
+        }else if(k == e.ESC){
+            ed.cancelEdit();
+        }
+        if(newCell){
+            g.startEditing(newCell[0], newCell[1]);
+        }
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.grid.CellSelectionModel
+ * @extends Roo.grid.AbstractSelectionModel
+ * This class provides the basic implementation for cell selection in a grid.
+ * @constructor
+ * @param {Object} config The object containing the configuration of this model.
+ * @cfg {Boolean} enter_is_tab Enter behaves the same as tab. (eg. goes to next cell) default: false
+ */
+Roo.grid.CellSelectionModel = function(config){
+    Roo.apply(this, config);
+
+    this.selection = null;
+
+    this.addEvents({
+        /**
+	     * @event beforerowselect
+	     * Fires before a cell is selected.
+	     * @param {SelectionModel} this
+	     * @param {Number} rowIndex The selected row index
+	     * @param {Number} colIndex The selected cell index
+	     */
+	    "beforecellselect" : true,
+        /**
+	     * @event cellselect
+	     * Fires when a cell is selected.
+	     * @param {SelectionModel} this
+	     * @param {Number} rowIndex The selected row index
+	     * @param {Number} colIndex The selected cell index
+	     */
+	    "cellselect" : true,
+        /**
+	     * @event selectionchange
+	     * Fires when the active selection changes.
+	     * @param {SelectionModel} this
+	     * @param {Object} selection null for no selection or an object (o) with two properties
+	        <ul>
+	        <li>o.record: the record object for the row the selection is in</li>
+	        <li>o.cell: An array of [rowIndex, columnIndex]</li>
+	        </ul>
+	     */
+	    "selectionchange" : true,
+        /**
+	     * @event tabend
+	     * Fires when the tab (or enter) was pressed on the last editable cell
+	     * You can use this to trigger add new row.
+	     * @param {SelectionModel} this
+	     */
+	    "tabend" : true,
+         /**
+	     * @event beforeeditnext
+	     * Fires before the next editable sell is made active
+	     * You can use this to skip to another cell or fire the tabend
+	     *    if you set cell to false
+	     * @param {Object} eventdata object : { cell : [ row, col ] } 
+	     */
+	    "beforeeditnext" : true
+    });
+    Roo.grid.CellSelectionModel.superclass.constructor.call(this);
+};
+
+Roo.extend(Roo.grid.CellSelectionModel, Roo.grid.AbstractSelectionModel,  {
+    
+    enter_is_tab: false,
+
+    /** @ignore */
+    initEvents : function(){
+        this.grid.on("mousedown", this.handleMouseDown, this);
+        this.grid.getGridEl().on(Roo.isIE ? "keydown" : "keypress", this.handleKeyDown, this);
+        var view = this.grid.view;
+        view.on("refresh", this.onViewChange, this);
+        view.on("rowupdated", this.onRowUpdated, this);
+        view.on("beforerowremoved", this.clearSelections, this);
+        view.on("beforerowsinserted", this.clearSelections, this);
+        if(this.grid.isEditor){
+            this.grid.on("beforeedit", this.beforeEdit,  this);
+        }
+    },
+
+	//private
+    beforeEdit : function(e){
+        this.select(e.row, e.column, false, true, e.record);
+    },
+
+	//private
+    onRowUpdated : function(v, index, r){
+        if(this.selection && this.selection.record == r){
+            v.onCellSelect(index, this.selection.cell[1]);
+        }
+    },
+
+	//private
+    onViewChange : function(){
+        this.clearSelections(true);
+    },
+
+	/**
+	 * Returns the currently selected cell,.
+	 * @return {Array} The selected cell (row, column) or null if none selected.
+	 */
+    getSelectedCell : function(){
+        return this.selection ? this.selection.cell : null;
+    },
+
+    /**
+     * Clears all selections.
+     * @param {Boolean} true to prevent the gridview from being notified about the change.
+     */
+    clearSelections : function(preventNotify){
+        var s = this.selection;
+        if(s){
+            if(preventNotify !== true){
+                this.grid.view.onCellDeselect(s.cell[0], s.cell[1]);
+            }
+            this.selection = null;
+            this.fireEvent("selectionchange", this, null);
+        }
+    },
+
+    /**
+     * Returns true if there is a selection.
+     * @return {Boolean}
+     */
+    hasSelection : function(){
+        return this.selection ? true : false;
+    },
+
+    /** @ignore */
+    handleMouseDown : function(e, t){
+        var v = this.grid.getView();
+        if(this.isLocked()){
+            return;
+        };
+        var row = v.findRowIndex(t);
+        var cell = v.findCellIndex(t);
+        if(row !== false && cell !== false){
+            this.select(row, cell);
+        }
+    },
+
+    /**
+     * Selects a cell.
+     * @param {Number} rowIndex
+     * @param {Number} collIndex
+     */
+    select : function(rowIndex, colIndex, preventViewNotify, preventFocus, /*internal*/ r){
+        if(this.fireEvent("beforecellselect", this, rowIndex, colIndex) !== false){
+            this.clearSelections();
+            r = r || this.grid.dataSource.getAt(rowIndex);
+            this.selection = {
+                record : r,
+                cell : [rowIndex, colIndex]
+            };
+            if(!preventViewNotify){
+                var v = this.grid.getView();
+                v.onCellSelect(rowIndex, colIndex);
+                if(preventFocus !== true){
+                    v.focusCell(rowIndex, colIndex);
+                }
+            }
+            this.fireEvent("cellselect", this, rowIndex, colIndex);
+            this.fireEvent("selectionchange", this, this.selection);
+        }
+    },
+
+	//private
+    isSelectable : function(rowIndex, colIndex, cm){
+        return !cm.isHidden(colIndex);
+    },
+
+    /** @ignore */
+    handleKeyDown : function(e){
+        //Roo.log('Cell Sel Model handleKeyDown');
+        if(!e.isNavKeyPress()){
+            return;
+        }
+        var g = this.grid, s = this.selection;
+        if(!s){
+            e.stopEvent();
+            var cell = g.walkCells(0, 0, 1, this.isSelectable,  this);
+            if(cell){
+                this.select(cell[0], cell[1]);
+            }
+            return;
+        }
+        var sm = this;
+        var walk = function(row, col, step){
+            return g.walkCells(row, col, step, sm.isSelectable,  sm);
+        };
+        var k = e.getKey(), r = s.cell[0], c = s.cell[1];
+        var newCell;
+
+      
+
+        switch(k){
+            case e.TAB:
+                // handled by onEditorKey
+                if (g.isEditor && g.editing) {
+                    return;
+                }
+                if(e.shiftKey) {
+                    newCell = walk(r, c-1, -1);
+                } else {
+                    newCell = walk(r, c+1, 1);
+                }
+                break;
+            
+            case e.DOWN:
+               newCell = walk(r+1, c, 1);
+                break;
+            
+            case e.UP:
+                newCell = walk(r-1, c, -1);
+                break;
+            
+            case e.RIGHT:
+                newCell = walk(r, c+1, 1);
+                break;
+            
+            case e.LEFT:
+                newCell = walk(r, c-1, -1);
+                break;
+            
+            case e.ENTER:
+                
+                if(g.isEditor && !g.editing){
+                   g.startEditing(r, c);
+                   e.stopEvent();
+                   return;
+                }
+                
+                
+             break;
+        };
+        if(newCell){
+            this.select(newCell[0], newCell[1]);
+            e.stopEvent();
+            
+        }
+    },
+
+    acceptsNav : function(row, col, cm){
+        return !cm.isHidden(col) && cm.isCellEditable(col, row);
+    },
+    /**
+     * Selects a cell.
+     * @param {Number} field (not used) - as it's normally used as a listener
+     * @param {Number} e - event - fake it by using
+     *
+     * var e = Roo.EventObjectImpl.prototype;
+     * e.keyCode = e.TAB
+     *
+     * 
+     */
+    onEditorKey : function(field, e){
+        
+        var k = e.getKey(),
+            newCell,
+            g = this.grid,
+            ed = g.activeEditor,
+            forward = false;
+        ///Roo.log('onEditorKey' + k);
+        
+        
+        if (this.enter_is_tab && k == e.ENTER) {
+            k = e.TAB;
+        }
+        
+        if(k == e.TAB){
+            if(e.shiftKey){
+                newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
+            }else{
+                newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
+                forward = true;
+            }
+            
+            e.stopEvent();
+            
+        } else if(k == e.ENTER &&  !e.ctrlKey){
+            ed.completeEdit();
+            e.stopEvent();
+            newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
+        
+		} else if(k == e.ESC){
+            ed.cancelEdit();
+        }
+		
+        if (newCell) {
+            var ecall = { cell : newCell, forward : forward };
+            this.fireEvent('beforeeditnext', ecall );
+            newCell = ecall.cell;
+			forward = ecall.forward;
+        }
+		
+        if(newCell){
+            //Roo.log('next cell after edit');
+            g.startEditing.defer(100, g, [newCell[0], newCell[1]]);
+        } else if (forward) {
+            // tabbed past last
+            this.fireEvent.defer(100, this, ['tabend',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.grid.EditorGrid
+ * @extends Roo.grid.Grid
+ * Class for creating and editable grid.
+ * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered - 
+ * The container MUST have some type of size defined for the grid to fill. The container will be 
+ * automatically set to position relative if it isn't already.
+ * @param {Object} dataSource The data model to bind to
+ * @param {Object} colModel The column model with info about this grid's columns
+ */
+Roo.grid.EditorGrid = function(container, config){
+    Roo.grid.EditorGrid.superclass.constructor.call(this, container, config);
+    this.getGridEl().addClass("xedit-grid");
+
+    if(!this.selModel){
+        this.selModel = new Roo.grid.CellSelectionModel();
+    }
+
+    this.activeEditor = null;
+
+	this.addEvents({
+	    /**
+	     * @event beforeedit
+	     * Fires before cell editing is triggered. The edit event object has the following properties <br />
+	     * <ul style="padding:5px;padding-left:16px;">
+	     * <li>grid - This grid</li>
+	     * <li>record - The record being edited</li>
+	     * <li>field - The field name being edited</li>
+	     * <li>value - The value for the field being edited.</li>
+	     * <li>row - The grid row index</li>
+	     * <li>column - The grid column index</li>
+	     * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
+	     * </ul>
+	     * @param {Object} e An edit event (see above for description)
+	     */
+	    "beforeedit" : true,
+	    /**
+	     * @event afteredit
+	     * Fires after a cell is edited. <br />
+	     * <ul style="padding:5px;padding-left:16px;">
+	     * <li>grid - This grid</li>
+	     * <li>record - The record being edited</li>
+	     * <li>field - The field name being edited</li>
+	     * <li>value - The value being set</li>
+	     * <li>originalValue - The original value for the field, before the edit.</li>
+	     * <li>row - The grid row index</li>
+	     * <li>column - The grid column index</li>
+	     * </ul>
+	     * @param {Object} e An edit event (see above for description)
+	     */
+	    "afteredit" : true,
+	    /**
+	     * @event validateedit
+	     * Fires after a cell is edited, but before the value is set in the record. 
+         * You can use this to modify the value being set in the field, Return false
+	     * to cancel the change. The edit event object has the following properties <br />
+	     * <ul style="padding:5px;padding-left:16px;">
+         * <li>editor - This editor</li>
+	     * <li>grid - This grid</li>
+	     * <li>record - The record being edited</li>
+	     * <li>field - The field name being edited</li>
+	     * <li>value - The value being set</li>
+	     * <li>originalValue - The original value for the field, before the edit.</li>
+	     * <li>row - The grid row index</li>
+	     * <li>column - The grid column index</li>
+	     * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
+	     * </ul>
+	     * @param {Object} e An edit event (see above for description)
+	     */
+	    "validateedit" : true
+	});
+    this.on("bodyscroll", this.stopEditing,  this);
+    this.on(this.clicksToEdit == 1 ? "cellclick" : "celldblclick", this.onCellDblClick,  this);
+};
+
+Roo.extend(Roo.grid.EditorGrid, Roo.grid.Grid, {
+    /**
+     * @cfg {Number} clicksToEdit
+     * The number of clicks on a cell required to display the cell's editor (defaults to 2)
+     */
+    clicksToEdit: 2,
+
+    // private
+    isEditor : true,
+    // private
+    trackMouseOver: false, // causes very odd FF errors
+
+    onCellDblClick : function(g, row, col){
+        this.startEditing(row, col);
+    },
+
+    onEditComplete : function(ed, value, startValue){
+        this.editing = false;
+        this.activeEditor = null;
+        ed.un("specialkey", this.selModel.onEditorKey, this.selModel);
+        var r = ed.record;
+        var field = this.colModel.getDataIndex(ed.col);
+        var e = {
+            grid: this,
+            record: r,
+            field: field,
+            originalValue: startValue,
+            value: value,
+            row: ed.row,
+            column: ed.col,
+            cancel:false,
+            editor: ed
+        };
+        var cell = Roo.get(this.view.getCell(ed.row,ed.col));
+        cell.show();
+          
+        if(String(value) !== String(startValue)){
+            
+            if(this.fireEvent("validateedit", e) !== false && !e.cancel){
+                r.set(field, e.value);
+                // if we are dealing with a combo box..
+                // then we also set the 'name' colum to be the displayField
+                if (ed.field.displayField && ed.field.name) {
+                    r.set(ed.field.name, ed.field.el.dom.value);
+                }
+                
+                delete e.cancel; //?? why!!!
+                this.fireEvent("afteredit", e);
+            }
+        } else {
+            this.fireEvent("afteredit", e); // always fire it!
+        }
+        this.view.focusCell(ed.row, ed.col);
+    },
+
+    /**
+     * Starts editing the specified for the specified row/column
+     * @param {Number} rowIndex
+     * @param {Number} colIndex
+     */
+    startEditing : function(row, col){
+        this.stopEditing();
+        if(this.colModel.isCellEditable(col, row)){
+            this.view.ensureVisible(row, col, true);
+          
+            var r = this.dataSource.getAt(row);
+            var field = this.colModel.getDataIndex(col);
+            var cell = Roo.get(this.view.getCell(row,col));
+            var e = {
+                grid: this,
+                record: r,
+                field: field,
+                value: r.data[field],
+                row: row,
+                column: col,
+                cancel:false 
+            };
+            if(this.fireEvent("beforeedit", e) !== false && !e.cancel){
+                this.editing = true;
+                var ed = this.colModel.getCellEditor(col, row);
+                
+                if (!ed) {
+                    return;
+                }
+                if(!ed.rendered){
+                    ed.render(ed.parentEl || document.body);
+                }
+                ed.field.reset();
+               
+                cell.hide();
+                
+                (function(){ // complex but required for focus issues in safari, ie and opera
+                    ed.row = row;
+                    ed.col = col;
+                    ed.record = r;
+                    ed.on("complete",   this.onEditComplete,        this,       {single: true});
+                    ed.on("specialkey", this.selModel.onEditorKey,  this.selModel);
+                    this.activeEditor = ed;
+                    var v = r.data[field];
+                    ed.startEdit(this.view.getCell(row, col), v);
+                    // combo's with 'displayField and name set
+                    if (ed.field.displayField && ed.field.name) {
+                        ed.field.el.dom.value = r.data[ed.field.name];
+                    }
+                    
+                    
+                }).defer(50, this);
+            }
+        }
+    },
+        
+    /**
+     * Stops any active editing
+     */
+    stopEditing : function(){
+        if(this.activeEditor){
+            this.activeEditor.completeEdit();
+        }
+        this.activeEditor = null;
+    },
+	
+	 /**
+     * Called to get grid's drag proxy text, by default returns this.ddText.
+     * @return {String}
+     */
+    getDragDropText : function(){
+        var count = this.selModel.getSelectedCell() ? 1 : 0;
+        return String.format(this.ddText, count, count == 1 ? '' : 's');
+    }
+	
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+// private - not really -- you end up using it !
+// This is a support class used internally by the Grid components
+
+/**
+ * @class Roo.grid.GridEditor
+ * @extends Roo.Editor
+ * Class for creating and editable grid elements.
+ * @param {Object} config any settings (must include field)
+ */
+Roo.grid.GridEditor = function(field, config){
+    if (!config && field.field) {
+        config = field;
+        field = Roo.factory(config.field, Roo.form);
+    }
+    Roo.grid.GridEditor.superclass.constructor.call(this, field, config);
+    field.monitorTab = false;
+};
+
+Roo.extend(Roo.grid.GridEditor, Roo.Editor, {
+    
+    /**
+     * @cfg {Roo.form.Field} field Field to wrap (or xtyped)
+     */
+    
+    alignment: "tl-tl",
+    autoSize: "width",
+    hideEl : false,
+    cls: "x-small-editor x-grid-editor",
+    shim:false,
+    shadow:"frame"
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+  
+
+  
+Roo.grid.PropertyRecord = Roo.data.Record.create([
+    {name:'name',type:'string'},  'value'
+]);
+
+
+Roo.grid.PropertyStore = function(grid, source){
+    this.grid = grid;
+    this.store = new Roo.data.Store({
+        recordType : Roo.grid.PropertyRecord
+    });
+    this.store.on('update', this.onUpdate,  this);
+    if(source){
+        this.setSource(source);
+    }
+    Roo.grid.PropertyStore.superclass.constructor.call(this);
+};
+
+
+
+Roo.extend(Roo.grid.PropertyStore, Roo.util.Observable, {
+    setSource : function(o){
+        this.source = o;
+        this.store.removeAll();
+        var data = [];
+        for(var k in o){
+            if(this.isEditableValue(o[k])){
+                data.push(new Roo.grid.PropertyRecord({name: k, value: o[k]}, k));
+            }
+        }
+        this.store.loadRecords({records: data}, {}, true);
+    },
+
+    onUpdate : function(ds, record, type){
+        if(type == Roo.data.Record.EDIT){
+            var v = record.data['value'];
+            var oldValue = record.modified['value'];
+            if(this.grid.fireEvent('beforepropertychange', this.source, record.id, v, oldValue) !== false){
+                this.source[record.id] = v;
+                record.commit();
+                this.grid.fireEvent('propertychange', this.source, record.id, v, oldValue);
+            }else{
+                record.reject();
+            }
+        }
+    },
+
+    getProperty : function(row){
+       return this.store.getAt(row);
+    },
+
+    isEditableValue: function(val){
+        if(val && val instanceof Date){
+            return true;
+        }else if(typeof val == 'object' || typeof val == 'function'){
+            return false;
+        }
+        return true;
+    },
+
+    setValue : function(prop, value){
+        this.source[prop] = value;
+        this.store.getById(prop).set('value', value);
+    },
+
+    getSource : function(){
+        return this.source;
+    }
+});
+
+Roo.grid.PropertyColumnModel = function(grid, store){
+    this.grid = grid;
+    var g = Roo.grid;
+    g.PropertyColumnModel.superclass.constructor.call(this, [
+        {header: this.nameText, sortable: true, dataIndex:'name', id: 'name'},
+        {header: this.valueText, resizable:false, dataIndex: 'value', id: 'value'}
+    ]);
+    this.store = store;
+    this.bselect = Roo.DomHelper.append(document.body, {
+        tag: 'select', style:'display:none', cls: 'x-grid-editor', children: [
+            {tag: 'option', value: 'true', html: 'true'},
+            {tag: 'option', value: 'false', html: 'false'}
+        ]
+    });
+    Roo.id(this.bselect);
+    var f = Roo.form;
+    this.editors = {
+        'date' : new g.GridEditor(new f.DateField({selectOnFocus:true})),
+        'string' : new g.GridEditor(new f.TextField({selectOnFocus:true})),
+        'number' : new g.GridEditor(new f.NumberField({selectOnFocus:true, style:'text-align:left;'})),
+        'int' : new g.GridEditor(new f.NumberField({selectOnFocus:true, allowDecimals:false, style:'text-align:left;'})),
+        'boolean' : new g.GridEditor(new f.Field({el:this.bselect,selectOnFocus:true}))
+    };
+    this.renderCellDelegate = this.renderCell.createDelegate(this);
+    this.renderPropDelegate = this.renderProp.createDelegate(this);
+};
+
+Roo.extend(Roo.grid.PropertyColumnModel, Roo.grid.ColumnModel, {
+    
+    
+    nameText : 'Name',
+    valueText : 'Value',
+    
+    dateFormat : 'm/j/Y',
+    
+    
+    renderDate : function(dateVal){
+        return dateVal.dateFormat(this.dateFormat);
+    },
+
+    renderBool : function(bVal){
+        return bVal ? 'true' : 'false';
+    },
+
+    isCellEditable : function(colIndex, rowIndex){
+        return colIndex == 1;
+    },
+
+    getRenderer : function(col){
+        return col == 1 ?
+            this.renderCellDelegate : this.renderPropDelegate;
+    },
+
+    renderProp : function(v){
+        return this.getPropertyName(v);
+    },
+
+    renderCell : function(val){
+        var rv = val;
+        if(val instanceof Date){
+            rv = this.renderDate(val);
+        }else if(typeof val == 'boolean'){
+            rv = this.renderBool(val);
+        }
+        return Roo.util.Format.htmlEncode(rv);
+    },
+
+    getPropertyName : function(name){
+        var pn = this.grid.propertyNames;
+        return pn && pn[name] ? pn[name] : name;
+    },
+
+    getCellEditor : function(colIndex, rowIndex){
+        var p = this.store.getProperty(rowIndex);
+        var n = p.data['name'], val = p.data['value'];
+        
+        if(typeof(this.grid.customEditors[n]) == 'string'){
+            return this.editors[this.grid.customEditors[n]];
+        }
+        if(typeof(this.grid.customEditors[n]) != 'undefined'){
+            return this.grid.customEditors[n];
+        }
+        if(val instanceof Date){
+            return this.editors['date'];
+        }else if(typeof val == 'number'){
+            return this.editors['number'];
+        }else if(typeof val == 'boolean'){
+            return this.editors['boolean'];
+        }else{
+            return this.editors['string'];
+        }
+    }
+});
+
+/**
+ * @class Roo.grid.PropertyGrid
+ * @extends Roo.grid.EditorGrid
+ * This class represents the  interface of a component based property grid control.
+ * <br><br>Usage:<pre><code>
+ var grid = new Roo.grid.PropertyGrid("my-container-id", {
+      
+ });
+ // set any options
+ grid.render();
+ * </code></pre>
+  
+ * @constructor
+ * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
+ * The container MUST have some type of size defined for the grid to fill. The container will be
+ * automatically set to position relative if it isn't already.
+ * @param {Object} config A config object that sets properties on this grid.
+ */
+Roo.grid.PropertyGrid = function(container, config){
+    config = config || {};
+    var store = new Roo.grid.PropertyStore(this);
+    this.store = store;
+    var cm = new Roo.grid.PropertyColumnModel(this, store);
+    store.store.sort('name', 'ASC');
+    Roo.grid.PropertyGrid.superclass.constructor.call(this, container, Roo.apply({
+        ds: store.store,
+        cm: cm,
+        enableColLock:false,
+        enableColumnMove:false,
+        stripeRows:false,
+        trackMouseOver: false,
+        clicksToEdit:1
+    }, config));
+    this.getGridEl().addClass('x-props-grid');
+    this.lastEditRow = null;
+    this.on('columnresize', this.onColumnResize, this);
+    this.addEvents({
+         /**
+	     * @event beforepropertychange
+	     * Fires before a property changes (return false to stop?)
+	     * @param {Roo.grid.PropertyGrid} grid property grid? (check could be store)
+	     * @param {String} id Record Id
+	     * @param {String} newval New Value
+         * @param {String} oldval Old Value
+	     */
+        "beforepropertychange": true,
+        /**
+	     * @event propertychange
+	     * Fires after a property changes
+	     * @param {Roo.grid.PropertyGrid} grid property grid? (check could be store)
+	     * @param {String} id Record Id
+	     * @param {String} newval New Value
+         * @param {String} oldval Old Value
+	     */
+        "propertychange": true
+    });
+    this.customEditors = this.customEditors || {};
+};
+Roo.extend(Roo.grid.PropertyGrid, Roo.grid.EditorGrid, {
+    
+     /**
+     * @cfg {Object} customEditors map of colnames=> custom editors.
+     * the custom editor can be one of the standard ones (date|string|number|int|boolean), or a
+     * grid editor eg. Roo.grid.GridEditor(new Roo.form.TextArea({selectOnFocus:true})),
+     * false disables editing of the field.
+	 */
+    
+      /**
+     * @cfg {Object} propertyNames map of property Names to their displayed value
+	 */
+    
+    render : function(){
+        Roo.grid.PropertyGrid.superclass.render.call(this);
+        this.autoSize.defer(100, this);
+    },
+
+    autoSize : function(){
+        Roo.grid.PropertyGrid.superclass.autoSize.call(this);
+        if(this.view){
+            this.view.fitColumns();
+        }
+    },
+
+    onColumnResize : function(){
+        this.colModel.setColumnWidth(1, this.container.getWidth(true)-this.colModel.getColumnWidth(0));
+        this.autoSize();
+    },
+    /**
+     * Sets the data for the Grid
+     * accepts a Key => Value object of all the elements avaiable.
+     * @param {Object} data  to appear in grid.
+     */
+    setSource : function(source){
+        this.store.setSource(source);
+        //this.autoSize();
+    },
+    /**
+     * Gets all the data from the grid.
+     * @return {Object} data  data stored in grid
+     */
+    getSource : function(){
+        return this.store.getSource();
+    }
+});/*
+  
+ * Licence LGPL
+ 
+ */
+ 
+/**
+ * @class Roo.grid.Calendar
+ * @extends Roo.util.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", {
+     ds: myDataStore,
+     cm: myColModel,
+     selModel: mySelectionModel,
+     autoSizeColumns: true,
+     monitorWindowResize: false,
+     trackMouseOver: true
+     eventstore : real data store..
+ });
+ // set any options
+ grid.render();
+  
+  * @constructor
+ * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
+ * The container MUST have some type of size defined for the grid to fill. The container will be
+ * automatically set to position relative if it isn't already.
+ * @param {Object} config A config object that sets properties on this grid.
+ */
+Roo.grid.Calendar = function(container, config){
+	// initialize the container
+	this.container = Roo.get(container);
+	this.container.update("");
+	this.container.setStyle("overflow", "hidden");
+    this.container.addClass('x-grid-container');
+
+    this.id = this.container.id;
+
+    Roo.apply(this, config);
+    // check and correct shorthanded configs
+    
+    var rows = [];
+    var d =1;
+    for (var r = 0;r < 6;r++) {
+        
+        rows[r]=[];
+        for (var c =0;c < 7;c++) {
+            rows[r][c]= '';
+        }
+    }
+    if (this.eventStore) {
+        this.eventStore= Roo.factory(this.eventStore, Roo.data);
+        this.eventStore.on('load',this.onLoad, this);
+        this.eventStore.on('beforeload',this.clearEvents, this);
+         
+    }
+    
+    this.dataSource = new Roo.data.Store({
+            proxy: new Roo.data.MemoryProxy(rows),
+            reader: new Roo.data.ArrayReader({}, [
+                   'weekday0', 'weekday1', 'weekday2', 'weekday3', 'weekday4', 'weekday5', 'weekday6' ])
+    });
+
+    this.dataSource.load();
+    this.ds = this.dataSource;
+    this.ds.xmodule = this.xmodule || false;
+    
+    
+    var cellRender = function(v,x,r)
+    {
+        return String.format(
+            '<div class="fc-day  fc-widget-content"><div>' +
+                '<div class="fc-event-container"></div>' +
+                '<div class="fc-day-number">{0}</div>'+
+                
+                '<div class="fc-day-content"><div style="position:relative"></div></div>' +
+            '</div></div>', v);
+    
+    }
+    
+    
+    this.colModel = new Roo.grid.ColumnModel( [
+        {
+            xtype: 'ColumnModel',
+            xns: Roo.grid,
+            dataIndex : 'weekday0',
+            header : 'Sunday',
+            renderer : cellRender
+        },
+        {
+            xtype: 'ColumnModel',
+            xns: Roo.grid,
+            dataIndex : 'weekday1',
+            header : 'Monday',
+            renderer : cellRender
+        },
+        {
+            xtype: 'ColumnModel',
+            xns: Roo.grid,
+            dataIndex : 'weekday2',
+            header : 'Tuesday',
+            renderer : cellRender
+        },
+        {
+            xtype: 'ColumnModel',
+            xns: Roo.grid,
+            dataIndex : 'weekday3',
+            header : 'Wednesday',
+            renderer : cellRender
+        },
+        {
+            xtype: 'ColumnModel',
+            xns: Roo.grid,
+            dataIndex : 'weekday4',
+            header : 'Thursday',
+            renderer : cellRender
+        },
+        {
+            xtype: 'ColumnModel',
+            xns: Roo.grid,
+            dataIndex : 'weekday5',
+            header : 'Friday',
+            renderer : cellRender
+        },
+        {
+            xtype: 'ColumnModel',
+            xns: Roo.grid,
+            dataIndex : 'weekday6',
+            header : 'Saturday',
+            renderer : cellRender
+        }
+    ]);
+    this.cm = this.colModel;
+    this.cm.xmodule = this.xmodule || false;
+ 
+        
+          
+    //this.selModel = new Roo.grid.CellSelectionModel();
+    //this.sm = this.selModel;
+    //this.selModel.init(this);
+    
+    
+    if(this.width){
+        this.container.setWidth(this.width);
+    }
+
+    if(this.height){
+        this.container.setHeight(this.height);
+    }
+    /** @private */
+	this.addEvents({
+        // raw events
+        /**
+         * @event click
+         * The raw click event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "click" : true,
+        /**
+         * @event dblclick
+         * The raw dblclick event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "dblclick" : true,
+        /**
+         * @event contextmenu
+         * The raw contextmenu event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "contextmenu" : true,
+        /**
+         * @event mousedown
+         * The raw mousedown event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "mousedown" : true,
+        /**
+         * @event mouseup
+         * The raw mouseup event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "mouseup" : true,
+        /**
+         * @event mouseover
+         * The raw mouseover event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "mouseover" : true,
+        /**
+         * @event mouseout
+         * The raw mouseout event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "mouseout" : true,
+        /**
+         * @event keypress
+         * The raw keypress event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "keypress" : true,
+        /**
+         * @event keydown
+         * The raw keydown event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "keydown" : true,
+
+        // custom events
+
+        /**
+         * @event cellclick
+         * Fires when a cell is clicked
+         * @param {Grid} this
+         * @param {Number} rowIndex
+         * @param {Number} columnIndex
+         * @param {Roo.EventObject} e
+         */
+        "cellclick" : true,
+        /**
+         * @event celldblclick
+         * Fires when a cell is double clicked
+         * @param {Grid} this
+         * @param {Number} rowIndex
+         * @param {Number} columnIndex
+         * @param {Roo.EventObject} e
+         */
+        "celldblclick" : true,
+        /**
+         * @event rowclick
+         * Fires when a row is clicked
+         * @param {Grid} this
+         * @param {Number} rowIndex
+         * @param {Roo.EventObject} e
+         */
+        "rowclick" : true,
+        /**
+         * @event rowdblclick
+         * Fires when a row is double clicked
+         * @param {Grid} this
+         * @param {Number} rowIndex
+         * @param {Roo.EventObject} e
+         */
+        "rowdblclick" : true,
+        /**
+         * @event headerclick
+         * Fires when a header is clicked
+         * @param {Grid} this
+         * @param {Number} columnIndex
+         * @param {Roo.EventObject} e
+         */
+        "headerclick" : true,
+        /**
+         * @event headerdblclick
+         * Fires when a header cell is double clicked
+         * @param {Grid} this
+         * @param {Number} columnIndex
+         * @param {Roo.EventObject} e
+         */
+        "headerdblclick" : true,
+        /**
+         * @event rowcontextmenu
+         * Fires when a row is right clicked
+         * @param {Grid} this
+         * @param {Number} rowIndex
+         * @param {Roo.EventObject} e
+         */
+        "rowcontextmenu" : true,
+        /**
+         * @event cellcontextmenu
+         * Fires when a cell is right clicked
+         * @param {Grid} this
+         * @param {Number} rowIndex
+         * @param {Number} cellIndex
+         * @param {Roo.EventObject} e
+         */
+         "cellcontextmenu" : true,
+        /**
+         * @event headercontextmenu
+         * Fires when a header is right clicked
+         * @param {Grid} this
+         * @param {Number} columnIndex
+         * @param {Roo.EventObject} e
+         */
+        "headercontextmenu" : true,
+        /**
+         * @event bodyscroll
+         * Fires when the body element is scrolled
+         * @param {Number} scrollLeft
+         * @param {Number} scrollTop
+         */
+        "bodyscroll" : true,
+        /**
+         * @event columnresize
+         * Fires when the user resizes a column
+         * @param {Number} columnIndex
+         * @param {Number} newSize
+         */
+        "columnresize" : true,
+        /**
+         * @event columnmove
+         * Fires when the user moves a column
+         * @param {Number} oldIndex
+         * @param {Number} newIndex
+         */
+        "columnmove" : true,
+        /**
+         * @event startdrag
+         * Fires when row(s) start being dragged
+         * @param {Grid} this
+         * @param {Roo.GridDD} dd The drag drop object
+         * @param {event} e The raw browser event
+         */
+        "startdrag" : true,
+        /**
+         * @event enddrag
+         * Fires when a drag operation is complete
+         * @param {Grid} this
+         * @param {Roo.GridDD} dd The drag drop object
+         * @param {event} e The raw browser event
+         */
+        "enddrag" : true,
+        /**
+         * @event dragdrop
+         * Fires when dragged row(s) are dropped on a valid DD target
+         * @param {Grid} this
+         * @param {Roo.GridDD} dd The drag drop object
+         * @param {String} targetId The target drag drop object
+         * @param {event} e The raw browser event
+         */
+        "dragdrop" : true,
+        /**
+         * @event dragover
+         * Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
+         * @param {Grid} this
+         * @param {Roo.GridDD} dd The drag drop object
+         * @param {String} targetId The target drag drop object
+         * @param {event} e The raw browser event
+         */
+        "dragover" : true,
+        /**
+         * @event dragenter
+         *  Fires when the dragged row(s) first cross another DD target while being dragged
+         * @param {Grid} this
+         * @param {Roo.GridDD} dd The drag drop object
+         * @param {String} targetId The target drag drop object
+         * @param {event} e The raw browser event
+         */
+        "dragenter" : true,
+        /**
+         * @event dragout
+         * Fires when the dragged row(s) leave another DD target while being dragged
+         * @param {Grid} this
+         * @param {Roo.GridDD} dd The drag drop object
+         * @param {String} targetId The target drag drop object
+         * @param {event} e The raw browser event
+         */
+        "dragout" : true,
+        /**
+         * @event rowclass
+         * Fires when a row is rendered, so you can change add a style to it.
+         * @param {GridView} gridview   The grid view
+         * @param {Object} rowcfg   contains record  rowIndex and rowClass - set rowClass to add a style.
+         */
+        'rowclass' : true,
+
+        /**
+         * @event render
+         * Fires when the grid is rendered
+         * @param {Grid} grid
+         */
+        'render' : true,
+            /**
+	     * @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,
+        /**
+	     * @event evententer
+	     * Fires when mouse over an event
+	     * @param {Calendar} this
+	     * @param {event} Event
+	     */
+        'evententer': true,
+        /**
+	     * @event eventleave
+	     * Fires when the mouse leaves an
+	     * @param {Calendar} this
+	     * @param {event}
+	     */
+        'eventleave': true,
+        /**
+	     * @event eventclick
+	     * Fires when the mouse click an
+	     * @param {Calendar} this
+	     * @param {event}
+	     */
+        'eventclick': true,
+        /**
+	     * @event eventrender
+	     * Fires before each cell is rendered, so you can modify the contents, like cls / title / qtip
+	     * @param {Calendar} this
+	     * @param {data} data to be modified
+	     */
+        'eventrender': true
+        
+    });
+
+    Roo.grid.Grid.superclass.constructor.call(this);
+    this.on('render', function() {
+        this.view.el.addClass('x-grid-cal'); 
+        
+        (function() { this.setDate(new Date()); }).defer(100,this); //default today..
+
+    },this);
+    
+    if (!Roo.grid.Calendar.style) {
+        Roo.grid.Calendar.style = Roo.util.CSS.createStyleSheet({
+            
+            
+            '.x-grid-cal .x-grid-col' :  {
+                height: 'auto !important',
+                'vertical-align': 'top'
+            },
+            '.x-grid-cal  .fc-event-hori' : {
+                height: '14px'
+            }
+             
+            
+        }, Roo.id());
+    }
+
+    
+    
+};
+Roo.extend(Roo.grid.Calendar, Roo.grid.Grid, {
+    /**
+     * @cfg {Store} eventStore The store that loads events.
+     */
+    eventStore : 25,
+
+     
+    activeDate : false,
+    startDay : 0,
+    autoWidth : true,
+    monitorWindowResize : false,
+
+    
+    resizeColumns : function() {
+        var col = (this.view.el.getWidth() / 7) - 3;
+        // loop through cols, and setWidth
+        for(var i =0 ; i < 7 ; i++){
+            this.cm.setColumnWidth(i, col);
+        }
+    },
+     setDate :function(date) {
+        
+        Roo.log('setDate?');
+        
+        this.resizeColumns();
+        var vd = this.activeDate;
+        this.activeDate = date;
+//        if(vd && this.el){
+//            var t = date.getTime();
+//            if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
+//                Roo.log('using add remove');
+//                
+//                this.fireEvent('monthchange', this, date);
+//                
+//                this.cells.removeClass("fc-state-highlight");
+//                this.cells.each(function(c){
+//                   if(c.dateValue == t){
+//                       c.addClass("fc-state-highlight");
+//                       setTimeout(function(){
+//                            try{c.dom.firstChild.focus();}catch(e){}
+//                       }, 50);
+//                       return false;
+//                   }
+//                   return true;
+//                });
+//                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(Date.MONTH, -1);
+        var prevStart = pm.getDaysInMonth()-startingPos;
+//        
+        
+        
+        this.cells = this.view.el.select('.x-grid-row .x-grid-col',true);
+        
+        this.textNodes = this.view.el.query('.x-grid-row .x-grid-col .x-grid-cell-text');
+        //this.cells.addClassOnOver('fc-state-hover');
+        
+        var cells = this.cells.elements;
+        var textEls = this.textNodes;
+        
+        //Roo.each(cells, function(cell){
+        //    cell.removeClass([ 'fc-past', 'fc-other-month', 'fc-future', 'fc-state-highlight', 'fc-state-disabled']);
+        //});
+        
+        days += startingPos;
+
+        // convert everything to numbers so it's fast
+        var day = 86400000;
+        var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
+        //Roo.log(d);
+        //Roo.log(pm);
+        //Roo.log(prevStart);
+        
+        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){
+            
+            //Roo.log('set Cell Class');
+            cell.title = "";
+            var t = d.getTime();
+            
+            //Roo.log(d);
+            
+            
+            cell.dateValue = t;
+            if(t == today){
+                cell.className += " fc-today";
+                cell.className += " fc-state-highlight";
+                cell.title = cal.todayText;
+            }
+            if(t == sel){
+                // disable highlight in other month..
+                cell.className += " fc-state-highlight";
+                
+            }
+            // disabling
+            if(t < min) {
+                //cell.className = " fc-state-disabled";
+                cell.title = cal.minText;
+                return;
+            }
+            if(t > max) {
+                //cell.className = " fc-state-disabled";
+                cell.title = cal.maxText;
+                return;
+            }
+            if(ddays){
+                if(ddays.indexOf(d.getDay()) != -1){
+                    // cell.title = ddaysText;
+                   // cell.className = " fc-state-disabled";
+                }
+            }
+            if(ddMatch && format){
+                var fvalue = d.dateFormat(format);
+                if(ddMatch.test(fvalue)){
+                    cell.title = ddText.replace("%0", fvalue);
+                   cell.className = " fc-state-disabled";
+                }
+            }
+            
+            if (!cell.initialClassName) {
+                cell.initialClassName = cell.dom.className;
+            }
+            
+            cell.dom.className = cell.initialClassName  + ' ' +  cell.className;
+        };
+
+        var i = 0;
+        
+        for(; i < startingPos; i++) {
+            cells[i].dayName =  (++prevStart);
+            Roo.log(textEls[i]);
+            d.setDate(d.getDate()+1);
+            
+            //cells[i].className = "fc-past fc-other-month";
+            setCellClass(this, cells[i]);
+        }
+        
+        var intDay = 0;
+        
+        for(; i < days; i++){
+            intDay = i - startingPos + 1;
+            cells[i].dayName =  (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].dayName = (++extraDays);
+            cells[i].className = "fc-future fc-other-month";
+            setCellClass(this, cells[i]);
+        }
+        
+        //this.el.select('.fc-header-title h2',true).update(Date.monthNames[date.getMonth()] + " " + date.getFullYear());
+        
+        var totalRows = Math.ceil((date.getDaysInMonth() + date.getFirstDateOfMonth().getDay()) / 7);
+        
+        // this will cause all the cells to mis
+        var rows= [];
+        var i =0;
+        for (var r = 0;r < 6;r++) {
+            for (var c =0;c < 7;c++) {
+                this.ds.getAt(r).set('weekday' + c ,cells[i++].dayName );
+            }    
+        }
+        
+        this.cells = this.view.el.select('.x-grid-row .x-grid-col',true);
+        for(i=0;i<cells.length;i++) {
+            
+            this.cells.elements[i].dayName = cells[i].dayName ;
+            this.cells.elements[i].className = cells[i].className;
+            this.cells.elements[i].initialClassName = cells[i].initialClassName ;
+            this.cells.elements[i].title = cells[i].title ;
+            this.cells.elements[i].dateValue = cells[i].dateValue ;
+        }
+        
+        
+        
+        
+        //this.el.select('tr.fc-week.fc-prev-last',true).removeClass('fc-last');
+        //this.el.select('tr.fc-week.fc-next-last',true).addClass('fc-last').show();
+        
+        ////if(totalRows != 6){
+            //this.el.select('tr.fc-week.fc-last',true).removeClass('fc-last').addClass('fc-next-last').hide();
+           // this.el.select('tr.fc-week.fc-prev-last',true).addClass('fc-last');
+       // }
+        
+        this.fireEvent('monthchange', this, date);
+        
+        
+    },
+ /**
+     * Returns the grid's SelectionModel.
+     * @return {SelectionModel}
+     */
+    getSelectionModel : function(){
+        if(!this.selModel){
+            this.selModel = new Roo.grid.CellSelectionModel();
+        }
+        return this.selModel;
+    },
+
+    load: function() {
+        this.eventStore.load()
+        
+        
+        
+    },
+    
+    findCell : function(dt) {
+        dt = dt.clearTime().getTime();
+        var ret = false;
+        this.cells.each(function(c){
+            //Roo.log("check " +c.dateValue + '?=' + dt);
+            if(c.dateValue == dt){
+                ret = c;
+                return false;
+            }
+            return true;
+        });
+        
+        return ret;
+    },
+    
+    findCells : function(rec) {
+        var s = rec.data.start_dt.clone().clearTime().getTime();
+       // Roo.log(s);
+        var e= rec.data.end_dt.clone().clearTime().getTime();
+       // Roo.log(e);
+        var ret = [];
+        this.cells.each(function(c){
+             ////Roo.log("check " +c.dateValue + '<' + e + ' > ' + s);
+            
+            if(c.dateValue > e){
+                return ;
+            }
+            if(c.dateValue < s){
+                return ;
+            }
+            ret.push(c);
+        });
+        
+        return ret;    
+    },
+    
+    findBestRow: function(cells)
+    {
+        var ret = 0;
+        
+        for (var i =0 ; i < cells.length;i++) {
+            ret  = Math.max(cells[i].rows || 0,ret);
+        }
+        return ret;
+        
+    },
+    
+    
+    addItem : function(rec)
+    {
+        // look for vertical location slot in
+        var cells = this.findCells(rec);
+        
+        rec.row = this.findBestRow(cells);
+        
+        // work out the location.
+        
+        var crow = false;
+        var rows = [];
+        for(var i =0; i < cells.length; i++) {
+            if (!crow) {
+                crow = {
+                    start : cells[i],
+                    end :  cells[i]
+                };
+                continue;
+            }
+            if (crow.start.getY() == cells[i].getY()) {
+                // on same row.
+                crow.end = cells[i];
+                continue;
+            }
+            // different row.
+            rows.push(crow);
+            crow = {
+                start: cells[i],
+                end : cells[i]
+            };
+            
+        }
+        
+        rows.push(crow);
+        rec.els = [];
+        rec.rows = rows;
+        rec.cells = cells;
+        for (var i = 0; i < cells.length;i++) {
+            cells[i].rows = Math.max(cells[i].rows || 0 , rec.row + 1 );
+            
+        }
+        
+        
+    },
+    
+    clearEvents: function() {
+        
+        if (!this.eventStore.getCount()) {
+            return;
+        }
+        // reset number of rows in cells.
+        Roo.each(this.cells.elements, function(c){
+            c.rows = 0;
+        });
+        
+        this.eventStore.each(function(e) {
+            this.clearEvent(e);
+        },this);
+        
+    },
+    
+    clearEvent : function(ev)
+    {
+        if (ev.els) {
+            Roo.each(ev.els, function(el) {
+                el.un('mouseenter' ,this.onEventEnter, this);
+                el.un('mouseleave' ,this.onEventLeave, this);
+                el.remove();
+            },this);
+            ev.els = [];
+        }
+    },
+    
+    
+    renderEvent : function(ev,ctr) {
+        if (!ctr) {
+             ctr = this.view.el.select('.fc-event-container',true).first();
+        }
+        
+         
+        this.clearEvent(ev);
+            //code
+       
+        
+        
+        ev.els = [];
+        var cells = ev.cells;
+        var rows = ev.rows;
+        this.fireEvent('eventrender', this, ev);
+        
+        for(var i =0; i < rows.length; i++) {
+            
+            cls = '';
+            if (i == 0) {
+                cls += ' fc-event-start';
+            }
+            if ((i+1) == rows.length) {
+                cls += ' fc-event-end';
+            }
+            
+            //Roo.log(ev.data);
+            // how many rows should it span..
+            var cg = this.eventTmpl.append(ctr,Roo.apply({
+                fccls : cls
+                
+            }, ev.data) , true);
+            
+            
+            cg.on('mouseenter' ,this.onEventEnter, this, ev);
+            cg.on('mouseleave' ,this.onEventLeave, this, ev);
+            cg.on('click', this.onEventClick, this, ev);
+            
+            ev.els.push(cg);
+            
+            var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
+            var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
+            //Roo.log(cg);
+             
+            cg.setXY([sbox.x +2, sbox.y +(ev.row * 20)]);    
+            cg.setWidth(ebox.right - sbox.x -2);
+        }
+    },
+    
+    renderEvents: function()
+    {   
+        // first make sure there is enough space..
+        
+        if (!this.eventTmpl) {
+            this.eventTmpl = new Roo.Template(
+                '<div class="roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable {fccls} {cls}"  style="position: absolute" unselectable="on">' +
+                    '<div class="fc-event-inner">' +
+                        '<span class="fc-event-time">{time}</span>' +
+                        '<span class="fc-event-title" qtip="{qtip}">{title}</span>' +
+                    '</div>' +
+                    '<div class="ui-resizable-heandle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div>' +
+                '</div>'
+            );
+                
+        }
+               
+        
+        
+        this.cells.each(function(c) {
+            //Roo.log(c.select('.fc-day-content div',true).first());
+            c.select('.fc-day-content div',true).first().setHeight(Math.max(34, (c.rows || 1) * 20));
+        });
+        
+        var ctr = this.view.el.select('.fc-event-container',true).first();
+        
+        var cls;
+        this.eventStore.each(function(ev){
+            
+            this.renderEvent(ev);
+             
+             
+        }, this);
+        this.view.layout();
+        
+    },
+    
+    onEventEnter: function (e, el,event,d) {
+        this.fireEvent('evententer', this, el, event);
+    },
+    
+    onEventLeave: function (e, el,event,d) {
+        this.fireEvent('eventleave', this, el, event);
+    },
+    
+    onEventClick: function (e, el,event,d) {
+        this.fireEvent('eventclick', this, el, event);
+    },
+    
+    onMonthChange: function () {
+        this.store.load();
+    },
+    
+    onLoad: function () {
+        
+        //Roo.log('calendar onload');
+//         
+        if(this.eventStore.getCount() > 0){
+            
+           
+            
+            this.eventStore.each(function(d){
+                
+                
+                // FIXME..
+                var add =   d.data;
+                if (typeof(add.end_dt) == 'undefined')  {
+                    Roo.log("Missing End time in calendar data: ");
+                    Roo.log(d);
+                    return;
+                }
+                if (typeof(add.start_dt) == 'undefined')  {
+                    Roo.log("Missing Start time in calendar data: ");
+                    Roo.log(d);
+                    return;
+                }
+                add.start_dt = typeof(add.start_dt) == 'string' ? Date.parseDate(add.start_dt,'Y-m-d H:i:s') : add.start_dt,
+                add.end_dt = typeof(add.end_dt) == 'string' ? Date.parseDate(add.end_dt,'Y-m-d H:i:s') : add.end_dt,
+                add.id = add.id || d.id;
+                add.title = add.title || '??';
+                
+                this.addItem(d);
+                
+             
+            },this);
+        }
+        
+        this.renderEvents();
+    }
+    
+
+});
+/*
+ grid : {
+                xtype: 'Grid',
+                xns: Roo.grid,
+                listeners : {
+                    render : function ()
+                    {
+                        _this.grid = this;
+                        
+                        if (!this.view.el.hasClass('course-timesheet')) {
+                            this.view.el.addClass('course-timesheet');
+                        }
+                        if (this.tsStyle) {
+                            this.ds.load({});
+                            return; 
+                        }
+                        Roo.log('width');
+                        Roo.log(_this.grid.view.el.getWidth());
+                        
+                        
+                        this.tsStyle =  Roo.util.CSS.createStyleSheet({
+                            '.course-timesheet .x-grid-row' : {
+                                height: '80px'
+                            },
+                            '.x-grid-row td' : {
+                                'vertical-align' : 0
+                            },
+                            '.course-edit-link' : {
+                                'color' : 'blue',
+                                'text-overflow' : 'ellipsis',
+                                'overflow' : 'hidden',
+                                'white-space' : 'nowrap',
+                                'cursor' : 'pointer'
+                            },
+                            '.sub-link' : {
+                                'color' : 'green'
+                            },
+                            '.de-act-sup-link' : {
+                                'color' : 'purple',
+                                'text-decoration' : 'line-through'
+                            },
+                            '.de-act-link' : {
+                                'color' : 'red',
+                                'text-decoration' : 'line-through'
+                            },
+                            '.course-timesheet .course-highlight' : {
+                                'border-top-style': 'dashed !important',
+                                'border-bottom-bottom': 'dashed !important'
+                            },
+                            '.course-timesheet .course-item' : {
+                                'font-family'   : 'tahoma, arial, helvetica',
+                                'font-size'     : '11px',
+                                'overflow'      : 'hidden',
+                                'padding-left'  : '10px',
+                                'padding-right' : '10px',
+                                'padding-top' : '10px' 
+                            }
+                            
+                        }, Roo.id());
+                                this.ds.load({});
+                    }
+                },
+                autoWidth : true,
+                monitorWindowResize : false,
+                cellrenderer : function(v,x,r)
+                {
+                    return v;
+                },
+                sm : {
+                    xtype: 'CellSelectionModel',
+                    xns: Roo.grid
+                },
+                dataSource : {
+                    xtype: 'Store',
+                    xns: Roo.data,
+                    listeners : {
+                        beforeload : function (_self, options)
+                        {
+                            options.params = options.params || {};
+                            options.params._month = _this.monthField.getValue();
+                            options.params.limit = 9999;
+                            options.params['sort'] = 'when_dt';    
+                            options.params['dir'] = 'ASC';    
+                            this.proxy.loadResponse = this.loadResponse;
+                            Roo.log("load?");
+                            //this.addColumns();
+                        },
+                        load : function (_self, records, options)
+                        {
+                            _this.grid.view.el.select('.course-edit-link', true).on('click', function() {
+                                // if you click on the translation.. you can edit it...
+                                var el = Roo.get(this);
+                                var id = el.dom.getAttribute('data-id');
+                                var d = el.dom.getAttribute('data-date');
+                                var t = el.dom.getAttribute('data-time');
+                                //var id = this.child('span').dom.textContent;
+                                
+                                //Roo.log(this);
+                                Pman.Dialog.CourseCalendar.show({
+                                    id : id,
+                                    when_d : d,
+                                    when_t : t,
+                                    productitem_active : id ? 1 : 0
+                                }, function() {
+                                    _this.grid.ds.load({});
+                                });
+                           
+                           });
+                           
+                           _this.panel.fireEvent('resize', [ '', '' ]);
+                        }
+                    },
+                    loadResponse : function(o, success, response){
+                            // this is overridden on before load..
+                            
+                            Roo.log("our code?");	
+                            //Roo.log(success);
+                            //Roo.log(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){
+                                Roo.log("load exception?");
+                                this.fireEvent("loadexception", this, o, response, e);
+                                o.request.callback.call(o.request.scope, null, o.request.arg, false);
+                                return;
+                            }
+                            Roo.log("ready...");        
+                            // loop through result.records;
+                            // and set this.tdate[date] = [] << array of records..
+                            _this.tdata  = {};
+                            Roo.each(result.records, function(r){
+                                //Roo.log(r.data);
+                                if(typeof(_this.tdata[r.data.when_dt.format('j')]) == 'undefined'){
+                                    _this.tdata[r.data.when_dt.format('j')] = [];
+                                }
+                                _this.tdata[r.data.when_dt.format('j')].push(r.data);
+                            });
+                            
+                            //Roo.log(_this.tdata);
+                            
+                            result.records = [];
+                            result.totalRecords = 6;
+                    
+                            // let's generate some duumy records for the rows.
+                            //var st = _this.dateField.getValue();
+                            
+                            // work out monday..
+                            //st = st.add(Date.DAY, -1 * st.format('w'));
+                            
+                            var date = Date.parseDate(_this.monthField.getValue(), "Y-m-d");
+                            
+                            var firstOfMonth = date.getFirstDayOfMonth();
+                            var days = date.getDaysInMonth();
+                            var d = 1;
+                            var firstAdded = false;
+                            for (var i = 0; i < result.totalRecords ; i++) {
+                                //var d= st.add(Date.DAY, i);
+                                var row = {};
+                                var added = 0;
+                                for(var w = 0 ; w < 7 ; w++){
+                                    if(!firstAdded && firstOfMonth != w){
+                                        continue;
+                                    }
+                                    if(d > days){
+                                        continue;
+                                    }
+                                    firstAdded = true;
+                                    var dd = (d > 0 && d < 10) ? "0"+d : d;
+                                    row['weekday'+w] = String.format(
+                                                    '<span style="font-size: 16px;"><b>{0}</b></span>'+
+                                                    '<span class="course-edit-link" style="color:blue;" data-id="0" data-date="{1}"> Add New</span>',
+                                                    d,
+                                                    date.format('Y-m-')+dd
+                                                );
+                                    added++;
+                                    if(typeof(_this.tdata[d]) != 'undefined'){
+                                        Roo.each(_this.tdata[d], function(r){
+                                            var is_sub = '';
+                                            var deactive = '';
+                                            var id = r.id;
+                                            var desc = (r.productitem_id_descrip) ? r.productitem_id_descrip : '';
+                                            if(r.parent_id*1>0){
+                                                is_sub = (r.productitem_id_visible*1 < 1) ? 'de-act-sup-link' :'sub-link';
+                                                id = r.parent_id;
+                                            }
+                                            if(r.productitem_id_visible*1 < 1 && r.parent_id*1 < 1){
+                                                deactive = 'de-act-link';
+                                            }
+                                            
+                                            row['weekday'+w] += String.format(
+                                                    '<br /><span class="course-edit-link {3} {4}" qtip="{5}" data-id="{0}">{2} - {1}</span>',
+                                                    id, //0
+                                                    r.product_id_name, //1
+                                                    r.when_dt.format('h:ia'), //2
+                                                    is_sub, //3
+                                                    deactive, //4
+                                                    desc // 5
+                                            );
+                                        });
+                                    }
+                                    d++;
+                                }
+                                
+                                // only do this if something added..
+                                if(added > 0){ 
+                                    result.records.push(_this.grid.dataSource.reader.newRow(row));
+                                }
+                                
+                                
+                                // push it twice. (second one with an hour..
+                                
+                            }
+                            //Roo.log(result);
+                            this.fireEvent("load", this, o, o.request.arg);
+                            o.request.callback.call(o.request.scope, result, o.request.arg, true);
+                        },
+                    sortInfo : {field: 'when_dt', direction : 'ASC' },
+                    proxy : {
+                        xtype: 'HttpProxy',
+                        xns: Roo.data,
+                        method : 'GET',
+                        url : baseURL + '/Roo/Shop_course.php'
+                    },
+                    reader : {
+                        xtype: 'JsonReader',
+                        xns: Roo.data,
+                        id : 'id',
+                        fields : [
+                            {
+                                'name': 'id',
+                                'type': 'int'
+                            },
+                            {
+                                'name': 'when_dt',
+                                'type': 'string'
+                            },
+                            {
+                                'name': 'end_dt',
+                                'type': 'string'
+                            },
+                            {
+                                'name': 'parent_id',
+                                'type': 'int'
+                            },
+                            {
+                                'name': 'product_id',
+                                'type': 'int'
+                            },
+                            {
+                                'name': 'productitem_id',
+                                'type': 'int'
+                            },
+                            {
+                                'name': 'guid',
+                                'type': 'int'
+                            }
+                        ]
+                    }
+                },
+                toolbar : {
+                    xtype: 'Toolbar',
+                    xns: Roo,
+                    items : [
+                        {
+                            xtype: 'Button',
+                            xns: Roo.Toolbar,
+                            listeners : {
+                                click : function (_self, e)
+                                {
+                                    var sd = Date.parseDate(_this.monthField.getValue(), "Y-m-d");
+                                    sd.setMonth(sd.getMonth()-1);
+                                    _this.monthField.setValue(sd.format('Y-m-d'));
+                                    _this.grid.ds.load({});
+                                }
+                            },
+                            text : "Back"
+                        },
+                        {
+                            xtype: 'Separator',
+                            xns: Roo.Toolbar
+                        },
+                        {
+                            xtype: 'MonthField',
+                            xns: Roo.form,
+                            listeners : {
+                                render : function (_self)
+                                {
+                                    _this.monthField = _self;
+                                   // _this.monthField.set  today
+                                },
+                                select : function (combo, date)
+                                {
+                                    _this.grid.ds.load({});
+                                }
+                            },
+                            value : (function() { return new Date(); })()
+                        },
+                        {
+                            xtype: 'Separator',
+                            xns: Roo.Toolbar
+                        },
+                        {
+                            xtype: 'TextItem',
+                            xns: Roo.Toolbar,
+                            text : "Blue: in-active, green: in-active sup-event, red: de-active, purple: de-active sup-event"
+                        },
+                        {
+                            xtype: 'Fill',
+                            xns: Roo.Toolbar
+                        },
+                        {
+                            xtype: 'Button',
+                            xns: Roo.Toolbar,
+                            listeners : {
+                                click : function (_self, e)
+                                {
+                                    var sd = Date.parseDate(_this.monthField.getValue(), "Y-m-d");
+                                    sd.setMonth(sd.getMonth()+1);
+                                    _this.monthField.setValue(sd.format('Y-m-d'));
+                                    _this.grid.ds.load({});
+                                }
+                            },
+                            text : "Next"
+                        }
+                    ]
+                },
+                 
+            }
+        };
+        
+        *//*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+/**
+ * @class Roo.LoadMask
+ * A simple utility class for generically masking elements while loading data.  If the element being masked has
+ * an underlying {@link Roo.data.Store}, the masking will be automatically synchronized with the store's loading
+ * process and the mask element will be cached for reuse.  For all other elements, this mask will replace the
+ * element's UpdateManager load indicator and will be destroyed after the initial load.
+ * @constructor
+ * Create a new LoadMask
+ * @param {String/HTMLElement/Roo.Element} el The element or DOM node, or its id
+ * @param {Object} config The config object
+ */
+Roo.LoadMask = function(el, config){
+    this.el = Roo.get(el);
+    Roo.apply(this, config);
+    if(this.store){
+        this.store.on('beforeload', this.onBeforeLoad, this);
+        this.store.on('load', this.onLoad, this);
+        this.store.on('loadexception', this.onLoadException, this);
+        this.removeMask = false;
+    }else{
+        var um = this.el.getUpdateManager();
+        um.showLoadIndicator = false; // disable the default indicator
+        um.on('beforeupdate', this.onBeforeLoad, this);
+        um.on('update', this.onLoad, this);
+        um.on('failure', this.onLoad, this);
+        this.removeMask = true;
+    }
+};
+
+Roo.LoadMask.prototype = {
+    /**
+     * @cfg {Boolean} removeMask
+     * True to create a single-use mask that is automatically destroyed after loading (useful for page loads),
+     * False to persist the mask element reference for multiple uses (e.g., for paged data widgets).  Defaults to false.
+     */
+    /**
+     * @cfg {String} msg
+     * The text to display in a centered loading message box (defaults to 'Loading...')
+     */
+    msg : 'Loading...',
+    /**
+     * @cfg {String} msgCls
+     * The CSS class to apply to the loading message element (defaults to "x-mask-loading")
+     */
+    msgCls : 'x-mask-loading',
+
+    /**
+     * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false)
+     * @type Boolean
+     */
+    disabled: false,
+
+    /**
+     * Disables the mask to prevent it from being displayed
+     */
+    disable : function(){
+       this.disabled = true;
+    },
+
+    /**
+     * Enables the mask so that it can be displayed
+     */
+    enable : function(){
+        this.disabled = false;
+    },
+    
+    onLoadException : function()
+    {
+        Roo.log(arguments);
+        
+        if (typeof(arguments[3]) != 'undefined') {
+            Roo.MessageBox.alert("Error loading",arguments[3]);
+        } 
+        /*
+        try {
+            if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
+                Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
+            }   
+        } catch(e) {
+            
+        }
+        */
+    
+        
+        
+        this.el.unmask(this.removeMask);
+    },
+    // private
+    onLoad : function()
+    {
+        this.el.unmask(this.removeMask);
+    },
+
+    // private
+    onBeforeLoad : function(){
+        if(!this.disabled){
+            this.el.mask(this.msg, this.msgCls);
+        }
+    },
+
+    // private
+    destroy : function(){
+        if(this.store){
+            this.store.un('beforeload', this.onBeforeLoad, this);
+            this.store.un('load', this.onLoad, this);
+            this.store.un('loadexception', this.onLoadException, this);
+        }else{
+            var um = this.el.getUpdateManager();
+            um.un('beforeupdate', this.onBeforeLoad, this);
+            um.un('update', this.onLoad, this);
+            um.un('failure', this.onLoad, this);
+        }
+    }
+};/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+
+/**
+ * @class Roo.XTemplate
+ * @extends Roo.Template
+ * Provides a template that can have nested templates for loops or conditionals. The syntax is:
+<pre><code>
+var t = new Roo.XTemplate(
+	'&lt;select name="{name}"&gt;',
+		'&lt;tpl for="options"&gt;&lt;option value="{value:trim}"&gt;{text:ellipsis(10)}&lt;/option&gt;&lt;/tpl&gt;',
+	'&lt;/select&gt;'
+);
+ 
+// then append, applying the master template values
+ </code></pre>
+ *
+ * Supported features:
+ *
+ *  Tags:
+
+<pre><code>
+      {a_variable} - output encoded.
+      {a_variable.format:("Y-m-d")} - call a method on the variable
+      {a_variable:raw} - unencoded output
+      {a_variable:toFixed(1,2)} - Roo.util.Format."toFixed"
+      {a_variable:this.method_on_template(...)} - call a method on the template object.
+ 
+</code></pre>
+ *  The tpl tag:
+<pre><code>
+        &lt;tpl for="a_variable or condition.."&gt;&lt;/tpl&gt;
+        &lt;tpl if="a_variable or condition"&gt;&lt;/tpl&gt;
+        &lt;tpl exec="some javascript"&gt;&lt;/tpl&gt;
+        &lt;tpl name="named_template"&gt;&lt;/tpl&gt; (experimental)
+  
+        &lt;tpl for="."&gt;&lt;/tpl&gt; - just iterate the property..
+        &lt;tpl for=".."&gt;&lt;/tpl&gt; - iterates with the parent (probably the template) 
+</code></pre>
+ *      
+ */
+Roo.XTemplate = function()
+{
+    Roo.XTemplate.superclass.constructor.apply(this, arguments);
+    if (this.html) {
+        this.compile();
+    }
+};
+
+
+Roo.extend(Roo.XTemplate, Roo.Template, {
+
+    /**
+     * The various sub templates
+     */
+    tpls : false,
+    /**
+     *
+     * basic tag replacing syntax
+     * WORD:WORD()
+     *
+     * // you can fake an object call by doing this
+     *  x.t:(test,tesT) 
+     * 
+     */
+    re : /\{([\w-\.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
+
+    /**
+     * compile the template
+     *
+     * This is not recursive, so I'm not sure how nested templates are really going to be handled..
+     *
+     */
+    compile: function()
+    {
+        var s = this.html;
+     
+        s = ['<tpl>', s, '</tpl>'].join('');
+    
+        var re     = /<tpl\b[^>]*>((?:(?=([^<]+))\2|<(?!tpl\b[^>]*>))*?)<\/tpl>/,
+            nameRe = /^<tpl\b[^>]*?for="(.*?)"/,
+            ifRe   = /^<tpl\b[^>]*?if="(.*?)"/,
+            execRe = /^<tpl\b[^>]*?exec="(.*?)"/,
+            namedRe = /^<tpl\b[^>]*?name="(\w+)"/,  // named templates..
+            m,
+            id     = 0,
+            tpls   = [];
+    
+        while(true == !!(m = s.match(re))){
+            var forMatch   = m[0].match(nameRe),
+                ifMatch   = m[0].match(ifRe),
+                execMatch   = m[0].match(execRe),
+                namedMatch   = m[0].match(namedRe),
+                
+                exp  = null, 
+                fn   = null,
+                exec = null,
+                name = forMatch && forMatch[1] ? forMatch[1] : '';
+                
+            if (ifMatch) {
+                // if - puts fn into test..
+                exp = ifMatch && ifMatch[1] ? ifMatch[1] : null;
+                if(exp){
+                   fn = new Function('values', 'parent', 'with(values){ return '+(Roo.util.Format.htmlDecode(exp))+'; }');
+                }
+            }
+            
+            if (execMatch) {
+                // exec - calls a function... returns empty if true is  returned.
+                exp = execMatch && execMatch[1] ? execMatch[1] : null;
+                if(exp){
+                   exec = new Function('values', 'parent', 'with(values){ '+(Roo.util.Format.htmlDecode(exp))+'; }');
+                }
+            }
+            
+            
+            if (name) {
+                // for = 
+                switch(name){
+                    case '.':  name = new Function('values', 'parent', 'with(values){ return values; }'); break;
+                    case '..': name = new Function('values', 'parent', 'with(values){ return parent; }'); break;
+                    default:   name = new Function('values', 'parent', 'with(values){ return '+name+'; }');
+                }
+            }
+            var uid = namedMatch ? namedMatch[1] : id;
+            
+            
+            tpls.push({
+                id:     namedMatch ? namedMatch[1] : id,
+                target: name,
+                exec:   exec,
+                test:   fn,
+                body:   m[1] || ''
+            });
+            if (namedMatch) {
+                s = s.replace(m[0], '');
+            } else { 
+                s = s.replace(m[0], '{xtpl'+ id + '}');
+            }
+            ++id;
+        }
+        this.tpls = [];
+        for(var i = tpls.length-1; i >= 0; --i){
+            this.compileTpl(tpls[i]);
+            this.tpls[tpls[i].id] = tpls[i];
+        }
+        this.master = tpls[tpls.length-1];
+        return this;
+    },
+    /**
+     * same as applyTemplate, except it's done to one of the subTemplates
+     * when using named templates, you can do:
+     *
+     * var str = pl.applySubTemplate('your-name', values);
+     *
+     * 
+     * @param {Number} id of the template
+     * @param {Object} values to apply to template
+     * @param {Object} parent (normaly the instance of this object)
+     */
+    applySubTemplate : function(id, values, parent)
+    {
+        
+        
+        var t = this.tpls[id];
+        
+        
+        try { 
+            if(t.test && !t.test.call(this, values, parent)){
+                return '';
+            }
+        } catch(e) {
+            Roo.log("Xtemplate.applySubTemplate 'test': Exception thrown");
+            Roo.log(e.toString());
+            Roo.log(t.test);
+            return ''
+        }
+        try { 
+            
+            if(t.exec && t.exec.call(this, values, parent)){
+                return '';
+            }
+        } catch(e) {
+            Roo.log("Xtemplate.applySubTemplate 'exec': Exception thrown");
+            Roo.log(e.toString());
+            Roo.log(t.exec);
+            return ''
+        }
+        try {
+            var vs = t.target ? t.target.call(this, values, parent) : values;
+            parent = t.target ? values : parent;
+            if(t.target && vs instanceof Array){
+                var buf = [];
+                for(var i = 0, len = vs.length; i < len; i++){
+                    buf[buf.length] = t.compiled.call(this, vs[i], parent);
+                }
+                return buf.join('');
+            }
+            return t.compiled.call(this, vs, parent);
+        } catch (e) {
+            Roo.log("Xtemplate.applySubTemplate : Exception thrown");
+            Roo.log(e.toString());
+            Roo.log(t.compiled);
+            return '';
+        }
+    },
+
+    compileTpl : function(tpl)
+    {
+        var fm = Roo.util.Format;
+        var useF = this.disableFormats !== true;
+        var sep = Roo.isGecko ? "+" : ",";
+        var undef = function(str) {
+            Roo.log("Property not found :"  + str);
+            return '';
+        };
+        
+        var fn = function(m, name, format, args)
+        {
+            //Roo.log(arguments);
+            args = args ? args.replace(/\\'/g,"'") : args;
+            //["{TEST:(a,b,c)}", "TEST", "", "a,b,c", 0, "{TEST:(a,b,c)}"]
+            if (typeof(format) == 'undefined') {
+                format= 'htmlEncode';
+            }
+            if (format == 'raw' ) {
+                format = false;
+            }
+            
+            if(name.substr(0, 4) == 'xtpl'){
+                return "'"+ sep +'this.applySubTemplate('+name.substr(4)+', values, parent)'+sep+"'";
+            }
+            
+            // build an array of options to determine if value is undefined..
+            
+            // basically get 'xxxx.yyyy' then do
+            // (typeof(xxxx) == 'undefined' || typeof(xxx.yyyy) == 'undefined') ?
+            //    (function () { Roo.log("Property not found"); return ''; })() :
+            //    ......
+            
+            var udef_ar = [];
+            var lookfor = '';
+            Roo.each(name.split('.'), function(st) {
+                lookfor += (lookfor.length ? '.': '') + st;
+                udef_ar.push(  "(typeof(" + lookfor + ") == 'undefined')"  );
+            });
+            
+            var udef_st = '((' + udef_ar.join(" || ") +") ? undef('" + name + "') : "; // .. needs )
+            
+            
+            if(format && useF){
+                
+                args = args ? ',' + args : "";
+                 
+                if(format.substr(0, 5) != "this."){
+                    format = "fm." + format + '(';
+                }else{
+                    format = 'this.call("'+ format.substr(5) + '", ';
+                    args = ", values";
+                }
+                
+                return "'"+ sep +   udef_st   +    format + name + args + "))"+sep+"'";
+            }
+             
+            if (args.length) {
+                // called with xxyx.yuu:(test,test)
+                // change to ()
+                return "'"+ sep + udef_st  + name + '(' +  args + "))"+sep+"'";
+            }
+            // raw.. - :raw modifier..
+            return "'"+ sep + udef_st  + name + ")"+sep+"'";
+            
+        };
+        var body;
+        // branched to use + in gecko and [].join() in others
+        if(Roo.isGecko){
+            body = "tpl.compiled = function(values, parent){  with(values) { return '" +
+                   tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
+                    "';};};";
+        }else{
+            body = ["tpl.compiled = function(values, parent){  with (values) { return ['"];
+            body.push(tpl.body.replace(/(\r\n|\n)/g,
+                            '\\n').replace(/'/g, "\\'").replace(this.re, fn));
+            body.push("'].join('');};};");
+            body = body.join('');
+        }
+        
+        Roo.debug && Roo.log(body.replace(/\\n/,'\n'));
+       
+        /** eval:var:tpl eval:var:fm eval:var:useF eval:var:undef  */
+        eval(body);
+        
+        return this;
+    },
+
+    applyTemplate : function(values){
+        return this.master.compiled.call(this, values, {});
+        //var s = this.subs;
+    },
+
+    apply : function(){
+        return this.applyTemplate.apply(this, arguments);
+    }
+
+ });
+
+Roo.XTemplate.from = function(el){
+    el = Roo.getDom(el);
+    return new Roo.XTemplate(el.value || el.innerHTML);
+};
\ No newline at end of file
diff --git a/roojs-ui.js b/roojs-ui.js
index e69de29bb2..e22f6889a8 100644
--- a/roojs-ui.js
+++ b/roojs-ui.js
@@ -0,0 +1,1806 @@
+// Roo/dd/DragDrop.js
+(function(){var A=Roo.EventManager;var B=Roo.lib.Dom;Roo.dd.DragDrop=function(id,C,D){if(id){this.init(id,C,D);}};Roo.extend(Roo.dd.DragDrop,Roo.util.Observable,{id:null,config:null,dragElId:null,handleElId:null,invalidHandleTypes:null,invalidHandleIds:null,invalidHandleClasses:null,startPageX:0,startPageY:0,groups:null,locked:false,lock:function(){this.locked=true;
+},unlock:function(){this.locked=false;},isTarget:true,padding:null,_domRef:null,__ygDragDrop:true,constrainX:false,constrainY:false,minX:0,maxX:0,minY:0,maxY:0,maintainOffset:false,xTicks:null,yTicks:null,primaryButtonOnly:true,available:false,hasOuterHandles:false,b4StartDrag:function(x,y){}
+,startDrag:function(x,y){},b4Drag:function(e){},onDrag:function(e){},onDragEnter:function(e,id){},b4DragOver:function(e){},onDragOver:function(e,id){},b4DragOut:function(e){},onDragOut:function(e,id){},b4DragDrop:function(e){},onDragDrop:function(e,id){},onInvalidDrop:function(e){}
+,b4EndDrag:function(e){},endDrag:function(e){},b4MouseDown:function(e){},onMouseDown:function(e){},onMouseUp:function(e){},onAvailable:function(){},defaultPadding:{left:0,right:0,top:0,bottom:0},constrainTo:function(C,D,E){if(typeof D=="number"){D={left:D,right:D,top:D,bottom:D}
+;}D=D||this.defaultPadding;var b=Roo.get(this.getEl()).getBox();var ce=Roo.get(C);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 F=b.y-c.y;var G=b.x-c.x;this.resetConstraints();this.setXConstraint(G-(D.left||0),c.width-G-b.width-(D.right||0));this.setYConstraint(F-(D.top||0),c.height-F-b.height-(D.bottom||0));},getEl:function(){if(!this._domRef){this._domRef=Roo.getDom(this.id);
+}return this._domRef;},getDragEl:function(){return Roo.getDom(this.dragElId);},init:function(id,C,D){this.initTarget(id,C,D);if(!Roo.isTouch){A.on(this.id,"mousedown",this.handleMouseDown,this);}A.on(this.id,"touchstart",this.handleMouseDown,this);},initTarget:function(id,C,D){this.config=D||{}
+;this.DDM=Roo.dd.DDM;this.groups={};if(typeof id!=="string"){id=Roo.id(id);}this.id=id;this.addToGroup((C)?C:"default");this.handleElId=id;this.setDragElId(id);this.invalidHandleTypes={A:"A"};this.invalidHandleIds={};this.invalidHandleClasses=[];this.applyConfig();
+this.handleOnAvailable();},applyConfig:function(){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);},handleOnAvailable:function(){this.available=true;
+this.resetConstraints();this.onAvailable();},setPadding:function(C,D,E,F){if(!D&&0!==D){this.padding=[C,C,C,C];}else if(!E&&0!==E){this.padding=[C,D,C,D];}else{this.padding=[C,D,E,F];}},setInitPosition:function(C,D){var el=this.getEl();if(!this.DDM.verifyEl(el)){return;
+}var dx=C||0;var dy=D||0;var p=B.getXY(el);this.initPageX=p[0]-dx;this.initPageY=p[1]-dy;this.lastPageX=p[0];this.lastPageY=p[1];this.setStartPosition(p);},setStartPosition:function(C){var p=C||B.getXY(this.getEl());this.deltaSetXY=null;this.startPageX=p[0];
+this.startPageY=p[1];},addToGroup:function(C){this.groups[C]=true;this.DDM.regDragDrop(this,C);},removeFromGroup:function(C){if(this.groups[C]){delete this.groups[C];}this.DDM.removeDDFromGroup(this,C);},setDragElId:function(id){this.dragElId=id;},setHandleElId:function(id){if(typeof id!=="string"){id=Roo.id(id);
+}this.handleElId=id;this.DDM.regHandle(this.id,id);},setOuterHandleElId:function(id){if(typeof id!=="string"){id=Roo.id(id);}A.on(id,"mousedown",this.handleMouseDown,this);this.setHandleElId(id);this.hasOuterHandles=true;},unreg:function(){A.un(this.id,"mousedown",this.handleMouseDown);
+A.un(this.id,"touchstart",this.handleMouseDown);this._domRef=null;this.DDM._remove(this);},destroy:function(){this.unreg();},isLocked:function(){return (this.DDM.isLocked()||this.locked);},handleMouseDown:function(e,C){if(!Roo.isTouch&&this.primaryButtonOnly&&e.button!=0){return;
+}if(e.browserEvent.touches&&e.browserEvent.touches.length!=1){return;}if(this.isLocked()){return;}this.DDM.refreshCache(this.groups);var pt=new Roo.lib.Point(Roo.lib.Event.getPageX(e),Roo.lib.Event.getPageY(e));if(!this.hasOuterHandles&&!this.DDM.isOverTarget(pt,this)){}
+else{if(this.clickValidator(e)){this.setStartPosition();this.b4MouseDown(e);this.onMouseDown(e);this.DDM.handleMouseDown(e,this);this.DDM.stopEvent(e);}else{}}},clickValidator:function(e){var C=e.getTarget();return (this.isValidHandleChild(C)&&(this.id==this.handleElId||this.DDM.handleWasClicked(C,this.id)));
+},addInvalidHandleType:function(C){var D=C.toUpperCase();this.invalidHandleTypes[D]=D;},addInvalidHandleId:function(id){if(typeof id!=="string"){id=Roo.id(id);}this.invalidHandleIds[id]=id;},addInvalidHandleClass:function(C){this.invalidHandleClasses.push(C);
+},removeInvalidHandleType:function(C){var D=C.toUpperCase();delete this.invalidHandleTypes[D];},removeInvalidHandleId:function(id){if(typeof id!=="string"){id=Roo.id(id);}delete this.invalidHandleIds[id];},removeInvalidHandleClass:function(C){for(var i=0,D=this.invalidHandleClasses.length;
+i<D;++i){if(this.invalidHandleClasses[i]==C){delete this.invalidHandleClasses[i];}}},isValidHandleChild:function(C){var D=true;var E;try{E=C.nodeName.toUpperCase();}catch(e){E=C.nodeName;}D=D&&!this.invalidHandleTypes[E];D=D&&!this.invalidHandleIds[C.id];
+for(var i=0,F=this.invalidHandleClasses.length;D&&i<F;++i){D=!B.hasClass(C,this.invalidHandleClasses[i]);}return D;},setXTicks:function(C,D){this.xTicks=[];this.xTickSize=D;var E={};for(var i=this.initPageX;i>=this.minX;i=i-D){if(!E[i]){this.xTicks[this.xTicks.length]=i;
+E[i]=true;}}for(i=this.initPageX;i<=this.maxX;i=i+D){if(!E[i]){this.xTicks[this.xTicks.length]=i;E[i]=true;}}this.xTicks.sort(this.DDM.numericSort);},setYTicks:function(C,D){this.yTicks=[];this.yTickSize=D;var E={};for(var i=this.initPageY;i>=this.minY;i=i-D){if(!E[i]){this.yTicks[this.yTicks.length]=i;
+E[i]=true;}}for(i=this.initPageY;i<=this.maxY;i=i+D){if(!E[i]){this.yTicks[this.yTicks.length]=i;E[i]=true;}}this.yTicks.sort(this.DDM.numericSort);},setXConstraint:function(C,D,E){this.leftConstraint=C;this.rightConstraint=D;this.minX=this.initPageX-C;this.maxX=this.initPageX+D;
+if(E){this.setXTicks(this.initPageX,E);}this.constrainX=true;},clearConstraints:function(){this.constrainX=false;this.constrainY=false;this.clearTicks();},clearTicks:function(){this.xTicks=null;this.yTicks=null;this.xTickSize=0;this.yTickSize=0;},setYConstraint:function(C,D,E){this.topConstraint=C;
+this.bottomConstraint=D;this.minY=this.initPageY-C;this.maxY=this.initPageY+D;if(E){this.setYTicks(this.initPageY,E);}this.constrainY=true;},resetConstraints:function(){if(this.initPageX||this.initPageX===0){var dx=(this.maintainOffset)?this.lastPageX-this.initPageX:0;
+var dy=(this.maintainOffset)?this.lastPageY-this.initPageY:0;this.setInitPosition(dx,dy);}else{this.setInitPosition();}if(this.constrainX){this.setXConstraint(this.leftConstraint,this.rightConstraint,this.xTickSize);}if(this.constrainY){this.setYConstraint(this.topConstraint,this.bottomConstraint,this.yTickSize);
+}},getTick:function(C,D){if(!D){return C;}else if(D[0]>=C){return D[0];}else{for(var i=0,E=D.length;i<E;++i){var F=i+1;if(D[F]&&D[F]>=C){var G=C-D[i];var H=D[F]-C;return (H>G)?D[i]:D[F];}}return D[D.length-1];}},toString:function(){return ("DragDrop "+this.id);
+}});})();
+// Roo/dd/DragDropMgr.js
+if(!Roo.dd.DragDropMgr){Roo.dd.DragDropMgr=function(){var A=Roo.EventManager;return {ids:{},handleIds:{},dragCurrent:null,dragOvers:{},deltaX:0,deltaY:0,preventDefault:true,stopPropagation:true,initalized:false,locked:false,init:function(){this.initialized=true;
+},POINT:0,INTERSECT:1,mode:0,_execOnAll:function(B,C){for(var i in this.ids){for(var j in this.ids[i]){var D=this.ids[i][j];if(!this.isTypeOfDD(D)){continue;}D[B].apply(D,C);}}},_onLoad:function(){this.init();if(!Roo.isTouch){A.on(document,"mouseup",this.handleMouseUp,this,true);
+A.on(document,"mousemove",this.handleMouseMove,this,true);}A.on(document,"touchend",this.handleMouseUp,this,true);A.on(document,"touchmove",this.handleMouseMove,this,true);A.on(window,"unload",this._onUnload,this,true);A.on(window,"resize",this._onResize,this,true);
+},_onResize:function(e){this._execOnAll("resetConstraints",[]);},lock:function(){this.locked=true;},unlock:function(){this.locked=false;},isLocked:function(){return this.locked;},locationCache:{},useCache:true,clickPixelThresh:3,clickTimeThresh:350,dragThreshMet:false,clickTimeout:null,startX:0,startY:0,regDragDrop:function(B,C){if(!this.initialized){this.init();
+}if(!this.ids[C]){this.ids[C]={};}this.ids[C][B.id]=B;},removeDDFromGroup:function(B,C){if(!this.ids[C]){this.ids[C]={};}var D=this.ids[C];if(D&&D[B.id]){delete D[B.id];}},_remove:function(B){for(var g in B.groups){if(g&&this.ids[g][B.id]){delete this.ids[g][B.id];
+}}delete this.handleIds[B.id];},regHandle:function(B,C){if(!this.handleIds[B]){this.handleIds[B]={};}this.handleIds[B][C]=C;},isDragDrop:function(id){return (this.getDDById(id))?true:false;},getRelated:function(B,C){var D=[];for(var i in B.groups){for(j in this.ids[i]){var dd=this.ids[i][j];
+if(!this.isTypeOfDD(dd)){continue;}if(!C||dd.isTarget){D[D.length]=dd;}}}return D;},isLegalTarget:function(B,C){var D=this.getRelated(B,true);for(var i=0,E=D.length;i<E;++i){if(D[i].id==C.id){return true;}}return false;},isTypeOfDD:function(B){return (B&&B.__ygDragDrop);
+},isHandle:function(B,C){return (this.handleIds[B]&&this.handleIds[B][C]);},getDDById:function(id){for(var i in this.ids){if(this.ids[i][id]){return this.ids[i][id];}}return null;},handleMouseDown:function(e,B){if(Roo.QuickTips){Roo.QuickTips.disable();}this.currentTarget=e.getTarget();
+this.dragCurrent=B;var el=B.getEl();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 C=Roo.dd.DDM;C.startDrag(C.startX,C.startY);
+},this.clickTimeThresh);},startDrag:function(x,y){clearTimeout(this.clickTimeout);if(this.dragCurrent){this.dragCurrent.b4StartDrag(x,y);this.dragCurrent.startDrag(x,y);}this.dragThreshMet=true;},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);},stopEvent:function(e){if(this.stopPropagation){e.stopPropagation();}if(this.preventDefault){e.preventDefault();
+}},stopDrag:function(e){if(this.dragCurrent){if(this.dragThreshMet){this.dragCurrent.b4EndDrag(e);this.dragCurrent.endDrag(e);}this.dragCurrent.onMouseUp(e);}this.dragCurrent=null;this.dragOvers={};},handleMouseMove:function(e){if(!this.dragCurrent){return true;
+}if(Roo.isIE&&(e.button!==0&&e.button!==1&&e.button!==2)){this.stopEvent(e);return this.handleMouseUp(e);}if(!this.dragThreshMet){var B=Math.abs(this.startX-e.getPageX());var C=Math.abs(this.startY-e.getPageY());if(B>this.clickPixelThresh||C>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;},fireEvents:function(e,B){var dc=this.dragCurrent;if(!dc||dc.isLocked()){return;}var pt=e.getPoint();
+var C=[];var D=[];var E=[];var F=[];var G=[];for(var i in this.dragOvers){var H=this.dragOvers[i];if(!this.isTypeOfDD(H)){continue;}if(!this.isOverTarget(pt,H,this.mode)){D.push(H);}C[i]=true;delete this.dragOvers[i];}for(var I in dc.groups){if("string"!=typeof I){continue;
+}for(i in this.ids[I]){var J=this.ids[I][i];if(!this.isTypeOfDD(J)){continue;}if(J.isTarget&&!J.isLocked()&&J!=dc){if(this.isOverTarget(pt,J,this.mode)){if(B){F.push(J);}else{if(!C[J.id]){G.push(J);}else{E.push(J);}this.dragOvers[J.id]=J;}}}}}if(this.mode){if(D.length){dc.b4DragOut(e,D);
+dc.onDragOut(e,D);}if(G.length){dc.onDragEnter(e,G);}if(E.length){dc.b4DragOver(e,E);dc.onDragOver(e,E);}if(F.length){dc.b4DragDrop(e,F);dc.onDragDrop(e,F);}}else{var K=0;for(i=0,K=D.length;i<K;++i){dc.b4DragOut(e,D[i].id);dc.onDragOut(e,D[i].id);}for(i=0,K=G.length;
+i<K;++i){dc.onDragEnter(e,G[i].id);}for(i=0,K=E.length;i<K;++i){dc.b4DragOver(e,E[i].id);dc.onDragOver(e,E[i].id);}for(i=0,K=F.length;i<K;++i){dc.b4DragDrop(e,F[i].id);dc.onDragDrop(e,F[i].id);}}if(B&&!F.length){dc.onInvalidDrop(e);}},getBestMatch:function(B){var C=null;
+var D=B.length;if(D==1){C=B[0];}else{for(var i=0;i<D;++i){var dd=B[i];if(dd.cursorIsOver){C=dd;break;}else{if(!C||C.overlap.getArea()<dd.overlap.getArea()){C=dd;}}}}return C;},refreshCache:function(B){for(var C in B){if("string"!=typeof C){continue;}for(var i in this.ids[C]){var D=this.ids[C][i];
+if(this.isTypeOfDD(D)){var E=this.getLocation(D);if(E){this.locationCache[D.id]=E;}else{delete this.locationCache[D.id];}}}}},verifyEl:function(el){if(el){var B;if(Roo.isIE){try{B=el.offsetParent;}catch(e){}}else{B=el.offsetParent;}if(B){return true;}}return false;
+},getLocation:function(B){if(!this.isTypeOfDD(B)){return null;}var el=B.getEl(),C,x1,x2,y1,y2,t,r,b,l;try{C=Roo.lib.Dom.getXY(el);}catch(e){}if(!C){return null;}x1=C[0];x2=x1+el.offsetWidth;y1=C[1];y2=y1+el.offsetHeight;t=y1-B.padding[0];r=x2+B.padding[1];
+b=y2+B.padding[2];l=x1-B.padding[3];return new Roo.lib.Region(t,r,b,l);},isOverTarget:function(pt,B,C){var D=this.locationCache[B.id];if(!D||!this.useCache){D=this.getLocation(B);this.locationCache[B.id]=D;}if(!D){return false;}B.cursorIsOver=D.contains(pt);
+var dc=this.dragCurrent;if(!dc||!dc.getTargetCoord||(!C&&!dc.constrainX&&!dc.constrainY)){return B.cursorIsOver;}B.overlap=null;var E=dc.getTargetCoord(pt.x,pt.y);var el=dc.getDragEl();var F=new Roo.lib.Region(E.y,E.x+el.offsetWidth,E.y+el.offsetHeight,E.x);
+var G=F.intersect(D);if(G){B.overlap=G;return (C)?true:B.cursorIsOver;}else{return false;}},_onUnload:function(e,me){Roo.dd.DragDropMgr.unregAll();},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={};},elementCache:{},getElWrapper:function(id){var B=this.elementCache[id];if(!B||!B.el){B=this.elementCache[id]=new this.ElementWrapper(Roo.getDom(id));}return B;},getElement:function(id){return Roo.getDom(id);
+},getCss:function(id){var el=Roo.getDom(id);return (el)?el.style:null;},ElementWrapper:function(el){this.el=el||null;this.id=this.el&&el.id;this.css=this.el&&el.style;},getPosX:function(el){return Roo.lib.Dom.getX(el);},getPosY:function(el){return Roo.lib.Dom.getY(el);
+},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);}}},getScroll:function(){var t,l,B=document.documentElement,db=document.body;
+if(B&&(B.scrollTop||B.scrollLeft)){t=B.scrollTop;l=B.scrollLeft;}else if(db){t=db.scrollTop;l=db.scrollLeft;}else{}return {top:t,left:l};},getStyle:function(el,B){return Roo.fly(el).getStyle(B);},getScrollTop:function(){return this.getScroll().top;},getScrollLeft:function(){return this.getScroll().left;
+},moveToEl:function(B,C){var D=Roo.lib.Dom.getXY(C);Roo.lib.Dom.setXY(B,D);},numericSort:function(a,b){return (a-b);},_timeoutCount:0,_addListeners:function(){var B=Roo.dd.DDM;if(Roo.lib.Event&&document){B._onLoad();}else{if(B._timeoutCount>2000){}else{setTimeout(B._addListeners,10);
+if(document&&document.body){B._timeoutCount+=1;}}}},handleWasClicked:function(B,id){if(this.isHandle(id,B.id)){return true;}else{var p=B.parentNode;while(p){if(this.isHandle(id,p.id)){return true;}else{p=p.parentNode;}}}return false;}};}();Roo.dd.DDM=Roo.dd.DragDropMgr;
+Roo.dd.DDM._addListeners();}
+// Roo/dd/DD.js
+Roo.dd.DD=function(id,A,B){if(id){this.init(id,A,B);}};Roo.extend(Roo.dd.DD,Roo.dd.DragDrop,{scroll:true,autoOffset:function(A,B){var x=A-this.startPageX;var y=B-this.startPageY;this.setDelta(x,y);},setDelta:function(A,B){this.deltaX=A;this.deltaY=B;},setDragElPos:function(A,B){var el=this.getDragEl();
+this.alignElWithMouse(el,A,B);},alignElWithMouse:function(el,A,B){var C=this.getTargetCoord(A,B);var D=el.dom?el:Roo.fly(el);if(!this.deltaSetXY){var E=[C.x,C.y];D.setXY(E);var F=D.getLeft(true);var G=D.getTop(true);this.deltaSetXY=[F-C.x,G-C.y];}else{D.setLeftTop(C.x+this.deltaSetXY[0],C.y+this.deltaSetXY[1]);
+}this.cachePosition(C.x,C.y);this.autoScroll(C.x,C.y,el.offsetHeight,el.offsetWidth);return C;},cachePosition:function(A,B){if(A){this.lastPageX=A;this.lastPageY=B;}else{var C=Roo.lib.Dom.getXY(this.getEl());this.lastPageX=C[0];this.lastPageY=C[1];}},autoScroll:function(x,y,h,w){if(this.scroll){var A=Roo.lib.Dom.getViewWidth();
+var B=Roo.lib.Dom.getViewHeight();var st=this.DDM.getScrollTop();var sl=this.DDM.getScrollLeft();var C=h+y;var D=w+x;var E=(A+st-y-this.deltaY);var F=(B+sl-x-this.deltaX);var G=40;var H=(document.all)?80:30;if(C>A&&E<G){window.scrollTo(sl,st+H);}if(y<st&&st>0&&y-st<G){window.scrollTo(sl,st-H);
+}if(D>B&&F<G){window.scrollTo(sl+H,st);}if(x<sl&&sl>0&&x-sl<G){window.scrollTo(sl-H,st);}}},getTargetCoord:function(A,B){var x=A-this.deltaX;var y=B-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};},applyConfig:function(){Roo.dd.DD.superclass.applyConfig.call(this);this.scroll=(this.config.scroll!==false);},b4MouseDown:function(e){this.autoOffset(e.getPageX(),e.getPageY());
+},b4Drag:function(e){this.setDragElPos(e.getPageX(),e.getPageY());},toString:function(){return ("DD "+this.id);}});
+// Roo/dd/DDProxy.js
+Roo.dd.DDProxy=function(id,A,B){if(id){this.init(id,A,B);this.initFrame();}};Roo.dd.DDProxy.dragElId="ygddfdiv";Roo.extend(Roo.dd.DDProxy,Roo.dd.DD,{resizeFrame:true,centerFrame:false,createFrame:function(){var A=this;var B=document.body;if(!B||!B.firstChild){setTimeout(function(){A.createFrame();
+},50);return;}var C=this.getDragEl();if(!C){C=document.createElement("div");C.id=this.dragElId;var s=C.style;s.position="absolute";s.visibility="hidden";s.cursor="move";s.border="2px solid #aaa";s.zIndex=999;B.insertBefore(C,B.firstChild);}},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);},showFrame:function(A,B){var el=this.getEl();
+var C=this.getDragEl();var s=C.style;this._resizeProxy();if(this.centerFrame){this.setDelta(Math.round(parseInt(s.width,10)/2),Math.round(parseInt(s.height,10)/2));}this.setDragElPos(A,B);Roo.fly(C).show();},_resizeProxy:function(){if(this.resizeFrame){var el=this.getEl();
+Roo.fly(this.getDragEl()).setSize(el.offsetWidth,el.offsetHeight);}},b4MouseDown:function(e){var x=e.getPageX();var y=e.getPageY();this.autoOffset(x,y);this.setDragElPos(x,y);},b4StartDrag:function(x,y){this.showFrame(x,y);},b4EndDrag:function(e){Roo.fly(this.getDragEl()).hide();
+},endDrag:function(e){var A=this.getEl();var B=this.getDragEl();B.style.visibility="";this.beforeMove();A.style.visibility="hidden";Roo.dd.DDM.moveToEl(A,B);B.style.visibility="hidden";A.style.visibility="";this.afterDrag();},beforeMove:function(){},afterDrag:function(){}
+,toString:function(){return ("DDProxy "+this.id);}});
+// Roo/dd/DDTarget.js
+Roo.dd.DDTarget=function(id,A,B){if(id){this.initTarget(id,A,B);}if(B.listeners||B.events){Roo.dd.DragDrop.superclass.constructor.call(this,{listeners:B.listeners||{},events:B.events||{}});}};Roo.extend(Roo.dd.DDTarget,Roo.dd.DragDrop,{toString:function(){return ("DDTarget "+this.id);
+}});
+// Roo/dd/ScrollManager.js
+Roo.dd.ScrollManager=function(){var A=Roo.dd.DragDropMgr;var B={};var C=null;var D={};var E=function(e){C=null;H();};var F=function(){if(A.dragCurrent){A.refreshCache(A.dragCurrent.groups);}};var G=function(){if(A.dragCurrent){var K=Roo.dd.ScrollManager;if(!K.animate){if(D.el.scroll(D.dir,K.increment)){F();
+}}else{D.el.scroll(D.dir,K.increment,true,K.animDuration,F);}}};var H=function(){if(D.id){clearInterval(D.id);}D.id=0;D.el=null;D.dir="";};var I=function(el,K){Roo.log('scroll startproc');H();D.el=el;D.dir=K;D.id=setInterval(G,Roo.dd.ScrollManager.frequency);
+};var J=function(e,K){if(K||!A.dragCurrent){return;}var L=Roo.dd.ScrollManager;if(!C||C!=A.dragCurrent){C=A.dragCurrent;L.refreshCache();}var xy=Roo.lib.Event.getXY(e);var pt=new Roo.lib.Point(xy[0],xy[1]);for(var id in B){var el=B[id],r=el._region;if(r&&r.contains(pt)&&el.isScrollable()){if(r.bottom-pt.y<=L.thresh){if(D.el!=el){I(el,"down");
+}return;}else if(r.right-pt.x<=L.thresh){if(D.el!=el){I(el,"left");}return;}else if(pt.y-r.top<=L.thresh){if(D.el!=el){I(el,"up");}return;}else if(pt.x-r.left<=L.thresh){if(D.el!=el){I(el,"right");}return;}}}H();};A.fireEvents=A.fireEvents.createSequence(J,A);
+A.stopDrag=A.stopDrag.createSequence(E,A);return {register:function(el){if(el instanceof Array){for(var i=0,K=el.length;i<K;i++){this.register(el[i]);}}else{el=Roo.get(el);B[el.id]=el;}Roo.dd.ScrollManager.els=B;},unregister:function(el){if(el instanceof Array){for(var i=0,K=el.length;
+i<K;i++){this.unregister(el[i]);}}else{el=Roo.get(el);delete B[el.id];}},thresh:25,increment:100,frequency:500,animate:true,animDuration:.4,refreshCache:function(){for(var id in B){if(typeof B[id]=='object'){B[id]._region=B[id].getRegion();}}}};}();
+// Roo/dd/Registry.js
+Roo.dd.Registry=function(){var A={};var B={};var C=0;var D=function(el,E){if(typeof el=="string"){return el;}var id=el.id;if(!id&&E!==false){id="roodd-"+(++C);el.id=id;}return id;};return {register:function(el,E){E=E||{};if(typeof el=="string"){el=document.getElementById(el);
+}E.ddel=el;A[D(el)]=E;if(E.isHandle!==false){B[E.ddel.id]=E;}if(E.handles){var hs=E.handles;for(var i=0,F=hs.length;i<F;i++){B[D(hs[i])]=E;}}},unregister:function(el){var id=D(el,false);var E=A[id];if(E){delete A[id];if(E.handles){var hs=E.handles;for(var i=0,F=hs.length;
+i<F;i++){delete B[D(hs[i],false)];}}}},getHandle:function(id){if(typeof id!="string"){id=id.id;}return B[id];},getHandleFromEvent:function(e){var t=Roo.lib.Event.getTarget(e);return t?B[t.id]:null;},getTarget:function(id){if(typeof id!="string"){id=id.id;
+}return A[id];},getTargetFromEvent:function(e){var t=Roo.lib.Event.getTarget(e);return t?A[t.id]||B[t.id]:null;}};}();
+// Roo/dd/StatusProxy.js
+Roo.dd.StatusProxy=function(A){Roo.apply(this,A);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:!A||A.shadow!==false}
+);this.ghost=Roo.get(this.el.dom.childNodes[1]);this.dropStatus=this.dropNotAllowed;};Roo.dd.StatusProxy.prototype={dropAllowed:"x-dd-drop-ok",dropNotAllowed:"x-dd-drop-nodrop",setStatus:function(A){A=A||this.dropNotAllowed;if(this.dropStatus!=A){this.el.replaceClass(this.dropStatus,A);
+this.dropStatus=A;}},reset:function(A){this.el.dom.className="x-dd-drag-proxy "+this.dropNotAllowed;this.dropStatus=this.dropNotAllowed;if(A){this.ghost.update("");}},update:function(A){if(typeof A=="string"){this.ghost.update(A);}else{this.ghost.update("");
+A.style.margin="0";this.ghost.dom.appendChild(A);}var el=this.ghost.dom.firstChild;if(el){Roo.fly(el).setStyle('float','none');}},getEl:function(){return this.el;},getGhost:function(){return this.ghost;},hide:function(A){this.el.hide();if(A){this.reset(true);
+}},stop:function(){if(this.anim&&this.anim.isAnimated&&this.anim.isAnimated()){this.anim.stop();}},show:function(){this.el.show();},sync:function(){this.el.sync();},repair:function(xy,A,B){this.callback=A;this.scope=B;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();}},afterRepair:function(){this.hide(true);if(typeof this.callback=="function"){this.callback.call(this.scope||this);
+}this.callback=null;this.scope=null;}};
+// Roo/dd/DragSource.js
+Roo.dd.DragSource=function(el,A){this.el=Roo.get(el);this.dragData={};Roo.apply(this,A);if(!this.proxy){this.proxy=new Roo.dd.StatusProxy();}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.extend(Roo.dd.DragSource,Roo.dd.DDProxy,{dropAllowed:"x-dd-drop-ok",dropNotAllowed:"x-dd-drop-nodrop",getDragData:function(e){return this.dragData;},onDragEnter:function(e,id){var A=Roo.dd.DragDropMgr.getDDById(id);this.cachedTarget=A;
+if(this.beforeDragEnter(A,e,id)!==false){if(A.isNotifyTarget){var B=A.notifyEnter(this,e,this.dragData);this.proxy.setStatus(B);}else{this.proxy.setStatus(this.dropAllowed);}if(this.afterDragEnter){this.afterDragEnter(A,e,id);}}},beforeDragEnter:function(A,e,id){return true;
+},alignElWithMouse:function(){Roo.dd.DragSource.superclass.alignElWithMouse.apply(this,arguments);this.proxy.sync();},onDragOver:function(e,id){var A=this.cachedTarget||Roo.dd.DragDropMgr.getDDById(id);if(this.beforeDragOver(A,e,id)!==false){if(A.isNotifyTarget){var B=A.notifyOver(this,e,this.dragData);
+this.proxy.setStatus(B);}if(this.afterDragOver){this.afterDragOver(A,e,id);}}},beforeDragOver:function(A,e,id){return true;},onDragOut:function(e,id){var A=this.cachedTarget||Roo.dd.DragDropMgr.getDDById(id);if(this.beforeDragOut(A,e,id)!==false){if(A.isNotifyTarget){A.notifyOut(this,e,this.dragData);
+}this.proxy.reset();if(this.afterDragOut){this.afterDragOut(A,e,id);}}this.cachedTarget=null;},beforeDragOut:function(A,e,id){return true;},onDragDrop:function(e,id){var A=this.cachedTarget||Roo.dd.DragDropMgr.getDDById(id);if(this.beforeDragDrop(A,e,id)!==false){if(A.isNotifyTarget){if(A.notifyDrop(this,e,this.dragData)){this.onValidDrop(A,e,id);
+}else{this.onInvalidDrop(A,e,id);}}else{this.onValidDrop(A,e,id);}if(this.afterDragDrop){this.afterDragDrop(A,e,id);}}delete this.cachedTarget;},beforeDragDrop:function(A,e,id){return true;},onValidDrop:function(A,e,id){this.hideProxy();if(this.afterValidDrop){this.afterValidDrop(A,e,id);
+}},getRepairXY:function(e,A){return this.el.getXY();},onInvalidDrop:function(A,e,id){this.beforeInvalidDrop(A,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){this.afterInvalidDrop(e,id);}},afterRepair:function(){if(Roo.enableFx){this.el.highlight(this.hlColor||"c3daf9");}this.dragging=false;},beforeInvalidDrop:function(A,e,id){return true;},handleMouseDown:function(e){if(this.dragging){return;
+}var A=this.getDragData(e);if(A&&this.onBeforeDrag(A,e)!==false){this.dragData=A;this.proxy.stop();Roo.dd.DragSource.superclass.handleMouseDown.apply(this,arguments);}},onBeforeDrag:function(A,e){return true;},onStartDrag:Roo.emptyFn,startDrag:function(x,y){this.proxy.reset();
+this.dragging=true;this.proxy.update("");this.onInitDrag(x,y);this.proxy.show();},onInitDrag:function(x,y){var A=this.el.dom.cloneNode(true);A.id=Roo.id();this.proxy.update(A);this.onStartDrag(x,y);return true;},getProxy:function(){return this.proxy;},hideProxy:function(){this.proxy.hide();
+this.proxy.reset(true);this.dragging=false;},triggerCacheRefresh:function(){Roo.dd.DDM.refreshCache(this.groups);},b4EndDrag:function(e){},endDrag:function(e){this.onEndDrag(this.dragData,e);},onEndDrag:function(A,e){},autoOffset:function(x,y){this.setDelta(-12,-20);
+}});
+// Roo/dd/DropTarget.js
+Roo.dd.DropTarget=function(el,A){this.el=Roo.get(el);var B=false;;if(A&&A.listeners){B=A.listeners;delete A.listeners;}Roo.apply(this,A);if(this.containerScroll){Roo.dd.ScrollManager.register(this.el);}this.addEvents({"enter":true,"over":true,"out":true,"drop":true}
+);Roo.dd.DropTarget.superclass.constructor.call(this,this.el.dom,this.ddGroup||this.group,{isTarget:true,listeners:B||{}});};Roo.extend(Roo.dd.DropTarget,Roo.dd.DDTarget,{dropAllowed:"x-dd-drop-ok",dropNotAllowed:"x-dd-drop-nodrop",success:false,valid:false,isTarget:true,isNotifyTarget:true,notifyEnter:function(dd,e,A){this.valid=true;
+this.fireEvent('enter',dd,e,A);if(this.overClass){this.el.addClass(this.overClass);}return typeof(this.valid)=='string'?'x-dd-drop-'+this.valid:(this.valid?this.dropAllowed:this.dropNotAllowed);},notifyOver:function(dd,e,A){this.valid=true;this.fireEvent('over',dd,e,A);
+return typeof(this.valid)=='string'?'x-dd-drop-'+this.valid:(this.valid?this.dropAllowed:this.dropNotAllowed);},notifyOut:function(dd,e,A){this.fireEvent('out',dd,e,A);if(this.overClass){this.el.removeClass(this.overClass);}},notifyDrop:function(dd,e,A){this.success=false;
+this.fireEvent('drop',dd,e,A);return this.success;}});
+// Roo/dd/DragZone.js
+Roo.dd.DragZone=function(el,A){Roo.dd.DragZone.superclass.constructor.call(this,el,A);if(this.containerScroll){Roo.dd.ScrollManager.register(this.el);}};Roo.extend(Roo.dd.DragZone,Roo.dd.DragSource,{getDragData:function(e){return Roo.dd.Registry.getHandleFromEvent(e);
+},onInitDrag:function(x,y){this.proxy.update(this.dragData.ddel.cloneNode(true));this.onStartDrag(x,y);return true;},afterRepair:function(){if(Roo.enableFx){Roo.Element.fly(this.dragData.ddel).highlight(this.hlColor||"c3daf9");}this.dragging=false;},getRepairXY:function(e){return Roo.Element.fly(this.dragData.ddel).getXY();
+}});
+// Roo/dd/DropZone.js
+Roo.dd.DropZone=function(el,A){Roo.dd.DropZone.superclass.constructor.call(this,el,A);};Roo.extend(Roo.dd.DropZone,Roo.dd.DropTarget,{getTargetFromEvent:function(e){return Roo.dd.Registry.getTargetFromEvent(e);},onNodeEnter:function(n,dd,e,A){},onNodeOver:function(n,dd,e,A){return this.dropAllowed;
+},onNodeOut:function(n,dd,e,A){},onNodeDrop:function(n,dd,e,A){return false;},onContainerOver:function(dd,e,A){return this.dropNotAllowed;},onContainerDrop:function(dd,e,A){return false;},notifyEnter:function(dd,e,A){return this.dropNotAllowed;},notifyOver:function(dd,e,A){var n=this.getTargetFromEvent(e);
+if(!n){if(this.lastOverNode){this.onNodeOut(this.lastOverNode,dd,e,A);this.lastOverNode=null;}return this.onContainerOver(dd,e,A);}if(this.lastOverNode!=n){if(this.lastOverNode){this.onNodeOut(this.lastOverNode,dd,e,A);}this.onNodeEnter(n,dd,e,A);this.lastOverNode=n;
+}return this.onNodeOver(n,dd,e,A);},notifyOut:function(dd,e,A){if(this.lastOverNode){this.onNodeOut(this.lastOverNode,dd,e,A);this.lastOverNode=null;}},notifyDrop:function(dd,e,A){if(this.lastOverNode){this.onNodeOut(this.lastOverNode,dd,e,A);this.lastOverNode=null;
+}var n=this.getTargetFromEvent(e);return n?this.onNodeDrop(n,dd,e,A):this.onContainerDrop(dd,e,A);},triggerCacheRefresh:function(){Roo.dd.DDM.refreshCache(this.groups);}});
+// Roo/data/SortTypes.js
+Roo.data.SortTypes={none:function(s){return s;},stripTagsRE:/<\/?[^>]+>/gi,asText:function(s){return String(s).replace(this.stripTagsRE,"");},asUCText:function(s){return String(s).toUpperCase().replace(this.stripTagsRE,"");},asUCString:function(s){return String(s).toUpperCase();
+},asDate:function(s){if(!s){return 0;}if(s instanceof Date){return s.getTime();}return Date.parse(String(s));},asFloat:function(s){var A=parseFloat(String(s).replace(/,/g,""));if(isNaN(A)){A=0;}return A;},asInt:function(s){var A=parseInt(String(s).replace(/,/g,""));
+if(isNaN(A)){A=0;}return A;}};
+// Roo/data/Record.js
+Roo.data.Record=function(A,id){this.id=(id||id===0)?id:++Roo.data.Record.AUTO_ID;this.data=A;};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(B){return B.name;
+});for(var i=0,A=o.length;i<A;i++){p.fields.add(new Roo.data.Field(o[i]));}f.getField=function(B){return p.fields.get(B);};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={dirty:false,editing:false,error:null,modified:null,join:function(A){this.store=A;},set:function(A,B){if(this.data[A]==B){return;}this.dirty=true;if(!this.modified){this.modified={};}if(typeof this.modified[A]=='undefined'){this.modified[A]=this.data[A];
+}this.data[A]=B;if(!this.editing&&this.store){this.store.afterEdit(this);}},get:function(A){return this.data[A];},beginEdit:function(){this.editing=true;this.modified={};},cancelEdit:function(){this.editing=false;delete this.modified;},endEdit:function(){this.editing=false;
+if(this.dirty&&this.store){this.store.afterEdit(this);}},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);
+}},commit:function(){this.dirty=false;delete this.modified;this.editing=false;if(this.store){this.store.afterCommit(this);}},hasError:function(){return this.error!=null;},clearError:function(){this.error=null;},copy:function(A){return new this.constructor(Roo.apply({}
+,this.data),A||this.id);}};
+// Roo/data/Store.js
+Roo.data.Store=function(A){this.data=new Roo.util.MixedCollection(false);this.data.getKey=function(o){return o.id;};this.baseParams={};this.paramNames={"start":"start","limit":"limit","sort":"sort","dir":"dir","multisort":"_multisort"};if(A&&A.data){this.inlineData=A.data;
+delete A.data;}Roo.apply(this,A);if(this.reader){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);
+}}if(this.recordType){this.fields=this.recordType.prototype.fields;}this.modified=[];this.addEvents({datachanged:true,metachange:true,add:true,remove:true,update:true,clear:true,beforeload:true,beforeloadadd:true,load:true,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=[];Roo.data.Store.superclass.constructor.call(this);if(this.inlineData){this.loadData(this.inlineData);delete this.inlineData;}};Roo.extend(Roo.data.Store,Roo.util.Observable,{multiSort:false,remoteSort:false,pruneModifiedRecords:false,lastOptions:null,add:function(A){A=[].concat(A);
+for(var i=0,B=A.length;i<B;i++){A[i].join(this);}var C=this.data.length;this.data.addAll(A);this.fireEvent("add",this,A,C);},remove:function(A){var B=this.data.indexOf(A);this.data.removeAt(B);if(this.pruneModifiedRecords){this.modified.remove(A);}this.fireEvent("remove",this,A,B);
+},removeAll:function(){this.data.clear();if(this.pruneModifiedRecords){this.modified=[];}this.fireEvent("clear",this);},insert:function(A,B){B=[].concat(B);for(var i=0,C=B.length;i<C;i++){this.data.insert(A,B[i]);B[i].join(this);}this.fireEvent("add",this,B,A);
+},indexOf:function(A){return this.data.indexOf(A);},indexOfId:function(id){return this.data.indexOfKey(id);},getById:function(id){return this.data.key(id);},getAt:function(A){return this.data.itemAt(A);},getRange:function(A,B){return this.data.getRange(A,B);
+},storeOptions:function(o){o=Roo.apply({},o);delete o.callback;delete o.scope;this.lastOptions=o;},load:function(A){A=A||{};if(this.fireEvent("beforeload",this,A)!==false){this.storeOptions(A);var p=Roo.apply(A.params||{},this.baseParams);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,A);
+}},reload:function(A){this.load(Roo.applyIf(A||{},this.lastOptions));},loadRecords:function(o,A,B){if(!o||B===false){if(B!==false){this.fireEvent("load",this,[],A,o);}if(A.callback){A.callback.call(A.scope||this,[],A,false);}return;}if(o.success===false){if(!this.hasListener('loadexception')&&typeof(o.raw.errorMsg)!='undefined'){Roo.MessageBox.alert("Error loading",o.raw.errorMsg);
+}this.fireEvent("loadexception",this,o,A,o.raw.errorMsg);return;}var r=o.records,t=o.totalRecords||r.length;this.fireEvent("beforeloadadd",this,r,A,o);if(!A||A.add!==true){if(this.pruneModifiedRecords){this.modified=[];}for(var i=0,C=r.length;i<C;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);}this.fireEvent("load",this,r,A,o);
+if(A.callback){A.callback.call(A.scope||this,r,A,true);}},loadData:function(o,A){var r=this.reader.readRecords(o);this.loadRecords(r,{add:A},true);},getCount:function(){return this.data.length||0;},getTotalCount:function(){return this.totalLength||0;},getSortState:function(){return this.sortInfo;
+},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);
+}}},setDefaultSort:function(A,B){this.sortInfo={field:A,direction:B?B.toUpperCase():"ASC"};},sort:function(A,B){var f=this.fields.get(A);if(!B){this.sortToggle[f.name]=this.sortToggle[f.name]||f.sortDir;if(this.multiSort||(this.sortInfo&&this.sortInfo.field==f.name)){B=(this.sortToggle[f.name]||"ASC").toggle("ASC","DESC");
+}else{B=f.sortDir;}}this.sortToggle[f.name]=B;this.sortInfo={field:f.name,direction:B};if(!this.remoteSort){this.applySort();this.fireEvent("datachanged",this);}else{this.load(this.lastOptions);}},each:function(fn,A){this.data.each(fn,A);},getModifiedRecords:function(){return this.modified;
+},createFilterFn:function(A,B,C){if(!B.exec){B=String(B);if(B.length==0){return false;}B=new RegExp((C===true?'':'^')+Roo.escapeRe(B),"i");}return function(r){return B.test(r.data[A]);};},sum:function(A,B,C){var rs=this.data.items,v=0;B=B||0;C=(C||C===0)?C:rs.length-1;
+for(var i=B;i<=C;i++){v+=(rs[i].data[A]||0);}return v;},filter:function(A,B,C){var fn=this.createFilterFn(A,B,C);return fn?this.filterBy(fn):this.clearFilter();},filterBy:function(fn,A){this.snapshot=this.snapshot||this.data;this.data=this.queryBy(fn,A||this);
+this.fireEvent("datachanged",this);},query:function(A,B,C){var fn=this.createFilterFn(A,B,C);return fn?this.queryBy(fn):this.data.clone();},queryBy:function(fn,A){var B=this.snapshot||this.data;return B.filterBy(fn,A||this);},collect:function(A,B,C){var d=(C===true&&this.snapshot)?this.snapshot.items:this.data.items;
+var v,sv,r=[],l={};for(var i=0,D=d.length;i<D;i++){v=d[i].data[A];sv=String(v);if((B||!Roo.isEmpty(v))&&!l[sv]){l[sv]=true;r[r.length]=v;}}return r;},clearFilter:function(A){if(this.snapshot&&this.snapshot!=this.data){this.data=this.snapshot;delete this.snapshot;
+if(A!==true){this.fireEvent("datachanged",this);}}},afterEdit:function(A){if(this.modified.indexOf(A)==-1){this.modified.push(A);}this.fireEvent("update",this,A,Roo.data.Record.EDIT);},afterReject:function(A){this.modified.remove(A);this.fireEvent("update",this,A,Roo.data.Record.REJECT);
+},afterCommit:function(A){this.modified.remove(A);this.fireEvent("update",this,A,Roo.data.Record.COMMIT);},commitChanges:function(){var m=this.modified.slice(0);this.modified=[];for(var i=0,A=m.length;i<A;i++){m[i].commit();}},rejectChanges:function(){var m=this.modified.slice(0);
+this.modified=[];for(var i=0,A=m.length;i<A;i++){m[i].reject();}},onMetaChange:function(A,B,o){this.recordType=B;this.fields=B.prototype.fields;delete this.snapshot;this.sortInfo=A.sortInfo||this.sortInfo;this.modified=[];this.fireEvent('metachange',this,this.reader.meta);
+},moveIndex:function(A,B){var C=this.indexOf(A);var D=C+B;this.remove(A);this.insert(D,A);}});
+// Roo/data/SimpleStore.js
+Roo.data.SimpleStore=function(A){Roo.data.SimpleStore.superclass.constructor.call(this,{isLocal:true,reader:new Roo.data.ArrayReader({id:A.id},Roo.data.Record.create(A.fields)),proxy:new Roo.data.MemoryProxy(A.data)});this.load();};Roo.extend(Roo.data.SimpleStore,Roo.data.Store);
+
+// Roo/data/JsonStore.js
+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);
+// Roo/data/Field.js
+Roo.data.Field=function(A){if(typeof A=="string"){A={name:A};}Roo.apply(this,A);if(!this.type){this.type="auto";}var st=Roo.data.SortTypes;if(typeof this.sortType=="string"){this.sortType=st[this.sortType];}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;}}var B=/[\$,%]/g;if(!this.convert){var cv,C=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(B,""),10):'';};break;case "float":cv=function(v){return v!==undefined&&v!==null&&v!==''?parseFloat(String(v).replace(B,""),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(C){if(C=="timestamp"){return new Date(v*1000);}return Date.parseDate(v,C);}var D=Date.parse(v);return D?new Date(D):null;};break;}this.convert=cv;}};Roo.data.Field.prototype={dateFormat:null,defaultValue:"",mapping:null,sortType:null,sortDir:"ASC"}
+;
+// Roo/data/DataReader.js
+Roo.data.DataReader=function(A,B){this.meta=A;this.recordType=B instanceof Array?Roo.data.Record.create(B):B;};Roo.data.DataReader.prototype={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));}};
+// Roo/data/DataProxy.js
+Roo.data.DataProxy=function(){this.addEvents({beforeload:true,load:true,loadexception:true});Roo.data.DataProxy.superclass.constructor.call(this);};Roo.extend(Roo.data.DataProxy,Roo.util.Observable);
+// Roo/data/MemoryProxy.js
+Roo.data.MemoryProxy=function(A){if(A.data){A=A.data;}Roo.data.MemoryProxy.superclass.constructor.call(this);this.data=A;};Roo.extend(Roo.data.MemoryProxy,Roo.data.DataProxy,{load:function(A,B,C,D,E){A=A||{};var F;try{F=B.readRecords(this.data);}catch(e){this.fireEvent("loadexception",this,E,null,e);
+C.call(D,null,E,false);return;}C.call(D,F,E,true);},update:function(A,B){}});
+// Roo/data/HttpProxy.js
+Roo.data.HttpProxy=function(A){Roo.data.HttpProxy.superclass.constructor.call(this);this.conn=A;this.useAjax=!A||!A.events;};Roo.extend(Roo.data.HttpProxy,Roo.data.DataProxy,{getConnection:function(){return this.useAjax?Roo.Ajax:this.conn;},load:function(A,B,C,D,E){if(this.fireEvent("beforeload",this,A)!==false){var o={params:A||{}
+,request:{callback:C,scope:D,arg:E},reader:B,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{C.call(D||this,null,E,false);
+}},loadResponse:function(o,A,B){delete this.activeRequest;if(!A){this.fireEvent("loadexception",this,o,B);o.request.callback.call(o.request.scope,null,o.request.arg,false);return;}var C;try{C=o.reader.read(B);}catch(e){this.fireEvent("loadexception",this,o,B,e);
+o.request.callback.call(o.request.scope,null,o.request.arg,false);return;}this.fireEvent("load",this,o,o.request.arg);o.request.callback.call(o.request.scope,C,o.request.arg,true);},update:function(A){},updateResponse:function(A){}});
+// Roo/data/ScriptTagProxy.js
+Roo.data.ScriptTagProxy=function(A){Roo.data.ScriptTagProxy.superclass.constructor.call(this);Roo.apply(this,A);this.head=document.getElementsByTagName("head")[0];};Roo.data.ScriptTagProxy.TRANS_ID=1000;Roo.extend(Roo.data.ScriptTagProxy,Roo.data.DataProxy,{timeout:30000,callbackParam:"callback",nocache:true,load:function(A,B,C,D,E){if(this.fireEvent("beforeload",this,A)!==false){var p=Roo.urlEncode(Roo.apply(A,this.extraParams));
+var F=this.url;F+=(F.indexOf("?")!=-1?"&":"?")+p;if(this.nocache){F+="&_dc="+(new Date().getTime());}var G=++Roo.data.ScriptTagProxy.TRANS_ID;var H={id:G,cb:"stcCallback"+G,scriptId:"stcScript"+G,params:A,arg:E,url:F,callback:C,scope:D,reader:B};var I=this;
+window[H.cb]=function(o){I.handleResponse(o,H);};F+=String.format("&{0}={1}",this.callbackParam,H.cb);if(this.autoAbort!==false){this.abort();}H.timeoutId=this.handleFailure.defer(this.timeout,this,[H]);var J=document.createElement("script");J.setAttribute("src",F);
+J.setAttribute("type","text/javascript");J.setAttribute("id",H.scriptId);this.head.appendChild(J);this.trans=H;}else{C.call(D||this,null,E,false);}},isLoading:function(){return this.trans?true:false;},abort:function(){if(this.isLoading()){this.destroyTrans(this.trans);
+}},destroyTrans:function(A,B){this.head.removeChild(document.getElementById(A.scriptId));clearTimeout(A.timeoutId);if(B){window[A.cb]=undefined;try{delete window[A.cb];}catch(e){}}else{window[A.cb]=function(){window[A.cb]=undefined;try{delete window[A.cb];
+}catch(e){}};}},handleResponse:function(o,A){this.trans=false;this.destroyTrans(A,true);var B;try{B=A.reader.readRecords(o);}catch(e){this.fireEvent("loadexception",this,o,A.arg,e);A.callback.call(A.scope||window,null,A.arg,false);return;}this.fireEvent("load",this,o,A.arg);
+A.callback.call(A.scope||window,B,A.arg,true);},handleFailure:function(A){this.trans=false;this.destroyTrans(A,false);this.fireEvent("loadexception",this,null,A.arg);A.callback.call(A.scope||window,null,A.arg,false);}});
+// Roo/data/JsonReader.js
+Roo.data.JsonReader=function(A,B){A=A||{};Roo.applyIf(A,{totalProperty:'total',successProperty:'success',root:'data',id:'id'});Roo.data.JsonReader.superclass.constructor.call(this,A,B||A.fields);};Roo.extend(Roo.data.JsonReader,Roo.data.DataReader,{metaFromRemote:false,read:function(A){var B=A.responseText;
+var o=eval("("+B+")");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);
+}return this.readRecords(o);},onMetaChange:function(A,B,o){},simpleAccess:function(A,B){return A[B];},getJsonAccessor:function(){var re=/[\[\.]/;return function(A){try{return (re.test(A))?new Function("obj","return obj."+A):function(B){return B[A];};}catch(e){}
+return Roo.emptyFn;};}(),readRecords:function(o){this.o=o;var s=this.meta,A=this.recordType,f=A?A.prototype.fields:null,fi=f?f.items:[],fl=f?f.length:0;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(I){var r=g(I);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 B=(f.mapping!==undefined&&f.mapping!==null)?f.mapping:f.name;this.ef[jj]=this.getJsonAccessor(B);}}var C=this.getRoot(o),c=C.length,D=c,E=true;if(s.totalProperty){var vt=parseInt(this.getTotal(o),10);if(!isNaN(vt)){D=vt;}}if(s.successProperty){var vs=this.getSuccess(o);
+if(vs===false||vs==='false'){E=false;}}var F=[];for(var i=0;i<c;i++){var n=C[i];var G={};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;}G[f.name]=f.convert((v!==undefined)?v:f.defaultValue);
+}var H=new A(G,id);H.json=n;F[i]=H;}return {raw:o,success:E,records:F,totalRecords:D};}});
+// Roo/data/XmlReader.js
+Roo.data.XmlReader=function(A,B){A=A||{};Roo.data.XmlReader.superclass.constructor.call(this,A,B||A.fields);};Roo.extend(Roo.data.XmlReader,Roo.data.DataReader,{read:function(A){var B=A.responseXML;if(!B){throw {message:"XmlReader.read: XML Document not available"}
+;}return this.readRecords(B);},readRecords:function(A){this.xmlData=A;var B=A.documentElement||A;var q=Roo.DomQuery;var C=this.recordType,D=C.prototype.fields;var E=this.meta.id;var F=0,G=true;if(this.meta.totalRecords){F=q.selectNumber(this.meta.totalRecords,B,0);
+}if(this.meta.success){var sv=q.selectValue(this.meta.success,B,true);G=sv!==false&&sv!=='false';}var H=[];var ns=q.select(this.meta.record,B);for(var i=0,I=ns.length;i<I;i++){var n=ns[i];var J={};var id=E?q.selectValue(E,n):undefined;for(var j=0,K=D.length;
+j<K;j++){var f=D.items[j];var v=q.selectValue(f.mapping||f.name,n,f.defaultValue);v=f.convert(v);J[f.name]=v;}var L=new C(J,id);L.node=n;H[H.length]=L;}return {success:G,records:H,totalRecords:F||H.length};}});
+// Roo/data/ArrayReader.js
+Roo.data.ArrayReader=function(A,B){Roo.data.ArrayReader.superclass.constructor.call(this,A,B);};Roo.extend(Roo.data.ArrayReader,Roo.data.JsonReader,{readRecords:function(o){var A=this.meta?this.meta.id:null;var B=this.recordType,C=B.prototype.fields;var D=[];
+var E=o;for(var i=0;i<E.length;i++){var n=E[i];var F={};var id=((A||A===0)&&n[A]!==undefined&&n[A]!==""?n[A]:null);for(var j=0,G=C.length;j<G;j++){var f=C.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);F[f.name]=v;}var H=new B(F,id);H.json=n;D[D.length]=H;}return {records:D,totalRecords:D.length};}});
+// Roo/data/Tree.js
+Roo.data.Tree=function(A){this.nodeHash={};this.root=null;if(A){this.setRootNode(A);}this.addEvents({"append":true,"remove":true,"move":true,"insert":true,"beforeappend":true,"beforeremove":true,"beforemove":true,"beforeinsert":true});Roo.data.Tree.superclass.constructor.call(this);
+};Roo.extend(Roo.data.Tree,Roo.util.Observable,{pathSeparator:"/",proxyNodeEvent:function(){return this.fireEvent.apply(this,arguments);},getRootNode:function(){return this.root;},setRootNode:function(A){this.root=A;A.ownerTree=this;A.isRoot=true;this.registerNode(A);
+return A;},getNodeById:function(id){return this.nodeHash[id];},registerNode:function(A){this.nodeHash[A.id]=A;},unregisterNode:function(A){delete this.nodeHash[A.id];},toString:function(){return "[Tree"+(this.id?" "+this.id:"")+"]";}});Roo.data.Node=function(A){this.attributes=A||{}
+;this.leaf=this.attributes.leaf;this.id=this.attributes.id;if(!this.id){this.id=Roo.id(null,"ynode-");this.attributes.id=this.id;}this.childNodes=[];if(!this.childNodes.indexOf){this.childNodes.indexOf=function(o){for(var i=0,B=this.length;i<B;i++){if(this[i]==o){return i;
+}}return -1;};}this.parentNode=null;this.firstChild=null;this.lastChild=null;this.previousSibling=null;this.nextSibling=null;this.addEvents({"append":true,"remove":true,"move":true,"insert":true,"beforeappend":true,"beforeremove":true,"beforemove":true,"beforeinsert":true}
+);this.listeners=this.attributes.listeners;Roo.data.Node.superclass.constructor.call(this);};Roo.extend(Roo.data.Node,Roo.util.Observable,{fireEvent:function(A){if(Roo.data.Node.superclass.fireEvent.apply(this,arguments)===false){return false;}var ot=this.getOwnerTree();
+if(ot){if(ot.proxyNodeEvent.apply(ot,arguments)===false){return false;}}return true;},isLeaf:function(){return this.leaf===true;},setFirstChild:function(A){this.firstChild=A;},setLastChild:function(A){this.lastChild=A;},isLast:function(){return (!this.parentNode?true:this.parentNode.lastChild==this);
+},isFirst:function(){return (!this.parentNode?true:this.parentNode.firstChild==this);},hasChildNodes:function(){return !this.isLeaf()&&this.childNodes.length>0;},appendChild:function(A){var B=false;if(A instanceof Array){B=A;}else if(arguments.length>1){B=arguments;
+}if(B){for(var i=0,C=B.length;i<C;i++){this.appendChild(B[i]);}}else{if(this.fireEvent("beforeappend",this.ownerTree,this,A)===false){return false;}var D=this.childNodes.length;var E=A.parentNode;if(E){if(A.fireEvent("beforemove",A.getOwnerTree(),A,E,this,D)===false){return false;
+}E.removeChild(A);}D=this.childNodes.length;if(D==0){this.setFirstChild(A);}this.childNodes.push(A);A.parentNode=this;var ps=this.childNodes[D-1];if(ps){A.previousSibling=ps;ps.nextSibling=A;}else{A.previousSibling=null;}A.nextSibling=null;this.setLastChild(A);
+A.setOwnerTree(this.getOwnerTree());this.fireEvent("append",this.ownerTree,this,A,D);if(E){A.fireEvent("move",this.ownerTree,A,E,this,D);}return A;}},removeChild:function(A){var B=this.childNodes.indexOf(A);if(B==-1){return false;}if(this.fireEvent("beforeremove",this.ownerTree,this,A)===false){return false;
+}this.childNodes.splice(B,1);if(A.previousSibling){A.previousSibling.nextSibling=A.nextSibling;}if(A.nextSibling){A.nextSibling.previousSibling=A.previousSibling;}if(this.firstChild==A){this.setFirstChild(A.nextSibling);}if(this.lastChild==A){this.setLastChild(A.previousSibling);
+}A.setOwnerTree(null);A.parentNode=null;A.previousSibling=null;A.nextSibling=null;this.fireEvent("remove",this.ownerTree,this,A);return A;},insertBefore:function(A,B){if(!B){return this.appendChild(A);}if(A==B){return false;}if(this.fireEvent("beforeinsert",this.ownerTree,this,A,B)===false){return false;
+}var C=this.childNodes.indexOf(B);var D=A.parentNode;var E=C;if(D==this&&this.childNodes.indexOf(A)<C){E--;}if(D){if(A.fireEvent("beforemove",A.getOwnerTree(),A,D,this,C,B)===false){return false;}D.removeChild(A);}if(E==0){this.setFirstChild(A);}this.childNodes.splice(E,0,A);
+A.parentNode=this;var ps=this.childNodes[E-1];if(ps){A.previousSibling=ps;ps.nextSibling=A;}else{A.previousSibling=null;}A.nextSibling=B;B.previousSibling=A;A.setOwnerTree(this.getOwnerTree());this.fireEvent("insert",this.ownerTree,this,A,B);if(D){A.fireEvent("move",this.ownerTree,A,D,this,E,B);
+}return A;},item:function(A){return this.childNodes[A];},replaceChild:function(A,B){this.insertBefore(A,B);this.removeChild(B);return B;},indexOf:function(A){return this.childNodes.indexOf(A);},getOwnerTree:function(){if(!this.ownerTree){var p=this;while(p){if(p.ownerTree){this.ownerTree=p.ownerTree;
+break;}p=p.parentNode;}}return this.ownerTree;},getDepth:function(){var A=0;var p=this;while(p.parentNode){++A;p=p.parentNode;}return A;},setOwnerTree:function(A){if(A!=this.ownerTree){if(this.ownerTree){this.ownerTree.unregisterNode(this);}this.ownerTree=A;
+var cs=this.childNodes;for(var i=0,B=cs.length;i<B;i++){cs[i].setOwnerTree(A);}if(A){A.registerNode(this);}}},getPath:function(A){A=A||"id";var p=this.parentNode;var b=[this.attributes[A]];while(p){b.unshift(p.attributes[A]);p=p.parentNode;}var B=this.getOwnerTree().pathSeparator;
+return B+b.join(B);},bubble:function(fn,A,B){var p=this;while(p){if(fn.call(A||p,B||p)===false){break;}p=p.parentNode;}},cascade:function(fn,A,B){if(fn.call(A||this,B||this)!==false){var cs=this.childNodes;for(var i=0,C=cs.length;i<C;i++){cs[i].cascade(fn,A,B);
+}}},eachChild:function(fn,A,B){var cs=this.childNodes;for(var i=0,C=cs.length;i<C;i++){if(fn.call(A||this,B||cs[i])===false){break;}}},findChild:function(A,B){var cs=this.childNodes;for(var i=0,C=cs.length;i<C;i++){if(cs[i].attributes[A]==B){return cs[i];
+}}return null;},findChildBy:function(fn,A){var cs=this.childNodes;for(var i=0,B=cs.length;i<B;i++){if(fn.call(A||cs[i],cs[i])===true){return cs[i];}}return null;},sort:function(fn,A){var cs=this.childNodes;var B=cs.length;if(B>0){var C=A?function(){fn.apply(A,arguments);
+}:fn;cs.sort(C);for(var i=0;i<B;i++){var n=cs[i];n.previousSibling=cs[i-1];n.nextSibling=cs[i+1];if(i==0){this.setFirstChild(n);}if(i==B-1){this.setLastChild(n);}}}},contains:function(A){return A.isAncestor(this);},isAncestor:function(A){var p=this.parentNode;
+while(p){if(p==A){return true;}p=p.parentNode;}return false;},toString:function(){return "[Node"+(this.id?" "+this.id:"")+"]";}});
+// Roo/Layer.js
+(function(){Roo.Layer=function(C,D){C=C||{};var dh=Roo.DomHelper;var cp=C.parentEl,E=cp?Roo.getDom(cp):document.body;if(D){this.dom=Roo.getDom(D);}if(!this.dom){var o=C.dh||{tag:"div",cls:"x-layer"};this.dom=dh.append(E,o);}if(C.cls){this.addClass(C.cls);}
+this.constrain=C.constrain!==false;this.visibilityMode=Roo.Element.VISIBILITY;if(C.id){this.id=this.dom.id=C.id;}else{this.id=Roo.id(this.dom);}this.zindex=C.zindex||this.getZIndex();this.position("absolute",this.zindex);if(C.shadow){this.shadowOffset=C.shadowOffset||4;
+this.shadow=new Roo.Shadow({offset:this.shadowOffset,mode:C.shadow});}else{this.shadowOffset=0;}this.useShim=C.shim!==false&&Roo.useShims;this.useDisplay=C.useDisplay;this.hide();};var A=Roo.Element.prototype;var B=[];Roo.extend(Roo.Layer,Roo.Element,{getZIndex:function(){return this.zindex||parseInt(this.getStyle("z-index"),10)||11000;
+},getShim:function(){if(!this.useShim){return null;}if(this.shim){return this.shim;}var C=B.shift();if(!C){C=this.createShim();C.enableDisplayMode('block');C.dom.style.display='none';C.dom.style.visibility='visible';}var pn=this.dom.parentNode;if(C.dom.parentNode!=pn){pn.insertBefore(C.dom,this.dom);
+}C.setStyle('z-index',this.getZIndex()-2);this.shim=C;return C;},hideShim:function(){if(this.shim){this.shim.setDisplayed(false);B.push(this.shim);delete this.shim;}},disableShadow:function(){if(this.shadow){this.shadowDisabled=true;this.shadow.hide();this.lastShadowOffset=this.shadowOffset;
+this.shadowOffset=0;}},enableShadow:function(C){if(this.shadow){this.shadowDisabled=false;this.shadowOffset=this.lastShadowOffset;delete this.lastShadowOffset;if(C){this.sync(true);}}},sync:function(C){var sw=this.shadow;if(!this.updating&&this.isVisible()&&(sw||this.useShim)){var sh=this.getShim();
+var w=this.getWidth(),h=this.getHeight();var l=this.getLeft(true),t=this.getTop(true);if(sw&&!this.shadowDisabled){if(C&&!sw.isVisible()){sw.show(this);}else{sw.realign(l,t,w,h);}if(sh){if(C){sh.show();}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(C){sh.show();}sh.setSize(w,h);sh.setLeftTop(l,t);}}},destroy:function(){this.hideShim();if(this.shadow){this.shadow.hide();}this.removeAllListeners();var pn=this.dom.parentNode;
+if(pn){pn.removeChild(this.dom);}Roo.Element.uncache(this.id);},remove:function(){this.destroy();},beginUpdate:function(){this.updating=true;},endUpdate:function(){this.updating=false;this.sync(true);},hideUnders:function(C){if(this.shadow){this.shadow.hide();
+}this.hideShim();},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;
+var C=false;if((x+w)>vw+s.left){x=vw-w-this.shadowOffset;C=true;}if((y+h)>vh+s.top){y=vh-h-this.shadowOffset;C=true;}if(x<s.left){x=s.left;C=true;}if(y<s.top){y=s.top;C=true;}if(C){if(this.avoidY){var ay=this.avoidY;if(y<=ay&&(y+h)>=ay){y=ay-h-5;}}xy=[x,y];
+this.storeXY(xy);A.setXY.call(this,xy);this.sync();}}},isVisible:function(){return this.visible;},showAction:function(){this.visible=true;if(this.useDisplay===true){this.setDisplayed("");}else if(this.lastXY){A.setXY.call(this,this.lastXY);}else if(this.lastLT){A.setLeftTop.call(this,this.lastLT[0],this.lastLT[1]);
+}},hideAction:function(){this.visible=false;if(this.useDisplay===true){this.setDisplayed(false);}else{this.setLeftTop(-10000,-10000);}},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);
+A.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);}A.setVisible.call(this,v,a,d,cb,e);if(v){this.sync(true);}else if(!a){this.hideAction();}}},storeXY:function(xy){delete this.lastLT;
+this.lastXY=xy;},storeLeftTop:function(C,D){delete this.lastXY;this.lastLT=[C,D];},beforeFx:function(){this.beforeAction();return Roo.Layer.superclass.beforeFx.apply(this,arguments);},afterFx:function(){Roo.Layer.superclass.afterFx.apply(this,arguments);this.sync(this.isVisible());
+},beforeAction:function(){if(!this.updating&&this.shadow){this.shadow.hide();}},setLeft:function(C){this.storeLeftTop(C,this.getTop(true));A.setLeft.apply(this,arguments);this.sync();},setTop:function(C){this.storeLeftTop(this.getLeft(true),C);A.setTop.apply(this,arguments);
+this.sync();},setLeftTop:function(C,D){this.storeLeftTop(C,D);A.setLeftTop.apply(this,arguments);this.sync();},setXY:function(xy,a,d,c,e){this.fixDisplay();this.beforeAction();this.storeXY(xy);var cb=this.createCB(c);A.setXY.call(this,xy,a,d,cb,e);if(!a){cb();
+}},createCB:function(c){var el=this;return function(){el.constrainXY();el.sync(true);if(c){c();}};},setX:function(x,a,d,c,e){this.setXY([x,this.getY()],a,d,c,e);},setY:function(y,a,d,c,e){this.setXY([this.getX(),y],a,d,c,e);},setSize:function(w,h,a,d,c,e){this.beforeAction();
+var cb=this.createCB(c);A.setSize.call(this,w,h,a,d,cb,e);if(!a){cb();}},setWidth:function(w,a,d,c,e){this.beforeAction();var cb=this.createCB(c);A.setWidth.call(this,w,a,d,cb,e);if(!a){cb();}},setHeight:function(h,a,d,c,e){this.beforeAction();var cb=this.createCB(c);
+A.setHeight.call(this,h,a,d,cb,e);if(!a){cb();}},setBounds:function(x,y,w,h,a,d,c,e){this.beforeAction();var cb=this.createCB(c);if(!a){this.storeXY([x,y]);A.setXY.call(this,[x,y]);A.setSize.call(this,w,h,a,d,cb,e);cb();}else{A.setBounds.call(this,x,y,w,h,a,d,cb,e);
+}return this;},setZIndex:function(C){this.zindex=C;this.setStyle("z-index",C+2);if(this.shadow){this.shadow.setZIndex(C+1);}if(this.shim){this.shim.setStyle("z-index",C);}}});})();
+// Roo/Shadow.js
+Roo.Shadow=function(A){Roo.apply(this,A);if(typeof this.mode!="string"){this.mode=this.defaultMode;}var o=this.offset,a={h:0};var B=Math.floor(this.offset/2);switch(this.mode.toLowerCase()){case "drop":a.w=0;a.l=a.t=o;a.t-=1;if(Roo.isIE){a.l-=this.offset+B;
+a.t-=this.offset+B;a.w-=B;a.h-=B;a.t+=1;}break;case "sides":a.w=(o*2);a.l=-o;a.t=o-1;if(Roo.isIE){a.l-=(this.offset-B);a.t-=this.offset+B;a.l+=1;a.w-=(this.offset-B)*2;a.w-=B+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-B);
+a.t-=(this.offset-B);a.l+=1;a.w-=(this.offset+B+1);a.h-=(this.offset+B);a.h+=1;}break;};this.adjusts=a;};Roo.Shadow.prototype={offset:4,defaultMode:"drop",show:function(A){A=Roo.get(A);if(!this.el){this.el=Roo.Shadow.Pool.pull();if(this.el.dom.nextSibling!=A.dom){this.el.insertBefore(A);
+}}this.el.setStyle("z-index",this.zIndex||parseInt(A.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.realign(A.getLeft(true),A.getTop(true),A.getWidth(),A.getHeight());
+this.el.dom.style.display="block";},isVisible:function(){return this.el?true:false;},realign:function(l,t,w,h){if(!this.el){return;}var a=this.adjusts,d=this.el.dom,s=d.style;var A=0;s.left=(l+a.l)+"px";s.top=(t+a.t)+"px";var sw=(w+a.w),sh=(h+a.h),B=sw+"px",C=sh+"px";
+if(s.width!=B||s.height!=C){s.width=B;s.height=C;if(!Roo.isIE){var cn=d.childNodes;var D=Math.max(0,(sw-12))+"px";cn[0].childNodes[1].style.width=D;cn[1].childNodes[1].style.width=D;cn[2].childNodes[1].style.width=D;cn[1].style.height=Math.max(0,(sh-12))+"px";
+}}},hide:function(){if(this.el){this.el.dom.style.display="none";Roo.Shadow.Pool.push(this.el);delete this.el;}},setZIndex:function(z){this.zIndex=z;if(this.el){this.el.setStyle("z-index",z);}}};Roo.Shadow.Pool=function(){var p=[];var A=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,A));sh.autoBoxAdjust=false;}return sh;},push:function(sh){p.push(sh);}};}();
+// Roo/SplitBar.js
+Roo.SplitBar=function(A,B,C,D,E){this.el=Roo.get(A,true);this.el.dom.unselectable="on";this.resizingEl=Roo.get(B,true);this.orientation=C||Roo.SplitBar.HORIZONTAL;this.minSize=0;this.maxSize=2000;this.animate=false;this.useShim=false;this.shim=null;if(!E){this.proxy=Roo.SplitBar.createProxy(this.orientation);
+}else{this.proxy=Roo.get(E).dom;}this.dd=new Roo.dd.DDProxy(this.el.dom.id,"XSplitBars",{dragElId:this.proxy.id});this.dd.b4StartDrag=this.onStartProxyDrag.createDelegate(this);this.dd.endDrag=this.onEndProxyDrag.createDelegate(this);this.dragSpecs={};this.adapter=new Roo.SplitBar.BasicLayoutAdapter();
+this.adapter.init(this);if(this.orientation==Roo.SplitBar.HORIZONTAL){this.placement=D||(this.el.getX()>this.resizingEl.getX()?Roo.SplitBar.LEFT:Roo.SplitBar.RIGHT);this.el.addClass("x-splitbar-h");}else{this.placement=D||(this.el.getY()>this.resizingEl.getY()?Roo.SplitBar.TOP:Roo.SplitBar.BOTTOM);
+this.el.addClass("x-splitbar-v");}this.addEvents({"resize":true,"moved":true,"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");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 A=this.adapter.getElementSize(this);this.activeMinSize=this.getMinimumSize();;this.activeMaxSize=this.getMaximumSize();;var c1=A-this.activeMinSize;var c2=Math.max(this.activeMaxSize-A,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=A;this.dragSpecs.startPoint=[x,y];Roo.dd.DDProxy.prototype.b4StartDrag.call(this.dd,x,y);},onEndProxyDrag:function(e){Roo.get(this.proxy).setDisplayed(false);var A=Roo.lib.Event.getXY(e);if(this.overlay){this.overlay.hide();}var B;
+if(this.orientation==Roo.SplitBar.HORIZONTAL){B=this.dragSpecs.startSize+(this.placement==Roo.SplitBar.LEFT?A[0]-this.dragSpecs.startPoint[0]:this.dragSpecs.startPoint[0]-A[0]);}else{B=this.dragSpecs.startSize+(this.placement==Roo.SplitBar.TOP?A[1]-this.dragSpecs.startPoint[1]:this.dragSpecs.startPoint[1]-A[1]);
+}B=Math.min(Math.max(B,this.activeMinSize),this.activeMaxSize);if(B!=this.dragSpecs.startSize){if(this.fireEvent('beforeapply',this,B)!==false){this.adapter.setElementSize(this,B);this.fireEvent("moved",this,B);this.fireEvent("resize",this,B);}}},getAdapter:function(){return this.adapter;
+},setAdapter:function(A){this.adapter=A;this.adapter.init(this);},getMinimumSize:function(){return this.minSize;},setMinimumSize:function(A){this.minSize=A;},getMaximumSize:function(){return this.maxSize;},setMaximumSize:function(A){this.maxSize=A;},setCurrentSize:function(A){var B=this.animate;
+this.animate=false;this.adapter.setElementSize(this,A);this.animate=B;},destroy:function(A){if(this.shim){this.shim.remove();}this.dd.unreg();this.proxy.parentNode.removeChild(this.proxy);if(A){this.el.remove();}}});Roo.SplitBar.createProxy=function(A){var B=new Roo.Element(document.createElement("div"));
+B.unselectable();var C='x-splitbar-proxy';B.addClass(C+' '+(A==Roo.SplitBar.HORIZONTAL?C+'-h':C+'-v'));document.body.appendChild(B.dom);return B.dom;};Roo.SplitBar.BasicLayoutAdapter=function(){};Roo.SplitBar.BasicLayoutAdapter.prototype={init:function(s){}
+,getElementSize:function(s){if(s.orientation==Roo.SplitBar.HORIZONTAL){return s.resizingEl.getWidth();}else{return s.resizingEl.getHeight();}},setElementSize:function(s,A,B){if(s.orientation==Roo.SplitBar.HORIZONTAL){if(!s.animate){s.resizingEl.setWidth(A);
+if(B){B(s,A);}}else{s.resizingEl.setWidth(A,true,.1,B,'easeOut');}}else{if(!s.animate){s.resizingEl.setHeight(A);if(B){B(s,A);}}else{s.resizingEl.setHeight(A,true,.1,B,'easeOut');}}}};Roo.SplitBar.AbsoluteLayoutAdapter=function(A){this.basic=new Roo.SplitBar.BasicLayoutAdapter();
+this.container=Roo.get(A);};Roo.SplitBar.AbsoluteLayoutAdapter.prototype={init:function(s){this.basic.init(s);},getElementSize:function(s){return this.basic.getElementSize(s);},setElementSize:function(s,A,B){this.basic.setElementSize(s,A,this.moveSplitter.createDelegate(this,[s]));
+},moveSplitter:function(s){var A=Roo.SplitBar;switch(s.placement){case A.LEFT:s.el.setX(s.resizingEl.getRight());break;case A.RIGHT:s.el.setStyle("right",(this.container.getWidth()-s.resizingEl.getLeft())+"px");break;case A.TOP:s.el.setY(s.resizingEl.getBottom());
+break;case A.BOTTOM:s.el.setY(s.resizingEl.getTop()-s.el.getHeight());break;}}};Roo.SplitBar.VERTICAL=1;Roo.SplitBar.HORIZONTAL=2;Roo.SplitBar.LEFT=1;Roo.SplitBar.RIGHT=2;Roo.SplitBar.TOP=3;Roo.SplitBar.BOTTOM=4;
+// Roo/View.js
+Roo.View=function(A,B,C){this.parent=false;if(typeof(B)=='undefined'){Roo.apply(this,A);this.el=Roo.get(this.el);}else{this.el=Roo.get(A);this.tpl=B;Roo.apply(this,C);}this.wrapEl=this.el.wrap().wrap();if(typeof(this.tpl)=="string"){this.tpl=new Roo.Template(this.tpl);
+}else{this.tpl=new Roo.factory(this.tpl,Roo);}this.tpl.compile();this.addEvents({"beforeclick":true,"click":true,"dblclick":true,"contextmenu":true,"selectionchange":true,"beforeselect":true,"preparedata":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);}if(this.footer&&this.footer.xtype){var D=this.wrapEl.appendChild(document.createElement("div"));
+this.footer.dataSource=this.store;this.footer.container=D;this.footer=Roo.factory(this.footer,Roo);D.insertFirst(this.el);}Roo.View.superclass.constructor.call(this);};Roo.extend(Roo.View,Roo.util.Observable,{store:false,el:'',tpl:false,dataName:false,selectedClass:"x-view-selected",emptyText:"",mask:false,multiSelect:false,singleSelect:false,toggleSelect:false,tickable:false,getEl:function(){return this.wrapEl;
+},refresh:function(){var t=this.tpl;this.clearSelections();this.el.update("");var A=[];var B=this.store.getRange();if(B.length<1){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,C=B.length;i<C;i++){var D=this.prepareData(B[i].data,i,B[i]);this.fireEvent("preparedata",this,D,i,B[i]);var d=Roo.apply({},D);if(this.tickable){Roo.apply(d,{'roo-id':Roo.id()});var E=this;Roo.each(this.parent.item,function(F){if(F[E.parent.valueField]!=D[E.parent.valueField]){return;
+}Roo.apply(d,{'roo-data-checked':'checked'});});}A[A.length]=Roo.util.Format.trim(this.dataName?t.applySubtemplate(this.dataName,d,this.store.meta):t.apply(d));}el.update(A.join(""));this.nodes=el.dom.childNodes;this.updateIndexes(0);},prepareData:function(A,B,C){this.fireEvent("preparedata",this,A,B,C);
+return A;},onUpdate:function(ds,A){this.clearSelections();var B=this.store.indexOf(A);var n=this.nodes[B];this.tpl.insertBefore(n,this.prepareData(A.data,B,A));n.parentNode.removeChild(n);this.updateIndexes(B,B);},onAdd:function(ds,A,B){this.clearSelections();
+if(this.nodes.length==0){this.refresh();return;}var n=this.nodes[B];for(var i=0,C=A.length;i<C;i++){var d=this.prepareData(A[i].data,i,A[i]);if(n){this.tpl.insertBefore(n,d);}else{this.tpl.append(this.el,d);}}this.updateIndexes(B);},onRemove:function(ds,A,B){this.clearSelections();
+var el=this.dataName?this.el.child('.roo-tpl-'+this.dataName):this.el;el.dom.removeChild(this.nodes[B]);this.updateIndexes(B);},refreshNode:function(A){this.onUpdate(this.store,this.store.getAt(A));},updateIndexes:function(A,B){var ns=this.nodes;A=A||0;B=B||ns.length-1;
+for(var i=A;i<=B;i++){ns[i].nodeIndex=i;}},setStore:function(A,B){if(!B&&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(A){A.on("datachanged",this.refresh,this);A.on("add",this.onAdd,this);A.on("remove",this.onRemove,this);A.on("update",this.onUpdate,this);
+A.on("clear",this.refresh,this);A.on("beforeload",this.onBeforeLoad,this);A.on("load",this.onLoad,this);A.on("loadexception",this.onLoad,this);}if(A){this.refresh();}},onBeforeLoad:function(A,B){if(!B.add){this.el.update("");}this.el.mask(this.mask?this.mask:"Loading");
+},onLoad:function(){this.el.unmask();},findItemFromChild:function(A){var el=this.dataName?this.el.child('.roo-tpl-'+this.dataName,true):this.el.dom;if(!A||A.parentNode==el){return A;}var p=A.parentNode;while(p&&p!=el){if(p.parentNode==el){return p;}p=p.parentNode;
+}return null;},onClick:function(e){var A=this.findItemFromChild(e.getTarget());if(A){var B=this.indexOf(A);if(this.onItemClick(A,B,e)!==false){this.fireEvent("click",this,B,A,e);}}else{this.clearSelections();}},onContextMenu:function(e){var A=this.findItemFromChild(e.getTarget());
+if(A){this.fireEvent("contextmenu",this,this.indexOf(A),A,e);}},onDblClick:function(e){var A=this.findItemFromChild(e.getTarget());if(A){this.fireEvent("dblclick",this,this.indexOf(A),A,e);}},onItemClick:function(A,B,e){if(this.fireEvent("beforeclick",this,B,A,e)===false){return false;
+}if(this.toggleSelect){var m=this.isSelected(A)?'unselect':'select';var _t=this;_t[m](A,true,false);return true;}if(this.multiSelect||this.singleSelect){if(this.multiSelect&&e.shiftKey&&this.lastSelection){this.select(this.getNodes(this.indexOf(this.lastSelection),B),false);
+}else{this.select(A,this.multiSelect&&e.ctrlKey);this.lastSelection=A;}if(!this.tickable){e.preventDefault();}}return true;},getSelectionCount:function(){return this.selections.length;},getSelectedNodes:function(){return this.selections;},getSelectedIndexes:function(){var A=[],s=this.selections;
+for(var i=0,B=s.length;i<B;i++){A.push(s[i].nodeIndex);}return A;},clearSelections:function(A){if(this.nodes&&(this.multiSelect||this.singleSelect)&&this.selections.length>0){this.cmp.elements=this.selections;this.cmp.removeClass(this.selectedClass);this.selections=[];
+if(!A){this.fireEvent("selectionchange",this,this.selections);}}},isSelected:function(A){var s=this.selections;if(s.length<1){return false;}A=this.getNode(A);return s.indexOf(A)!==-1;},select:function(A,B,C){if(A instanceof Array){if(!B){this.clearSelections(true);
+}for(var i=0,D=A.length;i<D;i++){this.select(A[i],true,true);}return;}var E=this.getNode(A);if(!E||this.isSelected(E)){return;}if(!B){this.clearSelections(true);}if(this.fireEvent("beforeselect",this,E,this.selections)!==false){Roo.fly(E).addClass(this.selectedClass);
+this.selections.push(E);if(!C){this.fireEvent("selectionchange",this,this.selections);}}},unselect:function(A,B,C){if(A instanceof Array){Roo.each(this.selections,function(s){this.unselect(s,A);},this);return;}var D=this.getNode(A);if(!D||!this.isSelected(D)){return;
+}var ns=[];Roo.each(this.selections,function(s){if(s==D){Roo.fly(D).removeClass(this.selectedClass);return;}ns.push(s);},this);this.selections=ns;this.fireEvent("selectionchange",this,this.selections);},getNode:function(A){if(typeof A=="string"){return document.getElementById(A);
+}else if(typeof A=="number"){return this.nodes[A];}return A;},getNodes:function(A,B){var ns=this.nodes;A=A||0;B=typeof B=="undefined"?ns.length-1:B;var C=[];if(A<=B){for(var i=A;i<=B;i++){C.push(ns[i]);}}else{for(var i=A;i>=B;i--){C.push(ns[i]);}}return C;
+},indexOf:function(A){A=this.getNode(A);if(typeof A.nodeIndex=="number"){return A.nodeIndex;}var ns=this.nodes;for(var i=0,B=ns.length;i<B;i++){if(ns[i]==A){return i;}}return -1;}});
+// Roo/JsonView.js
+Roo.JsonView=function(A,B,C){Roo.JsonView.superclass.constructor.call(this,A,B,C);var um=this.el.getUpdateManager();um.setRenderer(this);um.on("update",this.onLoad,this);um.on("failure",this.onLoadException,this);this.addEvents({'beforerender':true,'load':true,'loadexception':true}
+);};Roo.extend(Roo.JsonView,Roo.View,{jsonRoot:"",refresh:function(){this.clearSelections();this.el.update("");var A=[];var o=this.jsonData;if(o&&o.length>0){for(var i=0,B=o.length;i<B;i++){var C=this.prepareData(o[i],i,o);A[A.length]=this.tpl.apply(C);}}
+else{A.push(this.emptyText);}this.el.update(A.join(""));this.nodes=this.el.dom.childNodes;this.updateIndexes(0);},load:function(){var um=this.el.getUpdateManager();um.update.apply(um,arguments);},render:function(el,A){this.clearSelections();this.el.update("");
+var o;try{o=Roo.util.JSON.decode(A.responseText);if(this.jsonRoot){o=o[this.jsonRoot];}}catch(e){}this.jsonData=o;this.beforeRender();this.refresh();},getCount:function(){return this.jsonData?this.jsonData.length:0;},getNodeData:function(A){if(A instanceof Array){var B=[];
+for(var i=0,C=A.length;i<C;i++){B.push(this.getNodeData(A[i]));}return B;}return this.jsonData[this.indexOf(A)]||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:function(A,B){if(this.jsonData){var C=[];var ss=this.snapshot;if(typeof B=="string"){var D=B.length;if(D==0){this.clearFilter();
+return;}B=B.toLowerCase();for(var i=0,E=ss.length;i<E;i++){var o=ss[i];if(o[A].substr(0,D).toLowerCase()==B){C.push(o);}}}else if(B.exec){for(var i=0,E=ss.length;i<E;i++){var o=ss[i];if(B.test(o[A])){C.push(o);}}}else{return;}this.jsonData=C;this.refresh();
+}},filterBy:function(fn,A){if(this.jsonData){var B=[];var ss=this.snapshot;for(var i=0,C=ss.length;i<C;i++){var o=ss[i];if(fn.call(A||this,o)){B.push(o);}}this.jsonData=B;this.refresh();}},clearFilter:function(){if(this.snapshot&&this.jsonData!=this.snapshot){this.jsonData=this.snapshot;
+this.refresh();}},sort:function(A,B,C){this.sortInfo=Array.prototype.slice.call(arguments,0);if(this.jsonData){var p=A;var D=B&&B.toLowerCase()=="desc";var f=function(o1,o2){var v1=C?C(o1[p]):o1[p];var v2=C?C(o2[p]):o2[p];;if(v1<v2){return D?+1:-1;}else if(v1>v2){return D?-1:+1;
+}else{return 0;}};this.jsonData.sort(f);this.refresh();if(this.jsonData!=this.snapshot){this.snapshot.sort(f);}}}});
+// Roo/ColorPalette.js
+Roo.ColorPalette=function(A){Roo.ColorPalette.superclass.constructor.call(this,A);this.addEvents({select:true});if(this.handler){this.on("select",this.handler,this.scope,true);}};Roo.extend(Roo.ColorPalette,Roo.Component,{itemCls:"x-color-palette",value:null,clickEvent:'click',ctype:"Roo.ColorPalette",allowReselect:false,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"],onRender:function(A,B){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,C=c.length;i<C;i++){t.add([c[i]]);}var el=document.createElement("div");el.className=this.itemCls;t.overwrite(el);A.dom.insertBefore(el,B);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}
+);}},afterRender:function(){Roo.ColorPalette.superclass.afterRender.call(this);if(this.value){var s=this.value;this.value=null;this.select(s);}},handleClick:function(e,t){e.preventDefault();if(!this.disabled){var c=t.className.match(/(?:^|\s)color-(.{6})(?:\s|$)/)[1];
+this.select(c.toUpperCase());}},select:function(A){A=A.replace("#","");if(A!=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-"+A).addClass("x-color-palette-sel");
+this.value=A;this.fireEvent("select",this,A);}}});
+// Roo/DatePicker.js
+Roo.DatePicker=function(A){Roo.DatePicker.superclass.constructor.call(this,A);this.value=A&&A.value?A.value.clearTime():new Date().clearTime();this.addEvents({'select':true,'monthchange':true});if(this.handler){this.on("select",this.handler,this.scope||this);
+}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,{todayText:"Today",okText:"&#160;OK&#160;",cancelText:"Cancel",todayTip:"{0} (Spacebar)",minDate:null,maxDate:null,minText:"This date is before the minimum date",maxText:"This date is after the maximum date",format:"m/d/y",disabledDays:null,disabledDaysText:"",disabledDatesRE:null,disabledDatesText:"",constrainToViewport:true,monthNames:Date.monthNames,dayNames:Date.dayNames,nextText:'Next Month (Control+Right)',prevText:'Previous Month (Control+Left)',monthYearText:'Choose a month (Control+Up/Down to move years)',startDay:0,showClear:false,setValue:function(A){var B=this.value;
+if(typeof(A)=='string'){A=Date.parseDate(A,this.format);}if(!A){A=new Date();}this.value=A.clearTime(true);if(this.el){this.update(this.value);}},getValue:function(){return this.value;},focus:function(){if(this.el){this.update(this.activeDate);}},onRender:function(A,B){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("");A.dom.insertBefore(el,B);
+this.el=Roo.get(el);this.eventEl=Roo.get(el.firstChild);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);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));
+},"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});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.mbtn.on('click',this.showMonthPicker,this);
+this.mbtn.el.child(this.mbtn.menuClassTarget).addClass("x-btn-with-menu");var C=(new Date()).dateFormat(this.format);var D=new Roo.Toolbar(this.el.child("td.x-date-bottom",true));if(this.showClear){D.add(new Roo.Toolbar.Fill());}D.add({text:String.format(this.todayText,C),tooltip:String.format(this.todayTip,C),handler:this.selectToday,scope:this}
+);if(this.showClear){D.add(new Roo.Toolbar.Fill());D.add({text:'&#160;',cls:'x-btn-icon x-btn-clear',handler:function(){this.fireEvent("select",this,'');},scope:this});}if(Roo.isIE){this.el.repaint();}this.update(this.value);},createMonthPicker:function(){if(!this.monthPicker.dom.firstChild){var A=['<table border="0" cellspacing="0">'];
+for(var i=0;i<6;i++){A.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>');
+}A.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(A.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);}});}},showMonthPicker:function(){this.createMonthPicker();var A=this.el.getSize();this.monthPicker.setSize(A);this.monthPicker.child('table').setSize(A);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});},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');}},updateMPMonth:function(sm){this.mpMonths.each(function(m,a,i){m[m.dom.xmonth==sm?'addClass':'removeClass']('x-date-mp-sel');
+});},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();}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();}},hideMonthPicker:function(A){if(this.monthPicker){if(A===true){this.monthPicker.hide();
+}else{this.monthPicker.slideOut('t',{duration:.2});}}},showPrevMonth:function(e){this.update(this.activeDate.add("mo",-1));},showNextMonth:function(e){this.update(this.activeDate.add("mo",1));},showPrevYear:function(){this.update(this.activeDate.add("y",-1));
+},showNextYear:function(){this.update(this.activeDate.add("y",1));},handleMouseWheel:function(e){var A=e.getWheelDelta();if(A>0){this.showPrevMonth();e.stopEvent();}else if(A<0){this.showNextMonth();e.stopEvent();}},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);}},selectToday:function(){this.setValue(new Date().clearTime());this.fireEvent("select",this,this.value);},update:function(A){var vd=this.activeDate;
+this.activeDate=A;if(vd&&this.el){var t=A.getTime();if(vd.getMonth()==A.getMonth()&&vd.getFullYear()==A.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 B=A.getDaysInMonth();var C=A.getFirstDateOfMonth();var D=C.getDay()-this.startDay;if(D<=this.startDay){D+=7;}var pm=A.add("mo",-1);var E=pm.getDaysInMonth()-D;var F=this.cells.elements;var G=this.textNodes;B+=D;
+var H=86400000;var d=(new Date(pm.getFullYear(),pm.getMonth(),E)).clearTime();var I=new Date().clearTime().getTime();var J=A.clearTime().getTime();var K=this.minDate?this.minDate.clearTime():Number.NEGATIVE_INFINITY;var L=this.maxDate?this.maxDate.clearTime():Number.POSITIVE_INFINITY;
+var M=this.disabledDatesRE;var N=this.disabledDatesText;var O=this.disabledDays?this.disabledDays.join(""):false;var P=this.disabledDaysText;var Q=this.format;var R=function(U,V){V.title="";var t=d.getTime();V.firstChild.dateValue=t;if(t==I){V.className+=" x-date-today";
+V.title=U.todayText;}if(t==J){V.className+=" x-date-selected";setTimeout(function(){try{V.firstChild.focus();}catch(e){}},50);}if(t<K){V.className=" x-date-disabled";V.title=U.minText;return;}if(t>L){V.className=" x-date-disabled";V.title=U.maxText;return;
+}if(O){if(O.indexOf(d.getDay())!=-1){V.title=P;V.className=" x-date-disabled";}}if(M&&Q){var W=d.dateFormat(Q);if(M.test(W)){V.title=N.replace("%0",W);V.className=" x-date-disabled";}}};var i=0;for(;i<D;i++){G[i].innerHTML=(++E);d.setDate(d.getDate()+1);F[i].className="x-date-prevday";
+R(this,F[i]);}for(;i<B;i++){intDay=i-D+1;G[i].innerHTML=(intDay);d.setDate(d.getDate()+1);F[i].className="x-date-active";R(this,F[i]);}var S=0;for(;i<42;i++){G[i].innerHTML=(++S);d.setDate(d.getDate()+1);F[i].className="x-date-nextday";R(this,F[i]);}this.mbtn.setText(this.monthNames[A.getMonth()]+" "+A.getFullYear());
+this.fireEvent('monthchange',this,A);if(!this.internalRender){var T=this.el.dom.firstChild;var w=T.offsetWidth;this.el.setWidth(w+this.el.getBorderWidth("lr"));Roo.fly(T).setWidth(w);this.internalRender=true;if(Roo.isOpera&&!this.secondPass){T.rows[0].cells[1].style.width=(w-(T.rows[0].cells[0].offsetWidth+T.rows[0].cells[2].offsetWidth))+"px";
+this.secondPass=true;this.update.defer(10,this,[A]);}}}});
+// Roo/TabPanel.js
+Roo.TabPanel=function(A,B){this.el=Roo.get(A,true);if(B){if(typeof B=="boolean"){this.tabPosition=B?"bottom":"top";}else{Roo.apply(this,B);}}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"){this.bodyEl=Roo.get(this.createBody(this.el.dom));this.el.addClass("x-tabs-top");}this.items=[];this.bodyEl.setStyle("position","relative");this.active=null;this.activateDelegate=this.activate.createDelegate(this);this.addEvents({"tabchange":true,"beforetabchange":true}
+);Roo.EventManager.onWindowResize(this.onResize,this);this.cpad=this.el.getPadding("lr");this.hiddenCount=0;if(this.toolbar){var C=this.toolbar;C.container=this.stripEl.child('td.x-tab-strip-toolbar');this.toolbar=new Roo.Toolbar(C);if(Roo.isSafari){var D=C.container.child('table',true);
+D.setAttribute('width','100%');}}Roo.TabPanel.superclass.constructor.call(this);};Roo.extend(Roo.TabPanel,Roo.util.Observable,{tabPosition:"top",currentTabWidth:0,minTabWidth:40,maxTabWidth:250,preferredTabWidth:175,resizeTabs:false,monitorResize:true,toolbar:false,addTab:function(id,A,B,C){var D=new Roo.TabPanelItem(this,id,A,C);
+this.addTabItem(D);if(B){D.setContent(B);}return D;},getTab:function(id){return this.items[id];},hideTab:function(id){var t=this.items[id];if(!t.isHidden()){t.setHidden(true);this.hiddenCount++;this.autoSizeTabs();}},unhideTab:function(id){var t=this.items[id];
+if(t.isHidden()){t.setHidden(false);this.hiddenCount--;this.autoSizeTabs();}},addTabItem:function(A){this.items[A.id]=A;this.items.push(A);if(this.resizeTabs){A.setWidth(this.currentTabWidth||this.preferredTabWidth);this.autoSizeTabs();}else{A.autoSize();
+}},removeTab:function(id){var A=this.items;var B=A[id];if(!B){return;}var C=A.indexOf(B);if(this.active==B&&A.length>1){var D=this.getNextAvailable(C);if(D){D.activate();}}this.stripEl.dom.removeChild(B.pnode.dom);if(B.bodyEl.dom.parentNode==this.bodyEl.dom){this.bodyEl.dom.removeChild(B.bodyEl.dom);
+}A.splice(C,1);delete this.items[B.id];B.fireEvent("close",B);B.purgeListeners();this.autoSizeTabs();},getNextAvailable:function(A){var B=this.items;var C=A;while(C<B.length){var D=B[++C];if(D&&!D.isHidden()){return D;}}C=A;while(C>=0){var D=B[--C];if(D&&!D.isHidden()){return D;
+}}return null;},disableTab:function(id){var A=this.items[id];if(A&&this.active!=A){A.disable();}},enableTab:function(id){var A=this.items[id];A.enable();},activate:function(id){var A=this.items[id];if(!A){return null;}if(A==this.active||A.disabled){return A;
+}var e={};this.fireEvent("beforetabchange",this,e,A);if(e.cancel!==true&&!A.disabled){if(this.active){this.active.hide();}this.active=this.items[id];this.active.show();this.fireEvent("tabchange",this,this.active);}return A;},getActiveTab:function(){return this.active;
+},syncHeight:function(A){var B=(A||this.el.getHeight())-this.el.getBorderWidth("tb")-this.el.getPadding("tb");var bm=this.bodyEl.getMargins();var C=B-(this.stripWrap.getHeight()||0)-(bm.top+bm.bottom);this.bodyEl.setHeight(C);return C;},onResize:function(){if(this.monitorResize){this.autoSizeTabs();
+}},beginUpdate:function(){this.updating=true;},endUpdate:function(){this.updating=false;this.autoSizeTabs();},autoSizeTabs:function(){var A=this.items.length;var B=A-this.hiddenCount;if(!this.resizeTabs||A<1||B<1||this.updating){return;}var w=Math.max(this.el.getWidth()-this.cpad,10);
+var C=Math.floor(w/B);var b=this.stripBody;if(b.getWidth()>w){var D=this.items;this.setTabWidth(Math.max(C,this.minTabWidth)-2);if(C<this.minTabWidth){}}else{if(this.currentTabWidth<this.preferredTabWidth){this.setTabWidth(Math.min(C,this.preferredTabWidth)-2);
+}}},getCount:function(){return this.items.length;},setTabWidth:function(A){this.currentTabWidth=A;for(var i=0,B=this.items.length;i<B;i++){if(!this.items[i].isHidden()){this.items[i].setWidth(A);}}},destroy:function(A){Roo.EventManager.removeResizeListener(this.onResize,this);
+for(var i=0,B=this.items.length;i<B;i++){this.items[i].purgeListeners();}if(A===true){this.el.update("");this.el.remove();}}});Roo.TabPanelItem=function(A,id,B,C){this.tabPanel=A;this.id=id;this.disabled=false;this.text=B;this.loaded=false;this.closable=C;
+this.bodyEl=Roo.get(A.createItemBody(A.bodyEl.dom,id));this.bodyEl.setVisibilityMode(Roo.Element.VISIBILITY);this.bodyEl.setStyle("display","block");this.bodyEl.setStyle("zoom","1");this.hideAction();var D=A.createStripElements(A.stripEl.dom,B,C);this.el=Roo.get(D.el,true);
+this.inner=Roo.get(D.inner,true);this.textEl=Roo.get(this.el.dom.firstChild.firstChild.firstChild,true);this.pnode=Roo.get(D.el.parentNode,true);this.el.on("mousedown",this.onTabMouseDown,this);this.el.on("click",this.onTabClick,this);if(C){var c=Roo.get(D.close,true);
+c.dom.title=this.closeText;c.addClassOnOver("close-over");c.on("click",this.closeClick,this);}this.addEvents({"activate":true,"beforeclose":true,"close":true,"deactivate":true});this.hidden=false;Roo.TabPanelItem.superclass.constructor.call(this);};Roo.extend(Roo.TabPanelItem,Roo.util.Observable,{purgeListeners:function(){Roo.util.Observable.prototype.purgeListeners.call(this);
+this.el.removeAllListeners();},show:function(){this.pnode.addClass("on");this.showAction();if(Roo.isOpera){this.tabPanel.stripWrap.repaint();}this.fireEvent("activate",this.tabPanel,this);},isActive:function(){return this.tabPanel.getActiveTab()==this;},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();},setTooltip:function(A){if(Roo.QuickTips&&Roo.QuickTips.isEnabled()){this.textEl.dom.qtip=A;this.textEl.dom.removeAttribute('title');}else{this.textEl.dom.title=A;}},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(A){var B=A-this.pnode.getPadding("lr");this.inner.setWidth(B);this.textEl.setWidth(B-this.inner.getPadding("lr"));
+this.pnode.setWidth(A);},setHidden:function(A){this.hidden=A;this.pnode.setStyle("display",A?"none":"");},isHidden:function(){return this.hidden;},getText:function(){return this.text;},autoSize:function(){this.textEl.setWidth(1);this.setWidth(this.textEl.dom.scrollWidth+this.pnode.getPadding("lr")+this.inner.getPadding("lr")+2);
+},setText:function(A){this.text=A;this.textEl.update(A);this.setTooltip(A);if(!this.tabPanel.resizeTabs){this.autoSize();}},activate:function(){this.tabPanel.activate(this.id);},disable:function(){if(this.tabPanel.active!=this){this.disabled=true;this.pnode.addClass("disabled");
+}},enable:function(){this.disabled=false;this.pnode.removeClass("disabled");},setContent:function(A,B){this.bodyEl.update(A,B);},getUpdateManager:function(){return this.bodyEl.getUpdateManager();},setUrl:function(A,B,C){if(this.refreshDelegate){this.un('activate',this.refreshDelegate);
+}this.refreshDelegate=this._handleRefresh.createDelegate(this,[A,B,C]);this.on("activate",this.refreshDelegate);return this.bodyEl.getUpdateManager();},_handleRefresh:function(A,B,C){if(!C||!this.loaded){var D=this.bodyEl.getUpdateManager();D.update(A,B,this._setLoaded.createDelegate(this));
+}},refresh:function(){if(this.refreshDelegate){this.loaded=false;this.refreshDelegate();}},_setLoaded:function(){this.loaded=true;},closeClick:function(e){var o={};e.stopEvent();this.fireEvent("beforeclose",this,o);if(o.cancel!==true){this.tabPanel.removeTab(this.id);
+}},closeText:"Close this tab"});Roo.TabPanel.prototype.createStrip=function(A){var B=document.createElement("div");B.className="x-tabs-wrap";A.appendChild(B);return B;};Roo.TabPanel.prototype.createStripList=function(A){A.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 A.firstChild.firstChild.firstChild.firstChild;};Roo.TabPanel.prototype.createBody=function(A){var B=document.createElement("div");Roo.id(B,"tab-body");Roo.fly(B).addClass("x-tabs-body");A.appendChild(B);return B;};Roo.TabPanel.prototype.createItemBody=function(A,id){var B=Roo.getDom(id);
+if(!B){B=document.createElement("div");B.id=id;}Roo.fly(B).addClass("x-tabs-item-body");A.insertBefore(B,A.firstChild);return B;};Roo.TabPanel.prototype.createStripElements=function(A,B,C){var td=document.createElement("td");A.insertBefore(td,A.childNodes[A.childNodes.length-1]);
+if(C){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":B});var D=el.getElementsByTagName("div")[0];var E=el.getElementsByTagName("em")[0];return {"el":el,"close":D,"inner":E};}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":B});var E=el.getElementsByTagName("em")[0];return {"el":el,"inner":E};}};
+// Roo/Button.js
+Roo.Button=function(A,B){if(!B){B=A;A=B.renderTo||false;}Roo.apply(this,B);this.addEvents({"click":true,"toggle":true,'mouseover':true,'mouseout':true,'render':true});if(this.menu){this.menu=Roo.menu.MenuMgr.get(this.menu);}Roo.util.Observable.call(this);if(A){this.render(A);
+}};Roo.extend(Roo.Button,Roo.util.Observable,{hidden:false,disabled:false,pressed:false,tabIndex:undefined,enableToggle:false,menu:undefined,menuAlign:"tl-bl?",iconCls:undefined,type:'button',menuClassTarget:'tr',clickEvent:'click',handleMouseEvents:true,tooltipType:'qtip',render:function(A){var B;
+if(this.hideParent){this.parentEl=Roo.get(A);}if(!this.dhconfig){if(!this.template){if(!Roo.Button.buttonTemplate){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;}B=this.template.append(A,[this.text||'&#160;',this.type],true);var C=B.child("button:first");C.on('focus',this.onFocus,this);C.on('blur',this.onBlur,this);if(this.cls){B.addClass(this.cls);}if(this.icon){C.setStyle('background-image','url('+this.icon+')');
+}if(this.iconCls){C.addClass(this.iconCls);if(!this.cls){B.addClass(this.text?'x-btn-text-icon':'x-btn-icon');}}if(this.tabIndex!==undefined){C.dom.tabIndex=this.tabIndex;}if(this.tooltip){if(typeof this.tooltip=='object'){Roo.QuickTips.tips(Roo.apply({target:C.id}
+,this.tooltip));}else{C.dom[this.tooltipType]=this.tooltip;}}}else{B=Roo.DomHelper.append(Roo.get(A).dom,this.dhconfig,true);}this.el=B;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);}B.addClass("x-btn");if(Roo.isIE&&!Roo.isIE7){this.autoWidth.defer(1,this);}else{this.autoWidth();}if(this.handleMouseEvents){B.on("mouseover",this.onMouseOver,this);B.on("mouseout",this.onMouseOut,this);
+B.on("mousedown",this.onMouseDown,this);}B.on(this.clickEvent,this.onClick,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 D=new Roo.util.ClickRepeater(B,typeof this.repeat=="object"?this.repeat:{}
+);D.on("click",this.onClick,this);}this.fireEvent('render',this);},getEl:function(){return this.el;},destroy:function(){Roo.ButtonToggleMgr.unregister(this);this.el.removeAllListeners();this.purgeListeners();this.el.remove();},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();}}}},setHandler:function(A,B){this.handler=A;this.scope=B;},setText:function(A){this.text=A;if(this.el){this.el.child("td.x-btn-center button.x-btn-text").update(A);}this.autoWidth();},getText:function(){return this.text;
+},show:function(){this.hidden=false;if(this.el){this[this.hideParent?'parentEl':'el'].setStyle("display","");}},hide:function(){this.hidden=true;if(this.el){this[this.hideParent?'parentEl':'el'].setStyle("display","none");}},setVisible:function(A){if(A){this.show();
+}else{this.hide();}},toggle:function(A){A=A===undefined?!this.pressed:A;if(A!=this.pressed){if(A){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,A);}}},focus:function(){this.el.child('button:first').focus();},disable:function(){if(this.el){this.el.addClass("x-btn-disabled");}this.disabled=true;},enable:function(){if(this.el){this.el.removeClass("x-btn-disabled");
+}this.disabled=false;},setDisabled:function(v){this[v!==true?"enable":"disable"]();},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);}}},onMouseOver:function(e){if(!this.disabled){this.el.addClass("x-btn-over");this.fireEvent('mouseover',this,e);}},onMouseOut:function(e){if(!e.within(this.el,true)){this.el.removeClass("x-btn-over");
+this.fireEvent('mouseout',this,e);}},onFocus:function(e){if(!this.disabled){this.el.addClass("x-btn-focus");}},onBlur:function(e){this.el.removeClass("x-btn-focus");},onMouseDown:function(e){if(!this.disabled&&e.button==0){this.el.addClass("x-btn-click");
+Roo.get(document).on('mouseup',this.onMouseUp,this);}},onMouseUp:function(e){if(e.button==0){this.el.removeClass("x-btn-click");Roo.get(document).un('mouseup',this.onMouseUp,this);}},onMenuShow:function(e){this.el.addClass("x-btn-menu-active");},onMenuHide:function(e){this.el.removeClass("x-btn-menu-active");
+}});Roo.ButtonToggleMgr=function(){var A={};function toggleGroup(B,C){if(C){var g=A[B.toggleGroup];for(var i=0,l=g.length;i<l;i++){if(g[i]!=B){g[i].toggle(false);}}}}return {register:function(B){if(!B.toggleGroup){return;}var g=A[B.toggleGroup];if(!g){g=A[B.toggleGroup]=[];
+}g.push(B);B.on("toggle",toggleGroup);},unregister:function(B){if(!B.toggleGroup){return;}var g=A[B.toggleGroup];if(g){g.remove(B);B.un("toggle",toggleGroup);}}};}();
+// Roo/SplitButton.js
+Roo.SplitButton=function(A,B){Roo.SplitButton.superclass.constructor.call(this,A,B);this.addEvents({"arrowclick":true});};Roo.extend(Roo.SplitButton,Roo.Button,{render:function(A){var B=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 C=B.append(A,[this.text,this.type],true);var D=C.child("button");if(this.cls){C.addClass(this.cls);}if(this.icon){D.setStyle('background-image','url('+this.icon+')');}if(this.iconCls){D.addClass(this.iconCls);if(!this.cls){C.addClass(this.text?'x-btn-text-icon':'x-btn-icon');
+}}this.el=C;if(this.handleMouseEvents){C.on("mouseover",this.onMouseOver,this);C.on("mouseout",this.onMouseOut,this);C.on("mousedown",this.onMouseDown,this);C.on("mouseup",this.onMouseUp,this);}C.on(this.clickEvent,this.onClick,this);if(this.tooltip){if(typeof this.tooltip=='object'){Roo.QuickTips.tips(Roo.apply({target:D.id}
+,this.tooltip));}else{D.dom[this.tooltipType]=this.tooltip;}}if(this.arrowTooltip){C.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);},autoWidth:function(){if(this.el){var A=this.el.child("table:first");
+var B=this.el.child("table:last");this.el.setWidth("auto");A.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((A.getWidth()+B.getWidth())<this.minWidth){A.setWidth(this.minWidth-B.getWidth());}if(this.hidden){this.el.endMeasure();}}this.el.setWidth(A.getWidth()+B.getWidth());}},setHandler:function(A,B){this.handler=A;
+this.scope=B;},setArrowHandler:function(A,B){this.arrowHandler=A;this.scope=B;},focus:function(){if(this.el){this.el.child("button:first").focus();}},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);}}}},onMouseDown:function(e){if(!this.disabled){Roo.fly(e.getTarget("table")).addClass("x-btn-click");
+}},onMouseUp:function(e){Roo.fly(e.getTarget("table")).removeClass("x-btn-click");}});Roo.MenuButton=Roo.SplitButton;
+// Roo/Toolbar.js
+Roo.Toolbar=function(A,B,C){if(A instanceof Array){B=A;C=B;A=null;}if(typeof(A)=='object'&&A.xtype){C=A;A=C.container;B=C.buttons||[];}var D=[];if(C&&C.items){D=C.items;delete C.items;}Roo.apply(this,C);this.buttons=B;if(A){this.render(A);}this.xitems=D;Roo.each(D,function(b){this.add(b);
+},this);};Roo.Toolbar.prototype={render:function(ct){this.el=Roo.get(ct);if(this.cls){this.el.addClass(this.cls);}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 A=0;
+this.items=new Roo.util.MixedCollection(false,function(o){return o.id||("item"+(++A));});if(this.buttons){this.add.apply(this,this.buttons);delete this.buttons;}},add:function(){var a=arguments,l=a.length;for(var i=0;i<l;i++){this._add(a[i]);}},_add:function(el){if(el.xtype){el=Roo.factory(el,typeof(Roo.Toolbar[el.xtype])=='undefined'?Roo.form:Roo.Toolbar);
+}if(el.applyTo){return this.addField(el);}if(el.render){return this.addItem(el);}if(typeof el=="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){return this.addElement(el);}if(typeof el=="object"){return this.addButton(el);}return false;},addxtype:function(e){return this.add(e);},getEl:function(){return this.el;},addSeparator:function(){return this.addItem(new Roo.Toolbar.Separator());
+},addSpacer:function(){return this.addItem(new Roo.Toolbar.Spacer());},addFill:function(){return this.addItem(new Roo.Toolbar.Fill());},addElement:function(el){return this.addItem(new Roo.Toolbar.Item(el));},items:false,addItem:function(A){var td=this.nextBlock();
+A.render(td);this.items.add(A);return A;},addButton:function(A){if(A instanceof Array){var B=[];for(var i=0,C=A.length;i<C;i++){B.push(this.addButton(A[i]));}return B;}var b=A;if(!(A instanceof Roo.Toolbar.Button)){b=A.split?new Roo.Toolbar.SplitButton(A):new Roo.Toolbar.Button(A);
+}var td=this.nextBlock();b.render(td);this.items.add(b);return b;},addText:function(A){return this.addItem(new Roo.Toolbar.TextItem(A));},insertButton:function(A,B){if(B instanceof Array){var C=[];for(var i=0,D=B.length;i<D;i++){C.push(this.insertButton(A+i,B[i]));
+}return C;}if(!(B instanceof Roo.Toolbar.Button)){B=new Roo.Toolbar.Button(B);}var td=document.createElement("td");this.tr.insertBefore(td,this.tr.childNodes[A]);B.render(td);this.items.insert(A,B);return B;},addDom:function(A,B){var td=this.nextBlock();Roo.DomHelper.overwrite(td,A);
+var ti=new Roo.Toolbar.Item(td.firstChild);ti.render(td);this.items.add(ti);return ti;},fields:false,addField:function(A){if(!this.fields){var B=0;this.fields=new Roo.util.MixedCollection(false,function(o){return o.id||("item"+(++B));});}var td=this.nextBlock();
+A.render(td);var ti=new Roo.Toolbar.Item(td.firstChild);ti.render(td);this.items.add(ti);this.fields.add(A);return ti;},hide:function(){this.el.child('div').setVisibilityMode(Roo.Element.DISPLAY);this.el.child('div').hide();},show:function(){this.el.child('div').show();
+},nextBlock:function(){var td=document.createElement("td");this.tr.appendChild(td);return td;},destroy:function(){if(this.items){Roo.destroy.apply(Roo,this.items.items);}if(this.fields){Roo.destroy.apply(Roo,this.fields.items);}Roo.Element.uncache(this.el,this.tr);
+}};Roo.Toolbar.Item=function(el){var A={};if(typeof(el.xtype)!='undefined'){A=el;el=A.el;}this.el=Roo.getDom(el);this.id=Roo.id(this.el);this.hidden=false;this.addEvents({'render':true});Roo.Toolbar.Item.superclass.constructor.call(this,A);};Roo.extend(Roo.Toolbar.Item,Roo.util.Observable,{getEl:function(){return this.el;
+},render:function(td){this.td=td;td.appendChild(this.el);this.fireEvent('render',this);},destroy:function(){this.td.parentNode.removeChild(this.td);},show:function(){this.hidden=false;this.td.style.display="";},hide:function(){this.hidden=true;this.td.style.display="none";
+},setVisible:function(A){if(A){this.show();}else{this.hide();}},focus:function(){Roo.fly(this.el).focus();},disable:function(){Roo.fly(this.td).addClass("x-item-disabled");this.disabled=true;this.el.disabled=true;},enable:function(){Roo.fly(this.td).removeClass("x-item-disabled");
+this.disabled=false;this.el.disabled=false;}});Roo.Toolbar.Separator=function(A){var s=document.createElement("span");s.className="ytb-sep";if(A){A.el=s;}Roo.Toolbar.Separator.superclass.constructor.call(this,A||s);};Roo.extend(Roo.Toolbar.Separator,Roo.Toolbar.Item,{enable:Roo.emptyFn,disable:Roo.emptyFn,focus:Roo.emptyFn}
+);Roo.Toolbar.Spacer=function(A){var s=document.createElement("div");s.className="ytb-spacer";if(A){A.el=s;}Roo.Toolbar.Spacer.superclass.constructor.call(this,A||s);};Roo.extend(Roo.Toolbar.Spacer,Roo.Toolbar.Item,{enable:Roo.emptyFn,disable:Roo.emptyFn,focus:Roo.emptyFn}
+);Roo.Toolbar.Fill=Roo.extend(Roo.Toolbar.Spacer,{render:function(td){td.style.width='100%';Roo.Toolbar.Fill.superclass.render.call(this,td);}});Roo.Toolbar.TextItem=function(A){var B=A||"";if(typeof(A)=='object'){B=A.text||"";}else{A=null;}var s=document.createElement("span");
+s.className="ytb-text";s.innerHTML=B;if(A){A.el=s;}Roo.Toolbar.TextItem.superclass.constructor.call(this,A||s);};Roo.extend(Roo.Toolbar.TextItem,Roo.Toolbar.Item,{enable:Roo.emptyFn,disable:Roo.emptyFn,focus:Roo.emptyFn});Roo.Toolbar.Button=function(A){Roo.Toolbar.Button.superclass.constructor.call(this,null,A);
+};Roo.extend(Roo.Toolbar.Button,Roo.Button,{render:function(td){this.td=td;Roo.Toolbar.Button.superclass.render.call(this,td);},destroy:function(){Roo.Toolbar.Button.superclass.destroy.call(this);this.td.parentNode.removeChild(this.td);},show:function(){this.hidden=false;
+this.td.style.display="";},hide:function(){this.hidden=true;this.td.style.display="none";},disable:function(){Roo.fly(this.td).addClass("x-item-disabled");this.disabled=true;},enable:function(){Roo.fly(this.td).removeClass("x-item-disabled");this.disabled=false;
+}});Roo.ToolbarButton=Roo.Toolbar.Button;Roo.Toolbar.SplitButton=function(A){Roo.Toolbar.SplitButton.superclass.constructor.call(this,null,A);};Roo.extend(Roo.Toolbar.SplitButton,Roo.SplitButton,{render:function(td){this.td=td;Roo.Toolbar.SplitButton.superclass.render.call(this,td);
+},destroy:function(){Roo.Toolbar.SplitButton.superclass.destroy.call(this);this.td.parentNode.removeChild(this.td);},show:function(){this.hidden=false;this.td.style.display="";},hide:function(){this.hidden=true;this.td.style.display="none";}});Roo.Toolbar.MenuButton=Roo.Toolbar.SplitButton;
+
+// Roo/PagingToolbar.js
+Roo.PagingToolbar=function(el,ds,A){if(typeof(el)=='object'&&el.xtype){A=el;ds=el.dataSource;el=A.container;}var B=[];if(A.items){B=A.items;A.items=[];}Roo.PagingToolbar.superclass.constructor.call(this,el,null,A);this.ds=ds;this.cursor=0;this.renderButtons(this.el);
+this.bind(ds);Roo.each(B,function(e){this.add(Roo.factory(e));},this);};Roo.extend(Roo.PagingToolbar,Roo.Toolbar,{pageSize:20,displayMsg:'Displaying {0} - {1} of {2}',emptyMsg:'No data to display',beforePageText:"Page",afterPageText:"of {0}",firstText:"First Page",prevText:"Previous Page",nextText:"Next Page",lastText:"Last Page",refreshText:"Refresh",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.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.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.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'});}},updateInfo:function(){if(this.displayEl){var A=this.ds.getCount();
+var B=A==0?this.emptyMsg:String.format(this.displayMsg,this.cursor+1,this.cursor+A,this.ds.getTotalCount());this.displayEl.update(B);}},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();},getPageData:function(){var A=this.ds.getTotalCount();return {total:A,activePage:Math.ceil((this.cursor+this.pageSize)/this.pageSize),pages:A<this.pageSize?1:Math.ceil(A/this.pageSize)}
+;},onLoadError:function(){this.loading.enable();},onPagingKeydown:function(e){var k=e.getKey();var d=this.getPageData();if(k==e.RETURN){var v=this.field.dom.value,A;if(!v||isNaN(A=parseInt(v,10))){this.field.dom.value=d.activePage;return;}A=Math.min(Math.max(1,A),d.pages)-1;
+this.ds.load({params:{start:A*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 A=(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=A;this.ds.load({params:{start:(A-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,A;var B=(e.shiftKey)?10:1;if(k==e.DOWN||k==e.LEFT||k==e.PAGEDOWN){B*=-1;
+}if(!v||isNaN(A=parseInt(v,10))){this.field.dom.value=d.activePage;return;}else if(parseInt(v,10)+B>=1&parseInt(v,10)+B<=d.pages){this.field.dom.value=parseInt(v,10)+B;A=Math.min(Math.max(1,A+B),d.pages)-1;this.ds.load({params:{start:A*this.pageSize,limit:this.pageSize}
+});}e.stopEvent();}},beforeLoad:function(){if(this.loading){this.loading.disable();}},onClick:function(A){var ds=this.ds;switch(A){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 B=ds.getTotalCount();var C=B%this.pageSize;var D=C?(B-C):B-this.pageSize;ds.load({params:{start:D,limit:this.pageSize}});break;case "refresh":ds.load({params:{start:this.cursor,limit:this.pageSize}
+});break;}},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;},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;}});
+// Roo/Resizable.js
+Roo.Resizable=function(el,A){this.el=Roo.get(el);if(A&&A.wrap){A.resizeChild=this.el;this.el=this.el.wrap(typeof A.wrap=="object"?A.wrap:{cls:"xresizable-wrap"});this.el.id=this.el.dom.id=A.resizeChild.id+"-rzwrap";this.el.setStyle("overflow","hidden");this.el.setPositioning(A.resizeChild.getPositioning());
+A.resizeChild.clearPositioning();if(!A.width||!A.height){var B=A.resizeChild.getSize();this.el.setSize(B.width,B.height);}if(A.pinned&&!A.adjustments){A.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');Roo.apply(this,A);if(this.pinned){this.disableTrackOver=true;this.el.addClass("x-resizable-pinned");}var C=this.el.getStyle("position");if(C!="absolute"&&C!="fixed"){this.el.setStyle("position","relative");
+}if(!this.handles){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,D=hs.length;i<D;i++){if(hs[i]&&ps[hs[i]]){var E=ps[hs[i]];
+this[E]=new Roo.Resizable.Handle(this,E,this.disableTrackOver,this.transparent);}}this.corner=this.southeast;if(this.handles.indexOf("n")!=-1||this.handles.indexOf("w")!=-1||this.handles.indexOf("hd")!=-1){this.updateBox=true;}this.activeHandle=null;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);
+}this.addEvents({"beforeresize":true,"resizing":true,"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,constrainTo:undefined,resizeRegion:undefined,resizeTo:function(A,B){this.el.setSize(A,B);
+this.updateChildSize();this.fireEvent("resize",this,A,B,null);},startSizing:function(e,A){this.fireEvent("beforeresize",this,e);if(this.enabled){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",A.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();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');this.proxy.show();this.proxy.setBox(this.startBox);if(!this.dynamic){this.proxy.setStyle('visibility','visible');
+}}},onMouseDown:function(A,e){if(this.enabled){e.stopEvent();this.activeHandle=A;this.startSizing(e,A);}},onMouseUp:function(e){var A=this.resizeElement();this.resizing=false;this.handleOut();this.overlay.hide();this.proxy.hide();this.fireEvent("resize",this,A.width,A.height,e);
+},updateChildSize:function(){if(this.resizeChild){var el=this.el;var A=this.resizeChild;var B=this.adjustments;if(el.dom.offsetWidth){var b=el.getSize(true);A.setSize(b.width+B[0],b.height+B[1]);}if(Roo.isIE){setTimeout(function(){if(el.dom.offsetWidth){var b=el.getSize(true);
+A.setSize(b.width+B[0],b.height+B[1]);}},10);}}},snap:function(A,B,C){if(!B||!A){return A;}var D=A;var m=A%B;if(m>0){if(m>(B/2)){D=A+(B-m);}else{D=A-m;}}return Math.max(C,D);},resizeElement:function(){var A=this.proxy.getBox();if(this.updateBox){this.el.setBox(A,false,this.animate,this.duration,null,this.easing);
+}else{this.el.setSize(A.width,A.height,this.animate,this.duration,null,this.easing);}this.updateChildSize();if(!this.dynamic){this.proxy.hide();}return A;},constrain:function(v,A,m,mx){if(v-A<m){A=v-m;}else if(v-A>mx){A=mx-v;}return A;},onMouseMove:function(e){if(this.enabled){try{if(this.resizeRegion&&!this.resizeRegion.contains(e.getPoint())){return;
+}var A=this.curSize||this.startBox;var x=this.startBox.x,y=this.startBox.y;var ox=x,oy=y;var w=A.width,h=A.height;var ow=w,oh=h;var mw=this.minWidth,mh=this.minHeight;var B=this.maxWidth,C=this.maxHeight;var wi=this.widthIncrement;var hi=this.heightIncrement;
+var D=e.getXY();var E=-(this.startPoint[0]-Math.max(this.minX,D[0]));var F=-(this.startPoint[1]-Math.max(this.minY,D[1]));var G=this.activeHandle.position;switch(G){case "east":w+=E;w=Math.min(Math.max(mw,w),B);break;case "south":h+=F;h=Math.min(Math.max(mh,h),C);
+break;case "southeast":w+=E;h+=F;w=Math.min(Math.max(mw,w),B);h=Math.min(Math.max(mh,h),C);break;case "north":F=this.constrain(h,F,mh,C);y+=F;h-=F;break;case "hdrag":if(wi){var H=Math.abs(E);var I=(H%wi);if(I>(wi/2)){E=(E>0)?E-I+wi:E+I-wi;}else{E=(E>0)?E-I:E+I;
+}}x+=E;x=Math.max(this.minX,x);break;case "west":E=this.constrain(w,E,mw,B);x+=E;w-=E;break;case "northeast":w+=E;w=Math.min(Math.max(mw,w),B);F=this.constrain(h,F,mh,C);y+=F;h-=F;break;case "northwest":E=this.constrain(w,E,mw,B);F=this.constrain(h,F,mh,C);
+y+=F;h-=F;x+=E;w-=E;break;case "southwest":E=this.constrain(w,E,mw,B);h+=F;h=Math.min(Math.max(mh,h),C);x+=E;w-=E;break;}var sw=this.snap(w,wi,mw);var sh=this.snap(h,hi,mh);if(sw!=w||sh!=h){switch(G){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;}if(this.preserveRatio){switch(G){case "southeast":case "east":h=oh*(w/ow);h=Math.min(Math.max(mh,h),C);w=ow*(h/oh);break;case "south":w=ow*(h/oh);w=Math.min(Math.max(mw,w),B);
+h=oh*(w/ow);break;case "northeast":w=ow*(h/oh);w=Math.min(Math.max(mw,w),B);h=oh*(w/ow);break;case "north":var tw=w;w=ow*(h/oh);w=Math.min(Math.max(mw,w),B);h=oh*(w/ow);x+=(tw-w)/2;break;case "southwest":h=oh*(w/ow);h=Math.min(Math.max(mh,h),C);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),C);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),C);w=ow*(h/oh);y+=th-h;x+=tw-w;break;}}if(G=='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);},handleOver:function(){if(this.enabled){this.el.addClass("x-resizable-over");}},handleOut:function(){if(!this.resizing){this.el.removeClass("x-resizable-over");
+}},getEl:function(){return this.el;},getResizeChild:function(){return this.resizeChild;},groupHandler:function(){},destroy:function(A){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(A){this.el.update("");this.el.remove();}}});Roo.Resizable.positions={n:"north",s:"south",e:"east",w:"west",se:"southeast",sw:"southwest",nw:"northwest",ne:"northeast",hd:"hdrag"}
+;Roo.Resizable.Handle=function(rz,A,B,C){if(!this.tpl){var D=Roo.DomHelper.createTemplate({tag:"div",cls:"x-resizable-handle x-resizable-handle-{0}"});D.compile();Roo.Resizable.Handle.prototype.tpl=D;}this.position=A;this.rz=rz;var E=A=='hdrag'?'north':A;
+this.el=this.tpl.append(rz.el.dom,[E],true);if(A=='hdrag'){this.el.setStyle('cursor','pointer');}this.el.unselectable();if(C){this.el.setOpacity(0);}this.el.on("mousedown",this.onMouseDown,this);if(!B){this.el.on("mouseover",this.onMouseOver,this);this.el.on("mouseout",this.onMouseOut,this);
+}};Roo.Resizable.Handle.prototype={afterResize:function(rz){Roo.log('after?');},onMouseDown:function(e){this.rz.onMouseDown(this,e);},onMouseOver:function(e){this.rz.handleOver(this,e);},onMouseOut:function(e){this.rz.handleOut(this,e);}};
+// Roo/Editor.js
+Roo.Editor=function(A,B){Roo.Editor.superclass.constructor.call(this,B);this.field=A;this.addEvents({"beforestartedit":true,"startedit":true,"beforecomplete":true,"complete":true,"specialkey":true});};Roo.extend(Roo.Editor,Roo.Component,{value:"",alignment:"c-c?",shadow:"frame",constrain:false,completeOnEnter:false,cancelOnEsc:false,updateEl:false,onRender:function(ct,A){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(A,e){if(this.completeOnEnter&&e.getKey()==e.ENTER){e.stopEvent();
+this.completeEdit();return;}if(e.getKey()==e.ENTER){return;}if(this.cancelOnEsc&&e.getKey()==e.ESC){this.cancelEdit();return;}this.fireEvent('specialkey',A,e);},startEdit:function(el,A){if(this.editing){this.completeEdit();}this.boundEl=Roo.get(el);var v=A!==undefined?A: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();},setSize:function(w,h){this.field.setSize(w,h);
+if(this.el){this.el.sync();}},realign:function(){this.el.alignTo(this.boundEl,this.alignment);},completeEdit:function(A){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(A!==true){this.hide();
+}this.fireEvent("complete",this,v,this.startValue);}},onShow:function(){this.el.show();if(this.hideEl!==false){this.boundEl.hide();}this.field.show();if(Roo.isIE&&!this.fixIEFocus){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();}},cancelEdit:function(A){if(this.editing){this.setValue(this.startValue);if(A!==true){this.hide();}}},onBlur:function(){if(this.allowBlur!==true&&this.editing){this.completeEdit();
+}},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();}},setValue:function(v){this.field.setValue(v);
+},getValue:function(){return this.field.getValue();}});
+// Roo/BasicDialog.js
+Roo.BasicDialog=function(el,A){this.el=Roo.get(el);var dh=Roo.DomHelper;if(!this.el&&A&&A.autoCreate){if(typeof A.autoCreate=="object"){if(!A.autoCreate.id){A.autoCreate.id=el;}this.el=dh.append(document.body,A.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,A);this.proxy=el.createProxy("x-dlg-proxy");this.proxy.hide=this.hideAction;this.proxy.setOpacity(.5);this.proxy.hide();if(A.width){el.setWidth(A.width);
+}if(A.height){el.setHeight(A.height);}this.size=el.getSize();if(typeof A.x!="undefined"&&typeof A.y!="undefined"){this.xy=[A.x,A.y];}else{this.xy=el.getCenterXY(true);}this.header=el.child("> .x-dlg-hd");this.body=el.child("> .x-dlg-bd");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.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);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");
+if(this.autoScroll!==false&&!this.autoTabs){this.body.setStyle("overflow","auto");}this.toolbox=this.el.createChild({cls:"x-dlg-toolbox"});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 B=this.buttons;this.buttons=[];Roo.each(B,function(b){this.addButton(b);},this);}this.addEvents({"keydown":true,"move":true,"resize":true,"beforehide":true,"hide":true,"beforeshow":true,"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,setTitle:function(A){this.header.update(A);
+return this;},closeClick:function(){this.hide();},collapseClick:function(){this[this.collapsed?"expand":"collapse"]();},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());}},expand:function(){if(this.collapsed){this.collapsed=false;this.el.removeClass("x-dlg-collapsed");this.resizeTo(this.el.getWidth(),this.restoreHeight);}},initTabs:function(){var A=this.getTabs();
+while(A.getTab(0)){A.removeTab(0);}this.el.select(this.tabTag+'.x-dlg-tab').each(function(el){var B=el.dom;A.addTab(Roo.id(B),B.title);B.title="";});A.activate(0);return A;},beforeResize:function(){this.resizer.minHeight=Math.max(this.minHeight,this.getHeaderFooterHeight(true)+40);
+},onResize:function(){this.refreshSize();this.syncBodyHeight();this.adjustAssets();this.focus();this.fireEvent("resize",this,this.size.width,this.size.height);},onKeyDown:function(e){if(this.isVisible()){this.fireEvent("keydown",this,e);}},resizeTo:function(A,B){this.el.setSize(A,B);
+this.size={width:A,height:B};this.syncBodyHeight();if(this.fixedcenter){this.center();}if(this.isVisible()){this.constrainXY();this.adjustAssets();}this.fireEvent("resize",this,A,B);return this;},setContentSize:function(w,h){h+=this.getHeaderFooterHeight()+this.body.getMargins("tb");
+w+=this.body.getMargins("lr")+this.bwrap.getMargins("lr")+this.centerBg.getPadding("lr");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;},addKeyListener:function(A,fn,B){var C,D,E,F;
+if(typeof A=="object"&&!(A instanceof Array)){C=A["key"];D=A["shift"];E=A["ctrl"];F=A["alt"];}else{C=A;}var G=function(H,e){if((!D||e.shiftKey)&&(!E||e.ctrlKey)&&(!F||e.altKey)){var k=e.getKey();if(C instanceof Array){for(var i=0,I=C.length;i<I;i++){if(C[i]==k){fn.call(B||window,H,k,e);
+return;}}}else{if(k==C){fn.call(B||window,H,k,e);}}}};this.on("keydown",G);return this;},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;},addButton:function(A,B,C){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 D={handler:B,scope:C,minWidth:this.minButtonWidth,hideParent:true};if(typeof A=="string"){D.text=A;}else{if(A.tag){D.dhconfig=A;}else{Roo.apply(D,A);}}var fc=false;if((typeof(D.position)!='undefined')&&D.position<this.btnContainer.childNodes.length-1){D.position=Math.max(0,D.position);
+fc=this.btnContainer.childNodes[D.position];}var E=new Roo.Button(fc?this.btnContainer.insertBefore(document.createElement("td"),fc):this.btnContainer.appendChild(document.createElement("td")),D);this.syncBodyHeight();if(!this.buttons){this.buttons=[];}this.buttons.push(E);
+return E;},setDefaultButton:function(A){this.defaultButton=A;return this;},getHeaderFooterHeight:function(A){var B=0;if(this.header){B+=this.header.getHeight();}if(this.footer){var fm=this.footer.getMargins();B+=(this.footer.getHeight()+fm.top+fm.bottom);
+}B+=this.bwrap.getPadding("tb")+this.bwrap.getBorderWidth("tb");B+=this.centerBg.getPadding("tb");return B;},syncBodyHeight:function(){var bd=this.body,cb=this.centerBg,bw=this.bwrap;var A=this.size.height-this.getHeaderFooterHeight(false);bd.setHeight(A-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();}}},restoreState:function(){var A=Roo.state.Manager.get(this.stateId||(this.el.id+"-state"));if(A&&A.width){this.xy=[A.x,A.y];this.resizeTo(A.width,A.height);}return 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();},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));},show:function(A){if(this.fireEvent("beforeshow",this)===false){return;}if(this.syncHeightBeforeShow){this.syncBodyHeight();
+}else if(this.firstShow){this.firstShow=false;this.syncBodyHeight();}this.animateTarget=A||this.animateTarget;if(!this.el.isVisible()){this.beforeShow();if(this.animateTarget&&Roo.get(this.animateTarget)){this.animShow();}else{this.showEl();}}return this;
+},showEl:function(){this.proxy.hide();this.el.setXY(this.xy);this.el.show();this.adjustAssets(true);this.toFront();this.focus();if(Roo.isIE){this.el.repaint();}this.fireEvent("show",this);},focus:function(){if(this.defaultButton){this.defaultButton.focus();
+}else{this.focusEl.focus();}},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];var A=false;if(x+w>vw+s.left){x=vw-w;A=true;}if(y+h>vh+s.top){y=vh-h;A=true;}if(x<s.left){x=s.left;
+A=true;}if(y<s.top){y=s.top;A=true;}if(A){this.xy=[x,y];if(this.isVisible()){this.el.setLocation(x,y);this.adjustAssets();}}}},onDrag:function(){if(!this.proxyDrag){this.xy=this.el.getXY();this.adjustAssets();}},adjustAssets:function(A){var x=this.xy[0],y=this.xy[1];
+var w=this.size.width,h=this.size.height;if(A===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);
+}},adjustViewport:function(w,h){if(!w||!h){w=Roo.lib.Dom.getViewWidth();h=Roo.lib.Dom.getViewHeight();}this.viewSize=[w,h];if(this.modal&&this.mask.isVisible()){this.mask.setSize(w,h);this.mask.setSize(Roo.lib.Dom.getViewWidth(true),Roo.lib.Dom.getViewHeight(true));
+}if(this.isVisible()){this.constrainXY();}},destroy:function(A){if(this.isVisible()){this.animateTarget=null;this.hide();}Roo.EventManager.removeResizeListener(this.adjustViewport,this);if(this.tabs){this.tabs.destroy(A);}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,B=this.buttons.length;i<B;i++){this.buttons[i].destroy();}}this.el.removeAllListeners();if(A===true){this.el.update("");this.el.remove();}Roo.DialogManager.unregister(this);},startMove:function(){if(this.proxyDrag){this.proxy.show();
+}if(this.constraintoviewport!==false){this.dd.constrainTo(document.body,{right:this.shadowOffset,bottom:this.shadowOffset});}},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]);},toFront:function(){Roo.DialogManager.bringToFront(this);return this;},toBack:function(){Roo.DialogManager.sendToBack(this);return this;
+},center:function(){var xy=this.el.getCenterXY(true);this.moveTo(xy[0],xy[1]);return this;},moveTo:function(x,y){this.xy=[x,y];if(this.isVisible()){this.el.setXY(this.xy);this.adjustAssets();}return this;},alignTo:function(A,B,C){this.xy=this.el.getAlignToXY(A,B,C);
+if(this.isVisible()){this.el.setXY(this.xy);this.adjustAssets();}return this;},anchorTo:function(el,A,B,C){var D=function(){this.alignTo(el,A,B);};Roo.EventManager.onWindowResize(D,this);var tm=typeof C;if(tm!='undefined'){Roo.EventManager.on(window,'scroll',D,this,{buffer:tm=='number'?C:50}
+);}D.call(this);return this;},isVisible:function(){return this.el.isVisible();},animHide:function(A){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,[A]));
+},hide:function(A){if(this.fireEvent("beforehide",this)===false){return;}if(this.shadow){this.shadow.hide();}if(this.shim){this.shim.hide();}if(this.animateTarget&&Roo.get(this.animateTarget)){this.animHide(A);}else{this.el.hide();this.hideEl(A);}return this;
+},hideEl:function(A){this.proxy.hide();if(this.modal){this.mask.hide();Roo.get(document.body).removeClass("x-body-masked");}this.fireEvent("hide",this);if(typeof A=="function"){A();}},hideAction:function(){this.setLeft("-10000px");this.setTop("-10000px");
+this.setStyle("visibility","hidden");},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());},setZIndex:function(A){if(this.modal){this.mask.setStyle("z-index",A);
+}if(this.shim){this.shim.setStyle("z-index",++A);}if(this.shadow){this.shadow.setZIndex(++A);}this.el.setStyle("z-index",++A);if(this.proxy){this.proxy.setStyle("z-index",++A);}if(this.resizer){this.resizer.proxy.setStyle("z-index",++A);}this.lastZIndex=A;
+},getEl:function(){return this.el;}});Roo.DialogManager=function(){var A={};var B=[];var C=null;var D=function(d1,d2){return (!d1._lastAccess||d1._lastAccess<d2._lastAccess)?-1:1;};var E=function(){B.sort(D);var F=Roo.DialogManager.zseed;for(var i=0,G=B.length;
+i<G;i++){var H=B[i];if(H){H.setZIndex(F+(i*10));}}};return {zseed:9000,register:function(F){A[F.id]=F;B.push(F);},unregister:function(F){delete A[F.id];var i=0;var G=0;if(!B.indexOf){for(i=0,G=B.length;i<G;i++){if(B[i]==F){B.splice(i,1);return;}}}else{i=B.indexOf(F);
+if(i!=-1){B.splice(i,1);}}},get:function(id){return typeof id=="object"?id:A[id];},bringToFront:function(F){F=this.get(F);if(F!=C){C=F;F._lastAccess=new Date().getTime();E();}return F;},sendToBack:function(F){F=this.get(F);F._lastAccess=-(new Date().getTime());
+E();return F;},hideAll:function(){for(var id in A){if(A[id]&&typeof A[id]!="function"&&A[id].isVisible()){A[id].hide();}}}};}();Roo.LayoutDialog=function(el,A){var B=A;if(typeof(A)=='undefined'){B=Roo.apply({},el);el=Roo.get(document.body||document.documentElement).createChild();
+}B.autoTabs=false;Roo.LayoutDialog.superclass.constructor.call(this,el,B);this.body.setStyle({overflow:"hidden",position:"relative"});this.layout=new Roo.BorderLayout(this.body.dom,B);this.layout.monitorWindowResize=false;this.el.addClass("x-dlg-auto-layout");
+this.center=Roo.BasicDialog.prototype.center;this.on("show",this.layout.layout,this.layout,true);if(B.items){var C=B.items;delete B.items;Roo.each(C,this.addxtype,this);}};Roo.extend(Roo.LayoutDialog,Roo.BasicDialog,{endUpdate:function(){this.layout.endUpdate();
+},beginUpdate:function(){this.layout.beginUpdate();},getLayout:function(){return this.layout;},showEl:function(){Roo.LayoutDialog.superclass.showEl.apply(this,arguments);if(Roo.isIE7){this.layout.layout();}},syncBodyHeight:function(){Roo.LayoutDialog.superclass.syncBodyHeight.call(this);
+if(this.layout){this.layout.layout();}},addxtype:function(c){return this.layout.addxtype(c);}});
+// Roo/MessageBox.js
+Roo.MessageBox=function(){var A,B,C,D;var E,F,G,H,I,pp;var J,K,L;var M=function(Q){A.hide();Roo.callback(B.fn,B.scope||window,[Q,K.dom.value],1);};var N=function(){if(B&&B.cls){A.el.removeClass(B.cls);}if(D){Roo.TaskMgr.stop(D);D=null;}};var O=function(b){var Q=0;
+if(!b){J["ok"].hide();J["cancel"].hide();J["yes"].hide();J["no"].hide();A.footer.dom.style.display='none';return Q;}A.footer.dom.style.display='';for(var k in J){if(typeof J[k]!="function"){if(b[k]){J[k].show();J[k].setText(typeof b[k]=="string"?b[k]:Roo.MessageBox.buttonText[k]);
+Q+=J[k].el.getWidth()+15;}else{J[k].hide();}}}return Q;};var P=function(d,k,e){if(B&&B.closable!==false){A.hide();}if(e){e.stopEvent();}};return {getDialog:function(){if(!A){A=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(B&&B.buttons&&B.buttons.no&&!B.buttons.cancel){M("no");
+}else{M("cancel");}}});A.on("hide",N);C=A.mask;A.addKeyListener(27,P);J={};var bt=this.buttonText;J["ok"]=A.addButton(bt["ok"],M.createCallback("ok"));J["yes"]=A.addButton(bt["yes"],M.createCallback("yes"));J["no"]=A.addButton(bt["no"],M.createCallback("no"));
+J["cancel"]=A.addButton(bt["cancel"],M.createCallback("cancel"));E=A.body.createChild({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>'}
+);F=E.dom.firstChild;G=Roo.get(E.dom.childNodes[2]);G.enableDisplayMode();G.addKeyListener([10,13],function(){if(A.isVisible()&&B&&B.buttons){if(B.buttons.ok){M("ok");}else if(B.buttons.yes){M("yes");}}});H=Roo.get(E.dom.childNodes[3]);H.enableDisplayMode();
+I=Roo.get(E.dom.childNodes[4]);I.enableDisplayMode();var pf=I.dom.firstChild;if(pf){pp=Roo.get(pf.firstChild);pp.setHeight(pf.offsetHeight);}}return A;},updateText:function(Q){if(!A.isVisible()&&!B.width){A.resizeTo(this.maxWidth,100);}F.innerHTML=Q||'&#160;';
+var cw=Math.max(F.offsetWidth,F.parentNode.scrollWidth);var w=Math.max(Math.min(B.width||cw,this.maxWidth),Math.max(B.minWidth||this.minWidth,L));if(B.prompt){K.setWidth(w);}if(A.isVisible()){A.fixedcenter=false;}if(E.getHeight()>(Roo.lib.Dom.getViewHeight()-100)){E.setHeight(Roo.lib.Dom.getViewHeight()-100);
+E.dom.style.overflowY='auto'+(Roo.isIE?'':' !important');}else{E.dom.style.height='';E.dom.style.overflowY='';}if(cw>w){E.dom.style.get='auto'+(Roo.isIE?'':' !important');}else{E.dom.style.overflowX='';}A.setContentSize(w,E.getHeight());if(A.isVisible()){A.fixedcenter=true;
+}return this;},updateProgress:function(Q,R){if(R){this.updateText(R);}if(pp){pp.setWidth(Math.floor(Q*I.dom.firstChild.offsetWidth));}return this;},isVisible:function(){return A&&A.isVisible();},hide:function(){if(this.isVisible()){A.hide();}},show:function(Q){if(this.isVisible()){this.hide();
+Roo.log("[Roo.Messagebox] Show called while message displayed:");Roo.log("Old Dialog Message:"+F.innerHTML);Roo.log("New Dialog Message:"+Q.msg)}var d=this.getDialog();B=Q;d.setTitle(B.title||"&#160;");d.close.setDisplayed(B.closable!==false);K=G;B.prompt=B.prompt||(B.multiline?true:false);
+if(B.prompt){if(B.multiline){G.hide();H.show();H.setHeight(typeof B.multiline=="number"?B.multiline:this.defaultTextHeight);K=H;}else{G.show();H.hide();}}else{G.hide();H.hide();}I.setDisplayed(B.progress===true);this.updateProgress(0);K.dom.value=B.value||"";
+if(B.prompt){A.setDefaultButton(K);}else{var bs=B.buttons;var db=null;if(bs&&bs.ok){db=J["ok"];}else if(bs&&bs.yes){db=J["yes"];}A.setDefaultButton(db);}L=O(B.buttons);this.updateText(B.msg);if(B.cls){d.el.addClass(B.cls);}d.proxyDrag=B.proxyDrag===true;d.modal=B.modal!==false;
+d.mask=B.modal!==false?C:false;if(!d.isVisible()){document.body.appendChild(A.el.dom);d.animateTarget=null;d.show(Q.animEl);}return this;},progress:function(Q,R){this.show({title:Q,msg:R,buttons:false,progress:true,closable:false,minWidth:this.minProgressWidth,modal:true}
+);return this;},alert:function(Q,R,fn,S){this.show({title:Q,msg:R,buttons:this.OK,fn:fn,scope:S,modal:true});return this;},wait:function(Q,R){this.show({title:R,msg:Q,buttons:false,closable:false,progress:true,modal:true,width:300,wait:true});D=Roo.TaskMgr.start({run:function(i){Roo.MessageBox.updateProgress(((((i+20)%20)+1)*5)*.01);
+},interval:1000});return this;},confirm:function(Q,R,fn,S){this.show({title:Q,msg:R,buttons:this.YESNO,fn:fn,scope:S,modal:true});return this;},prompt:function(Q,R,fn,S,T){this.show({title:Q,msg:R,buttons:this.OKCANCEL,fn:fn,minWidth:250,scope:S,prompt:true,multiline:T,modal:true}
+);return this;},OK:{ok:true},YESNO:{yes:true,no:true},OKCANCEL:{ok:true,cancel:true},YESNOCANCEL:{yes:true,no:true,cancel:true},defaultTextHeight:75,maxWidth:600,minWidth:100,minProgressWidth:250,buttonText:{ok:"OK",cancel:"Cancel",yes:"Yes",no:"No"}};}();
+Roo.Msg=Roo.MessageBox;
+// Roo/QuickTips.js
+Roo.QuickTips=function(){var el,A,B,C,tm,D,E,F={},G,H=null,I,J;var ce,bd,xy,dd;var K=false,L=true,M=false;var N=1,O=1,P=1,Q=[];var R=function(e){if(L){return;}var t=e.getTarget();if(!t||t.nodeType!==1||t==document||t==document.body){return;}if(ce&&t==ce.el){clearTimeout(O);
+return;}if(t&&F[t.id]){F[t.id].el=t;N=W.defer(tm.showDelay,tm,[F[t.id]]);return;}var a,et=Roo.fly(t);var ns=D.namespace;if(tm.interceptTitles&&t.title){a=t.title;t.qtip=a;t.removeAttribute("title");e.preventDefault();}else{a=t.qtip||et.getAttributeNS(ns,D.attribute)||et.getAttributeNS(D.alt_namespace,D.attribute);
+}if(a){N=W.defer(tm.showDelay,tm,[{el:t,text:a,width:et.getAttributeNS(ns,D.width),autoHide:et.getAttributeNS(ns,D.hide)!="user",title:et.getAttributeNS(ns,D.title),cls:et.getAttributeNS(ns,D.cls)}]);}};var S=function(e){clearTimeout(N);var t=e.getTarget();
+if(t&&ce&&ce.el==t&&(tm.autoHide&&ce.autoHide!==false)){O=setTimeout(Y,tm.hideDelay);}};var T=function(e){if(L){return;}xy=e.getXY();xy[1]+=18;if(tm.trackMouse&&ce){el.setXY(xy);}};var U=function(e){clearTimeout(N);clearTimeout(O);if(!e.within(el)){if(tm.hideOnClick){Y();
+tm.disable();tm.enable.defer(100,tm);}}};var V=function(){return 2;};var W=function(o){if(L){return;}clearTimeout(P);ce=o;if(H){el.removeClass(H);H=null;}if(ce.cls){el.addClass(ce.cls);H=ce.cls;}if(ce.title){C.update(ce.title);C.show();}else{C.update('');
+C.hide();}el.dom.style.width=tm.maxWidth+'px';B.update(o.text);var p=V(),w=ce.width;if(!w){var td=B.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;}}el.setWidth(parseInt(w,10)+p);
+if(ce.autoHide===false){E.setDisplayed(true);if(dd){dd.unlock();}}else{E.setDisplayed(false);if(dd){dd.lock();}}if(xy){el.avoidY=xy[1]-18;el.setXY(xy);}if(tm.animate){el.setOpacity(.1);el.setStyle("visibility","visible");el.fadeIn({callback:X});}else{X();
+}};var X=function(){if(ce){el.show();G.enable();if(tm.autoDismiss&&ce.autoHide!==false){P=setTimeout(Y,tm.autoDismissDelay);}}};var Y=function(a){clearTimeout(P);clearTimeout(O);ce=null;if(el.isVisible()){G.disable();if(a!==true&&tm.animate){el.fadeOut({callback:Z}
+);}else{Z();}}};var Z=function(){el.hide();if(H){el.removeClass(H);H=null;}};return {minWidth:40,maxWidth:300,interceptTitles:false,trackMouse:false,hideOnClick:true,showDelay:500,hideDelay:200,autoHide:true,autoDismiss:true,autoDismissDelay:5000,animate:false,title:'',text:'',cls:'',width:null,init:function(){tm=Roo.QuickTips;
+D=tm.tagConfig;if(!M){if(!Roo.isReady){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};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>');
+C=el.child('h3');C.enableDisplayMode("block");A=el.child('div.x-tip-bd');B=el.child('div.x-tip-bd-inner');E=el.child('div.x-tip-close');E.enableDisplayMode("block");E.on("click",Y);var d=Roo.get(document);d.on("mousedown",U);d.on("mouseover",R);d.on("mouseout",S);
+d.on("mousemove",T);G=d.addKeyListener(27,Y);G.disable();if(Roo.dd.DD){dd=el.initDD("default",null,{onDrag:function(){el.sync();}});dd.setHandleElId(C.id);dd.lock();}M=true;}this.enable();},register:function(a){var cs=a instanceof Array?a:arguments;for(var i=0,b=cs.length;
+i<b;i++){var c=cs[i];var d=c.target;if(d){if(d instanceof Array){for(var j=0,e=d.length;j<e;j++){F[d[j]]=c;}}else{F[typeof d=='string'?d:Roo.id(d)]=c;}}}},unregister:function(el){delete F[Roo.id(el)];},enable:function(){if(M&&L){Q.pop();if(Q.length<1){L=false;
+}}},disable:function(){L=true;clearTimeout(N);clearTimeout(O);clearTimeout(P);if(ce){Y(true);}Q.push(1);},isEnabled:function(){return !L;},tagConfig:{namespace:"roo",alt_namespace:"ext",attribute:"qtip",width:"width",target:"target",title:"qtitle",hide:"hide",cls:"qclass"}
+};}();Roo.QuickTips.tips=Roo.QuickTips.register;
+// Roo/tree/TreePanel.js
+Roo.tree.TreePanel=function(el,A){var B=false;var C=false;if(A.root){B=A.root;delete A.root;}if(A.loader){C=A.loader;delete A.loader;}Roo.apply(this,A);Roo.tree.TreePanel.superclass.constructor.call(this);this.el=Roo.get(el);this.el.addClass('x-tree');if(B){this.setRootNode(Roo.factory(B,Roo.tree));
+}if(C){this.loader=Roo.factory(C,Roo.tree);}this.id=this.el.id;this.addEvents({"beforeload":true,"load":true,"textchange":true,"beforeexpand":true,"beforecollapse":true,"expand":true,"disabledchange":true,"collapse":true,"beforeclick":true,"checkchange":true,"click":true,"dblclick":true,"contextmenu":true,"beforechildrenrendered":true,"startdrag":true,"enddrag":true,"dragdrop":true,"beforenodedrop":true,"nodedrop":true,"nodedragover":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,restrictExpand:function(A){var p=A.parentNode;
+if(p){if(p.expandedChild&&p.expandedChild.parentNode==p){p.expandedChild.collapse();}p.expandedChild=A;}},setRootNode:function(A){Roo.tree.TreePanel.superclass.setRootNode.call(this,A);if(!this.rootVisible){A.ui=new Roo.tree.RootTreeNodeUI(A);}return A;},getEl:function(){return this.el;
+},getLoader:function(){return this.loader;},expandAll:function(){this.root.expand(true);},collapseAll:function(){this.root.collapse(true);},getSelectionModel:function(){if(!this.selModel){this.selModel=new Roo.tree.DefaultSelectionModel();}return this.selModel;
+},getChecked:function(a,A){A=A||this.root;var r=[];var f=function(){if(this.attributes.checked){r.push(!a?this:(a=='id'?this.id:this.attributes[a]));}};A.cascade(f);return r;},expandPath:function(A,B,C){B=B||"id";var D=A.split(this.pathSeparator);var E=this.root;
+if(E.attributes[B]!=D[1]){if(C){C(false,null);}return;}var F=1;var f=function(){if(++F==D.length){if(C){C(true,E);}return;}var c=E.findChild(B,D[F]);if(!c){if(C){C(false,E);}return;}E=c;c.expand(false,false,f);};E.expand(false,false,f);},selectPath:function(A,B,C){B=B||"id";
+var D=A.split(this.pathSeparator);var v=D.pop();if(D.length>0){var f=function(E,F){if(E&&F){var n=F.findChild(B,v);if(n){n.select();if(C){C(true,n);}}else if(C){C(false,n);}}else{if(C){C(false,n);}}};this.expandPath(D.join(this.pathSeparator),B,f);}else{this.root.select();
+if(C){C(true,this.root);}}},getTreeEl:function(){return this.el;},render:function(){if(this.innerCt){return this;}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){this.dropZone=new Roo.tree.TreeDropZone(this,this.dropConfig||{ddGroup:this.ddGroup||"TreeDD",appendOnly:this.ddAppendOnly===true});}if((this.enableDD||this.enableDrag)&&!this.dragZone){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;}});
+// Roo/tree/TreeSelectionModel.js
+Roo.tree.DefaultSelectionModel=function(A){this.selNode=null;this.addEvents({"selectionchange":true,"beforeselect":true});Roo.tree.DefaultSelectionModel.superclass.constructor.call(this,A);};Roo.extend(Roo.tree.DefaultSelectionModel,Roo.util.Observable,{init:function(A){this.tree=A;
+A.getTreeEl().on("keydown",this.onKeyDown,this);A.on("click",this.onNodeClick,this);},onNodeClick:function(A,e){if(e.ctrlKey&&this.selNode==A){this.unselect(A);return;}this.select(A);},select:function(A){var B=this.selNode;if(B!=A&&this.fireEvent('beforeselect',this,A,B)!==false){if(B){B.ui.onSelectedChange(false);
+}this.selNode=A;A.ui.onSelectedChange(true);this.fireEvent("selectionchange",this,A,B);}return A;},unselect:function(A){if(this.selNode==A){this.clearSelections();}},clearSelections:function(){var n=this.selNode;if(n){n.ui.onSelectedChange(false);this.selNode=null;
+this.fireEvent("selectionchange",this,null);}return n;},getSelectedNode:function(){return this.selNode;},isSelected:function(A){return this.selNode==A;},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);
+}return null;},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 A=null;s.parentNode.bubble(function(){if(this.nextSibling){A=this.getOwnerTree().selModel.select(this.nextSibling);
+return false;}});return A;}return null;},onKeyDown:function(e){var s=this.selNode||this.lastSelNode;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;};}});Roo.tree.MultiSelectionModel=function(){this.selNodes=[];this.selMap={};this.addEvents({"selectionchange":true});Roo.tree.MultiSelectionModel.superclass.constructor.call(this,cfg);};Roo.extend(Roo.tree.MultiSelectionModel,Roo.util.Observable,{init:function(A){this.tree=A;
+A.getTreeEl().on("keydown",this.onKeyDown,this);A.on("click",this.onNodeClick,this);},onNodeClick:function(A,e){this.select(A,e,e.ctrlKey);},select:function(A,e,B){if(B!==true){this.clearSelections(true);}if(this.isSelected(A)){this.lastSelNode=A;return A;
+}this.selNodes.push(A);this.selMap[A.id]=A;this.lastSelNode=A;A.ui.onSelectedChange(true);this.fireEvent("selectionchange",this,this.selNodes);return A;},unselect:function(A){if(this.selMap[A.id]){A.ui.onSelectedChange(false);var sn=this.selNodes;var B=-1;
+if(sn.indexOf){B=sn.indexOf(A);}else{for(var i=0,C=sn.length;i<C;i++){if(sn[i]==A){B=i;break;}}}if(B!=-1){this.selNodes.splice(B,1);}delete this.selMap[A.id];this.fireEvent("selectionchange",this,this.selNodes);}},clearSelections:function(A){var sn=this.selNodes;
+if(sn.length>0){for(var i=0,B=sn.length;i<B;i++){sn[i].ui.onSelectedChange(false);}this.selNodes=[];this.selMap={};if(A!==true){this.fireEvent("selectionchange",this,this.selNodes);}}},isSelected:function(A){return this.selMap[A.id]?true:false;},getSelectedNodes:function(){return this.selNodes;
+},onKeyDown:Roo.tree.DefaultSelectionModel.prototype.onKeyDown,selectNext:Roo.tree.DefaultSelectionModel.prototype.selectNext,selectPrevious:Roo.tree.DefaultSelectionModel.prototype.selectPrevious});
+// Roo/tree/TreeNode.js
+Roo.tree.TreeNode=function(A){A=A||{};if(typeof A=="string"){A={text:A};}this.childrenRendered=false;this.rendered=false;Roo.tree.TreeNode.superclass.constructor.call(this,A);this.expanded=A.expanded===true;this.isTarget=A.isTarget!==false;this.draggable=A.draggable!==false&&A.allowDrag!==false;
+this.allowChildren=A.allowChildren!==false&&A.allowDrop!==false;this.text=A.text;this.disabled=A.disabled===true;this.addEvents({"textchange":true,"beforeexpand":true,"beforecollapse":true,"expand":true,"disabledchange":true,"collapse":true,"beforeclick":true,"checkchange":true,"click":true,"dblclick":true,"contextmenu":true,"beforechildrenrendered":true}
+);var B=this.attributes.uiProvider||Roo.tree.TreeNodeUI;this.ui=new B(this);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,isExpanded:function(){return this.expanded;},getUI:function(){return this.ui;},setFirstChild:function(A){var of=this.firstChild;Roo.tree.TreeNode.superclass.setFirstChild.call(this,A);if(this.childrenRendered&&of&&A!=of){of.renderIndent(true,true);
+}if(this.rendered){this.renderIndent(true,true);}},setLastChild:function(A){var ol=this.lastChild;Roo.tree.TreeNode.superclass.setLastChild.call(this,A);if(this.childrenRendered&&ol&&A!=ol){ol.renderIndent(true,true);}if(this.rendered){this.renderIndent(true,true);
+}},appendChild:function(){var A=Roo.tree.TreeNode.superclass.appendChild.apply(this,arguments);if(A&&this.childrenRendered){A.render();}this.ui.updateExpandIcon();return A;},removeChild:function(A){this.ownerTree.getSelectionModel().unselect(A);Roo.tree.TreeNode.superclass.removeChild.apply(this,arguments);
+if(this.childrenRendered){A.ui.remove();}if(this.childNodes.length<1){this.collapse(false,false);}else{this.ui.updateExpandIcon();}if(!this.firstChild){this.childrenRendered=false;}return A;},insertBefore:function(A,B){var C=Roo.tree.TreeNode.superclass.insertBefore.apply(this,arguments);
+if(C&&B&&this.childrenRendered){A.render();}this.ui.updateExpandIcon();return C;},setText:function(A){var B=this.text;this.text=A;this.attributes.text=A;if(this.rendered){this.ui.onTextChange(this,A,B);}this.fireEvent("textchange",this,A,B);},select:function(){this.getOwnerTree().getSelectionModel().select(this);
+},unselect:function(){this.getOwnerTree().getSelectionModel().unselect(this);},isSelected:function(){return this.getOwnerTree().getSelectionModel().isSelected(this);},expand:function(A,B,C){if(!this.expanded){if(this.fireEvent("beforeexpand",this,A,B)===false){return;
+}if(!this.childrenRendered){this.renderChildren();}this.expanded=true;if(!this.isHiddenRoot()&&(this.getOwnerTree().animate&&B!==false)||B){this.ui.animExpand(function(){this.fireEvent("expand",this);if(typeof C=="function"){C(this);}if(A===true){this.expandChildNodes(true);
+}}.createDelegate(this));return;}else{this.ui.expand();this.fireEvent("expand",this);if(typeof C=="function"){C(this);}}}else{if(typeof C=="function"){C(this);}}if(A===true){this.expandChildNodes(true);}},isHiddenRoot:function(){return this.isRoot&&!this.getOwnerTree().rootVisible;
+},collapse:function(A,B){if(this.expanded&&!this.isHiddenRoot()){if(this.fireEvent("beforecollapse",this,A,B)===false){return;}this.expanded=false;if((this.getOwnerTree().animate&&B!==false)||B){this.ui.animCollapse(function(){this.fireEvent("collapse",this);
+if(A===true){this.collapseChildNodes(true);}}.createDelegate(this));return;}else{this.ui.collapse();this.fireEvent("collapse",this);}}if(A===true){var cs=this.childNodes;for(var i=0,C=cs.length;i<C;i++){cs[i].collapse(true,false);}}},delayedExpand:function(A){if(!this.expandProcId){this.expandProcId=this.expand.defer(A,this);
+}},cancelExpand:function(){if(this.expandProcId){clearTimeout(this.expandProcId);}this.expandProcId=false;},toggle:function(){if(this.expanded){this.collapse();}else{this.expand();}},ensureVisible:function(A){var B=this.getOwnerTree();B.expandPath(this.parentNode.getPath(),false,function(){B.getTreeEl().scrollChildIntoView(this.ui.anchor);
+Roo.callback(A);}.createDelegate(this));},expandChildNodes:function(A){var cs=this.childNodes;for(var i=0,B=cs.length;i<B;i++){cs[i].expand(A);}},collapseChildNodes:function(A){var cs=this.childNodes;for(var i=0,B=cs.length;i<B;i++){cs[i].collapse(A);}},disable:function(){this.disabled=true;
+this.unselect();if(this.rendered&&this.ui.onDisableChange){this.ui.onDisableChange(this,true);}this.fireEvent("disabledchange",this,true);},enable:function(){this.disabled=false;if(this.rendered&&this.ui.onDisableChange){this.ui.onDisableChange(this,false);
+}this.fireEvent("disabledchange",this,false);},renderChildren:function(A){if(A!==false){this.fireEvent("beforechildrenrendered",this);}var cs=this.childNodes;for(var i=0,B=cs.length;i<B;i++){cs[i].render(true);}this.childrenRendered=true;},sort:function(fn,A){Roo.tree.TreeNode.superclass.sort.apply(this,arguments);
+if(this.childrenRendered){var cs=this.childNodes;for(var i=0,B=cs.length;i<B;i++){cs[i].render(true);}}},render:function(A){this.ui.render(A);if(!this.rendered){this.rendered=true;if(this.expanded){this.expanded=false;this.expand(false,false);}}},renderIndent:function(A,B){if(B){this.ui.childIndent=null;
+}this.ui.renderIndent();if(A===true&&this.childrenRendered){var cs=this.childNodes;for(var i=0,C=cs.length;i<C;i++){cs[i].renderIndent(true,B);}}}});
+// Roo/tree/AsyncTreeNode.js
+Roo.tree.AsyncTreeNode=function(A){this.loaded=false;this.loading=false;Roo.tree.AsyncTreeNode.superclass.constructor.apply(this,arguments);this.addEvents({'beforeload':true,'load':true});};Roo.extend(Roo.tree.AsyncTreeNode,Roo.tree.TreeNode,{expand:function(A,B,C){if(this.loading){var D;
+var f=function(){if(!this.loading){clearInterval(D);this.expand(A,B,C);}}.createDelegate(this);D=setInterval(f,200);return;}if(!this.loaded){if(this.fireEvent("beforeload",this)===false){return;}this.loading=true;this.ui.beforeLoad(this);var E=this.loader||this.attributes.loader||this.getOwnerTree().getLoader();
+if(E){E.load(this,this.loadComplete.createDelegate(this,[A,B,C]));return;}}Roo.tree.AsyncTreeNode.superclass.expand.call(this,A,B,C);},isLoading:function(){return this.loading;},loadComplete:function(A,B,C){this.loading=false;this.loaded=true;this.ui.afterLoad(this);
+this.fireEvent("load",this);this.expand(A,B,C);},isLoaded:function(){return this.loaded;},hasChildNodes:function(){if(!this.isLeaf()&&!this.loaded){return true;}else{return Roo.tree.AsyncTreeNode.superclass.hasChildNodes.call(this);}},reload:function(A){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,A);}});
+// Roo/tree/TreeNodeUI.js
+Roo.tree.TreeNodeUI=function(A){this.node=A;this.rendered=false;this.animating=false;this.emptyIcon=Roo.BLANK_IMAGE_URL;};Roo.tree.TreeNodeUI.prototype={removeChild:function(A){if(this.rendered){this.ctNode.removeChild(A.ui.getEl());}},beforeLoad:function(){this.addClass("x-tree-node-loading");
+},afterLoad:function(){this.removeClass("x-tree-node-loading");},onTextChange:function(A,B,C){if(this.rendered){this.textNode.innerHTML=B;}},onDisableChange:function(A,B){this.disabled=B;if(B){this.addClass("x-tree-node-disabled");}else{this.removeClass("x-tree-node-disabled");
+}},onSelectedChange:function(A){if(A){this.focus();this.addClass("x-tree-selected");}else{this.removeClass("x-tree-selected");}},onMove:function(A,B,C,D,E,F){this.childIndent=null;if(this.rendered){var G=D.ui.getContainer();if(!G){this.holder=document.createElement("div");
+this.holder.appendChild(this.wrap);return;}var H=F?F.ui.getEl():null;if(H){G.insertBefore(this.wrap,H);}else{G.appendChild(this.wrap);}this.node.renderIndent(true);}},addClass:function(A){if(this.elNode){Roo.fly(this.elNode).addClass(A);}},removeClass:function(A){if(this.elNode){Roo.fly(this.elNode).removeClass(A);
+}},remove:function(){if(this.rendered){this.holder=document.createElement("div");this.holder.appendChild(this.wrap);}},fireEvent:function(){return this.node.fireEvent.apply(this.node,arguments);},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){el.setStyle("text-decoration","none");}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);
+}el.on("contextmenu",this.onContextMenu,this);var A=Roo.fly(this.iconNode);A.on("click",this.onClick,this);A.on("dblclick",this.onDblClick,this);A.on("contextmenu",this.onContextMenu,this);E.on(this.ecNode,"click",this.ecClick,this,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}
+);}},getDDHandles:function(){return [this.iconNode,this.textNode];},hide:function(){if(this.rendered){this.wrap.style.display="none";}},show:function(){if(this.rendered){this.wrap.style.display="";}},onContextMenu:function(e){if(this.node.hasListener("contextmenu")||this.node.getOwnerTree().hasListener("contextmenu")){e.preventDefault();
+this.focus();this.fireEvent("contextmenu",this.node,e);}},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();}},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);},onCheckChange:function(){var A=this.checkbox.checked;this.node.attributes.checked=A;this.fireEvent('checkchange',this.node,A);
+},ecClick:function(e){if(!this.animating&&this.node.hasChildNodes()){this.node.toggle();}},startDrop:function(){this.dropping=true;},endDrop:function(){setTimeout(function(){this.dropping=false;}.createDelegate(this),50);},expand:function(){this.updateExpandIcon();
+this.ctNode.style.display="";},focus:function(){if(!this.node.preventHScroll){try{this.anchor.focus();}catch(e){}}else if(!Roo.isIE){try{var A=this.node.getOwnerTree().getTreeEl().dom;var l=A.scrollLeft;this.anchor.focus();A.scrollLeft=l;}catch(e){}}},toggleCheck:function(A){var cb=this.checkbox;
+if(cb){cb.checked=(A===undefined?!cb.checked:A);}},blur:function(){try{this.anchor.blur();}catch(e){}},animExpand:function(A){var ct=Roo.get(this.ctNode);ct.stopFx();if(!this.node.hasChildNodes()){this.updateExpandIcon();this.ctNode.style.display="";Roo.callback(A);
+return;}this.animating=true;this.updateExpandIcon();ct.slideIn('t',{callback:function(){this.animating=false;Roo.callback(A);},scope:this,duration:this.node.ownerTree.duration||.25});},highlight:function(){var A=this.node.getOwnerTree();Roo.fly(this.wrap).highlight(A.hlColor||"C3DAF9",{endColor:A.hlBaseColor}
+);},collapse:function(){this.updateExpandIcon();this.ctNode.style.display="none";},animCollapse:function(A){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(A);},scope:this,duration:this.node.ownerTree.duration||.25});},getContainer:function(){return this.ctNode;},getEl:function(){return this.wrap;},appendDDGhost:function(A){A.appendChild(this.elNode.cloneNode(true));},getDDRepairXY:function(){return Roo.lib.Dom.getXY(this.iconNode);
+},onRender:function(){this.render();},render:function(A){var n=this.node,a=n.attributes;var B=n.parentNode?n.parentNode.ui.getContainer():n.ownerTree.innerCt.dom;if(!this.rendered){this.rendered=true;this.renderElements(n,a,B,A);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(A===true){B.appendChild(this.wrap);}}},renderElements:function(n,a,A,B){this.indentMarkup=n.parentNode?n.parentNode.ui.getChildIndent():'';var t=n.getOwnerTree();
+var C=t.renderer?t.renderer(n.attributes):Roo.util.Format.htmlEncode(n.text);if(typeof(n.attributes.html)!='undefined'){C=n.attributes.html;}var D=t.rendererTip?t.rendererTip(n.attributes):C;var cb=typeof a.checked=='boolean';var E=a.href?a.href:Roo.isGecko?"":"#";
+var F=['<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="',E,'" tabIndex="1" ',a.hrefTarget?' target="'+a.hrefTarget+'"':"",'><span unselectable="on" qtip="',D,'">',C,"</span></a></div>",'<ul class="x-tree-node-ct" style="display:none;"></ul>',"</li>"];
+if(B!==true&&n.nextSibling&&n.nextSibling.ui.getEl()){this.wrap=Roo.DomHelper.insertHtml("beforeBegin",n.nextSibling.ui.getEl(),F.join(""));}else{this.wrap=Roo.DomHelper.insertHtml("beforeEnd",A,F.join(""));}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 G=3;if(cb){this.checkbox=cs[3];G++;}this.anchor=cs[G];this.textNode=cs[G].firstChild;},getAnchor:function(){return this.anchor;},getTextEl:function(){return this.textNode;
+},getIconEl:function(){return this.iconNode;},isChecked:function(){return this.checkbox?this.checkbox.checked:false;},updateExpandIcon:function(){if(this.rendered){var n=this.node,c1,c2;var A=n.isLast()?"x-tree-elbow-end":"x-tree-elbow";var B=n.hasChildNodes();
+if(B){if(n.expanded){A+="-minus";c1="x-tree-node-collapsed";c2="x-tree-node-expanded";}else{A+="-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{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 C="x-tree-ec-icon "+A;if(this.ecc!=C){this.ecNode.className=C;
+this.ecc=C;}}},getChildIndent:function(){if(!this.childIndent){var A=[];var p=this.node;while(p){if(!p.isRoot||(p.isRoot&&p.ownerTree.rootVisible)){if(!p.isLast()){A.unshift('<img src="'+this.emptyIcon+'" class="x-tree-elbow-line" />');}else{A.unshift('<img src="'+this.emptyIcon+'" class="x-tree-icon" />');
+}}p=p.parentNode;}this.childIndent=A.join("");}return this.childIndent;},renderIndent:function(){if(this.rendered){var A="";var p=this.node.parentNode;if(p){A=p.ui.getChildIndent();}if(this.indentMarkup!=A){this.indentNode.innerHTML=A;this.indentMarkup=A;
+}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 A=this.node.ownerTree.innerCt.dom;
+this.node.expanded=true;A.innerHTML='<div class="x-tree-root-node"></div>';this.wrap=this.ctNode=A.firstChild;}},collapse:function(){},expand:function(){}});
+// Roo/tree/TreeLoader.js
+Roo.tree.TreeLoader=function(A){this.baseParams={};this.requestMethod="POST";Roo.apply(this,A);this.addEvents({beforeload:true,load:true,loadexception:true,create:true});Roo.tree.TreeLoader.superclass.constructor.call(this);};Roo.extend(Roo.tree.TreeLoader,Roo.util.Observable,{uiProviders:{}
+,clearOnLoad:true,root:false,queryParam:false,load:function(A,B){if(this.clearOnLoad){while(A.firstChild){A.removeChild(A.firstChild);}}if(A.attributes.children){var cs=A.attributes.children;for(var i=0,C=cs.length;i<C;i++){A.appendChild(this.createNode(cs[i]));
+}if(typeof B=="function"){B();}}else if(this.dataUrl){this.requestData(A,B);}},getParams:function(A){var B=[],bp=this.baseParams;for(var C in bp){if(typeof bp[C]!="function"){B.push(encodeURIComponent(C),"=",encodeURIComponent(bp[C]),"&");}}var n=this.queryParam===false?'node':this.queryParam;
+B.push(n+"=",encodeURIComponent(A.id));return B.join("");},requestData:function(A,B){if(this.fireEvent("beforeload",this,A,B)!==false){this.transId=Roo.Ajax.request({method:this.requestMethod,url:this.dataUrl||this.url,success:this.handleResponse,failure:this.handleFailure,scope:this,argument:{callback:B,node:A}
+,params:this.getParams(A)});}else{if(typeof B=="function"){B();}}},isLoading:function(){return this.transId?true:false;},abort:function(){if(this.isLoading()){Roo.Ajax.abort(this.transId);}},createNode:function(attr){if(this.baseAttrs){Roo.applyIf(attr,this.baseAttrs);
+}if(this.applyLoader!==false){attr.loader=this;}if(typeof(attr.uiProvider)=='string'){attr.uiProvider=this.uiProviders[attr.uiProvider]||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(A,B,C){var D=A.responseText;try{var o=Roo.decode(D);
+if(this.root===false&&typeof(o.success)!=undefined){this.root='data';}if(this.root!==false&&!o.success){var a=A.argument;this.fireEvent("loadexception",this,a.node,A);Roo.log("Load failed - should have a handler really");return;}if(this.root!==false){o=o[this.root];
+}for(var i=0,E=o.length;i<E;i++){var n=this.createNode(o[i]);if(n){B.appendChild(n);}}if(typeof C=="function"){C(this,B);}}catch(e){this.handleFailure(A);}},handleResponse:function(A){this.transId=false;var a=A.argument;this.processResponse(A,a.node,a.callback);
+this.fireEvent("load",this,a.node,A);},handleFailure:function(A){this.transId=false;var a=A.argument;this.fireEvent("loadexception",this,a.node,A);if(typeof a.callback=="function"){a.callback(this,a.node);}}});
+// Roo/tree/TreeFilter.js
+Roo.tree.TreeFilter=function(A,B){this.tree=A;this.filtered={};Roo.apply(this,B);};Roo.tree.TreeFilter.prototype={clearBlank:false,reverse:false,autoClear:false,remove:false,filter:function(A,B,C){B=B||"text";var f;if(typeof A=="string"){var D=A.length;if(D==0&&this.clearBlank){this.clear();
+return;}A=A.toLowerCase();f=function(n){return n.attributes[B].substr(0,D).toLowerCase()==A;};}else if(A.exec){f=function(n){return A.test(n.attributes[B]);};}else{throw 'Illegal filter type, must be string or regex';}this.filterBy(f,null,C);},filterBy:function(fn,A,B){B=B||this.tree.root;
+if(this.autoClear){this.clear();}var af=this.filtered,rv=this.reverse;var f=function(n){if(n==B){return true;}if(af[n.id]){return false;}var m=fn.call(A||n,n);if(!m||rv){af[n.id]=n;n.ui.hide();return false;}return true;};B.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);}}}}},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();}}}this.filtered={};}};
+// Roo/tree/TreeSorter.js
+Roo.tree.TreeSorter=function(A,B){Roo.apply(this,B);A.on("beforechildrenrendered",this.doSort,this);A.on("append",this.updateSort,this);A.on("insert",this.updateSort,this);var C=this.dir&&this.dir.toLowerCase()=="desc";var p=this.property||"text";var D=this.sortType;
+var fs=this.folderSort;var cs=this.caseSensitive===true;var E=this.leafAttr||'leaf';this.sortFn=function(n1,n2){if(fs){if(n1.attributes[E]&&!n2.attributes[E]){return 1;}if(!n1.attributes[E]&&n2.attributes[E]){return -1;}}var v1=D?D(n1):(cs?n1.attributes[p]:n1.attributes[p].toUpperCase());
+var v2=D?D(n2):(cs?n2.attributes[p]:n2.attributes[p].toUpperCase());if(v1<v2){return C?+1:-1;}else if(v1>v2){return C?-1:+1;}else{return 0;}};};Roo.tree.TreeSorter.prototype={doSort:function(A){A.sort(this.sortFn);},compareNodes:function(n1,n2){return (n1.text.toUpperCase()>n2.text.toUpperCase()?1:-1);
+},updateSort:function(A,B){if(B.childrenRendered){this.doSort.defer(1,this,[B]);}}};
+// Roo/tree/TreeDropZone.js
+if(Roo.dd.DropZone){Roo.tree.TreeDropZone=function(A,B){this.allowParentInsert=false;this.allowContainerDrop=false;this.appendOnly=false;Roo.tree.TreeDropZone.superclass.constructor.call(this,A.innerCt,B);this.tree=A;this.lastInsertClass="x-tree-no-status";
+this.dragOverData={};};Roo.extend(Roo.tree.TreeDropZone,Roo.dd.DropZone,{ddGroup:"TreeDD",scroll:true,expandDelay:1000,expandNode:function(A){if(A.hasChildNodes()&&!A.isExpanded()){A.expand(false,null,this.triggerCacheRefresh.createDelegate(this));}},queueExpand:function(A){this.expandProcId=this.expandNode.defer(this.expandDelay,this,[A]);
+},cancelExpand:function(){if(this.expandProcId){clearTimeout(this.expandProcId);this.expandProcId=false;}},isValidDropPoint:function(n,pt,dd,e,A){if(!n||!A){return false;}var B=n.node;var C=A.node;if(!(B&&B.isTarget&&pt)){return false;}if(pt=="append"&&B.allowChildren===false){return false;
+}if((pt=="above"||pt=="below")&&(B.parentNode&&B.parentNode.allowChildren===false)){return false;}if(C&&(B==C||C.contains(B))){return false;}var D=this.dragOverData;D.tree=this.tree;D.target=B;D.data=A;D.point=pt;D.source=dd;D.rawEvent=e;D.dropNode=C;D.cancel=false;
+var E=this.tree.fireEvent("nodedragover",D);return D.cancel===false&&E!==false;},getDropPoint:function(e,n,dd){var tn=n.node;if(tn.isRoot){return tn.allowChildren!==false?"append":false;}var A=n.ddel;var t=Roo.lib.Dom.getY(A),b=t+A.offsetHeight;var y=Roo.lib.Event.getPageY(e);
+var B=tn.allowChildren===false;if(this.appendOnly||tn.parentNode.allowChildren===false){return B?false:"append";}var C=false;if(!this.allowParentInsert){C=tn.hasChildNodes()&&tn.isExpanded();}var q=(b-t)/(B?2:3);if(y>=t&&y<(t+q)){return "above";}else if(!C&&(B||y>=b-q&&y<=b)){return "below";
+}else{return "append";}},onNodeEnter:function(n,dd,e,A){this.cancelExpand();},onNodeOver:function(n,dd,e,A){var pt=this.getDropPoint(e,n,dd);var B=n.node;if(!this.expandProcId&&pt=="append"&&B.hasChildNodes()&&!n.node.isExpanded()){this.queueExpand(B);}else if(pt!="append"){this.cancelExpand();
+}var C=this.dropNotAllowed;if(this.isValidDropPoint(n,pt,dd,e,A)){if(pt){var el=n.ddel;var D;if(pt=="above"){C=n.node.isFirst()?"x-tree-drop-ok-above":"x-tree-drop-ok-between";D="x-tree-drag-insert-above";}else if(pt=="below"){C=n.node.isLast()?"x-tree-drop-ok-below":"x-tree-drop-ok-between";
+D="x-tree-drag-insert-below";}else{C="x-tree-drop-ok-append";D="x-tree-drag-append";}if(this.lastInsertClass!=D){Roo.fly(el).replaceClass(this.lastInsertClass,D);this.lastInsertClass=D;}}}return C;},onNodeOut:function(n,dd,e,A){this.cancelExpand();this.removeDropIndicators(n);
+},onNodeDrop:function(n,dd,e,A){var B=this.getDropPoint(e,n,dd);var C=n.node;C.ui.startDrop();if(!this.isValidDropPoint(n,B,dd,e,A)){C.ui.endDrop();return false;}var D=A.node||(dd.getTreeNode?dd.getTreeNode(A,C,B,e):null);var E={tree:this.tree,target:C,data:A,point:B,source:dd,rawEvent:e,dropNode:D,cancel:!D}
+;var F=this.tree.fireEvent("beforenodedrop",E);if(F===false||E.cancel===true||!E.dropNode){C.ui.endDrop();return false;}C=E.target;if(B=="append"&&!C.isExpanded()){C.expand(false,null,function(){this.completeDrop(E);}.createDelegate(this));}else{this.completeDrop(E);
+}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,A=ns.length;i<A;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);},afterNodeMoved:function(dd,A,e,B,C){if(this.tree.hlDrop){C.ui.focus();C.ui.highlight();}this.tree.fireEvent("nodedrop",this.tree,B,A,dd,e);
+},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";}},beforeDragDrop:function(A,e,id){this.cancelExpand();
+return true;},afterRepair:function(A){if(A&&Roo.enableFx){A.node.ui.highlight();}this.hideProxy();}});}
+// Roo/tree/TreeDragZone.js
+if(Roo.dd.DragZone){Roo.tree.TreeDragZone=function(A,B){Roo.tree.TreeDragZone.superclass.constructor.call(this,A.getTreeEl(),B);this.tree=A;};Roo.extend(Roo.tree.TreeDragZone,Roo.dd.DragZone,{ddGroup:"TreeDD",onBeforeDrag:function(A,e){var n=A.node;return n&&n.draggable&&!n.disabled;
+},onInitDrag:function(e){var A=this.dragData;this.tree.getSelectionModel().select(A.node);this.proxy.update("");A.node.ui.appendDDGhost(this.proxy.ghost.dom);this.tree.fireEvent("startdrag",this.tree,A.node,e);},getRepairXY:function(e,A){return A.node.ui.getDDRepairXY();
+},onEndDrag:function(A,e){this.tree.fireEvent("enddrag",this.tree,A.node,e);},onValidDrop:function(dd,e,id){this.tree.fireEvent("dragdrop",this.tree,this.dragData.node,dd,e);this.hideProxy();},beforeInvalidDrop:function(e,id){var sm=this.tree.getSelectionModel();
+sm.clearSelections();sm.select(this.dragData.node);}});}
+// Roo/tree/TreeEditor.js
+Roo.tree.TreeEditor=function(A,B){var C=A;var D;if(B){D=B.events?B:new Roo.form.TextField(B);}else{C=A.tree;A.field=A.field||{};A.field.xtype='TextField';D=Roo.factory(A.field,Roo.form);}A=A||{};this.addEvents({"beforenodeedit":true});Roo.tree.TreeEditor.superclass.constructor.call(this,D,A);
+this.tree=C;C.on('beforeclick',this.beforeNodeClick,this);C.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,{alignment:"l-l",autoSize:false,hideEl:false,cls:"x-small-editor x-tree-editor",shim:false,shadow:"frame",maxWidth:250,editDelay:350,fitToTree:function(ed,el){var td=this.tree.getTreeEl().dom,nd=el.dom;if(td.scrollLeft>nd.offsetLeft){td.scrollLeft=nd.offsetLeft;
+}var w=Math.min(this.maxWidth,(td.clientWidth>20?td.clientWidth:td.offsetWidth)-Math.max(0,nd.offsetLeft-td.scrollLeft)-5);this.setSize(w,'');return this.fireEvent('beforenodeedit',this,this.editNode);},triggerEdit:function(A){this.completeEdit();this.editNode=A;
+this.startEdit(A.ui.textNode,A.text);},bindScroll:function(){this.tree.getTreeEl().on('scroll',this.cancelEdit,this);},beforeNodeClick:function(A,e){var B=(this.lastClick?this.lastClick.getElapsed():0);this.lastClick=new Date();if(B>this.editDelay&&this.tree.getSelectionModel().isSelected(A)){e.stopEvent();
+this.triggerEdit(A);return false;}return true;},updateNode:function(ed,A){this.tree.getTreeEl().un('scroll',this.cancelEdit,this);this.editNode.setText(A);},onHide:function(){Roo.tree.TreeEditor.superclass.onHide.call(this);if(this.editNode){this.editNode.ui.focus();
+}},onSpecialKey:function(A,e){var k=e.getKey();if(k==e.ESC){e.stopEvent();this.cancelEdit();}else if(k==e.ENTER&&!e.hasModifier()){e.stopEvent();this.completeEdit();}}});
+// Roo/tree/ColumnNodeUI.js
+Roo.tree.ColumnNodeUI=Roo.extend(Roo.tree.TreeNodeUI,{renderElements:function(n,a,A,B){this.indentMarkup=n.parentNode?n.parentNode.ui.getChildIndent():'';var t=n.getOwnerTree();var C=Pman.Tab.Document_TypesTree.tree.el.id;var D=t.columns;var bw=t.borderWidth;
+var c=D[0];var E=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 F='x-t-'+C+'-c0';var G=['<li class="x-tree-node">','<div class="x-tree-node-el ',a.cls,'">','<div class="x-tree-col ',F,'" 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="',E,'" 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="',E,'" tabIndex="1" ',(a.hrefTarget?' target="'+a.hrefTarget+'"':''),'>'];
+for(var i=1,H=D.length;i<H;i++){c=D[i];F='x-t-'+C+'-c'+i;tx=String.format('{0}',(c.renderer?c.renderer(a[c.dataIndex],n,a):a[c.dataIndex]));G.push('<div class="x-tree-col ',F,' ',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">','<div class="x-tree-col-text" qtip="'+tx+'">',tx,"</div>","</div>");
+}G.push('</a>','<div class="x-clear"></div></div>','<ul class="x-tree-node-ct" style="display:none;"></ul>',"</li>");if(B!==true&&n.nextSibling&&n.nextSibling.ui.getEl()){this.wrap=Roo.DomHelper.insertHtml("beforeBegin",n.nextSibling.ui.getEl(),G.join(""));
+}else{this.wrap=Roo.DomHelper.insertHtml("beforeEnd",A,G.join(""));}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 I=3;if(cb){this.checkbox=cs[3];I++;}this.anchor=cs[I];this.textNode=cs[I].firstChild;},initEvents:function(){Roo.tree.ColumnNodeUI.superclass.initEvents.call(this);var a=this.ranchor;var el=Roo.get(a);if(Roo.isOpera){el.setStyle("text-decoration","none");
+}el.on("click",this.onClick,this);el.on("dblclick",this.onDblClick,this);el.on("contextmenu",this.onContextMenu,this);},addClass:function(A){if(this.elRow){Roo.fly(this.elRow).addClass(A);}},removeClass:function(A){if(this.elRow){Roo.fly(this.elRow).removeClass(A);
+}}});
+// Roo/tree/ColumnTree.js
+Roo.tree.ColumnTree=function(el,A){Roo.tree.ColumnTree.superclass.constructor.call(this,el,A);this.addEvents({"resize":true});this.on('resize',this.onResize,this);};Roo.extend(Roo.tree.ColumnTree,Roo.tree.TreePanel,{borderWidth:Roo.isBorderBox?0:2,headEls:false,render:function(){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 A=this.columns,c;var B=0;this.headEls=[];var C=A.length;for(var i=0;i<C;i++){c=A[i];B+=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'});this.headers.setWidth(B);this.innerCt.setStyle({overflow:'auto'});this.onResize(this.width,this.height);},onResize:function(w,h){this.height=h;this.width=w;this.innerCt.setWidth(this.width);
+this.innerCt.setHeight(this.height-20);var A=this.columns,c;var B=0;var C=false;var D=A.length;for(var i=0;i<D;i++){c=A[i];if(this.autoExpandColumn!==false&&c.dataIndex==this.autoExpandColumn){C=this.headEls[i];continue;}B+=c.width;}if(C){C.setWidth(((w-B)-this.borderWidth-20));
+}this.headers.setWidth(w-20);}});
+// Roo/menu/Menu.js
+Roo.menu.Menu=function(A){Roo.apply(this,A);this.id=this.id||Roo.id();this.addEvents({beforeshow:true,beforehide:true,show:true,hide:true,click:true,mouseover:true,mouseout:true,itemclick:true});if(this.registerMenu){Roo.menu.MenuMgr.register(this);}var B=this.items;
+this.items=new Roo.util.MixedCollection();if(B){this.add.apply(this,B);}};Roo.extend(Roo.menu.Menu,Roo.util.Observable,{minWidth:120,shadow:"sides",subMenuAlign:"tl-tr?",defaultAlign:"tl-bl?",allowOtherMenus:false,registerMenu:true,hidden:true,render:function(){if(this.el){return;
+}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);}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"});ul.on('click',this.onClick,this);ul.on("mouseover",this.onMouseOver,this);ul.on("mouseout",this.onMouseOut,this);this.items.each(function(A){if(A.hidden){return;}var li=document.createElement("li");li.className="x-menu-list-item";
+ul.dom.appendChild(li);A.render(li,this);},this);this.ul=ul;this.autoWidth();},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;el.setWidth(ul.getWidth()+el.getFrameWidth("lr"));
+}},delayAutoWidth:function(){if(this.rendered){if(!this.awTask){this.awTask=new Roo.util.DelayedTask(this.autoWidth,this);}this.awTask.delay(20);}},findTargetItem:function(e){var t=e.getTarget(".x-menu-list-item",this.ul,true);if(t&&t.menuItemId){return this.items.get(t.menuItemId);
+}},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);},setActiveItem:function(A,B){if(A!=this.activeItem){if(this.activeItem){this.activeItem.deactivate();}this.activeItem=A;A.activate(B);}else if(B){A.expandMenu();
+}},tryActivate:function(A,B){var C=this.items;for(var i=A,D=C.length;i>=0&&i<D;i+=B){var E=C.get(i);if(!E.disabled&&E.canActivate){this.setActiveItem(E,false);return E;}}return false;},onMouseOver:function(e){var t;if(t=this.findTargetItem(e)){if(t.canActivate&&!t.disabled){this.setActiveItem(t,true);
+}}this.fireEvent("mouseover",this,e,t);},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);},isVisible:function(){return this.el&&!this.hidden;
+},show:function(el,A,B){this.parentMenu=B;if(!this.el){this.render();}this.fireEvent("beforeshow",this);this.showAt(this.el.getAlignToXY(el,A||this.defaultAlign),B,false);},showAt:function(xy,A,_e){this.parentMenu=A;if(!this.el){this.render();}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);}},doFocus:function(){if(!this.hidden){this.focusEl.focus();}}
+,hide:function(A){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(A===true&&this.parentMenu){this.parentMenu.hide(true);
+}},add:function(){var a=arguments,l=a.length,A;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){A=this.addItem(el);}else if(typeof el=="string"){if(el=="separator"||el=="-"){A=this.addSeparator();
+}else{A=this.addText(el);}}else if(el.tagName||el.el){A=this.addElement(el);}else if(typeof el=="object"){A=this.addMenuItem(el);}}return A;},getEl:function(){if(!this.el){this.render();}return this.el;},addSeparator:function(){return this.addItem(new Roo.menu.Separator());
+},addElement:function(el){return this.addItem(new Roo.menu.BaseItem(el));},addItem:function(A){this.items.add(A);if(this.ul){var li=document.createElement("li");li.className="x-menu-list-item";this.ul.dom.appendChild(li);A.render(li,this);this.delayAutoWidth();
+}return A;},addMenuItem:function(A){if(!(A instanceof Roo.menu.Item)){if(typeof A.checked=="boolean"){A=new Roo.menu.CheckItem(A);}else{A=new Roo.menu.Item(A);}}return this.addItem(A);},addText:function(A){return this.addItem(new Roo.menu.TextItem({text:A}
+));},insert:function(A,B){this.items.insert(A,B);if(this.ul){var li=document.createElement("li");li.className="x-menu-list-item";this.ul.dom.insertBefore(li,this.ul.dom.childNodes[A]);B.render(li,this);this.delayAutoWidth();}return B;},remove:function(A){this.items.removeKey(A.id);
+A.destroy();},removeAll:function(){var f;while(f=this.items.first()){this.remove(f);}}});Roo.menu.MenuNav=function(A){Roo.menu.MenuNav.superclass.constructor.call(this,A.el);this.scope=this.menu=A;};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;}return h.call(this.scope||this,e,this.menu);},up:function(e,m){if(!m.tryActivate(m.items.indexOf(m.activeItem)-1,-1)){m.tryActivate(m.items.length-1,-1);
+}},down:function(e,m){if(!m.tryActivate(m.items.indexOf(m.activeItem)+1,1)){m.tryActivate(0,1);}},right:function(e,m){if(m.activeItem){m.activeItem.expandMenu(true);}},left:function(e,m){m.hide();if(m.parentMenu&&m.parentMenu.activeItem){m.parentMenu.activeItem.activate();
+}},enter:function(e,m){if(m.activeItem){e.stopPropagation();m.activeItem.onClick(e);m.fireEvent("click",this,m.activeItem);return true;}}});
+// Roo/menu/MenuMgr.js
+Roo.menu.MenuMgr=function(){var A,B,C={},D=false,E=new Date();function init(){A={};B=new Roo.util.MixedCollection();Roo.get(document).addKeyListener(27,function(){if(B.length>0){hideAll();}});}function hideAll(){if(B&&B.length>0){var c=B.clone();c.each(function(m){m.hide();
+});}}function onHide(m){B.remove(m);if(B.length<1){Roo.get(document).un("mousedown",onMouseDown);D=false;}}function onShow(m){var F=B.last();E=new Date();B.add(m);if(!D){Roo.get(document).on("mousedown",onMouseDown);D=true;}if(m.parentMenu){m.getEl().setZIndex(parseInt(m.parentMenu.getEl().getStyle("z-index"),10)+3);
+m.parentMenu.activeChild=m;}else if(F&&F.isVisible()){m.getEl().setZIndex(parseInt(F.getEl().getStyle("z-index"),10)+3);}}function onBeforeHide(m){if(m.activeChild){m.activeChild.hide();}if(m.autoHideTimer){clearTimeout(m.autoHideTimer);delete m.autoHideTimer;
+}}function onBeforeShow(m){var pm=m.parentMenu;if(!pm&&!m.allowOtherMenus){hideAll();}else if(pm&&pm.activeChild&&B!=m){pm.activeChild.hide();}}function onMouseDown(e){if(E.getElapsed()>50&&B.length>0&&!e.getTarget(".x-menu")){hideAll();}}function onBeforeCheck(mi,F){if(F){var g=C[mi.group];
+for(var i=0,l=g.length;i<l;i++){if(g[i]!=mi){g[i].setChecked(false);}}}}return {hideAll:function(){hideAll();},register:function(F){if(!A){init();}A[F.id]=F;F.on("beforehide",onBeforeHide);F.on("hide",onHide);F.on("beforeshow",onBeforeShow);F.on("show",onShow);
+var g=F.group;if(g&&F.events["checkchange"]){if(!C[g]){C[g]=[];}C[g].push(F);F.on("checkchange",onCheck);}},get:function(F){if(typeof F=="string"){return A[F];}else if(F.events){return F;}else if(typeof F.length=='number'){return new Roo.menu.Menu({items:F}
+);}else{return new Roo.menu.Menu(F);}},unregister:function(F){delete A[F.id];F.un("beforehide",onBeforeHide);F.un("hide",onHide);F.un("beforeshow",onBeforeShow);F.un("show",onShow);var g=F.group;if(g&&F.events["checkchange"]){C[g].remove(F);F.un("checkchange",onCheck);
+}},registerCheckable:function(F){var g=F.group;if(g){if(!C[g]){C[g]=[];}C[g].push(F);F.on("beforecheckchange",onBeforeCheck);}},unregisterCheckable:function(F){var g=F.group;if(g){C[g].remove(F);F.un("beforecheckchange",onBeforeCheck);}}};}();
+// Roo/menu/BaseItem.js
+Roo.menu.BaseItem=function(A){Roo.menu.BaseItem.superclass.constructor.call(this,A);this.addEvents({click:true,activate:true,deactivate:true});if(this.handler){this.on("click",this.handler,this.scope,true);}};Roo.extend(Roo.menu.BaseItem,Roo.Component,{canActivate:false,hidden:false,activeClass:"x-menu-item-active",hideOnClick:true,hideDelay:100,ctype:"Roo.menu.BaseItem",actionMode:"container",render:function(A,B){this.parentMenu=B;
+Roo.menu.BaseItem.superclass.render.call(this,A);this.container.menuItemId=this.id;},onRender:function(A,B){this.el=Roo.get(this.el);A.dom.appendChild(this.el.dom);},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();}},activate:function(){if(this.disabled){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;},deactivate:function(){this.container.removeClass(this.activeClass);
+this.fireEvent("deactivate",this);},shouldDeactivate:function(e){return !this.region||!this.region.contains(e.getPoint());},handleClick:function(e){if(this.hideOnClick){this.parentMenu.hide.defer(this.hideDelay,this.parentMenu,[true]);}},expandMenu:function(A){}
+,hideMenu:function(){}});
+// Roo/menu/Adapter.js
+Roo.menu.Adapter=function(A,B){Roo.menu.Adapter.superclass.constructor.call(this,B);this.component=A;};Roo.extend(Roo.menu.Adapter,Roo.menu.BaseItem,{canActivate:true,onRender:function(A,B){this.component.render(A);this.el=this.component.getEl();},activate:function(){if(this.disabled){return false;
+}this.component.focus();this.fireEvent("activate",this);return true;},deactivate:function(){this.fireEvent("deactivate",this);},disable:function(){this.component.disable();Roo.menu.Adapter.superclass.disable.call(this);},enable:function(){this.component.enable();
+Roo.menu.Adapter.superclass.enable.call(this);}});
+// Roo/menu/TextItem.js
+Roo.menu.TextItem=function(A){if(typeof(A)=='string'){this.text=A;}else{Roo.apply(this,A);}Roo.menu.TextItem.superclass.constructor.call(this);};Roo.extend(Roo.menu.TextItem,Roo.menu.BaseItem,{text:'',hideOnClick:false,itemCls:"x-menu-text",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);}});
+// Roo/menu/Separator.js
+Roo.menu.Separator=function(A){Roo.menu.Separator.superclass.constructor.call(this,A);};Roo.extend(Roo.menu.Separator,Roo.menu.BaseItem,{itemCls:"x-menu-sep",hideOnClick:false,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);}});
+// Roo/menu/Item.js
+Roo.menu.Item=function(A){Roo.menu.Item.superclass.constructor.call(this,A);if(this.menu){this.menu=Roo.menu.MenuMgr.get(this.menu);}};Roo.extend(Roo.menu.Item,Roo.menu.BaseItem,{text:'',html:'',icon:undefined,itemCls:"x-menu-item",canActivate:true,showDelay:200,hideDelay:200,ctype:"Roo.menu.Item",onRender:function(A,B){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:"");var C=this.html.length?this.html:String.format('{0}',this.text);
+el.innerHTML=String.format('<img src="{0}" class="x-menu-item-icon {1}" />'+C,this.icon||Roo.BLANK_IMAGE_URL,this.iconCls||'');this.el=el;Roo.menu.Item.superclass.onRender.call(this,A,B);},setText:function(A,B){if(B){this.html=A;}else{this.text=A;this.html='';
+}if(this.rendered){var C=this.html.length?this.html:String.format('{0}',this.text);this.el.update(String.format('<img src="{0}" class="x-menu-item-icon {2}">'+C,this.icon||Roo.BLANK_IMAGE_URL,this.text,this.iconCls||''));this.parentMenu.autoWidth();}},handleClick:function(e){if(!this.href){e.stopEvent();
+}Roo.menu.Item.superclass.handleClick.apply(this,arguments);},activate:function(A){if(Roo.menu.Item.superclass.activate.apply(this,arguments)){this.focus();if(A){this.expandMenu();}}return true;},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;},deactivate:function(){Roo.menu.Item.superclass.deactivate.apply(this,arguments);this.hideMenu();},expandMenu:function(A){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,[A]);
+}else if(this.menu.isVisible()&&A){this.menu.tryActivate(0,1);}}},deferExpand:function(A){delete this.showTimer;this.menu.show(this.container,this.parentMenu.subMenuAlign||"tl-tr?",this.parentMenu);if(A){this.menu.tryActivate(0,1);}},hideMenu:function(){clearTimeout(this.showTimer);
+delete this.showTimer;if(!this.hideTimer&&this.menu&&this.menu.isVisible()){this.hideTimer=this.deferHide.defer(this.hideDelay,this);}},deferHide:function(){delete this.hideTimer;this.menu.hide();}});
+// Roo/menu/CheckItem.js
+Roo.menu.CheckItem=function(A){Roo.menu.CheckItem.superclass.constructor.call(this,A);this.addEvents({"beforecheckchange":true,"checkchange":true});if(this.checkHandler){this.on('checkchange',this.checkHandler,this.scope);}};Roo.extend(Roo.menu.CheckItem,Roo.menu.Item,{itemCls:"x-menu-item x-menu-check-item",groupClass:"x-menu-group-item",checked:false,ctype:"Roo.menu.CheckItem",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);}},destroy:function(){if(this.rendered){Roo.menu.MenuMgr.unregisterCheckable(this);}Roo.menu.CheckItem.superclass.destroy.apply(this,arguments);
+},setChecked:function(A,B){if(this.checked!=A&&this.fireEvent("beforecheckchange",this,A)!==false){if(this.container){this.container[A?"addClass":"removeClass"]("x-menu-item-checked");}this.checked=A;if(B!==true){this.fireEvent("checkchange",this,A);}}},handleClick:function(e){if(!this.disabled&&!(this.checked&&this.group)){this.setChecked(!this.checked);
+}Roo.menu.CheckItem.superclass.handleClick.apply(this,arguments);}});
+// Roo/menu/DateItem.js
+Roo.menu.DateItem=function(A){Roo.menu.DateItem.superclass.constructor.call(this,new Roo.DatePicker(A),A);this.picker=this.component;this.addEvents({select:true});this.picker.on("render",function(B){B.getEl().swallowEvent("click");B.container.addClass("x-menu-date-item");
+});this.picker.on("select",this.onSelect,this);};Roo.extend(Roo.menu.DateItem,Roo.menu.Adapter,{onSelect:function(A,B){this.fireEvent("select",this,B,A);Roo.menu.DateItem.superclass.handleClick.call(this);}});
+// Roo/menu/ColorItem.js
+Roo.menu.ColorItem=function(A){Roo.menu.ColorItem.superclass.constructor.call(this,new Roo.ColorPalette(A),A);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);
+
+// Roo/menu/DateMenu.js
+Roo.menu.DateMenu=function(A){Roo.menu.DateMenu.superclass.constructor.call(this,A);this.plain=true;var di=new Roo.menu.DateItem(A);this.add(di);this.picker=di.picker;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'});
+// Roo/menu/ColorMenu.js
+Roo.menu.ColorMenu=function(A){Roo.menu.ColorMenu.superclass.constructor.call(this,A);this.plain=true;var ci=new Roo.menu.ColorItem(A);this.add(ci);this.palette=ci.palette;this.relayEvents(ci,["select"]);};Roo.extend(Roo.menu.ColorMenu,Roo.menu.Menu);
+// Roo/form/Field.js
+Roo.form.Field=function(A){Roo.form.Field.superclass.constructor.call(this,A);};Roo.extend(Roo.form.Field,Roo.BoxComponent,{invalidClass:"x-form-invalid",invalidText:"The value in this field is invalid",focusClass:"x-form-focus",validationEvent:"keyup",validateOnBlur:true,validationDelay:250,defaultAutoCreate:{tag:"input",type:"text",size:"20",autocomplete:"new-password"}
+,fieldClass:"x-form-field",msgTarget:'qtip',msgFx:'normal',readOnly:false,disabled:false,inputType:undefined,tabIndex:undefined,isFormField:true,hasFocus:false,value:undefined,loadedValue:false,initComponent:function(){Roo.form.Field.superclass.initComponent.call(this);
+this.addEvents({focus:true,blur:true,specialkey:true,change:true,invalid:true,valid:true,keyup:true});},getName:function(){return this.rendered&&this.el.dom.name?this.el.dom.name:(this.hiddenName||'');},onRender:function(ct,A){Roo.form.Field.superclass.onRender.call(this,ct,A);
+if(!this.el){var B=this.getAutoCreate();if(!B.name){B.name=typeof(this.name)=='undefined'?this.id:this.name;}if(!B.name.length){delete B.name;}if(this.inputType){B.type=this.inputType;}this.el=ct.createChild(B,A);}var C=this.el.dom.type;if(C){if(C=='password'){C='text';
+}this.el.addClass('x-form-'+C);}if(this.readOnly){this.el.dom.readOnly=true;}if(this.tabIndex!==undefined){this.el.dom.setAttribute('tabIndex',this.tabIndex);}this.el.addClass([this.fieldClass,this.cls]);this.initValue();},applyTo:function(A){this.allowDomMove=false;
+this.el=Roo.get(A);this.render(this.el.dom.parentNode);return this;},initValue:function(){if(this.value!==undefined){this.setValue(this.value);}else if(this.el.dom.value.length>0){this.setValue(this.el.dom.value);}},isDirty:function(){if(this.disabled){return false;
+}return String(this.getValue())!==String(this.originalValue);},resetHasChanged:function(){this.loadedValue=String(this.getValue());},hasChanged:function(){if(this.disabled||this.readOnly){return false;}return this.loadedValue!==false&&String(this.getValue())!==this.loadedValue;
+},afterRender:function(){Roo.form.Field.superclass.afterRender.call(this);this.initEvents();},fireKey:function(e){if(e.isNavKeyPress()){this.fireEvent("specialkey",this,e);}},reset:function(){this.setValue(this.resetValue);this.clearInvalid();},initEvents:function(){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);this.originalValue=this.getValue();this.resetValue=this.getValue();},onFocus:function(){if(!Roo.isOpera&&this.focusClass){this.el.addClass(this.focusClass);
+}if(!this.hasFocus){this.hasFocus=true;this.startValue=this.getValue();this.fireEvent("focus",this);}},beforeBlur:Roo.emptyFn,onBlur:function(){this.beforeBlur();if(!Roo.isOpera&&this.focusClass){this.el.removeClass(this.focusClass);}this.hasFocus=false;if(this.validationEvent!==false&&this.validateOnBlur&&this.validationEvent!="blur"){this.validate();
+}var v=this.getValue();if(String(v)!==String(this.startValue)){this.fireEvent('change',this,v,this.startValue);}this.fireEvent("blur",this);},isValid:function(A){if(this.disabled){return true;}var B=this.preventMark;this.preventMark=A===true;var v=this.validateValue(this.processValue(this.getRawValue()));
+this.preventMark=B;return v;},validate:function(){if(this.disabled||this.validateValue(this.processValue(this.getRawValue()))){this.clearInvalid();return true;}return false;},processValue:function(A){return A;},validateValue:function(A){return true;},markInvalid:function(A){if(!this.rendered||this.preventMark){return;
+}var B=(typeof(this.combo)!='undefined')?this.combo:this;B.el.addClass(this.invalidClass);A=A||this.invalidText;switch(this.msgTarget){case 'qtip':B.el.dom.qtip=A;B.el.dom.qclass='x-form-invalid-tip';if(Roo.QuickTips){Roo.QuickTips.enable();}break;case 'title':this.el.dom.title=A;
+break;case 'under':if(!this.errorEl){var C=this.el.findParent('.x-form-element',5,true);this.errorEl=C.createChild({cls:'x-form-invalid-msg'});this.errorEl.setWidth(C.getWidth(true)-20);}this.errorEl.update(A);Roo.form.Field.msgFx[this.msgFx].show(this.errorEl,this);
+break;case 'side':if(!this.errorIcon){var C=this.el.findParent('.x-form-element',5,true);this.errorIcon=C.createChild({cls:'x-form-invalid-icon'});}this.alignErrorIcon();this.errorIcon.dom.qtip=A;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=A;t.style.display=this.msgDisplay;break;}this.fireEvent('invalid',this,A);},alignErrorIcon:function(){this.errorIcon.alignTo(this.el,'tl-tr',[2,0]);},clearInvalid:function(){if(!this.rendered||this.preventMark){return;
+}var A=(typeof(this.combo)!='undefined')?this.combo:this;A.el.removeClass(this.invalidClass);switch(this.msgTarget){case 'qtip':A.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);},getRawValue:function(){var v=this.el.getValue();
+return v;},getValue:function(){var v=this.el.getValue();return v;},setRawValue:function(v){return this.el.dom.value=(v===null||v===undefined?'':v);},setValue:function(v){this.value=v;if(this.rendered){this.el.dom.value=(v===null||v===undefined?'':v);this.validate();
+}},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;},adjustWidth:function(A,w){A=A.toLowerCase();if(typeof w=='number'&&Roo.isStrict&&!Roo.isSafari){if(Roo.isIE&&(A=='input'||A=='textarea')){if(A=='input'){return w+2;
+}if(A=='textarea'){return w-2;}}else if(Roo.isOpera){if(A=='input'){return w+2;}if(A=='textarea'){return w-2;}}}return w;}});Roo.form.Field.msgFx={normal:{show:function(A,f){A.setDisplayed('block');},hide:function(A,f){A.setDisplayed(false).update('');}},slide:{show:function(A,f){A.slideIn('t',{stopFx:true}
+);},hide:function(A,f){A.slideOut('t',{stopFx:true,useDisplay:true});}},slideRight:{show:function(A,f){A.fixDisplay();A.alignTo(f.el,'tl-tr');A.slideIn('l',{stopFx:true});},hide:function(A,f){A.slideOut('l',{stopFx:true,useDisplay:true});}}};
+// Roo/form/TextField.js
+Roo.form.TextField=function(A){Roo.form.TextField.superclass.constructor.call(this,A);this.addEvents({autosize:true});};Roo.extend(Roo.form.TextField,Roo.form.Field,{grow:false,growMin:30,growMax:800,vtype:null,maskRe:null,disableKeyFilter:false,allowBlank:true,minLength:0,maxLength:Number.MAX_VALUE,minLengthText:"The minimum length for this field is {0}",maxLengthText:"The maximum length for this field is {0}",selectOnFocus:false,blankText:"This field is required",validator:null,regex:null,regexText:"",emptyText:null,initEvents:function(){if(this.emptyText){this.el.attr('placeholder',this.emptyText);
+}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.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);}},processValue:function(A){if(this.stripCharsRe){var B=A.replace(this.stripCharsRe,'');if(B!==A){this.setRawValue(B);
+return B;}}return A;},filterValidation:function(e){if(!e.isNavKeyPress()){this.validationTask.delay(this.validationDelay);}},onKeyUp:function(e){if(!e.isNavKeyPress()){this.autoSize();}},reset:function(){Roo.form.TextField.superclass.reset.call(this);},preFocus:function(){if(this.selectOnFocus){this.el.dom.select();
+}},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;}if(!this.maskRe.test(cc)){e.stopEvent();
+}},setValue:function(v){Roo.form.TextField.superclass.setValue.apply(this,arguments);this.autoSize();},validateValue:function(A){if(A.length<1){if(this.allowBlank){this.clearInvalid();return true;}else{this.markInvalid(this.blankText);return false;}}if(A.length<this.minLength){this.markInvalid(String.format(this.minLengthText,this.minLength));
+return false;}if(A.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](A,this)){this.markInvalid(this.vtypeText||vt[this.vtype+'Text']);return false;
+}}if(typeof this.validator=="function"){var B=this.validator(A);if(B!==true){this.markInvalid(B);return false;}}if(this.regex&&!this.regex.test(A)){this.markInvalid(this.regexText);return false;}return true;},selectText:function(A,B){var v=this.getRawValue();
+if(v.length>0){A=A===undefined?0:A;B=B===undefined?v.length:B;var d=this.el.dom;if(d.setSelectionRange){d.setSelectionRange(A,B);}else if(d.createTextRange){var C=d.createTextRange();C.moveStart("character",A);C.moveEnd("character",v.length-B);C.select();
+}}},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)+10,this.growMin));this.el.setWidth(w);this.fireEvent("autosize",this,w);},SafariOnKeyDown:function(A){var B=false;if(this.el.dom.selectionEnd>0){B=(this.el.dom.selectionEnd-this.el.dom.selectionStart-this.getValue().length==0)?true:false;
+}if(((A.getKey()==8||A.getKey()==46)&&this.getValue().length==1)){A.preventDefault();this.setValue('');return;}if(B&&A.getCharCode()>31){A.preventDefault();var cc=String.fromCharCode(A.getCharCode());this.setValue(A.shiftKey?cc:cc.toLowerCase());}}});
+// Roo/form/Hidden.js
+Roo.form.Hidden=function(A){Roo.form.Hidden.superclass.constructor.call(this,A);};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/form/TriggerField.js
+Roo.form.TriggerField=function(A){this.mimicing=false;Roo.form.TriggerField.superclass.constructor.call(this,A);};Roo.extend(Roo.form.TriggerField,Roo.form.TextField,{defaultAutoCreate:{tag:"input",type:"text",size:"16",autocomplete:"new-password"},hideTrigger:false,autoSize:Roo.emptyFn,monitorTab:true,deferHeight:true,actionMode:'wrap',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');}},adjustSize:Roo.BoxComponent.prototype.adjustSize,getResizeEl:function(){return this.wrap;},getPositionEl:function(){return this.wrap;
+},alignErrorIcon:function(){this.errorIcon.alignTo(this.wrap,'tl-tr',[2,0]);},onRender:function(ct,A){Roo.form.TriggerField.superclass.onRender.call(this,ct,A);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);}this.initTrigger();if(!this.width){this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());}},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');},onDestroy:function(){if(this.trigger){this.trigger.removeAllListeners();this.trigger.remove();}if(this.wrap){this.wrap.remove();}Roo.form.TriggerField.superclass.onDestroy.call(this);},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);}}},checkTab:function(e){if(e.getKey()==e.TAB){this.triggerBlur();
+}},onBlur:function(){},mimicBlur:function(e,t){if(!this.wrap.contains(t)&&this.validateBlur()){this.triggerBlur();}},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);},validateBlur:function(e,t){return true;},onDisable:function(){Roo.form.TriggerField.superclass.onDisable.call(this);if(this.wrap){this.wrap.addClass('x-item-disabled');
+}},onEnable:function(){Roo.form.TriggerField.superclass.onEnable.call(this);if(this.wrap){this.wrap.removeClass('x-item-disabled');}},onShow:function(){var ae=this.getActionEl();if(ae){ae.dom.style.display='';ae.dom.style.visibility='visible';}},onHide:function(){var ae=this.getActionEl();
+ae.dom.style.display='none';},onTriggerClick:Roo.emptyFn});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}]};},getTrigger:function(A){return this.triggers[A];},initTrigger:function(){var ts=this.trigger.select('.x-form-trigger',true);this.wrap.setStyle('overflow','hidden');var A=this;
+ts.each(function(t,B,C){t.hide=function(){var w=A.wrap.getWidth();this.dom.style.display='none';A.el.setWidth(w-A.trigger.getWidth());};t.show=function(){var w=A.wrap.getWidth();this.dom.style.display='';A.el.setWidth(w-A.trigger.getWidth());};var D='Trigger'+(C+1);
+if(this['hide'+D]){t.dom.style.display='none';}t.on("click",this['on'+D+'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}
+);
+// Roo/form/TextArea.js
+Roo.form.TextArea=function(A){Roo.form.TextArea.superclass.constructor.call(this,A);if(this.minHeight!==undefined){this.growMin=this.minHeight;}if(this.maxHeight!==undefined){this.growMax=this.maxHeight;}};Roo.extend(Roo.form.TextArea,Roo.form.TextField,{growMin:60,growMax:1000,preventScrollbars:false,onRender:function(ct,A){if(!this.el){this.defaultAutoCreate={tag:"textarea",style:"width:300px;height:60px;",autocomplete:"new-password"}
+;}Roo.form.TextArea.superclass.onRender.call(this,ct,A);if(this.grow){this.textSizeEl=Roo.DomHelper.append(document.body,{tag:"pre",cls:"x-form-grow-sizer"});if(this.preventScrollbars){this.el.setStyle("overflow","hidden");}this.el.setHeight(this.growMin);
+}},onDestroy:function(){if(this.textSizeEl){this.textSizeEl.parentNode.removeChild(this.textSizeEl);}Roo.form.TextArea.superclass.onDestroy.call(this);},onKeyUp:function(e){if(!e.isNavKeyPress()||e.getKey()==e.ENTER){this.autoSize();}},autoSize:function(){if(!this.grow||!this.textSizeEl){return;
+}var el=this.el;var v=el.dom.value;var ts=this.textSizeEl;ts.innerHTML='';ts.appendChild(document.createTextNode(v));v=ts.innerHTML;Roo.fly(ts).setWidth(this.el.getWidth());if(v.length<1){v="&#160;&#160;";}else{if(Roo.isIE){v=v.replace(/\n/g,'<p>&#160;</p>');
+}v+="&#160;\n&#160;";}ts.innerHTML=v;var h=Math.min(this.growMax,Math.max(ts.offsetHeight,this.growMin));if(h!=this.lastHeight){this.lastHeight=h;this.el.setHeight(h);this.fireEvent("autosize",this,h);}}});
+// Roo/form/NumberField.js
+Roo.form.NumberField=function(A){Roo.form.NumberField.superclass.constructor.call(this,A);};Roo.extend(Roo.form.NumberField,Roo.form.TextField,{fieldClass:"x-form-field x-form-num-field",allowDecimals:true,decimalSeparator:".",decimalPrecision:2,allowNegative:true,minValue:Number.NEGATIVE_INFINITY,maxValue:Number.MAX_VALUE,minText:"The minimum value for this field is {0}",maxText:"The maximum value for this field is {0}",nanText:"{0} is not a valid number",initEvents:function(){Roo.form.NumberField.superclass.initEvents.call(this);
+var A="0123456789";if(this.allowDecimals){A+=this.decimalSeparator;}if(this.allowNegative){A+="-";}this.stripCharsRe=new RegExp('[^'+A+']','gi');var B=function(e){var k=e.getKey();if(!Roo.isIE&&(e.isSpecialKey()||k==e.BACKSPACE||k==e.DELETE)){return;}var c=e.getCharCode();
+if(A.indexOf(String.fromCharCode(c))===-1){e.stopEvent();}};this.el.on("keypress",B,this);},validateValue:function(A){if(!Roo.form.NumberField.superclass.validateValue.call(this,A)){return false;}if(A.length<1){return true;}var B=this.parseValue(A);if(isNaN(B)){this.markInvalid(String.format(this.nanText,A));
+return false;}if(B<this.minValue){this.markInvalid(String.format(this.minText,this.minValue));return false;}if(B>this.maxValue){this.markInvalid(String.format(this.maxText,this.maxValue));return false;}return true;},getValue:function(){return this.fixPrecision(this.parseValue(Roo.form.NumberField.superclass.getValue.call(this)));
+},parseValue:function(A){A=parseFloat(String(A).replace(this.decimalSeparator,"."));return isNaN(A)?'':A;},fixPrecision:function(A){var B=isNaN(A);if(!this.allowDecimals||this.decimalPrecision==-1||B||!A){return B?'':A;}return parseFloat(A).toFixed(this.decimalPrecision);
+},setValue:function(v){v=this.fixPrecision(v);Roo.form.NumberField.superclass.setValue.call(this,String(v).replace(".",this.decimalSeparator));},decimalPrecisionFcn:function(v){return Math.floor(v);},beforeBlur:function(){var v=this.parseValue(this.getRawValue());
+if(v){this.setValue(v);}}});
+// Roo/form/DateField.js
+Roo.form.DateField=function(A){Roo.form.DateField.superclass.constructor.call(this,A);this.addEvents({'select':true});if(typeof this.minValue=="string"){this.minValue=this.parseDate(this.minValue);}if(typeof this.maxValue=="string"){this.maxValue=this.parseDate(this.maxValue);
+}this.ddMatch=null;if(this.disabledDates){var dd=this.disabledDates;var re="(?:";for(var i=0;i<dd.length;i++){re+=dd[i];if(i!=dd.length-1){re+="|";}}this.ddMatch=new RegExp(re+")");}};Roo.extend(Roo.form.DateField,Roo.form.TriggerField,{format:"m/d/y",altFormats:"m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d",disabledDays:null,disabledDaysText:"Disabled",disabledDates:null,disabledDatesText:"Disabled",minValue:null,maxValue:null,minText:"The date in this field must be equal to or after {0}",maxText:"The date in this field must be equal to or before {0}",invalidText:"{0} is not a valid date - it must be in the format {1}",triggerClass:'x-form-date-trigger',useIso:false,defaultAutoCreate:{tag:"input",type:"text",size:"10",autocomplete:"off"}
+,hiddenField:false,onRender:function(ct,A){Roo.form.DateField.superclass.onRender.call(this,ct,A);if(this.useIso){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'):'';this.hiddenName=this.name;}},validateValue:function(A){A=this.formatDate(A);if(!Roo.form.DateField.superclass.validateValue.call(this,A)){Roo.log('super failed');return false;
+}if(A.length<1){return true;}var B=A;A=this.parseDate(A);if(!A){Roo.log('parse date failed'+B);this.markInvalid(String.format(this.invalidText,B,this.format));return false;}var C=A.getTime();if(this.minValue&&C<this.minValue.getTime()){this.markInvalid(String.format(this.minText,this.formatDate(this.minValue)));
+return false;}if(this.maxValue&&C>this.maxValue.getTime()){this.markInvalid(String.format(this.maxText,this.formatDate(this.maxValue)));return false;}if(this.disabledDays){var D=A.getDay();for(var i=0;i<this.disabledDays.length;i++){if(D===this.disabledDays[i]){this.markInvalid(this.disabledDaysText);
+return false;}}}var E=this.formatDate(A);if(this.ddMatch&&this.ddMatch.test(E)){this.markInvalid(String.format(this.disabledDatesText,E));return false;}return true;},validateBlur:function(){return !this.menu||!this.menu.isVisible();},getName:function(){if(!this.rendered){return ''}
+;return !this.hiddenName&&this.el.dom.name?this.el.dom.name:(this.hiddenName||'');},getValue:function(){return this.hiddenField?this.hiddenField.value:this.parseDate(Roo.form.DateField.superclass.getValue.call(this))||"";},setValue:function(A){if(this.hiddenField){this.hiddenField.value=this.formatDate(this.parseDate(A),'Y-m-d');
+}Roo.form.DateField.superclass.setValue.call(this,this.formatDate(this.parseDate(A)));this.value=this.parseDate(A);},parseDate:function(A){if(!A||A instanceof Date){return A;}var v=Date.parseDate(A,this.format);if(!v&&this.useIso){v=Date.parseDate(A,'Y-m-d');
+}if(!v&&this.altFormats){if(!this.altFormatsArray){this.altFormatsArray=this.altFormats.split("|");}for(var i=0,B=this.altFormatsArray.length;i<B&&!v;i++){v=Date.parseDate(A,this.altFormatsArray[i]);}}return v;},formatDate:function(A,B){return (!A||!(A instanceof Date))?A:A.dateFormat(B||this.format);
+},menuListeners:{select:function(m,d){this.setValue(d);this.fireEvent('select',this,d);},show:function(){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);}},onTriggerClick:function(){if(this.disabled){return;}if(this.menu==null){this.menu=new Roo.menu.DateMenu();}Roo.apply(this.menu.picker,{showClear:this.allowBlank,minDate:this.minValue,maxDate:this.maxValue,disabledDatesRE:this.ddMatch,disabledDatesText:this.disabledDatesText,disabledDays:this.disabledDays,disabledDaysText:this.disabledDaysText,format:this.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?");},beforeBlur:function(){var v=this.parseDate(this.getRawValue());if(v){this.setValue(v);}},isDirty:function(){if(this.disabled){return false;
+}if(typeof(this.startValue)==='undefined'){return false;}return String(this.getValue())!==String(this.startValue);}});
+// Roo/form/MonthField.js
+Roo.form.MonthField=function(A){Roo.form.MonthField.superclass.constructor.call(this,A);this.addEvents({'select':true});if(typeof this.minValue=="string"){this.minValue=this.parseDate(this.minValue);}if(typeof this.maxValue=="string"){this.maxValue=this.parseDate(this.maxValue);
+}this.ddMatch=null;if(this.disabledDates){var dd=this.disabledDates;var re="(?:";for(var i=0;i<dd.length;i++){re+=dd[i];if(i!=dd.length-1){re+="|";}}this.ddMatch=new RegExp(re+")");}};Roo.extend(Roo.form.MonthField,Roo.form.TriggerField,{format:"M Y",altFormats:"M Y|m/Y|m-y|m-Y|my|mY",disabledDays:[0,1,2,3,4,5,6],disabledDaysText:"Disabled",disabledDates:null,disabledDatesText:"Disabled",minValue:null,maxValue:null,minText:"The date in this field must be equal to or after {0}",maxText:"The date in this field must be equal to or before {0}",invalidText:"{0} is not a valid date - it must be in the format {1}",triggerClass:'x-form-date-trigger',useIso:true,defaultAutoCreate:{tag:"input",type:"text",size:"10",autocomplete:"new-password"}
+,hiddenField:false,hideMonthPicker:false,onRender:function(ct,A){Roo.form.MonthField.superclass.onRender.call(this,ct,A);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'):'';this.hiddenName=this.name;}},validateValue:function(A){A=this.formatDate(A);if(!Roo.form.MonthField.superclass.validateValue.call(this,A)){return false;}if(A.length<1){return true;}var B=A;
+A=this.parseDate(A);if(!A){this.markInvalid(String.format(this.invalidText,B,this.format));return false;}var C=A.getTime();if(this.minValue&&C<this.minValue.getTime()){this.markInvalid(String.format(this.minText,this.formatDate(this.minValue)));return false;
+}if(this.maxValue&&C>this.maxValue.getTime()){this.markInvalid(String.format(this.maxText,this.formatDate(this.maxValue)));return false;}var D=this.formatDate(A);return true;},validateBlur:function(){return !this.menu||!this.menu.isVisible();},getValue:function(){return this.hiddenField?this.hiddenField.value:this.parseDate(Roo.form.MonthField.superclass.getValue.call(this))||"";
+},setValue:function(A){Roo.log('month setValue'+A);var B=this.parseDate(A);if(this.hiddenField){this.hiddenField.value=this.formatDate(this.parseDate(A),'Y-m-d');}Roo.form.MonthField.superclass.setValue.call(this,this.formatDate(this.parseDate(A)));this.value=this.parseDate(A);
+},parseDate:function(A){if(!A||A instanceof Date){A=A?Date.parseDate(A.format('Y-m')+'-01','Y-m-d'):null;return A;}var v=Date.parseDate(A,this.format);if(!v&&this.useIso){v=Date.parseDate(A,'Y-m-d');}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,B=this.altFormatsArray.length;i<B&&!v;i++){v=Date.parseDate(A,this.altFormatsArray[i]);}}return v;},formatDate:function(A,B){return (!A||!(A instanceof Date))?A:A.dateFormat(B||this.format);
+},menuListeners:{select:function(m,d){this.setValue(d);this.fireEvent('select',this,d);},show:function(){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);}},onTriggerClick:function(){if(this.disabled){return;}if(this.menu==null){this.menu=new Roo.menu.DateMenu();}Roo.apply(this.menu.picker,{showClear:this.allowBlank,minDate:this.minValue,maxDate:this.maxValue,disabledDatesRE:this.ddMatch,disabledDatesText:this.disabledDatesText,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;var A=true;p.hideMonthPicker=function(B){if(A){return;}if(this.monthPicker){Roo.log("hideMonthPicker called");if(B===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?');
+A=false;Roo.select('.x-date-picker table',true).first().dom.style.visibility="hidden";p.showMonthPicker.defer(100,p);},beforeBlur:function(){var v=this.parseDate(this.getRawValue());if(v){this.setValue(v);}}});
+// Roo/form/ComboBox.js
+Roo.form.ComboBox=function(A){Roo.form.ComboBox.superclass.constructor.call(this,A);this.addEvents({'expand':true,'collapse':true,'beforeselect':true,'select':true,'beforequery':true,'add':true,'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=[],B=s.options;for(var i=0,C=B.length;i<C;i++){var o=B[i];var D=(Roo.isIE?o.getAttributeNode('value').specified:o.hasAttribute('value'))?o.value:o.text;if(o.selected){this.value=D;
+}d.push([D,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();if(!this.lazyRender){this.target=true;this.el=Roo.DomHelper.insertBefore(s,this.autoCreate||this.defaultAutoCreate);
+s.parentNode.removeChild(s);this.render(this.el.parentNode);}else{s.parentNode.removeChild(s);}}if(this.store){this.store=Roo.factory(this.store,Roo.data);}this.selectedIndex=-1;if(this.mode=='local'){if(A.queryDelay===undefined){this.queryDelay=10;}if(A.minChars===undefined){this.minChars=0;
+}}};Roo.extend(Roo.form.ComboBox,Roo.form.TriggerField,{defaultAutoCreate:{tag:"input",type:"text",size:"24",autocomplete:"off"},listWidth:undefined,displayField:undefined,valueField:undefined,hiddenName:undefined,listClass:'',selectedClass:'x-combo-selected',triggerClass:'x-form-arrow-trigger',shadow:'sides',listAlign:'tl-bl?',maxHeight:300,triggerAction:'query',minChars:4,typeAhead:false,queryDelay:500,pageSize:0,selectOnFocus:false,queryParam:'query',loadingText:'Loading...',resizable:false,handleHeight:8,editable:true,allQuery:'',mode:'remote',minListWidth:70,forceSelection:false,typeAheadDelay:250,valueNotFoundText:undefined,blockFocus:false,disableClear:false,alwaysQuery:false,addicon:false,editicon:false,onRender:function(ct,A){Roo.form.ComboBox.superclass.onRender.call(this,ct,A);
+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:'';
+this.el.dom.removeAttribute('name');}if(Roo.isGecko){this.el.dom.setAttribute('autocomplete','off');}var B='x-combo-list';this.list=new Roo.Layer({shadow:this.shadow,cls:[B,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:B+'-hd',html:this.title});this.assetHeight+=this.header.getHeight();}this.innerList=this.list.createChild({cls:B+'-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:B+'-ft'}
+);this.pageTb=new Roo.Toolbar(this.footer);}if(this.pageSize){this.footer=this.list.createChild({cls:B+'-ft'});this.pageTb=new Roo.PagingToolbar(this.footer,this.store,{pageSize:this.pageSize});}if(this.pageTb&&this.allowBlank&&!this.disableClear){var C=this;
+this.pageTb.add(new Roo.Toolbar.Fill(),{cls:'x-btn-icon x-btn-clear',text:'&#160;',handler:function(){C.collapse();C.clearValue();C.onSelect(false,-1);}});}if(this.footer){this.assetHeight+=this.footer.getHeight();}if(!this.tpl){this.tpl='<div class="'+B+'-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);
+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){this.fireEvent('edit',this,this.lastData);},this);}},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();},"esc":function(e){this.collapse();},"tab":function(e){this.onViewClick(false);this.fireEvent("specialkey",this,e);
+return true;},scope:this,doRelay:function(A,B,C){if(C=='down'||this.scope.isExpanded()){return Roo.KeyNav.prototype.doRelay.apply(this,arguments);}return true;},forceKeyDown:true});this.queryDelay=Math.max(this.queryDelay||10,this.mode=='local'?10:250);this.dqTask=new Roo.util.DelayedTask(this.initQuery,this);
+if(this.typeAhead){this.taTask=new Roo.util.DelayedTask(this.onTypeAhead,this);}if(this.editable!==false){this.el.on("keyup",this.onKeyUp,this);}if(this.forceSelection){this.on('blur',this.doForce,this);}},onDestroy:function(){if(this.view){this.view.setStore(null);
+this.view.el.removeAllListeners();this.view.el.remove();this.view.purgeListeners();}if(this.list){this.list.destroy();}if(this.store){this.store.un('beforeload',this.onBeforeLoad,this);this.store.un('load',this.onLoad,this);this.store.un('loadexception',this.onLoadException,this);
+}Roo.form.ComboBox.superclass.onDestroy.call(this);},fireKey:function(e){if(e.isNavKeyPress()&&!this.list.isVisible()){this.fireEvent("specialkey",this,e);}},onResize:function(w,h){Roo.form.ComboBox.superclass.onResize.apply(this,arguments);if(typeof w!='number'){return;
+}var tw=this.trigger.getWidth();tw+=this.addicon?this.addicon.getWidth():0;tw+=this.editicon?this.editicon.getWidth():0;var x=w-tw;this.el.setWidth(this.adjustWidth('input',x));this.trigger.setStyle('left',x+'px');if(this.list&&this.listWidth===undefined){var lw=Math.max(x+this.trigger.getWidth(),this.minListWidth);
+this.list.setWidth(lw);this.innerList.setWidth(lw-this.list.getFrameWidth('lr'));}},setEditable:function(A){if(A==this.editable){return;}this.editable=A;if(!A){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');}},onBeforeLoad:function(){if(!this.hasFocus){return;}this.innerList.update(this.loadingText?'<div class="loading-indicator">'+this.loadingText+'</div>':'');
+this.restrictHeight();this.selectedIndex=-1;},onLoad:function(){if(!this.hasFocus){return;}if(this.store.getCount()>0){this.expand();this.restrictHeight();if(this.lastQuery==this.allQuery){if(this.editable){this.el.dom.select();}if(!this.selectByValue(this.value,true)){this.select(0,true);
+}}else{this.selectNext();if(this.typeAhead&&this.lastKey!=Roo.EventObject.BACKSPACE&&this.lastKey!=Roo.EventObject.DELETE){this.taTask.delay(this.typeAheadDelay);}}}else{this.onEmptyResults();}},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);}},onTypeAhead:function(){if(this.store.getCount()>0){var r=this.store.getAt(0);var A=r.data[this.displayField];
+var B=A.length;var C=this.getRawValue().length;if(C!=B){this.setRawValue(A);this.selectText(C,A.length);}}},onSelect:function(A,B){if(this.fireEvent('beforeselect',this,A,B)!==false){this.setFromData(B>-1?A.data:false);this.collapse();this.fireEvent('select',this,A,B);
+}},getValue:function(){if(this.valueField){return typeof this.value!='undefined'?this.value:'';}return Roo.form.ComboBox.superclass.getValue.call(this);},clearValue:function(){if(this.hiddenField){this.hiddenField.value='';}this.value='';this.setRawValue('');
+this.lastSelectionText='';},setValue:function(v){var A=v;if(this.valueField){var r=this.findRecord(this.valueField,v);if(r){A=r.data[this.displayField];}else if(this.valueNotFoundText!==undefined){A=this.valueNotFoundText;}}this.lastSelectionText=A;if(this.hiddenField){this.hiddenField.value=v;
+}Roo.form.ComboBox.superclass.setValue.call(this,A);this.value=v;},lastData:false,setFromData:function(o){var dv='';var vv='';this.lastData=o;if(this.displayField){dv=!o||typeof(o[this.displayField])=='undefined'?'':o[this.displayField];}else{Roo.log('no  displayField value set for '+(this.name?this.name:this.id));
+}if(this.valueField){vv=!o||typeof(o[this.valueField])=='undefined'?dv:o[this.valueField];}if(this.hiddenField){this.hiddenField.value=vv;this.lastSelectionText=dv;Roo.form.ComboBox.superclass.setValue.call(this,dv);this.value=vv;return;}this.lastSelectionText=dv;
+Roo.form.ComboBox.superclass.setValue.call(this,dv);this.value=vv;},reset:function(){this.setValue(this.resetValue);this.clearInvalid();this.lastData=false;if(this.view){this.view.clearSelections();}},findRecord:function(A,B){var C;if(this.store.getCount()>0){this.store.each(function(r){if(r.data[A]==B){C=r;
+return false;}return true;});}return C;},getName:function(){if(!this.rendered){return ''};return !this.hiddenName&&this.el.dom.name?this.el.dom.name:(this.hiddenName||'');},onViewMove:function(e,t){this.inKeyMode=false;},onViewOver:function(e,t){if(this.inKeyMode){return;
+}var A=this.view.findItemFromChild(t);if(A){var B=this.view.indexOf(A);this.select(B,false);}},onViewClick:function(A){var B=this.view.getSelectedIndexes()[0];var r=this.store.getAt(B);if(r){this.onSelect(r,B);}if(A!==false&&!this.blockFocus){this.el.focus();
+}},restrictHeight:function(){this.innerList.dom.style.height='';var A=this.innerList.dom;var h=Math.max(A.clientHeight,A.offsetHeight,A.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();},onEmptyResults:function(){this.collapse();},isExpanded:function(){return this.list.isVisible();},selectByValue:function(v,A){if(v!==undefined&&v!==null){var r=this.findRecord(this.valueField||this.displayField,v);
+if(r){this.select(this.store.indexOf(r),A);return true;}}return false;},select:function(A,B){this.selectedIndex=A;this.view.select(A);if(B!==false){var el=this.view.getNode(A);if(el){this.innerList.scrollChildIntoView(el,false);}}},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);}}},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);
+}}},onKeyUp:function(e){if(this.editable!==false&&!e.isSpecialKey()){this.lastKey=e.getKey();this.dqTask.delay(this.queryDelay);}},validateBlur:function(){return !this.list||!this.list.isVisible();},initQuery:function(){this.doQuery(this.getRawValue());},doForce:function(){if(this.el.dom.value.length>0){this.el.dom.value=this.lastSelectionText===undefined?'':this.lastSelectionText;
+}},doQuery:function(q,A){if(q===undefined||q===null){q='';}var qe={query:q,forceAll:A,combo:this,cancel:false};if(this.fireEvent('beforequery',qe)===false||qe.cancel){return false;}q=qe.query;A=qe.forceAll;if(A===true||(q.length>=this.minChars)){if(this.lastQuery!=q||this.alwaysQuery){this.lastQuery=q;
+if(this.mode=='local'){this.selectedIndex=-1;if(A){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();}}},getParams:function(q){var p={};if(this.pageSize){p.start=0;p.limit=this.pageSize;}return p;},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);},collapseIf:function(e){if(!e.within(this.wrap)&&!e.within(this.list)){this.collapse();}},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);
+},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){if(e.isSpecialKey()){return false;}var k=String.fromCharCode(e.getKey()).toUpperCase();var A=false;var B=this.view.getSelectedNodes();var C=false;if(B.length){var ix=this.view.indexOf(B[0]);
+C=this.store.getAt(ix);if(!C.get(this.displayField)||C.get(this.displayField).substring(0,1).toUpperCase()!=k){C=false;}}this.store.each(function(v){if(C){if(C.id==v.id){C=false;}return;}if(v.get(this.displayField)&&v.get(this.displayField).substring(0,1).toUpperCase()==k){A=this.store.indexOf(v);
+return false;}},this);if(A===false){return true;}this.view.select(A);var sn=Roo.get(this.view.getSelectedNodes()[0]);sn.scrollIntoView(sn.dom.parentNode,false);}});
+// Roo/form/ComboBoxArray.js
+Roo.form.ComboBoxArray=function(A){this.addEvents({'beforeremove':true,'remove':true});Roo.form.ComboBoxArray.superclass.constructor.call(this,A);this.items=new Roo.util.MixedCollection(false);};Roo.extend(Roo.form.ComboBoxArray,Roo.form.TextField,{lastData:false,inputType:'hidden',width:300,name:false,hiddenName:false,items:false,hiddenEl:false,el:false,onRender:function(ct,A){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,A);if(typeof(this.combo.width)!='undefined'){this.combo.onResize(this.combo.width,0);}this.combo.initEvents();this.store=this.combo.store;
+this.valueField=this.combo.valueField;this.displayField=this.combo.displayField;this.combo.wrap.addClass('x-cbarray-grp');var B=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.outerWrap=this.combo.wrap;this.wrap=B;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');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);}this.combo.on('select',function(cb,C,ix){this.addItem(C.data);cb.setValue('');cb.el.dom.value='';},this);},getName:function(){if(!this.rendered){return ''};return this.hiddenName?this.hiddenName:this.name;
+},onResize:function(w,h){return;if(typeof w!='number'){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'));}},addItem:function(A){var B=this.combo.valueField;
+var C=this.combo.displayField;if(this.items.indexOfKey(A[B])>-1){return;}var x=new Roo.form.ComboBoxArray.Item({data:A,displayField:C,tipField:C,cb:this});this.items.add(A[B],x);this.updateHiddenEl();x.render(this.outerWrap,this.wrap.dom);},updateHiddenEl:function(){this.validate();
+if(!this.hiddenEl){return;}var ar=[];var A=this.combo.valueField;this.items.each(function(f){ar.push(f.data[A]);});this.hiddenEl.dom.value=ar.join(',');this.validate();},reset:function(){this.items.each(function(f){f.remove();});this.el.dom.value='';if(this.hiddenEl){this.hiddenEl.dom.value='';
+}},getValue:function(){return this.hiddenEl?this.hiddenEl.dom.value:'';},setValue:function(v){this.reset();if(this.store.isLocal&&(typeof(v)=='string')){this.hiddenEl.value=v;var A=[];Roo.each(v.split(','),function(k){Roo.log("CHECK "+this.valueField+','+k);
+var li=this.store.query(this.valueField,k);if(!li.length){return;}var B={};B[this.valueField]=k;B[this.displayField]=li.item(0).data[this.displayField];this.addItem(B);},this)}if(typeof(v)=='object'){Roo.each(v,function(l){this.addItem(l);},this);}},setFromData:function(v){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;
+var A=kv.split(',');var B=dv.split(',');for(var i=0;i<A.length;i++){add={};add[this.valueField]=A[i];add[this.displayField]=B[i];this.addItem(add);}},validate:function(){if(this.disabled||this.validateValue(this.processValue(this.getValue()))){this.clearInvalid();
+return true;}return false;},validateValue:function(A){return Roo.form.ComboBoxArray.superclass.validateValue.call(this,this.getValue());},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 A=[];for(var i=0;i<d.length;i++){A.push(d[i][this.valueField]);}return String(this.getValue())!==String(A.join(','));}});Roo.form.ComboBoxArray.Item=function(A){A.id=Roo.id();Roo.form.ComboBoxArray.Item.superclass.constructor.call(this,A);};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'}]},onRender:function(ct,A){Roo.form.Field.superclass.onRender.call(this,ct,A);
+if(!this.el){var B=this.getAutoCreate();this.el=ct.createChild(B,A);}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);},remove:function(){if(this.cb.disabled){return;}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);}}});
+// Roo/form/Checkbox.js
+Roo.form.Checkbox=function(A){Roo.form.Checkbox.superclass.constructor.call(this,A);this.addEvents({check:true});};Roo.extend(Roo.form.Checkbox,Roo.form.Field,{focusClass:undefined,fieldClass:"x-form-field",checked:false,defaultAutoCreate:{tag:"input",type:'hidden',autocomplete:"off"}
+,boxLabel:"",inputValue:'1',valueOff:'0',actionMode:'viewEl',itemCls:'x-menu-check-item x-form-item',groupClass:'x-menu-group-item',inputType:'hidden',inSetChecked:false,inputElement:false,basedOn:false,isFormField:true,onResize:function(){Roo.form.Checkbox.superclass.onResize.apply(this,arguments);
+if(!this.boxLabel){this.el.alignTo(this.wrap,'c-c');}},initEvents:function(){Roo.form.Checkbox.superclass.initEvents.call(this);this.el.on("click",this.onClick,this);this.el.on("change",this.onClick,this);},getResizeEl:function(){return this.wrap;},getPositionEl:function(){return this.wrap;
+},onRender:function(ct,A){Roo.form.Checkbox.superclass.onRender.call(this,ct,A);this.wrap=this.el.wrap({cls:'x-menu-check-item '});var B=this.wrap.createChild({tag:'img',cls:'x-menu-item-icon',style:'margin: 0px;',src:Roo.BLANK_IMAGE_URL});this.viewEl=B;this.wrap.on('click',this.onClick,this);
+this.el.on('DOMAttrModified',this.setFromHidden,this);this.el.on('propertychange',this.setFromHidden,this);if(this.boxLabel){this.wrap.createChild({tag:'label',htmlFor:this.el.id,cls:'x-form-cb-label',html:this.boxLabel});}this.setChecked(this.checked);},initValue:Roo.emptyFn,getValue:function(){if(this.el){return String(this.el.dom.value)==String(this.inputValue)?this.inputValue:this.valueOff;
+}return this.valueOff;},onClick:function(){if(this.disabled){return;}this.setChecked(!this.checked);},setValue:function(v,A){this.setChecked(String(v)===String(this.inputValue),A);},setChecked:function(A,B){if(this.inSetChecked){this.checked=A;return;}if(this.wrap){this.wrap[A?'addClass':'removeClass']('x-menu-item-checked');
+}this.checked=A;if(B!==true){this.fireEvent('check',this,A);}this.inSetChecked=true;this.el.dom.value=A?this.inputValue:this.valueOff;this.inSetChecked=false;},setFromHidden:function(){if(!this.el){return;}this.setValue(this.el.dom.value);},onDestroy:function(){if(this.viewEl){Roo.get(this.viewEl).remove();
+}Roo.form.Checkbox.superclass.onDestroy.call(this);}});
+// Roo/form/Radio.js
+Roo.form.Radio=function(){Roo.form.Radio.superclass.constructor.apply(this,arguments);};Roo.extend(Roo.form.Radio,Roo.form.Checkbox,{inputType:'radio',getGroupValue:function(){return this.el.up('form').child('input[name='+this.el.dom.name+']:checked',true).value;
+},onRender:function(ct,A){Roo.form.Checkbox.superclass.onRender.call(this,ct,A);if(this.inputValue!==undefined){this.el.dom.value=this.inputValue;}this.wrap=this.el.wrap({cls:"x-form-check-wrap"});if(this.boxLabel){this.wrap.createChild({tag:'label',htmlFor:this.el.id,cls:'x-form-cb-label',html:this.boxLabel}
+);}if(this.checked){this.el.dom.checked='checked';}}});
+// Roo/HtmlEditorCore.js
+Roo.HtmlEditorCore=function(A){Roo.HtmlEditorCore.superclass.constructor.call(this,A);this.addEvents({initialize:true,activate:true,beforesync:true,beforepush:true,sync:true,push:true,editorevent:true});this.applyBlacklists();};Roo.extend(Roo.HtmlEditorCore,Roo.Component,{owner:false,resizable:false,height:300,width:500,stylesheets:false,frameId:false,validationEvent:false,deferHeight:true,initialized:false,activated:false,sourceEditMode:false,onFocus:Roo.emptyFn,iframePad:3,hideMode:'offsets',clearUp:true,black:false,white:false,getDocMarkup:function(){var st='';
+if(this.stylesheets===false){Roo.get(document.head).select('style').each(function(A){st+=A.dom.outerHTML||new XMLSerializer().serializeToString(A.dom);});Roo.get(document.head).select('link').each(function(A){st+=A.dom.outerHTML||new XMLSerializer().serializeToString(A.dom);
+});}else if(!this.stylesheets.length){st='<style type="text/css">'+'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}'+'</style>';}else{}st+='<style type="text/css">'+'IMG { cursor: pointer } '+'</style>';return '<html><head>'+st+' </head><body class="roo-htmleditor-body"></body></html>';
+},onRender:function(ct,A){var _t=this;this.el=this.owner.inputEl?this.owner.inputEl():this.owner.el;this.el.dom.style.border='0 none';this.el.dom.setAttribute('tabIndex',-1);this.el.addClass('x-hidden hide');if(Roo.isIE){this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')}
+this.frameId=Roo.id();var B=this.owner.wrap.createChild({tag:'iframe',cls:'form-control',id:this.frameId,name:this.frameId,frameBorder:'no','src':Roo.SSL_SECURE_URL?Roo.SSL_SECURE_URL:"javascript:false"},this.el);this.iframe=B.dom;this.assignDocWin();this.doc.designMode='on';
+this.doc.open();this.doc.write(this.getDocMarkup());this.doc.close();var C={run:function(){this.assignDocWin();if(this.doc.body||this.doc.readyState=='complete'){try{this.doc.designMode="on";}catch(e){return;}Roo.TaskMgr.stop(C);this.initEditor.defer(10,this);
+}},interval:10,duration:10000,scope:this};Roo.TaskMgr.start(C);},onResize:function(w,h){Roo.log('resize: '+w+','+h);if(!this.iframe){return;}if(typeof w=='number'){this.iframe.style.width=w+'px';}if(typeof h=='number'){this.iframe.style.height=h+'px';if(this.doc){(this.doc.body||this.doc.documentElement).style.height=(h-(this.iframePad*2))+'px';
+}}},toggleSourceEdit:function(A){this.sourceEditMode=A===true;if(this.sourceEditMode){Roo.get(this.iframe).addClass(['x-hidden','hide']);}else{Roo.get(this.iframe).removeClass(['x-hidden','hide']);this.deferFocus();}},cleanHtml:function(A){A=String(A);if(A.length>5){if(Roo.isSafari){A=A.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi,'');
+}}if(A=='&nbsp;'){A='';}return A;},syncValue:function(){if(this.initialized){var bd=(this.doc.body||this.doc.documentElement);var A=bd.innerHTML;if(Roo.isSafari){var bs=bd.getAttribute('style');var m=bs?bs.match(/text-align:(.*?);/i):false;if(m&&m[1]){A='<div style="'+m[0]+'">'+A+'</div>';
+}}A=this.cleanHtml(A);A=A.replace(/([\x80-\uffff])/g,function(a,b){var cc=b.charCodeAt();if((cc>=0x4E00&&cc<0xA000)||(cc>=0x3400&&cc<0x4E00)||(cc>=0xf900&&cc<0xfb00)){return b;}return "&#"+cc+";"});if(this.owner.fireEvent('beforesync',this,A)!==false){this.el.dom.value=A;
+this.owner.fireEvent('sync',this,A);}}},pushValue:function(){if(this.initialized){var v=this.el.dom.value.trim();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);}}},deferFocus:function(){this.focus.defer(10,this);},focus:function(){if(this.win&&!this.sourceEditMode){this.win.focus();}else{this.el.focus();}},assignDocWin:function(){var A=this.iframe;if(Roo.isIE){this.doc=A.contentWindow.document;
+this.win=A.contentWindow;}else{if(!Roo.get(this.frameId)&&!A.contentDocument){return;}this.doc=(A.contentDocument||Roo.get(this.frameId).dom.document);this.win=(A.contentWindow||Roo.get(this.frameId).dom.contentWindow);}},initEditor:function(){this.assignDocWin();
+this.doc.designMode="on";this.doc.open();this.doc.write(this.getDocMarkup());this.doc.close();var A=(this.doc.body||this.doc.documentElement);A.bgProperties='fixed';Roo.EventManager.on(this.doc,{'mouseup':this.onEditorEvent,'dblclick':this.onEditorEvent,'click':this.onEditorEvent,'keyup':this.onEditorEvent,buffer:100,scope:this}
+);if(Roo.isGecko){Roo.EventManager.on(this.doc,'keypress',this.mozKeyPress,this);}if(Roo.isIE||Roo.isSafari||Roo.isOpera){Roo.EventManager.on(this.doc,'keydown',this.fixKeys,this);}this.initialized=true;this.owner.fireEvent('initialize',this);this.pushValue();
+},onDestroy:function(){if(this.rendered){}},onFirstFocus:function(){this.assignDocWin();this.activated=true;if(Roo.isGecko){this.win.focus();var s=this.win.getSelection();if(!s.focusNode||s.focusNode.nodeType!=3){var r=s.getRangeAt(0);r.selectNodeContents((this.doc.body||this.doc.documentElement));
+r.collapse(true);this.deferFocus();}try{this.execCmd('useCSS',true);this.execCmd('styleWithCSS',false);}catch(e){}}this.owner.fireEvent('activate',this);},adjustFont:function(A){var B=A.cmd=='increasefontsize'?1:-1;var v=parseInt(this.doc.queryCommandValue('FontSize')||3,10);
+if(Roo.isSafari){var sm={10:1,13:2,16:3,18:4,24:5,32:6,48:7};v=(v<10)?10:v;v=(v>48)?48:v;v=typeof(sm[v])=='undefined'?1:sm[v];}v=Math.max(1,v+B);this.execCmd('FontSize',v);},onEditorEvent:function(e){this.owner.fireEvent('editorevent',this,e);this.syncValue();
+},insertTag:function(tg){if(tg.toLowerCase()=='span'||tg.toLowerCase()=='code'){range=this.createRange(this.getSelection());var A=this.doc.createElement(tg.toLowerCase());A.appendChild(range.extractContents());range.insertNode(A);return;}this.execCmd("formatblock",tg);
+},insertText:function(A){var B=this.createRange();B.deleteContents();B.insertNode(this.doc.createTextNode(A));},relayCmd:function(A,B){this.win.focus();this.execCmd(A,B);this.owner.fireEvent('editorevent',this);this.owner.deferFocus();},execCmd:function(A,B){this.doc.execCommand(A,false,B===undefined?null:B);
+this.syncValue();},insertAtCursor:function(A){if(!this.activated){return;}if(Roo.isGecko||Roo.isOpera||Roo.isSafari){this.win.focus();var B,C;var D=this.win;if(D.getSelection&&D.getSelection().getRangeAt){B=D.getSelection().getRangeAt(0);C=typeof(A)=='string'?B.createContextualFragment(A):A;
+B.insertNode(C);}else if(D.document.selection&&D.document.selection.createRange){var E=typeof(A)=='string'?A:A.outerHTML;D.document.selection.createRange().pasteHTML(E);}else{var E=typeof(A)=='string'?A:A.outerHTML;this.execCmd('InsertHTML',E);}this.syncValue();
+this.deferFocus();}},mozKeyPress:function(e){if(e.ctrlKey){var c=e.getCharCode(),A;if(c>0){c=String.fromCharCode(c).toLowerCase();switch(c){case 'b':A='bold';break;case 'i':A='italic';break;case 'u':A='underline';break;case 'v':this.cleanUpPaste.defer(100,this);
+return;}if(A){this.win.focus();this.execCmd(A);this.deferFocus();e.preventDefault();}}}},fixKeys:function(){if(Roo.isIE){return function(e){var k=e.getKey(),r;if(k==e.TAB){e.stopEvent();r=this.doc.selection.createRange();if(r){r.collapse(true);r.pasteHTML('&#160;&#160;&#160;&#160;');
+this.deferFocus();}return;}if(k==e.ENTER){r=this.doc.selection.createRange();if(r){var A=r.parentElement();if(!A||A.tagName.toLowerCase()!='li'){e.stopEvent();r.pasteHTML('<br />');r.collapse(false);r.select();}}}if(String.fromCharCode(k).toLowerCase()=='v'){this.cleanUpPaste.defer(100,this);
+return;}};}else if(Roo.isOpera){return function(e){var k=e.getKey();if(k==e.TAB){e.stopEvent();this.win.focus();this.execCmd('InsertHTML','&#160;&#160;&#160;&#160;');this.deferFocus();}if(String.fromCharCode(k).toLowerCase()=='v'){this.cleanUpPaste.defer(100,this);
+return;}};}else if(Roo.isSafari){return function(e){var k=e.getKey();if(k==e.TAB){e.stopEvent();this.execCmd('InsertText','\t');this.deferFocus();return;}if(String.fromCharCode(k).toLowerCase()=='v'){this.cleanUpPaste.defer(100,this);return;}};}}(),getAllAncestors:function(){var p=this.getSelectedNode();
+var a=[];if(!p){a.push(p);p=this.getParentElement();}while(p&&(p.nodeType==1)&&(p.tagName.toLowerCase()!='body')){a.push(p);p=p.parentNode;}a.push(this.doc.body);return a;},lastSel:false,lastSelNode:false,getSelection:function(){this.assignDocWin();return Roo.isIE?this.doc.selection:this.win.getSelection();
+},getSelectedNode:function(){var A=this.createRange(this.getSelection()).cloneRange();if(Roo.isIE){var B=A.parentElement();while(true){var C=A.duplicate();C.moveToElementText(B);if(C.inRange(A)){break;}if((B.nodeType!=1)||(B.tagName.toLowerCase()=='body')){break;
+}B=B.parentElement;}return B;}var ac=A.commonAncestorContainer;if(ac.nodeType==3){ac=ac.parentNode;}var ar=ac.childNodes;var D=[];var E=[];var F=false;for(var i=0;i<ar.length;i++){if((ar[i].nodeType==3)&&(!ar[i].data.length)){continue;}if(this.rangeIntersectsNode(A,ar[i])&&this.rangeCompareNode(A,ar[i])==3){D.push(ar[i]);
+continue;}if((ar[i].nodeType==1)&&this.rangeIntersectsNode(A,ar[i])&&(this.rangeCompareNode(A,ar[i])>0)){E.push(ar[i]);continue;}if(!this.rangeIntersectsNode(A,ar[i])||(this.rangeCompareNode(A,ar[i])==0)){continue;}F=true;}if(!D.length&&E.length){D=E;}if(F||!D.length||(D.length>1)){return false;
+}return D[0];},createRange:function(A){if(typeof A!="undefined"){try{return A.getRangeAt?A.getRangeAt(0):A.createRange();}catch(e){return this.doc.createRange();}}else{return this.doc.createRange();}},getParentElement:function(){this.assignDocWin();var A=Roo.isIE?this.doc.selection:this.win.getSelection();
+var B=this.createRange(A);try{var p=B.commonAncestorContainer;while(p.nodeType==3){p=p.parentNode;}return p;}catch(e){return null;}},rangeIntersectsNode:function(A,B){var C=B.ownerDocument.createRange();try{C.selectNode(B);}catch(e){C.selectNodeContents(B);
+}var D=A.cloneRange();D.collapse(true);var E=A.cloneRange();E.collapse(false);var F=C.cloneRange();F.collapse(true);var G=C.cloneRange();G.collapse(false);return D.compareBoundaryPoints(Range.START_TO_START,G)==-1&&E.compareBoundaryPoints(Range.START_TO_START,F)==1;
+},rangeCompareNode:function(A,B){var C=B.ownerDocument.createRange();try{C.selectNode(B);}catch(e){C.selectNodeContents(B);}A.collapse(true);C.collapse(true);var ss=A.compareBoundaryPoints(Range.START_TO_START,C);var ee=A.compareBoundaryPoints(Range.END_TO_END,C);
+var D=ss==1;var E=ee==-1;if(D&&E){return 0;}if(!D&&E){return 1;}if(D&&!E){return 2;}return 3;},cleanUpPaste:function(){Roo.log('cleanuppaste');this.cleanUpChildren(this.doc.body);var A=this.cleanWordChars(this.doc.body.innerHTML);if(A!=this.doc.body.innerHTML){this.doc.body.innerHTML=A;
+}},cleanWordChars:function(A){var he=Roo.HtmlEditorCore;var B=A;Roo.each(he.swapCodes,function(sw){var C=new RegExp("\\u"+sw[0].toString(16),"g");B=B.replace(C,sw[1]);});return B;},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(A){var ed=this;if(A.nodeName=="#text"){return;}if(A.nodeName=="#comment"){A.parentNode.removeChild(A);return;}var B=A.tagName.toLowerCase();if(this.black.indexOf(B)>-1&&this.clearUp){A.parentNode.removeChild(A);
+return;}var C=Roo.HtmlEditorCore.remove.indexOf(A.tagName.toLowerCase())>-1;if(C){this.cleanUpChildren(A);while(A.childNodes.length){var cn=A.childNodes[0];A.removeChild(cn);A.parentNode.insertBefore(cn,A);}A.parentNode.removeChild(A);return;}if(!A.attributes||!A.attributes.length){this.cleanUpChildren(A);
+return;}function cleanAttr(n,v){if(v.match(/^\./)||v.match(/^\//)){return;}if(v.match(/^(http|https):\/\//)||v.match(/^mailto:/)){return;}if(v.match(/^#/)){return;}A.removeAttribute(n);}var D=this.cwhite;var E=this.cblack;function cleanStyle(n,v){if(v.match(/expression/)){A.removeAttribute(n);
+return;}var F=v.split(/;/);var G=[];Roo.each(F,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(D.length&&E.indexOf(l)>-1){return true;
+}if(D.length&&D.indexOf(l)<0){return true;}G.push(p);return true;});if(G.length){A.setAttribute(n,G.join(';'));}else{A.removeAttribute(n);}}for(var i=A.attributes.length-1;i>-1;i--){var a=A.attributes[i];if(a.name.toLowerCase().substr(0,2)=='on'){A.removeAttribute(a.name);
+continue;}if(Roo.HtmlEditorCore.ablack.indexOf(a.name.toLowerCase())>-1){A.removeAttribute(a.name);continue;}if(Roo.HtmlEditorCore.aclean.indexOf(a.name.toLowerCase())>-1){cleanAttr(a.name,a.value);continue;}if(a.name=='style'){cleanStyle(a.name,a.value);
+continue;}if(a.name=='class'){if(a.value.match(/^Mso/)){A.className='';}if(a.value.match(/body/)){A.className='';}continue;}}this.cleanUpChildren(A);},cleanWord:function(A){if(!A){this.cleanWord(this.doc.body);return;}if(A.nodeName=="#text"){return;}if(A.nodeName=="#comment"){A.parentNode.removeChild(A);
+return;}if(A.tagName.toLowerCase().match(/^(style|script|applet|embed|noframes|noscript)$/)){A.parentNode.removeChild(A);return;}if(A.tagName.toLowerCase().match(/^(meta|link|\\?xml:|st1:|o:|font)/)){while(A.childNodes.length){var cn=A.childNodes[0];A.removeChild(cn);
+A.parentNode.insertBefore(cn,A);}A.parentNode.removeChild(A);this.iterateChildren(A,this.cleanWord);return;}if(A.className.length){var cn=A.className.split(/\W+/);var B=[];Roo.each(cn,function(E){if(E.match(/Mso[a-zA-Z]+/)){return;}B.push(E);});A.className=B.length?B.join(' '):'';
+if(!B.length){A.removeAttribute("class");}}if(A.hasAttribute("lang")){A.removeAttribute("lang");}if(A.hasAttribute("style")){var C=A.getAttribute("style").split(";");var D=[];Roo.each(C,function(s){if(!s.match(/:/)){return;}var kv=s.split(":");if(kv[0].match(/^(mso-|line|font|background|margin|padding|color)/)){return;
+}D.push(s);});A.setAttribute("style",D.length?D.join(';'):'');if(!D.length){A.removeAttribute('style');}}this.iterateChildren(A,this.cleanWord);},iterateChildren:function(A,fn){if(!A.childNodes.length){return;}for(var i=A.childNodes.length-1;i>-1;i--){fn.call(this,A.childNodes[i])}
+},cleanTableWidths:function(A){if(!A){this.cleanTableWidths(this.doc.body);return;}if(A.nodeName=="#text"||A.nodeName=="#comment"){return;}Roo.log(A.tagName);if(!A.tagName.toLowerCase().match(/^(table|td|tr)$/)){this.iterateChildren(A,this.cleanTableWidths);
+return;}if(A.hasAttribute('width')){A.removeAttribute('width');}if(A.hasAttribute("style")){var B=A.getAttribute("style").split(";");var C=[];Roo.each(B,function(s){if(!s.match(/:/)){return;}var kv=s.split(":");if(kv[0].match(/^\s*(width|min-width)\s*$/)){return;
+}C.push(s);});A.setAttribute("style",C.length?C.join(';'):'');if(!C.length){A.removeAttribute('style');}}this.iterateChildren(A,this.cleanTableWidths);},domToHTML:function(A,B,C){B=B||0;C=C||false;if(!A){return this.domToHTML(this.doc.body);}var j;var D=false;
+var E=A.nodeName;var F=Roo.util.Format.htmlEncode(A.tagName);if(E=='#text'){return C?A.nodeValue:A.nodeValue.trim();}var G='';if(E!='BODY'){var i=0;if(F){var H=[];for(i=0;i<A.attributes.length;i++){var I=A.attributes.item(i).name;if(!A.attributes.item(i).value.length){continue;
+}H.push(I+'="'+Roo.util.Format.htmlEncode(A.attributes.item(i).value)+'"');}G="<"+A.tagName+(H.length?(' '+H.join(' ')):'')+">";}else{}}else{F=false;}if(['IMG','BR','HR','INPUT'].indexOf(F)>-1){return G;}if(['PRE','TEXTAREA','TD','A','SPAN'].indexOf(F)>-1){C=true;
+}i=0;var J=A.childNodes.item(i);var D=true;var K='';lastnode='';while(J){var L=C;if(lastnode=='SPAN'){L=true;}if(J.nodeName=='#text'){var M=Roo.util.Format.htmlEncode(J.nodeValue);M=C?M:M.trim();if(!L&&M.length>80){K+="\n"+(new Array(B+1)).join("  ");}K+=M;
+i++;J=A.childNodes.item(i);lastNode='';continue;}D=false;K+=L?'':"\n"+(new Array(B+1)).join("  ");K+=this.domToHTML(J,B+1,C);lastnode=J.nodeName;i++;J=A.childNodes.item(i);}G+=K;if(!D){G+=C?'':"\n"+(new Array(B)).join("  ");}if(F){G+="</"+F+">";}return G;
+},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.white=[];this.black=[];Roo.each(Roo.HtmlEditorCore.white,function(A){if(b.indexOf(A)>-1){return;
+}this.white.push(A);},this);Roo.each(w,function(A){if(b.indexOf(A)>-1){return;}if(this.white.indexOf(A)>-1){return;}this.white.push(A);},this);Roo.each(Roo.HtmlEditorCore.black,function(A){if(w.indexOf(A)>-1){return;}this.black.push(A);},this);Roo.each(b,function(A){if(w.indexOf(A)>-1){return;
+}if(this.black.indexOf(A)>-1){return;}this.black.push(A);},this);w=typeof(this.owner.cwhite)!='undefined'&&this.owner.cwhite?this.owner.cwhite:[];b=typeof(this.owner.cblack)!='undefined'&&this.owner.cblack?this.owner.cblack:[];this.cwhite=[];this.cblack=[];
+Roo.each(Roo.HtmlEditorCore.cwhite,function(A){if(b.indexOf(A)>-1){return;}this.cwhite.push(A);},this);Roo.each(w,function(A){if(b.indexOf(A)>-1){return;}if(this.cwhite.indexOf(A)>-1){return;}this.cwhite.push(A);},this);Roo.each(Roo.HtmlEditorCore.cblack,function(A){if(w.indexOf(A)>-1){return;
+}this.cblack.push(A);},this);Roo.each(b,function(A){if(w.indexOf(A)>-1){return;}if(this.cblack.indexOf(A)>-1){return;}this.cblack.push(A);},this);},setStylesheets:function(A){if(typeof(A)=='string'){Roo.get(this.iframe.contentDocument.head).createChild({tag:'link',rel:'stylesheet',type:'text/css',href:A}
+);return;}var B=this;Roo.each(A,function(s){if(!s.length){return;}Roo.get(B.iframe.contentDocument.head).createChild({tag:'link',rel:'stylesheet',type:'text/css',href:s});});},removeStylesheets:function(){var A=this;Roo.each(Roo.get(A.iframe.contentDocument.head).select('link[rel=stylesheet]',true).elements,function(s){s.remove();
+});}});Roo.HtmlEditorCore.white=['area','br','img','input','hr','wbr','address','blockquote','center','dd','dir','div','dl','dt','h1','h2','h3','h4','h5','h6','hr','isindex','listing','marquee','menu','multicol','ol','p','plaintext','pre','table','ul','xmp','caption','col','colgroup','tbody','td','tfoot','th','thead','tr','dir','menu','ol','ul','dl','embed','object'];
+Roo.HtmlEditorCore.black=['applet','base','basefont','bgsound','blink','body','frame','frameset','head','html','ilayer','iframe','layer','link','meta','object','script','style','title','xml'];Roo.HtmlEditorCore.clean=['script','style','title','xml'];Roo.HtmlEditorCore.remove=['font'];
+Roo.HtmlEditorCore.ablack=['on'];Roo.HtmlEditorCore.aclean=['action','background','codebase','dynsrc','href','lowsrc'];Roo.HtmlEditorCore.pwhite=['http','https','mailto'];Roo.HtmlEditorCore.cwhite=[];Roo.HtmlEditorCore.cblack=[];Roo.HtmlEditorCore.swapCodes=[[8211,"--"],[8212,"--"],[8216,"'"],[8217,"'"],[8220,'"'],[8221,'"'],[8226,"*"],[8230,"..."]];
+
+// Roo/form/HtmlEditor.js
+Roo.form.HtmlEditor=function(A){Roo.form.HtmlEditor.superclass.constructor.call(this,A);if(!this.toolbars){this.toolbars=[];}this.editorcore=new Roo.HtmlEditorCore(Roo.apply({owner:this},A));};Roo.extend(Roo.form.HtmlEditor,Roo.form.Field,{clearUp:true,toolbars:false,resizable:false,height:300,width:500,stylesheets:false,cblack:false,cwhite:false,black:false,white:false,frameId:false,validationEvent:false,deferHeight:true,initialized:false,activated:false,onFocus:Roo.emptyFn,iframePad:3,hideMode:'offsets',actionMode:'container',defaultAutoCreate:{tag:"textarea",style:"width:500px;height:300px;",autocomplete:"new-password"}
+,initComponent:function(){this.addEvents({initialize:true,activate:true,beforesync:true,beforepush:true,sync:true,push:true,editmodechange:true,editorevent:true,firstfocus:true,autosave:true,savedpreview:true,stylesheetsclick:true});this.defaultAutoCreate={tag:"textarea",style:'width: '+this.width+'px;height: '+this.height+'px;',autocomplete:"new-password"}
+;},createToolbar:function(A){Roo.log("create toolbars");if(!A.toolbars||!A.toolbars.length){A.toolbars=[new Roo.form.HtmlEditor.ToolbarStandard()];}for(var i=0;i<A.toolbars.length;i++){A.toolbars[i]=Roo.factory(typeof(A.toolbars[i])=='string'?{xtype:A.toolbars[i]}
+:A.toolbars[i],Roo.form.HtmlEditor);A.toolbars[i].init(A);}},onRender:function(ct,A){var _t=this;Roo.form.HtmlEditor.superclass.onRender.call(this,ct,A);this.wrap=this.el.wrap({cls:'x-html-editor-wrap',cn:{cls:'x-html-editor-tb'}});this.editorcore.onRender(ct,A);
+if(this.resizable){this.resizeEl=new Roo.Resizable(this.wrap,{pinned:true,wrap:true,dynamic:true,minHeight:this.height,height:this.height,handles:this.resizable,width:this.width,listeners:{resize:function(r,w,h){_t.onResize(w,h);}}});}this.createToolbar(this);
+if(!this.width){this.setSize(this.wrap.getSize());}if(this.resizeEl){this.resizeEl.resizeTo.defer(100,this.resizeEl,[this.width,this.height]);}this.keyNav=new Roo.KeyNav(this.el,{"tab":function(e){e.preventDefault();var B=this.getValue();var C=this.el.dom.selectionStart;
+var D=this.el.dom.selectionEnd;if(!e.shiftKey){this.setValue(B.substring(0,C)+"\t"+B.substring(D));this.el.dom.setSelectionRange(D+1,D+1);return;}var f=B.substring(0,C).split("\t");if(f.pop().length!=0){return;}this.setValue(f.join("\t")+B.substring(D));this.el.dom.setSelectionRange(C-1,C-1);
+},"home":function(e){e.preventDefault();var B=this.el.dom.selectionStart;var C=this.getValue().split("\n");if(!C.length){return;}if(e.ctrlKey){this.el.dom.setSelectionRange(0,0);return;}var D=0;for(var i=0;i<C.length;i++){D+=C[i].length;if(i!=0){D+=1;}if(D<B){continue;
+}D-=C[i].length;break;}if(!e.shiftKey){this.el.dom.setSelectionRange(D,D);return;}this.el.dom.selectionStart=D;this.el.dom.selectionEnd=B;},"end":function(e){e.preventDefault();var B=this.el.dom.selectionStart;var C=this.getValue().split("\n");if(!C.length){return;
+}if(e.ctrlKey){this.el.dom.setSelectionRange(this.getValue().length,this.getValue().length);return;}var D=0;for(var i=0;i<C.length;i++){D+=C[i].length;if(i!=0){D+=1;}if(D<B){continue;}break;}if(!e.shiftKey){this.el.dom.setSelectionRange(D,D);return;}this.el.dom.selectionStart=B;
+this.el.dom.selectionEnd=D;},scope:this,doRelay:function(B,C,D){return Roo.KeyNav.prototype.doRelay.apply(this,arguments);},forceKeyDown:true});},onResize:function(w,h){Roo.form.HtmlEditor.superclass.onResize.apply(this,arguments);var ew=false;var eh=false;
+if(this.el){if(typeof w=='number'){var aw=w-this.wrap.getFrameWidth('lr');this.el.setWidth(this.adjustWidth('textarea',aw));ew=aw;}if(typeof h=='number'){var A=0;for(var i=0;i<this.toolbars.length;i++){A+=this.toolbars[i].tb.el.getHeight();if(this.toolbars[i].footer){A+=this.toolbars[i].footer.el.getHeight();
+}}var ah=h-this.wrap.getFrameWidth('tb')-A;ah-=5;this.el.setHeight(this.adjustWidth('textarea',ah));var eh=ah;}}Roo.log('onResize:'+[w,h,ew,eh].join(','));this.editorcore.onResize(ew,eh);},toggleSourceEdit:function(A){this.editorcore.toggleSourceEdit(A);if(this.editorcore.sourceEditMode){Roo.log('editor - showing textarea');
+this.editorcore.syncValue();this.el.removeClass('x-hidden');this.el.dom.removeAttribute('tabIndex');this.el.focus();for(var i=0;i<this.toolbars.length;i++){if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){this.toolbars[i].tb.hide();this.toolbars[i].footer.hide();
+}}}else{Roo.log('editor - hiding textarea');this.editorcore.pushValue();this.el.addClass('x-hidden');this.el.dom.setAttribute('tabIndex',-1);for(var i=0;i<this.toolbars.length;i++){if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){this.toolbars[i].tb.show();
+this.toolbars[i].footer.show();}}}this.setSize(this.wrap.getSize());this.onResize(this.wrap.getSize().width,this.wrap.getSize().height);this.fireEvent('editmodechange',this,this.editorcore.sourceEditMode);},adjustSize:Roo.BoxComponent.prototype.adjustSize,getResizeEl:function(){return this.wrap;
+},getPositionEl:function(){return this.wrap;},initEvents:function(){this.originalValue=this.getValue();},markInvalid:Roo.emptyFn,clearInvalid:Roo.emptyFn,setValue:function(v){Roo.form.HtmlEditor.superclass.setValue.call(this,v);this.editorcore.pushValue();
+},deferFocus:function(){this.focus.defer(10,this);},focus:function(){this.editorcore.focus();},onDestroy:function(){if(this.rendered){for(var i=0;i<this.toolbars.length;i++){this.toolbars[i].onDestroy();}this.wrap.dom.innerHTML='';this.wrap.remove();}},onFirstFocus:function(){this.editorcore.onFirstFocus();
+for(var i=0;i<this.toolbars.length;i++){this.toolbars[i].onFirstFocus();}},syncValue:function(){this.editorcore.syncValue();},pushValue:function(){this.editorcore.pushValue();},setStylesheets:function(A){this.editorcore.setStylesheets(A);},removeStylesheets:function(){this.editorcore.removeStylesheets();
+}});
+// Roo/form/HtmlEditor/ToolbarStandard.js
+Roo.form.HtmlEditor.ToolbarStandard=function(A){Roo.apply(this,A);this.disable=this.disable||{};Roo.applyIf(this.disable,{fontSize:true,colors:true,specialElements:true});};Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,{tb:false,rendered:false,editor:false,editorcore:false,disable:false,createLinkText:'Please enter the URL for the link:',defaultLinkValue:'http:/'+'/',fontFamilies:['Arial','Courier New','Tahoma','Times New Roman','Verdana'],specialChars:["&#169;","&#174;","&#8482;","&#163;","&#8230;","&#247;","&#8364;","&#176;"],specialElements:[{text:"Insert Table",xtype:'MenuItem',xns:Roo.Menu,ihtml:'<table><tr><td>Cell</td></tr></table>'}
+,{text:"Insert Image",xtype:'MenuItem',xns:Roo.Menu,ihtml:'<img src="about:blank"/>'}],inputElements:["form","input:text","input:hidden","input:checkbox","input:radio","input:password","input:submit","input:button","select","textarea","label"],formats:[["p"],["h1"],["h2"],["h3"],["h4"],["h5"],["h6"],["pre"],["code"],["abbr"],["acronym"],["address"],["cite"],["samp"],["var"],['div'],['span']],cleanStyles:["font-size"],defaultFont:'tahoma',fontSelect:false,formatCombo:false,init:function(A){this.editor=A;
+this.editorcore=A.editorcore?A.editorcore:A;var B=this.editorcore;var _t=this;var C=B.frameId;var D=this;function btn(id,H,I){var J=C+'-'+id;return {id:J,cmd:id,cls:'x-btn-icon x-edit-'+id,enableToggle:H!==false,scope:_t,handler:I||_t.relayBtnCmd,clickEvent:'mousedown',tooltip:D.buttonTips[id]||undefined,tabIndex:-1}
+;}var tb=new Roo.Toolbar(A.wrap.dom.firstChild);this.tb=tb;tb.el.on('click',function(e){e.preventDefault();});if(!this.disable.font){};if(!this.disable.formats){this.formatCombo=new Roo.form.ComboBox({store:new Roo.data.SimpleStore({id:'tag',fields:['tag'],data:this.formats}
+),blockFocus:true,name:'',displayField:'tag',typeAhead:false,mode:'local',editable:false,triggerAction:'all',emptyText:'Add tag',selectOnFocus:true,width:135,listeners:{'select':function(c,r,i){B.insertTag(r.get('tag'));A.focus();}}});tb.addField(this.formatCombo);
+}if(!this.disable.format){tb.add(btn('bold'),btn('italic'),btn('underline'),btn('strikethrough'));};if(!this.disable.fontSize){tb.add('-',btn('increasefontsize',false,B.adjustFont),btn('decreasefontsize',false,B.adjustFont));};if(!this.disable.colors){tb.add('-',{id:B.frameId+'-forecolor',cls:'x-btn-icon x-edit-forecolor',clickEvent:'mousedown',tooltip:this.buttonTips['forecolor']||undefined,tabIndex:-1,menu:new Roo.menu.ColorMenu({allowReselect:true,focus:Roo.emptyFn,value:'000000',plain:true,selectHandler:function(cp,H){B.execCmd('forecolor',Roo.isSafari||Roo.isIE?'#'+H:H);
+A.deferFocus();},scope:B,clickEvent:'mousedown'})},{id:B.frameId+'backcolor',cls:'x-btn-icon x-edit-backcolor',clickEvent:'mousedown',tooltip:this.buttonTips['backcolor']||undefined,tabIndex:-1,menu:new Roo.menu.ColorMenu({focus:Roo.emptyFn,value:'FFFFFF',plain:true,allowReselect:true,selectHandler:function(cp,H){if(Roo.isGecko){B.execCmd('useCSS',false);
+B.execCmd('hilitecolor',H);B.execCmd('useCSS',true);A.deferFocus();}else{B.execCmd(Roo.isOpera?'hilitecolor':'backcolor',Roo.isSafari||Roo.isIE?'#'+H:H);A.deferFocus();}},scope:B,clickEvent:'mousedown'})});};if(!this.disable.alignments){tb.add('-',btn('justifyleft'),btn('justifycenter'),btn('justifyright'));
+};if(!this.disable.links){tb.add('-',btn('createlink',false,this.createLink));};if(!this.disable.lists){tb.add('-',btn('insertorderedlist'),btn('insertunorderedlist'));}if(!this.disable.sourceEdit){tb.add('-',btn('sourceedit',true,function(H){this.toggleSourceEdit(H.pressed);
+}));}var E={};if(!this.disable.special){E={text:"&#169;",cls:'x-edit-none',menu:{items:[]}};for(var i=0;i<this.specialChars.length;i++){E.menu.items.push({html:this.specialChars[i],handler:function(a,b){B.insertAtCursor(String.fromCharCode(a.html.replace('&#','').replace(';','')));
+},tabIndex:-1});}tb.add(E);}var F={};if(!this.disable.cleanStyles){F={cls:'x-btn-icon x-btn-clear',menu:{items:[]}};for(var i=0;i<this.cleanStyles.length;i++){F.menu.items.push({actiontype:this.cleanStyles[i],html:'Remove '+this.cleanStyles[i],handler:function(a,b){var c=Roo.get(B.doc.body);
+c.select('[style]').each(function(s){s.dom.style.removeProperty(a.actiontype);});B.syncValue();},tabIndex:-1});}F.menu.items.push({actiontype:'tablewidths',html:'Remove Table Widths',handler:function(a,b){B.cleanTableWidths();B.syncValue();},tabIndex:-1});
+F.menu.items.push({actiontype:'word',html:'Remove MS Word Formating',handler:function(a,b){B.cleanWord();B.syncValue();},tabIndex:-1});F.menu.items.push({actiontype:'all',html:'Remove All Styles',handler:function(a,b){var c=Roo.get(B.doc.body);c.select('[style]').each(function(s){s.dom.removeAttribute('style');
+});B.syncValue();},tabIndex:-1});F.menu.items.push({actiontype:'all',html:'Remove All CSS Classes',handler:function(a,b){var c=Roo.get(B.doc.body);c.select('[class]').each(function(s){s.dom.className='';});B.syncValue();},tabIndex:-1});F.menu.items.push({actiontype:'tidy',html:'Tidy HTML Source',handler:function(a,b){B.doc.body.innerHTML=B.domToHTML();
+B.syncValue();},tabIndex:-1});tb.add(F);}if(!this.disable.specialElements){var G={text:"Other;",cls:'x-edit-none',menu:{items:[]}};for(var i=0;i<this.specialElements.length;i++){G.menu.items.push(Roo.apply({handler:function(a,b){A.insertAtCursor(this.ihtml);
+}},this.specialElements[i]));}tb.add(G);}if(this.btns){for(var i=0;i<this.btns.length;i++){var b=Roo.factory(this.btns[i],Roo.form);b.cls='x-edit-none';if(typeof(this.btns[i].cls)!='undefined'&&this.btns[i].cls.indexOf('x-init-enable')!==-1){b.cls+=' x-init-enable';
+}b.scope=B;tb.add(b);}}this.tb.items.each(function(H){if(H.id!=B.frameId+'-sourceedit'&&(typeof(H.cls)!='undefined'&&H.cls.indexOf('x-init-enable')===-1)){H.disable();}});this.rendered=true;A.on('editorevent',this.updateToolbar,this);},relayBtnCmd:function(A){this.editorcore.relayCmd(A.cmd);
+},createLink:function(){Roo.log("create link?");var A=prompt(this.createLinkText,this.defaultLinkValue);if(A&&A!='http:/'+'/'){this.editorcore.relayCmd('createlink',A);}},updateToolbar:function(){if(!this.editorcore.activated){this.editor.onFirstFocus();return;
+}var A=this.tb.items.map,B=this.editorcore.doc,C=this.editorcore.frameId;if(!this.disable.font&&!Roo.isSafari){}if(!this.disable.format){A[C+'-bold'].toggle(B.queryCommandState('bold'));A[C+'-italic'].toggle(B.queryCommandState('italic'));A[C+'-underline'].toggle(B.queryCommandState('underline'));
+A[C+'-strikethrough'].toggle(B.queryCommandState('strikethrough'));}if(!this.disable.alignments){A[C+'-justifyleft'].toggle(B.queryCommandState('justifyleft'));A[C+'-justifycenter'].toggle(B.queryCommandState('justifycenter'));A[C+'-justifyright'].toggle(B.queryCommandState('justifyright'));
+}if(!Roo.isSafari&&!this.disable.lists){A[C+'-insertorderedlist'].toggle(B.queryCommandState('insertorderedlist'));A[C+'-insertunorderedlist'].toggle(B.queryCommandState('insertunorderedlist'));}var D=this.editorcore.getAllAncestors();if(this.formatCombo){var E=this.formatCombo.store;
+this.formatCombo.setValue("");for(var i=0;i<D.length;i++){if(D[i]&&E.query('tag',D[i].tagName.toLowerCase(),false).length){this.formatCombo.setValue(D[i].tagName.toLowerCase());break;}}}Roo.menu.MenuMgr.hideAll();},createFontOptions:function(){var A=[],fs=this.fontFamilies,ff,lc;
+for(var i=0,B=fs.length;i<B;i++){ff=fs[i];lc=ff.toLowerCase();A.push('<option value="',lc,'" style="font-family:',ff,';"',(this.defaultFont==lc?' selected="true">':'>'),ff,'</option>');}return A.join('');},toggleSourceEdit:function(A){Roo.log("toolbar toogle");
+if(A===undefined){A=!this.sourceEditMode;}this.sourceEditMode=A===true;var B=this.tb.items.get(this.editorcore.frameId+'-sourceedit');if(B.pressed!==this.sourceEditMode){B.toggle(this.sourceEditMode);return;}if(A){Roo.log("disabling buttons");this.tb.items.each(function(C){if(C.cmd!='sourceedit'&&(typeof(C.cls)!='undefined'&&C.cls.indexOf('x-init-enable')===-1)){C.disable();
+}});}else{Roo.log("enabling buttons");if(this.editorcore.initialized){this.tb.items.each(function(C){C.enable();});}}Roo.log("calling toggole on editor");this.editor.toggleSourceEdit(A);},buttonTips:{bold:{title:'Bold (Ctrl+B)',text:'Make the selected text bold.',cls:'x-html-editor-tip'}
+,italic:{title:'Italic (Ctrl+I)',text:'Make the selected text italic.',cls:'x-html-editor-tip'},underline:{title:'Underline (Ctrl+U)',text:'Underline the selected text.',cls:'x-html-editor-tip'},strikethrough:{title:'Strikethrough',text:'Strikethrough the selected text.',cls:'x-html-editor-tip'}
+,increasefontsize:{title:'Grow Text',text:'Increase the font size.',cls:'x-html-editor-tip'},decreasefontsize:{title:'Shrink Text',text:'Decrease the font size.',cls:'x-html-editor-tip'},backcolor:{title:'Text Highlight Color',text:'Change the background color of the selected text.',cls:'x-html-editor-tip'}
+,forecolor:{title:'Font Color',text:'Change the color of the selected text.',cls:'x-html-editor-tip'},justifyleft:{title:'Align Text Left',text:'Align text to the left.',cls:'x-html-editor-tip'},justifycenter:{title:'Center Text',text:'Center text in the editor.',cls:'x-html-editor-tip'}
+,justifyright:{title:'Align Text Right',text:'Align text to the right.',cls:'x-html-editor-tip'},insertunorderedlist:{title:'Bullet List',text:'Start a bulleted list.',cls:'x-html-editor-tip'},insertorderedlist:{title:'Numbered List',text:'Start a numbered list.',cls:'x-html-editor-tip'}
+,createlink:{title:'Hyperlink',text:'Make the selected text a hyperlink.',cls:'x-html-editor-tip'},sourceedit:{title:'Source Edit',text:'Switch to source editing mode.',cls:'x-html-editor-tip'}},onDestroy:function(){if(this.rendered){this.tb.items.each(function(A){if(A.menu){A.menu.removeAll();
+if(A.menu.el){A.menu.el.destroy();}}A.destroy();});}},onFirstFocus:function(){this.tb.items.each(function(A){A.enable();});}});
+// Roo/form/HtmlEditor/ToolbarContext.js
+Roo.form.HtmlEditor.ToolbarContext=function(A){Roo.apply(this,A);this.styles=this.styles||{};};Roo.form.HtmlEditor.ToolbarContext.types={'IMG':{width:{title:"Width",width:40},height:{title:"Height",width:40},align:{title:"Align",opts:[[""],["left"],["right"],["center"],["top"]],width:80}
+,border:{title:"Border",width:40},alt:{title:"Alt",width:120},src:{title:"Src",width:220}},'A':{name:{title:"Name",width:50},target:{title:"Target",width:120},href:{title:"Href",width:220}},'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:{title:"name",width:120}
+,value:{title:"Value",width:120},width:{title:"Width",width:40}},'LABEL':{'for':{title:"For",width:120}},'TEXTAREA':{name:{title:"name",width:120},rows:{title:"Rows",width:20},cols:{title:"Cols",width:20}},'SELECT':{name:{title:"name",width:120},selectoptions:{title:"Options",width:200}
+},'BODY':{title:{title:"Title",width: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}},'*':{}};Roo.form.HtmlEditor.ToolbarContext.stores=false;Roo.form.HtmlEditor.ToolbarContext.options={'font-family':[['Helvetica,Arial,sans-serif','Helvetica'],['Courier New','Courier New'],['Tahoma','Tahoma'],['Times New Roman,serif','Times'],['Verdana','Verdana']]}
+;Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,{tb:false,rendered:false,editor:false,editorcore:false,disable:false,styles:false,options:false,toolbars:false,init:function(A){this.editor=A;this.editorcore=A.editorcore?A.editorcore:A;var B=this.editorcore;
+var C=B.frameId;var D=this;function btn(id,F,G){var H=C+'-'+id;return {id:H,cmd:id,cls:'x-btn-icon x-edit-'+id,enableToggle:F!==false,scope:B,handler:G||B.relayBtnCmd,clickEvent:'mousedown',tooltip:D.buttonTips[id]||undefined,tabIndex:-1};}var E=A.wrap.createChild({tag:'div'}
+,A.wrap.dom.firstChild.nextSibling,true);var ty=Roo.form.HtmlEditor.ToolbarContext.types;this.toolbars={};for(var i in ty){this.toolbars[i]=this.buildToolbar(ty[i],i);}this.tb=this.toolbars.BODY;this.tb.el.show();this.buildFooter();this.footer.show();A.on('hide',function(){this.footer.hide()}
+,this);A.on('show',function(){this.footer.show()},this);this.rendered=true;A.on('editorevent',this.updateToolbar,this);},updateToolbar:function(A,ev,B){if(!this.editorcore.activated){this.editor.onFirstFocus();return;}if(ev&&(ev.type=='mouseup'||ev.type=='click')&&ev.target&&ev.target.tagName=='IMG'){B=ev.target;
+var C=B.ownerDocument.createRange();try{C.selectNode(B);}catch(e){C.selectNodeContents(B);}var s=this.editorcore.win.getSelection();s.removeAllRanges();s.addRange(C);}var D=B?false:true;var E=this.editorcore.getAllAncestors();var ty=Roo.form.HtmlEditor.ToolbarContext.types;
+if(!B){B=E.length?(E[0]?E[0]:E[1]):this.editorcore.doc.body;B=B?B:this.editorcore.doc.body;B=B.tagName.length?B:this.editorcore.doc.body;}var tn=B.tagName.toUpperCase();tn=B.tagName.toUpperCase();var F=this.tb.selectedNode;this.tb.selectedNode=B;if((this.tb.name!=tn)||(F!=this.tb.selectedNode)||ev===false){this.tb.el.hide();
+this.tb=typeof(ty[tn])!='undefined'?this.toolbars[tn]:this.toolbars['*'];this.tb.el.show();this.tb.items.first().el.innerHTML=tn+':&nbsp;';if(this.tb.fields){this.tb.fields.each(function(e){if(e.stylename){e.setValue(B.style[e.stylename]);return;}e.setValue(B.getAttribute(e.attrname));
+});}var G=false;for(var i in this.styles){G=true;break;}if(G){var st=this.tb.fields.item(0);st.store.removeAll();var cn=B.className.split(/\s+/);var H=[];if(this.styles['*']){Roo.each(this.styles['*'],function(v){H.push([v,cn.indexOf(v)>-1?1:0]);});}if(this.styles[tn]){Roo.each(this.styles[tn],function(v){H.push([v,cn.indexOf(v)>-1?1:0]);
+});}st.store.loadData(H);st.collapse();st.setValue(cn);}this.tb.selectedNode=B;Roo.menu.MenuMgr.hideAll();}if(!D){return;}var I='';this.footerEls=E.reverse();Roo.each(this.footerEls,function(a,i){if(!a){return;}I+=I.length?' &gt; ':'';I+='<span class="x-ed-loc-'+i+'">'+a.tagName+'</span>';
+});var sz=this.footDisp.up('td').getSize();this.footDisp.dom.style.width=(sz.width-10)+'px';this.footDisp.dom.style.marginLeft='5px';this.footDisp.dom.style.overflow='hidden';this.footDisp.dom.innerHTML=I;},onDestroy:function(){if(this.rendered){this.tb.items.each(function(A){if(A.menu){A.menu.removeAll();
+if(A.menu.el){A.menu.el.destroy();}}A.destroy();});}},onFirstFocus:function(){this.tb.items.each(function(A){A.enable();});},buildToolbar:function(A,nm){var B=this.editor;var C=this.editorcore;var D=B.wrap.createChild({tag:'div'},B.wrap.dom.firstChild.nextSibling,true);
+var tb=new Roo.Toolbar(D);tb.add(nm+":&nbsp;");var E=[];for(var i in this.styles){E.push(i);}if(E&&E.length){tb.addField(new Roo.form.ComboBox({store:new Roo.data.SimpleStore({id:'val',fields:['val','selected'],data:[]}),name:'-roo-edit-className',attrname:'className',displayField:'val',typeAhead:false,mode:'local',editable:false,triggerAction:'all',emptyText:'Select Style',selectOnFocus:true,width:130,listeners:{'select':function(c,r,i){tb.selectedNode.className=r?r.get('val'):'';
+C.syncValue();}}}));}var F=Roo.form.HtmlEditor.ToolbarContext;var G=F.options;for(var i in A){var H=A[i];tb.add(H.title+":&nbsp;");var I=H.opts?H.opts:false;if(H.optname){I=G[H.optname];}if(I){tb.addField(new Roo.form.ComboBox({store:typeof(F.stores[i])!='undefined'?Roo.factory(F.stores[i],Roo.data):new Roo.data.SimpleStore({id:'val',fields:['val','display'],data:I}
+),name:'-roo-edit-'+i,attrname:i,stylename:H.style?H.style:false,displayField:H.displayField?H.displayField:'val',valueField:'val',typeAhead:false,mode:typeof(F.stores[i])!='undefined'?'remote':'local',editable:false,triggerAction:'all',emptyText:'Select',selectOnFocus:true,width:H.width?H.width:130,listeners:{'select':function(c,r,i){if(c.stylename){tb.selectedNode.style[c.stylename]=r.get('val');
+return;}tb.selectedNode.setAttribute(c.attrname,r.get('val'));}}}));continue;tb.addField(new Roo.form.TextField({name:i,width:100,value:''}));continue;}tb.addField(new Roo.form.TextField({name:'-roo-edit-'+i,attrname:i,width:H.width,value:'',listeners:{'change':function(f,nv,ov){tb.selectedNode.setAttribute(f.attrname,nv);
+}}}));}var J=this;if(nm=='BODY'){tb.addSeparator();tb.addButton({text:'Stylesheets',listeners:{click:function(){J.editor.fireEvent('stylesheetsclick',J.editor);}}});}tb.addFill();tb.addButton({text:'Remove Tag',listeners:{click:function(){var sn=tb.selectedNode;
+var pn=sn.parentNode;var K=sn.childNodes[0];var en=sn.childNodes[sn.childNodes.length-1];while(sn.childNodes.length){var L=sn.childNodes[0];sn.removeChild(L);pn.insertBefore(L,sn);}pn.removeChild(sn);var M=C.createRange();M.setStart(K,0);M.setEnd(en,0);var N=C.getSelection();
+N.removeAllRanges();N.addRange(M);J.updateToolbar(null,null,null);J.footDisp.dom.innerHTML='';}}});tb.el.on('click',function(e){e.preventDefault();});tb.el.setVisibilityMode(Roo.Element.DISPLAY);tb.el.hide();tb.name=nm;return tb;},buildFooter:function(){var A=this.editor.wrap.createChild();
+this.footer=new Roo.Toolbar(A);var B=new Roo.Toolbar.Fill();var _t=this;this.footer.add({text:'&lt;',xtype:'Button',handler:function(){_t.footDisp.scrollTo('left',0,true)}});this.footer.add(B);this.footer.add({text:'&gt;',xtype:'Button',handler:function(){_t.footDisp.select('span').last().scrollIntoView(_t.footDisp,true);
+}});var A=Roo.get(B.el);A.addClass('x-editor-context');this.footDispWrap=A;this.footDispWrap.overflow='hidden';this.footDisp=A.createChild();this.footDispWrap.on('click',this.onContextClick,this)},onContextClick:function(ev,A){ev.preventDefault();var cn=A.className;
+if(!cn.match(/x-ed-loc-/)){return;}var n=cn.split('-').pop();var B=this.footerEls;var C=B[n];var D=this.editorcore.createRange();D.selectNodeContents(C);var E=this.editorcore.getSelection();E.removeAllRanges();E.addRange(D);this.updateToolbar(null,null,C);
+}});
+// Roo/form/BasicForm.js
+Roo.form.BasicForm=function(el,A){this.allItems=[];this.childForms=[];Roo.apply(this,A);this.items=new Roo.util.MixedCollection(false,function(o){return o.id||(o.id=Roo.id());});this.addEvents({beforeaction:true,actionfailed:true,actioncomplete:true});if(el){this.initEl(el);
+}Roo.form.BasicForm.superclass.constructor.call(this);};Roo.extend(Roo.form.BasicForm,Roo.util.Observable,{timeout:30,activeAction:null,trackResetOnLoad:false,childForms:false,allItems:false,waitMsgTarget:false,initEl:function(el){this.el=Roo.get(el);this.id=this.el.id||Roo.id();
+this.el.on('submit',this.onSubmit,this);this.el.addClass('x-form');},onSubmit:function(e){e.stopEvent();},isValid:function(){var A=true;this.items.each(function(f){if(!f.validate()){A=false;}});return A;},isDirty:function(){var A=false;this.items.each(function(f){if(f.isDirty()){A=true;
+return false;}});return A;},hasChanged:function(){var A=false;this.items.each(function(f){if(f.hasChanged()){A=true;return false;}});return A;},resetHasChanged:function(){this.items.each(function(f){f.resetHasChanged();});},doAction:function(A,B){if(typeof A=='string'){A=new Roo.form.Action.ACTION_TYPES[A](this,B);
+}if(this.fireEvent('beforeaction',this,A)!==false){this.beforeAction(A);A.run.defer(100,A);}return this;},submit:function(A){this.doAction('submit',A);return this;},load:function(A){this.doAction('load',A);return this;},updateRecord:function(A){A.beginEdit();
+var fs=A.fields;fs.each(function(f){var B=this.findField(f.name);if(B){A.set(f.name,B.getValue());}},this);A.endEdit();return this;},loadRecord:function(A){this.setValues(A.data);return this;},beforeAction:function(A){var o=A.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...');}},afterAction:function(A,B){this.activeAction=null;
+var o=A.options;if(this.waitMsgTarget===true){this.el.unmask();}else if(this.waitMsgTarget){this.waitMsgTarget.unmask();}else{Roo.MessageBox.updateProgress(1);Roo.MessageBox.hide();}if(B){if(o.reset){this.reset();}Roo.callback(o.success,o.scope,[this,A]);
+this.fireEvent('actioncomplete',this,A);}else{if((typeof(A.result)!='undefined')&&(typeof(A.result.errors)!='undefined')&&(typeof(A.result.errors.needs_confirm)!='undefined')){var _t=this;Roo.MessageBox.confirm("Change requires confirmation",A.result.errorMsg,function(r){if(r!='yes'){return;
+}_t.doAction('submit',{params:{_submit_confirmed:1}});});return;}Roo.callback(o.failure,o.scope,[this,A]);if(!this.hasListener('actionfailed')){Roo.MessageBox.alert("Error",(typeof(A.result)!='undefined'&&typeof(A.result.errorMsg)!='undefined')?A.result.errorMsg:"Saving Failed, please check your entries or try again");
+}this.fireEvent('actionfailed',this,A);}},findField:function(id){var A=this.items.get(id);if(!A){this.items.each(function(f){if(f.isFormField&&(f.dataIndex==id||f.id==id||f.getName()==id)){A=f;return false;}});}return A||null;},addForm:function(A){if(this.childForms.indexOf(A)>-1){return;
+}this.childForms.push(A);var n='';Roo.each(A.allItems,function(fe){n=typeof(fe.getName)=='undefined'?fe.name:fe.getName();if(this.findField(n)){return;}var B=new Roo.form.Hidden({name:n});B.render(this.el);this.add(B);},this);},markInvalid:function(A){if(A instanceof Array){for(var i=0,B=A.length;
+i<B;i++){var C=A[i];var f=this.findField(C.id);if(f){f.markInvalid(C.msg);}}}else{var D,id;for(id in A){if(typeof A[id]!='function'&&(D=this.findField(id))){D.markInvalid(A[id]);}}}Roo.each(this.childForms||[],function(f){f.markInvalid(A);});return this;}
+,setValues:function(A){if(A instanceof Array){for(var i=0,B=A.length;i<B;i++){var v=A[i];var f=this.findField(v.id);if(f){f.setValue(v.value);if(this.trackResetOnLoad){f.originalValue=f.getValue();}}}}else{var C,id;for(id in A){if(typeof A[id]!='function'&&(C=this.findField(id))){if(C.setFromData&&C.valueField&&C.displayField&&(C.store&&!C.store.isLocal)){var sd={}
+;sd[C.valueField]=typeof(A[C.hiddenName])=='undefined'?'':A[C.hiddenName];sd[C.displayField]=typeof(A[C.name])=='undefined'?'':A[C.name];C.setFromData(sd);}else{C.setValue(A[id]);}if(this.trackResetOnLoad){C.originalValue=C.getValue();}}}}this.resetHasChanged();
+Roo.each(this.childForms||[],function(f){f.setValues(A);f.resetHasChanged();});return this;},getValues:function(A){if(this.childForms){Roo.each(this.childForms,function(f){this.setValues(f.getValues());},this);}var fs=Roo.lib.Ajax.serializeForm(this.el.dom);
+if(A===true){return fs;}return Roo.urlDecode(fs);},getFieldValues:function(A){if(this.childForms){Roo.each(this.childForms,function(f){this.setValues(f.getValues());},this);}var B={};this.items.each(function(f){if(!f.getName()){return;}var v=f.getValue();
+if(f.inputType=='radio'){if(typeof(B[f.getName()])=='undefined'){B[f.getName()]='';}if(!f.el.dom.checked){return;}v=f.el.dom.value;}if((typeof(v)=='object')&&f.getRawValue){v=f.getRawValue();}if(f.name!=f.getName()){B[f.name]=f.getRawValue();}B[f.getName()]=v;
+});return B;},clearInvalid:function(){this.items.each(function(f){f.clearInvalid();});Roo.each(this.childForms||[],function(f){f.clearInvalid();});return this;},reset:function(){this.items.each(function(f){f.reset();});Roo.each(this.childForms||[],function(f){f.reset();
+});this.resetHasChanged();return this;},add:function(){this.items.addAll(Array.prototype.slice.call(arguments,0));return this;},remove:function(A){this.items.remove(A);return this;},render:function(){this.items.each(function(f){if(f.isFormField&&!f.rendered&&document.getElementById(f.id)){f.applyTo(f.id);
+}});return this;},applyToFields:function(o){this.items.each(function(f){Roo.apply(f,o);});return this;},applyIfToFields:function(o){this.items.each(function(f){Roo.applyIf(f,o);});return this;}});Roo.BasicForm=Roo.form.BasicForm;
+// Roo/form/Form.js
+Roo.form.Form=function(A){var B=[];if(A.items){B=A.items;delete A.items;}Roo.form.Form.superclass.constructor.call(this,null,A);this.url=this.url||this.action;if(!this.root){this.root=new Roo.form.Layout(Roo.applyIf({id:Roo.id()},A));}this.active=this.root;
+this.buttons=[];this.allItems=[];this.addEvents({clientvalidation:true,rendered:true});if(this.progressUrl){this.addxtype({xns:Roo.form,xtype:'Hidden',name:'UPLOAD_IDENTIFIER'});}Roo.each(B,this.addxtype,this);};Roo.extend(Roo.form.Form,Roo.form.BasicForm,{buttonAlign:'center',minButtonWidth:75,labelAlign:'left',monitorValid:false,monitorPoll:200,progressUrl:false,column:function(c){var A=new Roo.form.Column(c);
+this.start(A);if(arguments.length>1){this.add.apply(this,Array.prototype.slice.call(arguments,1));this.end();}return A;},fieldset:function(c){var fs=new Roo.form.FieldSet(c);this.start(fs);if(arguments.length>1){this.add.apply(this,Array.prototype.slice.call(arguments,1));
+this.end();}return fs;},container:function(c){var l=new Roo.form.Layout(c);this.start(l);if(arguments.length>1){this.add.apply(this,Array.prototype.slice.call(arguments,1));this.end();}return l;},start:function(c){Roo.applyIf(c,{'labelAlign':this.active.labelAlign,'labelWidth':this.active.labelWidth,'itemCls':this.active.itemCls}
+);this.active.stack.push(c);c.ownerCt=this.active;this.active=c;return this;},end:function(){if(this.active==this.root){return this;}this.active=this.active.ownerCt;return this;},add:function(){this.active.stack.push.apply(this.active.stack,arguments);this.allItems.push.apply(this.allItems,arguments);
+var r=[];for(var i=0,a=arguments,A=a.length;i<A;i++){if(a[i].isFormField){r.push(a[i]);}}if(r.length>0){Roo.form.Form.superclass.add.apply(this,r);}return this;},findbyId:function(id){var A=false;if(!id){return A;}Roo.each(this.allItems,function(f){if(f.id==id||f.name==id){A=f;
+return false;}});return A;},render:function(ct){ct=Roo.get(ct);var o=this.autoCreate||{tag:'form',method:this.method||'POST',id:this.id||Roo.id()};this.initEl(ct.createChild(o));this.root.render(this.el);this.items.each(function(f){f.render('x-form-el-'+f.id);
+});if(this.buttons.length>0){var tb=this.el.createChild({cls:'x-form-btns-ct',cn:{cls:"x-form-btns x-form-btns-"+this.buttonAlign,html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'}},null,true);var tr=tb.getElementsByTagName('tr')[0];
+for(var i=0,A=this.buttons.length;i<A;i++){var b=this.buttons[i];var td=document.createElement('td');td.className='x-form-btn-td';b.render(tr.appendChild(td));}}if(this.monitorValid){this.startMonitoring();}this.fireEvent('rendered',this);return this;},addButton:function(A,B,C){var bc={handler:B,scope:C,minWidth:this.minButtonWidth,hideParent:true}
+;if(typeof A=="string"){bc.text=A;}else{Roo.apply(bc,A);}var D=new Roo.Button(null,bc);this.buttons.push(D);return D;},addxtype:function(){var ar=Array.prototype.slice.call(arguments,0);var A=false;for(var i=0;i<ar.length;i++){if(!ar[i]){continue;}if(Roo.form[ar[i].xtype]){ar[i].form=this;
+var fe=Roo.factory(ar[i],Roo.form);if(!A){A=fe;}fe.form=this;if(fe.store){fe.store.form=this;}if(fe.isLayout){this.start(fe);this.allItems.push(fe);if(fe.items&&fe.addxtype){fe.addxtype.apply(fe,fe.items);delete fe.items;}this.end();continue;}this.add(fe);
+}if(ar[i].xtype=='Button'){this.addButton(ar[i]);this.allItems.push(fe);continue;}if(ar[i].xtype=='end'){alert('end is not supported on xtype any more, use items');}}return A;},startMonitoring:function(){if(!this.bound){this.bound=true;Roo.TaskMgr.start({run:this.bindHandler,interval:this.monitorPoll||200,scope:this}
+);}},stopMonitoring:function(){this.bound=false;},bindHandler:function(){if(!this.bound){return false;}var A=true;this.items.each(function(f){if(!f.isValid(true)){A=false;return false;}});for(var i=0,B=this.buttons.length;i<B;i++){var C=this.buttons[i];if(C.formBind===true&&C.disabled===A){C.setDisabled(!A);
+}}this.fireEvent('clientvalidation',this,A);}});Roo.Form=Roo.form.Form;
+// Roo/form/Action.js
+Roo.namespace('Roo.form');Roo.form.Action=function(A,B){this.form=A;this.options=B||{};};Roo.form.Action.CLIENT_INVALID='client';Roo.form.Action.SERVER_INVALID='server';Roo.form.Action.CONNECT_FAILURE='connect';Roo.form.Action.LOAD_FAILURE='load';Roo.form.Action.prototype={type:'default',failureType:undefined,response:undefined,result:undefined,run:function(A){}
+,success:function(A){},handleResponse:function(A){},failure:function(A){this.response=A;this.failureType=Roo.form.Action.CONNECT_FAILURE;this.form.afterAction(this,false);},processResponse:function(A){this.response=A;if(!A.responseText){return true;}this.result=this.handleResponse(A);
+return this.result;},getUrl:function(A){var B=this.options.url||this.form.url||this.form.el.dom.action;if(A){var p=this.getParams();if(p){B+=(B.indexOf('?')!=-1?'&':'?')+p;}}return B;},getMethod:function(){return (this.options.method||this.form.method||this.form.el.dom.method||'POST').toUpperCase();
+},getParams:function(){var bp=this.form.baseParams;var p=this.options.params;if(p){if(typeof p=="object"){p=Roo.urlEncode(Roo.applyIf(p,bp));}else if(typeof p=='string'&&bp){p+='&'+Roo.urlEncode(bp);}}else if(bp){p=Roo.urlEncode(bp);}return p;},createCallback:function(){return {success:this.success,failure:this.failure,scope:this,timeout:(this.form.timeout*1000),upload:this.form.fileUpload?this.success:undefined}
+;}};Roo.form.Action.Submit=function(A,B){Roo.form.Action.Submit.superclass.constructor.call(this,A,B);};Roo.extend(Roo.form.Action.Submit,Roo.form.Action,{type:'submit',haveProgress:false,uploadComplete:false,uploadProgress:function(){if(!this.form.progressUrl){return;
+}if(!this.haveProgress){Roo.MessageBox.progress("Uploading","Uploading");}if(this.uploadComplete){Roo.MessageBox.hide();return;}this.haveProgress=true;var A=this.form.findField('UPLOAD_IDENTIFIER').getValue();var c=new Roo.data.Connection();c.request({url:this.form.progressUrl,params:{id:A}
+,method:'GET',success:function(B){var C=false;var D;try{C=Roo.decode(B.responseText)}catch(e){Roo.log("Invalid data from server..");Roo.log(D);return;}if(!C||!C.success){Roo.log(C);Roo.MessageBox.alert(Roo.encode(C));return;}var E=C.data;if(this.uploadComplete){Roo.MessageBox.hide();
+return;}if(E){Roo.MessageBox.updateProgress(E.bytes_uploaded/E.bytes_total,Math.floor((E.bytes_total-E.bytes_uploaded)/1000)+'k remaining');}this.uploadProgress.defer(2000,this);},failure:function(B){Roo.log('progress url failed ');Roo.log(B);},scope:this}
+);},run:function(){this.form.getValues();var o=this.options;var A=this.getMethod();var B=A=='POST';if(o.clientValidation===false||this.form.isValid()){if(this.form.progressUrl){this.form.findField('UPLOAD_IDENTIFIER').setValue((new Date()*1)+''+Math.random());
+}Roo.Ajax.request(Roo.apply(this.createCallback(),{form:this.form.el.dom,url:this.getUrl(!B),method:A,params:B?this.getParams():null,isUpload:this.form.fileUpload}));this.uploadProgress();}else if(o.clientValidation!==false){this.failureType=Roo.form.Action.CLIENT_INVALID;
+this.form.afterAction(this,false);}},success:function(A){this.uploadComplete=true;if(this.haveProgress){Roo.MessageBox.hide();}var B=this.processResponse(A);if(B===true||B.success){this.form.afterAction(this,true);return;}if(B.errors){this.form.markInvalid(B.errors);
+this.failureType=Roo.form.Action.SERVER_INVALID;}this.form.afterAction(this,false);},failure:function(A){this.uploadComplete=true;if(this.haveProgress){Roo.MessageBox.hide();}this.response=A;this.failureType=Roo.form.Action.CONNECT_FAILURE;this.form.afterAction(this,false);
+},handleResponse:function(A){if(this.form.errorReader){var rs=this.form.errorReader.read(A);var B=[];if(rs.records){for(var i=0,C=rs.records.length;i<C;i++){var r=rs.records[i];B[i]=r.data;}}if(B.length<1){B=null;}return {success:rs.success,errors:B};}var D=false;
+try{D=Roo.decode(A.responseText);}catch(e){D={success:false,errorMsg:"Failed to read server message: "+(A?A.responseText:' - no message'),errors:[]};}return D;}});Roo.form.Action.Load=function(A,B){Roo.form.Action.Load.superclass.constructor.call(this,A,B);
+this.reader=this.form.reader;};Roo.extend(Roo.form.Action.Load,Roo.form.Action,{type:'load',run:function(){Roo.Ajax.request(Roo.apply(this.createCallback(),{method:this.getMethod(),url:this.getUrl(false),params:this.getParams()}));},success:function(A){var B=this.processResponse(A);
+if(B===true||!B.success||!B.data){this.failureType=Roo.form.Action.LOAD_FAILURE;this.form.afterAction(this,false);return;}this.form.clearInvalid();this.form.setValues(B.data);this.form.afterAction(this,true);},handleResponse:function(A){if(this.form.reader){var rs=this.form.reader.read(A);
+var B=rs.records&&rs.records[0]?rs.records[0].data:null;return {success:rs.success,data:B};}return Roo.decode(A.responseText);}});Roo.form.Action.ACTION_TYPES={'load':Roo.form.Action.Load,'submit':Roo.form.Action.Submit};
+// Roo/form/Layout.js
+Roo.form.Layout=function(A){var B=[];if(A.items){B=A.items;delete A.items;}Roo.form.Layout.superclass.constructor.call(this,A);this.stack=[];Roo.each(B,this.addxtype,this);};Roo.extend(Roo.form.Layout,Roo.Component,{clear:true,labelSeparator:':',hideLabels:false,defaultAutoCreate:{tag:'div',cls:'x-form-ct'}
+,isLayout:true,onRender:function(ct,A){if(this.el){this.el=Roo.get(this.el);}else{var B=this.getAutoCreate();this.el=ct.createChild(B,A);}if(this.style){this.el.applyStyles(this.style);}if(this.labelAlign){this.el.addClass('x-form-label-'+this.labelAlign);
+}if(this.hideLabels){this.labelStyle="display:none";this.elementStyle="padding-left:0;";}else{if(typeof this.labelWidth=='number'){this.labelStyle="width:"+this.labelWidth+"px;";this.elementStyle="padding-left:"+((this.labelWidth+(typeof this.labelPad=='number'?this.labelPad:5))+'px')+";";
+}if(this.labelAlign=='top'){this.labelStyle="width:auto;";this.elementStyle="padding-left:0;";}}var C=this.stack;var D=C.length;if(D>0){if(!this.fieldTpl){var t=new Roo.Template('<div class="x-form-item {5}">','<label for="{0}" style="{2}">{1}{4}</label>','<div class="x-form-element" id="x-form-el-{0}" style="{3}">','</div>','</div><div class="x-form-clear-left"></div>');
+t.disableFormats=true;t.compile();Roo.form.Layout.prototype.fieldTpl=t;}for(var i=0;i<D;i++){if(C[i].isFormField){this.renderField(C[i]);}else{this.renderComponent(C[i]);}}}if(this.clear){this.el.createChild({cls:'x-form-clear'});}},renderField:function(f){f.fieldEl=Roo.get(this.fieldTpl.append(this.el,[f.id,f.fieldLabel,f.labelStyle||this.labelStyle||'',this.elementStyle||'',typeof f.labelSeparator=='undefined'?this.labelSeparator:f.labelSeparator,f.itemCls||this.itemCls||''],true).getPrevSibling());
+},renderComponent:function(c){c.render(c.isLayout?this.el:this.el.createChild());},addxtype:function(o){o.form=this.form;var fe=Roo.factory(o,Roo.form);this.form.allItems.push(fe);this.stack.push(fe);if(fe.isFormField){this.form.items.add(fe);}return fe;}
+});Roo.form.Column=function(A){Roo.form.Column.superclass.constructor.call(this,A);};Roo.extend(Roo.form.Column,Roo.form.Layout,{defaultAutoCreate:{tag:'div',cls:'x-form-ct x-form-column'},onRender:function(ct,A){Roo.form.Column.superclass.onRender.call(this,ct,A);
+if(this.width){this.el.setWidth(this.width);}}});Roo.form.Row=function(A){Roo.form.Row.superclass.constructor.call(this,A);};Roo.extend(Roo.form.Row,Roo.form.Layout,{defaultAutoCreate:{tag:'div',cls:'x-form-ct x-form-row'},padWidth:20,onRender:function(ct,A){if(!this.rowTpl){var t=new Roo.Template('<div class="x-form-item {5}" style="float:left;width:{6}px">','<label for="{0}" style="{2}">{1}{4}</label>','<div class="x-form-element" id="x-form-el-{0}" style="{3}">','</div>','</div>');
+t.disableFormats=true;t.compile();Roo.form.Layout.prototype.rowTpl=t;}this.fieldTpl=this.rowTpl;var B=100;if((this.labelAlign!='top')){if(typeof this.labelWidth=='number'){B=this.labelWidth}this.padWidth=20+B;}Roo.form.Column.superclass.onRender.call(this,ct,A);
+if(this.width){this.el.setWidth(this.width);}if(this.height){this.el.setHeight(this.height);}},renderField:function(f){f.fieldEl=this.fieldTpl.append(this.el,[f.id,f.fieldLabel,f.labelStyle||this.labelStyle||'',this.elementStyle||'',typeof f.labelSeparator=='undefined'?this.labelSeparator:f.labelSeparator,f.itemCls||this.itemCls||'',f.width?f.width+this.padWidth:160+this.padWidth],true);
+}});Roo.form.FieldSet=function(A){Roo.form.FieldSet.superclass.constructor.call(this,A);};Roo.extend(Roo.form.FieldSet,Roo.form.Layout,{defaultAutoCreate:{tag:'fieldset',cn:{tag:'legend'}},onRender:function(ct,A){Roo.form.FieldSet.superclass.onRender.call(this,ct,A);
+if(this.legend){this.setLegend(this.legend);}},setLegend:function(A){if(this.rendered){this.el.child('legend').update(A);}}});
+// Roo/form/VTypes.js
+Roo.form.VTypes=function(){var A=/^[a-zA-Z_]+$/;var B=/^[a-zA-Z0-9_]+$/;var C=/^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,24}$/;var D=/(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;return {'email':function(v){return C.test(v);
+},'emailText':'This field should be an e-mail address in the format "user@domain.com"','emailMask':/[a-z0-9_\.\-@]/i,'url':function(v){return D.test(v);},'urlText':'This field should be a URL in the format "http:/'+'/www.domain.com"','alpha':function(v){return A.test(v);
+},'alphaText':'This field should only contain letters and _','alphaMask':/[a-z_]/i,'alphanum':function(v){return B.test(v);},'alphanumText':'This field should only contain letters, numbers and _','alphanumMask':/[a-z0-9_]/i};}();
+// Roo/form/FCKeditor.js
+Roo.form.FCKeditor=function(A){Roo.form.FCKeditor.superclass.constructor.call(this,A);this.addEvents({editorinit:true});};Roo.form.FCKeditor.editors={};Roo.extend(Roo.form.FCKeditor,Roo.form.TextArea,{fckconfig:false,toolbarSet:'Basic',basePath:'/fckeditor/',frame:false,value:'',onRender:function(ct,A){if(!this.el){this.defaultAutoCreate={tag:"textarea",style:"width:300px;height:60px;",autocomplete:"new-password"}
+;}Roo.form.FCKeditor.superclass.onRender.call(this,ct,A);Roo.form.FCKeditor.editors[this.getId()]=this;this.replaceTextarea();},getEditor:function(){return this.fckEditor;},setValue:function(A){if(typeof(A)=='undefined'){return;}Roo.form.FCKeditor.superclass.setValue.apply(this,[A]);
+if(!this.getEditor()){return;}this.getEditor().SetData(A);},getValue:function(){if(this.frame&&this.frame.dom.style.display=='none'){return Roo.form.FCKeditor.superclass.getValue.call(this);}if(!this.el||!this.getEditor()){return this.value;}var A=this.getEditor().GetData();
+Roo.form.FCKeditor.superclass.setValue.apply(this,[A]);return Roo.form.FCKeditor.superclass.getValue.call(this);},getRawValue:function(){if(this.frame&&this.frame.dom.style.display=='none'){return Roo.form.FCKeditor.superclass.getRawValue.call(this);}if(!this.el||!this.getEditor()){return this.value;
+return;}var A=this.getEditor().GetData();Roo.form.FCKeditor.superclass.setRawValue.apply(this,[A]);return Roo.form.FCKeditor.superclass.getRawValue.call(this);},setSize:function(w,h){Roo.form.FCKeditor.superclass.setSize.apply(this,[w,h]);this.frame.dom.setAttribute('width',w);
+this.frame.dom.setAttribute('height',h);this.frame.setSize(w,h);},toggleSourceEdit:function(A){this.el.dom.style.display=A?'':'none';this.frame.dom.style.display=A?'none':'';},focus:function(A){if(this.frame.dom.style.display=='none'){return Roo.form.FCKeditor.superclass.focus.call(this);
+}if(!this.el||!this.getEditor()){this.focus.defer(100,this,[A]);return;}var B=this.getEditor().EditorDocument.getElementsByTagName(A);this.getEditor().Focus();if(B.length){if(!this.getEditor().Selection.GetSelection()){this.focus.defer(100,this,[A]);return;
+}var r=this.getEditor().EditorDocument.createRange();r.setStart(B[0],0);r.setEnd(B[0],0);this.getEditor().Selection.GetSelection().removeAllRanges();this.getEditor().Selection.GetSelection().addRange(r);this.getEditor().Focus();}},replaceTextarea:function(){if(document.getElementById(this.getId()+'___Frame')){return;
+}var A=document.getElementById(this.getId());var B=document.getElementsByName(this.getId());A.style.display='none';if(A.tabIndex){this.TabIndex=A.tabIndex;}this._insertHtmlBefore(this._getConfigHtml(),A);this._insertHtmlBefore(this._getIFrameHtml(),A);this.frame=Roo.get(this.getId()+'___Frame')}
+,_getConfigHtml:function(){var A='';for(var o in this.fckconfig){A+=A.length>0?'&amp;':'';A+=encodeURIComponent(o)+'='+encodeURIComponent(this.fckconfig[o]);}return '<input type="hidden" id="'+this.getId()+'___Config" value="'+A+'" style="display:none" />';
+},_getIFrameHtml:function(){var A='fckeditor.html';var B=this.basePath+'editor/'+A+'?InstanceName='+encodeURIComponent(this.getId());B+=this.toolbarSet?('&amp;Toolbar='+this.toolbarSet):'';var C='<iframe id="'+this.getId()+'___Frame" src="'+B+'" width="'+this.width+'" height="'+this.height+'"'+(this.tabIndex?' tabindex="'+this.tabIndex+'"':'')+' frameborder="0" scrolling="no"></iframe>';
+return C;},_insertHtmlBefore:function(A,B){if(B.insertAdjacentHTML){B.insertAdjacentHTML('beforeBegin',A);}else{var C=document.createRange();C.setStartBefore(B);var D=C.createContextualFragment(A);B.parentNode.insertBefore(D,B);}}});function FCKeditor_OnComplete(A){var f=Roo.form.FCKeditor.editors[A.Name];
+f.fckEditor=A;f.fireEvent('editorinit',f,A);}
+// Roo/form/GridField.js
+Roo.form.GridField=function(A){Roo.form.GridField.superclass.constructor.call(this,A);};Roo.extend(Roo.form.GridField,Roo.form.Field,{width:100,height:50,xgrid:false,defaultAutoCreate:{tag:'input',type:'hidden',autocomplete:'new-password'},addTitle:false,onResize:function(){Roo.form.Field.superclass.onResize.apply(this,arguments);
+},initEvents:function(){},getResizeEl:function(){return this.wrap;},getPositionEl:function(){return this.wrap;},onRender:function(ct,A){this.style=this.style||'overflow: hidden; border:1px solid #c3daf9;';var B=this.style;delete this.style;Roo.form.GridField.superclass.onRender.call(this,ct,A);
+this.wrap=this.el.wrap({cls:''});this.viewEl=this.wrap.createChild({tag:'div'});if(B){this.viewEl.applyStyles(B);}if(this.width){this.viewEl.setWidth(this.width);}if(this.height){this.viewEl.setHeight(this.height);}this.grid=new Roo.grid[this.xgrid.xtype](this.viewEl,this.xgrid);
+this.grid.render();this.grid.getDataSource().on('remove',this.refreshValue,this);this.grid.getDataSource().on('update',this.refreshValue,this);this.grid.on('afteredit',this.refreshValue,this);},setValue:function(v){v=v||[];if(this.grid&&this.grid.getDataSource()&&typeof(v)!='undefined'){var ds=this.grid.getDataSource();
+var A={};A[ds.reader.meta.root]=typeof(v)=='string'?Roo.decode(v):v;ds.loadData(A);}if(this.grid.sm){this.grid.sm.clearSelections();}Roo.form.GridField.superclass.setValue.call(this,v);this.refreshValue();},refreshValue:function(){var A=[];this.grid.getDataSource().each(function(r){A.push(r.data);
+});this.el.dom.value=Roo.encode(A);}});
+// Roo/form/DisplayField.js
+Roo.form.DisplayField=function(A){Roo.form.DisplayField.superclass.constructor.call(this,A);this.addEvents({close:true});};Roo.extend(Roo.form.DisplayField,Roo.form.TextField,{inputType:'hidden',allowBlank:true,readOnly:true,focusClass:undefined,fieldClass:'x-form-field',valueRenderer:undefined,width:100,closable:false,onResize:function(){Roo.form.DisplayField.superclass.onResize.apply(this,arguments);
+},initEvents:function(){if(this.closable){this.closeEl.on('click',this.onClose,this);}},getResizeEl:function(){return this.wrap;},getPositionEl:function(){return this.wrap;},onRender:function(ct,A){Roo.form.DisplayField.superclass.onRender.call(this,ct,A);
+this.wrap=this.el.wrap();this.viewEl=this.wrap.createChild({tag:'div',cls:'x-form-displayfield'});if(this.closable){this.closeEl=this.wrap.createChild({tag:'div',cls:'x-dlg-close'});}if(this.bodyStyle){this.viewEl.applyStyles(this.bodyStyle);}this.setValue(this.value);
+},onClick:function(){},setValue:function(v){this.value=v;var A=this.valueRenderer?this.valueRenderer(v):String.format('{0}',v);if(!this.viewEl){return;}this.viewEl.dom.innerHTML=A;Roo.form.DisplayField.superclass.setValue.call(this,v);},onClose:function(e){e.preventDefault();
+this.fireEvent('close',this);}});
+// Roo/form/DayPicker.js
+Roo.form.DayPicker=function(A){Roo.form.DayPicker.superclass.constructor.call(this,A);};Roo.extend(Roo.form.DayPicker,Roo.form.Field,{focusClass:undefined,fieldClass:"x-form-field",defaultAutoCreate:{tag:"input",type:'hidden',autocomplete:"new-password"},actionMode:'viewEl',inputType:'hidden',inputElement:false,basedOn:false,isFormField:true,onResize:function(){Roo.form.Checkbox.superclass.onResize.apply(this,arguments);
+if(!this.boxLabel){this.el.alignTo(this.wrap,'c-c');}},initEvents:function(){Roo.form.Checkbox.superclass.initEvents.call(this);this.el.on("click",this.onClick,this);this.el.on("change",this.onClick,this);},getResizeEl:function(){return this.wrap;},getPositionEl:function(){return this.wrap;
+},onRender:function(ct,A){Roo.form.Checkbox.superclass.onRender.call(this,ct,A);this.wrap=this.el.wrap({cls:'x-form-daypick-item '});var r1='<table><tr>';var r2='<tr class="x-form-daypick-icons">';for(var i=0;i<7;i++){r1+='<td><div>'+Date.dayNames[i].substring(0,3)+'</div></td>';
+r2+='<td><img class="x-menu-item-icon" src="'+Roo.BLANK_IMAGE_URL+'"></td>';}var B=this.wrap.createChild(r1+'</tr>'+r2+'</tr></table>');B.select('img').on('click',this.onClick,this);this.viewEl=B;this.el.on('DOMAttrModified',this.setFromHidden,this);this.el.on('propertychange',this.setFromHidden,this);
+},initValue:Roo.emptyFn,getValue:function(){return this.el.dom.value;},onClick:function(e){Roo.get(e.target).toggleClass('x-menu-item-checked');this.refreshValue();},refreshValue:function(){var A='';this.viewEl.select('img',true).each(function(e,i,n){A+=e.is(".x-menu-item-checked")?String(n):'';
+});this.setValue(A,true);},setValue:function(v,A){if(!this.el.dom){return;}var B=this.el.dom.value;this.el.dom.value=v;if(A){return;}this.viewEl.select('img',true).each(function(e,i,n){var on=e.is(".x-menu-item-checked");var C=v.indexOf(String(n))>-1;if(on!=C){e.toggleClass('x-menu-item-checked');
+}});this.fireEvent('change',this,v,B);},setFromHidden:function(){if(!this.el){return;}this.setValue(this.el.dom.value);},onDestroy:function(){if(this.viewEl){Roo.get(this.viewEl).remove();}Roo.form.DayPicker.superclass.onDestroy.call(this);}});
+// Roo/form/ComboCheck.js
+Roo.form.ComboCheck=function(A){Roo.form.ComboCheck.superclass.constructor.call(this,A);var B=['hiddenName','displayField','valueField'];var _t=this;Roo.each(B,function(e){if((typeof(_t[e])=='undefined')||!_t[e].length){throw "Roo.form.ComboCheck : missing value for: "+e;
+}});};Roo.extend(Roo.form.ComboCheck,Roo.form.ComboBox,{editable:false,selectedClass:'x-menu-item-checked',onRender:function(ct,A){var _t=this;if(!this.tpl){var B='x-combo-list';this.tpl=new Roo.Template({html:'<div class="'+B+'-item x-menu-check-item">'+'<img class="x-menu-item-icon" style="margin: 0px;" src="'+Roo.BLANK_IMAGE_URL+'">'+'<span>{'+this.displayField+'}</span>'+'</div>'}
+);}Roo.form.ComboCheck.superclass.onRender.call(this,ct,A);this.view.singleSelect=false;this.view.multiSelect=true;this.view.toggleSelect=true;this.pageTb.add(new Roo.Toolbar.Fill(),{text:'Done',handler:function(){_t.collapse();}});},onViewOver:function(e,t){return;
+},onViewClick:function(A,B){return;},select:function(){},selectByValue:function(xv,A){var ar=this.getValueArray();var B=[];Roo.each(ar,function(v){if(v===undefined||v===null){return;}var r=this.findRecord(this.valueField,v);if(r){B.push(this.store.indexOf(r))}
+},this);this.view.select(B);return false;},onSelect:function(A,B){this.view.clearSelections();this.setValue('[]');if(this.value!=this.valueBefore){this.fireEvent('change',this,this.value,this.valueBefore);this.valueBefore=this.value;}},getValueArray:function(){var ar=[];
+try{if(typeof(this.value)=='undefined'){return [];}var ar=Roo.decode(this.value);return ar instanceof Array?ar:[];}catch(e){Roo.log(e+"\nRoo.form.ComboCheck:getValueArray  invalid data:"+this.getValue());return [];}},expand:function(){Roo.form.ComboCheck.superclass.expand.call(this);
+this.valueBefore=typeof(this.value)=='undefined'?'':this.value;},collapse:function(){Roo.form.ComboCheck.superclass.collapse.call(this);var sl=this.view.getSelectedIndexes();var st=this.store;var nv=[];var tv=[];var r;Roo.each(sl,function(i){r=st.getAt(i);
+nv.push(r.get(this.valueField));},this);this.setValue(Roo.encode(nv));if(this.value!=this.valueBefore){this.fireEvent('change',this,this.value,this.valueBefore);this.valueBefore=this.value;}},setValue:function(v){this.value=v;var A=this.getValueArray();var tv=[];
+Roo.each(A,function(k){var r=this.findRecord(this.valueField,k);if(r){tv.push(r.data[this.displayField]);}else if(this.valueNotFoundText!==undefined){tv.push(this.valueNotFoundText);}},this);Roo.form.ComboBox.superclass.setValue.call(this,tv.join(', '));this.hiddenField.value=v;
+this.value=v;}});
+// Roo/form/Signature.js
+Roo.form.Signature=function(A){Roo.form.Signature.superclass.constructor.call(this,A);this.addEvents({'confirm':true,'reset':true});};Roo.extend(Roo.form.Signature,Roo.form.Field,{labels:{clear:"Clear",confirm:"Confirm"},width:300,height:100,allowBlank:false,signPanel:{}
+,isMouseDown:false,isConfirmed:false,signatureTmp:'',defaultAutoCreate:{tag:"input",type:"hidden"},onRender:function(ct,A){Roo.form.Signature.superclass.onRender.call(this,ct,A);this.wrap=this.el.wrap({cls:'x-form-signature-wrap',style:'width: '+this.width+'px',cn:{cls:'x-form-signature'}
+});this.createToolbar(this);this.signPanel=this.wrap.createChild({tag:'div',style:'width: '+this.width+'px; height: '+this.height+'px; border: 0;'},this.el);this.svgID=Roo.id();this.svgEl=this.signPanel.createChild({xmlns:'http://www.w3.org/2000/svg',tag:'svg',id:this.svgID+"-svg",width:this.width,height:this.height,viewBox:'0 0 '+this.width+' '+this.height,cn:[{tag:"rect",id:this.svgID+"-svg-r",width:this.width,height:this.height,fill:"#ffa"}
+,{tag:"line",id:this.svgID+"-svg-l",x1:"0",y1:(this.height*0.8),x2:this.width,y2:(this.height*0.8),'stroke':"#666",'stroke-width':"1",'stroke-dasharray':"3",'shape-rendering':"crispEdges",'pointer-events':"none"},{tag:"path",id:this.svgID+"-svg-p",'stroke':"navy",'stroke-width':"3",'fill':"none",'pointer-events':'none'}
+]});this.createSVG();this.svgBox=this.svgEl.dom.getScreenCTM();},createSVG:function(){var A=this.signPanel;var r=A.select('#'+this.svgID+'-svg-r',true).first().dom;var t=this;r.addEventListener('mousedown',function(e){return t.down(e);},false);r.addEventListener('mousemove',function(e){return t.move(e);
+},false);r.addEventListener('mouseup',function(e){return t.up(e);},false);r.addEventListener('mouseout',function(e){return t.up(e);},false);r.addEventListener('touchstart',function(e){return t.down(e);},false);r.addEventListener('touchmove',function(e){return t.move(e);
+},false);r.addEventListener('touchend',function(e){return t.up(e);},false);},isTouchEvent:function(e){return e.type.match(/^touch/);},getCoords:function(e){var pt=this.svgEl.dom.createSVGPoint();pt.x=e.clientX;pt.y=e.clientY;if(this.isTouchEvent(e)){pt.x=e.targetTouches[0].clientX;
+pt.y=e.targetTouches[0].clientY;}var a=this.svgEl.dom.getScreenCTM();var b=a.inverse();var mx=pt.matrixTransform(b);return mx.x+','+mx.y;},down:function(e){this.signatureTmp+='M'+this.getCoords(e)+' ';this.signPanel.select('#'+this.svgID+'-svg-p',true).first().attr('d',this.signatureTmp);
+this.isMouseDown=true;e.preventDefault();},move:function(e){if(this.isMouseDown){this.signatureTmp+='L'+this.getCoords(e)+' ';this.signPanel.select('#'+this.svgID+'-svg-p',true).first().attr('d',this.signatureTmp);}e.preventDefault();},up:function(e){this.isMouseDown=false;
+var sp=this.signatureTmp.split(' ');if(sp.length>1){if(!sp[sp.length-2].match(/^L/)){sp.pop();sp.pop();sp.push("");this.signatureTmp=sp.join(" ");}}if(this.getValue()!=this.signatureTmp){this.signPanel.select('#'+this.svgID+'-svg-r',true).first().attr('fill','#ffa');
+this.isConfirmed=false;}e.preventDefault();},createToolbar:function(A){function btn(id,B,C){var D=fid+'-'+id;return {id:D,cmd:id,cls:'x-btn-icon x-edit-'+id,enableToggle:B!==false,scope:A,handler:C||A.relayBtnCmd,clickEvent:'mousedown',tooltip:etb.buttonTips[id]||undefined,tabIndex:-1}
+;}var tb=new Roo.Toolbar(A.wrap.dom.firstChild);this.tb=tb;this.tb.add({cls:' x-signature-btn x-signature-'+id,scope:A,handler:this.reset,clickEvent:'mousedown',text:this.labels.clear},{xtype:'Fill',xns:Roo.Toolbar},{cls:'  x-signature-btn x-signature-'+id,scope:A,handler:this.confirmHandler,clickEvent:'mousedown',text:this.labels.confirm}
+);},getImageDataURI:function(){var A=this.svgEl.dom.parentNode.innerHTML;var B='data:image/svg+xml;base64,'+window.btoa(A);return B;},getConfirmed:function(){return this.isConfirmed;},getWidth:function(){return this.width;},getHeight:function(){return this.height;
+},getSignature:function(){return this.signatureTmp;},reset:function(){this.signatureTmp='';this.signPanel.select('#'+this.svgID+'-svg-r',true).first().attr('fill','#ffa');this.signPanel.select('#'+this.svgID+'-svg-p',true).first().attr('d','');this.isConfirmed=false;
+Roo.form.Signature.superclass.reset.call(this);},setSignature:function(s){this.signatureTmp=s;this.signPanel.select('#'+this.svgID+'-svg-r',true).first().attr('fill','#ffa');this.signPanel.select('#'+this.svgID+'-svg-p',true).first().attr('d',s);this.setValue(s);
+this.isConfirmed=false;Roo.form.Signature.superclass.reset.call(this);},test:function(){},setConfirmed:function(){},confirmHandler:function(){if(!this.getSignature()){return;}this.signPanel.select('#'+this.svgID+'-svg-r',true).first().attr('fill','#cfc');
+this.setValue(this.getSignature());this.isConfirmed=true;this.fireEvent('confirm',this);},validateValue:function(A){if(this.allowBlank){return true;}if(this.isConfirmed){return true;}return false;}});
+// Roo/form/Select.js
+Roo.form.Select=function(A){Roo.form.Select.superclass.constructor.call(this,A);};Roo.extend(Roo.form.Select,Roo.form.ComboBox,{defaultAutoCreate:{tag:"select"},listWidth:undefined,displayField:undefined,valueField:undefined,hiddenName:undefined,listClass:'',selectedClass:'x-combo-selected',triggerClass:'x-form-arrow-trigger',shadow:'sides',listAlign:'tl-bl?',maxHeight:300,triggerAction:'query',minChars:4,typeAhead:false,queryDelay:500,pageSize:0,selectOnFocus:false,queryParam:'query',loadingText:'Loading...',resizable:false,handleHeight:8,editable:true,allQuery:'',mode:'remote',minListWidth:70,forceSelection:false,typeAheadDelay:250,valueNotFoundText:undefined,defaultValue:'',blockFocus:false,disableClear:false,alwaysQuery:false,addicon:false,editicon:false,onRender:function(ct,A){Roo.form.Field.prototype.onRender.call(this,ct,A);
+if(this.store){this.store.on('beforeload',this.onBeforeLoad,this);this.store.on('load',this.onLoad,this);this.store.on('loadexception',this.onLoadException,this);this.store.load({});}},initEvents:function(){},onDestroy:function(){if(this.store){this.store.un('beforeload',this.onBeforeLoad,this);
+this.store.un('load',this.onLoad,this);this.store.un('loadexception',this.onLoadException,this);}},fireKey:function(e){if(e.isNavKeyPress()&&!this.list.isVisible()){this.fireEvent("specialkey",this,e);}},onResize:function(w,h){return;},setEditable:function(A){}
+,onBeforeLoad:function(){Roo.log("Select before load");return;this.innerList.update(this.loadingText?'<div class="loading-indicator">'+this.loadingText+'</div>':'');this.selectedIndex=-1;},onLoad:function(){var A=this.el.dom;A.innerHTML='';var od=A.ownerDocument;
+if(this.emptyText){var op=od.createElement('option');op.setAttribute('value','');op.innerHTML=String.format('{0}',this.emptyText);A.appendChild(op);}if(this.store.getCount()>0){var vf=this.valueField;var df=this.displayField;this.store.data.each(function(r){var op=od.createElement('option');
+op.setAttribute('value',r.data[vf]);op.innerHTML=String.format('{0}',r.data[df]);A.appendChild(op);});if(typeof(this.defaultValue!='undefined')){this.setValue(this.defaultValue);}}else{}},onLoadException:function(){dom.innerHTML='';Roo.log("Select on load exception");
+return;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);}},onTypeAhead:function(){},onSelect:function(A,B){Roo.log('on select?');
+return;if(this.fireEvent('beforeselect',this,A,B)!==false){this.setFromData(B>-1?A.data:false);this.collapse();this.fireEvent('select',this,A,B);}},getValue:function(){var A=this.el.dom;this.value=A.options[A.selectedIndex].value;return this.value;},clearValue:function(){this.value='';
+this.el.dom.selectedIndex=this.emptyText?0:-1;},setValue:function(v){var d=this.el.dom;for(var i=0;i<d.options.length;i++){if(v==d.options[i].value){d.selectedIndex=i;this.value=v;return;}}this.clearValue();},lastData:false,setFromData:function(o){Roo.log('setfrom data?');
+},reset:function(){this.clearValue();},findRecord:function(A,B){return false;var C;if(this.store.getCount()>0){this.store.each(function(r){if(r.data[A]==B){C=r;return false;}return true;});}return C;},getName:function(){if(!this.rendered){return ''};return !this.hiddenName&&this.el.dom.name?this.el.dom.name:(this.hiddenName||'');
+},onEmptyResults:function(){Roo.log('empty results');},isExpanded:function(){return false;},selectByValue:function(v,A){Roo.log('select By Value');return false;if(v!==undefined&&v!==null){var r=this.findRecord(this.valueField||this.displayField,v);if(r){this.select(this.store.indexOf(r),A);
+return true;}}return false;},select:function(A,B){Roo.log('select ');return;this.selectedIndex=A;this.view.select(A);if(B!==false){var el=this.view.getNode(A);if(el){this.innerList.scrollChildIntoView(el,false);}}},validateBlur:function(){return;},initQuery:function(){this.doQuery(this.getRawValue());
+},doForce:function(){if(this.el.dom.value.length>0){this.el.dom.value=this.lastSelectionText===undefined?'':this.lastSelectionText;}},doQuery:function(q,A){Roo.log('doQuery?');if(q===undefined||q===null){q='';}var qe={query:q,forceAll:A,combo:this,cancel:false}
+;if(this.fireEvent('beforequery',qe)===false||qe.cancel){return false;}q=qe.query;A=qe.forceAll;if(A===true||(q.length>=this.minChars)){if(this.lastQuery!=q||this.alwaysQuery){this.lastQuery=q;if(this.mode=='local'){this.selectedIndex=-1;if(A){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();}}},getParams:function(q){var p={};if(this.pageSize){p.start=0;
+p.limit=this.pageSize;}return p;},collapse:function(){},collapseIf:function(e){},expand:function(){},setWidth:function(){},getResizeEl:function(){return this.el;}});
+// Roo/DDView.js
+Roo.DDView=function(A,B,C){Roo.DDView.superclass.constructor.apply(this,arguments);this.getEl().setStyle("outline","0px none");this.getEl().unselectable();if(this.dragGroup){this.setDraggable(this.dragGroup.split(","));}if(this.dropGroup){this.setDroppable(this.dropGroup.split(","));
+}if(this.deletable){this.setDeletable();}this.isDirtyFlag=false;this.addEvents({"drop":true});};Roo.extend(Roo.DDView,Roo.View,{isFormField:true,reset:Roo.emptyFn,clearInvalid:Roo.form.Field.prototype.clearInvalid,validate:function(){return true;},destroy:function(){this.purgeListeners();
+this.getEl.removeAllListeners();this.getEl().remove();if(this.dragZone){if(this.dragZone.destroy){this.dragZone.destroy();}}if(this.dropZone){if(this.dropZone.destroy){this.dropZone.destroy();}}},getName:function(){return this.name;},setValue:function(v){if(!this.store){throw "DDView.setValue(). DDView must be constructed with a valid Store";
+}var A={};A[this.store.reader.meta.root]=v?[].concat(v):[];this.store.proxy=new Roo.data.MemoryProxy(A);this.store.load();},getValue:function(){var A='(';this.store.each(function(B){A+=B.id+',';});return A.substr(0,A.length-1)+')';},getIds:function(){var i=0,A=new Array(this.store.getCount());
+this.store.each(function(B){A[i++]=B.id;});return A;},isDirty:function(){return this.isDirtyFlag;},getTargetFromEvent:function(e){var A=e.getTarget();while((A!==null)&&(A.parentNode!=this.el.dom)){A=A.parentNode;}if(!A){A=this.el.dom.lastChild||this.el.dom;
+}return A;},getDragData:function(e){var A=this.findItemFromChild(e.getTarget());if(A){this.handleSelection(e);var B=this.getSelectedNodes();var C={source:this,copy:this.copy||(this.allowCopy&&e.ctrlKey),nodes:B,records:[]};var D=this.getSelectedIndexes();
+for(var i=0;i<D.length;i++){C.records.push(this.store.getAt(D[i]));}if(B.length==1){C.ddel=A.cloneNode(true);}else{var E=document.createElement('div');E.className='multi-proxy';for(var i=0,F=B.length;i<F;i++){E.appendChild(B[i].cloneNode(true));}C.ddel=E;
+}return C;}return false;},setDraggable:function(A){if(A instanceof Array){Roo.each(A,this.setDraggable,this);return;}if(this.dragZone){this.dragZone.addToGroup(A);}else{this.dragZone=new Roo.dd.DragZone(this.getEl(),{containerScroll:true,ddGroup:A});if(!this.multiSelect){this.singleSelect=true;
+}this.dragZone.getDragData=this.getDragData.createDelegate(this);}},setDroppable:function(A){if(A instanceof Array){Roo.each(A,this.setDroppable,this);return;}if(this.dropZone){this.dropZone.addToGroup(A);}else{this.dropZone=new Roo.dd.DropZone(this.getEl(),{containerScroll:true,ddGroup:A}
+);this.dropZone.getTargetFromEvent=this.getTargetFromEvent.createDelegate(this);this.dropZone.onNodeEnter=this.onNodeEnter.createDelegate(this);this.dropZone.onNodeOver=this.onNodeOver.createDelegate(this);this.dropZone.onNodeOut=this.onNodeOut.createDelegate(this);
+this.dropZone.onNodeDrop=this.onNodeDrop.createDelegate(this);}},getDropPoint:function(e,n,dd){if(n==this.el.dom){return "above";}var t=Roo.lib.Dom.getY(n),b=t+n.offsetHeight;var c=t+(b-t)/2;var y=Roo.lib.Event.getPageY(e);if(y<=c){return "above";}else{return "below";
+}},onNodeEnter:function(n,dd,e,A){return false;},onNodeOver:function(n,dd,e,A){var pt=this.getDropPoint(e,n,dd);var B=this.dropNotAllowed;if(pt){var C;if(pt=="above"){B=n.previousSibling?"x-tree-drop-ok-between":"x-tree-drop-ok-above";C="x-view-drag-insert-above";
+}else{B=n.nextSibling?"x-tree-drop-ok-between":"x-tree-drop-ok-below";C="x-view-drag-insert-below";}if(this.lastInsertClass!=C){Roo.fly(n).replaceClass(this.lastInsertClass,C);this.lastInsertClass=C;}}return B;},onNodeOut:function(n,dd,e,A){this.removeDropIndicators(n);
+},onNodeDrop:function(n,dd,e,A){if(this.fireEvent("drop",this,n,dd,e,A)===false){return false;}var pt=this.getDropPoint(e,n,dd);var B=(n==this.el.dom)?this.nodes.length:n.nodeIndex;if(pt=="below"){B++;}for(var i=0;i<A.records.length;i++){var r=A.records[i];
+var C=this.store.getById(r.id);if(C&&(dd!=this.dragZone)){Roo.fly(this.getNode(this.store.indexOf(C))).frame("red",1);}else{if(A.copy){this.store.insert(B++,r.copy());}else{A.source.isDirtyFlag=true;r.store.remove(r);this.store.insert(B++,r);}this.isDirtyFlag=true;
+}}this.dragZone.cachedTarget=null;return true;},removeDropIndicators:function(n){if(n){Roo.fly(n).removeClass(["x-view-drag-insert-above","x-view-drag-insert-below"]);this.lastInsertClass="_noclass";}},setDeletable:function(A){if(!this.singleSelect&&!this.multiSelect){this.singleSelect=true;
+}var c=this.getContextMenu();this.contextMenu.on("itemclick",function(B){switch(B.id){case "delete":this.remove(this.getSelectedIndexes());break;}},this);this.contextMenu.add({icon:A,id:"delete",text:'Delete'});},getContextMenu:function(){if(!this.contextMenu){this.contextMenu=new Roo.menu.Menu({id:this.id+"-contextmenu"}
+);this.el.on("contextmenu",this.showContextMenu,this);}return this.contextMenu;},disableContextMenu:function(){if(this.contextMenu){this.el.un("contextmenu",this.showContextMenu,this);}},showContextMenu:function(e,A){A=this.findItemFromChild(e.getTarget());
+if(A){e.stopEvent();this.select(this.getNode(A),this.multiSelect&&e.ctrlKey,true);this.contextMenu.showAt(e.getXY());}},remove:function(A){A=[].concat(A);for(var i=0;i<A.length;i++){var B=this.store.getAt(A[i]);this.store.remove(B);}},onDblClick:function(e){var A=this.findItemFromChild(e.getTarget());
+if(A){if(this.fireEvent("dblclick",this,this.indexOf(A),A,e)===false){return false;}if(this.dragGroup){var B=Roo.dd.DragDropMgr.getRelated(this.dragZone,true);while(B.indexOf(this.dropZone)>-1){B.remove(this.dropZone);}if(B.length==1){this.dragZone.cachedTarget=null;
+var el=Roo.get(B[0].getEl());var C=el.getBox(true);B[0].onNodeDrop(el.dom,{target:el.dom,xy:[C.x,C.y+C.height-1]},null,this.getDragData(e));}}}},handleSelection:function(e){this.dragZone.cachedTarget=null;var A=this.findItemFromChild(e.getTarget());if(!A){this.clearSelections(true);
+return;}if(A&&(this.multiSelect||this.singleSelect)){if(this.multiSelect&&e.shiftKey&&(!e.ctrlKey)&&this.lastSelection){this.select(this.getNodes(this.indexOf(this.lastSelection),A.nodeIndex),false);}else if(this.isSelected(this.getNode(A))&&e.ctrlKey){this.unselect(A);
+}else{this.select(A,this.multiSelect&&e.ctrlKey);this.lastSelection=A;}}},onItemClick:function(A,B,e){if(this.fireEvent("beforeclick",this,B,A,e)===false){return false;}return true;},unselect:function(A,B){var C=this.getNode(A);if(C&&this.isSelected(C)){if(this.fireEvent("beforeselect",this,C,this.selections)!==false){Roo.fly(C).removeClass(this.selectedClass);
+this.selections.remove(C);if(!B){this.fireEvent("selectionchange",this,this.selections);}}}}});
+// Roo/LayoutManager.js
+Roo.LayoutManager=function(A,B){Roo.LayoutManager.superclass.constructor.call(this);this.el=Roo.get(A);if(this.el.dom==document.body&&Roo.isIE&&!B.allowScroll){document.body.scroll="no";}else if(this.el.dom!=document.body&&this.el.getStyle('position')=='static'){this.el.position('relative');
+}this.id=this.el.id;this.el.addClass("x-layout-container");this.monitorWindowResize=true;this.regions={};this.addEvents({"layout":true,"regionresized":true,"regioncollapsed":true,"regionexpanded":true});this.updating=false;Roo.EventManager.onWindowResize(this.onWindowResize,this,true);
+};Roo.extend(Roo.LayoutManager,Roo.util.Observable,{isUpdating:function(){return this.updating;},beginUpdate:function(){this.updating=true;},endUpdate:function(A){this.updating=false;if(!A){this.layout();}},layout:function(){},onRegionResized:function(A,B){this.fireEvent("regionresized",A,B);
+this.layout();},onRegionCollapsed:function(A){this.fireEvent("regioncollapsed",A);},onRegionExpanded:function(A){this.fireEvent("regionexpanded",A);},getViewSize:function(){var A;if(this.el.dom!=document.body){A=this.el.getSize();}else{A={width:Roo.lib.Dom.getViewWidth(),height:Roo.lib.Dom.getViewHeight()}
+;}A.width-=this.el.getBorderWidth("lr")-this.el.getPadding("lr");A.height-=this.el.getBorderWidth("tb")-this.el.getPadding("tb");return A;},getEl:function(){return this.el;},getRegion:function(A){return this.regions[A.toLowerCase()];},onWindowResize:function(){if(this.monitorWindowResize){this.layout();
+}}});
+// Roo/BorderLayout.js
+Roo.BorderLayout=function(A,B){B=B||{};Roo.BorderLayout.superclass.constructor.call(this,A,B);this.factory=B.factory||Roo.BorderLayout.RegionFactory;for(var i=0,C=this.factory.validRegions.length;i<C;i++){var D=this.factory.validRegions[i];if(B[D]){this.addRegion(D,B[D]);
+}}};Roo.extend(Roo.BorderLayout,Roo.LayoutManager,{addRegion:function(A,B){if(!this.regions[A]){var r=this.factory.create(A,this,B);this.bindRegion(A,r);}return this.regions[A];},bindRegion:function(A,r){this.regions[A]=r;r.on("visibilitychange",this.layout,this);
+r.on("paneladded",this.layout,this);r.on("panelremoved",this.layout,this);r.on("invalidated",this.layout,this);r.on("resized",this.onRegionResized,this);r.on("collapsed",this.onRegionCollapsed,this);r.on("expanded",this.onRegionExpanded,this);},layout:function(){if(this.updating){return;
+}var A=this.getViewSize();var w=A.width;var h=A.height;var B=w;var C=h;var D=0;var E=0;var rs=this.regions;var F=rs["north"];var G=rs["south"];var H=rs["west"];var I=rs["east"];var J=rs["center"];if(F&&F.isVisible()){var b=F.getBox();var m=F.getMargins();
+b.width=w-(m.left+m.right);b.x=m.left;b.y=m.top;D=b.height+b.y+m.bottom;C-=D;F.updateBox(this.safeBox(b));}if(G&&G.isVisible()){var b=G.getBox();var m=G.getMargins();b.width=w-(m.left+m.right);b.x=m.left;var K=(b.height+m.top+m.bottom);b.y=h-K+m.top;C-=K;
+G.updateBox(this.safeBox(b));}if(H&&H.isVisible()){var b=H.getBox();var m=H.getMargins();b.height=C-(m.top+m.bottom);b.x=m.left;b.y=D+m.top;var L=(b.width+m.left+m.right);E+=L;B-=L;H.updateBox(this.safeBox(b));}if(I&&I.isVisible()){var b=I.getBox();var m=I.getMargins();
+b.height=C-(m.top+m.bottom);var L=(b.width+m.left+m.right);b.x=w-L+m.left;b.y=D+m.top;B-=L;I.updateBox(this.safeBox(b));}if(J){var m=J.getMargins();var M={x:E+m.left,y:D+m.top,width:B-(m.left+m.right),height:C-(m.top+m.bottom)};J.updateBox(this.safeBox(M));
+}this.el.repaint();this.fireEvent("layout",this);},safeBox:function(A){A.width=Math.max(0,A.width);A.height=Math.max(0,A.height);return A;},add:function(A,B){A=A.toLowerCase();return this.regions[A].add(B);},remove:function(A,B){A=A.toLowerCase();return this.regions[A].remove(B);
+},findPanel:function(A){var rs=this.regions;for(var B in rs){if(typeof rs[B]!="function"){var p=rs[B].getPanel(A);if(p){return p;}}}return null;},showPanel:function(A){var rs=this.regions;for(var B in rs){var r=rs[B];if(typeof r!="function"){if(r.hasPanel(A)){return r.showPanel(A);
+}}}return null;},restoreState:function(A){if(!A){A=Roo.state.Manager;}var sm=new Roo.LayoutStateManager();sm.init(this,A);},batchAdd:function(A){this.beginUpdate();for(var B in A){var lr=this.regions[B];if(lr){this.addTypedPanels(lr,A[B]);}}this.endUpdate();
+},addTypedPanels:function(lr,ps){if(typeof ps=='string'){lr.add(new Roo.ContentPanel(ps));}else if(ps instanceof Array){for(var i=0,A=ps.length;i<A;i++){this.addTypedPanels(lr,ps[i]);}}else if(!ps.events){var el=ps.el;delete ps.el;lr.add(new Roo.ContentPanel(el||Roo.id(),ps));
+}else{lr.add(ps);}},addxtype:function(A){if(!A.xtype.match(/Panel$/)){return false;}var B=false;if(typeof(A.region)=='undefined'){Roo.log("Failed to add Panel, region was not set");Roo.log(A);return false;}var C=A.region;delete A.region;var D=[];if(A.items){D=A.items;
+delete A.items;}var nb=false;switch(A.xtype){case 'ContentPanel':case 'ScrollPanel':case 'ViewPanel':if(A.autoCreate){B=new Roo[A.xtype](A);}else{var el=this.el.createChild();B=new Roo[A.xtype](el,A);}this.add(C,B);break;case 'TreePanel':A.el=this.el.createChild();
+B=new Roo[A.xtype](A);this.add(C,B);break;case 'NestedLayoutPanel':var el=this.el.createChild();var E=A.layout;delete A.layout;E.items=E.items||[];D=E.items;if(C=='center'&&this.active&&this.getRegion('center').panels.length<1){A.background=false;}var F=new Roo.BorderLayout(el,E);
+B=new Roo[A.xtype](F,A);this.add(C,B);nb={};break;case 'GridPanel':var el=this.el.createChild();var G=new Roo.grid[A.grid.xtype](el,A.grid);delete A.grid;if(C=='center'&&this.active){A.background=false;}B=new Roo[A.xtype](G,A);this.add(C,B);if(A.background){B.on('activate',function(gp){if(!gp.grid.rendered){gp.grid.render();
+}});}else{G.render();}break;default:if(typeof(Roo[A.xtype])!='undefined'){B=new Roo[A.xtype](A);this.add(C,B);}else{alert("Can not add '"+A.xtype+"' to BorderLayout");return null;}}this.beginUpdate();var C='';var H={};Roo.each(D,function(i){C=nb&&i.region?i.region:false;
+var I=B.addxtype(i);if(C){nb[C]=nb[C]==undefined?0:nb[C]+1;if(!i.background){H[C]=nb[C];}}});this.endUpdate();if(nb){for(var r in H){C=this.getRegion(r);if(C){C.showPanel(H[r]);}}}return B;}});Roo.BorderLayout.create=function(A,B){var C=new Roo.BorderLayout(B||document.body,A);
+C.beginUpdate();var D=Roo.BorderLayout.RegionFactory.validRegions;for(var j=0,E=D.length;j<E;j++){var lr=D[j];if(C.regions[lr]&&A[lr].panels){var r=C.regions[lr];var ps=A[lr].panels;C.addTypedPanels(r,ps);}}C.endUpdate();return C;};Roo.BorderLayout.RegionFactory={validRegions:["north","south","east","west","center"],create:function(A,B,C){A=A.toLowerCase();
+if(C.lightweight||C.basic){return new Roo.BasicLayoutRegion(B,C,A);}switch(A){case "north":return new Roo.NorthLayoutRegion(B,C);case "south":return new Roo.SouthLayoutRegion(B,C);case "east":return new Roo.EastLayoutRegion(B,C);case "west":return new Roo.WestLayoutRegion(B,C);
+case "center":return new Roo.CenterLayoutRegion(B,C);}throw 'Layout region "'+A+'" not supported.';}};
+// Roo/BasicLayoutRegion.js
+Roo.BasicLayoutRegion=function(A,B,C,D){this.mgr=A;this.position=C;this.events={"beforeremove":true,"invalidated":true,"visibilitychange":true,"paneladded":true,"panelremoved":true,"collapsed":true,"expanded":true,"slideshow":true,"slidehide":true,"panelactivated":true,"resized":true}
+;this.panels=new Roo.util.MixedCollection();this.panels.getKey=this.getPanelId.createDelegate(this);this.box=null;this.activePanel=null;if(B.listeners||B.events){Roo.BasicLayoutRegion.superclass.constructor.call(this,{listeners:B.listeners||{},events:B.events||{}
+});}if(D!==true){this.applyConfig(B);}};Roo.extend(Roo.BasicLayoutRegion,Roo.util.Observable,{getPanelId:function(p){return p.getId();},applyConfig:function(A){this.margins=A.margins||this.margins||{top:0,left:0,right:0,bottom:0};this.config=A;},resizeTo:function(A){var el=this.el?this.el:(this.activePanel?this.activePanel.getEl():null);
+if(el){switch(this.position){case "east":case "west":el.setWidth(A);this.fireEvent("resized",this,A);break;case "north":case "south":el.setHeight(A);this.fireEvent("resized",this,A);break;}}},getBox:function(){return this.activePanel?this.activePanel.getEl().getBox(false,true):null;
+},getMargins:function(){return this.margins;},updateBox:function(A){this.box=A;var el=this.activePanel.getEl();el.dom.style.left=A.x+"px";el.dom.style.top=A.y+"px";this.activePanel.setSize(A.width,A.height);},getEl:function(){return this.activePanel;},isVisible:function(){return this.activePanel?true:false;
+},setActivePanel:function(A){A=this.getPanel(A);if(this.activePanel&&this.activePanel!=A){this.activePanel.setActiveState(false);this.activePanel.getEl().setLeftTop(-10000,-10000);}this.activePanel=A;A.setActiveState(true);if(this.box){A.setSize(this.box.width,this.box.height);
+}this.fireEvent("panelactivated",this,A);this.fireEvent("invalidated");},showPanel:function(A){if(A=this.getPanel(A)){this.setActivePanel(A);}return A;},getActivePanel:function(){return this.activePanel;},add:function(A){if(arguments.length>1){for(var i=0,B=arguments.length;
+i<B;i++){this.add(arguments[i]);}return null;}if(this.hasPanel(A)){this.showPanel(A);return A;}var el=A.getEl();if(el.dom.parentNode!=this.mgr.el.dom){this.mgr.el.dom.appendChild(el.dom);}if(A.setRegion){A.setRegion(this);}this.panels.add(A);el.setStyle("position","absolute");
+if(!A.background){this.setActivePanel(A);if(this.config.initialSize&&this.panels.getCount()==1){this.resizeTo(this.config.initialSize);}}this.fireEvent("paneladded",this,A);return A;},hasPanel:function(A){if(typeof A=="object"){A=A.getId();}return this.getPanel(A)?true:false;
+},remove:function(A,B){A=this.getPanel(A);if(!A){return null;}var e={};this.fireEvent("beforeremove",this,A,e);if(e.cancel===true){return null;}var C=A.getId();this.panels.removeKey(C);return A;},getPanel:function(id){if(typeof id=="object"){return id;}return this.panels.get(id);
+},getPosition:function(){return this.position;}});
+// Roo/LayoutRegion.js
+Roo.LayoutRegion=function(A,B,C){Roo.LayoutRegion.superclass.constructor.call(this,A,B,C,true);var dh=Roo.DomHelper;this.el=dh.append(A.el.dom,{tag:"div",cls:"x-layout-panel x-layout-panel-"+this.position},true);this.titleEl=dh.append(this.el.dom,{tag:"div",unselectable:"on",cls:"x-unselectable x-layout-panel-hd x-layout-title-"+this.position,children:[{tag:"span",cls:"x-unselectable x-layout-panel-hd-text",unselectable:"on",html:"&#160;"}
+,{tag:"div",cls:"x-unselectable x-layout-panel-hd-tools",unselectable:"on"}]},true);this.titleEl.enableDisplayMode();this.titleTextEl=this.titleEl.dom.firstChild;this.tools=Roo.get(this.titleEl.dom.childNodes[1],true);this.closeBtn=this.createTool(this.tools.dom,"x-layout-close");
+this.closeBtn.enableDisplayMode();this.closeBtn.on("click",this.closeClicked,this);this.closeBtn.hide();this.createBody(B);this.visible=true;this.collapsed=false;if(B.hideWhenEmpty){this.hide();this.on("paneladded",this.validateVisibility,this);this.on("panelremoved",this.validateVisibility,this);
+}this.applyConfig(B);};Roo.extend(Roo.LayoutRegion,Roo.BasicLayoutRegion,{createBody:function(){this.bodyEl=this.el.createChild({tag:"div",cls:"x-layout-panel-body"});},applyConfig:function(c){if(c.collapsible&&this.position!="center"&&!this.collapsedEl){var dh=Roo.DomHelper;
+if(c.titlebar!==false){this.collapseBtn=this.createTool(this.tools.dom,"x-layout-collapse-"+this.position);this.collapseBtn.on("click",this.collapse,this);this.collapseBtn.enableDisplayMode();if(c.showPin===true||this.showPin){this.stickBtn=this.createTool(this.tools.dom,"x-layout-stick");
+this.stickBtn.enableDisplayMode();this.stickBtn.on("click",this.expand,this);this.stickBtn.hide();}}this.collapsedEl=dh.append(this.mgr.el.dom,{cls:"x-layout-collapsed x-layout-collapsed-"+this.position,children:[{cls:"x-layout-collapsed-tools",children:[{cls:"x-layout-ctools-inner"}
+]}]},true);if(c.floatable!==false){this.collapsedEl.addClassOnOver("x-layout-collapsed-over");this.collapsedEl.on("click",this.collapseClick,this);}if(c.collapsedTitle&&(this.position=="north"||this.position=="south")){this.collapsedTitleTextEl=dh.append(this.collapsedEl.dom,{tag:"div",cls:"x-unselectable x-layout-panel-hd-text",id:"message",unselectable:"on",style:{"float":"left"}
+});this.collapsedTitleTextEl.innerHTML=c.collapsedTitle;}this.expandBtn=this.createTool(this.collapsedEl.dom.firstChild.firstChild,"x-layout-expand-"+this.position);this.expandBtn.on("click",this.expand,this);}if(this.collapseBtn){this.collapseBtn.setVisible(c.collapsible==true);
+}this.cmargins=c.cmargins||this.cmargins||(this.position=="west"||this.position=="east"?{top:0,left:2,right:2,bottom:0}:{top:2,left:0,right:0,bottom:2});this.margins=c.margins||this.margins||{top:0,left:0,right:0,bottom:0};this.bottomTabs=c.tabPosition!="top";
+this.autoScroll=c.autoScroll||false;if(this.autoScroll){this.bodyEl.setStyle("overflow","auto");}else{this.bodyEl.setStyle("overflow","hidden");}if((!c.titlebar&&!c.title)||c.titlebar===false){this.titleEl.hide();}else{this.titleEl.show();if(c.title){this.titleTextEl.innerHTML=c.title;
+}}this.duration=c.duration||.30;this.slideDuration=c.slideDuration||.45;this.config=c;if(c.collapsed){this.collapse(true);}if(c.hidden){this.hide();}},isVisible:function(){return this.visible;},setCollapsedTitle:function(A){A=A||"&#160;";if(this.collapsedTitleTextEl){this.collapsedTitleTextEl.innerHTML=A;
+}},getBox:function(){var b;if(!this.collapsed){b=this.el.getBox(false,true);}else{b=this.collapsedEl.getBox(false,true);}return b;},getMargins:function(){return this.collapsed?this.cmargins:this.margins;},highlight:function(){this.el.addClass("x-layout-panel-dragover");
+},unhighlight:function(){this.el.removeClass("x-layout-panel-dragover");},updateBox:function(A){this.box=A;if(!this.collapsed){this.el.dom.style.left=A.x+"px";this.el.dom.style.top=A.y+"px";this.updateBody(A.width,A.height);}else{this.collapsedEl.dom.style.left=A.x+"px";
+this.collapsedEl.dom.style.top=A.y+"px";this.collapsedEl.setSize(A.width,A.height);}if(this.tabs){this.tabs.autoSizeTabs();}},updateBody:function(w,h){if(w!==null){this.el.setWidth(w);w-=this.el.getBorderWidth("rl");if(this.config.adjustments){w+=this.config.adjustments[0];
+}}if(h!==null){this.el.setHeight(h);h=this.titleEl&&this.titleEl.isDisplayed()?h-(this.titleEl.getHeight()||0):h;h-=this.el.getBorderWidth("tb");if(this.config.adjustments){h+=this.config.adjustments[1];}this.bodyEl.setHeight(h);if(this.tabs){h=this.tabs.syncHeight(h);
+}}if(this.panelSize){w=w!==null?w:this.panelSize.width;h=h!==null?h:this.panelSize.height;}if(this.activePanel){var el=this.activePanel.getEl();w=w!==null?w:el.getWidth();h=h!==null?h:el.getHeight();this.panelSize={width:w,height:h};this.activePanel.setSize(w,h);
+}if(Roo.isIE&&this.tabs){this.tabs.el.repaint();}},getEl:function(){return this.el;},hide:function(){if(!this.collapsed){this.el.dom.style.left="-2000px";this.el.hide();}else{this.collapsedEl.dom.style.left="-2000px";this.collapsedEl.hide();}this.visible=false;
+this.fireEvent("visibilitychange",this,false);},show:function(){if(!this.collapsed){this.el.show();}else{this.collapsedEl.show();}this.visible=true;this.fireEvent("visibilitychange",this,true);},closeClicked:function(){if(this.activePanel){this.remove(this.activePanel);
+}},collapseClick:function(e){if(this.isSlid){e.stopPropagation();this.slideIn();}else{e.stopPropagation();this.slideOut();}},collapse:function(A){if(this.collapsed){return;}this.collapsed=true;if(this.split){this.split.el.hide();}if(this.config.animate&&A!==true){this.fireEvent("invalidated",this);
+this.animateCollapse();}else{this.el.setLocation(-20000,-20000);this.el.hide();this.collapsedEl.show();this.fireEvent("collapsed",this);this.fireEvent("invalidated",this);}},animateCollapse:function(){},expand:function(e,A){if(e){e.stopPropagation();}if(!this.collapsed||this.el.hasActiveFx()){return;
+}if(this.isSlid){this.afterSlideIn();A=true;}this.collapsed=false;if(this.config.animate&&A!==true){this.animateExpand();}else{this.el.show();if(this.split){this.split.el.show();}this.collapsedEl.setLocation(-2000,-2000);this.collapsedEl.hide();this.fireEvent("invalidated",this);
+this.fireEvent("expanded",this);}},animateExpand:function(){},initTabs:function(){this.bodyEl.setStyle("overflow","hidden");var ts=new Roo.TabPanel(this.bodyEl.dom,{tabPosition:this.bottomTabs?'bottom':'top',disableTooltips:this.config.disableTabTips,toolbar:this.config.toolbar}
+);if(this.config.hideTabs){ts.stripWrap.setDisplayed(false);}this.tabs=ts;ts.resizeTabs=this.config.resizeTabs===true;ts.minTabWidth=this.config.minTabWidth||40;ts.maxTabWidth=this.config.maxTabWidth||250;ts.preferredTabWidth=this.config.preferredTabWidth||150;
+ts.monitorResize=false;ts.bodyEl.setStyle("overflow",this.config.autoScroll?"auto":"hidden");ts.bodyEl.addClass('x-layout-tabs-body');this.panels.each(this.initPanelAsTab,this);},initPanelAsTab:function(A){var ti=this.tabs.addTab(A.getEl().id,A.getTitle(),null,this.config.closeOnTab&&A.isClosable());
+if(A.tabTip!==undefined){ti.setTooltip(A.tabTip);}ti.on("activate",function(){this.setActivePanel(A);},this);if(this.config.closeOnTab){ti.on("beforeclose",function(t,e){e.cancel=true;this.remove(A);},this);}return ti;},updatePanelTitle:function(A,B){if(this.activePanel==A){this.updateTitle(B);
+}if(this.tabs){var ti=this.tabs.getTab(A.getEl().id);ti.setText(B);if(A.tabTip!==undefined){ti.setTooltip(A.tabTip);}}},updateTitle:function(A){if(this.titleTextEl&&!this.config.title){this.titleTextEl.innerHTML=(typeof A!="undefined"&&A.length>0?A:"&#160;");
+}},setActivePanel:function(A){A=this.getPanel(A);if(this.activePanel&&this.activePanel!=A){this.activePanel.setActiveState(false);}this.activePanel=A;A.setActiveState(true);if(this.panelSize){A.setSize(this.panelSize.width,this.panelSize.height);}if(this.closeBtn){this.closeBtn.setVisible(!this.config.closeOnTab&&!this.isSlid&&A.isClosable());
+}this.updateTitle(A.getTitle());if(this.tabs){this.fireEvent("invalidated",this);}this.fireEvent("panelactivated",this,A);},showPanel:function(A){A=this.getPanel(A);if(A){if(this.tabs){var B=this.tabs.getTab(A.getEl().id);if(B.isHidden()){this.tabs.unhideTab(B.id);
+}B.activate();}else{this.setActivePanel(A);}}return A;},getActivePanel:function(){return this.activePanel;},validateVisibility:function(){if(this.panels.getCount()<1){this.updateTitle("&#160;");this.closeBtn.hide();this.hide();}else{if(!this.isVisible()){this.show();
+}}},add:function(A){if(arguments.length>1){for(var i=0,B=arguments.length;i<B;i++){this.add(arguments[i]);}return null;}if(this.hasPanel(A)){this.showPanel(A);return A;}A.setRegion(this);this.panels.add(A);if(this.panels.getCount()==1&&!this.config.alwaysShowTabs){this.bodyEl.dom.appendChild(A.getEl().dom);
+if(A.background!==true){this.setActivePanel(A);}this.fireEvent("paneladded",this,A);return A;}if(!this.tabs){this.initTabs();}else{this.initPanelAsTab(A);}if(A.background!==true){this.tabs.activate(A.getEl().id);}this.fireEvent("paneladded",this,A);return A;
+},hidePanel:function(A){if(this.tabs&&(A=this.getPanel(A))){this.tabs.hideTab(A.getEl().id);}},unhidePanel:function(A){if(this.tabs&&(A=this.getPanel(A))){this.tabs.unhideTab(A.getEl().id);}},clearPanels:function(){while(this.panels.getCount()>0){this.remove(this.panels.first());
+}},remove:function(A,B){A=this.getPanel(A);if(!A){return null;}var e={};this.fireEvent("beforeremove",this,A,e);if(e.cancel===true){return null;}B=(typeof B!="undefined"?B:(this.config.preservePanels===true||A.preserve===true));var C=A.getId();this.panels.removeKey(C);
+if(B){document.body.appendChild(A.getEl().dom);}if(this.tabs){this.tabs.removeTab(A.getEl().id);}else if(!B){this.bodyEl.dom.removeChild(A.getEl().dom);}if(this.panels.getCount()==1&&this.tabs&&!this.config.alwaysShowTabs){var p=this.panels.first();var D=document.createElement("div");
+D.appendChild(p.getEl().dom);this.bodyEl.update("");this.bodyEl.dom.appendChild(p.getEl().dom);D=null;this.updateTitle(p.getTitle());this.tabs=null;this.bodyEl.setStyle("overflow",this.config.autoScroll?"auto":"hidden");this.setActivePanel(p);}A.setRegion(null);
+if(this.activePanel==A){this.activePanel=null;}if(this.config.autoDestroy!==false&&B!==true){try{A.destroy();}catch(e){}}this.fireEvent("panelremoved",this,A);return A;},getTabs:function(){return this.tabs;},createTool:function(A,B){var C=Roo.DomHelper.append(A,{tag:"div",cls:"x-layout-tools-button",children:[{tag:"div",cls:"x-layout-tools-button-inner "+B,html:"&#160;"}
+]},true);C.addClassOnOver("x-layout-tools-button-over");return C;}});
+// Roo/SplitLayoutRegion.js
+Roo.SplitLayoutRegion=function(A,B,C,D){this.cursor=D;Roo.SplitLayoutRegion.superclass.constructor.call(this,A,B,C);};Roo.extend(Roo.SplitLayoutRegion,Roo.LayoutRegion,{splitTip:"Drag to resize.",collapsibleSplitTip:"Drag to resize. Double click to hide.",useSplitTips:false,applyConfig:function(A){Roo.SplitLayoutRegion.superclass.applyConfig.call(this,A);
+if(A.split){if(!this.split){var B=Roo.DomHelper.append(this.mgr.el.dom,{tag:"div",id:this.el.id+"-split",cls:"x-layout-split x-layout-split-"+this.position,html:"&#160;"});this.split=new Roo.SplitBar(B,this.el,this.orientation);this.split.on("moved",this.onSplitMove,this);
+this.split.useShim=A.useShim===true;this.split.getMaximumSize=this[this.position=='north'||this.position=='south'?'getVMaxSize':'getHMaxSize'].createDelegate(this);if(this.useSplitTips){this.split.el.dom.title=A.collapsible?this.collapsibleSplitTip:this.splitTip;
+}if(A.collapsible){this.split.el.on("dblclick",this.collapse,this);}}if(typeof A.minSize!="undefined"){this.split.minSize=A.minSize;}if(typeof A.maxSize!="undefined"){this.split.maxSize=A.maxSize;}if(A.hideWhenEmpty||A.hidden||A.collapsed){this.hideSplitter();
+}}},getHMaxSize:function(){var A=this.config.maxSize||10000;var B=this.mgr.getRegion("center");return Math.min(A,(this.el.getWidth()+B.getEl().getWidth())-B.getMinWidth());},getVMaxSize:function(){var A=this.config.maxSize||10000;var B=this.mgr.getRegion("center");
+return Math.min(A,(this.el.getHeight()+B.getEl().getHeight())-B.getMinHeight());},onSplitMove:function(A,B){this.fireEvent("resized",this,B);},getSplitBar:function(){return this.split;},hide:function(){this.hideSplitter();Roo.SplitLayoutRegion.superclass.hide.call(this);
+},hideSplitter:function(){if(this.split){this.split.el.setLocation(-2000,-2000);this.split.el.hide();}},show:function(){if(this.split){this.split.el.show();}Roo.SplitLayoutRegion.superclass.show.call(this);},beforeSlide:function(){if(Roo.isGecko){this.bodyEl.clip();
+if(this.tabs){this.tabs.bodyEl.clip();}if(this.activePanel){this.activePanel.getEl().clip();if(this.activePanel.beforeSlide){this.activePanel.beforeSlide();}}}},afterSlide:function(){if(Roo.isGecko){this.bodyEl.unclip();if(this.tabs){this.tabs.bodyEl.unclip();
+}if(this.activePanel){this.activePanel.getEl().unclip();if(this.activePanel.afterSlide){this.activePanel.afterSlide();}}}},initAutoHide:function(){if(this.autoHide!==false){if(!this.autoHideHd){var st=new Roo.util.DelayedTask(this.slideIn,this);this.autoHideHd={"mouseout":function(e){if(!e.within(this.el,true)){st.delay(500);
+}},"mouseover":function(e){st.cancel();},scope:this};}this.el.on(this.autoHideHd);}},clearAutoHide:function(){if(this.autoHide!==false){this.el.un("mouseout",this.autoHideHd.mouseout);this.el.un("mouseover",this.autoHideHd.mouseover);}},clearMonitor:function(){Roo.get(document).un("click",this.slideInIf,this);
+},slideOut:function(){if(this.isSlid||this.el.hasActiveFx()){return;}this.isSlid=true;if(this.collapseBtn){this.collapseBtn.hide();}this.closeBtnState=this.closeBtn.getStyle('display');this.closeBtn.hide();if(this.stickBtn){this.stickBtn.show();}this.el.show();
+this.el.alignTo(this.collapsedEl,this.getCollapseAnchor());this.beforeSlide();this.el.setStyle("z-index",10001);this.el.slideIn(this.getSlideAnchor(),{callback:function(){this.afterSlide();this.initAutoHide();Roo.get(document).on("click",this.slideInIf,this);
+this.fireEvent("slideshow",this);},scope:this,block:true});},afterSlideIn:function(){this.clearAutoHide();this.isSlid=false;this.clearMonitor();this.el.setStyle("z-index","");if(this.collapseBtn){this.collapseBtn.show();}this.closeBtn.setStyle('display',this.closeBtnState);
+if(this.stickBtn){this.stickBtn.hide();}this.fireEvent("slidehide",this);},slideIn:function(cb){if(!this.isSlid||this.el.hasActiveFx()){Roo.callback(cb);return;}this.isSlid=false;this.beforeSlide();this.el.slideOut(this.getSlideAnchor(),{callback:function(){this.el.setLeftTop(-10000,-10000);
+this.afterSlide();this.afterSlideIn();Roo.callback(cb);},scope:this,block:true});},slideInIf:function(e){if(!e.within(this.el)){this.slideIn();}},animateCollapse:function(){this.beforeSlide();this.el.setStyle("z-index",20000);var A=this.getSlideAnchor();this.el.slideOut(A,{callback:function(){this.el.setStyle("z-index","");
+this.collapsedEl.slideIn(A,{duration:.3});this.afterSlide();this.el.setLocation(-10000,-10000);this.el.hide();this.fireEvent("collapsed",this);},scope:this,block:true});},animateExpand:function(){this.beforeSlide();this.el.alignTo(this.collapsedEl,this.getCollapseAnchor(),this.getExpandAdj());
+this.el.setStyle("z-index",20000);this.collapsedEl.hide({duration:.1});this.el.slideIn(this.getSlideAnchor(),{callback:function(){this.el.setStyle("z-index","");this.afterSlide();if(this.split){this.split.el.show();}this.fireEvent("invalidated",this);this.fireEvent("expanded",this);
+},scope:this,block:true});},anchors:{"west":"left","east":"right","north":"top","south":"bottom"},sanchors:{"west":"l","east":"r","north":"t","south":"b"},canchors:{"west":"tl-tr","east":"tr-tl","north":"tl-bl","south":"bl-tl"},getAnchor:function(){return this.anchors[this.position];
+},getCollapseAnchor:function(){return this.canchors[this.position];},getSlideAnchor:function(){return this.sanchors[this.position];},getAlignAdj:function(){var cm=this.cmargins;switch(this.position){case "west":return [0,0];break;case "east":return [0,0];
+break;case "north":return [0,0];break;case "south":return [0,0];break;}},getExpandAdj:function(){var c=this.collapsedEl,cm=this.cmargins;switch(this.position){case "west":return [-(cm.right+c.getWidth()+cm.left),0];break;case "east":return [cm.right+c.getWidth()+cm.left,0];
+break;case "north":return [0,-(cm.top+cm.bottom+c.getHeight())];break;case "south":return [0,cm.top+cm.bottom+c.getHeight()];break;}}});
+// Roo/CenterLayoutRegion.js
+Roo.CenterLayoutRegion=function(A,B){Roo.LayoutRegion.call(this,A,B,"center");this.visible=true;this.minWidth=B.minWidth||20;this.minHeight=B.minHeight||20;};Roo.extend(Roo.CenterLayoutRegion,Roo.LayoutRegion,{hide:function(){},show:function(){},getMinWidth:function(){return this.minWidth;
+},getMinHeight:function(){return this.minHeight;}});Roo.NorthLayoutRegion=function(A,B){Roo.LayoutRegion.call(this,A,B,"north","n-resize");if(this.split){this.split.placement=Roo.SplitBar.TOP;this.split.orientation=Roo.SplitBar.VERTICAL;this.split.el.addClass("x-layout-split-v");
+}var C=B.initialSize||B.height;if(typeof C!="undefined"){this.el.setHeight(C);}};Roo.extend(Roo.NorthLayoutRegion,Roo.SplitLayoutRegion,{orientation:Roo.SplitBar.VERTICAL,getBox:function(){if(this.collapsed){return this.collapsedEl.getBox();}var A=this.el.getBox();
+if(this.split){A.height+=this.split.el.getHeight();}return A;},updateBox:function(A){if(this.split&&!this.collapsed){A.height-=this.split.el.getHeight();this.split.el.setLeft(A.x);this.split.el.setTop(A.y+A.height);this.split.el.setWidth(A.width);}if(this.collapsed){this.updateBody(A.width,null);
+}Roo.LayoutRegion.prototype.updateBox.call(this,A);}});Roo.SouthLayoutRegion=function(A,B){Roo.SplitLayoutRegion.call(this,A,B,"south","s-resize");if(this.split){this.split.placement=Roo.SplitBar.BOTTOM;this.split.orientation=Roo.SplitBar.VERTICAL;this.split.el.addClass("x-layout-split-v");
+}var C=B.initialSize||B.height;if(typeof C!="undefined"){this.el.setHeight(C);}};Roo.extend(Roo.SouthLayoutRegion,Roo.SplitLayoutRegion,{orientation:Roo.SplitBar.VERTICAL,getBox:function(){if(this.collapsed){return this.collapsedEl.getBox();}var A=this.el.getBox();
+if(this.split){var sh=this.split.el.getHeight();A.height+=sh;A.y-=sh;}return A;},updateBox:function(A){if(this.split&&!this.collapsed){var sh=this.split.el.getHeight();A.height-=sh;A.y+=sh;this.split.el.setLeft(A.x);this.split.el.setTop(A.y-sh);this.split.el.setWidth(A.width);
+}if(this.collapsed){this.updateBody(A.width,null);}Roo.LayoutRegion.prototype.updateBox.call(this,A);}});Roo.EastLayoutRegion=function(A,B){Roo.SplitLayoutRegion.call(this,A,B,"east","e-resize");if(this.split){this.split.placement=Roo.SplitBar.RIGHT;this.split.orientation=Roo.SplitBar.HORIZONTAL;
+this.split.el.addClass("x-layout-split-h");}var C=B.initialSize||B.width;if(typeof C!="undefined"){this.el.setWidth(C);}};Roo.extend(Roo.EastLayoutRegion,Roo.SplitLayoutRegion,{orientation:Roo.SplitBar.HORIZONTAL,getBox:function(){if(this.collapsed){return this.collapsedEl.getBox();
+}var A=this.el.getBox();if(this.split){var sw=this.split.el.getWidth();A.width+=sw;A.x-=sw;}return A;},updateBox:function(A){if(this.split&&!this.collapsed){var sw=this.split.el.getWidth();A.width-=sw;this.split.el.setLeft(A.x);this.split.el.setTop(A.y);this.split.el.setHeight(A.height);
+A.x+=sw;}if(this.collapsed){this.updateBody(null,A.height);}Roo.LayoutRegion.prototype.updateBox.call(this,A);}});Roo.WestLayoutRegion=function(A,B){Roo.SplitLayoutRegion.call(this,A,B,"west","w-resize");if(this.split){this.split.placement=Roo.SplitBar.LEFT;
+this.split.orientation=Roo.SplitBar.HORIZONTAL;this.split.el.addClass("x-layout-split-h");}var C=B.initialSize||B.width;if(typeof C!="undefined"){this.el.setWidth(C);}};Roo.extend(Roo.WestLayoutRegion,Roo.SplitLayoutRegion,{orientation:Roo.SplitBar.HORIZONTAL,getBox:function(){if(this.collapsed){return this.collapsedEl.getBox();
+}var A=this.el.getBox();if(this.split){A.width+=this.split.el.getWidth();}return A;},updateBox:function(A){if(this.split&&!this.collapsed){var sw=this.split.el.getWidth();A.width-=sw;this.split.el.setLeft(A.x+A.width);this.split.el.setTop(A.y);this.split.el.setHeight(A.height);
+}if(this.collapsed){this.updateBody(null,A.height);}Roo.LayoutRegion.prototype.updateBox.call(this,A);}});
+// Roo/LayoutStateManager.js
+Roo.LayoutStateManager=function(A){this.state={north:{},south:{},east:{},west:{}};};Roo.LayoutStateManager.prototype={init:function(A,B){this.provider=B;var C=B.get(A.id+"-layout-state");if(C){var D=A.isUpdating();if(!D){A.beginUpdate();}for(var E in C){if(typeof C[E]!="function"){var F=C[E];
+var r=A.getRegion(E);if(r&&F){if(F.size){r.resizeTo(F.size);}if(F.collapsed==true){r.collapse(true);}else{r.expand(null,true);}}}}if(!D){A.endUpdate();}this.state=C;}this.layout=A;A.on("regionresized",this.onRegionResized,this);A.on("regioncollapsed",this.onRegionCollapsed,this);
+A.on("regionexpanded",this.onRegionExpanded,this);},storeState:function(){this.provider.set(this.layout.id+"-layout-state",this.state);},onRegionResized:function(A,B){this.state[A.getPosition()].size=B;this.storeState();},onRegionCollapsed:function(A){this.state[A.getPosition()].collapsed=true;
+this.storeState();},onRegionExpanded:function(A){this.state[A.getPosition()].collapsed=false;this.storeState();}};
+// Roo/ContentPanel.js
+Roo.ContentPanel=function(el,A,B){if(el.autoCreate){A=el;el=Roo.id();}this.el=Roo.get(el);if(!this.el&&A&&A.autoCreate){if(typeof A.autoCreate=="object"){if(!A.autoCreate.id){A.autoCreate.id=A.id||el;}this.el=Roo.DomHelper.append(document.body,A.autoCreate,true);
+}else{this.el=Roo.DomHelper.append(document.body,{tag:"div",cls:"x-layout-inactive-content",id:A.id||el},true);}}this.closable=false;this.loaded=false;this.active=false;if(typeof A=="string"){this.title=A;}else{Roo.apply(this,A);}if(this.toolbar&&!this.toolbar.el&&this.toolbar.xtype){this.wrapEl=this.el.wrap();
+this.toolbar.container=this.el.insertSibling(false,'before');this.toolbar=new Roo.Toolbar(this.toolbar);}if(this.footer&&!this.footer.el&&this.footer.xtype){if(!this.wrapEl){this.wrapEl=this.el.wrap();}this.footer.container=this.wrapEl.createChild();this.footer=Roo.factory(this.footer,Roo);
+}if(this.resizeEl){this.resizeEl=Roo.get(this.resizeEl,true);}else{this.resizeEl=this.el;}this.addEvents({"activate":true,"deactivate":true,"resize":true,"render":true});if(this.autoScroll){this.resizeEl.setStyle("overflow","auto");}else{this.el.on('scroll',function(){Roo.log('fix random scolling');
+this.scrollTo('top',0);});}B=B||this.content;if(B){this.setContent(B);}if(A&&A.url){this.setUrl(this.url,this.params,this.loadOnce);}Roo.ContentPanel.superclass.constructor.call(this);if(this.view&&typeof(this.view.xtype)!='undefined'){this.view.el=this.el.appendChild(document.createElement("div"));
+this.view=Roo.factory(this.view);this.view.render&&this.view.render(false,'');}this.fireEvent('render',this);};Roo.extend(Roo.ContentPanel,Roo.util.Observable,{tabTip:'',setRegion:function(A){this.region=A;if(A){this.el.replaceClass("x-layout-inactive-content","x-layout-active-content");
+}else{this.el.replaceClass("x-layout-active-content","x-layout-inactive-content");}},getToolbar:function(){return this.toolbar;},setActiveState:function(A){this.active=A;if(!A){this.fireEvent("deactivate",this);}else{this.fireEvent("activate",this);}},setContent:function(A,B){this.el.update(A,B);
+},ignoreResize:function(w,h){if(this.lastSize&&this.lastSize.width==w&&this.lastSize.height==h){return true;}else{this.lastSize={width:w,height:h};return false;}},getUpdateManager:function(){return this.el.getUpdateManager();},load:function(){var um=this.el.getUpdateManager();
+um.update.apply(um,arguments);return this;},setUrl:function(A,B,C){if(this.refreshDelegate){this.removeListener("activate",this.refreshDelegate);}this.refreshDelegate=this._handleRefresh.createDelegate(this,[A,B,C]);this.on("activate",this.refreshDelegate);
+return this.el.getUpdateManager();},_handleRefresh:function(A,B,C){if(!C||!this.loaded){var D=this.el.getUpdateManager();D.update(A,B,this._setLoaded.createDelegate(this));}},_setLoaded:function(){this.loaded=true;},getId:function(){return this.el.id;},getEl:function(){return this.wrapEl||this.el;
+},adjustForComponents:function(A,B){if(this.resizeEl!=this.el){A-=this.el.getFrameWidth('lr');B-=this.el.getFrameWidth('tb');}if(this.toolbar){var te=this.toolbar.getEl();B-=te.getHeight();te.setWidth(A);}if(this.footer){var te=this.footer.getEl();Roo.log("footer:"+te.getHeight());
+B-=te.getHeight();te.setWidth(A);}if(this.adjustments){A+=this.adjustments[0];B+=this.adjustments[1];}return {"width":A,"height":B};},setSize:function(A,B){if(this.fitToFrame&&!this.ignoreResize(A,B)){if(this.fitContainer&&this.resizeEl!=this.el){this.el.setSize(A,B);
+}var C=this.adjustForComponents(A,B);this.resizeEl.setSize(this.autoWidth?"auto":C.width,this.autoHeight?"auto":C.height);this.fireEvent('resize',this,C.width,C.height);}},getTitle:function(){return this.title;},setTitle:function(A){this.title=A;if(this.region){this.region.updatePanelTitle(this,A);
+}},isClosable:function(){return this.closable;},beforeSlide:function(){this.el.clip();this.resizeEl.clip();},afterSlide:function(){this.el.unclip();this.resizeEl.unclip();},refresh:function(){if(this.refreshDelegate){this.loaded=false;this.refreshDelegate();
+}},destroy:function(){this.el.removeAllListeners();var A=document.createElement("span");A.appendChild(this.el.dom);A.innerHTML="";this.el.remove();this.el=null;},form:false,view:false,addxtype:function(A){if(A.xtype.match(/^Form$/)){var el;el=this.el.createChild();
+this.form=new Roo.form.Form(A);if(this.form.allItems.length){this.form.render(el.dom);}return this.form;}if(['View','JsonView','DatePicker'].indexOf(A.xtype)>-1){A.el=this.el.appendChild(document.createElement("div"));var B=new Roo.factory(A);B.render&&B.render(false,'');
+this.view=B;return B;}return false;}});Roo.GridPanel=function(A,B){this.wrapper=Roo.DomHelper.append(document.body,{tag:"div",cls:"x-layout-grid-wrapper x-layout-inactive-content"},true);this.wrapper.dom.appendChild(A.getGridEl().dom);Roo.GridPanel.superclass.constructor.call(this,this.wrapper,B);
+if(this.toolbar){this.toolbar.el.insertBefore(this.wrapper.dom.firstChild);}if(this.footer&&!this.footer.el&&this.footer.xtype){this.footer.container=this.grid.getView().getFooterPanel(true);this.footer.dataSource=this.grid.dataSource;this.footer=Roo.factory(this.footer,Roo);
+}A.monitorWindowResize=false;A.autoHeight=false;A.autoWidth=false;this.grid=A;this.grid.getGridEl().replaceClass("x-layout-inactive-content","x-layout-component-panel");};Roo.extend(Roo.GridPanel,Roo.ContentPanel,{getId:function(){return this.grid.id;},getGrid:function(){return this.grid;
+},setSize:function(A,B){if(!this.ignoreResize(A,B)){var C=this.grid;var D=this.adjustForComponents(A,B);C.getGridEl().setSize(D.width,D.height);C.autoSize();}},beforeSlide:function(){this.grid.getView().scroller.clip();},afterSlide:function(){this.grid.getView().scroller.unclip();
+},destroy:function(){this.grid.destroy();delete this.grid;Roo.GridPanel.superclass.destroy.call(this);}});Roo.NestedLayoutPanel=function(A,B){Roo.NestedLayoutPanel.superclass.constructor.call(this,A.getEl(),B);A.monitorWindowResize=false;this.layout=A;this.layout.getEl().addClass("x-layout-nested-layout");
+};Roo.extend(Roo.NestedLayoutPanel,Roo.ContentPanel,{setSize:function(A,B){if(!this.ignoreResize(A,B)){var C=this.adjustForComponents(A,B);var el=this.layout.getEl();el.setSize(C.width,C.height);var D=el.dom.offsetWidth;this.layout.layout();if(Roo.isIE&&!this.initialized){this.initialized=true;
+this.layout.layout();}}},setActiveState:function(A){this.active=A;if(!A){this.fireEvent("deactivate",this);return;}this.fireEvent("activate",this);if(!this.layout){return;}var B=false;for(var r in this.layout.regions){B=this.layout.getRegion(r);if(B.getActivePanel()){B.setActivePanel(B.getActivePanel());
+continue;}if(!B.panels.length){continue;}B.showPanel(B.getPanel(0));}},getLayout:function(){return this.layout;},addxtype:function(A){return this.layout.addxtype(A);}});Roo.ScrollPanel=function(el,A,B){A=A||{};A.fitToFrame=true;Roo.ScrollPanel.superclass.constructor.call(this,el,A,B);
+this.el.dom.style.overflow="hidden";var C=this.el.wrap({cls:"x-scroller x-layout-inactive-content"});this.el.removeClass("x-layout-inactive-content");this.el.on("mousewheel",this.onWheel,this);var up=C.createChild({cls:"x-scroller-up",html:"&#160;"},this.el.dom);
+var D=C.createChild({cls:"x-scroller-down",html:"&#160;"});up.unselectable();D.unselectable();up.on("click",this.scrollUp,this);D.on("click",this.scrollDown,this);up.addClassOnOver("x-scroller-btn-over");D.addClassOnOver("x-scroller-btn-over");up.addClassOnClick("x-scroller-btn-click");
+D.addClassOnClick("x-scroller-btn-click");this.adjustments=[0,-(up.getHeight()+D.getHeight())];this.resizeEl=this.el;this.el=C;this.up=up;this.down=D;};Roo.extend(Roo.ScrollPanel,Roo.ContentPanel,{increment:100,wheelIncrement:5,scrollUp:function(){this.resizeEl.scroll("up",this.increment,{callback:this.afterScroll,scope:this}
+);},scrollDown:function(){this.resizeEl.scroll("down",this.increment,{callback:this.afterScroll,scope:this});},afterScroll:function(){var el=this.resizeEl;var t=el.dom.scrollTop,h=el.dom.scrollHeight,ch=el.dom.clientHeight;this.up[t==0?"addClass":"removeClass"]("x-scroller-btn-disabled");
+this.down[h-t<=ch?"addClass":"removeClass"]("x-scroller-btn-disabled");},setSize:function(){Roo.ScrollPanel.superclass.setSize.apply(this,arguments);this.afterScroll();},onWheel:function(e){var d=e.getWheelDelta();this.resizeEl.dom.scrollTop-=(d*this.wheelIncrement);
+this.afterScroll();e.stopEvent();},setContent:function(A,B){this.resizeEl.update(A,B);}});Roo.TreePanel=function(A){var el=A.el;var B=A.tree;delete A.tree;delete A.el;var C=el.createChild();A.resizeEl=C;Roo.TreePanel.superclass.constructor.call(this,el,A);
+this.tree=new Roo.tree.TreePanel(C,B);this.on('activate',function(){if(this.tree.rendered){return;}this.tree.render();});};Roo.extend(Roo.TreePanel,Roo.ContentPanel,{fitToFrame:true,autoScroll:true});
+// Roo/ReaderLayout.js
+Roo.ReaderLayout=function(A,B){var c=A||{size:{}};Roo.ReaderLayout.superclass.constructor.call(this,B||document.body,{north:c.north!==false?Roo.apply({split:false,initialSize:32,titlebar:false},c.north):false,west:c.west!==false?Roo.apply({split:true,initialSize:200,minSize:175,maxSize:400,titlebar:true,collapsible:true,animate:true,margins:{left:5,right:0,bottom:5,top:5}
+,cmargins:{left:5,right:5,bottom:5,top:5}},c.west):false,east:c.east!==false?Roo.apply({split:true,initialSize:200,minSize:175,maxSize:400,titlebar:true,collapsible:true,animate:true,margins:{left:0,right:5,bottom:5,top:5},cmargins:{left:5,right:5,bottom:5,top:5}
+},c.east):false,center:Roo.apply({tabPosition:'top',autoScroll:false,closeOnTab:true,titlebar:false,margins:{left:c.west!==false?0:5,right:c.east!==false?0:5,bottom:5,top:2}},c.center)});this.el.addClass('x-reader');this.beginUpdate();var C=new Roo.BorderLayout(Roo.get(document.body).createChild(),{south:c.preview!==false?Roo.apply({split:true,initialSize:200,minSize:100,autoScroll:true,collapsible:true,titlebar:true,cmargins:{top:5,left:0,right:0,bottom:0}
+},c.preview):false,center:Roo.apply({autoScroll:false,titlebar:false,minHeight:200},c.listView)});this.add('center',new Roo.NestedLayoutPanel(C,Roo.apply({title:c.mainTitle||'',tabTip:''},c.innerPanelCfg)));this.endUpdate();this.regions.preview=C.getRegion('south');
+this.regions.listView=C.getRegion('center');};Roo.extend(Roo.ReaderLayout,Roo.BorderLayout);
+// Roo/grid/Grid.js
+Roo.grid.Grid=function(A,B){this.container=Roo.get(A);this.container.update("");this.container.setStyle("overflow","hidden");this.container.addClass('x-grid-container');this.id=this.container.id;Roo.apply(this,B);if(this.ds){this.dataSource=this.ds;delete this.ds;
+}if(this.cm){this.colModel=this.cm;delete this.cm;}if(this.sm){this.selModel=this.sm;delete this.sm;}if(this.selModel){this.selModel=Roo.factory(this.selModel,Roo.grid);this.sm=this.selModel;this.sm.xmodule=this.xmodule||false;}if(typeof(this.colModel.config)=='undefined'){this.colModel=new Roo.grid.ColumnModel(this.colModel);
+this.cm=this.colModel;this.cm.xmodule=this.xmodule||false;}if(this.dataSource){this.dataSource=Roo.factory(this.dataSource,Roo.data);this.ds=this.dataSource;this.ds.xmodule=this.xmodule||false;}if(this.width){this.container.setWidth(this.width);}if(this.height){this.container.setHeight(this.height);
+}this.addEvents({"click":true,"dblclick":true,"contextmenu":true,"mousedown":true,"mouseup":true,"mouseover":true,"mouseout":true,"keypress":true,"keydown":true,"cellclick":true,"celldblclick":true,"rowclick":true,"rowdblclick":true,"headerclick":true,"headerdblclick":true,"rowcontextmenu":true,"cellcontextmenu":true,"headercontextmenu":true,"bodyscroll":true,"columnresize":true,"columnmove":true,"startdrag":true,"enddrag":true,"dragdrop":true,"dragover":true,"dragenter":true,"dragout":true,'rowclass':true,'render':true}
+);Roo.grid.Grid.superclass.constructor.call(this);};Roo.extend(Roo.grid.Grid,Roo.util.Observable,{minColumnWidth:25,autoSizeColumns:false,autoSizeHeaders:true,monitorWindowResize:true,maxRowsToMeasure:0,trackMouseOver:true,enableDragDrop:false,enableColumnMove:true,enableColumnHide:true,enableRowHeightSync:false,stripeRows:true,autoHeight:false,autoExpandColumn:false,autoExpandMin:50,autoExpandMax:1000,view:null,loadMask:false,dropTarget:false,rendered:false,render:function(){var c=this.container;
+if((!c.dom.offsetHeight||c.dom.offsetHeight<20)||c.getStyle("height")=="auto"){this.autoHeight=true;}var A=this.getView();A.init(this);c.on("click",this.onClick,this);c.on("dblclick",this.onDblClick,this);c.on("contextmenu",this.onContextMenu,this);c.on("keydown",this.onKeyDown,this);
+if(Roo.isTouch){c.on("touchstart",this.onTouchStart,this);}this.relayEvents(c,["mousedown","mouseup","mouseover","mouseout","keypress"]);this.getSelectionModel().init(this);A.render();if(this.loadMask){this.loadMask=new Roo.LoadMask(this.container,Roo.apply({store:this.dataSource}
+,this.loadMask));}if(this.toolbar&&this.toolbar.xtype){this.toolbar.container=this.getView().getHeaderPanel(true);this.toolbar=new Roo.Toolbar(this.toolbar);}if(this.footer&&this.footer.xtype){this.footer.dataSource=this.getDataSource();this.footer.container=this.getView().getFooterPanel(true);
+this.footer=Roo.factory(this.footer,Roo);}if(this.dropTarget&&this.dropTarget.xtype){delete this.dropTarget.xtype;this.dropTarget=new Roo.dd.DropTarget(this.getView().mainBody,this.dropTarget);}this.rendered=true;this.fireEvent('render',this);return this;
+},reconfigure:function(A,B){if(this.loadMask){this.loadMask.destroy();this.loadMask=new Roo.LoadMask(this.container,Roo.apply({store:A},this.loadMask));}this.view.bind(A,B);this.dataSource=A;this.colModel=B;this.view.refresh(true);},onKeyDown:function(e){this.fireEvent("keydown",e);
+},destroy:function(A,B){if(this.loadMask){this.loadMask.destroy();}var c=this.container;c.removeAllListeners();this.view.destroy();this.colModel.purgeListeners();if(!B){this.purgeListeners();}c.update("");if(A===true){c.remove();}},processEvent:function(A,e){if(A!='touchstart'){this.fireEvent(A,e);
+}var t=e.getTarget();var v=this.view;var B=v.findHeaderIndex(t);if(B!==false){var C=A=='touchstart'?'click':A;this.fireEvent("header"+C,this,B,e);}else{var D=v.findRowIndex(t);var E=v.findCellIndex(t);if(A=='touchstart'){A=false;if(typeof(this.selModel.getSelectedCell)!='undefined'){var cs=this.selModel.getSelectedCell();
+if(D==cs[0]&&E==cs[1]){A='dblclick';}}if(typeof(this.selModel.getSelections)!='undefined'){var cs=this.selModel.getSelections();var ds=this.dataSource;if(cs.length==1&&ds.getAt(D)==cs[0]){A='dblclick';}}if(!A){return;}}if(D!==false){this.fireEvent("row"+A,this,D,e);
+if(E!==false){this.fireEvent("cell"+A,this,D,E,e);}}}},onClick:function(e){this.processEvent("click",e);},onTouchStart:function(e){this.processEvent("touchstart",e);},onContextMenu:function(e,t){this.processEvent("contextmenu",e);},onDblClick:function(e){this.processEvent("dblclick",e);
+},walkCells:function(A,B,C,fn,D){var cm=this.colModel,E=cm.getColumnCount();var ds=this.dataSource,F=ds.getCount(),G=true;if(C<0){if(B<0){A--;G=false;}while(A>=0){if(!G){B=E-1;}G=false;while(B>=0){if(fn.call(D||this,A,B,cm)===true){return [A,B];}B--;}A--;
+}}else{if(B>=E){A++;G=false;}while(A<F){if(!G){B=0;}G=false;while(B<E){if(fn.call(D||this,A,B,cm)===true){return [A,B];}B++;}A++;}}return null;},getSelections:function(){return this.selModel.getSelections();},autoSize:function(){if(this.rendered){this.view.layout();
+if(this.view.adjustForScroll){this.view.adjustForScroll();}}},getGridEl:function(){return this.container;},stopEditing:function(){},getSelectionModel:function(){if(!this.selModel){this.selModel=new Roo.grid.RowSelectionModel();}return this.selModel;},getDataSource:function(){return this.dataSource;
+},getColumnModel:function(){return this.colModel;},getView:function(){if(!this.view){this.view=new Roo.grid.GridView(this.viewConfig);}return this.view;},getDragDropText:function(){var A=this.selModel.getCount();return String.format(this.ddText,A,A==1?'':'s');
+}});Roo.grid.Grid.prototype.ddText="{0} selected row{1}";
+// Roo/grid/AbstractGridView.js
+Roo.grid.AbstractGridView=function(){this.grid=null;this.events={"beforerowremoved":true,"beforerowsinserted":true,"beforerefresh":true,"rowremoved":true,"rowsinserted":true,"rowupdated":true,"refresh":true};Roo.grid.AbstractGridView.superclass.constructor.call(this);
+};Roo.extend(Roo.grid.AbstractGridView,Roo.util.Observable,{rowClass:"x-grid-row",cellClass:"x-grid-cell",tdClass:"x-grid-td",hdClass:"x-grid-hd",splitClass:"x-grid-hd-split",init:function(A){this.grid=A;var B=this.grid.getGridEl().id;this.colSelector="#"+B+" ."+this.cellClass+"-";
+this.tdSelector="#"+B+" ."+this.tdClass+"-";this.hdSelector="#"+B+" ."+this.hdClass+"-";this.splitSelector="#"+B+" ."+this.splitClass+"-";},getColumnRenderers:function(){var A=[];var cm=this.grid.colModel;var B=cm.getColumnCount();for(var i=0;i<B;i++){A[i]=cm.getRenderer(i);
+}return A;},getColumnIds:function(){var A=[];var cm=this.grid.colModel;var B=cm.getColumnCount();for(var i=0;i<B;i++){A[i]=cm.getColumnId(i);}return A;},getDataIndexes:function(){if(!this.indexMap){this.indexMap=this.buildIndexMap();}return this.indexMap.colToData;
+},getColumnIndexByDataIndex:function(A){if(!this.indexMap){this.indexMap=this.buildIndexMap();}return this.indexMap.dataToCol[A];},setCSSStyle:function(A,B,C){var D="#"+this.grid.id+" .x-grid-col-"+A;Roo.util.CSS.updateRule(D,B,C);},generateRules:function(cm){var A=[],B=this.grid.id+'-cssrules';
+Roo.util.CSS.removeStyleSheet(B);for(var i=0,C=cm.getColumnCount();i<C;i++){var D=cm.getColumnId(i);A.push(this.colSelector,D," {\n",cm.config[i].css,"}\n",this.tdSelector,D," {\n}\n",this.hdSelector,D," {\n}\n",this.splitSelector,D," {\n}\n");}return Roo.util.CSS.createStyleSheet(A.join(""),B);
+}});
+// Roo/grid/HeaderDragZone.js
+Roo.grid.HeaderDragZone=function(A,hd,B){this.grid=A;this.view=A.getView();this.ddGroup="gridHeader"+this.grid.getGridEl().id;Roo.grid.HeaderDragZone.superclass.constructor.call(this,hd);if(B){this.setHandleElId(Roo.id(hd));this.setOuterHandleElId(Roo.id(B));
+}this.scroll=false;};Roo.extend(Roo.grid.HeaderDragZone,Roo.dd.DragZone,{maxDragWidth:120,getDragData:function(e){var t=Roo.lib.Event.getTarget(e);var h=this.view.findHeaderCell(t);if(h){return {ddel:h.firstChild,header:h};}return false;},onInitDrag:function(e){this.view.headersDisabled=true;
+var A=this.dragData.ddel.cloneNode(true);A.id=Roo.id();A.style.width=Math.min(this.dragData.header.offsetWidth,this.maxDragWidth)+"px";this.proxy.update(A);return true;},afterValidDrop:function(){var v=this.view;setTimeout(function(){v.headersDisabled=false;
+},50);},afterInvalidDrop:function(){var v=this.view;setTimeout(function(){v.headersDisabled=false;},50);}});
+// Roo/grid/HeaderDropZone.js
+Roo.grid.HeaderDropZone=function(A,hd,B){this.grid=A;this.view=A.getView();this.proxyTop=Roo.DomHelper.append(document.body,{cls:"col-move-top",html:"&#160;"},true);this.proxyBottom=Roo.DomHelper.append(document.body,{cls:"col-move-bottom",html:"&#160;"},true);
+this.proxyTop.hide=this.proxyBottom.hide=function(){this.setLeftTop(-100,-100);this.setStyle("visibility","hidden");};this.ddGroup="gridHeader"+this.grid.getGridEl().id;Roo.grid.HeaderDropZone.superclass.constructor.call(this,A.getGridEl().dom);};Roo.extend(Roo.grid.HeaderDropZone,Roo.dd.DropZone,{proxyOffsets:[-4,-9],fly:Roo.Element.fly,getTargetFromEvent:function(e){var t=Roo.lib.Event.getTarget(e);
+var A=this.view.findCellIndex(t);if(A!==false){return this.view.getHeaderCell(A);}return null;},nextVisible:function(h){var v=this.view,cm=this.grid.colModel;h=h.nextSibling;while(h){if(!cm.isHidden(v.getCellIndex(h))){return h;}h=h.nextSibling;}return null;
+},prevVisible:function(h){var v=this.view,cm=this.grid.colModel;h=h.prevSibling;while(h){if(!cm.isHidden(v.getCellIndex(h))){return h;}h=h.prevSibling;}return null;},positionIndicator:function(h,n,e){var x=Roo.lib.Event.getPageX(e);var r=Roo.lib.Dom.getRegion(n.firstChild);
+var px,pt,py=r.top+this.proxyOffsets[1];if((r.right-x)<=(r.right-r.left)/2){px=r.right+this.view.borderWidth;pt="after";}else{px=r.left;pt="before";}var A=this.view.getCellIndex(h);var B=this.view.getCellIndex(n);if(this.grid.colModel.isFixed(B)){return false;
+}var C=this.grid.colModel.isLocked(B);if(pt=="after"){B++;}if(A<B){B--;}if(A==B&&(C==this.grid.colModel.isLocked(A))){return false;}px+=this.proxyOffsets[0];this.proxyTop.setLeftTop(px,py);this.proxyTop.show();if(!this.bottomOffset){this.bottomOffset=this.view.mainHd.getHeight();
+}this.proxyBottom.setLeftTop(px,py+this.proxyTop.dom.offsetHeight+this.bottomOffset);this.proxyBottom.show();return pt;},onNodeEnter:function(n,dd,e,A){if(A.header!=n){this.positionIndicator(A.header,n,e);}},onNodeOver:function(n,dd,e,A){var B=false;if(A.header!=n){B=this.positionIndicator(A.header,n,e);
+}if(!B){this.proxyTop.hide();this.proxyBottom.hide();}return B?this.dropAllowed:this.dropNotAllowed;},onNodeOut:function(n,dd,e,A){this.proxyTop.hide();this.proxyBottom.hide();},onNodeDrop:function(n,dd,e,A){var h=A.header;if(h!=n){var cm=this.grid.colModel;
+var x=Roo.lib.Event.getPageX(e);var r=Roo.lib.Dom.getRegion(n.firstChild);var pt=(r.right-x)<=((r.right-r.left)/2)?"after":"before";var B=this.view.getCellIndex(h);var C=this.view.getCellIndex(n);var D=cm.isLocked(C);if(pt=="after"){C++;}if(B<C){C--;}if(B==C&&(D==cm.isLocked(B))){return false;
+}cm.setLocked(B,D,true);cm.moveColumn(B,C);this.grid.fireEvent("columnmove",B,C);return true;}return false;}});
+// Roo/grid/GridView.js
+Roo.grid.GridView=function(A){Roo.grid.GridView.superclass.constructor.call(this);this.el=null;Roo.apply(this,A);};Roo.extend(Roo.grid.GridView,Roo.grid.AbstractGridView,{unselectable:'unselectable="on"',unselectableCls:'x-unselectable',rowClass:"x-grid-row",cellClass:"x-grid-col",tdClass:"x-grid-td",hdClass:"x-grid-hd",splitClass:"x-grid-split",sortClasses:["sort-asc","sort-desc"],enableMoveAnim:false,hlColor:"C3DAF9",dh:Roo.DomHelper,fly:Roo.Element.fly,css:Roo.util.CSS,borderWidth:1,splitOffset:3,scrollIncrement:22,cellRE:/(?:.*?)x-grid-(?:hd|cell|csplit)-(?:[\d]+)-([\d]+)(?:.*?)/,findRE:/\s?(?:x-grid-hd|x-grid-col|x-grid-csplit)\s/,bind:function(ds,cm){if(this.ds){this.ds.un("load",this.onLoad,this);
+this.ds.un("datachanged",this.onDataChange,this);this.ds.un("add",this.onAdd,this);this.ds.un("remove",this.onRemove,this);this.ds.un("update",this.onUpdate,this);this.ds.un("clear",this.onClear,this);}if(ds){ds.on("load",this.onLoad,this);ds.on("datachanged",this.onDataChange,this);
+ds.on("add",this.onAdd,this);ds.on("remove",this.onRemove,this);ds.on("update",this.onUpdate,this);ds.on("clear",this.onClear,this);}this.ds=ds;if(this.cm){this.cm.un("widthchange",this.onColWidthChange,this);this.cm.un("headerchange",this.onHeaderChange,this);
+this.cm.un("hiddenchange",this.onHiddenChange,this);this.cm.un("columnmoved",this.onColumnMove,this);this.cm.un("columnlockchange",this.onColumnLock,this);}if(cm){this.generateRules(cm);cm.on("widthchange",this.onColWidthChange,this);cm.on("headerchange",this.onHeaderChange,this);
+cm.on("hiddenchange",this.onHiddenChange,this);cm.on("columnmoved",this.onColumnMove,this);cm.on("columnlockchange",this.onColumnLock,this);}this.cm=cm;},init:function(A){Roo.grid.GridView.superclass.init.call(this,A);this.bind(A.dataSource,A.colModel);A.on("headerclick",this.handleHeaderClick,this);
+if(A.trackMouseOver){A.on("mouseover",this.onRowOver,this);A.on("mouseout",this.onRowOut,this);}A.cancelTextSelection=function(){};this.gridId=A.id;var B=this.templates||{};if(!B.master){B.master=new Roo.Template('<div class="x-grid" hidefocus="true">','<a href="#" class="x-grid-focus" tabIndex="-1"></a>','<div class="x-grid-topbar"></div>','<div class="x-grid-scroller"><div></div></div>','<div class="x-grid-locked">','<div class="x-grid-header">{lockedHeader}</div>','<div class="x-grid-body">{lockedBody}</div>',"</div>",'<div class="x-grid-viewport">','<div class="x-grid-header">{header}</div>','<div class="x-grid-body">{body}</div>',"</div>",'<div class="x-grid-bottombar"></div>','<div class="x-grid-resize-proxy">&#160;</div>',"</div>");
+B.master.disableformats=true;}if(!B.header){B.header=new Roo.Template('<table border="0" cellspacing="0" cellpadding="0">','<tbody><tr class="x-grid-hd-row">{cells}</tr></tbody>',"</table>{splits}");B.header.disableformats=true;}B.header.compile();if(!B.hcell){B.hcell=new Roo.Template('<td class="x-grid-hd x-grid-td-{id} {cellId}"><div " title="{title}" class="x-grid-hd-inner x-grid-hd-{id}">','<div class="x-grid-hd-text '+this.unselectableCls+'" '+this.unselectable+'>{value}<img class="x-grid-sort-icon" src="',Roo.BLANK_IMAGE_URL,'" /></div>',"</div></td>");
+B.hcell.disableFormats=true;}B.hcell.compile();if(!B.hsplit){B.hsplit=new Roo.Template('<div class="x-grid-split {splitId} x-grid-split-{id}" style="{style} '+this.unselectableCls+'" '+this.unselectable+'>&#160;</div>');B.hsplit.disableFormats=true;}B.hsplit.compile();
+if(!B.body){B.body=new Roo.Template('<table border="0" cellspacing="0" cellpadding="0">',"<tbody>{rows}</tbody>","</table>");B.body.disableFormats=true;}B.body.compile();if(!B.row){B.row=new Roo.Template('<tr class="x-grid-row {alt}">{cells}</tr>');B.row.disableFormats=true;
+}B.row.compile();if(!B.cell){B.cell=new Roo.Template('<td class="x-grid-col x-grid-td-{id} {cellId} {css}" tabIndex="0">','<div class="x-grid-col-{id} x-grid-cell-inner"><div class="x-grid-cell-text '+this.unselectableCls+'" '+this.unselectable+'" {attr}>{value}</div></div>',"</td>");
+B.cell.disableFormats=true;}B.cell.compile();this.templates=B;},onColWidthChange:function(){this.updateColumns.apply(this,arguments);},onHeaderChange:function(){this.updateHeaders.apply(this,arguments);},onHiddenChange:function(){this.handleHiddenChange.apply(this,arguments);
+},onColumnMove:function(){this.handleColumnMove.apply(this,arguments);},onColumnLock:function(){this.handleLockChange.apply(this,arguments);},onDataChange:function(){this.refresh();this.updateHeaderSortState();},onClear:function(){this.refresh();},onUpdate:function(ds,A){this.refreshRow(A);
+},refreshRow:function(A){var ds=this.ds,B;if(typeof A=='number'){B=A;A=ds.getAt(B);}else{B=ds.indexOf(A);}this.insertRows(ds,B,B,true);this.onRemove(ds,A,B+1,true);this.syncRowHeights(B,B);this.layout();this.fireEvent("rowupdated",this,B,A);},onAdd:function(ds,A,B){this.insertRows(ds,B,B+(A.length-1));
+},onRemove:function(ds,A,B,C){if(C!==true){this.fireEvent("beforerowremoved",this,B,A);}var bt=this.getBodyTable(),lt=this.getLockedTable();if(bt.rows[B]){bt.firstChild.removeChild(bt.rows[B]);}if(lt.rows[B]){lt.firstChild.removeChild(lt.rows[B]);}if(C!==true){this.stripeRows(B);
+this.syncRowHeights(B,B);this.layout();this.fireEvent("rowremoved",this,B,A);}},onLoad:function(){this.scrollToTop();},scrollToTop:function(){if(this.scroller){this.scroller.dom.scrollTop=0;this.syncScroll();}},getHeaderPanel:function(A){if(A){this.headerPanel.show();
+}return this.headerPanel;},getFooterPanel:function(A){if(A){this.footerPanel.show();}return this.footerPanel;},initElements:function(){var E=Roo.Element;var el=this.grid.getGridEl().dom.firstChild;var cs=el.childNodes;this.el=new E(el);this.focusEl=new E(el.firstChild);
+this.focusEl.swallowEvent("click",true);this.headerPanel=new E(cs[1]);this.headerPanel.enableDisplayMode("block");this.scroller=new E(cs[2]);this.scrollSizer=new E(this.scroller.dom.firstChild);this.lockedWrap=new E(cs[3]);this.lockedHd=new E(this.lockedWrap.dom.firstChild);
+this.lockedBody=new E(this.lockedWrap.dom.childNodes[1]);this.mainWrap=new E(cs[4]);this.mainHd=new E(this.mainWrap.dom.firstChild);this.mainBody=new E(this.mainWrap.dom.childNodes[1]);this.footerPanel=new E(cs[5]);this.footerPanel.enableDisplayMode("block");
+this.resizeProxy=new E(cs[6]);this.headerSelector=String.format('#{0} td.x-grid-hd, #{1} td.x-grid-hd',this.lockedHd.id,this.mainHd.id);this.splitterSelector=String.format('#{0} div.x-grid-split, #{1} div.x-grid-split',this.idToCssName(this.lockedHd.id),this.idToCssName(this.mainHd.id));
+},idToCssName:function(s){return s.replace(/[^a-z0-9]+/ig,'-');},getHeaderCell:function(A){return Roo.DomQuery.select(this.headerSelector)[A];},getHeaderCellMeasure:function(A){return this.getHeaderCell(A).firstChild;},getHeaderCellText:function(A){return this.getHeaderCell(A).firstChild.firstChild;
+},getLockedTable:function(){return this.lockedBody.dom.firstChild;},getBodyTable:function(){return this.mainBody.dom.firstChild;},getLockedRow:function(A){return this.getLockedTable().rows[A];},getRow:function(A){return this.getBodyTable().rows[A];},getRowComposite:function(A){if(!this.rowEl){this.rowEl=new Roo.CompositeElementLite();
+}var B=[],C,D;if(C=this.getLockedRow(A)){B.push(C);}if(D=this.getRow(A)){B.push(D);}this.rowEl.elements=B;return this.rowEl;},getCell:function(A,B){var C=this.cm.getLockedCount();var D;if(B<C){D=this.lockedBody.dom.firstChild;}else{D=this.mainBody.dom.firstChild;
+B-=C;}return D.rows[A].childNodes[B];},getCellText:function(A,B){return this.getCell(A,B).firstChild.firstChild;},getCellBox:function(A){var b=this.fly(A).getBox();if(Roo.isOpera){b.y=A.offsetTop+this.mainBody.getY();}return b;},getCellIndex:function(A){var id=String(A.className).match(this.cellRE);
+if(id){return parseInt(id[1],10);}return 0;},findHeaderIndex:function(n){var r=Roo.fly(n).findParent("td."+this.hdClass,6);return r?this.getCellIndex(r):false;},findHeaderCell:function(n){var r=Roo.fly(n).findParent("td."+this.hdClass,6);return r?r:false;
+},findRowIndex:function(n){if(!n){return false;}var r=Roo.fly(n).findParent("tr."+this.rowClass,6);return r?r.rowIndex:false;},findCellIndex:function(A){var B=this.el.dom;while(A&&A!=B){if(this.findRE.test(A.className)){return this.getCellIndex(A);}A=A.parentNode;
+}return false;},getColumnId:function(A){return this.cm.getColumnId(A);},getSplitters:function(){if(this.splitterSelector){return Roo.DomQuery.select(this.splitterSelector);}else{return null;}},getSplitter:function(A){return this.getSplitters()[A];},onRowOver:function(e,t){var A;
+if((A=this.findRowIndex(t))!==false){this.getRowComposite(A).addClass("x-grid-row-over");}},onRowOut:function(e,t){var A;if((A=this.findRowIndex(t))!==false&&A!==this.findRowIndex(e.getRelatedTarget())){this.getRowComposite(A).removeClass("x-grid-row-over");
+}},renderHeaders:function(){var cm=this.cm;var ct=this.templates.hcell,ht=this.templates.header,st=this.templates.hsplit;var cb=[],lb=[],sb=[],A=[],p={};for(var i=0,B=cm.getColumnCount();i<B;i++){p.cellId="x-grid-hd-0-"+i;p.splitId="x-grid-csplit-0-"+i;p.id=cm.getColumnId(i);
+p.title=cm.getColumnTooltip(i)||cm.getColumnHeader(i)||"";p.value=cm.getColumnHeader(i)||"";p.style=(this.grid.enableColumnResize===false||!cm.isResizable(i)||cm.isFixed(i))?'cursor:default':'';if(!cm.isLocked(i)){cb[cb.length]=ct.apply(p);sb[sb.length]=st.apply(p);
+}else{lb[lb.length]=ct.apply(p);A[A.length]=st.apply(p);}}return [ht.apply({cells:lb.join(""),splits:A.join("")}),ht.apply({cells:cb.join(""),splits:sb.join("")})];},updateHeaders:function(){var A=this.renderHeaders();this.lockedHd.update(A[0]);this.mainHd.update(A[1]);
+},focusRow:function(A){var x=this.scroller.dom.scrollLeft;this.focusCell(A,0,false);this.scroller.dom.scrollLeft=x;},focusCell:function(A,B,C){var el=this.ensureVisible(A,B,C);this.focusEl.alignTo(el,"tl-tl");if(Roo.isGecko){this.focusEl.focus();}else{this.focusEl.focus.defer(1,this.focusEl);
+}},ensureVisible:function(A,B,C){if(typeof A!="number"){A=A.rowIndex;}if(A<0&&A>=this.ds.getCount()){return null;}B=(B!==undefined?B:0);var cm=this.grid.colModel;while(cm.isHidden(B)){B++;}var el=this.getCell(A,B);if(!el){return null;}var c=this.scroller.dom;
+var D=parseInt(el.offsetTop,10);var E=parseInt(el.offsetLeft,10);var F=D+el.offsetHeight;var G=E+el.offsetWidth;var ch=c.clientHeight-this.mainHd.dom.offsetHeight;var H=parseInt(c.scrollTop,10);var I=parseInt(c.scrollLeft,10);var J=H+ch;var K=I+c.clientWidth;
+if(D<H){c.scrollTop=D;}else if(F>J){c.scrollTop=F-ch;}if(C!==false){if(E<I){c.scrollLeft=E;}else if(G>K){c.scrollLeft=G-c.clientWidth;}}return el;},updateColumns:function(){this.grid.stopEditing();var cm=this.grid.colModel,A=this.getColumnIds();var B=0;for(var i=0,C=cm.getColumnCount();
+i<C;i++){var w=cm.getColumnWidth(i);this.css.updateRule(this.colSelector+this.idToCssName(A[i]),"width",(w-this.borderWidth)+"px");this.css.updateRule(this.hdSelector+this.idToCssName(A[i]),"width",(w-this.borderWidth)+"px");}this.updateSplitters();},generateRules:function(cm){var A=[],B=this.idToCssName(this.grid.id)+'-cssrules';
+Roo.util.CSS.removeStyleSheet(B);for(var i=0,C=cm.getColumnCount();i<C;i++){var D=cm.getColumnId(i);var E='';if(cm.config[i].align){E='text-align:'+cm.config[i].align+';';}var F='';if(cm.isHidden(i)){F='display:none;';}var G="width:"+(cm.getColumnWidth(i)-this.borderWidth)+"px;";
+A.push(this.colSelector,D," {\n",cm.config[i].css,E,G,"\n}\n",this.hdSelector,D," {\n",E,G,"}\n",this.tdSelector,D," {\n",F,"\n}\n",this.splitSelector,D," {\n",F,"\n}\n");}return Roo.util.CSS.createStyleSheet(A.join(""),B);},updateSplitters:function(){var cm=this.cm,s=this.getSplitters();
+if(s){var A=0,B=true;for(var i=0,C=cm.getColumnCount();i<C;i++){if(cm.isHidden(i)){continue;}var w=cm.getColumnWidth(i);if(!cm.isLocked(i)&&B){A=0;B=false;}A+=w;s[i].style.left=(A-this.splitOffset)+"px";}}},handleHiddenChange:function(A,B,C){if(C){this.hideColumn(B);
+}else{this.unhideColumn(B);}},hideColumn:function(A){var B=this.getColumnId(A);this.css.updateRule(this.tdSelector+this.idToCssName(B),"display","none");this.css.updateRule(this.splitSelector+this.idToCssName(B),"display","none");if(Roo.isSafari){this.updateHeaders();
+}this.updateSplitters();this.layout();},unhideColumn:function(A){var B=this.getColumnId(A);this.css.updateRule(this.tdSelector+this.idToCssName(B),"display","");this.css.updateRule(this.splitSelector+this.idToCssName(B),"display","");if(Roo.isSafari){this.updateHeaders();
+}this.updateSplitters();this.layout();},insertRows:function(dm,A,B,C){if(A==0&&B==dm.getCount()-1){this.refresh();}else{if(!C){this.fireEvent("beforerowsinserted",this,A,B);}var s=this.getScrollState();var D=this.renderRows(A,B);this.bufferRows(D[0],this.getLockedTable(),A);
+this.bufferRows(D[1],this.getBodyTable(),A);this.restoreScroll(s);if(!C){this.fireEvent("rowsinserted",this,A,B);this.syncRowHeights(A,B);this.stripeRows(A);this.layout();}}},bufferRows:function(A,B,C){var D=null,E=B.rows,F=B.tBodies[0];if(C<E.length){D=E[C];
+}var b=document.createElement("div");b.innerHTML="<table><tbody>"+A+"</tbody></table>";var G=b.firstChild.rows;for(var i=0,H=G.length;i<H;i++){if(D){F.insertBefore(G[0],D);}else{F.appendChild(G[0]);}}b.innerHTML="";b=null;},deleteRows:function(dm,A,B){if(dm.getRowCount()<1){this.fireEvent("beforerefresh",this);
+this.mainBody.update("");this.lockedBody.update("");this.fireEvent("refresh",this);}else{this.fireEvent("beforerowsdeleted",this,A,B);var bt=this.getBodyTable();var C=bt.firstChild;var D=bt.rows;for(var E=A;E<=B;E++){C.removeChild(D[A]);}this.stripeRows(A);
+this.fireEvent("rowsdeleted",this,A,B);}},updateRows:function(A,B,C){var s=this.getScrollState();this.refresh();this.restoreScroll(s);},handleSort:function(A,B,C,D){if(!D){this.refresh();}this.updateHeaderSortState();},getScrollState:function(){var sb=this.scroller.dom;
+return {left:sb.scrollLeft,top:sb.scrollTop};},stripeRows:function(A){if(!this.grid.stripeRows||this.ds.getCount()<1){return;}A=A||0;var B=this.getBodyTable().rows;var C=this.getLockedTable().rows;var D=' x-grid-row-alt ';for(var i=A,E=B.length;i<E;i++){var F=B[i],G=C[i];
+var H=((i+1)%2==0);var I=(' '+F.className+' ').indexOf(D)!=-1;if(H==I){continue;}if(H){F.className+=" x-grid-row-alt";}else{F.className=F.className.replace("x-grid-row-alt","");}if(G){G.className=F.className;}}},restoreScroll:function(A){var sb=this.scroller.dom;
+sb.scrollLeft=A.left;sb.scrollTop=A.top;this.syncScroll();},syncScroll:function(){var sb=this.scroller.dom;var sh=this.mainHd.dom;var bs=this.mainBody.dom;var lv=this.lockedBody.dom;sh.scrollLeft=bs.scrollLeft=sb.scrollLeft;lv.scrollTop=bs.scrollTop=sb.scrollTop;
+},handleScroll:function(e){this.syncScroll();var sb=this.scroller.dom;this.grid.fireEvent("bodyscroll",sb.scrollLeft,sb.scrollTop);e.stopEvent();},handleWheel:function(e){var d=e.getWheelDelta();this.scroller.dom.scrollTop-=d*22;this.lockedBody.dom.scrollTop=this.mainBody.dom.scrollTop=this.scroller.dom.scrollTop;
+e.stopEvent();},renderRows:function(A,B){var g=this.grid,cm=g.colModel,ds=g.dataSource,C=g.stripeRows;var D=cm.getColumnCount();if(ds.getCount()<1){return ["",""];}var cs=[];for(var i=0;i<D;i++){var E=cm.getDataIndex(i);cs[i]={name:typeof E=='undefined'?ds.fields.get(i).name:E,renderer:cm.getRenderer(i),id:cm.getColumnId(i),locked:cm.isLocked(i),has_editor:cm.isCellEditable(i)}
+;}A=A||0;B=typeof B=="undefined"?ds.getCount()-1:B;var rs=ds.getRange(A,B);return this.doRender(cs,rs,ds,A,D,C);},doRender:Roo.isGecko?function(cs,rs,ds,A,B,C){var ts=this.templates,ct=ts.cell,rt=ts.row;var D="",E="",cb,F,c,p={},rp={},r,G;var H=this.grid.hasListener('rowclass');
+var I={};for(var j=0,J=rs.length;j<J;j++){r=rs[j];cb="";F="";G=(j+A);for(var i=0;i<B;i++){c=cs[i];p.cellId="x-grid-cell-"+G+"-"+i;p.id=c.id;p.css=p.attr="";p.value=c.renderer(r.data[c.name],p,r,G,i,ds);if(p.value==undefined||p.value===""){p.value="&#160;";
+}if(c.has_editor){p.css+=' x-grid-editable-cell';}if(c.dirty&&typeof r.modified[c.name]!=='undefined'){p.css+=' x-grid-dirty-cell';}var K=ct.apply(p);if(!c.locked){cb+=K;}else{F+=K;}}var L=[];if(C&&((G+1)%2==0)){L.push("x-grid-row-alt")}if(r.dirty){L.push(" x-grid-dirty-row");
+}rp.cells=F;if(this.getRowClass){L.push(this.getRowClass(r,G));}if(H){I={record:r,rowIndex:G,rowClass:''};this.grid.fireEvent('rowclass',this,I);L.push(I.rowClass);}rp.alt=L.join(" ");E+=rt.apply(rp);rp.cells=cb;D+=rt.apply(rp);}return [E,D];}:function(cs,rs,ds,A,B,C){var ts=this.templates,ct=ts.cell,rt=ts.row;
+var D=[],E=[],cb,F,c,p={},rp={},r,G;var H=this.grid.hasListener('rowclass');var I={};for(var j=0,J=rs.length;j<J;j++){r=rs[j];cb=[];F=[];G=(j+A);for(var i=0;i<B;i++){c=cs[i];p.cellId="x-grid-cell-"+G+"-"+i;p.id=c.id;p.css=p.attr="";p.value=c.renderer(r.data[c.name],p,r,G,i,ds);
+if(p.value==undefined||p.value===""){p.value="&#160;";}if(c.has_editor){p.css+=' x-grid-editable-cell';}if(r.dirty&&typeof r.modified[c.name]!=='undefined'){p.css+=' x-grid-dirty-cell'}var K=ct.apply(p);if(!c.locked){cb[cb.length]=K;}else{F[F.length]=K;}}
+var L=[];if(C&&((G+1)%2==0)){L.push("x-grid-row-alt");}if(r.dirty){L.push(" x-grid-dirty-row");}rp.cells=F;if(this.getRowClass){L.push(this.getRowClass(r,G));}if(H){I={record:r,rowIndex:G,rowClass:''};this.grid.fireEvent('rowclass',this,I);L.push(I.rowClass);
+}rp.alt=L.join(" ");rp.cells=F.join("");E[E.length]=rt.apply(rp);rp.cells=cb.join("");D[D.length]=rt.apply(rp);}return [E.join(""),D.join("")];},renderBody:function(){var A=this.renderRows();var bt=this.templates.body;return [bt.apply({rows:A[0]}),bt.apply({rows:A[1]}
+)];},refresh:function(A){this.fireEvent("beforerefresh",this);this.grid.stopEditing();var B=this.renderBody();this.lockedBody.update(B[0]);this.mainBody.update(B[1]);if(A===true){this.updateHeaders();this.updateColumns();this.updateSplitters();this.updateHeaderSortState();
+}this.syncRowHeights();this.layout();this.fireEvent("refresh",this);},handleColumnMove:function(cm,A,B){this.indexMap=null;var s=this.getScrollState();this.refresh(true);this.restoreScroll(s);this.afterMove(B);},afterMove:function(A){if(this.enableMoveAnim&&Roo.enableFx){this.fly(this.getHeaderCell(A).firstChild).highlight(this.hlColor);
+}if(this.grid.dataSource.multiSort){var dm=this.grid.dataSource;var cm=this.grid.colModel;var so=[];for(var i=0;i<cm.config.length;i++){if((typeof(dm.sortToggle[cm.config[i].dataIndex])=='undefined')){continue;}so.push(cm.config[i].dataIndex);};dm.sortOrder=so;
+dm.load(dm.lastOptions);}},updateCell:function(dm,A,B){var C=this.getColumnIndexByDataIndex(B);if(typeof C=="undefined"){return;}var cm=this.grid.colModel;var D=this.getCell(A,C);var E=this.getCellText(A,C);var p={cellId:"x-grid-cell-"+A+"-"+C,id:cm.getColumnId(C),css:C==cm.getColumnCount()-1?"x-grid-col-last":""}
+;var F=cm.getRenderer(C);var G=F(dm.getValueAt(A,B),p,A,C,dm);if(typeof G=="undefined"||G===""){G="&#160;";}E.innerHTML=G;D.className=this.cellClass+" "+this.idToCssName(p.cellId)+" "+p.css;this.syncRowHeights(A,A);},calcColumnWidth:function(A,B){var C=0;
+if(this.grid.autoSizeHeaders){var h=this.getHeaderCellMeasure(A);C=Math.max(C,h.scrollWidth);}var tb,D;if(this.cm.isLocked(A)){tb=this.getLockedTable();D=A;}else{tb=this.getBodyTable();D=A-this.cm.getLockedCount();}if(tb&&tb.rows){var E=tb.rows;var F=Math.min(B||E.length,E.length);
+for(var i=0;i<F;i++){var G=E[i].childNodes[D].firstChild;C=Math.max(C,G.scrollWidth);}}return C+5;},autoSizeColumn:function(A,B,C){if(this.cm.isHidden(A)){return;}if(B){var D=this.cm.getColumnId(A);this.css.updateRule(this.colSelector+this.idToCssName(D),"width",this.grid.minColumnWidth+"px");
+if(this.grid.autoSizeHeaders){this.css.updateRule(this.hdSelector+this.idToCssName(D),"width",this.grid.minColumnWidth+"px");}}var E=this.calcColumnWidth(A);this.cm.setColumnWidth(A,Math.max(this.grid.minColumnWidth,E),C);if(!C){this.grid.fireEvent("columnresize",A,E);
+}},autoSizeColumns:function(){var cm=this.grid.colModel;var A=cm.getColumnCount();for(var i=0;i<A;i++){this.autoSizeColumn(i,true,true);}if(cm.getTotalWidth()<this.scroller.dom.clientWidth){this.fitColumns();}else{this.updateColumns();this.layout();}},fitColumns:function(A){var cm=this.grid.colModel;
+var B=cm.getColumnCount();var C=[];var D=0;var i,w;for(i=0;i<B;i++){if(!cm.isHidden(i)&&!cm.isFixed(i)){w=cm.getColumnWidth(i);C.push(i);C.push(w);D+=w;}}var E=Math.min(this.scroller.dom.clientWidth,this.el.getWidth());if(A){E-=17;}var F=(E-cm.getTotalWidth())/D;
+while(C.length){w=C.pop();i=C.pop();cm.setColumnWidth(i,Math.floor(w+w*F),true);}this.updateColumns();this.layout();},onRowSelect:function(A){var B=this.getRowComposite(A);B.addClass("x-grid-row-selected");},onRowDeselect:function(A){var B=this.getRowComposite(A);
+B.removeClass("x-grid-row-selected");},onCellSelect:function(A,B){var C=this.getCell(A,B);if(C){Roo.fly(C).addClass("x-grid-cell-selected");}},onCellDeselect:function(A,B){var C=this.getCell(A,B);if(C){Roo.fly(C).removeClass("x-grid-cell-selected");}},updateHeaderSortState:function(){var A={}
+;if(!this.ds.multiSort){var B=this.ds.getSortState();if(!B){return;}A[B.field]=B.direction;this.sortState=B;}else{A=this.ds.sortToggle;}var sc=this.sortClasses;var C=this.el.select(this.headerSelector).removeClass(sc);for(var f in A){var D=this.cm.findColumnIndex(f);
+if(D!=-1){var E=A[f];C.item(D).addClass(sc[E=="DESC"?1:0]);}}},handleHeaderClick:function(g,A,e){Roo.log("header click");if(Roo.isTouch){this.handleHdCtx(g,A,e);return;}if(this.headersDisabled){return;}var dm=g.dataSource,cm=g.colModel;if(!cm.isSortable(A)){return;
+}g.stopEditing();if(dm.multiSort){var so=[];for(var i=0;i<cm.config.length;i++){if((typeof(dm.sortToggle[cm.config[i].dataIndex])=='undefined')&&(A!=i)){continue;}so.push(cm.config[i].dataIndex);};dm.sortOrder=so;}dm.sort(cm.getDataIndex(A));},destroy:function(){if(this.colMenu){this.colMenu.removeAll();
+Roo.menu.MenuMgr.unregister(this.colMenu);this.colMenu.getEl().remove();delete this.colMenu;}if(this.hmenu){this.hmenu.removeAll();Roo.menu.MenuMgr.unregister(this.hmenu);this.hmenu.getEl().remove();delete this.hmenu;}if(this.grid.enableColumnMove){var A=Roo.dd.DDM.ids['gridHeader'+this.grid.getGridEl().id];
+if(A){for(var dd in A){if(!A[dd].config.isTarget&&A[dd].dragElId){var B=A[dd].dragElId;A[dd].unreg();Roo.get(B).remove();}else if(A[dd].config.isTarget){A[dd].proxyTop.remove();A[dd].proxyBottom.remove();A[dd].unreg();}if(Roo.dd.DDM.locationCache[dd]){delete Roo.dd.DDM.locationCache[dd];
+}}delete Roo.dd.DDM.ids['gridHeader'+this.grid.getGridEl().id];}}Roo.util.CSS.removeStyleSheet(this.idToCssName(this.grid.id)+'-cssrules');this.bind(null,null);Roo.EventManager.removeResizeListener(this.onWindowResize,this);},handleLockChange:function(){this.refresh(true);
+},onDenyColumnLock:function(){},onDenyColumnHide:function(){},handleHdMenuClick:function(A){var B=this.hdCtxIndex;var cm=this.cm,ds=this.ds;switch(A.id){case "asc":ds.sort(cm.getDataIndex(B),"ASC");break;case "desc":ds.sort(cm.getDataIndex(B),"DESC");break;
+case "lock":var lc=cm.getLockedCount();if(cm.getColumnCount(true)<=lc+1){this.onDenyColumnLock();return;}if(lc!=B){cm.setLocked(B,true,true);cm.moveColumn(B,lc);this.grid.fireEvent("columnmove",B,lc);}else{cm.setLocked(B,true);}break;case "unlock":var lc=cm.getLockedCount();
+if((lc-1)!=B){cm.setLocked(B,false,true);cm.moveColumn(B,lc-1);this.grid.fireEvent("columnmove",B,lc-1);}else{cm.setLocked(B,false);}break;case 'wider':case 'narrow':var cw=cm.getColumnWidth(B);cw+=(A.id=='wider'?1:-1)*50;cw=Math.max(0,cw);cw=Math.min(cw,4000);
+cm.setColumnWidth(B,cw);break;default:B=cm.getIndexById(A.id.substr(4));if(B!=-1){if(A.checked&&cm.getColumnCount(true)<=1){this.onDenyColumnHide();return false;}cm.setHidden(B,A.checked);}}return true;},beforeColMenuShow:function(){var cm=this.cm,A=cm.getColumnCount();
+this.colMenu.removeAll();for(var i=0;i<A;i++){this.colMenu.add(new Roo.menu.CheckItem({id:"col-"+cm.getColumnId(i),text:cm.getColumnHeader(i),checked:!cm.isHidden(i),hideOnClick:false}));}},handleHdCtx:function(g,A,e){e.stopEvent();var hd=this.getHeaderCell(A);
+this.hdCtxIndex=A;var ms=this.hmenu.items,cm=this.cm;ms.get("asc").setDisabled(!cm.isSortable(A));ms.get("desc").setDisabled(!cm.isSortable(A));if(this.grid.enableColLock!==false){ms.get("lock").setDisabled(cm.isLocked(A));ms.get("unlock").setDisabled(!cm.isLocked(A));
+}this.hmenu.show(hd,"tl-bl");},handleHdOver:function(e){var hd=this.findHeaderCell(e.getTarget());if(hd&&!this.headersDisabled){if(this.grid.colModel.isSortable(this.getCellIndex(hd))){this.fly(hd).addClass("x-grid-hd-over");}}},handleHdOut:function(e){var hd=this.findHeaderCell(e.getTarget());
+if(hd){this.fly(hd).removeClass("x-grid-hd-over");}},handleSplitDblClick:function(e,t){var i=this.getCellIndex(t);if(this.grid.enableColumnResize!==false&&this.cm.isResizable(i)&&!this.cm.isFixed(i)){this.autoSizeColumn(i,true);this.layout();}},render:function(){var cm=this.cm;
+var A=cm.getColumnCount();if(this.grid.monitorWindowResize===true){Roo.EventManager.onWindowResize(this.onWindowResize,this,true);}var B=this.renderHeaders();var C=this.templates.body.apply({rows:""});var D=this.templates.master.apply({lockedBody:C,body:C,lockedHeader:B[0],header:B[1]}
+);this.grid.getGridEl().dom.innerHTML=D;this.initElements();this.el.on("scroll",function(){this.el.dom.scrollTop=0;},this);this.scroller.on("scroll",this.handleScroll,this);this.lockedBody.on("mousewheel",this.handleWheel,this);this.mainBody.on("mousewheel",this.handleWheel,this);
+this.mainHd.on("mouseover",this.handleHdOver,this);this.mainHd.on("mouseout",this.handleHdOut,this);this.mainHd.on("dblclick",this.handleSplitDblClick,this,{delegate:"."+this.splitClass});this.lockedHd.on("mouseover",this.handleHdOver,this);this.lockedHd.on("mouseout",this.handleHdOut,this);
+this.lockedHd.on("dblclick",this.handleSplitDblClick,this,{delegate:"."+this.splitClass});if(this.grid.enableColumnResize!==false&&Roo.grid.SplitDragZone){new Roo.grid.SplitDragZone(this.grid,this.lockedHd.dom,this.mainHd.dom);}this.updateSplitters();if(this.grid.enableColumnMove&&Roo.grid.HeaderDragZone){new Roo.grid.HeaderDragZone(this.grid,this.lockedHd.dom,this.mainHd.dom);
+new Roo.grid.HeaderDropZone(this.grid,this.lockedHd.dom,this.mainHd.dom);}if(this.grid.enableCtxMenu!==false&&Roo.menu.Menu){this.hmenu=new Roo.menu.Menu({id:this.grid.id+"-hctx"});this.hmenu.add({id:"asc",text:this.sortAscText,cls:"xg-hmenu-sort-asc"},{id:"desc",text:this.sortDescText,cls:"xg-hmenu-sort-desc"}
+);if(this.grid.enableColLock!==false){this.hmenu.add('-',{id:"lock",text:this.lockText,cls:"xg-hmenu-lock"},{id:"unlock",text:this.unlockText,cls:"xg-hmenu-unlock"});}if(Roo.isTouch){this.hmenu.add('-',{id:"wider",text:this.columnsWiderText},{id:"narrow",text:this.columnsNarrowText}
+);}if(this.grid.enableColumnHide!==false){this.colMenu=new Roo.menu.Menu({id:this.grid.id+"-hcols-menu"});this.colMenu.on("beforeshow",this.beforeColMenuShow,this);this.colMenu.on("itemclick",this.handleHdMenuClick,this);this.hmenu.add('-',{id:"columns",text:this.columnsText,menu:this.colMenu}
+);}this.hmenu.on("itemclick",this.handleHdMenuClick,this);this.grid.on("headercontextmenu",this.handleHdCtx,this);}if((this.grid.enableDragDrop||this.grid.enableDrag)&&Roo.grid.GridDragZone){this.dd=new Roo.grid.GridDragZone(this.grid,{ddGroup:this.grid.ddGroup||'GridDD'}
+);}this.updateHeaderSortState();this.beforeInitialResize();this.layout(true);this.renderPhase2.defer(1,this);},renderPhase2:function(){this.refresh();if(this.grid.autoSizeColumns){this.autoSizeColumns();}},beforeInitialResize:function(){},onColumnSplitterMoved:function(i,w){this.userResized=true;
+var cm=this.grid.colModel;cm.setColumnWidth(i,w,true);var A=cm.getColumnId(i);this.css.updateRule(this.colSelector+this.idToCssName(A),"width",(w-this.borderWidth)+"px");this.css.updateRule(this.hdSelector+this.idToCssName(A),"width",(w-this.borderWidth)+"px");
+this.updateSplitters();this.layout();this.grid.fireEvent("columnresize",i,w);},syncRowHeights:function(A,B){if(this.grid.enableRowHeightSync===true&&this.cm.getLockedCount()>0){A=A||0;var C=this.getBodyTable().rows;var D=this.getLockedTable().rows;var E=C.length-1;
+B=Math.min(B||E,E);for(var i=A;i<=B;i++){var m=C[i],l=D[i];var h=Math.max(m.offsetHeight,l.offsetHeight);m.style.height=l.style.height=h+"px";}}},layout:function(A,B){var g=this.grid;var C=g.autoHeight;var D=16;var c=g.getGridEl(),cm=this.cm,E=g.autoExpandColumn,gv=this;
+if(!c.dom.offsetWidth){if(A){this.lockedWrap.show();this.mainWrap.show();}return;}var F=this.cm.isLocked(0);var G=this.headerPanel.getHeight();var H=this.footerPanel.getHeight();if(C){var ch=this.getBodyTable().offsetHeight+G+H+this.mainHd.getHeight();var I=ch+c.getBorderWidth("tb");
+if(g.maxHeight){I=Math.min(g.maxHeight,I);}c.setHeight(I);}if(g.autoWidth){c.setWidth(cm.getTotalWidth()+c.getBorderWidth('lr'));}var s=this.scroller;var J=c.getSize(true);this.el.setSize(J.width,J.height);this.headerPanel.setWidth(J.width);this.footerPanel.setWidth(J.width);
+var K=this.mainHd.getHeight();var vw=J.width;var vh=J.height-(G+H);s.setSize(vw,vh);var bt=this.getBodyTable();var L=F?Math.max(this.getLockedTable().offsetWidth,this.lockedHd.dom.firstChild.offsetWidth):0;var M=bt.offsetHeight;var N=L+bt.offsetWidth;var O=false,P=false;
+this.scrollSizer.setSize(N,M+K);var lw=this.lockedWrap,mw=this.mainWrap;var lb=this.lockedBody,mb=this.mainBody;setTimeout(function(){var t=s.dom.offsetTop;var w=s.dom.clientWidth,h=s.dom.clientHeight;lw.setTop(t);lw.setSize(L,h);mw.setLeftTop(L,t);mw.setSize(w-L,h);
+lb.setHeight(h-K);mb.setHeight(h-K);if(B!==true&&!gv.userResized&&E){var ci=cm.getIndexById(E);if(ci<0){ci=cm.findColumnIndex(E);}ci=Math.max(0,ci);var Q=cm.getColumnId(ci);var tw=cm.getTotalWidth(false);var R=cm.getColumnWidth(ci);var cw=Math.min(Math.max(((w-tw)+R-2)-(w<=s.dom.offsetWidth?0:18),g.autoExpandMin),g.autoExpandMax);
+if(R!=cw){cm.setColumnWidth(ci,cw,true);gv.css.updateRule(gv.colSelector+gv.idToCssName(Q),"width",(cw-gv.borderWidth)+"px");gv.css.updateRule(gv.hdSelector+gv.idToCssName(Q),"width",(cw-gv.borderWidth)+"px");gv.updateSplitters();gv.layout(false,true);}}if(A){lw.show();
+mw.show();}},10);},onWindowResize:function(){if(!this.grid.monitorWindowResize||this.grid.autoHeight){return;}this.layout();},appendFooter:function(A){return null;},sortAscText:"Sort Ascending",sortDescText:"Sort Descending",lockText:"Lock Column",unlockText:"Unlock Column",columnsText:"Columns",columnsWiderText:"Wider",columnsNarrowText:"Thinner"}
+);Roo.grid.GridView.ColumnDragZone=function(A,hd){Roo.grid.GridView.ColumnDragZone.superclass.constructor.call(this,A,hd,null);this.proxy.el.addClass('x-grid3-col-dd');};Roo.extend(Roo.grid.GridView.ColumnDragZone,Roo.grid.HeaderDragZone,{handleMouseDown:function(e){}
+,callHandleMouseDown:function(e){Roo.grid.GridView.ColumnDragZone.superclass.handleMouseDown.call(this,e);}});
+// Roo/grid/SplitDragZone.js
+Roo.grid.SplitDragZone=function(A,hd,B){this.grid=A;this.view=A.getView();this.proxy=this.view.resizeProxy;Roo.grid.SplitDragZone.superclass.constructor.call(this,hd,"gridSplitters"+this.grid.getGridEl().id,{dragElId:Roo.id(this.proxy.dom),resizeFrame:false}
+);this.setHandleElId(Roo.id(hd));this.setOuterHandleElId(Roo.id(B));this.scroll=false;};Roo.extend(Roo.grid.SplitDragZone,Roo.dd.DDProxy,{fly:Roo.Element.fly,b4StartDrag:function(x,y){this.view.headersDisabled=true;this.proxy.setHeight(this.view.mainWrap.getHeight());
+var w=this.cm.getColumnWidth(this.cellIndex);var A=Math.max(w-this.grid.minColumnWidth,0);this.resetConstraints();this.setXConstraint(A,1000);this.setYConstraint(0,0);this.minX=x-A;this.maxX=x+1000;this.startPos=x;Roo.dd.DDProxy.prototype.b4StartDrag.call(this,x,y);
+},handleMouseDown:function(e){ev=Roo.EventObject.setEvent(e);var t=this.fly(ev.getTarget());if(t.hasClass("x-grid-split")){this.cellIndex=this.view.getCellIndex(t.dom);this.split=t.dom;this.cm=this.grid.colModel;if(this.cm.isResizable(this.cellIndex)&&!this.cm.isFixed(this.cellIndex)){Roo.grid.SplitDragZone.superclass.handleMouseDown.apply(this,arguments);
+}}},endDrag:function(e){this.view.headersDisabled=false;var A=Math.max(this.minX,Roo.lib.Event.getPageX(e));var B=A-this.startPos;this.view.onColumnSplitterMoved(this.cellIndex,this.cm.getColumnWidth(this.cellIndex)+B);},autoOffset:function(){this.setDelta(0,0);
+}});
+// Roo/grid/GridDragZone.js
+Roo.grid.GridDragZone=function(A,B){this.view=A.getView();Roo.grid.GridDragZone.superclass.constructor.call(this,this.view.mainBody.dom,B);if(this.view.lockedBody){this.setHandleElId(Roo.id(this.view.mainBody.dom));this.setOuterHandleElId(Roo.id(this.view.lockedBody.dom));
+}this.scroll=false;this.grid=A;this.ddel=document.createElement('div');this.ddel.className='x-grid-dd-wrap';};Roo.extend(Roo.grid.GridDragZone,Roo.dd.DragZone,{ddGroup:"GridDD",getDragData:function(e){var t=Roo.lib.Event.getTarget(e);var A=this.view.findRowIndex(t);
+var sm=this.grid.selModel;if(sm.getSelectedCell){if(!sm.getSelectedCell()){return false;}if(A!=sm.getSelectedCell()[0]){return false;}}if(A!==false){if(e.hasModifier()){sm.handleMouseDown(e,t);}Roo.log("getDragData");return {grid:this.grid,ddel:this.ddel,rowIndex:A,selections:sm.getSelections?sm.getSelections():(sm.getSelectedCell()?[this.grid.ds.getAt(sm.getSelectedCell()[0])]:[])}
+;}return false;},onInitDrag:function(e){var A=this.dragData;this.ddel.innerHTML=this.grid.getDragDropText();this.proxy.update(this.ddel);},afterRepair:function(){this.dragging=false;},getRepairXY:function(e,A){return false;},onEndDrag:function(A,e){},onValidDrop:function(dd,e,id){this.hideProxy();
+},beforeInvalidDrop:function(e,id){}});
+// Roo/grid/ColumnModel.js
+Roo.grid.ColumnModel=function(A){this.config=A;this.lookup={};for(var i=0,B=A.length;i<B;i++){var c=A[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.defaultWidth=100;this.defaultSortable=false;this.addEvents({"widthchange":true,"headerchange":true,"hiddenchange":true,"columnmoved":true,"columnlockchange":true}
+);Roo.grid.ColumnModel.superclass.constructor.call(this);};Roo.extend(Roo.grid.ColumnModel,Roo.util.Observable,{getColumnId:function(A){return this.config[A].id;},getColumnById:function(id){return this.lookup[id];},getColumnByDataIndex:function(A){var B=this.findColumnIndex(A);
+return B>-1?this.config[B]:false;},getIndexById:function(id){for(var i=0,A=this.config.length;i<A;i++){if(this.config[i].id==id){return i;}}return -1;},findColumnIndex:function(A){for(var i=0,B=this.config.length;i<B;i++){if(this.config[i].dataIndex==A){return i;
+}}return -1;},moveColumn:function(A,B){var c=this.config[A];this.config.splice(A,1);this.config.splice(B,0,c);this.dataMap=null;this.fireEvent("columnmoved",this,A,B);},isLocked:function(A){return this.config[A].locked===true;},setLocked:function(A,B,C){if(this.isLocked(A)==B){return;
+}this.config[A].locked=B;if(!C){this.fireEvent("columnlockchange",this,A,B);}},getTotalLockedWidth:function(){var A=0;for(var i=0;i<this.config.length;i++){if(this.isLocked(i)&&!this.isHidden(i)){this.totalWidth+=this.getColumnWidth(i);}}return A;},getLockedCount:function(){for(var i=0,A=this.config.length;
+i<A;i++){if(!this.isLocked(i)){return i;}}},getColumnCount:function(A){if(A===true){var c=0;for(var i=0,B=this.config.length;i<B;i++){if(!this.isHidden(i)){c++;}}return c;}return this.config.length;},getColumnsBy:function(fn,A){var r=[];for(var i=0,B=this.config.length;
+i<B;i++){var c=this.config[i];if(fn.call(A||this,c,i)===true){r[r.length]=c;}}return r;},isSortable:function(A){if(typeof this.config[A].sortable=="undefined"){return this.defaultSortable;}return this.config[A].sortable;},getRenderer:function(A){if(!this.config[A].renderer){return Roo.grid.ColumnModel.defaultRenderer;
+}return this.config[A].renderer;},setRenderer:function(A,fn){this.config[A].renderer=fn;},getColumnWidth:function(A){return this.config[A].width*1||this.defaultWidth;},setColumnWidth:function(A,B,C){this.config[A].width=B;this.totalWidth=null;if(!C){this.fireEvent("widthchange",this,A,B);
+}},getTotalWidth:function(A){if(!this.totalWidth){this.totalWidth=0;for(var i=0,B=this.config.length;i<B;i++){if(A||!this.isHidden(i)){this.totalWidth+=this.getColumnWidth(i);}}}return this.totalWidth;},getColumnHeader:function(A){return this.config[A].header;
+},setColumnHeader:function(A,B){this.config[A].header=B;this.fireEvent("headerchange",this,A,B);},getColumnTooltip:function(A){return this.config[A].tooltip;},setColumnTooltip:function(A,B){this.config[A].tooltip=B;},getDataIndex:function(A){return this.config[A].dataIndex;
+},setDataIndex:function(A,B){this.config[A].dataIndex=B;},isCellEditable:function(A,B){return (this.config[A].editable||(typeof this.config[A].editable=="undefined"&&this.config[A].editor))?true:false;},getCellEditor:function(A,B){return this.config[A].editor;
+},setEditable:function(A,B){this.config[A].editable=B;},isHidden:function(A){return this.config[A].hidden;},isFixed:function(A){return this.config[A].fixed;},isResizable:function(A){return A>=0&&this.config[A].resizable!==false&&this.config[A].fixed!==true;
+},setHidden:function(A,B){this.config[A].hidden=B;this.totalWidth=null;this.fireEvent("hiddenchange",this,A,B);},setEditor:function(A,B){this.config[A].editor=B;}});Roo.grid.ColumnModel.defaultRenderer=function(A){if(typeof A=="string"&&A.length<1){return "&#160;";
+}return A;};Roo.grid.DefaultColumnModel=Roo.grid.ColumnModel;
+// Roo/grid/AbstractSelectionModel.js
+Roo.grid.AbstractSelectionModel=function(){this.locked=false;Roo.grid.AbstractSelectionModel.superclass.constructor.call(this);};Roo.extend(Roo.grid.AbstractSelectionModel,Roo.util.Observable,{init:function(A){this.grid=A;this.initEvents();},lock:function(){this.locked=true;
+},unlock:function(){this.locked=false;},isLocked:function(){return this.locked;}});
+// Roo/grid/RowSelectionModel.js
+Roo.grid.RowSelectionModel=function(A){Roo.apply(this,A);this.selections=new Roo.util.MixedCollection(false,function(o){return o.id;});this.last=false;this.lastActive=false;this.addEvents({"selectionchange":true,"afterselectionchange":true,"beforerowselect":true,"rowselect":true,"rowdeselect":true}
+);Roo.grid.RowSelectionModel.superclass.constructor.call(this);this.locked=false;};Roo.extend(Roo.grid.RowSelectionModel,Roo.grid.AbstractSelectionModel,{singleSelect:false,initEvents:function(){if(!this.grid.enableDragDrop&&!this.grid.enableDrag){this.grid.on("mousedown",this.handleMouseDown,this);
+}else{this.grid.on("rowclick",this.handleDragableRowClick,this);}this.rowNav=new Roo.KeyNav(this.grid.getGridEl(),{"up":function(e){if(!e.shiftKey){this.selectPrevious(e.shiftKey);}else if(this.last!==false&&this.lastActive!==false){var B=this.last;this.selectRange(this.last,this.lastActive-1);
+this.grid.getView().focusRow(this.lastActive);if(B!==false){this.last=B;}}else{this.selectFirstRow();}this.fireEvent("afterselectionchange",this);},"down":function(e){if(!e.shiftKey){this.selectNext(e.shiftKey);}else if(this.last!==false&&this.lastActive!==false){var B=this.last;
+this.selectRange(this.last,this.lastActive+1);this.grid.getView().focusRow(this.lastActive);if(B!==false){this.last=B;}}else{this.selectFirstRow();}this.fireEvent("afterselectionchange",this);},scope:this});var A=this.grid.view;A.on("refresh",this.onRefresh,this);
+A.on("rowupdated",this.onRowUpdated,this);A.on("rowremoved",this.onRemove,this);},onRefresh:function(){var ds=this.grid.dataSource,i,v=this.grid.view;var s=this.selections;s.each(function(r){if((i=ds.indexOfId(r.id))!=-1){v.onRowSelect(i);s.add(ds.getAt(i));
+}else{s.remove(r);}});},onRemove:function(v,A,r){this.selections.remove(r);},onRowUpdated:function(v,A,r){if(this.isSelected(r)){v.onRowSelect(A);}},selectRecords:function(A,B){if(!B){this.clearSelections();}var ds=this.grid.dataSource;for(var i=0,C=A.length;
+i<C;i++){this.selectRow(ds.indexOf(A[i]),true);}},getCount:function(){return this.selections.length;},selectFirstRow:function(){this.selectRow(0);},selectLastRow:function(A){this.selectRow(this.grid.dataSource.getCount()-1,A);},selectNext:function(A){if(this.last!==false&&(this.last+1)<this.grid.dataSource.getCount()){this.selectRow(this.last+1,A);
+this.grid.getView().focusRow(this.last);}},selectPrevious:function(A){if(this.last){this.selectRow(this.last-1,A);this.grid.getView().focusRow(this.last);}},getSelections:function(){return [].concat(this.selections.items);},getSelected:function(){return this.selections.itemAt(0);
+},clearSelections:function(A){if(this.locked){return;}if(A!==true){var ds=this.grid.dataSource;var s=this.selections;s.each(function(r){this.deselectRow(ds.indexOfId(r.id));},this);s.clear();}else{this.selections.clear();}this.last=false;},selectAll:function(){if(this.locked){return;
+}this.selections.clear();for(var i=0,A=this.grid.dataSource.getCount();i<A;i++){this.selectRow(i,true);}},hasSelection:function(){return this.selections.length>0;},isSelected:function(A){var r=typeof A=="number"?this.grid.dataSource.getAt(A):A;return (r&&this.selections.key(r.id)?true:false);
+},isIdSelected:function(id){return (this.selections.key(id)?true:false);},handleMouseDown:function(e,t){var A=this.grid.getView(),B;if(this.isLocked()||(B=A.findRowIndex(t))===false){return;};if(e.shiftKey&&this.last!==false){var C=this.last;this.selectRange(C,B,e.ctrlKey);
+this.last=C;A.focusRow(B);}else{var D=this.isSelected(B);if(e.button!==0&&D){A.focusRow(B);}else if(e.ctrlKey&&D){this.deselectRow(B);}else if(!D){this.selectRow(B,e.button===0&&(e.ctrlKey||e.shiftKey));A.focusRow(B);}}this.fireEvent("afterselectionchange",this);
+},handleDragableRowClick:function(A,B,e){if(e.button===0&&!e.shiftKey&&!e.ctrlKey){this.selectRow(B,false);A.view.focusRow(B);this.fireEvent("afterselectionchange",this);}},selectRows:function(A,B){if(!B){this.clearSelections();}for(var i=0,C=A.length;i<C;
+i++){this.selectRow(A[i],true);}},selectRange:function(A,B,C){if(this.locked){return;}if(!C){this.clearSelections();}if(A<=B){for(var i=A;i<=B;i++){this.selectRow(i,true);}}else{for(var i=A;i>=B;i--){this.selectRow(i,true);}}},deselectRange:function(A,B,C){if(this.locked){return;
+}for(var i=A;i<=B;i++){this.deselectRow(i,C);}},selectRow:function(A,B,C){if(this.locked||(A<0||A>=this.grid.dataSource.getCount())){return;}if(this.fireEvent("beforerowselect",this,A,B)!==false){if(!B||this.singleSelect){this.clearSelections();}var r=this.grid.dataSource.getAt(A);
+this.selections.add(r);this.last=this.lastActive=A;if(!C){this.grid.getView().onRowSelect(A);}this.fireEvent("rowselect",this,A,r);this.fireEvent("selectionchange",this);}},deselectRow:function(A,B){if(this.locked){return;}if(this.last==A){this.last=false;
+}if(this.lastActive==A){this.lastActive=false;}var r=this.grid.dataSource.getAt(A);this.selections.remove(r);if(!B){this.grid.getView().onRowDeselect(A);}this.fireEvent("rowdeselect",this,A);this.fireEvent("selectionchange",this);},restoreLast:function(){if(this._last){this.last=this._last;
+}},acceptsNav:function(A,B,cm){return !cm.isHidden(B)&&cm.isCellEditable(B,A);},onEditorKey:function(A,e){var k=e.getKey(),B,g=this.grid,ed=g.activeEditor;if(k==e.TAB){e.stopEvent();ed.completeEdit();if(e.shiftKey){B=g.walkCells(ed.row,ed.col-1,-1,this.acceptsNav,this);
+}else{B=g.walkCells(ed.row,ed.col+1,1,this.acceptsNav,this);}}else if(k==e.ENTER&&!e.ctrlKey){e.stopEvent();ed.completeEdit();if(e.shiftKey){B=g.walkCells(ed.row-1,ed.col,-1,this.acceptsNav,this);}else{B=g.walkCells(ed.row+1,ed.col,1,this.acceptsNav,this);
+}}else if(k==e.ESC){ed.cancelEdit();}if(B){g.startEditing(B[0],B[1]);}}});
+// Roo/grid/CellSelectionModel.js
+Roo.grid.CellSelectionModel=function(A){Roo.apply(this,A);this.selection=null;this.addEvents({"beforecellselect":true,"cellselect":true,"selectionchange":true,"tabend":true,"beforeeditnext":true});Roo.grid.CellSelectionModel.superclass.constructor.call(this);
+};Roo.extend(Roo.grid.CellSelectionModel,Roo.grid.AbstractSelectionModel,{enter_is_tab:false,initEvents:function(){this.grid.on("mousedown",this.handleMouseDown,this);this.grid.getGridEl().on(Roo.isIE?"keydown":"keypress",this.handleKeyDown,this);var A=this.grid.view;
+A.on("refresh",this.onViewChange,this);A.on("rowupdated",this.onRowUpdated,this);A.on("beforerowremoved",this.clearSelections,this);A.on("beforerowsinserted",this.clearSelections,this);if(this.grid.isEditor){this.grid.on("beforeedit",this.beforeEdit,this);
+}},beforeEdit:function(e){this.select(e.row,e.column,false,true,e.record);},onRowUpdated:function(v,A,r){if(this.selection&&this.selection.record==r){v.onCellSelect(A,this.selection.cell[1]);}},onViewChange:function(){this.clearSelections(true);},getSelectedCell:function(){return this.selection?this.selection.cell:null;
+},clearSelections:function(A){var s=this.selection;if(s){if(A!==true){this.grid.view.onCellDeselect(s.cell[0],s.cell[1]);}this.selection=null;this.fireEvent("selectionchange",this,null);}},hasSelection:function(){return this.selection?true:false;},handleMouseDown:function(e,t){var v=this.grid.getView();
+if(this.isLocked()){return;};var A=v.findRowIndex(t);var B=v.findCellIndex(t);if(A!==false&&B!==false){this.select(A,B);}},select:function(A,B,C,D,r){if(this.fireEvent("beforecellselect",this,A,B)!==false){this.clearSelections();r=r||this.grid.dataSource.getAt(A);
+this.selection={record:r,cell:[A,B]};if(!C){var v=this.grid.getView();v.onCellSelect(A,B);if(D!==true){v.focusCell(A,B);}}this.fireEvent("cellselect",this,A,B);this.fireEvent("selectionchange",this,this.selection);}},isSelectable:function(A,B,cm){return !cm.isHidden(B);
+},handleKeyDown:function(e){if(!e.isNavKeyPress()){return;}var g=this.grid,s=this.selection;if(!s){e.stopEvent();var A=g.walkCells(0,0,1,this.isSelectable,this);if(A){this.select(A[0],A[1]);}return;}var sm=this;var B=function(D,E,F){return g.walkCells(D,E,F,sm.isSelectable,sm);
+};var k=e.getKey(),r=s.cell[0],c=s.cell[1];var C;switch(k){case e.TAB:if(g.isEditor&&g.editing){return;}if(e.shiftKey){C=B(r,c-1,-1);}else{C=B(r,c+1,1);}break;case e.DOWN:C=B(r+1,c,1);break;case e.UP:C=B(r-1,c,-1);break;case e.RIGHT:C=B(r,c+1,1);break;case e.LEFT:C=B(r,c-1,-1);
+break;case e.ENTER:if(g.isEditor&&!g.editing){g.startEditing(r,c);e.stopEvent();return;}break;};if(C){this.select(C[0],C[1]);e.stopEvent();}},acceptsNav:function(A,B,cm){return !cm.isHidden(B)&&cm.isCellEditable(B,A);},onEditorKey:function(A,e){var k=e.getKey(),B,g=this.grid,ed=g.activeEditor,C=false;
+if(this.enter_is_tab&&k==e.ENTER){k=e.TAB;}if(k==e.TAB){if(e.shiftKey){B=g.walkCells(ed.row,ed.col-1,-1,this.acceptsNav,this);}else{B=g.walkCells(ed.row,ed.col+1,1,this.acceptsNav,this);C=true;}e.stopEvent();}else if(k==e.ENTER&&!e.ctrlKey){ed.completeEdit();
+e.stopEvent();B=g.walkCells(ed.row,ed.col+1,1,this.acceptsNav,this);}else if(k==e.ESC){ed.cancelEdit();}if(B){var D={cell:B,forward:C};this.fireEvent('beforeeditnext',D);B=D.cell;C=D.forward;}if(B){g.startEditing.defer(100,g,[B[0],B[1]]);}else if(C){this.fireEvent.defer(100,this,['tabend',this]);
+}}});
+// Roo/grid/EditorGrid.js
+Roo.grid.EditorGrid=function(A,B){Roo.grid.EditorGrid.superclass.constructor.call(this,A,B);this.getGridEl().addClass("xedit-grid");if(!this.selModel){this.selModel=new Roo.grid.CellSelectionModel();}this.activeEditor=null;this.addEvents({"beforeedit":true,"afteredit":true,"validateedit":true}
+);this.on("bodyscroll",this.stopEditing,this);this.on(this.clicksToEdit==1?"cellclick":"celldblclick",this.onCellDblClick,this);};Roo.extend(Roo.grid.EditorGrid,Roo.grid.Grid,{clicksToEdit:2,isEditor:true,trackMouseOver:false,onCellDblClick:function(g,A,B){this.startEditing(A,B);
+},onEditComplete:function(ed,A,B){this.editing=false;this.activeEditor=null;ed.un("specialkey",this.selModel.onEditorKey,this.selModel);var r=ed.record;var C=this.colModel.getDataIndex(ed.col);var e={grid:this,record:r,field:C,originalValue:B,value:A,row:ed.row,column:ed.col,cancel:false,editor:ed}
+;var D=Roo.get(this.view.getCell(ed.row,ed.col));D.show();if(String(A)!==String(B)){if(this.fireEvent("validateedit",e)!==false&&!e.cancel){r.set(C,e.value);if(ed.field.displayField&&ed.field.name){r.set(ed.field.name,ed.field.el.dom.value);}delete e.cancel;
+this.fireEvent("afteredit",e);}}else{this.fireEvent("afteredit",e);}this.view.focusCell(ed.row,ed.col);},startEditing:function(A,B){this.stopEditing();if(this.colModel.isCellEditable(B,A)){this.view.ensureVisible(A,B,true);var r=this.dataSource.getAt(A);var C=this.colModel.getDataIndex(B);
+var D=Roo.get(this.view.getCell(A,B));var e={grid:this,record:r,field:C,value:r.data[C],row:A,column:B,cancel:false};if(this.fireEvent("beforeedit",e)!==false&&!e.cancel){this.editing=true;var ed=this.colModel.getCellEditor(B,A);if(!ed){return;}if(!ed.rendered){ed.render(ed.parentEl||document.body);
+}ed.field.reset();D.hide();(function(){ed.row=A;ed.col=B;ed.record=r;ed.on("complete",this.onEditComplete,this,{single:true});ed.on("specialkey",this.selModel.onEditorKey,this.selModel);this.activeEditor=ed;var v=r.data[C];ed.startEdit(this.view.getCell(A,B),v);
+if(ed.field.displayField&&ed.field.name){ed.field.el.dom.value=r.data[ed.field.name];}}).defer(50,this);}}},stopEditing:function(){if(this.activeEditor){this.activeEditor.completeEdit();}this.activeEditor=null;},getDragDropText:function(){var A=this.selModel.getSelectedCell()?1:0;
+return String.format(this.ddText,A,A==1?'':'s');}});
+// Roo/grid/GridEditor.js
+Roo.grid.GridEditor=function(A,B){if(!B&&A.field){B=A;A=Roo.factory(B.field,Roo.form);}Roo.grid.GridEditor.superclass.constructor.call(this,A,B);A.monitorTab=false;};Roo.extend(Roo.grid.GridEditor,Roo.Editor,{alignment:"tl-tl",autoSize:"width",hideEl:false,cls:"x-small-editor x-grid-editor",shim:false,shadow:"frame"}
+);
+// Roo/grid/PropertyGrid.js
+Roo.grid.PropertyRecord=Roo.data.Record.create([{name:'name',type:'string'},'value']);Roo.grid.PropertyStore=function(A,B){this.grid=A;this.store=new Roo.data.Store({recordType:Roo.grid.PropertyRecord});this.store.on('update',this.onUpdate,this);if(B){this.setSource(B);
+}Roo.grid.PropertyStore.superclass.constructor.call(this);};Roo.extend(Roo.grid.PropertyStore,Roo.util.Observable,{setSource:function(o){this.source=o;this.store.removeAll();var A=[];for(var k in o){if(this.isEditableValue(o[k])){A.push(new Roo.grid.PropertyRecord({name:k,value:o[k]}
+,k));}}this.store.loadRecords({records:A},{},true);},onUpdate:function(ds,A,B){if(B==Roo.data.Record.EDIT){var v=A.data['value'];var C=A.modified['value'];if(this.grid.fireEvent('beforepropertychange',this.source,A.id,v,C)!==false){this.source[A.id]=v;A.commit();
+this.grid.fireEvent('propertychange',this.source,A.id,v,C);}else{A.reject();}}},getProperty:function(A){return this.store.getAt(A);},isEditableValue:function(A){if(A&&A instanceof Date){return true;}else if(typeof A=='object'||typeof A=='function'){return false;
+}return true;},setValue:function(A,B){this.source[A]=B;this.store.getById(A).set('value',B);},getSource:function(){return this.source;}});Roo.grid.PropertyColumnModel=function(A,B){this.grid=A;var g=Roo.grid;g.PropertyColumnModel.superclass.constructor.call(this,[{header:this.nameText,sortable:true,dataIndex:'name',id:'name'}
+,{header:this.valueText,resizable:false,dataIndex:'value',id:'value'}]);this.store=B;this.bselect=Roo.DomHelper.append(document.body,{tag:'select',style:'display:none',cls:'x-grid-editor',children:[{tag:'option',value:'true',html:'true'},{tag:'option',value:'false',html:'false'}
+]});Roo.id(this.bselect);var f=Roo.form;this.editors={'date':new g.GridEditor(new f.DateField({selectOnFocus:true})),'string':new g.GridEditor(new f.TextField({selectOnFocus:true})),'number':new g.GridEditor(new f.NumberField({selectOnFocus:true,style:'text-align:left;'}
+)),'int':new g.GridEditor(new f.NumberField({selectOnFocus:true,allowDecimals:false,style:'text-align:left;'})),'boolean':new g.GridEditor(new f.Field({el:this.bselect,selectOnFocus:true}))};this.renderCellDelegate=this.renderCell.createDelegate(this);this.renderPropDelegate=this.renderProp.createDelegate(this);
+};Roo.extend(Roo.grid.PropertyColumnModel,Roo.grid.ColumnModel,{nameText:'Name',valueText:'Value',dateFormat:'m/j/Y',renderDate:function(A){return A.dateFormat(this.dateFormat);},renderBool:function(A){return A?'true':'false';},isCellEditable:function(A,B){return A==1;
+},getRenderer:function(A){return A==1?this.renderCellDelegate:this.renderPropDelegate;},renderProp:function(v){return this.getPropertyName(v);},renderCell:function(A){var rv=A;if(A instanceof Date){rv=this.renderDate(A);}else if(typeof A=='boolean'){rv=this.renderBool(A);
+}return Roo.util.Format.htmlEncode(rv);},getPropertyName:function(A){var pn=this.grid.propertyNames;return pn&&pn[A]?pn[A]:A;},getCellEditor:function(A,B){var p=this.store.getProperty(B);var n=p.data['name'],C=p.data['value'];if(typeof(this.grid.customEditors[n])=='string'){return this.editors[this.grid.customEditors[n]];
+}if(typeof(this.grid.customEditors[n])!='undefined'){return this.grid.customEditors[n];}if(C instanceof Date){return this.editors['date'];}else if(typeof C=='number'){return this.editors['number'];}else if(typeof C=='boolean'){return this.editors['boolean'];
+}else{return this.editors['string'];}}});Roo.grid.PropertyGrid=function(A,B){B=B||{};var C=new Roo.grid.PropertyStore(this);this.store=C;var cm=new Roo.grid.PropertyColumnModel(this,C);C.store.sort('name','ASC');Roo.grid.PropertyGrid.superclass.constructor.call(this,A,Roo.apply({ds:C.store,cm:cm,enableColLock:false,enableColumnMove:false,stripeRows:false,trackMouseOver:false,clicksToEdit:1}
+,B));this.getGridEl().addClass('x-props-grid');this.lastEditRow=null;this.on('columnresize',this.onColumnResize,this);this.addEvents({"beforepropertychange":true,"propertychange":true});this.customEditors=this.customEditors||{};};Roo.extend(Roo.grid.PropertyGrid,Roo.grid.EditorGrid,{render:function(){Roo.grid.PropertyGrid.superclass.render.call(this);
+this.autoSize.defer(100,this);},autoSize:function(){Roo.grid.PropertyGrid.superclass.autoSize.call(this);if(this.view){this.view.fitColumns();}},onColumnResize:function(){this.colModel.setColumnWidth(1,this.container.getWidth(true)-this.colModel.getColumnWidth(0));
+this.autoSize();},setSource:function(A){this.store.setSource(A);},getSource:function(){return this.store.getSource();}});
+// Roo/grid/Calendar.js
+Roo.grid.Calendar=function(A,B){this.container=Roo.get(A);this.container.update("");this.container.setStyle("overflow","hidden");this.container.addClass('x-grid-container');this.id=this.container.id;Roo.apply(this,B);var C=[];var d=1;for(var r=0;r<6;r++){C[r]=[];
+for(var c=0;c<7;c++){C[r][c]='';}}if(this.eventStore){this.eventStore=Roo.factory(this.eventStore,Roo.data);this.eventStore.on('load',this.onLoad,this);this.eventStore.on('beforeload',this.clearEvents,this);}this.dataSource=new Roo.data.Store({proxy:new Roo.data.MemoryProxy(C),reader:new Roo.data.ArrayReader({}
+,['weekday0','weekday1','weekday2','weekday3','weekday4','weekday5','weekday6'])});this.dataSource.load();this.ds=this.dataSource;this.ds.xmodule=this.xmodule||false;var D=function(v,x,r){return String.format('<div class="fc-day  fc-widget-content"><div>'+'<div class="fc-event-container"></div>'+'<div class="fc-day-number">{0}</div>'+'<div class="fc-day-content"><div style="position:relative"></div></div>'+'</div></div>',v);
+};this.colModel=new Roo.grid.ColumnModel([{xtype:'ColumnModel',xns:Roo.grid,dataIndex:'weekday0',header:'Sunday',renderer:D},{xtype:'ColumnModel',xns:Roo.grid,dataIndex:'weekday1',header:'Monday',renderer:D},{xtype:'ColumnModel',xns:Roo.grid,dataIndex:'weekday2',header:'Tuesday',renderer:D}
+,{xtype:'ColumnModel',xns:Roo.grid,dataIndex:'weekday3',header:'Wednesday',renderer:D},{xtype:'ColumnModel',xns:Roo.grid,dataIndex:'weekday4',header:'Thursday',renderer:D},{xtype:'ColumnModel',xns:Roo.grid,dataIndex:'weekday5',header:'Friday',renderer:D},{xtype:'ColumnModel',xns:Roo.grid,dataIndex:'weekday6',header:'Saturday',renderer:D}
+]);this.cm=this.colModel;this.cm.xmodule=this.xmodule||false;if(this.width){this.container.setWidth(this.width);}if(this.height){this.container.setHeight(this.height);}this.addEvents({"click":true,"dblclick":true,"contextmenu":true,"mousedown":true,"mouseup":true,"mouseover":true,"mouseout":true,"keypress":true,"keydown":true,"cellclick":true,"celldblclick":true,"rowclick":true,"rowdblclick":true,"headerclick":true,"headerdblclick":true,"rowcontextmenu":true,"cellcontextmenu":true,"headercontextmenu":true,"bodyscroll":true,"columnresize":true,"columnmove":true,"startdrag":true,"enddrag":true,"dragdrop":true,"dragover":true,"dragenter":true,"dragout":true,'rowclass':true,'render':true,'select':true,'monthchange':true,'evententer':true,'eventleave':true,'eventclick':true,'eventrender':true}
+);Roo.grid.Grid.superclass.constructor.call(this);this.on('render',function(){this.view.el.addClass('x-grid-cal');(function(){this.setDate(new Date());}).defer(100,this);},this);if(!Roo.grid.Calendar.style){Roo.grid.Calendar.style=Roo.util.CSS.createStyleSheet({'.x-grid-cal .x-grid-col':{height:'auto !important','vertical-align':'top'}
+,'.x-grid-cal  .fc-event-hori':{height:'14px'}},Roo.id());}};Roo.extend(Roo.grid.Calendar,Roo.grid.Grid,{eventStore:25,activeDate:false,startDay:0,autoWidth:true,monitorWindowResize:false,resizeColumns:function(){var A=(this.view.el.getWidth()/7)-3;for(var i=0;
+i<7;i++){this.cm.setColumnWidth(i,A);}},setDate:function(A){Roo.log('setDate?');this.resizeColumns();var vd=this.activeDate;this.activeDate=A;var B=A.getDaysInMonth();var C=A.getFirstDateOfMonth();var D=C.getDay()-this.startDay;if(D<this.startDay){D+=7;}var pm=A.add(Date.MONTH,-1);
+var E=pm.getDaysInMonth()-D;this.cells=this.view.el.select('.x-grid-row .x-grid-col',true);this.textNodes=this.view.el.query('.x-grid-row .x-grid-col .x-grid-cell-text');var F=this.cells.elements;var G=this.textNodes;B+=D;var H=86400000;var d=(new Date(pm.getFullYear(),pm.getMonth(),E)).clearTime();
+var I=new Date().clearTime().getTime();var J=A.clearTime().getTime();var K=this.minDate?this.minDate.clearTime():Number.NEGATIVE_INFINITY;var L=this.maxDate?this.maxDate.clearTime():Number.POSITIVE_INFINITY;var M=this.disabledDatesRE;var N=this.disabledDatesText;
+var O=this.disabledDays?this.disabledDays.join(""):false;var P=this.disabledDaysText;var Q=this.format;var R=function(W,X){X.title="";var t=d.getTime();X.dateValue=t;if(t==I){X.className+=" fc-today";X.className+=" fc-state-highlight";X.title=W.todayText;
+}if(t==J){X.className+=" fc-state-highlight";}if(t<K){X.title=W.minText;return;}if(t>L){X.title=W.maxText;return;}if(O){if(O.indexOf(d.getDay())!=-1){}}if(M&&Q){var Y=d.dateFormat(Q);if(M.test(Y)){X.title=N.replace("%0",Y);X.className=" fc-state-disabled";
+}}if(!X.initialClassName){X.initialClassName=X.dom.className;}X.dom.className=X.initialClassName+' '+X.className;};var i=0;for(;i<D;i++){F[i].dayName=(++E);Roo.log(G[i]);d.setDate(d.getDate()+1);R(this,F[i]);}var S=0;for(;i<B;i++){S=i-D+1;F[i].dayName=(S);
+d.setDate(d.getDate()+1);F[i].className='';R(this,F[i]);}var T=0;for(;i<42;i++){d.setDate(d.getDate()+1);F[i].dayName=(++T);F[i].className="fc-future fc-other-month";R(this,F[i]);}var U=Math.ceil((A.getDaysInMonth()+A.getFirstDateOfMonth().getDay())/7);var V=[];
+var i=0;for(var r=0;r<6;r++){for(var c=0;c<7;c++){this.ds.getAt(r).set('weekday'+c,F[i++].dayName);}}this.cells=this.view.el.select('.x-grid-row .x-grid-col',true);for(i=0;i<F.length;i++){this.cells.elements[i].dayName=F[i].dayName;this.cells.elements[i].className=F[i].className;
+this.cells.elements[i].initialClassName=F[i].initialClassName;this.cells.elements[i].title=F[i].title;this.cells.elements[i].dateValue=F[i].dateValue;}this.fireEvent('monthchange',this,A);},getSelectionModel:function(){if(!this.selModel){this.selModel=new Roo.grid.CellSelectionModel();
+}return this.selModel;},load:function(){this.eventStore.load()},findCell:function(dt){dt=dt.clearTime().getTime();var A=false;this.cells.each(function(c){if(c.dateValue==dt){A=c;return false;}return true;});return A;},findCells:function(A){var s=A.data.start_dt.clone().clearTime().getTime();
+var e=A.data.end_dt.clone().clearTime().getTime();var B=[];this.cells.each(function(c){if(c.dateValue>e){return;}if(c.dateValue<s){return;}B.push(c);});return B;},findBestRow:function(A){var B=0;for(var i=0;i<A.length;i++){B=Math.max(A[i].rows||0,B);}return B;
+},addItem:function(A){var B=this.findCells(A);A.row=this.findBestRow(B);var C=false;var D=[];for(var i=0;i<B.length;i++){if(!C){C={start:B[i],end:B[i]};continue;}if(C.start.getY()==B[i].getY()){C.end=B[i];continue;}D.push(C);C={start:B[i],end:B[i]};}D.push(C);
+A.els=[];A.rows=D;A.cells=B;for(var i=0;i<B.length;i++){B[i].rows=Math.max(B[i].rows||0,A.row+1);}},clearEvents:function(){if(!this.eventStore.getCount()){return;}Roo.each(this.cells.elements,function(c){c.rows=0;});this.eventStore.each(function(e){this.clearEvent(e);
+},this);},clearEvent:function(ev){if(ev.els){Roo.each(ev.els,function(el){el.un('mouseenter',this.onEventEnter,this);el.un('mouseleave',this.onEventLeave,this);el.remove();},this);ev.els=[];}},renderEvent:function(ev,A){if(!A){A=this.view.el.select('.fc-event-container',true).first();
+}this.clearEvent(ev);ev.els=[];var B=ev.cells;var C=ev.rows;this.fireEvent('eventrender',this,ev);for(var i=0;i<C.length;i++){cls='';if(i==0){cls+=' fc-event-start';}if((i+1)==C.length){cls+=' fc-event-end';}var cg=this.eventTmpl.append(A,Roo.apply({fccls:cls}
+,ev.data),true);cg.on('mouseenter',this.onEventEnter,this,ev);cg.on('mouseleave',this.onEventLeave,this,ev);cg.on('click',this.onEventClick,this,ev);ev.els.push(cg);var D=C[i].start.select('.fc-day-content',true).first().getBox();var E=C[i].end.select('.fc-day-content',true).first().getBox();
+cg.setXY([D.x+2,D.y+(ev.row*20)]);cg.setWidth(E.right-D.x-2);}},renderEvents:function(){if(!this.eventTmpl){this.eventTmpl=new Roo.Template('<div class="roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable {fccls} {cls}"  style="position: absolute" unselectable="on">'+'<div class="fc-event-inner">'+'<span class="fc-event-time">{time}</span>'+'<span class="fc-event-title" qtip="{qtip}">{title}</span>'+'</div>'+'<div class="ui-resizable-heandle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div>'+'</div>');
+}this.cells.each(function(c){c.select('.fc-day-content div',true).first().setHeight(Math.max(34,(c.rows||1)*20));});var A=this.view.el.select('.fc-event-container',true).first();var B;this.eventStore.each(function(ev){this.renderEvent(ev);},this);this.view.layout();
+},onEventEnter:function(e,el,A,d){this.fireEvent('evententer',this,el,A);},onEventLeave:function(e,el,A,d){this.fireEvent('eventleave',this,el,A);},onEventClick:function(e,el,A,d){this.fireEvent('eventclick',this,el,A);},onMonthChange:function(){this.store.load();
+},onLoad:function(){if(this.eventStore.getCount()>0){this.eventStore.each(function(d){var A=d.data;if(typeof(A.end_dt)=='undefined'){Roo.log("Missing End time in calendar data: ");Roo.log(d);return;}if(typeof(A.start_dt)=='undefined'){Roo.log("Missing Start time in calendar data: ");
+Roo.log(d);return;}A.start_dt=typeof(A.start_dt)=='string'?Date.parseDate(A.start_dt,'Y-m-d H:i:s'):A.start_dt,A.end_dt=typeof(A.end_dt)=='string'?Date.parseDate(A.end_dt,'Y-m-d H:i:s'):A.end_dt,A.id=A.id||d.id;A.title=A.title||'??';this.addItem(d);},this);
+}this.renderEvents();}});
+// Roo/LoadMask.js
+Roo.LoadMask=function(el,A){this.el=Roo.get(el);Roo.apply(this,A);if(this.store){this.store.on('beforeload',this.onBeforeLoad,this);this.store.on('load',this.onLoad,this);this.store.on('loadexception',this.onLoadException,this);this.removeMask=false;}else{var um=this.el.getUpdateManager();
+um.showLoadIndicator=false;um.on('beforeupdate',this.onBeforeLoad,this);um.on('update',this.onLoad,this);um.on('failure',this.onLoad,this);this.removeMask=true;}};Roo.LoadMask.prototype={msg:'Loading...',msgCls:'x-mask-loading',disabled:false,disable:function(){this.disabled=true;
+},enable:function(){this.disabled=false;},onLoadException:function(){Roo.log(arguments);if(typeof(arguments[3])!='undefined'){Roo.MessageBox.alert("Error loading",arguments[3]);}this.el.unmask(this.removeMask);},onLoad:function(){this.el.unmask(this.removeMask);
+},onBeforeLoad:function(){if(!this.disabled){this.el.mask(this.msg,this.msgCls);}},destroy:function(){if(this.store){this.store.un('beforeload',this.onBeforeLoad,this);this.store.un('load',this.onLoad,this);this.store.un('loadexception',this.onLoadException,this);
+}else{var um=this.el.getUpdateManager();um.un('beforeupdate',this.onBeforeLoad,this);um.un('update',this.onLoad,this);um.un('failure',this.onLoad,this);}}};
+// Roo/XTemplate.js
+Roo.XTemplate=function(){Roo.XTemplate.superclass.constructor.apply(this,arguments);if(this.html){this.compile();}};Roo.extend(Roo.XTemplate,Roo.Template,{tpls:false,re:/\{([\w-\.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,compile:function(){var s=this.html;s=['<tpl>',s,'</tpl>'].join('');
+var re=/<tpl\b[^>]*>((?:(?=([^<]+))\2|<(?!tpl\b[^>]*>))*?)<\/tpl>/,A=/^<tpl\b[^>]*?for="(.*?)"/,B=/^<tpl\b[^>]*?if="(.*?)"/,C=/^<tpl\b[^>]*?exec="(.*?)"/,D=/^<tpl\b[^>]*?name="(\w+)"/,m,id=0,E=[];while(true==!!(m=s.match(re))){var F=m[0].match(A),G=m[0].match(B),H=m[0].match(C),I=m[0].match(D),J=null,fn=null,K=null,L=F&&F[1]?F[1]:'';
+if(G){J=G&&G[1]?G[1]:null;if(J){fn=new Function('values','parent','with(values){ return '+(Roo.util.Format.htmlDecode(J))+'; }');}}if(H){J=H&&H[1]?H[1]:null;if(J){K=new Function('values','parent','with(values){ '+(Roo.util.Format.htmlDecode(J))+'; }');}}if(L){switch(L){case '.':L=new Function('values','parent','with(values){ return values; }');
+break;case '..':L=new Function('values','parent','with(values){ return parent; }');break;default:L=new Function('values','parent','with(values){ return '+L+'; }');}}var M=I?I[1]:id;E.push({id:I?I[1]:id,target:L,exec:K,test:fn,body:m[1]||''});if(I){s=s.replace(m[0],'');
+}else{s=s.replace(m[0],'{xtpl'+id+'}');}++id;}this.tpls=[];for(var i=E.length-1;i>=0;--i){this.compileTpl(E[i]);this.tpls[E[i].id]=E[i];}this.master=E[E.length-1];return this;},applySubTemplate:function(id,A,B){var t=this.tpls[id];try{if(t.test&&!t.test.call(this,A,B)){return '';
+}}catch(e){Roo.log("Xtemplate.applySubTemplate 'test': Exception thrown");Roo.log(e.toString());Roo.log(t.test);return ''}try{if(t.exec&&t.exec.call(this,A,B)){return '';}}catch(e){Roo.log("Xtemplate.applySubTemplate 'exec': Exception thrown");Roo.log(e.toString());
+Roo.log(t.exec);return ''}try{var vs=t.target?t.target.call(this,A,B):A;B=t.target?A:B;if(t.target&&vs instanceof Array){var C=[];for(var i=0,D=vs.length;i<D;i++){C[C.length]=t.compiled.call(this,vs[i],B);}return C.join('');}return t.compiled.call(this,vs,B);
+}catch(e){Roo.log("Xtemplate.applySubTemplate : Exception thrown");Roo.log(e.toString());Roo.log(t.compiled);return '';}},compileTpl:function(tpl){var fm=Roo.util.Format;var useF=this.disableFormats!==true;var A=Roo.isGecko?"+":",";var undef=function(C){Roo.log("Property not found :"+C);
+return '';};var fn=function(m,C,D,E){E=E?E.replace(/\\'/g,"'"):E;if(typeof(D)=='undefined'){D='htmlEncode';}if(D=='raw'){D=false;}if(C.substr(0,4)=='xtpl'){return "'"+A+'this.applySubTemplate('+C.substr(4)+', values, parent)'+A+"'";}var F=[];var G='';Roo.each(C.split('.'),function(st){G+=(G.length?'.':'')+st;
+F.push("(typeof("+G+") == 'undefined')");});var H='(('+F.join(" || ")+") ? undef('"+C+"') : ";if(D&&useF){E=E?','+E:"";if(D.substr(0,5)!="this."){D="fm."+D+'(';}else{D='this.call("'+D.substr(5)+'", ';E=", values";}return "'"+A+H+D+C+E+"))"+A+"'";}if(E.length){return "'"+A+H+C+'('+E+"))"+A+"'";
+}return "'"+A+H+C+")"+A+"'";};var B;if(Roo.isGecko){B="tpl.compiled = function(values, parent){  with(values) { return '"+tpl.body.replace(/(\r\n|\n)/g,'\\n').replace(/'/g,"\\'").replace(this.re,fn)+"';};};";}else{B=["tpl.compiled = function(values, parent){  with (values) { return ['"];
+B.push(tpl.body.replace(/(\r\n|\n)/g,'\\n').replace(/'/g,"\\'").replace(this.re,fn));B.push("'].join('');};};");B=B.join('');}Roo.debug&&Roo.log(B.replace(/\\n/,'\n'));eval(B);return this;},applyTemplate:function(A){return this.master.compiled.call(this,A,{}
+);},apply:function(){return this.applyTemplate.apply(this,arguments);}});Roo.XTemplate.from=function(el){el=Roo.getDom(el);return new Roo.XTemplate(el.value||el.innerHTML);};
-- 
2.39.2