* @class Roo.bootstrap.layout.Border
* @extends Roo.bootstrap.layout.Manager
* This class represents a common layout manager used in desktop applications. For screenshots and more details,
- * please see: <br><br>
- * <a href="http://www.jackslocum.com/yui/2006/10/19/cross-browser-web-20-layouts-with-yahoo-ui/">Cross Browser Layouts - Part 1</a><br>
- * <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, {
- north: {
- initialSize: 25,
- titlebar: false
- },
- west: {
- split:true,
- initialSize: 200,
- minSize: 175,
- maxSize: 400,
- titlebar: true,
- collapsible: true
- },
- east: {
- split:true,
- initialSize: 202,
- minSize: 175,
- maxSize: 400,
- titlebar: true,
- collapsible: true
- },
- south: {
- split:true,
- initialSize: 100,
- minSize: 100,
- maxSize: 200,
- titlebar: true,
- collapsible: true
- },
- center: {
- titlebar: true,
- autoScroll:true,
- resizeTabs: true,
- minTabWidth: 50,
- preferredTabWidth: 150
- }
-});
-
-// shorthand
-var CP = Roo.ContentPanel;
-
-layout.beginUpdate();
-layout.add("north", new CP("north", "North"));
-layout.add("south", new CP("south", {title: "South", closable: true}));
-layout.add("west", new CP("west", {title: "West"}));
-layout.add("east", new CP("autoTabs", {title: "Auto Tabs", closable: true}));
-layout.add("center", new CP("center1", {title: "Close Me", closable: true}));
-layout.add("center", new CP("center2", {title: "Center Panel", closable: false}));
-layout.getRegion("center").showPanel("center1");
-layout.endUpdate();
-</code></pre>
-
+ * please see: examples/bootstrap/nested.html<br><br>
+
<b>The container the layout is rendered into can be either the body element or any other element.
If it is not the body element, the container needs to either be an absolute positioned element,
or you will need to add "position:relative" to the css of the container. You will also need to specify
the container size if it is not the body element.</b>
* @constructor
-* Create a new BorderLayout
-* @param {String/HTMLElement/Element} container The container this layout is bound to
+* Create a new Border
* @param {Object} config Configuration options
*/
-Roo.BorderLayout = function(container, config){
+Roo.bootstrap.layout.Border = function(config){
config = config || {};
- Roo.BorderLayout.superclass.constructor.call(this, container, config);
- this.factory = config.factory || Roo.BorderLayout.RegionFactory;
- for(var i = 0, len = this.factory.validRegions.length; i < len; i++) {
- var target = this.factory.validRegions[i];
- if(config[target]){
- this.addRegion(target, config[target]);
+ Roo.bootstrap.layout.Border.superclass.constructor.call(this, config);
+
+
+
+ Roo.each(Roo.bootstrap.layout.Border.regions, function(region) {
+ if(config[region]){
+ config[region].region = region;
+ this.addRegion(config[region]);
}
- }
+ },this);
+
};
-Roo.extend(Roo.BorderLayout, Roo.LayoutManager, {
+Roo.bootstrap.layout.Border.regions = ["north","south","east","west","center"];
+
+Roo.extend(Roo.bootstrap.layout.Border, Roo.bootstrap.layout.Manager, {
/**
* 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') {
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..
}
return ret;
- }
-});
-
-/**
- * Shortcut for creating a new BorderLayout object and adding one or more ContentPanels to it in a single step, handling
- * the beginUpdate and endUpdate calls internally. The key to this method is the <b>panels</b> property that can be
- * provided with each region config, which allows you to add ContentPanel configs in addition to the region configs
- * during creation. The following code is equivalent to the constructor-based example at the beginning of this class:
- * <pre><code>
-// shorthand
-var CP = Roo.ContentPanel;
-
-var layout = Roo.BorderLayout.create({
- north: {
- initialSize: 25,
- titlebar: false,
- panels: [new CP("north", "North")]
- },
- west: {
- split:true,
- initialSize: 200,
- minSize: 175,
- maxSize: 400,
- titlebar: true,
- collapsible: true,
- panels: [new CP("west", {title: "West"})]
- },
- east: {
- split:true,
- initialSize: 202,
- minSize: 175,
- maxSize: 400,
- titlebar: true,
- collapsible: true,
- panels: [new CP("autoTabs", {title: "Auto Tabs", closable: true})]
},
- south: {
- split:true,
- initialSize: 100,
- minSize: 100,
- maxSize: 200,
- titlebar: true,
- collapsible: true,
- panels: [new CP("south", {title: "South", closable: true})]
- },
- center: {
- titlebar: true,
- autoScroll:true,
- resizeTabs: true,
- minTabWidth: 50,
- preferredTabWidth: 150,
- panels: [
- new CP("center1", {title: "Close Me", closable: true}),
- new CP("center2", {title: "Center Panel", closable: false})
- ]
- }
-}, document.body);
-
-layout.getRegion("center").showPanel("center1");
-</code></pre>
- * @param config
- * @param targetEl
- */
-Roo.BorderLayout.create = function(config, targetEl){
- var layout = new Roo.BorderLayout(targetEl || document.body, config);
- layout.beginUpdate();
- var regions = Roo.BorderLayout.RegionFactory.validRegions;
- for(var j = 0, jlen = regions.length; j < jlen; j++){
- var lr = regions[j];
- if(layout.regions[lr] && config[lr].panels){
- var r = layout.regions[lr];
- var ps = config[lr].panels;
- layout.addTypedPanels(r, ps);
- }
- }
- layout.endUpdate();
- return layout;
-};
-
+
+
// private
-Roo.BorderLayout.RegionFactory = {
- // private
- validRegions : ["north","south","east","west","center"],
+ factory : function(cfg)
+ {
+
+ var validRegions = Roo.bootstrap.layout.Border.regions;
- // private
- create : function(target, mgr, config){
- target = target.toLowerCase();
- if(config.lightweight || config.basic){
- return new Roo.BasicLayoutRegion(mgr, config, target);
- }
+ var target = cfg.region;
+ cfg.mgr = this;
+
+ var r = Roo.bootstrap.layout;
+ Roo.log(target);
switch(target){
case "north":
- return new Roo.NorthLayoutRegion(mgr, config);
+ return new r.North(cfg);
case "south":
- return new Roo.SouthLayoutRegion(mgr, config);
+ return new r.South(cfg);
case "east":
- return new Roo.EastLayoutRegion(mgr, config);
+ return new r.East(cfg);
case "west":
- return new Roo.WestLayoutRegion(mgr, config);
+ return new r.West(cfg);
case "center":
- return new Roo.CenterLayoutRegion(mgr, config);
+ return new r.Center(cfg);
}
throw 'Layout region "'+target+'" not supported.';
}
-};
\ No newline at end of file
+
+
+});
+
\ No newline at end of file
projects / roojs1 / blobdiff