roojs-bootstrap.js

[roojs1] / Roo / bootstrap / layout / Border.js

diff --git a/Roo/bootstrap/layout/Border.js b/Roo/bootstrap/layout/Border.js
index d37025e..8fe909c 100644 (file)
--- a/Roo/bootstrap/layout/Border.js
+++ b/Roo/bootstrap/layout/Border.js
@@ -11,6 +11,7 @@
 /**
  * @class Roo.bootstrap.layout.Border
  * @extends Roo.bootstrap.layout.Manager
+ * @builder-top
  * This class represents a common layout manager used in desktop applications. For screenshots and more details,
  * please see: examples/bootstrap/nested.html<br><br>
  
@@ -26,38 +27,42 @@ the container size if it is not the body element.</b>
 Roo.bootstrap.layout.Border = function(config){
     config = config || {};
     Roo.bootstrap.layout.Border.superclass.constructor.call(this, config);
-    this.factory = config.factory || Roo.BorderLayout.RegionFactory;
     
-    Roo.each(Roo.bootstrap.layout.Border.regions, function(target) {
-        if(config[target]){
-            config[target].target = region;
-           this.addRegion(config[target]);
+    
+    
+    Roo.each(Roo.bootstrap.layout.Border.regions, function(region) {
+        if(config[region]){
+            config[region].region = region;
+           this.addRegion(config[region]);
        }
     },this);
     
 };
 
-Roo.bootstrap.layout.Border.regions =  ["north","south","east","west","center"];
+Roo.bootstrap.layout.Border.regions =  ["center", "north","south","east","west"];
 
 Roo.extend(Roo.bootstrap.layout.Border, Roo.bootstrap.layout.Manager, {
+    
+    parent : false, // this might point to a 'nest' or a ???
+    
     /**
      * Creates and adds a new region if it doesn't already exist.
      * @param {String} target The target region key (north, south, east, west or center).
      * @param {Object} config The regions config object
      * @return {BorderLayoutRegion} The new region
      */
-    addRegion : function(target, config)
+    addRegion : function(config)
     {
-        if(!this.regions[target]){
+        if(!this.regions[config.region]){
             var r = this.factory(config);
            this.bindRegion(r);
         }
-        return this.regions[target];
+        return this.regions[config.region];
     },
 
     // private (kinda)
     bindRegion : function(r){
-        this.regions[r.target] = r;
+        this.regions[r.config.region] = r;
         
         r.on("visibilitychange",    this.layout, this);
         r.on("paneladded",          this.layout, this);
@@ -76,6 +81,14 @@ Roo.extend(Roo.bootstrap.layout.Border, Roo.bootstrap.layout.Manager, {
         if(this.updating) {
             return;
         }
+        
+        // render all the rebions if they have not been done alreayd?
+        Roo.each(Roo.bootstrap.layout.Border.regions, function(region) {
+            if(this.regions[region] && !this.regions[region].bodyEl){
+                this.regions[region].onRender(this.el)
+            }
+        },this);
+        
         var size = this.getViewSize();
         var w = size.width;
         var h = size.height;
@@ -286,14 +299,19 @@ layout.addxtype({
             delete cfg.items;
         }
         var nb = false;
+       
+       if ( region == 'center') {
+           Roo.log("Center: " + cfg.title);
+       }
+       
         
         switch(cfg.xtype) 
         {
             case 'Content':  // ContentPanel (el, cfg)
             case 'Scroll':  // ContentPanel (el, cfg)
             case 'View': 
-                cfg.autoCreate = true;
-                ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
+                cfg.autoCreate = cfg.autoCreate || true;
+                ret = new cfg.xns[cfg.xtype](cfg); // new panel!!!!!
                 //} else {
                 //    var el = this.el.createChild();
                 //    ret = new Roo[cfg.xtype](el, cfg); // new panel!!!!!
@@ -326,59 +344,73 @@ layout.addxtype({
                 if (region == 'center' && this.active && this.getRegion('center').panels.length < 1) {
                     cfg.background = false;
                 }
-                var layout = new Roo.bootstrap.layout.Border(clayout);
+                cfg.layout  = new Roo.bootstrap.layout.Border(clayout);
+                
                 
-                ret = new Roo[cfg.xtype](layout, cfg); // new panel!!!!!
+                ret = new cfg.xns[cfg.xtype](cfg); // new panel!!!!!
                 //console.log('adding nested layout panel '  + cfg.toSource());
                 this.add(region, ret);
                 nb = {}; /// find first...
                 break;
-                
-            case 'GridPanel': 
             
+            case 'Grid':
+                
                 // needs grid and region
                 
                 //var el = this.getRegion(region).el.createChild();
-                var el = this.el.createChild();
+                /*
+                 *var el = this.el.createChild();
                 // create the grid first...
+                cfg.grid.container = el;
+                cfg.grid = new cfg.grid.xns[cfg.grid.xtype](cfg.grid);
+                */
                 
-                var grid = new Roo.grid[cfg.grid.xtype](el, cfg.grid);
-                delete cfg.grid;
                 if (region == 'center' && this.active ) {
                     cfg.background = false;
                 }
-                ret = new Roo[cfg.xtype](grid, cfg); // new panel!!!!!
+                
+                ret = new cfg.xns[cfg.xtype](cfg); // new panel!!!!!
                 
                 this.add(region, ret);
+                /*
                 if (cfg.background) {
+                    // render grid on panel activation (if panel background)
                     ret.on('activate', function(gp) {
                         if (!gp.grid.rendered) {
-                            gp.grid.render();
+                    //        gp.grid.render(el);
                         }
                     });
                 } else {
-                    grid.render();
+                  //  cfg.grid.render(el);
                 }
+                */
                 break;
            
            
-           
+            case 'Border': // it can get called on it'self... - might need to check if this is fixed?
+                // it was the old xcomponent building that caused this before.
+                // espeically if border is the top element in the tree.
+                ret = this;
+                break; 
+                
+                    
                 
                 
                 
             default:
+                /*
                 if (typeof(Roo[cfg.xtype]) != 'undefined') {
                     
                     ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
                     this.add(region, ret);
                 } else {
-                
-                    alert("Can not add '" + cfg.xtype + "' to BorderLayout");
+                */
+                    Roo.log(cfg);
+                    throw "Can not add '" + cfg.xtype + "' to Border";
                     return null;
-                }
-                
-             // GridPanel (grid, cfg)
-            
+             
+                                
+             
         }
         this.beginUpdate();
         // add children..
@@ -422,13 +454,13 @@ layout.addxtype({
     factory : function(cfg)
     {
         
-        var validRegions = ["north","south","east","west","center"];
+        var validRegions = Roo.bootstrap.layout.Border.regions;
 
         var target = cfg.region;
-        cfg.manager = this;
+        cfg.mgr = this;
         
         var r = Roo.bootstrap.layout;
-        
+        Roo.log(target);
         switch(target){
             case "north":
                 return new r.North(cfg);
@@ -443,7 +475,6 @@ layout.addxtype({
         }
         throw 'Layout region "'+target+'" not supported.';
     }
-};
     
     
 });