* @class Roo.XComponent
* A delayed Element creator...
* Or a way to group chunks of interface together.
+ * technically this is a wrapper around a tree of Roo elements (which defines a 'module'),
+ * used in conjunction with XComponent.build() it will create an instance of each element,
+ * then call addxtype() to build the User interface.
*
* Mypart.xyx = new Roo.XComponent({
* It can be used to build a big heiracy, with parent etc.
* or you can just use this to render a single compoent to a dom element
* MYPART.render(Roo.Element | String(id) | dom_element )
+ *
+ *
+ * Usage patterns.
+ *
+ * Classic Roo
+ *
+ * Roo is designed primarily as a single page application, so the UI build for a standard interface will
+ * expect a single 'TOP' level module normally indicated by the 'parent' of the XComponent definition being defined as false.
+ *
+ * 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'
+ * - if mulitple topModules exist, the last one is defined as the top module.
+ *
+ * Embeded Roo
+ *
+ * When the top level or multiple modules are to embedded into a existing HTML page,
+ * the parent element can container '#id' of the element where the module will be drawn.
+ *
+ * Bootstrap Roo
+ *
+ * Unlike classic Roo, the bootstrap tends not to be used as a single page.
+ * it relies more on a include mechanism, where sub modules are included into an outer page.
+ * This is normally managed by the builder tools using Roo.apply( options, Included.Sub.Module )
+ *
+ * Bootstrap Roo Included elements
+ *
+ * Our builder application needs the ability to preview these sub compoennts. They will normally have parent=false set,
+ * hence confusing the component builder as it thinks there are multiple top level elements.
+ *
+ * String Over-ride & Translations
+ *
+ * Our builder application writes all the strings as _strings and _named_strings. This is to enable the translation of elements,
+ * and also the 'overlaying of string values - needed when different versions of the same application with different text content
+ * are needed. @see Roo.XComponent.overlayString
+ *
+ *
*
* @extends Roo.util.Observable
* @constructor
el = el || false;
var hp = this.parent ? 1 : 0;
+ Roo.debug && Roo.log(this);
+
+ var tree = this._tree ? this._tree() : this.tree();
+
if (!el && typeof(this.parent) == 'string' && this.parent.substring(0,1) == '#') {
// if parent is a '#.....' string, then let's use that..
- var ename = this.parent.substr(1)
- this.parent = (this.parent == '#bootstrap') ? { el : true} : false; // flags it as a top module...
- el = Roo.get(ename);
+ var ename = this.parent.substr(1);
+ this.parent = false;
+ Roo.debug && Roo.log(ename);
+ switch (ename) {
+ case 'bootstrap-body':
+ if (typeof(tree.el) != 'undefined' && tree.el == document.body) {
+ // this is the BorderLayout standard?
+ this.parent = { el : true };
+ break;
+ }
+ if (["Nest", "Content", "Grid", "Tree"].indexOf(tree.xtype) > -1) {
+ // need to insert stuff...
+ this.parent = {
+ el : new Roo.bootstrap.layout.Border({
+ el : document.body,
+
+ center: {
+ titlebar: false,
+ autoScroll:false,
+ closeOnTab: true,
+ tabPosition: 'top',
+ //resizeTabs: true,
+ alwaysShowTabs: true,
+ hideTabs: false
+ //minTabWidth: 140
+ }
+ })
+
+ };
+ break;
+ }
+
+ if (typeof(Roo.bootstrap.Body) != 'undefined' ) {
+ this.parent = { el : new Roo.bootstrap.Body() };
+ Roo.debug && Roo.log("setting el to doc body");
+
+ } else {
+ throw "Container is bootstrap body, but Roo.bootstrap.Body is not defined";
+ }
+ break;
+ case 'bootstrap':
+ this.parent = { el : true};
+ // fall through
+ default:
+ el = Roo.get(ename);
+ if (typeof(Roo.bootstrap) != 'undefined' && tree['|xns'] == 'Roo.bootstrap') {
+ this.parent = { el : true};
+ }
+
+ break;
+ }
+
+
if (!el && !this.parent) {
- Roo.log("Warning - element can not be found :#" + ename );
+ Roo.debug && Roo.log("Warning - element can not be found :#" + ename );
return;
}
}
+ Roo.debug && Roo.log("EL:");
+ Roo.debug && Roo.log(el);
+ Roo.debug && Roo.log("this.parent.el:");
+ Roo.debug && Roo.log(this.parent.el);
+
+
+ // altertive root elements ??? - we need a better way to indicate these.
+ var is_alt = Roo.XComponent.is_alt ||
+ (typeof(tree.el) != 'undefined' && tree.el == document.body) ||
+ (typeof(Roo.bootstrap) != 'undefined' && tree.xns == Roo.bootstrap) ||
+ (typeof(Roo.mailer) != 'undefined' && tree.xns == Roo.mailer) ;
+
+
+
+ if (!this.parent && is_alt) {
+ //el = Roo.get(document.body);
+ this.parent = { el : true };
+ }
+
+
if (!this.parent) {
+ Roo.debug && Roo.log("no parent - creating one");
+
el = el ? Roo.get(el) : false;
- // it's a top level one..
- this.parent = {
- el : new Roo.BorderLayout(el || document.body, {
+ if (typeof(Roo.BorderLayout) == 'undefined' ) {
- center: {
- titlebar: false,
- autoScroll:false,
- closeOnTab: true,
- tabPosition: 'top',
- //resizeTabs: true,
- alwaysShowTabs: el && hp? false : true,
- hideTabs: el || !hp ? true : false,
- minTabWidth: 140
- }
- })
+ this.parent = {
+ el : new Roo.bootstrap.layout.Border({
+ el: el || document.body,
+
+ center: {
+ titlebar: false,
+ autoScroll:false,
+ closeOnTab: true,
+ tabPosition: 'top',
+ //resizeTabs: true,
+ alwaysShowTabs: false,
+ hideTabs: true,
+ minTabWidth: 140,
+ overflow: 'visible'
+ }
+ })
+ };
+ } else {
+
+ // it's a top level one..
+ this.parent = {
+ el : new Roo.BorderLayout(el || document.body, {
+ center: {
+ titlebar: false,
+ autoScroll:false,
+ closeOnTab: true,
+ tabPosition: 'top',
+ //resizeTabs: true,
+ alwaysShowTabs: el && hp? false : true,
+ hideTabs: el || !hp ? true : false,
+ minTabWidth: 140
+ }
+ })
+ };
}
}
- if (!this.parent.el) {
- // probably an old style ctor, which has been disabled.
- return;
-
- }
+ if (!this.parent.el) {
+ // probably an old style ctor, which has been disabled.
+ return;
+
+ }
// The 'tree' method is '_tree now'
- var tree = this._tree ? this._tree() : this.tree();
tree.region = tree.region || this.region;
+ var is_body = false;
if (this.parent.el === true) {
// bootstrap... - body..
+ if (el) {
+ tree.el = el;
+ }
this.parent.el = Roo.factory(tree);
+ is_body = true;
}
- this.el = this.parent.el.addxtype(tree);
+
+ this.el = this.parent.el.addxtype(tree, undefined, is_body);
this.fireEvent('built', this);
this.panel = this.el;
this.layout = this.panel.layout;
- this.parentLayout = this.parent.layout || false;
+ this.parentLayout = this.parent.layout || false;
}
elmodules : [],
-
+ /**
+ * @property is_alt
+ * Is an alternative Root - normally used by bootstrap or other systems,
+ * where the top element in the tree can wrap 'body'
+ * @type {boolean} (default false)
+ */
+
+ is_alt : false,
+ /**
+ * @property build_from_html
+ * Build elements from html - used by bootstrap HTML stuff
+ * - this is cleared after build is completed
+ * @type {boolean} (default false)
+ */
+
+ build_from_html : false,
/**
* Register components to be built later.
*
* * @param {Object} details about module
*/
register : function(obj) {
- Roo.log('run');
+
Roo.XComponent.event.fireEvent('register', obj);
switch(typeof(obj.disabled) ) {
break;
default:
- if (obj.disabled) {
+ if (obj.disabled || obj.region == '#disabled') {
return;
}
break;
try {
obj.parent = this.toObject(opar);
} catch(e) {
- Roo.log("parent:toObject failed: " + e.toString());
+ Roo.debug && Roo.log("parent:toObject failed: " + e.toString());
return;
}
return;
}
if (obj.parent.constructor != Roo.XComponent) {
- Roo.log("Warning : Object Parent is not instance of XComponent:" + obj.name)
+ Roo.debug && Roo.log("Warning : Object Parent is not instance of XComponent:" + obj.name)
}
if (!obj.parent.modules) {
obj.parent.modules = new Roo.util.MixedCollection(false,
// elmodules (is a list of DOM based modules )
Roo.each(this.elmodules, function(e) {
mods.push(e);
- Roo.log('e');
- Roo.log(e);
if (!this.topModule &&
typeof(e.parent) == 'string' &&
e.parent.substring(0,1) == '#' &&
*
*/
- build : function()
+ build : function(opts)
{
+ if (typeof(opts) != 'undefined') {
+ Roo.apply(this,opts);
+ }
+
this.preBuild();
- Roo.log('this.topModule');
- Roo.log(this.topModule);
- Roo.log('this.modules');
- Roo.log(this.modules);
- Roo.log('this.elmodules');
- Roo.log(this.elmodules);
var mods = this.buildOrder();
- Roo.log('build mods');
- Roo.log(mods);
- return;
- Roo.log('this.topModule');
- Roo.log(this.topModule);
+
//this.allmods = mods;
//Roo.debug && Roo.log(mods);
//return;
msg: msg,
width:450,
progress:true,
+ buttons : false,
closable:false,
modal: false
if (!this.hideProgress && Roo.MessageBox) {
Roo.MessageBox.hide();
}
+ Roo.XComponent.build_from_html = false; // reset, so dialogs will be build from javascript
+
Roo.XComponent.event.fireEvent('buildcomplete', _this.topModule);
// THE END...
" of " + total +
(m.name ? (' - ' + m.name) : '');
Roo.debug && Roo.log(msg);
- if (!this.hideProgress && Roo.MessageBox) {
+ if (!_this.hideProgress && Roo.MessageBox) {
Roo.MessageBox.updateProgress( (total - mods.length)/total, msg );
}
},
-
+ /**
+ * Overlay a set of modified strings onto a component
+ * This is dependant on our builder exporting the strings and 'named strings' elements.
+ *
+ * @param {Object} element to overlay on - eg. Pman.Dialog.Login
+ * @param {Object} associative array of 'named' string and it's new value.
+ *
+ */
+ overlayStrings : function( component, strings )
+ {
+ if (typeof(component['_named_strings']) == 'undefined') {
+ throw "ERROR: component does not have _named_strings";
+ }
+ for ( var k in strings ) {
+ var md = typeof(component['_named_strings'][k]) == 'undefined' ? false : component['_named_strings'][k];
+ if (md !== false) {
+ component['_strings'][md] = strings[k];
+ } else {
+ Roo.log('could not find named string: ' + k + ' in');
+ Roo.log(component);
+ }
+
+ }
+
+ },
+
/**
* Event Object.
projects / roojs1 / blobdiff