roojs-ui-debug.js
[roojs1] / roojs-ui-debug.js
index 02162fd..1ffa073 100644 (file)
@@ -15287,7 +15287,8 @@ Roo.LayoutDialog = function(el, cfg){
         config = Roo.apply({}, el);
         // not sure why we use documentElement here.. - it should always be body.
         // IE7 borks horribly if we use documentElement.
-        el = Roo.get( Roo.isIE ? (document.body || document.documentElement) : (document.documentElement || document.body) ).createChild();
+        // webkit also does not like documentElement - it creates a body element...
+        el = Roo.get( document.body || document.documentElement ).createChild();
         //config.autoCreate = true;
     }
     
@@ -31839,123 +31840,123 @@ Roo.grid.Grid = function(container, config){
     }
     /** @private */
        this.addEvents({
-           // raw events
-           /**
-            * @event click
-            * The raw click event for the entire grid.
-            * @param {Roo.EventObject} e
-            */
-           "click" : true,
-           /**
-            * @event dblclick
-            * The raw dblclick event for the entire grid.
-            * @param {Roo.EventObject} e
-            */
-           "dblclick" : true,
-           /**
-            * @event contextmenu
-            * The raw contextmenu event for the entire grid.
-            * @param {Roo.EventObject} e
-            */
-           "contextmenu" : true,
-           /**
-            * @event mousedown
-            * The raw mousedown event for the entire grid.
-            * @param {Roo.EventObject} e
-            */
-           "mousedown" : true,
-           /**
-            * @event mouseup
-            * The raw mouseup event for the entire grid.
-            * @param {Roo.EventObject} e
-            */
-           "mouseup" : true,
-           /**
-            * @event mouseover
-            * The raw mouseover event for the entire grid.
-            * @param {Roo.EventObject} e
-            */
-           "mouseover" : true,
-           /**
-            * @event mouseout
-            * The raw mouseout event for the entire grid.
-            * @param {Roo.EventObject} e
-            */
-           "mouseout" : true,
-           /**
-            * @event keypress
-            * The raw keypress event for the entire grid.
-            * @param {Roo.EventObject} e
-            */
-           "keypress" : true,
-           /**
-            * @event keydown
-            * The raw keydown event for the entire grid.
-            * @param {Roo.EventObject} e
-            */
-           "keydown" : true,
+        // raw events
+        /**
+         * @event click
+         * The raw click event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "click" : true,
+        /**
+         * @event dblclick
+         * The raw dblclick event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "dblclick" : true,
+        /**
+         * @event contextmenu
+         * The raw contextmenu event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "contextmenu" : true,
+        /**
+         * @event mousedown
+         * The raw mousedown event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "mousedown" : true,
+        /**
+         * @event mouseup
+         * The raw mouseup event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "mouseup" : true,
+        /**
+         * @event mouseover
+         * The raw mouseover event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "mouseover" : true,
+        /**
+         * @event mouseout
+         * The raw mouseout event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "mouseout" : true,
+        /**
+         * @event keypress
+         * The raw keypress event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "keypress" : true,
+        /**
+         * @event keydown
+         * The raw keydown event for the entire grid.
+         * @param {Roo.EventObject} e
+         */
+        "keydown" : true,
 
-           // custom events
+        // custom events
 
-           /**
-            * @event cellclick
-            * Fires when a cell is clicked
-            * @param {Grid} this
-            * @param {Number} rowIndex
-            * @param {Number} columnIndex
-            * @param {Roo.EventObject} e
-            */
-           "cellclick" : true,
-           /**
-            * @event celldblclick
-            * Fires when a cell is double clicked
-            * @param {Grid} this
-            * @param {Number} rowIndex
-            * @param {Number} columnIndex
-            * @param {Roo.EventObject} e
-            */
-           "celldblclick" : true,
-           /**
-            * @event rowclick
-            * Fires when a row is clicked
-            * @param {Grid} this
-            * @param {Number} rowIndex
-            * @param {Roo.EventObject} e
-            */
-           "rowclick" : true,
-           /**
-            * @event rowdblclick
-            * Fires when a row is double clicked
-            * @param {Grid} this
-            * @param {Number} rowIndex
-            * @param {Roo.EventObject} e
-            */
-           "rowdblclick" : true,
-           /**
-            * @event headerclick
-            * Fires when a header is clicked
-            * @param {Grid} this
-            * @param {Number} columnIndex
-            * @param {Roo.EventObject} e
-            */
-           "headerclick" : true,
-           /**
-            * @event headerdblclick
-            * Fires when a header cell is double clicked
-            * @param {Grid} this
-            * @param {Number} columnIndex
-            * @param {Roo.EventObject} e
-            */
-           "headerdblclick" : true,
-           /**
-            * @event rowcontextmenu
-            * Fires when a row is right clicked
-            * @param {Grid} this
-            * @param {Number} rowIndex
-            * @param {Roo.EventObject} e
-            */
-           "rowcontextmenu" : true,
-           /**
+        /**
+         * @event cellclick
+         * Fires when a cell is clicked
+         * @param {Grid} this
+         * @param {Number} rowIndex
+         * @param {Number} columnIndex
+         * @param {Roo.EventObject} e
+         */
+        "cellclick" : true,
+        /**
+         * @event celldblclick
+         * Fires when a cell is double clicked
+         * @param {Grid} this
+         * @param {Number} rowIndex
+         * @param {Number} columnIndex
+         * @param {Roo.EventObject} e
+         */
+        "celldblclick" : true,
+        /**
+         * @event rowclick
+         * Fires when a row is clicked
+         * @param {Grid} this
+         * @param {Number} rowIndex
+         * @param {Roo.EventObject} e
+         */
+        "rowclick" : true,
+        /**
+         * @event rowdblclick
+         * Fires when a row is double clicked
+         * @param {Grid} this
+         * @param {Number} rowIndex
+         * @param {Roo.EventObject} e
+         */
+        "rowdblclick" : true,
+        /**
+         * @event headerclick
+         * Fires when a header is clicked
+         * @param {Grid} this
+         * @param {Number} columnIndex
+         * @param {Roo.EventObject} e
+         */
+        "headerclick" : true,
+        /**
+         * @event headerdblclick
+         * Fires when a header cell is double clicked
+         * @param {Grid} this
+         * @param {Number} columnIndex
+         * @param {Roo.EventObject} e
+         */
+        "headerdblclick" : true,
+        /**
+         * @event rowcontextmenu
+         * Fires when a row is right clicked
+         * @param {Grid} this
+         * @param {Number} rowIndex
+         * @param {Roo.EventObject} e
+         */
+        "rowcontextmenu" : true,
+        /**
          * @event cellcontextmenu
          * Fires when a cell is right clicked
          * @param {Grid} this
@@ -31964,95 +31965,95 @@ Roo.grid.Grid = function(container, config){
          * @param {Roo.EventObject} e
          */
          "cellcontextmenu" : true,
-           /**
-            * @event headercontextmenu
-            * Fires when a header is right clicked
-            * @param {Grid} this
-            * @param {Number} columnIndex
-            * @param {Roo.EventObject} e
-            */
-           "headercontextmenu" : true,
-           /**
-            * @event bodyscroll
-            * Fires when the body element is scrolled
-            * @param {Number} scrollLeft
-            * @param {Number} scrollTop
-            */
-           "bodyscroll" : true,
-           /**
-            * @event columnresize
-            * Fires when the user resizes a column
-            * @param {Number} columnIndex
-            * @param {Number} newSize
-            */
-           "columnresize" : true,
-           /**
-            * @event columnmove
-            * Fires when the user moves a column
-            * @param {Number} oldIndex
-            * @param {Number} newIndex
-            */
-           "columnmove" : true,
-           /**
-            * @event startdrag
-            * Fires when row(s) start being dragged
-            * @param {Grid} this
-            * @param {Roo.GridDD} dd The drag drop object
-            * @param {event} e The raw browser event
-            */
-           "startdrag" : true,
-           /**
-            * @event enddrag
-            * Fires when a drag operation is complete
-            * @param {Grid} this
-            * @param {Roo.GridDD} dd The drag drop object
-            * @param {event} e The raw browser event
-            */
-           "enddrag" : true,
-           /**
-            * @event dragdrop
-            * Fires when dragged row(s) are dropped on a valid DD target
-            * @param {Grid} this
-            * @param {Roo.GridDD} dd The drag drop object
-            * @param {String} targetId The target drag drop object
-            * @param {event} e The raw browser event
-            */
-           "dragdrop" : true,
-           /**
-            * @event dragover
-            * Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
-            * @param {Grid} this
-            * @param {Roo.GridDD} dd The drag drop object
-            * @param {String} targetId The target drag drop object
-            * @param {event} e The raw browser event
-            */
-           "dragover" : true,
-           /**
-            * @event dragenter
-            *  Fires when the dragged row(s) first cross another DD target while being dragged
-            * @param {Grid} this
-            * @param {Roo.GridDD} dd The drag drop object
-            * @param {String} targetId The target drag drop object
-            * @param {event} e The raw browser event
-            */
-           "dragenter" : true,
-           /**
-            * @event dragout
-            * Fires when the dragged row(s) leave another DD target while being dragged
-            * @param {Grid} this
-            * @param {Roo.GridDD} dd The drag drop object
-            * @param {String} targetId The target drag drop object
-            * @param {event} e The raw browser event
-            */
-           "dragout" : true,
         /**
-            * @event rowclass
-            * Fires when the dragged row(s) leave another DD target while being dragged
-            * @param {GridView} gridview The grid view
-            * @param {Object} rowcfg, contains record, rowIndex and rowClass - set rowClass to add a style.
-            */
+         * @event headercontextmenu
+         * Fires when a header is right clicked
+         * @param {Grid} this
+         * @param {Number} columnIndex
+         * @param {Roo.EventObject} e
+         */
+        "headercontextmenu" : true,
+        /**
+         * @event bodyscroll
+         * Fires when the body element is scrolled
+         * @param {Number} scrollLeft
+         * @param {Number} scrollTop
+         */
+        "bodyscroll" : true,
+        /**
+         * @event columnresize
+         * Fires when the user resizes a column
+         * @param {Number} columnIndex
+         * @param {Number} newSize
+         */
+        "columnresize" : true,
+        /**
+         * @event columnmove
+         * Fires when the user moves a column
+         * @param {Number} oldIndex
+         * @param {Number} newIndex
+         */
+        "columnmove" : true,
+        /**
+         * @event startdrag
+         * Fires when row(s) start being dragged
+         * @param {Grid} this
+         * @param {Roo.GridDD} dd The drag drop object
+         * @param {event} e The raw browser event
+         */
+        "startdrag" : true,
+        /**
+         * @event enddrag
+         * Fires when a drag operation is complete
+         * @param {Grid} this
+         * @param {Roo.GridDD} dd The drag drop object
+         * @param {event} e The raw browser event
+         */
+        "enddrag" : true,
+        /**
+         * @event dragdrop
+         * Fires when dragged row(s) are dropped on a valid DD target
+         * @param {Grid} this
+         * @param {Roo.GridDD} dd The drag drop object
+         * @param {String} targetId The target drag drop object
+         * @param {event} e The raw browser event
+         */
+        "dragdrop" : true,
+        /**
+         * @event dragover
+         * Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
+         * @param {Grid} this
+         * @param {Roo.GridDD} dd The drag drop object
+         * @param {String} targetId The target drag drop object
+         * @param {event} e The raw browser event
+         */
+        "dragover" : true,
+        /**
+         * @event dragenter
+         *  Fires when the dragged row(s) first cross another DD target while being dragged
+         * @param {Grid} this
+         * @param {Roo.GridDD} dd The drag drop object
+         * @param {String} targetId The target drag drop object
+         * @param {event} e The raw browser event
+         */
+        "dragenter" : true,
+        /**
+         * @event dragout
+         * Fires when the dragged row(s) leave another DD target while being dragged
+         * @param {Grid} this
+         * @param {Roo.GridDD} dd The drag drop object
+         * @param {String} targetId The target drag drop object
+         * @param {event} e The raw browser event
+         */
+        "dragout" : true,
+        /**
+         * @event rowclass
+         * Fires when a row is rendered, so you can change add a style to it.
+         * @param {GridView} gridview The grid view
+         * @param {Object} rowcfg contains record, rowIndex and rowClass - set rowClass to add a style.
+         */
         'rowclass' : true,
-        
+
         /**
          * @event render
          * Fires when the grid is rendered
@@ -32845,98 +32846,98 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
     },
 
     init: function(grid){
-               Roo.grid.GridView.superclass.init.call(this, grid);
+        Roo.grid.GridView.superclass.init.call(this, grid);
 
-               this.bind(grid.dataSource, grid.colModel);
+        this.bind(grid.dataSource, grid.colModel);
 
-           grid.on("headerclick", this.handleHeaderClick, this);
+        grid.on("headerclick", this.handleHeaderClick, this);
 
         if(grid.trackMouseOver){
             grid.on("mouseover", this.onRowOver, this);
-               grid.on("mouseout", this.onRowOut, this);
-           }
-           grid.cancelTextSelection = function(){};
-               this.gridId = grid.id;
-
-               var tpls = this.templates || {};
-
-               if(!tpls.master){
-                   tpls.master = new Roo.Template(
-                      '<div class="x-grid" hidefocus="true">',
-                         '<div class="x-grid-topbar"></div>',
-                         '<div class="x-grid-scroller"><div></div></div>',
-                         '<div class="x-grid-locked">',
-                             '<div class="x-grid-header">{lockedHeader}</div>',
-                             '<div class="x-grid-body">{lockedBody}</div>',
-                         "</div>",
-                         '<div class="x-grid-viewport">',
-                             '<div class="x-grid-header">{header}</div>',
-                             '<div class="x-grid-body">{body}</div>',
-                         "</div>",
-                         '<div class="x-grid-bottombar"></div>',
-                         '<a href="#" class="x-grid-focus" tabIndex="-1"></a>',
-                         '<div class="x-grid-resize-proxy">&#160;</div>',
-                      "</div>"
-                   );
-                   tpls.master.disableformats = true;
-               }
+            grid.on("mouseout", this.onRowOut, this);
+        }
+        grid.cancelTextSelection = function(){};
+        this.gridId = grid.id;
+
+        var tpls = this.templates || {};
+
+        if(!tpls.master){
+            tpls.master = new Roo.Template(
+               '<div class="x-grid" hidefocus="true">',
+                  '<div class="x-grid-topbar"></div>',
+                  '<div class="x-grid-scroller"><div></div></div>',
+                  '<div class="x-grid-locked">',
+                      '<div class="x-grid-header">{lockedHeader}</div>',
+                      '<div class="x-grid-body">{lockedBody}</div>',
+                  "</div>",
+                  '<div class="x-grid-viewport">',
+                      '<div class="x-grid-header">{header}</div>',
+                      '<div class="x-grid-body">{body}</div>',
+                  "</div>",
+                  '<div class="x-grid-bottombar"></div>',
+                  '<a href="#" class="x-grid-focus" tabIndex="-1"></a>',
+                  '<div class="x-grid-resize-proxy">&#160;</div>',
+               "</div>"
+            );
+            tpls.master.disableformats = true;
+        }
 
-               if(!tpls.header){
-                   tpls.header = new Roo.Template(
-                      '<table border="0" cellspacing="0" cellpadding="0">',
-                      '<tbody><tr class="x-grid-hd-row">{cells}</tr></tbody>',
-                      "</table>{splits}"
-                   );
-                   tpls.header.disableformats = true;
-               }
-               tpls.header.compile();
-
-               if(!tpls.hcell){
-                   tpls.hcell = new Roo.Template(
-                       '<td class="x-grid-hd x-grid-td-{id} {cellId}"><div title="{title}" class="x-grid-hd-inner x-grid-hd-{id}">',
-                       '<div class="x-grid-hd-text" unselectable="on">{value}<img class="x-grid-sort-icon" src="', Roo.BLANK_IMAGE_URL, '" /></div>',
-                       "</div></td>"
-                    );
-                    tpls.hcell.disableFormats = true;
-               }
-               tpls.hcell.compile();
+        if(!tpls.header){
+            tpls.header = new Roo.Template(
+               '<table border="0" cellspacing="0" cellpadding="0">',
+               '<tbody><tr class="x-grid-hd-row">{cells}</tr></tbody>',
+               "</table>{splits}"
+            );
+            tpls.header.disableformats = true;
+        }
+        tpls.header.compile();
 
-               if(!tpls.hsplit){
-                   tpls.hsplit = new Roo.Template('<div class="x-grid-split {splitId} x-grid-split-{id}" style="{style}" unselectable="on">&#160;</div>');
-                   tpls.hsplit.disableFormats = true;
-               }
-               tpls.hsplit.compile();
-
-               if(!tpls.body){
-                   tpls.body = new Roo.Template(
-                      '<table border="0" cellspacing="0" cellpadding="0">',
-                      "<tbody>{rows}</tbody>",
-                      "</table>"
-                   );
-                   tpls.body.disableFormats = true;
-               }
-               tpls.body.compile();
+        if(!tpls.hcell){
+            tpls.hcell = new Roo.Template(
+                '<td class="x-grid-hd x-grid-td-{id} {cellId}"><div title="{title}" class="x-grid-hd-inner x-grid-hd-{id}">',
+                '<div class="x-grid-hd-text" unselectable="on">{value}<img class="x-grid-sort-icon" src="', Roo.BLANK_IMAGE_URL, '" /></div>',
+                "</div></td>"
+             );
+             tpls.hcell.disableFormats = true;
+        }
+        tpls.hcell.compile();
 
-               if(!tpls.row){
-                   tpls.row = new Roo.Template('<tr class="x-grid-row {alt}">{cells}</tr>');
-                   tpls.row.disableFormats = true;
-               }
-               tpls.row.compile();
-
-               if(!tpls.cell){
-                   tpls.cell = new Roo.Template(
-                       '<td class="x-grid-col x-grid-td-{id} {cellId} {css}" tabIndex="0">',
-                       '<div class="x-grid-col-{id} x-grid-cell-inner"><div class="x-grid-cell-text" unselectable="on" {attr}>{value}</div></div>',
-                       "</td>"
-                   );
+        if(!tpls.hsplit){
+            tpls.hsplit = new Roo.Template('<div class="x-grid-split {splitId} x-grid-split-{id}" style="{style}" unselectable="on">&#160;</div>');
+            tpls.hsplit.disableFormats = true;
+        }
+        tpls.hsplit.compile();
+
+        if(!tpls.body){
+            tpls.body = new Roo.Template(
+               '<table border="0" cellspacing="0" cellpadding="0">',
+               "<tbody>{rows}</tbody>",
+               "</table>"
+            );
+            tpls.body.disableFormats = true;
+        }
+        tpls.body.compile();
+
+        if(!tpls.row){
+            tpls.row = new Roo.Template('<tr class="x-grid-row {alt}">{cells}</tr>');
+            tpls.row.disableFormats = true;
+        }
+        tpls.row.compile();
+
+        if(!tpls.cell){
+            tpls.cell = new Roo.Template(
+                '<td class="x-grid-col x-grid-td-{id} {cellId} {css}" tabIndex="0">',
+                '<div class="x-grid-col-{id} x-grid-cell-inner"><div class="x-grid-cell-text" unselectable="on" {attr}>{value}</div></div>',
+                "</td>"
+            );
             tpls.cell.disableFormats = true;
         }
-               tpls.cell.compile();
+        tpls.cell.compile();
 
-               this.templates = tpls;
-       },
+        this.templates = tpls;
+    },
 
-       // remap these for backwards compat
+    // remap these for backwards compat
     onColWidthChange : function(){
         this.updateColumns.apply(this, arguments);
     },
@@ -32958,11 +32959,11 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
         this.updateHeaderSortState();
     },
 
-       onClear : function(){
+    onClear : function(){
         this.refresh();
     },
 
-       onUpdate : function(ds, record){
+    onUpdate : function(ds, record){
         this.refreshRow(record);
     },
 
@@ -33030,9 +33031,9 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
             this.headerPanel.show();
         }
         return this.headerPanel;
-       },
+    },
 
-       /**
+    /**
      * Gets a panel in the footer of the grid that can be used for toolbars etc.
      * After modifying the contents of this panel a call to grid.autoSize() may be
      * required to register any changes in size.
@@ -33044,82 +33045,82 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
             this.footerPanel.show();
         }
         return this.footerPanel;
-       },
+    },
 
-       initElements : function(){
-           var E = Roo.Element;
-           var el = this.grid.getGridEl().dom.firstChild;
-           var cs = el.childNodes;
+    initElements : function(){
+        var E = Roo.Element;
+        var el = this.grid.getGridEl().dom.firstChild;
+        var cs = el.childNodes;
 
-           this.el = new E(el);
-           this.headerPanel = new E(el.firstChild);
-           this.headerPanel.enableDisplayMode("block");
+        this.el = new E(el);
+        this.headerPanel = new E(el.firstChild);
+        this.headerPanel.enableDisplayMode("block");
 
         this.scroller = new E(cs[1]);
-           this.scrollSizer = new E(this.scroller.dom.firstChild);
+        this.scrollSizer = new E(this.scroller.dom.firstChild);
 
-           this.lockedWrap = new E(cs[2]);
-           this.lockedHd = new E(this.lockedWrap.dom.firstChild);
-           this.lockedBody = new E(this.lockedWrap.dom.childNodes[1]);
+        this.lockedWrap = new E(cs[2]);
+        this.lockedHd = new E(this.lockedWrap.dom.firstChild);
+        this.lockedBody = new E(this.lockedWrap.dom.childNodes[1]);
 
-           this.mainWrap = new E(cs[3]);
-           this.mainHd = new E(this.mainWrap.dom.firstChild);
-           this.mainBody = new E(this.mainWrap.dom.childNodes[1]);
+        this.mainWrap = new E(cs[3]);
+        this.mainHd = new E(this.mainWrap.dom.firstChild);
+        this.mainBody = new E(this.mainWrap.dom.childNodes[1]);
 
-           this.footerPanel = new E(cs[4]);
-           this.footerPanel.enableDisplayMode("block");
+        this.footerPanel = new E(cs[4]);
+        this.footerPanel.enableDisplayMode("block");
 
         this.focusEl = new E(cs[5]);
         this.focusEl.swallowEvent("click", true);
         this.resizeProxy = new E(cs[6]);
 
-           this.headerSelector = String.format(
-              '#{0} td.x-grid-hd, #{1} td.x-grid-hd',
-              this.lockedHd.id, this.mainHd.id
-           );
+        this.headerSelector = String.format(
+           '#{0} td.x-grid-hd, #{1} td.x-grid-hd',
+           this.lockedHd.id, this.mainHd.id
+        );
 
-           this.splitterSelector = String.format(
-              '#{0} div.x-grid-split, #{1} div.x-grid-split',
-              this.idToCssName(this.lockedHd.id), this.idToCssName(this.mainHd.id)
-           );
+        this.splitterSelector = String.format(
+           '#{0} div.x-grid-split, #{1} div.x-grid-split',
+           this.idToCssName(this.lockedHd.id), this.idToCssName(this.mainHd.id)
+        );
     },
     idToCssName : function(s)
     {
         return s.replace(/[^a-z0-9]+/ig, '-');
     },
 
-       getHeaderCell : function(index){
-           return Roo.DomQuery.select(this.headerSelector)[index];
-       },
+    getHeaderCell : function(index){
+        return Roo.DomQuery.select(this.headerSelector)[index];
+    },
 
-       getHeaderCellMeasure : function(index){
-           return this.getHeaderCell(index).firstChild;
-       },
+    getHeaderCellMeasure : function(index){
+        return this.getHeaderCell(index).firstChild;
+    },
 
-       getHeaderCellText : function(index){
-           return this.getHeaderCell(index).firstChild.firstChild;
-       },
+    getHeaderCellText : function(index){
+        return this.getHeaderCell(index).firstChild.firstChild;
+    },
 
-       getLockedTable : function(){
-           return this.lockedBody.dom.firstChild;
-       },
+    getLockedTable : function(){
+        return this.lockedBody.dom.firstChild;
+    },
 
-       getBodyTable : function(){
-           return this.mainBody.dom.firstChild;
-       },
+    getBodyTable : function(){
+        return this.mainBody.dom.firstChild;
+    },
 
-       getLockedRow : function(index){
-           return this.getLockedTable().rows[index];
-       },
+    getLockedRow : function(index){
+        return this.getLockedTable().rows[index];
+    },
 
-       getRow : function(index){
-           return this.getBodyTable().rows[index];
-       },
+    getRow : function(index){
+        return this.getBodyTable().rows[index];
+    },
 
-       getRowComposite : function(index){
-           if(!this.rowEl){
-               this.rowEl = new Roo.CompositeElementLite();
-           }
+    getRowComposite : function(index){
+        if(!this.rowEl){
+            this.rowEl = new Roo.CompositeElementLite();
+        }
         var els = [], lrow, mrow;
         if(lrow = this.getLockedRow(index)){
             els.push(lrow);
@@ -33128,27 +33129,27 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
             els.push(mrow);
         }
         this.rowEl.elements = els;
-           return this.rowEl;
-       },
+        return this.rowEl;
+    },
 
-       getCell : function(rowIndex, colIndex){
-           var locked = this.cm.getLockedCount();
-           var source;
-           if(colIndex < locked){
-               source = this.lockedBody.dom.firstChild;
-           }else{
-               source = this.mainBody.dom.firstChild;
-               colIndex -= locked;
-           }
+    getCell : function(rowIndex, colIndex){
+        var locked = this.cm.getLockedCount();
+        var source;
+        if(colIndex < locked){
+            source = this.lockedBody.dom.firstChild;
+        }else{
+            source = this.mainBody.dom.firstChild;
+            colIndex -= locked;
+        }
         return source.rows[rowIndex].childNodes[colIndex];
-       },
+    },
 
-       getCellText : function(rowIndex, colIndex){
-           return this.getCell(rowIndex, colIndex).firstChild.firstChild;
-       },
+    getCellText : function(rowIndex, colIndex){
+        return this.getCell(rowIndex, colIndex).firstChild.firstChild;
+    },
 
-       getCellBox : function(cell){
-           var b = this.fly(cell).getBox();
+    getCellBox : function(cell){
+        var b = this.fly(cell).getBox();
         if(Roo.isOpera){ // opera fails to report the Y
             b.y = cell.offsetTop + this.mainBody.getY();
         }
@@ -33193,20 +33194,21 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
     },
 
     getColumnId : function(index){
-           return this.cm.getColumnId(index);
-       },
+        return this.cm.getColumnId(index);
+    },
 
-       getSplitters : function(){
-           if(this.splitterSelector){
-              return Roo.DomQuery.select(this.splitterSelector);
-           }else{
-               return null;
-           }
-       },
+    getSplitters : function()
+    {
+        if(this.splitterSelector){
+           return Roo.DomQuery.select(this.splitterSelector);
+        }else{
+            return null;
+      }
+    },
 
-       getSplitter : function(index){
-           return this.getSplitters()[index];
-       },
+    getSplitter : function(index){
+        return this.getSplitters()[index];
+    },
 
     onRowOver : function(e, t){
         var row;
@@ -33223,7 +33225,7 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
     },
 
     renderHeaders : function(){
-           var cm = this.cm;
+        var cm = this.cm;
         var ct = this.templates.hcell, ht = this.templates.header, st = this.templates.hsplit;
         var cb = [], lb = [], sb = [], lsb = [], p = {};
         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
@@ -33243,9 +33245,9 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
         }
         return [ht.apply({cells: lb.join(""), splits:lsb.join("")}),
                 ht.apply({cells: cb.join(""), splits:sb.join("")})];
-       },
+    },
 
-       updateHeaders : function(){
+    updateHeaders : function(){
         var html = this.renderHeaders();
         this.lockedHd.update(html[0]);
         this.mainHd.update(html[1]);
@@ -33314,7 +33316,7 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
         var sright = sleft + c.clientWidth;
 
         if(ctop < stop){
-               c.scrollTop = ctop;
+            c.scrollTop = ctop;
         }else if(cbot > sbot){
             c.scrollTop = cbot-ch;
         }
@@ -33372,7 +33374,7 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
             var pos = 0, locked = true;
             for(var i = 0, len = cm.getColumnCount(); i < len; i++){
                 if(cm.isHidden(i)) continue;
-                var w = cm.getColumnWidth(i);
+                var w = cm.getColumnWidth(i); // make sure it's a number
                 if(!cm.isLocked(i) && locked){
                     pos = 0;
                     locked = false;
@@ -33624,7 +33626,7 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
                              
                             record: r,
                             rowIndex : rowIndex,
-                            rowClass : '';
+                            rowClass : ''
                         }
                         this.grid.fireEvent('rowclass', this, rowcfg);
                         alt.push(rowcfg.rowClass);
@@ -33677,7 +33679,7 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
                              
                             record: r,
                             rowIndex : rowIndex,
-                            rowClass : '';
+                            rowClass : ''
                         }
                         this.grid.fireEvent('rowclass', this, rowcfg);
                         alt.push(rowcfg.rowClass);
@@ -33895,10 +33897,10 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
             return;
         }
         var dm = g.dataSource, cm = g.colModel;
-           if(!cm.isSortable(index)){
+        if(!cm.isSortable(index)){
             return;
         }
-           g.stopEditing();
+        g.stopEditing();
         dm.sort(cm.getDataIndex(index));
     },
 
@@ -34819,7 +34821,7 @@ Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
      * @return {Number}
      */
     getColumnWidth : function(col){
-        return this.config[col].width || this.defaultWidth;
+        return this.config[col].width * 1 || this.defaultWidth;
     },
 
     /**
@@ -36874,5 +36876,956 @@ Roo.apply(Roo.XComponent, {
    
     
     
+});
+ //<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
+                    });
+                }
+            }
+        }
+    ]
+  
+  
+})
+
+
+   /*
+ * Original code for Roojs - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * 
+ * This needs some more thought..
+ * 
+ * 
+ * 
+ * @class Roo.XComponent
+ * @extends Roo.data.Observable
+ * 
+ * A delayed Element creator...
+ * 
+ * Mypart.xyx = new Roo.XComponent({
+
+    parent : 'Mypart.xyz', // empty == document.element.!!
+    order : '001',
+    name : 'xxxx'
+    region : 'xxxx'
+    disabled : function() {} 
+     
+    items : [  // technically only one component..
+        {
+            xtype : 'NestedLayoutPanel',
+            // technicall
+        }
+     ]
+ *})
+ * 
+ * 
+ * 
+ */
+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 = [];
+    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.
+     * @param {Object} details about module
+     *
+     * 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..
+        })
+     * 
+     */
+    register : function(obj) {
+        this.modules.push(obj);
+         
+    },
+    /**
+     * convert a string to an object..
+     * 
+     */
+    
+    toObject : function(str)
+    {
+        if (typeof(str) == 'object') {
+            return str;
+        }
+        var ar = str.split('.');
+        var rt, o;
+        rt = ar.unshift();
+            /** 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 ()
+    {
+        var modules = this.modules;
+        this.modules = false;
+        
+        Roo.each(modules , function (obj)
+        {
+            obj.parent = this.toObject(obj.parent);
+            
+            if (!obj.parent) {
+                this.topModule = obj;
+                return;
+            }
+            obj.parent = toObject(obj.parent);
+            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) {
+           // console.log(m.modKey);
+            
+            mods.push(m);
+            if (m.module.modules) {
+                m.module.modules.keySort('ASC',  cmp );
+                m.module.modules.each(addMod);
+            }
+            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);
+    }
+    
+     /**
+     * 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;
+        //console.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.MessageBox.hide();
+                _this.topModule.fireEvent('buildcomplete', _this.topModule);
+                return;    
+            }
+            
+            var m = mods.unshift();
+            
+            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.module.disabled) == 'function') ?
+                m.module.disabled.call(m.module.disabled) : m.module.disabled;    
+            }
+            
+            if (disabled) {
+                return progressRun(); // we do not update the display!
+            }
+            
+            m.el = m.parent.el.addxtype(m.items[0]);
+            m.fireEvent('built', m);
+            m.panel = this.el;
+            m.layout = m.panel.layout;    
+             
+            
+        }
+        progressRun.defer(1, _this);
+     
+        
+        
+    }
+     
+   
+    
+    
 });
  
\ No newline at end of file