/**
* @class Roo.bootstrap.layout.Border
* @extends Roo.bootstrap.layout.Manager
+ * @builder-top
+ * @children Roo.bootstrap.panel.Content Roo.bootstrap.panel.Nest Roo.bootstrap.panel.Grid
* This class represents a common layout manager used in desktop applications. For screenshots and more details,
* please see: examples/bootstrap/nested.html<br><br>
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]){
- this.addRegion(target, 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, {
+
+ /**
+ * @cfg {Roo.bootstrap.layout.Region} center region to go in center
+ */
+ /**
+ * @cfg {Roo.bootstrap.layout.Region} west region to go in west
+ */
+ /**
+ * @cfg {Roo.bootstrap.layout.Region} east region to go in east
+ */
+ /**
+ * @cfg {Roo.bootstrap.layout.Region} south region to go in south
+ */
+ /**
+ * @cfg {Roo.bootstrap.layout.Region} north region to go in north
+ */
+
+
+
+
+ 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){
- if(!this.regions[target]){
- var r = this.factory.create(target, this, config);
- this.bindRegion(target, r);
+ addRegion : function(config)
+ {
+ 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(name, r){
- this.regions[name] = r;
- r.on("visibilitychange", this.layout, this);
- r.on("paneladded", this.layout, this);
- r.on("panelremoved", this.layout, this);
- r.on("invalidated", this.layout, this);
- r.on("resized", this.onRegionResized, this);
- r.on("collapsed", this.onRegionCollapsed, this);
- r.on("expanded", this.onRegionExpanded, this);
+ bindRegion : function(r){
+ this.regions[r.config.region] = r;
+
+ r.on("visibilitychange", this.layout, this);
+ r.on("paneladded", this.layout, this);
+ r.on("panelremoved", this.layout, this);
+ r.on("invalidated", this.layout, this);
+ r.on("resized", this.onRegionResized, this);
+ r.on("collapsed", this.onRegionCollapsed, this);
+ r.on("expanded", this.onRegionExpanded, this);
},
/**
* Performs a layout update.
*/
- layout : function(){
+ layout : function()
+ {
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;
* Restores this layout's state using Roo.state.Manager or the state provided by the passed provider.
* @param {Roo.state.Provider} provider (optional) An alternate state provider
*/
+ /*
restoreState : function(provider){
if(!provider){
provider = Roo.state.Manager;
var sm = new Roo.LayoutStateManager();
sm.init(this, provider);
},
-
- /**
- * Adds a batch of multiple ContentPanels dynamically by passing a special regions config object. This config
- * object should contain properties for each region to add ContentPanels to, and each property's value should be
- * a valid ContentPanel config object. Example:
- * <pre><code>
-// Create the main layout
-var layout = new Roo.BorderLayout('main-ct', {
- west: {
- split:true,
- minSize: 175,
- titlebar: true
- },
- center: {
- title:'Components'
- }
-}, 'main-ct');
-
-// Create and add multiple ContentPanels at once via configs
-layout.batchAdd({
- west: {
- id: 'source-files',
- autoCreate:true,
- title:'Ext Source Files',
- autoScroll:true,
- fitToFrame:true
- },
- center : {
- el: cview,
- autoScroll:true,
- fitToFrame:true,
- toolbar: tb,
- resizeEl:'cbody'
- }
-});
-</code></pre>
- * @param {Object} regions An object containing ContentPanel configs by region name
- */
- batchAdd : function(regions){
- this.beginUpdate();
- for(var rname in regions){
- var lr = this.regions[rname];
- if(lr){
- this.addTypedPanels(lr, regions[rname]);
- }
- }
- this.endUpdate();
- },
-
- // private
- addTypedPanels : function(lr, ps){
- if(typeof ps == 'string'){
- lr.add(new Roo.ContentPanel(ps));
- }
- else if(ps instanceof Array){
- for(var i =0, len = ps.length; i < len; i++){
- this.addTypedPanels(lr, ps[i]);
- }
- }
- else if(!ps.events){ // raw config?
- var el = ps.el;
- delete ps.el; // prevent conflict
- lr.add(new Roo.ContentPanel(el || Roo.id(), ps));
- }
- else { // panel object assumed!
- lr.add(ps);
- }
- },
+*/
+
+
/**
* Adds a xtype elements to the layout.
* <pre><code>
// can accept a layout region..!?!?
//Roo.log('Roo.BorderLayout add ' + cfg.xtype)
- if (!cfg.xtype.match(/Panel$/)) {
- return false;
- }
+
+ // theory? children can only be panels??
+
+ //if (!cfg.xtype.match(/Panel$/)) {
+ // return false;
+ //}
var ret = false;
if (typeof(cfg.region) == 'undefined') {
delete cfg.items;
}
var nb = false;
+
+ if ( region == 'center') {
+ Roo.log("Center: " + cfg.title);
+ }
+
switch(cfg.xtype)
{
- case 'ContentPanel': // ContentPanel (el, cfg)
- case 'ScrollPanel': // ContentPanel (el, cfg)
- case 'ViewPanel':
- if(cfg.autoCreate) {
- ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
- } else {
- var el = this.el.createChild();
- ret = new Roo[cfg.xtype](el, cfg); // new panel!!!!!
- }
+ case 'Content': // ContentPanel (el, cfg)
+ case 'Scroll': // ContentPanel (el, cfg)
+ case 'View':
+ 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!!!!!
+ //}
this.add(region, ret);
break;
-
+ /*
case 'TreePanel': // our new panel!
cfg.el = this.el.createChild();
ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
this.add(region, ret);
break;
+ */
- case 'NestedLayoutPanel':
+ case 'Nest':
// create a new Layout (which is a Border Layout...
- var el = this.el.createChild();
+
var clayout = cfg.layout;
- delete cfg.layout;
+ clayout.el = this.el.createChild();
clayout.items = clayout.items || [];
+
+ delete cfg.layout;
+
// replace this exitems with the clayout ones..
xitems = clayout.items;
-
+ // force background off if it's in center...
if (region == 'center' && this.active && this.getRegion('center').panels.length < 1) {
cfg.background = false;
}
- var layout = new Roo.BorderLayout(el, 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..
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);
}
throw 'Layout region "'+target+'" not supported.';
}
-};
});
projects / roojs1 / blobdiff