roojs-ui-debug.js
authorAlan Knowles <alan@akbkhome.com>
Tue, 31 Aug 2010 07:33:50 +0000 (15:33 +0800)
committerAlan Knowles <alan@akbkhome.com>
Tue, 31 Aug 2010 07:33:50 +0000 (15:33 +0800)
roojs-ui-debug.js

index e1bbd1c..fd1d875 100644 (file)
@@ -33866,3142 +33866,3 @@ Roo.extend(Roo.grid.GridView.ColumnDragZone, Roo.grid.HeaderDragZone, {
         Roo.grid.GridView.ColumnDragZone.superclass.handleMouseDown.call(this, e);
     }
 });
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-// private
-// This is a support class used internally by the Grid components
-Roo.grid.SplitDragZone = function(grid, hd, hd2){
-    this.grid = grid;
-    this.view = grid.getView();
-    this.proxy = this.view.resizeProxy;
-    Roo.grid.SplitDragZone.superclass.constructor.call(this, hd,
-        "gridSplitters" + this.grid.getGridEl().id, {
-        dragElId : Roo.id(this.proxy.dom), resizeFrame:false
-    });
-    this.setHandleElId(Roo.id(hd));
-    this.setOuterHandleElId(Roo.id(hd2));
-    this.scroll = false;
-};
-Roo.extend(Roo.grid.SplitDragZone, Roo.dd.DDProxy, {
-    fly: Roo.Element.fly,
-
-    b4StartDrag : function(x, y){
-        this.view.headersDisabled = true;
-        this.proxy.setHeight(this.view.mainWrap.getHeight());
-        var w = this.cm.getColumnWidth(this.cellIndex);
-        var minw = Math.max(w-this.grid.minColumnWidth, 0);
-        this.resetConstraints();
-        this.setXConstraint(minw, 1000);
-        this.setYConstraint(0, 0);
-        this.minX = x - minw;
-        this.maxX = x + 1000;
-        this.startPos = x;
-        Roo.dd.DDProxy.prototype.b4StartDrag.call(this, x, y);
-    },
-
-
-    handleMouseDown : function(e){
-        ev = Roo.EventObject.setEvent(e);
-        var t = this.fly(ev.getTarget());
-        if(t.hasClass("x-grid-split")){
-            this.cellIndex = this.view.getCellIndex(t.dom);
-            this.split = t.dom;
-            this.cm = this.grid.colModel;
-            if(this.cm.isResizable(this.cellIndex) && !this.cm.isFixed(this.cellIndex)){
-                Roo.grid.SplitDragZone.superclass.handleMouseDown.apply(this, arguments);
-            }
-        }
-    },
-
-    endDrag : function(e){
-        this.view.headersDisabled = false;
-        var endX = Math.max(this.minX, Roo.lib.Event.getPageX(e));
-        var diff = endX - this.startPos;
-        this.view.onColumnSplitterMoved(this.cellIndex, this.cm.getColumnWidth(this.cellIndex)+diff);
-    },
-
-    autoOffset : function(){
-        this.setDelta(0,0);
-    }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-// private
-// This is a support class used internally by the Grid components
-Roo.grid.GridDragZone = function(grid, config){
-    this.view = grid.getView();
-    Roo.grid.GridDragZone.superclass.constructor.call(this, this.view.mainBody.dom, config);
-    if(this.view.lockedBody){
-        this.setHandleElId(Roo.id(this.view.mainBody.dom));
-        this.setOuterHandleElId(Roo.id(this.view.lockedBody.dom));
-    }
-    this.scroll = false;
-    this.grid = grid;
-    this.ddel = document.createElement('div');
-    this.ddel.className = 'x-grid-dd-wrap';
-};
-
-Roo.extend(Roo.grid.GridDragZone, Roo.dd.DragZone, {
-    ddGroup : "GridDD",
-
-    getDragData : function(e){
-        var t = Roo.lib.Event.getTarget(e);
-        var rowIndex = this.view.findRowIndex(t);
-        if(rowIndex !== false){
-            var sm = this.grid.selModel;
-            //if(!sm.isSelected(rowIndex) || e.hasModifier()){
-              //  sm.mouseDown(e, t);
-            //}
-            if (e.hasModifier()){
-                sm.handleMouseDown(e, t); // non modifier buttons are handled by row select.
-            }
-            return {grid: this.grid, ddel: this.ddel, rowIndex: rowIndex, selections:sm.getSelections()};
-        }
-        return false;
-    },
-
-    onInitDrag : function(e){
-        var data = this.dragData;
-        this.ddel.innerHTML = this.grid.getDragDropText();
-        this.proxy.update(this.ddel);
-        // fire start drag?
-    },
-
-    afterRepair : function(){
-        this.dragging = false;
-    },
-
-    getRepairXY : function(e, data){
-        return false;
-    },
-
-    onEndDrag : function(data, e){
-        // fire end drag?
-    },
-
-    onValidDrop : function(dd, e, id){
-        // fire drag drop?
-        this.hideProxy();
-    },
-
-    beforeInvalidDrop : function(e, id){
-
-    }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.grid.ColumnModel
- * @extends Roo.util.Observable
- * This is the default implementation of a ColumnModel used by the Grid. It defines
- * the columns in the grid.
- * <br>Usage:<br>
- <pre><code>
- var colModel = new Roo.grid.ColumnModel([
-       {header: "Ticker", width: 60, sortable: true, locked: true},
-       {header: "Company Name", width: 150, sortable: true},
-       {header: "Market Cap.", width: 100, sortable: true},
-       {header: "$ Sales", width: 100, sortable: true, renderer: money},
-       {header: "Employees", width: 100, sortable: true, resizable: false}
- ]);
- </code></pre>
- * <p>
- * The config options listed for this class are options which may appear in each
- * individual column definition.
- * <br/>RooJS Fix - column id's are not sequential but use Roo.id() - fixes bugs with layouts.
- * @constructor
- * @param {Object} config An Array of column config objects. See this class's
- * config objects for details.
-*/
-Roo.grid.ColumnModel = function(config){
-       /**
-     * The config passed into the constructor
-     */
-    this.config = config;
-    this.lookup = {};
-
-    // if no id, create one
-    // if the column does not have a dataIndex mapping,
-    // map it to the order it is in the config
-    for(var i = 0, len = config.length; i < len; i++){
-        var c = config[i];
-        if(typeof c.dataIndex == "undefined"){
-            c.dataIndex = i;
-        }
-        if(typeof c.renderer == "string"){
-            c.renderer = Roo.util.Format[c.renderer];
-        }
-        if(typeof c.id == "undefined"){
-            c.id = Roo.id();
-        }
-        if(c.editor && c.editor.xtype){
-            c.editor  = Roo.factory(c.editor, Roo.grid);
-        }
-        if(c.editor && c.editor.isFormField){
-            c.editor = new Roo.grid.GridEditor(c.editor);
-        }
-        this.lookup[c.id] = c;
-    }
-
-    /**
-     * The width of columns which have no width specified (defaults to 100)
-     * @type Number
-     */
-    this.defaultWidth = 100;
-
-    /**
-     * Default sortable of columns which have no sortable specified (defaults to false)
-     * @type Boolean
-     */
-    this.defaultSortable = false;
-
-    this.addEvents({
-        /**
-            * @event widthchange
-            * Fires when the width of a column changes.
-            * @param {ColumnModel} this
-            * @param {Number} columnIndex The column index
-            * @param {Number} newWidth The new width
-            */
-           "widthchange": true,
-        /**
-            * @event headerchange
-            * Fires when the text of a header changes.
-            * @param {ColumnModel} this
-            * @param {Number} columnIndex The column index
-            * @param {Number} newText The new header text
-            */
-           "headerchange": true,
-        /**
-            * @event hiddenchange
-            * Fires when a column is hidden or "unhidden".
-            * @param {ColumnModel} this
-            * @param {Number} columnIndex The column index
-            * @param {Boolean} hidden true if hidden, false otherwise
-            */
-           "hiddenchange": true,
-           /**
-         * @event columnmoved
-         * Fires when a column is moved.
-         * @param {ColumnModel} this
-         * @param {Number} oldIndex
-         * @param {Number} newIndex
-         */
-        "columnmoved" : true,
-        /**
-         * @event columlockchange
-         * Fires when a column's locked state is changed
-         * @param {ColumnModel} this
-         * @param {Number} colIndex
-         * @param {Boolean} locked true if locked
-         */
-        "columnlockchange" : true
-    });
-    Roo.grid.ColumnModel.superclass.constructor.call(this);
-};
-Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
-    /**
-     * @cfg {String} header The header text to display in the Grid view.
-     */
-    /**
-     * @cfg {String} dataIndex (Optional) The name of the field in the grid's {@link Roo.data.Store}'s
-     * {@link Roo.data.Record} definition from which to draw the column's value. If not
-     * specified, the column's index is used as an index into the Record's data Array.
-     */
-    /**
-     * @cfg {Number} width (Optional) The initial width in pixels of the column. Using this
-     * instead of {@link Roo.grid.Grid#autoSizeColumns} is more efficient.
-     */
-    /**
-     * @cfg {Boolean} sortable (Optional) True if sorting is to be allowed on this column.
-     * Defaults to the value of the {@link #defaultSortable} property.
-     * Whether local/remote sorting is used is specified in {@link Roo.data.Store#remoteSort}.
-     */
-    /**
-     * @cfg {Boolean} locked (Optional) True to lock the column in place while scrolling the Grid.  Defaults to false.
-     */
-    /**
-     * @cfg {Boolean} fixed (Optional) True if the column width cannot be changed.  Defaults to false.
-     */
-    /**
-     * @cfg {Boolean} resizable (Optional) False to disable column resizing. Defaults to true.
-     */
-    /**
-     * @cfg {Boolean} hidden (Optional) True to hide the column. Defaults to false.
-     */
-    /**
-     * @cfg {Function} renderer (Optional) A function used to generate HTML markup for a cell
-     * given the cell's data value. See {@link #setRenderer}. If not specified, the
-     * default renderer uses the raw data value.
-     */
-       /**
-     * @cfg {Roo.grid.GridEditor} editor (Optional) For grid editors - returns the grid editor 
-     */
-    /**
-     * @cfg {String} align (Optional) Set the CSS text-align property of the column.  Defaults to undefined.
-     */
-
-    /**
-     * Returns the id of the column at the specified index.
-     * @param {Number} index The column index
-     * @return {String} the id
-     */
-    getColumnId : function(index){
-        return this.config[index].id;
-    },
-
-    /**
-     * Returns the column for a specified id.
-     * @param {String} id The column id
-     * @return {Object} the column
-     */
-    getColumnById : function(id){
-        return this.lookup[id];
-    },
-
-    
-    /**
-     * Returns the column for a specified dataIndex.
-     * @param {String} dataIndex The column dataIndex
-     * @return {Object|Boolean} the column or false if not found
-     */
-    getColumnByDataIndex: function(dataIndex){
-        var index = this.findColumnIndex(dataIndex);
-        return index > -1 ? this.config[index] : false;
-    },
-    
-    /**
-     * Returns the index for a specified column id.
-     * @param {String} id The column id
-     * @return {Number} the index, or -1 if not found
-     */
-    getIndexById : function(id){
-        for(var i = 0, len = this.config.length; i < len; i++){
-            if(this.config[i].id == id){
-                return i;
-            }
-        }
-        return -1;
-    },
-    
-    /**
-     * Returns the index for a specified column dataIndex.
-     * @param {String} dataIndex The column dataIndex
-     * @return {Number} the index, or -1 if not found
-     */
-    
-    findColumnIndex : function(dataIndex){
-        for(var i = 0, len = this.config.length; i < len; i++){
-            if(this.config[i].dataIndex == dataIndex){
-                return i;
-            }
-        }
-        return -1;
-    },
-    
-    
-    moveColumn : function(oldIndex, newIndex){
-        var c = this.config[oldIndex];
-        this.config.splice(oldIndex, 1);
-        this.config.splice(newIndex, 0, c);
-        this.dataMap = null;
-        this.fireEvent("columnmoved", this, oldIndex, newIndex);
-    },
-
-    isLocked : function(colIndex){
-        return this.config[colIndex].locked === true;
-    },
-
-    setLocked : function(colIndex, value, suppressEvent){
-        if(this.isLocked(colIndex) == value){
-            return;
-        }
-        this.config[colIndex].locked = value;
-        if(!suppressEvent){
-            this.fireEvent("columnlockchange", this, colIndex, value);
-        }
-    },
-
-    getTotalLockedWidth : function(){
-        var totalWidth = 0;
-        for(var i = 0; i < this.config.length; i++){
-            if(this.isLocked(i) && !this.isHidden(i)){
-                this.totalWidth += this.getColumnWidth(i);
-            }
-        }
-        return totalWidth;
-    },
-
-    getLockedCount : function(){
-        for(var i = 0, len = this.config.length; i < len; i++){
-            if(!this.isLocked(i)){
-                return i;
-            }
-        }
-    },
-
-    /**
-     * Returns the number of columns.
-     * @return {Number}
-     */
-    getColumnCount : function(visibleOnly){
-        if(visibleOnly === true){
-            var c = 0;
-            for(var i = 0, len = this.config.length; i < len; i++){
-                if(!this.isHidden(i)){
-                    c++;
-                }
-            }
-            return c;
-        }
-        return this.config.length;
-    },
-
-    /**
-     * Returns the column configs that return true by the passed function that is called with (columnConfig, index)
-     * @param {Function} fn
-     * @param {Object} scope (optional)
-     * @return {Array} result
-     */
-    getColumnsBy : function(fn, scope){
-        var r = [];
-        for(var i = 0, len = this.config.length; i < len; i++){
-            var c = this.config[i];
-            if(fn.call(scope||this, c, i) === true){
-                r[r.length] = c;
-            }
-        }
-        return r;
-    },
-
-    /**
-     * Returns true if the specified column is sortable.
-     * @param {Number} col The column index
-     * @return {Boolean}
-     */
-    isSortable : function(col){
-        if(typeof this.config[col].sortable == "undefined"){
-            return this.defaultSortable;
-        }
-        return this.config[col].sortable;
-    },
-
-    /**
-     * Returns the rendering (formatting) function defined for the column.
-     * @param {Number} col The column index.
-     * @return {Function} The function used to render the cell. See {@link #setRenderer}.
-     */
-    getRenderer : function(col){
-        if(!this.config[col].renderer){
-            return Roo.grid.ColumnModel.defaultRenderer;
-        }
-        return this.config[col].renderer;
-    },
-
-    /**
-     * Sets the rendering (formatting) function for a column.
-     * @param {Number} col The column index
-     * @param {Function} fn The function to use to process the cell's raw data
-     * to return HTML markup for the grid view. The render function is called with
-     * the following parameters:<ul>
-     * <li>Data value.</li>
-     * <li>Cell metadata. An object in which you may set the following attributes:<ul>
-     * <li>css A CSS style string to apply to the table cell.</li>
-     * <li>attr An HTML attribute definition string to apply to the data container element <i>within</i> the table cell.</li></ul>
-     * <li>The {@link Roo.data.Record} from which the data was extracted.</li>
-     * <li>Row index</li>
-     * <li>Column index</li>
-     * <li>The {@link Roo.data.Store} object from which the Record was extracted</li></ul>
-     */
-    setRenderer : function(col, fn){
-        this.config[col].renderer = fn;
-    },
-
-    /**
-     * Returns the width for the specified column.
-     * @param {Number} col The column index
-     * @return {Number}
-     */
-    getColumnWidth : function(col){
-        return this.config[col].width || this.defaultWidth;
-    },
-
-    /**
-     * Sets the width for a column.
-     * @param {Number} col The column index
-     * @param {Number} width The new width
-     */
-    setColumnWidth : function(col, width, suppressEvent){
-        this.config[col].width = width;
-        this.totalWidth = null;
-        if(!suppressEvent){
-             this.fireEvent("widthchange", this, col, width);
-        }
-    },
-
-    /**
-     * Returns the total width of all columns.
-     * @param {Boolean} includeHidden True to include hidden column widths
-     * @return {Number}
-     */
-    getTotalWidth : function(includeHidden){
-        if(!this.totalWidth){
-            this.totalWidth = 0;
-            for(var i = 0, len = this.config.length; i < len; i++){
-                if(includeHidden || !this.isHidden(i)){
-                    this.totalWidth += this.getColumnWidth(i);
-                }
-            }
-        }
-        return this.totalWidth;
-    },
-
-    /**
-     * Returns the header for the specified column.
-     * @param {Number} col The column index
-     * @return {String}
-     */
-    getColumnHeader : function(col){
-        return this.config[col].header;
-    },
-
-    /**
-     * Sets the header for a column.
-     * @param {Number} col The column index
-     * @param {String} header The new header
-     */
-    setColumnHeader : function(col, header){
-        this.config[col].header = header;
-        this.fireEvent("headerchange", this, col, header);
-    },
-
-    /**
-     * Returns the tooltip for the specified column.
-     * @param {Number} col The column index
-     * @return {String}
-     */
-    getColumnTooltip : function(col){
-            return this.config[col].tooltip;
-    },
-    /**
-     * Sets the tooltip for a column.
-     * @param {Number} col The column index
-     * @param {String} tooltip The new tooltip
-     */
-    setColumnTooltip : function(col, tooltip){
-            this.config[col].tooltip = tooltip;
-    },
-
-    /**
-     * Returns the dataIndex for the specified column.
-     * @param {Number} col The column index
-     * @return {Number}
-     */
-    getDataIndex : function(col){
-        return this.config[col].dataIndex;
-    },
-
-    /**
-     * Sets the dataIndex for a column.
-     * @param {Number} col The column index
-     * @param {Number} dataIndex The new dataIndex
-     */
-    setDataIndex : function(col, dataIndex){
-        this.config[col].dataIndex = dataIndex;
-    },
-
-    
-    
-    /**
-     * Returns true if the cell is editable.
-     * @param {Number} colIndex The column index
-     * @param {Number} rowIndex The row index
-     * @return {Boolean}
-     */
-    isCellEditable : function(colIndex, rowIndex){
-        return (this.config[colIndex].editable || (typeof this.config[colIndex].editable == "undefined" && this.config[colIndex].editor)) ? true : false;
-    },
-
-    /**
-     * Returns the editor defined for the cell/column.
-     * return false or null to disable editing.
-     * @param {Number} colIndex The column index
-     * @param {Number} rowIndex The row index
-     * @return {Object}
-     */
-    getCellEditor : function(colIndex, rowIndex){
-        return this.config[colIndex].editor;
-    },
-
-    /**
-     * Sets if a column is editable.
-     * @param {Number} col The column index
-     * @param {Boolean} editable True if the column is editable
-     */
-    setEditable : function(col, editable){
-        this.config[col].editable = editable;
-    },
-
-
-    /**
-     * Returns true if the column is hidden.
-     * @param {Number} colIndex The column index
-     * @return {Boolean}
-     */
-    isHidden : function(colIndex){
-        return this.config[colIndex].hidden;
-    },
-
-
-    /**
-     * Returns true if the column width cannot be changed
-     */
-    isFixed : function(colIndex){
-        return this.config[colIndex].fixed;
-    },
-
-    /**
-     * Returns true if the column can be resized
-     * @return {Boolean}
-     */
-    isResizable : function(colIndex){
-        return colIndex >= 0 && this.config[colIndex].resizable !== false && this.config[colIndex].fixed !== true;
-    },
-    /**
-     * Sets if a column is hidden.
-     * @param {Number} colIndex The column index
-     * @param {Boolean} hidden True if the column is hidden
-     */
-    setHidden : function(colIndex, hidden){
-        this.config[colIndex].hidden = hidden;
-        this.totalWidth = null;
-        this.fireEvent("hiddenchange", this, colIndex, hidden);
-    },
-
-    /**
-     * Sets the editor for a column.
-     * @param {Number} col The column index
-     * @param {Object} editor The editor object
-     */
-    setEditor : function(col, editor){
-        this.config[col].editor = editor;
-    }
-});
-
-Roo.grid.ColumnModel.defaultRenderer = function(value){
-       if(typeof value == "string" && value.length < 1){
-           return "&#160;";
-       }
-       return value;
-};
-
-// Alias for backwards compatibility
-Roo.grid.DefaultColumnModel = Roo.grid.ColumnModel;
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.grid.AbstractSelectionModel
- * @extends Roo.util.Observable
- * Abstract base class for grid SelectionModels.  It provides the interface that should be
- * implemented by descendant classes.  This class should not be directly instantiated.
- * @constructor
- */
-Roo.grid.AbstractSelectionModel = function(){
-    this.locked = false;
-    Roo.grid.AbstractSelectionModel.superclass.constructor.call(this);
-};
-
-Roo.extend(Roo.grid.AbstractSelectionModel, Roo.util.Observable,  {
-    /** @ignore Called by the grid automatically. Do not call directly. */
-    init : function(grid){
-        this.grid = grid;
-        this.initEvents();
-    },
-
-    /**
-     * Locks the selections.
-     */
-    lock : function(){
-        this.locked = true;
-    },
-
-    /**
-     * Unlocks the selections.
-     */
-    unlock : function(){
-        this.locked = false;
-    },
-
-    /**
-     * Returns true if the selections are locked.
-     * @return {Boolean}
-     */
-    isLocked : function(){
-        return this.locked;
-    }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-/**
- * @extends Roo.grid.AbstractSelectionModel
- * @class Roo.grid.RowSelectionModel
- * The default SelectionModel used by {@link Roo.grid.Grid}.
- * It supports multiple selections and keyboard selection/navigation. 
- * @constructor
- * @param {Object} config
- */
-Roo.grid.RowSelectionModel = function(config){
-    Roo.apply(this, config);
-    this.selections = new Roo.util.MixedCollection(false, function(o){
-        return o.id;
-    });
-
-    this.last = false;
-    this.lastActive = false;
-
-    this.addEvents({
-        /**
-            * @event selectionchange
-            * Fires when the selection changes
-            * @param {SelectionModel} this
-            */
-           "selectionchange" : true,
-        /**
-            * @event afterselectionchange
-            * Fires after the selection changes (eg. by key press or clicking)
-            * @param {SelectionModel} this
-            */
-           "afterselectionchange" : true,
-        /**
-            * @event beforerowselect
-            * Fires when a row is selected being selected, return false to cancel.
-            * @param {SelectionModel} this
-            * @param {Number} rowIndex The selected index
-            * @param {Boolean} keepExisting False if other selections will be cleared
-            */
-           "beforerowselect" : true,
-        /**
-            * @event rowselect
-            * Fires when a row is selected.
-            * @param {SelectionModel} this
-            * @param {Number} rowIndex The selected index
-            * @param {Roo.data.Record} r The record
-            */
-           "rowselect" : true,
-        /**
-            * @event rowdeselect
-            * Fires when a row is deselected.
-            * @param {SelectionModel} this
-            * @param {Number} rowIndex The selected index
-            */
-        "rowdeselect" : true
-    });
-    Roo.grid.RowSelectionModel.superclass.constructor.call(this);
-    this.locked = false;
-};
-
-Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
-    /**
-     * @cfg {Boolean} singleSelect
-     * True to allow selection of only one row at a time (defaults to false)
-     */
-    singleSelect : false,
-
-    // private
-    initEvents : function(){
-
-        if(!this.grid.enableDragDrop && !this.grid.enableDrag){
-            this.grid.on("mousedown", this.handleMouseDown, this);
-        }else{ // allow click to work like normal
-            this.grid.on("rowclick", this.handleDragableRowClick, this);
-        }
-
-        this.rowNav = new Roo.KeyNav(this.grid.getGridEl(), {
-            "up" : function(e){
-                if(!e.shiftKey){
-                    this.selectPrevious(e.shiftKey);
-                }else if(this.last !== false && this.lastActive !== false){
-                    var last = this.last;
-                    this.selectRange(this.last,  this.lastActive-1);
-                    this.grid.getView().focusRow(this.lastActive);
-                    if(last !== false){
-                        this.last = last;
-                    }
-                }else{
-                    this.selectFirstRow();
-                }
-                this.fireEvent("afterselectionchange", this);
-            },
-            "down" : function(e){
-                if(!e.shiftKey){
-                    this.selectNext(e.shiftKey);
-                }else if(this.last !== false && this.lastActive !== false){
-                    var last = this.last;
-                    this.selectRange(this.last,  this.lastActive+1);
-                    this.grid.getView().focusRow(this.lastActive);
-                    if(last !== false){
-                        this.last = last;
-                    }
-                }else{
-                    this.selectFirstRow();
-                }
-                this.fireEvent("afterselectionchange", this);
-            },
-            scope: this
-        });
-
-        var view = this.grid.view;
-        view.on("refresh", this.onRefresh, this);
-        view.on("rowupdated", this.onRowUpdated, this);
-        view.on("rowremoved", this.onRemove, this);
-    },
-
-    // private
-    onRefresh : function(){
-        var ds = this.grid.dataSource, i, v = this.grid.view;
-        var s = this.selections;
-        s.each(function(r){
-            if((i = ds.indexOfId(r.id)) != -1){
-                v.onRowSelect(i);
-            }else{
-                s.remove(r);
-            }
-        });
-    },
-
-    // private
-    onRemove : function(v, index, r){
-        this.selections.remove(r);
-    },
-
-    // private
-    onRowUpdated : function(v, index, r){
-        if(this.isSelected(r)){
-            v.onRowSelect(index);
-        }
-    },
-
-    /**
-     * Select records.
-     * @param {Array} records The records to select
-     * @param {Boolean} keepExisting (optional) True to keep existing selections
-     */
-    selectRecords : function(records, keepExisting){
-        if(!keepExisting){
-            this.clearSelections();
-        }
-        var ds = this.grid.dataSource;
-        for(var i = 0, len = records.length; i < len; i++){
-            this.selectRow(ds.indexOf(records[i]), true);
-        }
-    },
-
-    /**
-     * Gets the number of selected rows.
-     * @return {Number}
-     */
-    getCount : function(){
-        return this.selections.length;
-    },
-
-    /**
-     * Selects the first row in the grid.
-     */
-    selectFirstRow : function(){
-        this.selectRow(0);
-    },
-
-    /**
-     * Select the last row.
-     * @param {Boolean} keepExisting (optional) True to keep existing selections
-     */
-    selectLastRow : function(keepExisting){
-        this.selectRow(this.grid.dataSource.getCount() - 1, keepExisting);
-    },
-
-    /**
-     * Selects the row immediately following the last selected row.
-     * @param {Boolean} keepExisting (optional) True to keep existing selections
-     */
-    selectNext : function(keepExisting){
-        if(this.last !== false && (this.last+1) < this.grid.dataSource.getCount()){
-            this.selectRow(this.last+1, keepExisting);
-            this.grid.getView().focusRow(this.last);
-        }
-    },
-
-    /**
-     * Selects the row that precedes the last selected row.
-     * @param {Boolean} keepExisting (optional) True to keep existing selections
-     */
-    selectPrevious : function(keepExisting){
-        if(this.last){
-            this.selectRow(this.last-1, keepExisting);
-            this.grid.getView().focusRow(this.last);
-        }
-    },
-
-    /**
-     * Returns the selected records
-     * @return {Array} Array of selected records
-     */
-    getSelections : function(){
-        return [].concat(this.selections.items);
-    },
-
-    /**
-     * Returns the first selected record.
-     * @return {Record}
-     */
-    getSelected : function(){
-        return this.selections.itemAt(0);
-    },
-
-
-    /**
-     * Clears all selections.
-     */
-    clearSelections : function(fast){
-        if(this.locked) return;
-        if(fast !== true){
-            var ds = this.grid.dataSource;
-            var s = this.selections;
-            s.each(function(r){
-                this.deselectRow(ds.indexOfId(r.id));
-            }, this);
-            s.clear();
-        }else{
-            this.selections.clear();
-        }
-        this.last = false;
-    },
-
-
-    /**
-     * Selects all rows.
-     */
-    selectAll : function(){
-        if(this.locked) return;
-        this.selections.clear();
-        for(var i = 0, len = this.grid.dataSource.getCount(); i < len; i++){
-            this.selectRow(i, true);
-        }
-    },
-
-    /**
-     * Returns True if there is a selection.
-     * @return {Boolean}
-     */
-    hasSelection : function(){
-        return this.selections.length > 0;
-    },
-
-    /**
-     * Returns True if the specified row is selected.
-     * @param {Number/Record} record The record or index of the record to check
-     * @return {Boolean}
-     */
-    isSelected : function(index){
-        var r = typeof index == "number" ? this.grid.dataSource.getAt(index) : index;
-        return (r && this.selections.key(r.id) ? true : false);
-    },
-
-    /**
-     * Returns True if the specified record id is selected.
-     * @param {String} id The id of record to check
-     * @return {Boolean}
-     */
-    isIdSelected : function(id){
-        return (this.selections.key(id) ? true : false);
-    },
-
-    // private
-    handleMouseDown : function(e, t){
-        var view = this.grid.getView(), rowIndex;
-        if(this.isLocked() || (rowIndex = view.findRowIndex(t)) === false){
-            return;
-        };
-        if(e.shiftKey && this.last !== false){
-            var last = this.last;
-            this.selectRange(last, rowIndex, e.ctrlKey);
-            this.last = last; // reset the last
-            view.focusRow(rowIndex);
-        }else{
-            var isSelected = this.isSelected(rowIndex);
-            if(e.button !== 0 && isSelected){
-                view.focusRow(rowIndex);
-            }else if(e.ctrlKey && isSelected){
-                this.deselectRow(rowIndex);
-            }else if(!isSelected){
-                this.selectRow(rowIndex, e.button === 0 && (e.ctrlKey || e.shiftKey));
-                view.focusRow(rowIndex);
-            }
-        }
-        this.fireEvent("afterselectionchange", this);
-    },
-    // private
-    handleDragableRowClick :  function(grid, rowIndex, e) 
-    {
-        if(e.button === 0 && !e.shiftKey && !e.ctrlKey) {
-            this.selectRow(rowIndex, false);
-            grid.view.focusRow(rowIndex);
-             this.fireEvent("afterselectionchange", this);
-        }
-    },
-    
-    /**
-     * Selects multiple rows.
-     * @param {Array} rows Array of the indexes of the row to select
-     * @param {Boolean} keepExisting (optional) True to keep existing selections
-     */
-    selectRows : function(rows, keepExisting){
-        if(!keepExisting){
-            this.clearSelections();
-        }
-        for(var i = 0, len = rows.length; i < len; i++){
-            this.selectRow(rows[i], true);
-        }
-    },
-
-    /**
-     * Selects a range of rows. All rows in between startRow and endRow are also selected.
-     * @param {Number} startRow The index of the first row in the range
-     * @param {Number} endRow The index of the last row in the range
-     * @param {Boolean} keepExisting (optional) True to retain existing selections
-     */
-    selectRange : function(startRow, endRow, keepExisting){
-        if(this.locked) return;
-        if(!keepExisting){
-            this.clearSelections();
-        }
-        if(startRow <= endRow){
-            for(var i = startRow; i <= endRow; i++){
-                this.selectRow(i, true);
-            }
-        }else{
-            for(var i = startRow; i >= endRow; i--){
-                this.selectRow(i, true);
-            }
-        }
-    },
-
-    /**
-     * Deselects a range of rows. All rows in between startRow and endRow are also deselected.
-     * @param {Number} startRow The index of the first row in the range
-     * @param {Number} endRow The index of the last row in the range
-     */
-    deselectRange : function(startRow, endRow, preventViewNotify){
-        if(this.locked) return;
-        for(var i = startRow; i <= endRow; i++){
-            this.deselectRow(i, preventViewNotify);
-        }
-    },
-
-    /**
-     * Selects a row.
-     * @param {Number} row The index of the row to select
-     * @param {Boolean} keepExisting (optional) True to keep existing selections
-     */
-    selectRow : function(index, keepExisting, preventViewNotify){
-        if(this.locked || (index < 0 || index >= this.grid.dataSource.getCount())) return;
-        if(this.fireEvent("beforerowselect", this, index, keepExisting) !== false){
-            if(!keepExisting || this.singleSelect){
-                this.clearSelections();
-            }
-            var r = this.grid.dataSource.getAt(index);
-            this.selections.add(r);
-            this.last = this.lastActive = index;
-            if(!preventViewNotify){
-                this.grid.getView().onRowSelect(index);
-            }
-            this.fireEvent("rowselect", this, index, r);
-            this.fireEvent("selectionchange", this);
-        }
-    },
-
-    /**
-     * Deselects a row.
-     * @param {Number} row The index of the row to deselect
-     */
-    deselectRow : function(index, preventViewNotify){
-        if(this.locked) return;
-        if(this.last == index){
-            this.last = false;
-        }
-        if(this.lastActive == index){
-            this.lastActive = false;
-        }
-        var r = this.grid.dataSource.getAt(index);
-        this.selections.remove(r);
-        if(!preventViewNotify){
-            this.grid.getView().onRowDeselect(index);
-        }
-        this.fireEvent("rowdeselect", this, index);
-        this.fireEvent("selectionchange", this);
-    },
-
-    // private
-    restoreLast : function(){
-        if(this._last){
-            this.last = this._last;
-        }
-    },
-
-    // private
-    acceptsNav : function(row, col, cm){
-        return !cm.isHidden(col) && cm.isCellEditable(col, row);
-    },
-
-    // private
-    onEditorKey : function(field, e){
-        var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
-        if(k == e.TAB){
-            e.stopEvent();
-            ed.completeEdit();
-            if(e.shiftKey){
-                newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
-            }else{
-                newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
-            }
-        }else if(k == e.ENTER && !e.ctrlKey){
-            e.stopEvent();
-            ed.completeEdit();
-            if(e.shiftKey){
-                newCell = g.walkCells(ed.row-1, ed.col, -1, this.acceptsNav, this);
-            }else{
-                newCell = g.walkCells(ed.row+1, ed.col, 1, this.acceptsNav, this);
-            }
-        }else if(k == e.ESC){
-            ed.cancelEdit();
-        }
-        if(newCell){
-            g.startEditing(newCell[0], newCell[1]);
-        }
-    }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-/**
- * @class Roo.grid.CellSelectionModel
- * @extends Roo.grid.AbstractSelectionModel
- * This class provides the basic implementation for cell selection in a grid.
- * @constructor
- * @param {Object} config The object containing the configuration of this model.
- */
-Roo.grid.CellSelectionModel = function(config){
-    Roo.apply(this, config);
-
-    this.selection = null;
-
-    this.addEvents({
-        /**
-            * @event beforerowselect
-            * Fires before a cell is selected.
-            * @param {SelectionModel} this
-            * @param {Number} rowIndex The selected row index
-            * @param {Number} colIndex The selected cell index
-            */
-           "beforecellselect" : true,
-        /**
-            * @event cellselect
-            * Fires when a cell is selected.
-            * @param {SelectionModel} this
-            * @param {Number} rowIndex The selected row index
-            * @param {Number} colIndex The selected cell index
-            */
-           "cellselect" : true,
-        /**
-            * @event selectionchange
-            * Fires when the active selection changes.
-            * @param {SelectionModel} this
-            * @param {Object} selection null for no selection or an object (o) with two properties
-               <ul>
-               <li>o.record: the record object for the row the selection is in</li>
-               <li>o.cell: An array of [rowIndex, columnIndex]</li>
-               </ul>
-            */
-           "selectionchange" : true
-    });
-    Roo.grid.CellSelectionModel.superclass.constructor.call(this);
-};
-
-Roo.extend(Roo.grid.CellSelectionModel, Roo.grid.AbstractSelectionModel,  {
-
-    /** @ignore */
-    initEvents : function(){
-        this.grid.on("mousedown", this.handleMouseDown, this);
-        this.grid.getGridEl().on(Roo.isIE ? "keydown" : "keypress", this.handleKeyDown, this);
-        var view = this.grid.view;
-        view.on("refresh", this.onViewChange, this);
-        view.on("rowupdated", this.onRowUpdated, this);
-        view.on("beforerowremoved", this.clearSelections, this);
-        view.on("beforerowsinserted", this.clearSelections, this);
-        if(this.grid.isEditor){
-            this.grid.on("beforeedit", this.beforeEdit,  this);
-        }
-    },
-
-       //private
-    beforeEdit : function(e){
-        this.select(e.row, e.column, false, true, e.record);
-    },
-
-       //private
-    onRowUpdated : function(v, index, r){
-        if(this.selection && this.selection.record == r){
-            v.onCellSelect(index, this.selection.cell[1]);
-        }
-    },
-
-       //private
-    onViewChange : function(){
-        this.clearSelections(true);
-    },
-
-       /**
-        * Returns the currently selected cell,.
-        * @return {Array} The selected cell (row, column) or null if none selected.
-        */
-    getSelectedCell : function(){
-        return this.selection ? this.selection.cell : null;
-    },
-
-    /**
-     * Clears all selections.
-     * @param {Boolean} true to prevent the gridview from being notified about the change.
-     */
-    clearSelections : function(preventNotify){
-        var s = this.selection;
-        if(s){
-            if(preventNotify !== true){
-                this.grid.view.onCellDeselect(s.cell[0], s.cell[1]);
-            }
-            this.selection = null;
-            this.fireEvent("selectionchange", this, null);
-        }
-    },
-
-    /**
-     * Returns true if there is a selection.
-     * @return {Boolean}
-     */
-    hasSelection : function(){
-        return this.selection ? true : false;
-    },
-
-    /** @ignore */
-    handleMouseDown : function(e, t){
-        var v = this.grid.getView();
-        if(this.isLocked()){
-            return;
-        };
-        var row = v.findRowIndex(t);
-        var cell = v.findCellIndex(t);
-        if(row !== false && cell !== false){
-            this.select(row, cell);
-        }
-    },
-
-    /**
-     * Selects a cell.
-     * @param {Number} rowIndex
-     * @param {Number} collIndex
-     */
-    select : function(rowIndex, colIndex, preventViewNotify, preventFocus, /*internal*/ r){
-        if(this.fireEvent("beforecellselect", this, rowIndex, colIndex) !== false){
-            this.clearSelections();
-            r = r || this.grid.dataSource.getAt(rowIndex);
-            this.selection = {
-                record : r,
-                cell : [rowIndex, colIndex]
-            };
-            if(!preventViewNotify){
-                var v = this.grid.getView();
-                v.onCellSelect(rowIndex, colIndex);
-                if(preventFocus !== true){
-                    v.focusCell(rowIndex, colIndex);
-                }
-            }
-            this.fireEvent("cellselect", this, rowIndex, colIndex);
-            this.fireEvent("selectionchange", this, this.selection);
-        }
-    },
-
-       //private
-    isSelectable : function(rowIndex, colIndex, cm){
-        return !cm.isHidden(colIndex);
-    },
-
-    /** @ignore */
-    handleKeyDown : function(e){
-        Roo.log('Cell Sel Model handleKeyDown');
-        if(!e.isNavKeyPress()){
-            return;
-        }
-        var g = this.grid, s = this.selection;
-        if(!s){
-            e.stopEvent();
-            var cell = g.walkCells(0, 0, 1, this.isSelectable,  this);
-            if(cell){
-                this.select(cell[0], cell[1]);
-            }
-            return;
-        }
-        var sm = this;
-        var walk = function(row, col, step){
-            return g.walkCells(row, col, step, sm.isSelectable,  sm);
-        };
-        var k = e.getKey(), r = s.cell[0], c = s.cell[1];
-        var newCell;
-
-        switch(k){
-            case e.TAB:
-                // handled by onEditorKey
-                if (g.isEditor && g.editing) {
-                    return;
-                }
-                if(e.shiftKey){
-                     newCell = walk(r, c-1, -1);
-                }else{
-                     newCell = walk(r, c+1, 1);
-                }
-             break;
-             case e.DOWN:
-                 newCell = walk(r+1, c, 1);
-             break;
-             case e.UP:
-                 newCell = walk(r-1, c, -1);
-             break;
-             case e.RIGHT:
-                 newCell = walk(r, c+1, 1);
-             break;
-             case e.LEFT:
-                 newCell = walk(r, c-1, -1);
-             break;
-             case e.ENTER:
-                 if(g.isEditor && !g.editing){
-                    g.startEditing(r, c);
-                    e.stopEvent();
-                    return;
-                }
-             break;
-        };
-        if(newCell){
-            this.select(newCell[0], newCell[1]);
-            e.stopEvent();
-        }
-    },
-
-    acceptsNav : function(row, col, cm){
-        return !cm.isHidden(col) && cm.isCellEditable(col, row);
-    },
-
-    onEditorKey : function(field, e){
-        
-        var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
-        ///Roo.log('onEditorKey' + k);
-        
-        if(k == e.TAB){
-            if(e.shiftKey){
-                newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
-            }else{
-                newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
-            }
-            e.stopEvent();
-        }else if(k == e.ENTER && !e.ctrlKey){
-            ed.completeEdit();
-            e.stopEvent();
-            newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
-        }else if(k == e.ESC){
-            ed.cancelEdit();
-        }
-        
-        
-        if(newCell){
-            //Roo.log('next cell after edit');
-            g.startEditing.defer(100, g, [newCell[0], newCell[1]]);
-        }
-    }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-/**
- * @class Roo.grid.EditorGrid
- * @extends Roo.grid.Grid
- * Class for creating and editable grid.
- * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered - 
- * The container MUST have some type of size defined for the grid to fill. The container will be 
- * automatically set to position relative if it isn't already.
- * @param {Object} dataSource The data model to bind to
- * @param {Object} colModel The column model with info about this grid's columns
- */
-Roo.grid.EditorGrid = function(container, config){
-    Roo.grid.EditorGrid.superclass.constructor.call(this, container, config);
-    this.getGridEl().addClass("xedit-grid");
-
-    if(!this.selModel){
-        this.selModel = new Roo.grid.CellSelectionModel();
-    }
-
-    this.activeEditor = null;
-
-       this.addEvents({
-           /**
-            * @event beforeedit
-            * Fires before cell editing is triggered. The edit event object has the following properties <br />
-            * <ul style="padding:5px;padding-left:16px;">
-            * <li>grid - This grid</li>
-            * <li>record - The record being edited</li>
-            * <li>field - The field name being edited</li>
-            * <li>value - The value for the field being edited.</li>
-            * <li>row - The grid row index</li>
-            * <li>column - The grid column index</li>
-            * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
-            * </ul>
-            * @param {Object} e An edit event (see above for description)
-            */
-           "beforeedit" : true,
-           /**
-            * @event afteredit
-            * Fires after a cell is edited. <br />
-            * <ul style="padding:5px;padding-left:16px;">
-            * <li>grid - This grid</li>
-            * <li>record - The record being edited</li>
-            * <li>field - The field name being edited</li>
-            * <li>value - The value being set</li>
-            * <li>originalValue - The original value for the field, before the edit.</li>
-            * <li>row - The grid row index</li>
-            * <li>column - The grid column index</li>
-            * </ul>
-            * @param {Object} e An edit event (see above for description)
-            */
-           "afteredit" : true,
-           /**
-            * @event validateedit
-            * Fires after a cell is edited, but before the value is set in the record. 
-         * You can use this to modify the value being set in the field, Return false
-            * to cancel the change. The edit event object has the following properties <br />
-            * <ul style="padding:5px;padding-left:16px;">
-         * <li>editor - This editor</li>
-            * <li>grid - This grid</li>
-            * <li>record - The record being edited</li>
-            * <li>field - The field name being edited</li>
-            * <li>value - The value being set</li>
-            * <li>originalValue - The original value for the field, before the edit.</li>
-            * <li>row - The grid row index</li>
-            * <li>column - The grid column index</li>
-            * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
-            * </ul>
-            * @param {Object} e An edit event (see above for description)
-            */
-           "validateedit" : true
-       });
-    this.on("bodyscroll", this.stopEditing,  this);
-    this.on(this.clicksToEdit == 1 ? "cellclick" : "celldblclick", this.onCellDblClick,  this);
-};
-
-Roo.extend(Roo.grid.EditorGrid, Roo.grid.Grid, {
-    /**
-     * @cfg {Number} clicksToEdit
-     * The number of clicks on a cell required to display the cell's editor (defaults to 2)
-     */
-    clicksToEdit: 2,
-
-    // private
-    isEditor : true,
-    // private
-    trackMouseOver: false, // causes very odd FF errors
-
-    onCellDblClick : function(g, row, col){
-        this.startEditing(row, col);
-    },
-
-    onEditComplete : function(ed, value, startValue){
-        this.editing = false;
-        this.activeEditor = null;
-        ed.un("specialkey", this.selModel.onEditorKey, this.selModel);
-        var r = ed.record;
-        var field = this.colModel.getDataIndex(ed.col);
-        var e = {
-            grid: this,
-            record: r,
-            field: field,
-            originalValue: startValue,
-            value: value,
-            row: ed.row,
-            column: ed.col,
-            cancel:false,
-            editor: ed
-        };
-        if(String(value) !== String(startValue)){
-            
-            if(this.fireEvent("validateedit", e) !== false && !e.cancel){
-                r.set(field, e.value);
-                delete e.cancel; //?? why!!!
-                this.fireEvent("afteredit", e);
-            }
-        } else {
-            this.fireEvent("afteredit", e); // always fir it!
-        }
-        this.view.focusCell(ed.row, ed.col);
-    },
-
-    /**
-     * Starts editing the specified for the specified row/column
-     * @param {Number} rowIndex
-     * @param {Number} colIndex
-     */
-    startEditing : function(row, col){
-        this.stopEditing();
-        if(this.colModel.isCellEditable(col, row)){
-            this.view.ensureVisible(row, col, true);
-            var r = this.dataSource.getAt(row);
-            var field = this.colModel.getDataIndex(col);
-            var e = {
-                grid: this,
-                record: r,
-                field: field,
-                value: r.data[field],
-                row: row,
-                column: col,
-                cancel:false
-            };
-            if(this.fireEvent("beforeedit", e) !== false && !e.cancel){
-                this.editing = true;
-                var ed = this.colModel.getCellEditor(col, row);
-                
-                if (!ed) {
-                    return;
-                }
-                if(!ed.rendered){
-                    ed.render(ed.parentEl || document.body);
-                }
-                ed.field.reset();
-                (function(){ // complex but required for focus issues in safari, ie and opera
-                    ed.row = row;
-                    ed.col = col;
-                    ed.record = r;
-                    ed.on("complete", this.onEditComplete, this, {single: true});
-                    ed.on("specialkey", this.selModel.onEditorKey, this.selModel);
-                    this.activeEditor = ed;
-                    var v = r.data[field];
-                    ed.startEdit(this.view.getCell(row, col), v);
-                }).defer(50, this);
-            }
-        }
-    },
-        
-    /**
-     * Stops any active editing
-     */
-    stopEditing : function(){
-        if(this.activeEditor){
-            this.activeEditor.completeEdit();
-        }
-        this.activeEditor = null;
-    }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-// private - not really -- you end up using it !
-// This is a support class used internally by the Grid components
-
-/**
- * @class Roo.grid.GridEditor
- * @extends Roo.Editor
- * Class for creating and editable grid elements.
- * @param {Object} config any settings (must include field)
- */
-Roo.grid.GridEditor = function(field, config){
-    if (!config && field.field) {
-        config = field;
-        field = Roo.factory(config.field, Roo.form);
-    }
-    Roo.grid.GridEditor.superclass.constructor.call(this, field, config);
-    field.monitorTab = false;
-};
-
-Roo.extend(Roo.grid.GridEditor, Roo.Editor, {
-    
-    /**
-     * @cfg {Roo.form.Field} field Field to wrap (or xtyped)
-     */
-    
-    alignment: "tl-tl",
-    autoSize: "width",
-    hideEl : false,
-    cls: "x-small-editor x-grid-editor",
-    shim:false,
-    shadow:"frame"
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-  
-
-  
-Roo.grid.PropertyRecord = Roo.data.Record.create([
-    {name:'name',type:'string'},  'value'
-]);
-
-
-Roo.grid.PropertyStore = function(grid, source){
-    this.grid = grid;
-    this.store = new Roo.data.Store({
-        recordType : Roo.grid.PropertyRecord
-    });
-    this.store.on('update', this.onUpdate,  this);
-    if(source){
-        this.setSource(source);
-    }
-    Roo.grid.PropertyStore.superclass.constructor.call(this);
-};
-
-
-
-Roo.extend(Roo.grid.PropertyStore, Roo.util.Observable, {
-    setSource : function(o){
-        this.source = o;
-        this.store.removeAll();
-        var data = [];
-        for(var k in o){
-            if(this.isEditableValue(o[k])){
-                data.push(new Roo.grid.PropertyRecord({name: k, value: o[k]}, k));
-            }
-        }
-        this.store.loadRecords({records: data}, {}, true);
-    },
-
-    onUpdate : function(ds, record, type){
-        if(type == Roo.data.Record.EDIT){
-            var v = record.data['value'];
-            var oldValue = record.modified['value'];
-            if(this.grid.fireEvent('beforepropertychange', this.source, record.id, v, oldValue) !== false){
-                this.source[record.id] = v;
-                record.commit();
-                this.grid.fireEvent('propertychange', this.source, record.id, v, oldValue);
-            }else{
-                record.reject();
-            }
-        }
-    },
-
-    getProperty : function(row){
-       return this.store.getAt(row);
-    },
-
-    isEditableValue: function(val){
-        if(val && val instanceof Date){
-            return true;
-        }else if(typeof val == 'object' || typeof val == 'function'){
-            return false;
-        }
-        return true;
-    },
-
-    setValue : function(prop, value){
-        this.source[prop] = value;
-        this.store.getById(prop).set('value', value);
-    },
-
-    getSource : function(){
-        return this.source;
-    }
-});
-
-Roo.grid.PropertyColumnModel = function(grid, store){
-    this.grid = grid;
-    var g = Roo.grid;
-    g.PropertyColumnModel.superclass.constructor.call(this, [
-        {header: this.nameText, sortable: true, dataIndex:'name', id: 'name'},
-        {header: this.valueText, resizable:false, dataIndex: 'value', id: 'value'}
-    ]);
-    this.store = store;
-    this.bselect = Roo.DomHelper.append(document.body, {
-        tag: 'select', style:'display:none', cls: 'x-grid-editor', children: [
-            {tag: 'option', value: 'true', html: 'true'},
-            {tag: 'option', value: 'false', html: 'false'}
-        ]
-    });
-    Roo.id(this.bselect);
-    var f = Roo.form;
-    this.editors = {
-        'date' : new g.GridEditor(new f.DateField({selectOnFocus:true})),
-        'string' : new g.GridEditor(new f.TextField({selectOnFocus:true})),
-        'number' : new g.GridEditor(new f.NumberField({selectOnFocus:true, style:'text-align:left;'})),
-        'int' : new g.GridEditor(new f.NumberField({selectOnFocus:true, allowDecimals:false, style:'text-align:left;'})),
-        'boolean' : new g.GridEditor(new f.Field({el:this.bselect,selectOnFocus:true}))
-    };
-    this.renderCellDelegate = this.renderCell.createDelegate(this);
-    this.renderPropDelegate = this.renderProp.createDelegate(this);
-};
-
-Roo.extend(Roo.grid.PropertyColumnModel, Roo.grid.ColumnModel, {
-    
-    
-    nameText : 'Name',
-    valueText : 'Value',
-    
-    dateFormat : 'm/j/Y',
-    
-    
-    renderDate : function(dateVal){
-        return dateVal.dateFormat(this.dateFormat);
-    },
-
-    renderBool : function(bVal){
-        return bVal ? 'true' : 'false';
-    },
-
-    isCellEditable : function(colIndex, rowIndex){
-        return colIndex == 1;
-    },
-
-    getRenderer : function(col){
-        return col == 1 ?
-            this.renderCellDelegate : this.renderPropDelegate;
-    },
-
-    renderProp : function(v){
-        return this.getPropertyName(v);
-    },
-
-    renderCell : function(val){
-        var rv = val;
-        if(val instanceof Date){
-            rv = this.renderDate(val);
-        }else if(typeof val == 'boolean'){
-            rv = this.renderBool(val);
-        }
-        return Roo.util.Format.htmlEncode(rv);
-    },
-
-    getPropertyName : function(name){
-        var pn = this.grid.propertyNames;
-        return pn && pn[name] ? pn[name] : name;
-    },
-
-    getCellEditor : function(colIndex, rowIndex){
-        var p = this.store.getProperty(rowIndex);
-        var n = p.data['name'], val = p.data['value'];
-        
-        if(typeof(this.grid.customEditors[n]) == 'string'){
-            return this.editors[this.grid.customEditors[n]];
-        }
-        if(typeof(this.grid.customEditors[n]) != 'undefined'){
-            return this.grid.customEditors[n];
-        }
-        if(val instanceof Date){
-            return this.editors['date'];
-        }else if(typeof val == 'number'){
-            return this.editors['number'];
-        }else if(typeof val == 'boolean'){
-            return this.editors['boolean'];
-        }else{
-            return this.editors['string'];
-        }
-    }
-});
-
-/**
- * @class Roo.grid.PropertyGrid
- * @extends Roo.grid.EditorGrid
- * This class represents the  interface of a component based property grid control.
- * <br><br>Usage:<pre><code>
- var grid = new Roo.grid.PropertyGrid("my-container-id", {
-      
- });
- // set any options
- grid.render();
- * </code></pre>
-  
- * @constructor
- * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
- * The container MUST have some type of size defined for the grid to fill. The container will be
- * automatically set to position relative if it isn't already.
- * @param {Object} config A config object that sets properties on this grid.
- */
-Roo.grid.PropertyGrid = function(container, config){
-    config = config || {};
-    var store = new Roo.grid.PropertyStore(this);
-    this.store = store;
-    var cm = new Roo.grid.PropertyColumnModel(this, store);
-    store.store.sort('name', 'ASC');
-    Roo.grid.PropertyGrid.superclass.constructor.call(this, container, Roo.apply({
-        ds: store.store,
-        cm: cm,
-        enableColLock:false,
-        enableColumnMove:false,
-        stripeRows:false,
-        trackMouseOver: false,
-        clicksToEdit:1
-    }, config));
-    this.getGridEl().addClass('x-props-grid');
-    this.lastEditRow = null;
-    this.on('columnresize', this.onColumnResize, this);
-    this.addEvents({
-         /**
-            * @event beforepropertychange
-            * Fires before a property changes (return false to stop?)
-            * @param {Roo.grid.PropertyGrid} grid property grid? (check could be store)
-            * @param {String} id Record Id
-            * @param {String} newval New Value
-         * @param {String} oldval Old Value
-            */
-        "beforepropertychange": true,
-        /**
-            * @event propertychange
-            * Fires after a property changes
-            * @param {Roo.grid.PropertyGrid} grid property grid? (check could be store)
-            * @param {String} id Record Id
-            * @param {String} newval New Value
-         * @param {String} oldval Old Value
-            */
-        "propertychange": true
-    });
-    this.customEditors = this.customEditors || {};
-};
-Roo.extend(Roo.grid.PropertyGrid, Roo.grid.EditorGrid, {
-    
-     /**
-     * @cfg {Object} customEditors map of colnames=> custom editors.
-     * the custom editor can be one of the standard ones (date|string|number|int|boolean), or a
-     * grid editor eg. Roo.grid.GridEditor(new Roo.form.TextArea({selectOnFocus:true})),
-     * false disables editing of the field.
-        */
-    
-      /**
-     * @cfg {Object} propertyNames map of property Names to their displayed value
-        */
-    
-    render : function(){
-        Roo.grid.PropertyGrid.superclass.render.call(this);
-        this.autoSize.defer(100, this);
-    },
-
-    autoSize : function(){
-        Roo.grid.PropertyGrid.superclass.autoSize.call(this);
-        if(this.view){
-            this.view.fitColumns();
-        }
-    },
-
-    onColumnResize : function(){
-        this.colModel.setColumnWidth(1, this.container.getWidth(true)-this.colModel.getColumnWidth(0));
-        this.autoSize();
-    },
-    /**
-     * Sets the data for the Grid
-     * accepts a Key => Value object of all the elements avaiable.
-     * @param {Object} data  to appear in grid.
-     */
-    setSource : function(source){
-        this.store.setSource(source);
-        //this.autoSize();
-    },
-    /**
-     * Gets all the data from the grid.
-     * @return {Object} data  data stored in grid
-     */
-    getSource : function(){
-        return this.store.getSource();
-    }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-/**
- * @class Roo.LoadMask
- * A simple utility class for generically masking elements while loading data.  If the element being masked has
- * an underlying {@link Roo.data.Store}, the masking will be automatically synchronized with the store's loading
- * process and the mask element will be cached for reuse.  For all other elements, this mask will replace the
- * element's UpdateManager load indicator and will be destroyed after the initial load.
- * @constructor
- * Create a new LoadMask
- * @param {String/HTMLElement/Roo.Element} el The element or DOM node, or its id
- * @param {Object} config The config object
- */
-Roo.LoadMask = function(el, config){
-    this.el = Roo.get(el);
-    Roo.apply(this, config);
-    if(this.store){
-        this.store.on('beforeload', this.onBeforeLoad, this);
-        this.store.on('load', this.onLoad, this);
-        this.store.on('loadexception', this.onLoad, this);
-        this.removeMask = false;
-    }else{
-        var um = this.el.getUpdateManager();
-        um.showLoadIndicator = false; // disable the default indicator
-        um.on('beforeupdate', this.onBeforeLoad, this);
-        um.on('update', this.onLoad, this);
-        um.on('failure', this.onLoad, this);
-        this.removeMask = true;
-    }
-};
-
-Roo.LoadMask.prototype = {
-    /**
-     * @cfg {Boolean} removeMask
-     * True to create a single-use mask that is automatically destroyed after loading (useful for page loads),
-     * False to persist the mask element reference for multiple uses (e.g., for paged data widgets).  Defaults to false.
-     */
-    /**
-     * @cfg {String} msg
-     * The text to display in a centered loading message box (defaults to 'Loading...')
-     */
-    msg : 'Loading...',
-    /**
-     * @cfg {String} msgCls
-     * The CSS class to apply to the loading message element (defaults to "x-mask-loading")
-     */
-    msgCls : 'x-mask-loading',
-
-    /**
-     * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false)
-     * @type Boolean
-     */
-    disabled: false,
-
-    /**
-     * Disables the mask to prevent it from being displayed
-     */
-    disable : function(){
-       this.disabled = true;
-    },
-
-    /**
-     * Enables the mask so that it can be displayed
-     */
-    enable : function(){
-        this.disabled = false;
-    },
-
-    // private
-    onLoad : function(){
-        this.el.unmask(this.removeMask);
-    },
-
-    // private
-    onBeforeLoad : function(){
-        if(!this.disabled){
-            this.el.mask(this.msg, this.msgCls);
-        }
-    },
-
-    // private
-    destroy : function(){
-        if(this.store){
-            this.store.un('beforeload', this.onBeforeLoad, this);
-            this.store.un('load', this.onLoad, this);
-            this.store.un('loadexception', this.onLoad, this);
-        }else{
-            var um = this.el.getUpdateManager();
-            um.un('beforeupdate', this.onBeforeLoad, this);
-            um.un('update', this.onLoad, this);
-            um.un('failure', this.onLoad, this);
-        }
-    }
-};/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-Roo.XTemplate = function(){
-    Roo.XTemplate.superclass.constructor.apply(this, arguments);
-    var s = this.html;
-
-    s = ['<tpl>', s, '</tpl>'].join('');
-
-    var re = /<tpl\b[^>]*>((?:(?=([^<]+))\2|<(?!tpl\b[^>]*>))*?)<\/tpl>/;
-
-    var nameRe = /^<tpl\b[^>]*?for="(.*?)"/;
-    var ifRe = /^<tpl\b[^>]*?if="(.*?)"/;
-    var execRe = /^<tpl\b[^>]*?exec="(.*?)"/;
-    var m, id = 0;
-    var tpls = [];
-
-    while(m = s.match(re)){
-       var m2 = m[0].match(nameRe);
-       var m3 = m[0].match(ifRe);
-       var m4 = m[0].match(execRe);
-       var exp = null, fn = null, exec = null;
-       var name = m2 && m2[1] ? m2[1] : '';
-       if(m3){
-           exp = m3 && m3[1] ? m3[1] : null;
-           if(exp){
-               fn = new Function('values', 'parent', 'with(values){ return '+(Roo.util.Format.htmlDecode(exp))+'; }');
-           }
-       }
-       if(m4){
-           exp = m4 && m4[1] ? m4[1] : null;
-           if(exp){
-               exec = new Function('values', 'parent', 'with(values){ '+(Roo.util.Format.htmlDecode(exp))+'; }');
-           }
-       }
-       if(name){
-           switch(name){
-               case '.': name = new Function('values', 'parent', 'with(values){ return values; }'); break;
-               case '..': name = new Function('values', 'parent', 'with(values){ return parent; }'); break;
-               default: name = new Function('values', 'parent', 'with(values){ return '+name+'; }');
-           }
-       }
-       tpls.push({
-            id: id,
-            target: name,
-            exec: exec,
-            test: fn,
-            body: m[1]||''
-        });
-       s = s.replace(m[0], '{xtpl'+ id + '}');
-       ++id;
-    }
-    for(var i = tpls.length-1; i >= 0; --i){
-        this.compileTpl(tpls[i]);
-    }
-    this.master = tpls[tpls.length-1];
-    this.tpls = tpls;
-};
-Roo.extend(Roo.XTemplate, Roo.Template, {
-
-    re : /\{([\w-\.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
-
-    applySubTemplate : function(id, values, parent){
-        var t = this.tpls[id];
-        if(t.test && !t.test.call(this, values, parent)){
-            return '';
-        }
-        if(t.exec && t.exec.call(this, values, parent)){
-            return '';
-        }
-        var vs = t.target ? t.target.call(this, values, parent) : values;
-        parent = t.target ? values : parent;
-        if(t.target && vs instanceof Array){
-            var buf = [];
-            for(var i = 0, len = vs.length; i < len; i++){
-                buf[buf.length] = t.compiled.call(this, vs[i], parent);
-            }
-            return buf.join('');
-        }
-        return t.compiled.call(this, vs, parent);
-    },
-
-    compileTpl : function(tpl){
-        var fm = Roo.util.Format;
-        var useF = this.disableFormats !== true;
-        var sep = Roo.isGecko ? "+" : ",";
-        var fn = function(m, name, format, args){
-            if(name.substr(0, 4) == 'xtpl'){
-                return "'"+ sep +'this.applySubTemplate('+name.substr(4)+', values, parent)'+sep+"'";
-            }
-            var v;
-            if(name.indexOf('.') != -1){
-                v = name;
-            }else{
-                v = "values['" + name + "']";
-            }
-            if(format && useF){
-                args = args ? ',' + args : "";
-                if(format.substr(0, 5) != "this."){
-                    format = "fm." + format + '(';
-                }else{
-                    format = 'this.call("'+ format.substr(5) + '", ';
-                    args = ", values";
-                }
-            }else{
-                args= ''; format = "("+v+" === undefined ? '' : ";
-            }
-            return "'"+ sep + format + v + args + ")"+sep+"'";
-        };
-        var body;
-        // branched to use + in gecko and [].join() in others
-        if(Roo.isGecko){
-            body = "tpl.compiled = function(values, parent){ return '" +
-                   tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
-                    "';};";
-        }else{
-            body = ["tpl.compiled = function(values, parent){ return ['"];
-            body.push(tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn));
-            body.push("'].join('');};");
-            body = body.join('');
-        }
-        /** eval:var:zzzzzzz */
-        eval(body);
-        return this;
-    },
-
-    applyTemplate : function(values){
-        return this.master.compiled.call(this, values, {});
-        var s = this.subs;
-    },
-
-    apply : function(){
-        return this.applyTemplate.apply(this, arguments);
-    },
-
-    compile : function(){return this;}
-});
-
-Roo.XTemplate.from = function(el){
-    el = Roo.getDom(el);
-    return new Roo.XTemplate(el.value || el.innerHTML);
-};/*
- * Original code for Roojs - LGPL
- * <script type="text/javascript">
- */
-/**
- * @class Roo.XComponent
- * A delayed Element creator...
- * 
- * Mypart.xyx = new Roo.XComponent({
-
-    parent : 'Mypart.xyz', // empty == document.element.!!
-    order : '001',
-    name : 'xxxx'
-    region : 'xxxx'
-    disabled : function() {} 
-     
-    tree : function() { // return an tree of xtype declared components
-        var MODULE = this;
-        return 
-        {
-            xtype : 'NestedLayoutPanel',
-            // technicall
-        }
-     ]
- *})
- * @extends Roo.util.Observable
- * @constructor
- * @param cfg {Object} configuration of component
- * 
- */
-Roo.XComponent = function(cfg) {
-    Roo.apply(this, cfg);
-    this.addEvents({ 
-        /**
-            * @event built
-            * Fires when this the componnt is built
-            * @param {Roo.XComponent} c the component
-            */
-        'built' : true,
-        /**
-            * @event buildcomplete
-            * Fires on the top level element when all elements have been built
-            * @param {Roo.XComponent} c the top level component.
-         */
-        'buildcomplete' : true
-        
-    });
-    
-    Roo.XComponent.register(this);
-    this.modules = false;
-    this.el = false; // where the layout goes..
-    
-    
-}
-Roo.extend(Roo.XComponent, Roo.util.Observable, {
-    /**
-     * @property el
-     * The created element (with Roo.factory())
-     * @type {Roo.Layout}
-     */
-    el  : false,
-    
-    /**
-     * @property el
-     * for BC  - use el in new code
-     * @type {Roo.Layout}
-     */
-    panel : false,
-    
-    /**
-     * @property layout
-     * for BC  - use el in new code
-     * @type {Roo.Layout}
-     */
-    layout : false,
-    
-     /**
-     * @cfg {Function|boolean} disabled
-     * If this module is disabled by some rule, return true from the funtion
-     */
-    disabled : false,
-    
-    /**
-     * @cfg {String} parent 
-     * Name of parent element which it get xtype added to..
-     */
-    parent: false,
-    
-    /**
-     * @cfg {String} order
-     * Used to set the order in which elements are created (usefull for multiple tabs)
-     */
-    
-    order : false,
-    /**
-     * @cfg {String} name
-     * String to display while loading.
-     */
-    name : false,
-    /**
-     * @cfg {Array} items
-     * A single item array - the first element is the root of the tree..
-     * It's done this way to stay compatible with the Xtype system...
-     */
-    items : false
-     
-     
-    
-});
-
-Roo.apply(Roo.XComponent, {
-    
-    /**
-     * @property  buildCompleted
-     * True when the builder has completed building the interface.
-     * @type Boolean
-     */
-    buildCompleted : false,
-     
-    /**
-     * @property  topModule
-     * the upper most module - uses document.element as it's constructor.
-     * @type Object
-     */
-     
-    topModule  : false,
-      
-    /**
-     * @property  modules
-     * array of modules to be created by registration system.
-     * @type Roo.XComponent
-     */
-    
-    modules : [],
-      
-    
-    /**
-     * Register components to be built later.
-     *
-     * This solves the following issues
-     * - Building is not done on page load, but after an authentication process has occured.
-     * - Interface elements are registered on page load
-     * - Parent Interface elements may not be loaded before child, so this handles that..
-     * 
-     *
-     * example:
-     * 
-     * MyApp.register({
-          order : '000001',
-          module : 'Pman.Tab.projectMgr',
-          region : 'center',
-          parent : 'Pman.layout',
-          disabled : false,  // or use a function..
-        })
-     
-     * * @param {Object} details about module
-     */
-    register : function(obj) {
-        this.modules.push(obj);
-         
-    },
-    /**
-     * convert a string to an object..
-     * 
-     */
-    
-    toObject : function(str)
-    {
-        if (!str || typeof(str) == 'object') {
-            return str;
-        }
-        var ar = str.split('.');
-        var rt, o;
-        rt = ar.shift();
-            /** eval:var:o */
-        eval('if (typeof ' + rt + ' == "undefined"){ o = false;} o = ' + rt + ';');
-        if (o === false) {
-            throw "Module not found : " + str;
-        }
-        Roo.each(ar, function(e) {
-            if (typeof(o[e]) == 'undefined') {
-                throw "Module not found : " + str;
-            }
-            o = o[e];
-        });
-        return o;
-        
-    },
-    
-    
-    /**
-     * move modules into their correct place in the tree..
-     * 
-     */
-    preBuild : function ()
-    {
-        
-        Roo.each(this.modules , function (obj)
-        {
-            obj.parent = this.toObject(obj.parent);
-            
-            if (!obj.parent) {
-                this.topModule = obj;
-                return;
-            }
-            
-            if (!obj.parent.modules) {
-                obj.parent.modules = new Roo.util.MixedCollection(false, 
-                    function(o) { return o.order + '' }
-                );
-            }
-            
-            obj.parent.modules.add(obj);
-        }, this);
-    },
-    
-     /**
-     * make a list of modules to build.
-     * @return {Array} list of modules. 
-     */ 
-    
-    buildOrder : function()
-    {
-        var _this = this;
-        var cmp = function(a,b) {   
-            return String(a).toUpperCase() > String(b).toUpperCase() ? 1 : -1;
-        };
-        
-        if (!this.topModule || !this.topModule.modules) {
-            throw "No top level modules to build";
-        }
-       
-        // make a flat list in order of modules to build.
-        var mods = [ this.topModule ];
-        
-        
-        // add modules to their parents..
-        var addMod = function(m) {
-           // Roo.debug && Roo.log(m.modKey);
-            
-            mods.push(m);
-            if (m.modules) {
-                m.modules.keySort('ASC',  cmp );
-                m.modules.each(addMod);
-            }
-            // not sure if this is used any more..
-            if (m.finalize) {
-                m.finalize.name = m.name + " (clean up) ";
-                mods.push(m.finalize);
-            }
-            
-        }
-        this.topModule.modules.keySort('ASC',  cmp );
-        this.topModule.modules.each(addMod);
-        return mods;
-    },
-    
-     /**
-     * Build the registered modules.
-     * @param {Object} parent element.
-     * @param {Function} optional method to call after module has been added.
-     * 
-     */ 
-   
-    build : function() 
-    {
-        
-        this.preBuild();
-        var mods = this.buildOrder();
-      
-        //this.allmods = mods;
-        //Roo.debug && Roo.log(mods);
-        //return;
-        if (!mods.length) { // should not happen
-            throw "NO modules!!!";
-        }
-        
-        
-        
-        // flash it up as modal - so we store the mask!?
-        Roo.MessageBox.show({ title: 'loading' });
-        Roo.MessageBox.show({
-           title: "Please wait...",
-           msg: "Building Interface...",
-           width:450,
-           progress:true,
-           closable:false,
-           modal: false
-          
-        });
-        var total = mods.length;
-        
-        var _this = this;
-        var progressRun = function() {
-            if (!mods.length) {
-                Roo.debug && Roo.log('hide?');
-                Roo.MessageBox.hide();
-                _this.topModule.fireEvent('buildcomplete', _this.topModule);
-                return;    
-            }
-            
-            var m = mods.shift();
-            Roo.debug && Roo.log(m);
-            if (typeof(m) == 'function') { // not sure if this is supported any more..
-                m.call(this);
-                return progressRun.defer(10, _this);
-            } 
-            
-            Roo.MessageBox.updateProgress(
-                (total  - mods.length)/total,  "Building Interface " + (total  - mods.length) + 
-                    " of " + total + 
-                    (m.name ? (' - ' + m.name) : '')
-                    );
-            
-         
-            
-            var disabled = (typeof(m.disabled) == 'function') ?
-                m.disabled.call(m.module.disabled) : m.disabled;    
-            
-            
-            if (disabled) {
-                return progressRun(); // we do not update the display!
-            }
-            
-            if (!m.parent) {
-                // it's a top level one..
-                var layoutbase = new Ext.BorderLayout(document.body, {
-               
-                    center: {
-                         titlebar: false,
-                         autoScroll:false,
-                         closeOnTab: true,
-                         tabPosition: 'top',
-                         //resizeTabs: true,
-                         alwaysShowTabs: true,
-                         minTabWidth: 140
-                    }
-                });
-                var tree = m.tree();
-                tree.region = 'center';
-                m.el = layoutbase.addxtype(tree);
-                m.panel = m.el;
-                m.layout = m.panel.layout;    
-                return progressRun.defer(10, _this);
-            }
-            
-            var tree = m.tree();
-            tree.region = tree.region || m.region;
-            m.el = m.parent.el.addxtype(tree);
-            m.fireEvent('built', m);
-            m.panel = m.el;
-            m.layout = m.panel.layout;    
-            progressRun.defer(10, _this); 
-            
-        }
-        progressRun.defer(1, _this);
-     
-        
-        
-    }
-     
-   
-    
-    
-});
- //<script type="text/javascript">
-
-
-/**
- * @class Roo.Login
- * @extends Roo.LayoutDialog
- * A generic Login Dialog..... - only one needed in theory!?!?
- *
- * Fires XComponent builder on success...
- * 
- * Sends 
- *    username,password, lang = for login actions.
- *    check = 1 for periodic checking that sesion is valid.
- *    passwordRequest = email request password
- *    logout = 1 = to logout
- * 
- * Affects: (this id="????" elements)
- *   loading  (removed) (used to indicate application is loading)
- *   loading-mask (hides) (used to hide application when it's building loading)
- *   
- * 
- * Usage: 
- *    
- * 
- * Myapp.login = Roo.Login({
-     url: xxxx,
-   
-     realm : 'Myapp', 
-     
-     
-     method : 'POST',
-     
-     
-     * 
- })
- * 
- * 
- * 
- **/
-Roo.Login = function(cfg)
-{
-    this.addEvents({
-        'refreshed' : true
-    });
-    
-    Roo.apply(this,cfg);
-    
-    Roo.onReady(function() {
-        this.onLoad();
-    }, this);
-    // call parent..
-    
-   
-    Roo.Login.superclass.constructor.call(this, this);
-    //this.addxtype(this.items[0]);
-    
-    
-}
-
-
-Roo.extend(Roo.Login, Roo.LayoutDialog, {
-    
-    /**
-     * @cfg {String} method
-     * Method used to query for login details.
-     */
-    
-    method : 'POST',
-    /**
-     * @cfg {String} url
-     * URL to query login data. - eg. baseURL + '/Login.php'
-     */
-    url : '',
-    
-    /**
-     * @property user
-     * The user data - if user.id < 0 then login will be bypassed. (used for inital setup situation.
-     * @type {Object} 
-     */
-    user : false,
-    /**
-     * @property checkFails
-     * Number of times we have attempted to get authentication check, and failed.
-     * @type {Number} 
-     */
-    checkFails : 0,
-      /**
-     * @property intervalID
-     * The window interval that does the constant login checking.
-     * @type {Number} 
-     */
-    intervalID : 0,
-    
-    
-    onLoad : function() // called on page load...
-    {
-        // load 
-         
-        if (Roo.get('loading')) { // clear any loading indicator..
-            Roo.get('loading').remove();
-        }
-        
-        //this.switchLang('en'); // set the language to english..
-       
-        this.check({
-            success:  function(response, opts)  {  // check successfull...
-            
-                var res = this.processResponse(response);
-                this.checkFails =0;
-                if (!res.success) { // error!
-                    this.checkFails = 5;
-                    //console.log('call failure');
-                    return this.failure(response,opts);
-                }
-                
-                if (!res.data.id) { // id=0 == login failure.
-                    return this.show();
-                }
-                
-                              
-                        //console.log(success);
-                this.fillAuth(res.data);   
-                this.checkFails =0;
-                Roo.XComponent.build();
-            },
-            failure : this.show
-        });
-        
-    }, 
-    
-    
-    check: function(cfg) // called every so often to refresh cookie etc..
-    {
-        if (cfg.again) { // could be undefined..
-            this.checkFails++;
-        } else {
-            this.checkFails = 0;
-        }
-        var _this = this;
-        if (this.sending) {
-            if ( this.checkFails > 4) {
-                Roo.MessageBox.alert("Error",  
-                    "Error getting authentication status. - try reloading, or wait a while", function() {
-                        _this.sending = false;
-                    }); 
-                return;
-            }
-            cfg.again = true;
-            _this.check.defer(10000, _this, [ cfg ]); // check in 10 secs.
-            return;
-        }
-        this.sending = true;
-        
-        Roo.Ajax.request({  
-            url: this.url,
-            params: {
-                getAuthUser: true
-            },  
-            method: this.method,
-            success:  cfg.success || this.success,
-            failure : cfg.failure || this.failure,
-            scope : this,
-            callCfg : cfg
-              
-        });  
-    }, 
-    
-    
-    logout: function()
-    {
-        window.onbeforeunload = function() { }; // false does not work for IE..
-        this.user = false;
-        var _this = this;
-        
-        Roo.Ajax.request({  
-            url: this.url,
-            params: {
-                logout: 1
-            },  
-            method: 'GET',
-            failure : function() {
-                Roo.MessageBox.alert("Error", "Error logging out. - continuing anyway.", function() {
-                    document.location = document.location.toString() + '?ts=' + Math.random();
-                });
-                
-            },
-            success : function() {
-                _this.user = false;
-                this.checkFails =0;
-                // fixme..
-                document.location = document.location.toString() + '?ts=' + Math.random();
-            }
-              
-              
-        }); 
-    },
-    
-    processResponse : function (response)
-    {
-        var res = '';
-        try {
-            res = Roo.decode(response.responseText);
-            // oops...
-            if (typeof(res) != 'object') {
-                res = { success : false, errorMsg : res, errors : true };
-            }
-            if (typeof(res.success) == 'undefined') {
-                res.success = false;
-            }
-            
-        } catch(e) {
-            res = { success : false,  errorMsg : response.responseText, errors : true };
-        }
-        return res;
-    },
-    
-    success : function(response, opts)  // check successfull...
-    {  
-        this.sending = false;
-        var res = this.processResponse(response);
-        if (!res.success) {
-            return this.failure(response, opts);
-        }
-        if (!res.data || !res.data.id) {
-            return this.failure(response,opts);
-        }
-        //console.log(res);
-        this.fillAuth(res.data);
-        
-        this.checkFails =0;
-        
-    },
-    
-    
-    failure : function (response, opts) // called if login 'check' fails.. (causes re-check)
-    {
-        this.authUser = -1;
-        this.sending = false;
-        var res = this.processResponse(response);
-        //console.log(res);
-        if ( this.checkFails > 2) {
-        
-            Roo.MessageBox.alert("Error", res.errorMsg ? res.errorMsg : 
-                "Error getting authentication status. - try reloading"); 
-            return;
-        }
-        opts.callCfg.again = true;
-        this.check.defer(1000, this, [ opts.callCfg ]);
-        return;  
-    },
-    
-    
-    
-    fillAuth: function(au) {
-        this.startAuthCheck();
-        this.authUserId = au.id;
-        this.authUser = au;
-        this.lastChecked = new Date();
-        this.fireEvent('refreshed', au);
-        //Pman.Tab.FaxQueue.newMaxId(au.faxMax);
-        //Pman.Tab.FaxTab.setTitle(au.faxNumPending);
-        au.lang = au.lang || 'en';
-        //this.switchLang(Roo.state.Manager.get('Pman.Login.lang', 'en'));
-        Roo.state.Manager.set( this.realm + 'lang' , au.lang);
-        this.switchLang(au.lang );
-        
-     
-        // open system... - -on setyp..
-        if (this.authUserId  < 0) {
-            Roo.MessageBox.alert("Warning", 
-                "This is an open system - please set up a admin user with a password.");  
-        }
-         
-        //Pman.onload(); // which should do nothing if it's a re-auth result...
-        
-             
-    },
-    
-    startAuthCheck : function() // starter for timeout checking..
-    {
-        if (this.intervalID) { // timer already in place...
-            return false;
-        }
-        var _this = this;
-        this.intervalID =  window.setInterval(function() {
-              _this.check(false);
-            }, 120000); // every 120 secs = 2mins..
-        
-        
-    },
-         
-    
-    switchLang : function (lang) 
-    {
-        _T = typeof(_T) == 'undefined' ? false : _T;
-          if (!_T || !lang.length) {
-            return;
-        }
-        
-        if (!_T && lang != 'en') {
-            Roo.MessageBox.alert("Sorry", "Language not available yet (" + lang +')');
-            return;
-        }
-        
-        if (typeof(_T.en) == 'undefined') {
-            _T.en = {};
-            Roo.apply(_T.en, _T);
-        }
-        
-        if (typeof(_T[lang]) == 'undefined') {
-            Roo.MessageBox.alert("Sorry", "Language not available yet (" + lang +')');
-            return;
-        }
-        
-        
-        Roo.apply(_T, _T[lang]);
-        // just need to set the text values for everything...
-        var _this = this;
-        /* this will not work ...
-        if (this.form) { 
-            
-               
-            function formLabel(name, val) {
-                _this.form.findField(name).fieldEl.child('label').dom.innerHTML  = val;
-            }
-            
-            formLabel('password', "Password"+':');
-            formLabel('username', "Email Address"+':');
-            formLabel('lang', "Language"+':');
-            this.dialog.setTitle("Login");
-            this.dialog.buttons[0].setText("Forgot Password");
-            this.dialog.buttons[1].setText("Login");
-        }
-        */
-        
-        
-    },
-    
-    
-    title: "Login",
-    modal: true,
-    width:  350,
-    //height: 230,
-    height: 180,
-    shadow: true,
-    minWidth:200,
-    minHeight:180,
-    //proxyDrag: true,
-    closable: false,
-    draggable: false,
-    collapsible: false,
-    resizable: false,
-    center: {  // needed??
-        autoScroll:false,
-        titlebar: false,
-       // tabPosition: 'top',
-        hideTabs: true,
-        closeOnTab: true,
-        alwaysShowTabs: false
-    } ,
-    listeners : {
-        
-        show  : function(dlg)
-        {
-            //console.log(this);
-            this.form = this.layout.getRegion('center').activePanel.form;
-            this.form.dialog = dlg;
-            this.buttons[0].form = this.form;
-            this.buttons[0].dialog = dlg
-            this.buttons[1].form = this.form;
-            this.buttons[1].dialog = dlg;
-           
-           //this.resizeToLogo.defer(1000,this);
-            // this is all related to resizing for logos..
-            //var sz = Roo.get(Pman.Login.form.el.query('img')[0]).getSize();
-           //// if (!sz) {
-             //   this.resizeToLogo.defer(1000,this);
-             //   return;
-           // }
-            //var w = Ext.lib.Dom.getViewWidth() - 100;
-            //var h = Ext.lib.Dom.getViewHeight() - 100;
-            //this.resizeTo(Math.max(350, Math.min(sz.width + 30, w)),Math.min(sz.height+200, h));
-            //this.center();
-            if (this.disabled) {
-                this.hide();
-                return;
-            }
-            
-            if (this.user.id < 0) { // used for inital setup situations.
-                return;
-            }
-            
-            if (this.intervalID) {
-                // remove the timer
-                window.clearInterval(this.intervalID);
-                this.intervalID = false;
-            }
-            
-            
-            if (Roo.get('loading')) {
-                Roo.get('loading').remove();
-            }
-            if (Roo.get('loading-mask')) {
-                Roo.get('loading-mask').hide();
-            }
-            
-            //incomming._node = tnode;
-            this.form.reset();
-            //this.dialog.modal = !modal;
-            //this.dialog.show();
-            this.el.unmask(); 
-            
-            
-            this.form.setValues({
-                'username' : Roo.state.Manager.get(this.realm + '.username', ''),
-                'lang' : Roo.state.Manager.get(this.realm + '.lang', 'en')
-            });
-            
-            this.switchLang(Roo.state.Manager.get(this.realm + '.lang', 'en'));
-            if (this.form.findField('username').getValue().length > 0 ){
-                this.form.findField('password').focus();
-            } else {
-               this.form.findField('username').focus();
-            }
-    
-        }
-    },
-    items : [
-         {
-       
-            xtype : 'ContentPanel',
-            xns : Roo,
-            region: 'center',
-            fitToFrame : true,
-            
-            items : [
-    
-                {
-               
-                    xtype : 'Form',
-                    xns : Roo.form,
-                    labelWidth: 100,
-                    style : 'margin: 10px;',
-                    
-                    listeners : {
-                        actionfailed : function(f, act) {
-                            // form can return { errors: .... }
-                                
-                            //act.result.errors // invalid form element list...
-                            //act.result.errorMsg// invalid form element list...
-                            
-                            this.dialog.el.unmask();
-                            Roo.MessageBox.alert("Error", act.result.errorMsg ? act.result.errorMsg : 
-                                        "Login failed - communication error - try again.");
-                                      
-                        },
-                        actioncomplete: function(re, act) {
-                             
-                            Roo.state.Manager.set(
-                                this.dialog.realm + '.username',  
-                                    this.findField('username').getValue()
-                            );
-                            Roo.state.Manager.set(
-                                this.dialog.realm + '.lang',  
-                                this.findField('lang').getValue() 
-                            );
-                            
-                            this.dialog.fillAuth(act.result.data);
-                              
-                            this.dialog.hide();
-                            
-                            if (Roo.get('loading-mask')) {
-                                Roo.get('loading-mask').show();
-                            }
-                            Roo.XComponent.build();
-                            
-                             
-                            
-                        }
-                    },
-                    items : [
-                        {
-                            xtype : 'TextField',
-                            xns : Roo.form,
-                            fieldLabel: "Email Address",
-                            name: 'username',
-                            width:200,
-                            autoCreate : {tag: "input", type: "text", size: "20"}
-                        },
-                        {
-                            xtype : 'TextField',
-                            xns : Roo.form,
-                            fieldLabel: "Password",
-                            inputType: 'password',
-                            name: 'password',
-                            width:200,
-                            autoCreate : {tag: "input", type: "text", size: "20"},
-                            listeners : {
-                                specialkey : function(e,ev) {
-                                    if (ev.keyCode == 13) {
-                                        this.form.dialog.el.mask("Logging in");
-                                        this.form.doAction('submit', {
-                                            url: this.form.dialog.url,
-                                            method: this.form.dialog.method
-                                        });
-                                    }
-                                }
-                            }  
-                        },
-                        {
-                            xtype : 'ComboBox',
-                            xns : Roo.form,
-                            fieldLabel: "Language",
-                            name : 'langdisp',
-                            store: {
-                                xtype : 'SimpleStore',
-                                fields: ['lang', 'ldisp'],
-                                data : [
-                                    [ 'en', 'English' ],
-                                    [ 'zh_HK' , '\u7E41\u4E2D' ],
-                                    [ 'zh_CN', '\u7C21\u4E2D' ]
-                                ]
-                            },
-                            
-                            valueField : 'lang',
-                            hiddenName:  'lang',
-                            width: 200,
-                            displayField:'ldisp',
-                            typeAhead: false,
-                            editable: false,
-                            mode: 'local',
-                            triggerAction: 'all',
-                            emptyText:'Select a Language...',
-                            selectOnFocus:true,
-                            listeners : {
-                                select :  function(cb, rec, ix) {
-                                    this.form.switchLang(rec.data.lang);
-                                }
-                            }
-                        
-                        }
-                    ]
-                }
-                  
-                
-            ]
-        }
-    ],
-    buttons : [
-        {
-            xtype : 'Button',
-            xns : 'Roo',
-            text : "Forgot Password",
-            listeners : {
-                click : function() {
-                    //console.log(this);
-                    var n = this.form.findField('username').getValue();
-                    if (!n.length) {
-                        Roo.MessageBox.alert("Error", "Fill in your email address");
-                        return;
-                    }
-                    Roo.Ajax.request({
-                        url: this.dialog.url,
-                        params: {
-                            passwordRequest: n
-                        },
-                        method: this.dialog.method,
-                        success:  function(response, opts)  {  // check successfull...
-                        
-                            var res = this.dialog.processResponse(response);
-                            if (!res.success) { // error!
-                               Roo.MessageBox.alert("Error" ,
-                                    res.errorMsg ? res.errorMsg  : "Problem Requesting Password Reset");
-                               return;
-                            }
-                            Roo.MessageBox.alert("Notice" ,
-                                "Please check you email for the Password Reset message");
-                        },
-                        failure : function() {
-                            Roo.MessageBox.alert("Error" , "Problem Requesting Password Reset");
-                        }
-                        
-                    });
-                }
-            }
-        },
-        {
-            xtype : 'Button',
-            xns : 'Roo',
-            text : "Login",
-            listeners : {
-                
-                click : function () {
-                        
-                    this.dialog.el.mask("Logging in");
-                    this.form.doAction('submit', {
-                            url: this.dialog.url,
-                            method: this.dialog.method
-                    });
-                }
-            }
-        }
-    ]
-  
-  
-})
-
-
-   
\ No newline at end of file