From: Alan This example shows how to create a very simple BasicDialog with "UploadCropbox". This example shows how to create a very simple BasicDialog with "Cropbox". Note that the js is not minified so it is readable. See
-for the full source code.
* Cross Browser Layouts - Part 1
@@ -57,7 +57,7 @@
});
// shorthand
-var CP = Roo.ContentPanel;
+var CP = Roo.panel.Content;
layout.beginUpdate();
layout.add("north", new CP("north", "North"));
@@ -228,8 +228,8 @@ Roo.extend(Roo.BorderLayout, Roo.LayoutManager, {
/**
* Adds a ContentPanel (or subclass) to this layout.
* @param {String} target The target region key (north, south, east, west or center).
- * @param {Roo.ContentPanel} panel The panel to add
- * @return {Roo.ContentPanel} The added panel
+ * @param {Roo.panel.Content} panel The panel to add
+ * @return {Roo.panel.Content} The added panel
*/
add : function(target, panel){
@@ -240,8 +240,8 @@ Roo.extend(Roo.BorderLayout, Roo.LayoutManager, {
/**
* Remove a ContentPanel (or subclass) to this layout.
* @param {String} target The target region key (north, south, east, west or center).
- * @param {Number/String/Roo.ContentPanel} panel The index, id or panel to remove
- * @return {Roo.ContentPanel} The removed panel
+ * @param {Number/String/Roo.panel.Content} panel The index, id or panel to remove
+ * @return {Roo.panel.Content} The removed panel
*/
remove : function(target, panel){
target = target.toLowerCase();
@@ -251,7 +251,7 @@ Roo.extend(Roo.BorderLayout, Roo.LayoutManager, {
/**
* Searches all regions for a panel with the specified id
* @param {String} panelId
- * @return {Roo.ContentPanel} The panel or null if it wasn't found
+ * @return {Roo.panel.Content} The panel or null if it wasn't found
*/
findPanel : function(panelId){
var rs = this.regions;
@@ -268,8 +268,8 @@ Roo.extend(Roo.BorderLayout, Roo.LayoutManager, {
/**
* Searches all regions for a panel with the specified id and activates (shows) it.
- * @param {String/ContentPanel} panelId The panels id or the panel itself
- * @return {Roo.ContentPanel} The shown panel or null
+ * @param {String/panel.Content} panelId The panels id or the panel itself
+ * @return {Roo.panel.Content} The shown panel or null
*/
showPanel : function(panelId) {
var rs = this.regions;
@@ -347,7 +347,7 @@ layout.batchAdd({
// private
addTypedPanels : function(lr, ps){
if(typeof ps == 'string'){
- lr.add(new Roo.ContentPanel(ps));
+ lr.add(new Roo.panel.Content(ps));
}
else if(ps instanceof Array){
for(var i =0, len = ps.length; i < len; i++){
@@ -357,7 +357,7 @@ layout.batchAdd({
else if(!ps.events){ // raw config?
var el = ps.el;
delete ps.el; // prevent conflict
- lr.add(new Roo.ContentPanel(el || Roo.id(), ps));
+ lr.add(new Roo.panel.Content(el || Roo.id(), ps));
}
else { // panel object assumed!
lr.add(ps);
@@ -393,11 +393,11 @@ layout.addxtype({
// can accept a layout region..!?!?
//Roo.log('Roo.BorderLayout add ' + cfg.xtype)
- if (!cfg.xtype.match(/Panel$/)) {
- return false;
- }
+ // if (!cfg.xtype.match(/Panel$/)) {
+ // return false;
+ // }
var ret = false;
-
+
if (typeof(cfg.region) == 'undefined') {
Roo.log("Failed to add Panel, region was not set");
Roo.log(cfg);
@@ -416,7 +416,72 @@ layout.addxtype({
switch(cfg.xtype)
{
- case 'ContentPanel': // ContentPanel (el, cfg)
+ case 'Content':
+ if(cfg.autoCreate) {
+ ret = new Roo.panel[cfg.xtype](cfg); // new panel!!!!!
+ } else {
+ var el = this.el.createChild();
+ ret = new Roo.panel[cfg.xtype](el, cfg); // new panel!!!!!
+ }
+
+ this.add(region, ret);
+ break;
+ case 'Grid':
+ // needs grid and region
+
+ //var el = this.getRegion(region).el.createChild();
+ var el = this.el.createChild();
+ // create the grid first...
+
+ 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.panel[cfg.xtype](grid, cfg); // new panel!!!!!
+
+ this.add(region, ret);
+ if (cfg.background) {
+ ret.on('activate', function(gp) {
+ if (!gp.grid.rendered) {
+ gp.grid.render();
+ }
+ });
+ } else {
+ grid.render();
+ }
+ break;
+ case 'NestedLayout':
+ // create a new Layout (which is a Border Layout...
+ var el = this.el.createChild();
+ var clayout = cfg.layout;
+ delete cfg.layout;
+ clayout.items = clayout.items || [];
+ // replace this exitems with the clayout ones..
+ xitems = clayout.items;
+
+
+ if (region == 'center' && this.active && this.getRegion('center').panels.length < 1) {
+ cfg.background = false;
+ }
+ var layout = new Roo.BorderLayout(el, clayout);
+
+ ret = new Roo.panel[cfg.xtype](layout, cfg); // new panel!!!!!
+ //console.log('adding nested layout panel ' + cfg.toSource());
+ this.add(region, ret);
+ nb = {}; /// find first...
+ break;
+
+ case 'Calendar':
+ ret = new Roo.panel[cfg.xtype](cfg); // new panel!!!!!
+ this.add(region, ret);
+ break;
+ case 'Tree': // our new panel!
+ cfg.el = this.el.createChild();
+ ret = new Roo.panel[cfg.xtype](cfg); // new panel!!!!!
+ this.add(region, ret);
+ break;
+ case 'ContentPanel':
case 'ScrollPanel': // ContentPanel (el, cfg)
case 'ViewPanel':
if(cfg.autoCreate) {
diff --git a/Roo/ContentPanel.js b/Roo/Content.js
similarity index 97%
rename from Roo/ContentPanel.js
rename to Roo/Content.js
index cc1b9d0ce5..56b6abd47d 100644
--- a/Roo/ContentPanel.js
+++ b/Roo/Content.js
@@ -9,11 +9,11 @@
*
-
-
+
+
-Upload Cropbox Dialog
-Cropbox Panel
+