X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=roojs-debug.js;h=a228ec51fc925deddf08966b474ca05c59336e10;hb=HEAD;hp=8e7b3b9db23d3c3400f1a1995d9ad1b8ba88e45b;hpb=7dfd0d3cd68424e103991ef6946d2368cbe08a81;p=roojs1

diff --git a/roojs-debug.js b/roojs-debug.js
index 8e7b3b9db2..a228ec51fc 100644
--- a/roojs-debug.js
+++ b/roojs-debug.js
@@ -2705,7 +2705,10 @@ Roo.lib.Event = function() {
          * @param {DomForm} form element
          * @return {String} urlencode form output.
          */
-        serializeForm : function(form) {
+        serializeForm : function(form, include_disabled) {
+            
+            include_disabled = typeof(include_disabled) == 'undefined' ? false : include_disabled;
+
             if(typeof form == 'string') {
                 form = (document.getElementById(form) || document.forms[form]);
             }
@@ -2713,7 +2716,7 @@ Roo.lib.Event = function() {
             var el, name, val, disabled, data = '', hasSubmit = false;
             for (var i = 0; i < form.elements.length; i++) {
                 el = form.elements[i];
-                disabled = form.elements[i].disabled;
+                disabled = include_disabled ? false : form.elements[i].disabled;
                 name = form.elements[i].name;
                 val = form.elements[i].value;
 
@@ -16633,8 +16636,8 @@ Roo.extend(Roo.state.Provider, Roo.util.Observable, {
 init : function(){
    Roo.state.Manager.setProvider(new Roo.state.CookieProvider());
    ...
-   // supposed you have a {@link Roo.BorderLayout}
-   var layout = new Roo.BorderLayout(...);
+   // supposed you have a {@link Roo.layout.Border}
+   var layout = new Roo.layout.Border(...);
    layout.restoreState();
    // or a {Roo.BasicDialog}
    var dialog = new Roo.BasicDialog(...);
@@ -18065,7 +18068,7 @@ Roo.extend(Roo.Layer, Roo.Element, {
  *
  * Each sub module is expected to have a parent pointing to the class name of it's parent module.
  *
- * When the top level is false, a 'Roo.BorderLayout' is created and the element is flagged as 'topModule'
+ * When the top level is false, a 'Roo.layout.Border' is created and the element is flagged as 'topModule'
  * - if mulitple topModules exist, the last one is defined as the top module.
  *
  * Embeded Roo
@@ -18284,7 +18287,7 @@ Roo.extend(Roo.XComponent, Roo.util.Observable, {
             
             el = el ? Roo.get(el) : false; 	
             
-            if (typeof(Roo.BorderLayout) == 'undefined' ) {
+            if (typeof(Roo.layout.Border) == 'undefined' ) {
                 
                 this.parent =  {
                     el : new Roo.bootstrap.layout.Border({
@@ -18307,7 +18310,7 @@ Roo.extend(Roo.XComponent, Roo.util.Observable, {
             
                 // it's a top level one..
                 this.parent =  {
-                    el : new Roo.BorderLayout(el || document.body, {
+                    el : new Roo.layout.Border(el || document.body, {
                         center: {
                             titlebar: false,
                             autoScroll:false,
@@ -36585,7 +36588,7 @@ if(!dialog){
     dialog.addButton("Build It!", this.getDownload, this);
 
     // we can even add nested layouts
-    var innerLayout = new Roo.BorderLayout("dl-inner", {
+    var innerLayout = new Roo.layout.Border("dl-inner", {
         east: {
             initialSize: 200,
             autoScroll:true,
@@ -36630,7 +36633,7 @@ Roo.LayoutDialog = function(el, cfg){
     config.autoTabs = false;
     Roo.LayoutDialog.superclass.constructor.call(this, el, config);
     this.body.setStyle({overflow:"hidden", position:"relative"});
-    this.layout = new Roo.BorderLayout(this.body.dom, config);
+    this.layout = new Roo.layout.Border(this.body.dom, config);
     this.layout.monitorWindowResize = false;
     this.el.addClass("x-dlg-auto-layout");
     // fix case when center region overwrites center function
@@ -36648,19 +36651,19 @@ Roo.extend(Roo.LayoutDialog, Roo.BasicDialog, {
     
     
     /**
-     * @cfg {Roo.LayoutRegion} east  
+     * @cfg {Roo.layout.Region} east  
      */
     /**
-     * @cfg {Roo.LayoutRegion} west
+     * @cfg {Roo.layout.Region} west
      */
     /**
-     * @cfg {Roo.LayoutRegion} south
+     * @cfg {Roo.layout.Region} south
      */
     /**
-     * @cfg {Roo.LayoutRegion} north
+     * @cfg {Roo.layout.Region} north
      */
     /**
-     * @cfg {Roo.LayoutRegion} center
+     * @cfg {Roo.layout.Region} center
      */
     /**
      * @cfg {Roo.Button} buttons[]  Bottom buttons..
@@ -36685,7 +36688,7 @@ Roo.extend(Roo.LayoutDialog, Roo.BasicDialog, {
 
     /**
      * Get the BorderLayout for this dialog
-     * @return {Roo.BorderLayout}
+     * @return {Roo.layout.Border}
      */
     getLayout : function(){
         return this.layout;
@@ -43136,9 +43139,9 @@ Roo.extend(Roo.form.TextField, Roo.form.Field,  {
         if(this.selectOnFocus){
             this.on("focus", this.preFocus, this);
         }
-	if (!this.allowLeadingSpace) {
-	    this.on('blur', this.cleanLeadingSpace, this);
-	}
+		if (!this.allowLeadingSpace) {
+			this.on('blur', this.cleanLeadingSpace, this);
+		}
 	
         if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Roo.form.VTypes[this.vtype+'Mask']))){
             this.el.on("keypress", this.filterKeys, this);
@@ -43871,6 +43874,10 @@ Roo.extend(Roo.form.NumberField, Roo.form.TextField,  {
      * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
      */
     decimalSeparator : ".",
+    /**
+     * @cfg {String} thousandSeparator Character(s) to allow as the thousand separator (defaults to '') - set to ',' for example
+     */
+    thousandSeparator : "",
     /**
      * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
      */
@@ -43900,14 +43907,60 @@ Roo.extend(Roo.form.NumberField, Roo.form.TextField,  {
      * if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
      */
     nanText : "{0} is not a valid number",
-
+    
+    hiddenField : false,
+     
+    onRender : function(ct, position)
+    {
+        Roo.form.TextField.superclass.onRender.call(this, ct, position);
+    
+            //this.el.dom.removeAttribute('name'); 
+        Roo.log("Changing name?");
+        if (this.thousandSeparator != '') {
+            this.el.dom.setAttribute('name', this.name + '____hidden___' ); 
+            this.hiddenField = this.el.insertSibling({ tag:'input', type:'hidden', name: this.name },
+                        'before', true);
+            this.hiddenField.value = this.value ? this.parseValue(this.value) : '';
+            this.el.on('blur', this.onBlur, this);
+        }
+        
+            // prevent input submission
+        
+            
+            
+    },
+     onBlur : function(){
+        this.beforeBlur();
+        if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
+            this.el.removeClass(this.focusClass);
+        }
+        this.hasFocus = false;
+        if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){
+            this.validate();
+        }
+        var v = this.getValue();
+        if(String(v) !== String(this.startValue)){
+            this.setValue( this.parseValue(v));
+            this.fireEvent('change', this, v, this.startValue);
+        }
+        this.fireEvent("blur", this);
+    },
+    
+    // override name, so that it works with hidden field.
+    getName: function(){
+        if (this.thousandSeparator != '') {
+            return this.name;
+        }
+        return Roo.form.TextField.superclass.getName.call(this);
+    },
     // private
     initEvents : function(){
-        Roo.form.NumberField.superclass.initEvents.call(this);
+          
         var allowed = "0123456789";
         if(this.allowDecimals){
             allowed += this.decimalSeparator;
         }
+        allowed += this.thousandSeparator;
         if(this.allowNegative){
             allowed += "-";
         }
@@ -43955,7 +44008,7 @@ Roo.extend(Roo.form.NumberField, Roo.form.TextField,  {
 
     // private
     parseValue : function(value){
-        value = parseFloat(String(value).replace(this.decimalSeparator, "."));
+        value = parseFloat(String(value).replace(this.decimalSeparator, ".").split(this.thousandSeparator).join(''));
         return isNaN(value) ? '' : value;
     },
 
@@ -43970,7 +44023,15 @@ Roo.extend(Roo.form.NumberField, Roo.form.TextField,  {
 
     setValue : function(v){
         v = this.fixPrecision(v);
+        if(this.thousandSeparator != ''){
+            v = Roo.util.Format.number(v, this.decimalPrecision, this.thousandSeparator);
+        } 
         Roo.form.NumberField.superclass.setValue.call(this, String(v).replace(".", this.decimalSeparator));
+        if (this.hiddenField !== false) {
+            this.hiddenField.value = v ? this.parseValue(v) : '';
+        }
+        
+
     },
 
     // private
@@ -44327,7 +44388,7 @@ dateField.setValue('2006-5-4');
     // private
     // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
     onTriggerClick : function(){
-        if(this.disabled){
+        if(this.disabled || this.readOnly){
             return;
         }
         if(this.menu == null){
@@ -47920,6 +47981,49 @@ Roo.extend(Roo.htmleditor.FilterComment, Roo.htmleditor.Filter,
     {
         n.parentNode.removeChild(n);
     }
+});/**
+ * @class Roo.htmleditor.FilterEmpty
+ * filter empty elements
+ * @constructor
+ * Run a new Empty Filter
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.FilterEmpty = function(cfg)
+{
+    // no need to apply config.
+    this.walk(cfg.node);
+}
+
+Roo.extend(Roo.htmleditor.FilterEmpty, Roo.htmleditor.FilterBlack,
+{
+     
+    tag : true,
+     
+ 
+    replaceTag : function(node)
+    {
+        // start from leaf node
+        if(node.hasChildNodes()) {
+            this.walk(node);
+        }
+
+        // only filter empty leaf element with certain tags
+        if(
+            ['B', 'I', 'U', 'S'].indexOf(node.tagName) < 0
+            ||
+            node.attributes && node.attributes.length > 0
+            ||
+            node.hasChildNodes()
+        ) {
+            return false; // don't walk
+        }
+
+        Roo.htmleditor.FilterBlack.prototype.replaceTag.call(this, node);
+        return false; // don't walk
+     
+    }
+    
 });/**
  * @class Roo.htmleditor.FilterKeepChildren
  * remove tags but keep children
@@ -48615,12 +48719,12 @@ Roo.htmleditor.FilterStyleToTag = function(cfg)
 {
     
     this.tags = {
-        B  : [ 'fontWeight' , 'bold'],
-        I :  [ 'fontStyle' , 'italic'],
+        B  : [ 'fontWeight' , 'bold', 'font-weight'],
+        I :  [ 'fontStyle' , 'italic', 'font-style'],
         //pre :  [ 'font-style' , 'italic'],
         // h1.. h6 ?? font-size?
-        SUP : [ 'verticalAlign' , 'super' ],
-        SUB : [ 'verticalAlign' , 'sub' ]
+        SUP : [ 'verticalAlign' , 'super', 'vertical-align'],
+        SUB : [ 'verticalAlign' , 'sub', 'vertical-align']
         
         
     };
@@ -48653,7 +48757,7 @@ Roo.extend(Roo.htmleditor.FilterStyleToTag, Roo.htmleditor.Filter,
         for (var k in this.tags) {
             if (node.style[this.tags[k][0]] == this.tags[k][1]) {
                 inject.push(k);
-                node.style.removeProperty(this.tags[k][0]);
+                node.style.removeProperty(this.tags[k][2]);
             }
         }
         if (!inject.length) {
@@ -48666,7 +48770,7 @@ Roo.extend(Roo.htmleditor.FilterStyleToTag, Roo.htmleditor.Filter,
             nn.appendChild(nc);
             nn = nc;
         });
-        for(var i = 0;i < cn.length;cn++) {
+        for(var i = 0;i < cn.length;i++) {
             node.removeChild(cn[i]);
             nn.appendChild(cn[i]);
         }
@@ -50565,8 +50669,11 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
                 maxWidth : iw + ' !important', // this is not getting rendered?
                 margin : m  
                 
-            }
+            },
+            width: this.align == 'center' ?  this.width : '100%' 
+
         };
+        
         /*
         '<div class="{0}" width="420" height="315" src="{1}" frameborder="0" allowfullscreen>' +
                     '<a href="{2}">' + 
@@ -51836,7 +51943,13 @@ Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
                 if (this.colWidths[0] != false && table[r][c].colspan > 1) {
                     var el = Roo.htmleditor.Block.factory(table[r][c].cell);
                     var width = 0;
+                    var lv = false;
                     for(var i = 0; i < table[r][c].colspan; i ++) {
+                        if (typeof(this.colWidths[c + i]) != 'undefined') {
+                            lv = this.colWidths[c + i];
+                        } else {
+                            this.colWidths[c + i] = lv;
+                        }
                         width += Math.floor(this.colWidths[c + i]);
                     }
                     el.width = width  +'%';
@@ -51906,7 +52019,11 @@ Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
                  this.colWidths[i] = nw;
                 return;
             }
-            this.colWidths[i] += otherAdd
+            if (typeof(this.colWidths[i]) == 'undefined') {
+                this.colWidths[i] = otherAdd;
+            } else {
+                this.colWidths[i] += otherAdd;
+            }
         }, this);
         this.updateWidths(table);
          
@@ -51926,7 +52043,12 @@ Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
                 this.colWidths[i] = nw;
                 return;
             }
-            this.colWidths[i] -= otherSub
+            if (typeof(this.colWidths[i]) == 'undefined') {
+                this.colWidths[i] = otherSub;
+            } else {
+                this.colWidths[i] -= otherSub;
+            }
+            
         }, this);
         this.updateWidths(table);
          
@@ -52356,6 +52478,16 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
             
            
             if (this.enableBlocks) {
+                Array.from(bd.getElementsByTagName('img')).forEach(function(img) {
+                    var fig = img.closest('figure');
+                    if (fig) {
+                        var bf = new Roo.htmleditor.BlockFigure({
+                            node : fig
+                        });
+                        bf.updateElement();
+                    }
+                    
+                });
                 new Roo.htmleditor.FilterBlock({ node : div });
             }
             
@@ -52363,7 +52495,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
             
             //?? tidy?
             if (this.autoClean) {
-                
+                new Roo.htmleditor.FilterBlack({ node : div, tag : this.black});
                 new Roo.htmleditor.FilterAttributes({
                     node : div,
                     attrib_white : [
@@ -52389,6 +52521,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
                             ],
                     attrib_clean : ['href', 'src' ] 
                 });
+                new Roo.htmleditor.FilterEmpty({ node : div});
                 
                 var tidy = new Roo.htmleditor.TidySerializer({
                     inner:  true
@@ -52706,6 +52839,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
             new Roo.htmleditor.FilterSpan({ node : d });
             new Roo.htmleditor.FilterLongBr({ node : d });
             new Roo.htmleditor.FilterComment({ node : d });
+            new Roo.htmleditor.FilterEmpty({ node : d});
             
             
         }
@@ -60492,7 +60626,7 @@ Roo.extend(Roo.DDView, Roo.View, {
 		}
     }
 });
-/*
+Roo.layout = {};/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -60504,12 +60638,12 @@ Roo.extend(Roo.DDView, Roo.View, {
  */
  
 /**
- * @class Roo.LayoutManager
+ * @class Roo.layout.Manager
  * @extends Roo.util.Observable
  * Base class for layout managers.
  */
-Roo.LayoutManager = function(container, config){
-    Roo.LayoutManager.superclass.constructor.call(this);
+Roo.layout.Manager = function(container, config){
+    Roo.layout.Manager.superclass.constructor.call(this);
     this.el = Roo.get(container);
     // ie scrollbar fix
     if(this.el.dom == document.body && Roo.isIE && !config.allowScroll){
@@ -60526,26 +60660,26 @@ Roo.LayoutManager = function(container, config){
         /**
          * @event layout
          * Fires when a layout is performed. 
-         * @param {Roo.LayoutManager} this
+         * @param {Roo.layout.Manager} this
          */
         "layout" : true,
         /**
          * @event regionresized
          * Fires when the user resizes a region. 
-         * @param {Roo.LayoutRegion} region The resized region
+         * @param {Roo.layout.Region} region The resized region
          * @param {Number} newSize The new size (width for east/west, height for north/south)
          */
         "regionresized" : true,
         /**
          * @event regioncollapsed
          * Fires when a region is collapsed. 
-         * @param {Roo.LayoutRegion} region The collapsed region
+         * @param {Roo.layout.Region} region The collapsed region
          */
         "regioncollapsed" : true,
         /**
          * @event regionexpanded
          * Fires when a region is expanded.  
-         * @param {Roo.LayoutRegion} region The expanded region
+         * @param {Roo.layout.Region} region The expanded region
          */
         "regionexpanded" : true
     });
@@ -60553,7 +60687,7 @@ Roo.LayoutManager = function(container, config){
     Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
 };
 
-Roo.extend(Roo.LayoutManager, Roo.util.Observable, {
+Roo.extend(Roo.layout.Manager, Roo.util.Observable, {
     /**
      * Returns true if this layout is currently being updated
      * @return {Boolean}
@@ -60626,7 +60760,7 @@ Roo.extend(Roo.LayoutManager, Roo.util.Observable, {
     /**
      * Returns the specified region.
      * @param {String} target The region key ('center', 'north', 'south', 'east' or 'west')
-     * @return {Roo.LayoutRegion}
+     * @return {Roo.layout.Region}
      */
     getRegion : function(target){
         return this.regions[target.toLowerCase()];
@@ -60648,8 +60782,8 @@ Roo.extend(Roo.LayoutManager, Roo.util.Observable, {
  * <script type="text/javascript">
  */
 /**
- * @class Roo.BorderLayout
- * @extends Roo.LayoutManager
+ * @class Roo.layout.Border
+ * @extends Roo.layout.Manager
  * @children Roo.panel.Content
  * This class represents a common layout manager used in desktop applications. For screenshots and more details,
  * please see: <br><br>
@@ -60657,7 +60791,7 @@ Roo.extend(Roo.LayoutManager, Roo.util.Observable, {
  * <a href="http://www.jackslocum.com/yui/2006/10/28/cross-browser-web-20-layouts-part-2-ajax-feed-viewer-20/">Cross Browser Layouts - Part 2</a><br><br>
  * Example:
  <pre><code>
- var layout = new Roo.BorderLayout(document.body, {
+ var layout = new Roo.layout.Border(document.body, {
     north: {
         initialSize: 25,
         titlebar: false
@@ -60719,10 +60853,10 @@ the container size if it is not the body element.</b>
 * @param {String/HTMLElement/Element} container The container this layout is bound to
 * @param {Object} config Configuration options
  */
-Roo.BorderLayout = function(container, config){
+Roo.layout.Border = function(container, config){
     config = config || {};
-    Roo.BorderLayout.superclass.constructor.call(this, container, config);
-    this.factory = config.factory || Roo.BorderLayout.RegionFactory;
+    Roo.layout.Border.superclass.constructor.call(this, container, config);
+    this.factory = config.factory || Roo.layout.Border.RegionFactory;
     for(var i = 0, len = this.factory.validRegions.length; i < len; i++) {
     	var target = this.factory.validRegions[i];
     	if(config[target]){
@@ -60731,22 +60865,22 @@ Roo.BorderLayout = function(container, config){
     }
 };
 
-Roo.extend(Roo.BorderLayout, Roo.LayoutManager, {
+Roo.extend(Roo.layout.Border, Roo.layout.Manager, {
 	
 	/**
-	 * @cfg {Roo.LayoutRegion} east
+	 * @cfg {Roo.layout.Region} east
 	 */
 	/**
-	 * @cfg {Roo.LayoutRegion} west
+	 * @cfg {Roo.layout.Region} west
 	 */
 	/**
-	 * @cfg {Roo.LayoutRegion} north
+	 * @cfg {Roo.layout.Region} north
 	 */
 	/**
-	 * @cfg {Roo.LayoutRegion} south
+	 * @cfg {Roo.layout.Region} south
 	 */
 	/**
-	 * @cfg {Roo.LayoutRegion} center
+	 * @cfg {Roo.layout.Region} center
 	 */
     /**
      * Creates and adds a new region if it doesn't already exist.
@@ -60931,7 +61065,7 @@ Roo.extend(Roo.BorderLayout, Roo.LayoutManager, {
         if(!provider){
             provider = Roo.state.Manager;
         }
-        var sm = new Roo.LayoutStateManager();
+        var sm = new Roo.layout.StateManager();
         sm.init(this, provider);
     },
 
@@ -60941,7 +61075,7 @@ Roo.extend(Roo.BorderLayout, Roo.LayoutManager, {
      * a valid ContentPanel config object.  Example:
      * <pre><code>
 // Create the main layout
-var layout = new Roo.BorderLayout('main-ct', {
+var layout = new Roo.layout.Border('main-ct', {
     west: {
         split:true,
         minSize: 175,
@@ -61030,7 +61164,7 @@ layout.addxtype({
     {
         // basically accepts a pannel...
         // can accept a layout region..!?!?
-        //Roo.log('Roo.BorderLayout add ' + cfg.xtype)
+        //Roo.log('Roo.layout.Border add ' + cfg.xtype)
         
         // if (!cfg.xtype.match(/Panel$/)) {
         //     return false;
@@ -61103,7 +61237,7 @@ layout.addxtype({
                 if (region == 'center' && this.active && this.getRegion('center').panels.length < 1) {
                     cfg.background = false;
                 }
-                var layout = new Roo.BorderLayout(el, clayout);
+                var layout = new Roo.layout.Border(el, clayout);
                 
                 ret = new Roo.panel[cfg.xtype](layout, cfg); // new panel!!!!!
                 //console.log('adding nested layout panel '  + cfg.toSource());
@@ -61153,7 +61287,7 @@ layout.addxtype({
                 if (region == 'center' && this.active && this.getRegion('center').panels.length < 1) {
                     cfg.background = false;
                 }
-                var layout = new Roo.BorderLayout(el, clayout);
+                var layout = new Roo.layout.Border(el, clayout);
                 
                 ret = new Roo[cfg.xtype](layout, cfg); // new panel!!!!!
                 //console.log('adding nested layout panel '  + cfg.toSource());
@@ -61254,7 +61388,7 @@ layout.addxtype({
 // shorthand
 var CP = Roo.ContentPanel;
 
-var layout = Roo.BorderLayout.create({
+var layout = Roo.layout.Border.create({
     north: {
         initialSize: 25,
         titlebar: false,
@@ -61305,10 +61439,10 @@ layout.getRegion("center").showPanel("center1");
  * @param config
  * @param targetEl
  */
-Roo.BorderLayout.create = function(config, targetEl){
-    var layout = new Roo.BorderLayout(targetEl || document.body, config);
+Roo.layout.Border.create = function(config, targetEl){
+    var layout = new Roo.layout.Border(targetEl || document.body, config);
     layout.beginUpdate();
-    var regions = Roo.BorderLayout.RegionFactory.validRegions;
+    var regions = Roo.layout.Border.RegionFactory.validRegions;
     for(var j = 0, jlen = regions.length; j < jlen; j++){
         var lr = regions[j];
         if(layout.regions[lr] && config[lr].panels){
@@ -61322,7 +61456,7 @@ Roo.BorderLayout.create = function(config, targetEl){
 };
 
 // private
-Roo.BorderLayout.RegionFactory = {
+Roo.layout.Border.RegionFactory = {
     // private
     validRegions : ["north","south","east","west","center"],
 
@@ -61330,21 +61464,15 @@ Roo.BorderLayout.RegionFactory = {
     create : function(target, mgr, config){
         target = target.toLowerCase();
         if(config.lightweight || config.basic){
-            return new Roo.BasicLayoutRegion(mgr, config, target);
-        }
-        switch(target){
-            case "north":
-                return new Roo.NorthLayoutRegion(mgr, config);
-            case "south":
-                return new Roo.SouthLayoutRegion(mgr, config);
-            case "east":
-                return new Roo.EastLayoutRegion(mgr, config);
-            case "west":
-                return new Roo.WestLayoutRegion(mgr, config);
-            case "center":
-                return new Roo.CenterLayoutRegion(mgr, config);
+            return new Roo.layout.BasicRegion(mgr, config, target);
         }
-        throw 'Layout region "'+target+'" not supported.';
+		var cn = target.charAt(0).toUpperCase() + target.slice(1);
+		if (typeof (Roo.layout[cn]) == 'undefined') {
+			throw 'Layout region "'+target+'" not supported.';
+		}
+		return new Roo.layout[cn](mgr, config);
+         
+        
     }
 };/*
  * Based on:
@@ -61358,24 +61486,24 @@ Roo.BorderLayout.RegionFactory = {
  */
  
 /**
- * @class Roo.BasicLayoutRegion
+ * @class Roo.layout.BasicRegion
  * @extends Roo.util.Observable
  * This class represents a lightweight region in a layout manager. This region does not move dom nodes
  * and does not have a titlebar, tabs or any other features. All it does is size and position 
  * panels. To create a BasicLayoutRegion, add lightweight:true or basic:true to your regions config.
  */
-Roo.BasicLayoutRegion = function(mgr, config, pos, skipConfig){
+Roo.layout.BasicRegion= function(mgr, config, pos, skipConfig){
     this.mgr = mgr;
     this.position  = pos;
     this.events = {
         /**
-         * @scope Roo.BasicLayoutRegion
+         * @scope Roo.layout.BasicRegion
          */
         
         /**
          * @event beforeremove
          * Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
-         * @param {Roo.LayoutRegion} this
+         * @param {Roo.layout.Region} this
          * @param {Roo.panel.Content} panel The panel
          * @param {Object} e The cancel event object
          */
@@ -61383,71 +61511,71 @@ Roo.BasicLayoutRegion = function(mgr, config, pos, skipConfig){
         /**
          * @event invalidated
          * Fires when the layout for this region is changed.
-         * @param {Roo.LayoutRegion} this
+         * @param {Roo.layout.Region} this
          */
         "invalidated" : true,
         /**
          * @event visibilitychange
          * Fires when this region is shown or hidden 
-         * @param {Roo.LayoutRegion} this
+         * @param {Roo.layout.Region} this
          * @param {Boolean} visibility true or false
          */
         "visibilitychange" : true,
         /**
          * @event paneladded
          * Fires when a panel is added. 
-         * @param {Roo.LayoutRegion} this
+         * @param {Roo.layout.Region} this
          * @param {Roo.panel.Content} panel The panel
          */
         "paneladded" : true,
         /**
          * @event panelremoved
          * Fires when a panel is removed. 
-         * @param {Roo.LayoutRegion} this
+         * @param {Roo.layout.Region} this
          * @param {Roo.panel.Content} panel The panel
          */
         "panelremoved" : true,
         /**
          * @event beforecollapse
          * Fires when this region before collapse.
-         * @param {Roo.LayoutRegion} this
+         * @param {Roo.layout.Region} this
          */
         "beforecollapse" : true,
         /**
          * @event collapsed
          * Fires when this region is collapsed.
-         * @param {Roo.LayoutRegion} this
+         * @param {Roo.layout.Region} this
          */
         "collapsed" : true,
         /**
          * @event expanded
          * Fires when this region is expanded.
-         * @param {Roo.LayoutRegion} this
+         * @param {Roo.layout.Region} this
          */
         "expanded" : true,
         /**
          * @event slideshow
          * Fires when this region is slid into view.
-         * @param {Roo.LayoutRegion} this
+         * @param {Roo.layout.Region} this
          */
         "slideshow" : true,
         /**
          * @event slidehide
          * Fires when this region slides out of view. 
-         * @param {Roo.LayoutRegion} this
+         * @param {Roo.layout.Region} this
          */
         "slidehide" : true,
         /**
          * @event panelactivated
          * Fires when a panel is activated. 
-         * @param {Roo.LayoutRegion} this
+         * @param {Roo.layout.Region} this
          * @param {Roo.panel.Content} panel The activated panel
          */
         "panelactivated" : true,
         /**
          * @event resized
          * Fires when the user resizes this region. 
-         * @param {Roo.LayoutRegion} this
+         * @param {Roo.layout.Region} this
          * @param {Number} newSize The new size (width for east/west, height for north/south)
          */
         "resized" : true
@@ -61460,7 +61588,7 @@ Roo.BasicLayoutRegion = function(mgr, config, pos, skipConfig){
     // ensure listeners are added...
     
     if (config.listeners || config.events) {
-        Roo.BasicLayoutRegion.superclass.constructor.call(this, {
+        Roo.layout.BasicRegion.superclass.constructor.call(this, {
             listeners : config.listeners || {},
             events : config.events || {}
         });
@@ -61471,7 +61599,7 @@ Roo.BasicLayoutRegion = function(mgr, config, pos, skipConfig){
     }
 };
 
-Roo.extend(Roo.BasicLayoutRegion, Roo.util.Observable, {
+Roo.extend(Roo.layout.BasicRegion, Roo.util.Observable, {
     getPanelId : function(p){
         return p.getId();
     },
@@ -61672,8 +61800,8 @@ Roo.extend(Roo.BasicLayoutRegion, Roo.util.Observable, {
  */
  
 /**
- * @class Roo.LayoutRegion
- * @extends Roo.BasicLayoutRegion
+ * @class Roo.layout.Region
+ * @extends Roo.layout.BasicRegion
  * This class represents a region in a layout manager.
  * @cfg {Boolean}   collapsible     False to disable collapsing (defaults to true)
  * @cfg {Boolean}   collapsed       True to set the initial display to collapsed (defaults to false)
@@ -61704,8 +61832,8 @@ Roo.extend(Roo.BasicLayoutRegion, Roo.util.Observable, {
  * @cfg {Boolean}   split           To show the splitter
  * @cfg {Boolean}   toolbar         xtype configuration for a toolbar - shows on right of tabbar
  */
-Roo.LayoutRegion = function(mgr, config, pos){
-    Roo.LayoutRegion.superclass.constructor.call(this, mgr, config, pos, true);
+Roo.layout.Region = function(mgr, config, pos){
+    Roo.layout.Region.superclass.constructor.call(this, mgr, config, pos, true);
     var dh = Roo.DomHelper;
     /** This region's container element 
     * @type Roo.Element */
@@ -61739,7 +61867,7 @@ Roo.LayoutRegion = function(mgr, config, pos){
     this.applyConfig(config);
 };
 
-Roo.extend(Roo.LayoutRegion, Roo.BasicLayoutRegion, {
+Roo.extend(Roo.layout.Region, Roo.layout.BasicRegion, {
 
     createBody : function(){
         /** This region's body element 
@@ -62294,22 +62422,22 @@ Roo.extend(Roo.LayoutRegion, Roo.BasicLayoutRegion, {
 
 
 /**
- * @class Roo.SplitLayoutRegion
- * @extends Roo.LayoutRegion
- * Adds a splitbar and other (private) useful functionality to a {@link Roo.LayoutRegion}.
+ * @class Roo.layout.SplitRegion
+ * @extends Roo.layout.Region
+ * Adds a splitbar and other (private) useful functionality to a {@link Roo.layout.Region}.
  */
-Roo.SplitLayoutRegion = function(mgr, config, pos, cursor){
+Roo.layout.SplitRegion = function(mgr, config, pos, cursor){
     this.cursor = cursor;
-    Roo.SplitLayoutRegion.superclass.constructor.call(this, mgr, config, pos);
+    Roo.layout.SplitRegion.superclass.constructor.call(this, mgr, config, pos);
 };
 
-Roo.extend(Roo.SplitLayoutRegion, Roo.LayoutRegion, {
+Roo.extend(Roo.layout.SplitRegion, Roo.layout.Region, {
     splitTip : "Drag to resize.",
     collapsibleSplitTip : "Drag to resize. Double click to hide.",
     useSplitTips : false,
 
     applyConfig : function(config){
-        Roo.SplitLayoutRegion.superclass.applyConfig.call(this, config);
+        Roo.layout.SplitRegion.superclass.applyConfig.call(this, config);
         if(config.split){
             if(!this.split){
                 var splitEl = Roo.DomHelper.append(this.mgr.el.dom, 
@@ -62365,7 +62493,7 @@ Roo.extend(Roo.SplitLayoutRegion, Roo.LayoutRegion, {
     
     hide : function(){
         this.hideSplitter();
-        Roo.SplitLayoutRegion.superclass.hide.call(this);
+        Roo.layout.SplitRegion.superclass.hide.call(this);
     },
 
     hideSplitter : function(){
@@ -62379,7 +62507,7 @@ Roo.extend(Roo.SplitLayoutRegion, Roo.LayoutRegion, {
         if(this.split){
             this.split.el.show();
         }
-        Roo.SplitLayoutRegion.superclass.show.call(this);
+        Roo.layout.SplitRegion.superclass.show.call(this);
     },
     
     beforeSlide: function(){
@@ -62635,14 +62763,14 @@ Roo.extend(Roo.SplitLayoutRegion, Roo.LayoutRegion, {
 /*
  * These classes are private internal classes
  */
-Roo.CenterLayoutRegion = function(mgr, config){
-    Roo.LayoutRegion.call(this, mgr, config, "center");
+Roo.layout.Center = function(mgr, config){
+    Roo.layout.Region.call(this, mgr, config, "center");
     this.visible = true;
     this.minWidth = config.minWidth || 20;
     this.minHeight = config.minHeight || 20;
 };
 
-Roo.extend(Roo.CenterLayoutRegion, Roo.LayoutRegion, {
+Roo.extend(Roo.layout.Center, Roo.layout.Region, {
     hide : function(){
         // center panel can't be hidden
     },
@@ -62659,173 +62787,168 @@ Roo.extend(Roo.CenterLayoutRegion, Roo.LayoutRegion, {
         return this.minHeight;
     }
 });
-
-
-Roo.NorthLayoutRegion = function(mgr, config){
-    Roo.LayoutRegion.call(this, mgr, config, "north", "n-resize");
+Roo.layout.West = function(mgr, config){
+    Roo.layout.SplitRegion.call(this, mgr, config, "west", "w-resize");
     if(this.split){
-        this.split.placement = Roo.SplitBar.TOP;
-        this.split.orientation = Roo.SplitBar.VERTICAL;
-        this.split.el.addClass("x-layout-split-v");
+        this.split.placement = Roo.SplitBar.LEFT;
+        this.split.orientation = Roo.SplitBar.HORIZONTAL;
+        this.split.el.addClass("x-layout-split-h");
     }
-    var size = config.initialSize || config.height;
+    var size = config.initialSize || config.width;
     if(typeof size != "undefined"){
-        this.el.setHeight(size);
+        this.el.setWidth(size);
     }
 };
-Roo.extend(Roo.NorthLayoutRegion, Roo.SplitLayoutRegion, {
-    orientation: Roo.SplitBar.VERTICAL,
+Roo.extend(Roo.layout.West, Roo.layout.SplitRegion, {
+    orientation: Roo.SplitBar.HORIZONTAL,
     getBox : function(){
         if(this.collapsed){
             return this.collapsedEl.getBox();
         }
         var box = this.el.getBox();
         if(this.split){
-            box.height += this.split.el.getHeight();
+            box.width += this.split.el.getWidth();
         }
         return box;
     },
     
     updateBox : function(box){
         if(this.split && !this.collapsed){
-            box.height -= this.split.el.getHeight();
-            this.split.el.setLeft(box.x);
-            this.split.el.setTop(box.y+box.height);
-            this.split.el.setWidth(box.width);
+            var sw = this.split.el.getWidth();
+            box.width -= sw;
+            this.split.el.setLeft(box.x+box.width);
+            this.split.el.setTop(box.y);
+            this.split.el.setHeight(box.height);
         }
         if(this.collapsed){
-            this.updateBody(box.width, null);
+            this.updateBody(null, box.height);
         }
-        Roo.LayoutRegion.prototype.updateBox.call(this, box);
+        Roo.layout.Region.prototype.updateBox.call(this, box);
     }
 });
-
-Roo.SouthLayoutRegion = function(mgr, config){
-    Roo.SplitLayoutRegion.call(this, mgr, config, "south", "s-resize");
+Roo.layout.East = function(mgr, config){
+    Roo.layout.SplitRegion.call(this, mgr, config, "east", "e-resize");
     if(this.split){
-        this.split.placement = Roo.SplitBar.BOTTOM;
-        this.split.orientation = Roo.SplitBar.VERTICAL;
-        this.split.el.addClass("x-layout-split-v");
+        this.split.placement = Roo.SplitBar.RIGHT;
+        this.split.orientation = Roo.SplitBar.HORIZONTAL;
+        this.split.el.addClass("x-layout-split-h");
     }
-    var size = config.initialSize || config.height;
+    var size = config.initialSize || config.width;
     if(typeof size != "undefined"){
-        this.el.setHeight(size);
+        this.el.setWidth(size);
     }
 };
-Roo.extend(Roo.SouthLayoutRegion, Roo.SplitLayoutRegion, {
-    orientation: Roo.SplitBar.VERTICAL,
+Roo.extend(Roo.layout.East, Roo.layout.SplitRegion, {
+    orientation: Roo.SplitBar.HORIZONTAL,
     getBox : function(){
         if(this.collapsed){
             return this.collapsedEl.getBox();
         }
         var box = this.el.getBox();
         if(this.split){
-            var sh = this.split.el.getHeight();
-            box.height += sh;
-            box.y -= sh;
+            var sw = this.split.el.getWidth();
+            box.width += sw;
+            box.x -= sw;
         }
         return box;
     },
-    
+
     updateBox : function(box){
         if(this.split && !this.collapsed){
-            var sh = this.split.el.getHeight();
-            box.height -= sh;
-            box.y += sh;
+            var sw = this.split.el.getWidth();
+            box.width -= sw;
             this.split.el.setLeft(box.x);
-            this.split.el.setTop(box.y-sh);
-            this.split.el.setWidth(box.width);
+            this.split.el.setTop(box.y);
+            this.split.el.setHeight(box.height);
+            box.x += sw;
         }
         if(this.collapsed){
-            this.updateBody(box.width, null);
+            this.updateBody(null, box.height);
         }
-        Roo.LayoutRegion.prototype.updateBox.call(this, box);
+        Roo.layout.Region.prototype.updateBox.call(this, box);
     }
-});
-
-Roo.EastLayoutRegion = function(mgr, config){
-    Roo.SplitLayoutRegion.call(this, mgr, config, "east", "e-resize");
+});Roo.layout.South = function(mgr, config){
+    Roo.layout.SplitRegion.call(this, mgr, config, "south", "s-resize");
     if(this.split){
-        this.split.placement = Roo.SplitBar.RIGHT;
-        this.split.orientation = Roo.SplitBar.HORIZONTAL;
-        this.split.el.addClass("x-layout-split-h");
+        this.split.placement = Roo.SplitBar.BOTTOM;
+        this.split.orientation = Roo.SplitBar.VERTICAL;
+        this.split.el.addClass("x-layout-split-v");
     }
-    var size = config.initialSize || config.width;
+    var size = config.initialSize || config.height;
     if(typeof size != "undefined"){
-        this.el.setWidth(size);
+        this.el.setHeight(size);
     }
 };
-Roo.extend(Roo.EastLayoutRegion, Roo.SplitLayoutRegion, {
-    orientation: Roo.SplitBar.HORIZONTAL,
+Roo.extend(Roo.layout.South, Roo.layout.SplitRegion, {
+    orientation: Roo.SplitBar.VERTICAL,
     getBox : function(){
         if(this.collapsed){
             return this.collapsedEl.getBox();
         }
         var box = this.el.getBox();
         if(this.split){
-            var sw = this.split.el.getWidth();
-            box.width += sw;
-            box.x -= sw;
+            var sh = this.split.el.getHeight();
+            box.height += sh;
+            box.y -= sh;
         }
         return box;
     },
-
+    
     updateBox : function(box){
         if(this.split && !this.collapsed){
-            var sw = this.split.el.getWidth();
-            box.width -= sw;
+            var sh = this.split.el.getHeight();
+            box.height -= sh;
+            box.y += sh;
             this.split.el.setLeft(box.x);
-            this.split.el.setTop(box.y);
-            this.split.el.setHeight(box.height);
-            box.x += sw;
+            this.split.el.setTop(box.y-sh);
+            this.split.el.setWidth(box.width);
         }
         if(this.collapsed){
-            this.updateBody(null, box.height);
+            this.updateBody(box.width, null);
         }
-        Roo.LayoutRegion.prototype.updateBox.call(this, box);
+        Roo.layout.Region.prototype.updateBox.call(this, box);
     }
 });
 
-Roo.WestLayoutRegion = function(mgr, config){
-    Roo.SplitLayoutRegion.call(this, mgr, config, "west", "w-resize");
+
+Roo.layout.North = function(mgr, config){
+    Roo.layout.Region.call(this, mgr, config, "north", "n-resize");
     if(this.split){
-        this.split.placement = Roo.SplitBar.LEFT;
-        this.split.orientation = Roo.SplitBar.HORIZONTAL;
-        this.split.el.addClass("x-layout-split-h");
+        this.split.placement = Roo.SplitBar.TOP;
+        this.split.orientation = Roo.SplitBar.VERTICAL;
+        this.split.el.addClass("x-layout-split-v");
     }
-    var size = config.initialSize || config.width;
+    var size = config.initialSize || config.height;
     if(typeof size != "undefined"){
-        this.el.setWidth(size);
+        this.el.setHeight(size);
     }
 };
-Roo.extend(Roo.WestLayoutRegion, Roo.SplitLayoutRegion, {
-    orientation: Roo.SplitBar.HORIZONTAL,
+Roo.extend(Roo.layout.North, Roo.layout.SplitRegion, {
+    orientation: Roo.SplitBar.VERTICAL,
     getBox : function(){
         if(this.collapsed){
             return this.collapsedEl.getBox();
         }
         var box = this.el.getBox();
         if(this.split){
-            box.width += this.split.el.getWidth();
+            box.height += this.split.el.getHeight();
         }
         return box;
     },
     
     updateBox : function(box){
         if(this.split && !this.collapsed){
-            var sw = this.split.el.getWidth();
-            box.width -= sw;
-            this.split.el.setLeft(box.x+box.width);
-            this.split.el.setTop(box.y);
-            this.split.el.setHeight(box.height);
+            box.height -= this.split.el.getHeight();
+            this.split.el.setLeft(box.x);
+            this.split.el.setTop(box.y+box.height);
+            this.split.el.setWidth(box.width);
         }
         if(this.collapsed){
-            this.updateBody(null, box.height);
+            this.updateBody(box.width, null);
         }
-        Roo.LayoutRegion.prototype.updateBox.call(this, box);
+        Roo.layout.Region.prototype.updateBox.call(this, box);
     }
-});
-/*
+});/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -62840,7 +62963,7 @@ Roo.extend(Roo.WestLayoutRegion, Roo.SplitLayoutRegion, {
 /*
  * Private internal class for reading and applying state
  */
-Roo.LayoutStateManager = function(layout){
+Roo.layout.StateManager = function(layout){
      // default empty state
      this.state = {
         north: {},
@@ -62850,7 +62973,7 @@ Roo.LayoutStateManager = function(layout){
     };
 };
 
-Roo.LayoutStateManager.prototype = {
+Roo.layout.StateManager.prototype = {
     init : function(layout, provider){
         this.provider = provider;
         var state = provider.get(layout.id+"-layout-state");
@@ -62918,7 +63041,7 @@ Roo.LayoutStateManager.prototype = {
  * @class Roo.panel.Content
  * @extends Roo.util.Observable
  * @children Roo.form.Form Roo.JsonView Roo.View
- * @parent Roo.BorderLayout Roo.LayoutDialog builder
+ * @parent Roo.layout.Border Roo.LayoutDialog builder
  * A basic Content Panel element.
  * @cfg {Boolean}   fitToFrame    True for this panel to adjust its size to fit when the region resizes  (defaults to false)
  * @cfg {Boolean}   fitContainer   When using {@link #fitToFrame} and {@link #resizeEl}, you can also fit the parent container  (defaults to false)
@@ -63387,7 +63510,7 @@ layout.addxtype({
 /**
  * @class Roo.panel.Grid
  * @extends Roo.panel.Content
- * @parent Roo.BorderLayout Roo.LayoutDialog builder
+ * @parent Roo.layout.Border Roo.LayoutDialog builder
  * @constructor
  * Create a new GridPanel.
  * @cfg {Roo.grid.Grid} grid The grid for this panel
@@ -63466,15 +63589,15 @@ Roo.extend(Roo.panel.Grid, Roo.panel.Content, {
 /**
  * @class Roo.panel.NestedLayout
  * @extends Roo.panel.Content
- * @parent Roo.BorderLayout Roo.LayoutDialog builder
- * @cfg {Roo.BorderLayout} layout   [required] The layout for this panel
+ * @parent Roo.layout.Border Roo.LayoutDialog builder
+ * @cfg {Roo.layout.Border} layout   [required] The layout for this panel
  *
  * 
  * @constructor
  * Create a new NestedLayoutPanel.
  * 
  * 
- * @param {Roo.BorderLayout} layout [required] The layout for this panel
+ * @param {Roo.layout.Border} layout [required] The layout for this panel
  * @param {String/Object} config A string to set only the title or a config object
  */
 Roo.panel.NestedLayout = function(layout, config)
@@ -63558,7 +63681,7 @@ Roo.extend(Roo.panel.NestedLayout, Roo.panel.Content, {
     
     /**
      * Returns the nested BorderLayout for this panel
-     * @return {Roo.BorderLayout}
+     * @return {Roo.layout.Border}
      */
     getLayout : function(){
         return this.layout;
@@ -63594,10 +63717,10 @@ panel.addxtype({
     }
 });
 
-Roo.ScrollPanel = function(el, config, content){
+Roo.panel.Scroll = function(el, config, content){
     config = config || {};
     config.fitToFrame = true;
-    Roo.ScrollPanel.superclass.constructor.call(this, el, config, content);
+    Roo.panel.Scroll.superclass.constructor.call(this, el, config, content);
     
     this.el.dom.style.overflow = "hidden";
     var wrap = this.el.wrap({cls: "x-scroller x-layout-inactive-content"});
@@ -63619,7 +63742,7 @@ Roo.ScrollPanel = function(el, config, content){
     this.el = wrap; this.up = up; this.down = down;
 };
 
-Roo.extend(Roo.ScrollPanel, Roo.panel.Content, {
+Roo.extend(Roo.panel.Scroll, Roo.panel.Content, {
     increment : 100,
     wheelIncrement : 5,
     scrollUp : function(){
@@ -63638,7 +63761,7 @@ Roo.extend(Roo.ScrollPanel, Roo.panel.Content, {
     },
 
     setSize : function(){
-        Roo.ScrollPanel.superclass.setSize.apply(this, arguments);
+        Roo.panel.Scroll.superclass.setSize.apply(this, arguments);
         this.afterScroll();
     },
 
@@ -63660,7 +63783,7 @@ Roo.extend(Roo.ScrollPanel, Roo.panel.Content, {
 /**
  * @class Roo.panel.Tree
  * @extends Roo.panel.Content
- * @parent Roo.BorderLayout Roo.LayoutDialog builder
+ * @parent Roo.layout.Border Roo.LayoutDialog builder
  * Treepanel component
  * 
  * @constructor
@@ -63728,16 +63851,16 @@ Roo.extend(Roo.panel.Tree, Roo.panel.Content, {
  
 
 /**
- * @class Roo.ReaderLayout
- * @extends Roo.BorderLayout
+ * @class Roo.layout.Reader
+ * @extends Roo.layout.Border
  * This is a pre-built layout that represents a classic, 5-pane application.  It consists of a header, a primary
  * center region containing two nested regions (a top one for a list view and one for item preview below),
  * and regions on either side that can be used for navigation, application commands, informational displays, etc.
- * The setup and configuration work exactly the same as it does for a {@link Roo.BorderLayout} - this class simply
+ * The setup and configuration work exactly the same as it does for a {@link Roo.layout.Border} - this class simply
  * expedites the setup of the overall layout and regions for this common application style.
  * Example:
  <pre><code>
-var reader = new Roo.ReaderLayout();
+var reader = new Roo.layout.Reader();
 var CP = Roo.panel.Content;  // shortcut for adding
 
 reader.beginUpdate();
@@ -63755,9 +63878,9 @@ reader.endUpdate();
 * @param {String/HTMLElement/Element} container (optional) The container this layout is bound to (defaults to
 * document.body if omitted)
 */
-Roo.ReaderLayout = function(config, renderTo){
+Roo.layout.Reader = function(config, renderTo){
     var c = config || {size:{}};
-    Roo.ReaderLayout.superclass.constructor.call(this, renderTo || document.body, {
+    Roo.layout.Reader.superclass.constructor.call(this, renderTo || document.body, {
         north: c.north !== false ? Roo.apply({
             split:false,
             initialSize: 32,
@@ -63798,7 +63921,7 @@ Roo.ReaderLayout = function(config, renderTo){
 
     this.beginUpdate();
 
-    var inner = new Roo.BorderLayout(Roo.get(document.body).createChild(), {
+    var inner = new Roo.layout.Border(Roo.get(document.body).createChild(), {
         south: c.preview !== false ? Roo.apply({
             split:true,
             initialSize: 200,
@@ -63823,7 +63946,7 @@ Roo.ReaderLayout = function(config, renderTo){
     this.regions.listView = inner.getRegion('center');
 };
 
-Roo.extend(Roo.ReaderLayout, Roo.BorderLayout);/*
+Roo.extend(Roo.layout.Reader, Roo.layout.Border);/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -70602,4 +70725,26 @@ Roo.ContentPanel = Roo.panel.Content;
 Roo.NestedLayoutPanel = Roo.panel.NestedLayout;
 Roo.TabPanel = Roo.panel.Tab;
 Roo.TabPanelItem = Roo.panel.TabItem;
-Roo.TreePanel = Roo.panel.Tree;
\ No newline at end of file
+Roo.TreePanel = Roo.panel.Tree;
+
+
+// phase 2 update
+Roo.ScrollPanel = Roo.panel.Scroll;
+
+Roo.BorderLayout = Roo.layout.Border;
+Roo.BasicLayoutRegion = Roo.layout.BasicRegion;
+Roo.LayoutRegion = Roo.layout.Region;
+Roo.SplitLayoutRegion = Roo.layout.SplitRegion;
+Roo.LayoutManager = Roo.layout.Manager;
+
+
+Roo.NorthLayoutRegion = Roo.layout.North;
+Roo.EastLayoutRegion = Roo.layout.East;
+Roo.WestLayoutRegion = Roo.layout.West;
+Roo.SouthLayoutRegion = Roo.layout.South;
+Roo.CenterLayoutRegion = Roo.layout.Center;
+
+
+Roo.LayoutStateManager  = Roo.layout.StateManager;
+Roo.ReaderLayout = Roo.layout.Reader;
+