XComponent - refactoring - move rendering code into XComponent element
authorAlan Knowles <alan@akbkhome.com>
Wed, 6 Jul 2011 15:50:10 +0000 (15:50 +0000)
committerAlan Knowles <alan@akbkhome.com>
Wed, 7 Sep 2011 02:04:36 +0000 (10:04 +0800)
Roo/XComponent.js
roojs-all.js
roojs-debug.js
roojs-ui-debug.js
roojs-ui.js

index 78601f9..4ace870 100644 (file)
@@ -6,6 +6,7 @@
 /**
  * @class Roo.XComponent
  * A delayed Element creator...
+ * Or a way to group chunks of interface together.
  * 
  * Mypart.xyx = new Roo.XComponent({
 
      ]
  *})
  *
- * Roo.onReady(function() {
-    Roo.XComponent.build();
- })
  *
+ * 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 )
+ * 
  * @extends Roo.util.Observable
  * @constructor
  * @param cfg {Object} configuration of component
@@ -103,13 +105,68 @@ Roo.extend(Roo.XComponent, Roo.util.Observable, {
      * String to display while loading.
      */
     name : false,
+    /**
+     * @cfg {String} region
+     * Region to render component to (defaults to center)
+     */
+    region : 'center',
+    
     /**
      * @cfg {Array} items
      * A single item array - the first element is the root of the tree..
      * It's done this way to stay compatible with the Xtype system...
      */
-    items : false
-     
+    items : false,
+    
+    
+     /**
+     * render
+     * render element to dom or tree
+     * @param {Roo.Element|String|DomElement} optional render to if parent is not set.
+     */
+    
+    render : function(el)
+    {
+        
+        el = el || false;
+        
+        if (!el && typeof(m.parent) == 'string' && m.parent[0] == '#') {
+            // if parent is a '#.....' string, then let's use that..
+            this.parent = false;
+            el = Roo.get(m.substr(1));
+        }
+        if (!this.parent) {
+            
+            el = el ? Roo.get(el) : false;
+            
+            // 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 ? false :  true,
+                         hideTabs: el ? true :  false,
+                         minTabWidth: 140
+                     }
+                 })
+            }
+        }
+            
+        var tree = this.tree();
+        tree.region = tree.region || this.region;
+        this.el = this.parent.el.addxtype(tree);
+        this.fireEvent('built', this);
+        
+        this.panel = this.el;
+        this.layout = this.panel.layout;    
+         
+    }
+    
 });
 
 Roo.apply(Roo.XComponent, {
@@ -136,14 +193,15 @@ Roo.apply(Roo.XComponent, {
      */
     
     modules : [],
-      
-     /**
+    /**
      * @property  elmodules
      * array of modules to be created by which use #ID 
      * @type {Array} of Roo.XComponent
      */
-    
+     
     elmodules : [],
+
+    
     /**
      * Register components to be built later.
      *
@@ -172,7 +230,7 @@ Roo.apply(Roo.XComponent, {
     /**
      * convert a string to an object..
      * eg. 'AAA.BBB' -> finds AAA.BBB
-     * 
+
      */
     
     toObject : function(str)
@@ -183,15 +241,13 @@ Roo.apply(Roo.XComponent, {
         if (str[0]=='#') {
             return str;
         }
+
         var ar = str.split('.');
         var rt, o;
         rt = ar.shift();
             /** eval:var:o */
         eval('if (typeof ' + rt + ' == "undefined"){ o = false;} o = ' + rt + ';');
         if (o === false) {
-             
-            
-            
             throw "Module not found : " + str;
         }
         Roo.each(ar, function(e) {
@@ -246,7 +302,6 @@ Roo.apply(Roo.XComponent, {
         var cmp = function(a,b) {   
             return String(a).toUpperCase() > String(b).toUpperCase() ? 1 : -1;
         };
-        
         if ((!this.topModule || !this.topModule.modules) && !this.elmodules.length) {
             throw "No top level modules to build";
         }
@@ -254,7 +309,7 @@ Roo.apply(Roo.XComponent, {
         // make a flat list in order of modules to build.
         var mods = this.topModule ? [ this.topModule ] : [];
         Roo.each(this.elmodules,function(e) { mods.push(e) });
-        
+
         
         // add modules to their parents..
         var addMod = function(m) {
@@ -323,16 +378,21 @@ Roo.apply(Roo.XComponent, {
                     _this.topModule.fireEvent('buildcomplete', _this.topModule);
                 }
                 // THE END...
-                return false;    
+                return false;   
             }
             
             var m = mods.shift();
+            
+            
             Roo.debug && Roo.log(m);
-            if (typeof(m) == 'function') { // not sure if this is supported any more..
+            // not sure if this is supported any more.. - modules that are are just function
+            if (typeof(m) == 'function') { 
                 m.call(this);
                 return progressRun.defer(10, _this);
             } 
             
+            
+            
             Roo.MessageBox.updateProgress(
                 (total  - mods.length)/total,  "Building Interface " + (total  - mods.length) + 
                     " of " + total + 
@@ -340,7 +400,7 @@ Roo.apply(Roo.XComponent, {
                     );
             
          
-            
+            // is the module disabled?
             var disabled = (typeof(m.disabled) == 'function') ?
                 m.disabled.call(m.module.disabled) : m.disabled;    
             
@@ -349,45 +409,11 @@ Roo.apply(Roo.XComponent, {
                 return progressRun(); // we do not update the display!
             }
             
-            if (!m.parent || (typeof(m.parent) == 'string' && m.parent[0] == '#')) {
-                // it's a top level one..
-                var ctr = m.parent ? Roo.get(m.parent.substr(1)) : document.body;
-                if (!ctr) {
-                    Roo.log("not rendering module " + m.name + " " + m.parent + " no found");
-                     return progressRun.defer(10, _this);
-                    
-                }
-                
-                
-                var layoutbase = new Ext.BorderLayout(
-                    m.parent ? Roo.get(m.parent.substr(1)) : document.body,
-                    {
-                        center: {
-                             titlebar: false,
-                             autoScroll:false,
-                             closeOnTab: true,
-                             tabPosition: 'top',
-                             //resizeTabs: true,
-                             alwaysShowTabs: m.parent ? false : true,
-                             hideTabs : m.parent ? true : false,
-                             minTabWidth: 140
-                        }
-                });
-                var tree = m.tree();
-                tree.region = 'center';
-                m.el = layoutbase.addxtype(tree);
-                m.panel = m.el;
-                m.layout = m.panel.layout;    
-                return progressRun.defer(10, _this);
-            }
+            // now build 
             
-            var tree = m.tree();
-            tree.region = tree.region || m.region;
-            m.el = m.parent.el.addxtype(tree);
-            m.fireEvent('built', m);
-            m.panel = m.el;
-            m.layout = m.panel.layout;    
-            return progressRun.defer(10, _this); 
+            m.render();
+            // it's 10 on top level, and 1 on others??? why...
+            return progressRun.defer(10, _this);
              
         }
         progressRun.defer(1, _this);
@@ -395,6 +421,7 @@ Roo.apply(Roo.XComponent, {
         
         
     }
+    
      
    
     
index b98ada1..05bfa6a 100644 (file)
@@ -745,7 +745,7 @@ Roo.form.Form.superclass.constructor.call(this,null,A);this.url=this.url||this.a
 this.active=this.root;this.buttons=[];this.allItems=[];this.addEvents({clientvalidation:true,rendered:true});if(this.progressUrl){this.addxtype({xns:Roo.form,xtype:'Hidden',name:'UPLOAD_IDENTIFIER'});}
 Roo.each(B,this.addxtype,this);};Roo.extend(Roo.form.Form,Roo.form.BasicForm,{buttonAlign:'center',minButtonWidth:75,labelAlign:'left',monitorValid:false,monitorPoll:200,progressUrl:false,column:function(c){var A=new Roo.form.Column(c);this.start(A);if(arguments.length>1){this.add.apply(this,Array.prototype.slice.call(arguments,1));this.end();}return A;},fieldset:function(c){var fs=new Roo.form.FieldSet(c);this.start(fs);if(arguments.length>1){this.add.apply(this,Array.prototype.slice.call(arguments,1));this.end();}return fs;},container:function(c){var l=new Roo.form.Layout(c);this.start(l);if(arguments.length>1){this.add.apply(this,Array.prototype.slice.call(arguments,1));this.end();}return l;},start:function(c){Roo.applyIf(c,{'labelAlign':this.active.labelAlign,'labelWidth':this.active.labelWidth,'itemCls':this.active.itemCls});this.active.stack.push(c);c.ownerCt=this.active;this.active=c;return this;},end:function(){if(this.active==this.root){return this;}
 this.active=this.active.ownerCt;return this;},add:function(){this.active.stack.push.apply(this.active.stack,arguments);this.allItems.push.apply(this.allItems,arguments);var r=[];for(var i=0,a=arguments,A=a.length;i<A;i++){if(a[i].isFormField){r.push(a[i]);}}if(r.length>0){Roo.form.Form.superclass.add.apply(this,r);}return this;},findbyId:function(id){var A=false;if(!id){return A;}
-Ext.each(this.allItems,function(f){if(f.id==id||f.name==id){A=f;return false;}});return A;},render:function(ct){ct=Roo.get(ct);var o=this.autoCreate||{tag:'form',method:this.method||'POST',id:this.id||Roo.id()};this.initEl(ct.createChild(o));this.root.render(this.el);this.items.each(function(f){f.render('x-form-el-'+f.id);});if(this.buttons.length>0){var tb=this.el.createChild({cls:'x-form-btns-ct',cn:{cls:"x-form-btns x-form-btns-"+this.buttonAlign,html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'}},null,true);var tr=tb.getElementsByTagName('tr')[0];for(var i=0,A=this.buttons.length;i<A;i++){var b=this.buttons[i];var td=document.createElement('td');td.className='x-form-btn-td';b.render(tr.appendChild(td));}}if(this.monitorValid){this.startMonitoring();}
+Roo.each(this.allItems,function(f){if(f.id==id||f.name==id){A=f;return false;}});return A;},render:function(ct){ct=Roo.get(ct);var o=this.autoCreate||{tag:'form',method:this.method||'POST',id:this.id||Roo.id()};this.initEl(ct.createChild(o));this.root.render(this.el);this.items.each(function(f){f.render('x-form-el-'+f.id);});if(this.buttons.length>0){var tb=this.el.createChild({cls:'x-form-btns-ct',cn:{cls:"x-form-btns x-form-btns-"+this.buttonAlign,html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'}},null,true);var tr=tb.getElementsByTagName('tr')[0];for(var i=0,A=this.buttons.length;i<A;i++){var b=this.buttons[i];var td=document.createElement('td');td.className='x-form-btn-td';b.render(tr.appendChild(td));}}if(this.monitorValid){this.startMonitoring();}
 this.fireEvent('rendered',this);return this;},addButton:function(A,B,C){var bc={handler:B,scope:C,minWidth:this.minButtonWidth,hideParent:true};if(typeof A=="string"){bc.text=A;}else {Roo.apply(bc,A);}var D=new Roo.Button(null,bc);this.buttons.push(D);return D;},addxtype:function(){var ar=Array.prototype.slice.call(arguments,0);var A=false;for(var i=0;i<ar.length;i++){if(!ar[i]){continue;}if(Roo.form[ar[i].xtype]){ar[i].form=this;var fe=Roo.factory(ar[i],Roo.form);if(!A){A=fe;}
 fe.form=this;if(fe.store){fe.store.form=this;}if(fe.isLayout){this.start(fe);this.allItems.push(fe);if(fe.items&&fe.addxtype){fe.addxtype.apply(fe,fe.items);delete fe.items;}
 this.end();continue;}
@@ -955,11 +955,12 @@ Roo.XTemplate=function(){Roo.XTemplate.superclass.constructor.apply(this,argumen
 D.push({id:id,target:G,exec:F,test:fn,body:m[1]||''});s=s.replace(m[0],'{xtpl'+id+'}');++id;}for(var i=D.length-1;i>=0;--i){this.compileTpl(D[i]);}
 this.master=D[D.length-1];this.tpls=D;};Roo.extend(Roo.XTemplate,Roo.Template,{re:/\{([\w-\.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,applySubTemplate:function(id,A,B){var t=this.tpls[id];if(t.test&&!t.test.call(this,A,B)){return '';}if(t.exec&&t.exec.call(this,A,B)){return '';}var vs=t.target?t.target.call(this,A,B):A;B=t.target?A:B;if(t.target&&vs instanceof Array){var C=[];for(var i=0,D=vs.length;i<D;i++){C[C.length]=t.compiled.call(this,vs[i],B);}return C.join('');}return t.compiled.call(this,vs,B);},compileTpl:function(A){var fm=Roo.util.Format;var B=this.disableFormats!==true;var C=Roo.isGecko?"+":",";var fn=function(m,E,F,G){if(E.substr(0,4)=='xtpl'){return "'"+C+'this.applySubTemplate('+E.substr(4)+', values, parent)'+C+"'";}var v;if(E.indexOf('.')!=-1){v=E;}else {v="values['"+E+"']";}if(F&&B){G=G?','+G:"";if(F.substr(0,5)!="this."){F="fm."+F+'(';}else {F='this.call("'+F.substr(5)+'", ';G=", values";}}else {G='';F="("+v+" === undefined ? '' : ";}return "'"+C+F+v+G+")"+C+"'";};var D;if(Roo.isGecko){D="tpl.compiled = function(values, parent){ return '"+A.body.replace(/(\r\n|\n)/g,'\\n').replace(/'/g,"\\'").replace(this.re,fn)+"';};";}else {D=["tpl.compiled = function(values, parent){ return ['"];D.push(A.body.replace(/(\r\n|\n)/g,'\\n').replace(/'/g,"\\'").replace(this.re,fn));D.push("'].join('');};");D=D.join('');}eval(D);return this;},applyTemplate:function(A){return this.master.compiled.call(this,A,{});var s=this.subs;},apply:function(){return this.applyTemplate.apply(this,arguments);},compile:function(){return this;}});Roo.XTemplate.from=function(el){el=Roo.getDom(el);return new Roo.XTemplate(el.value||el.innerHTML);};
 Roo.XComponent=function(A){Roo.apply(this,A);this.addEvents({'built':true,'buildcomplete':true});Roo.XComponent.register(this);this.modules=false;this.el=false;}
-Roo.extend(Roo.XComponent,Roo.util.Observable,{el:false,panel:false,layout:false,disabled:false,parent:false,order:false,name:false,items:false});Roo.apply(Roo.XComponent,{buildCompleted:false,topModule:false,modules:[],elmodules:[],register:function(A){this.modules.push(A);},toObject:function(A){if(!A||typeof(A)=='object'){return A;}if(A[0]=='#'){return A;}var ar=A.split('.');var rt,o;rt=ar.shift();eval('if (typeof '+rt+' == "undefined"){ o = false;} o = '+rt+';');if(o===false){throw "Module not found : "+A;}
+Roo.extend(Roo.XComponent,Roo.util.Observable,{el:false,panel:false,layout:false,disabled:false,parent:false,order:false,name:false,region:'center',items:false,render:function(el){el=el||false;if(!el&&typeof(m.parent)=='string'&&m.parent[0]=='#'){this.parent=false;el=Roo.get(m.substr(1));}if(!this.parent){el=el?Roo.get(el):false;this.parent={el:new Roo.BorderLayout(el||document.body,{center:{titlebar:false,autoScroll:false,closeOnTab:true,tabPosition:'top',alwaysShowTabs:el?false:true,hideTabs:el?true:false,minTabWidth:140}})}}var A=this.tree();A.region=A.region||this.region;this.el=this.parent.el.addxtype(A);this.fireEvent('built',this);this.panel=this.el;this.layout=this.panel.layout;}});Roo.apply(Roo.XComponent,{buildCompleted:false,topModule:false,modules:[],elmodules:[],register:function(A){this.modules.push(A);},toObject:function(A){if(!A||typeof(A)=='object'){return A;}if(A[0]=='#'){return A;}var ar=A.split('.');var rt,o;rt=ar.shift();eval('if (typeof '+rt+' == "undefined"){ o = false;} o = '+rt+';');if(o===false){throw "Module not found : "+A;}
 Roo.each(ar,function(e){if(typeof(o[e])=='undefined'){throw "Module not found : "+A;}
 o=o[e];});return o;},preBuild:function(){Roo.each(this.modules,function(A){A.parent=this.toObject(A.parent);if(!A.parent){this.topModule=A;return;}if(typeof(A.parent)=='string'){this.elmodules.push(A);return;}if(!A.parent.modules){A.parent.modules=new Roo.util.MixedCollection(false,function(o){return o.order+''});}
 A.parent.modules.add(A);},this);},buildOrder:function(){var A=this;var B=function(a,b){return String(a).toUpperCase()>String(b).toUpperCase()?1:-1;};if((!this.topModule||!this.topModule.modules)&&!this.elmodules.length){throw "No top level modules to build";}var C=this.topModule?[this.topModule]:[];Roo.each(this.elmodules,function(e){C.push(e)});var D=function(m){C.push(m);if(m.modules){m.modules.keySort('ASC',B);m.modules.each(D);}if(m.finalize){m.finalize.name=m.name+" (clean up) ";C.push(m.finalize);}};if(this.topModule){this.topModule.modules.keySort('ASC',B);this.topModule.modules.each(D);}return C;},build:function(){this.preBuild();var A=this.buildOrder();if(!A.length){throw "NO modules!!!";}
-Roo.MessageBox.show({title:'loading'});Roo.MessageBox.show({title:"Please wait...",msg:"Building Interface...",width:450,progress:true,closable:false,modal:false});var B=A.length;var C=this;var D=function(){if(!A.length){Roo.debug&&Roo.log('hide?');Roo.MessageBox.hide();if(C.topModule){C.topModule.fireEvent('buildcomplete',C.topModule);}return false;}var m=A.shift();Roo.debug&&Roo.log(m);if(typeof(m)=='function'){m.call(this);return D.defer(10,C);}Roo.MessageBox.updateProgress((B-A.length)/B,"Building Interface "+(B-A.length)+" of "+B+(m.name?(' - '+m.name):''));var E=(typeof(m.disabled)=='function')?m.disabled.call(m.module.disabled):m.disabled;if(E){return D();}if(!m.parent||(typeof(m.parent)=='string'&&m.parent[0]=='#')){var F=m.parent?Roo.get(m.parent.substr(1)):document.body;if(!F){Roo.log("not rendering module "+m.name+" "+m.parent+" no found");return D.defer(10,C);}var G=new Ext.BorderLayout(m.parent?Roo.get(m.parent.substr(1)):document.body,{center:{titlebar:false,autoScroll:false,closeOnTab:true,tabPosition:'top',alwaysShowTabs:m.parent?false:true,hideTabs:m.parent?true:false,minTabWidth:140}});var H=m.tree();H.region='center';m.el=G.addxtype(H);m.panel=m.el;m.layout=m.panel.layout;return D.defer(10,C);}var H=m.tree();H.region=H.region||m.region;m.el=m.parent.el.addxtype(H);m.fireEvent('built',m);m.panel=m.el;m.layout=m.panel.layout;return D.defer(10,C);}
+Roo.MessageBox.show({title:'loading'});Roo.MessageBox.show({title:"Please wait...",msg:"Building Interface...",width:450,progress:true,closable:false,modal:false});var B=A.length;var C=this;var D=function(){if(!A.length){Roo.debug&&Roo.log('hide?');Roo.MessageBox.hide();if(C.topModule){C.topModule.fireEvent('buildcomplete',C.topModule);}return false;}var m=A.shift();Roo.debug&&Roo.log(m);if(typeof(m)=='function'){m.call(this);return D.defer(10,C);}Roo.MessageBox.updateProgress((B-A.length)/B,"Building Interface "+(B-A.length)+" of "+B+(m.name?(' - '+m.name):''));var E=(typeof(m.disabled)=='function')?m.disabled.call(m.module.disabled):m.disabled;if(E){return D();}
+m.render();return D.defer(10,C);}
 D.defer(1,C);}});
 Roo.Login=function(A){this.addEvents({'refreshed':true});Roo.apply(this,A);Roo.onReady(function(){this.onLoad();},this);Roo.Login.superclass.constructor.call(this,this);}
 Roo.extend(Roo.Login,Roo.LayoutDialog,{method:'POST',url:'',user:false,checkFails:0,intervalID:0,onLoad:function(){if(Roo.get('loading')){Roo.get('loading').remove();}
index 14cd3e4..61c1fee 100644 (file)
@@ -41186,7 +41186,7 @@ Roo.extend(Roo.form.Form, Roo.form.BasicForm, {
         if (!id) {
             return ret;
         }
-        Ext.each(this.allItems, function(f){
+        Roo.each(this.allItems, function(f){
             if (f.id == id || f.name == id ){
                 ret = f;
                 return false;
@@ -51256,6 +51256,7 @@ Roo.XTemplate.from = function(el){
 /**
  * @class Roo.XComponent
  * A delayed Element creator...
+ * Or a way to group chunks of interface together.
  * 
  * Mypart.xyx = new Roo.XComponent({
 
@@ -51275,10 +51276,11 @@ Roo.XTemplate.from = function(el){
      ]
  *})
  *
- * Roo.onReady(function() {
-    Roo.XComponent.build();
- })
  *
+ * 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 )
+ * 
  * @extends Roo.util.Observable
  * @constructor
  * @param cfg {Object} configuration of component
@@ -51353,13 +51355,68 @@ Roo.extend(Roo.XComponent, Roo.util.Observable, {
      * String to display while loading.
      */
     name : false,
+    /**
+     * @cfg {String} region
+     * Region to render component to (defaults to center)
+     */
+    region : 'center',
+    
     /**
      * @cfg {Array} items
      * A single item array - the first element is the root of the tree..
      * It's done this way to stay compatible with the Xtype system...
      */
-    items : false
-     
+    items : false,
+    
+    
+     /**
+     * render
+     * render element to dom or tree
+     * @param {Roo.Element|String|DomElement} optional render to if parent is not set.
+     */
+    
+    render : function(el)
+    {
+        
+        el = el || false;
+        
+        if (!el && typeof(m.parent) == 'string' && m.parent[0] == '#') {
+            // if parent is a '#.....' string, then let's use that..
+            this.parent = false;
+            el = Roo.get(m.substr(1));
+        }
+        if (!this.parent) {
+            
+            el = el ? Roo.get(el) : false;
+            
+            // 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 ? false :  true,
+                         hideTabs: el ? true :  false,
+                         minTabWidth: 140
+                     }
+                 })
+            }
+        }
+            
+        var tree = this.tree();
+        tree.region = tree.region || this.region;
+        this.el = this.parent.el.addxtype(tree);
+        this.fireEvent('built', this);
+        
+        this.panel = this.el;
+        this.layout = this.panel.layout;    
+         
+    }
+    
 });
 
 Roo.apply(Roo.XComponent, {
@@ -51386,14 +51443,15 @@ Roo.apply(Roo.XComponent, {
      */
     
     modules : [],
-      
-     /**
+    /**
      * @property  elmodules
      * array of modules to be created by which use #ID 
      * @type {Array} of Roo.XComponent
      */
-    
+     
     elmodules : [],
+
+    
     /**
      * Register components to be built later.
      *
@@ -51422,7 +51480,7 @@ Roo.apply(Roo.XComponent, {
     /**
      * convert a string to an object..
      * eg. 'AAA.BBB' -> finds AAA.BBB
-     * 
+
      */
     
     toObject : function(str)
@@ -51433,15 +51491,13 @@ Roo.apply(Roo.XComponent, {
         if (str[0]=='#') {
             return str;
         }
+
         var ar = str.split('.');
         var rt, o;
         rt = ar.shift();
             /** eval:var:o */
         eval('if (typeof ' + rt + ' == "undefined"){ o = false;} o = ' + rt + ';');
         if (o === false) {
-             
-            
-            
             throw "Module not found : " + str;
         }
         Roo.each(ar, function(e) {
@@ -51496,7 +51552,6 @@ Roo.apply(Roo.XComponent, {
         var cmp = function(a,b) {   
             return String(a).toUpperCase() > String(b).toUpperCase() ? 1 : -1;
         };
-        
         if ((!this.topModule || !this.topModule.modules) && !this.elmodules.length) {
             throw "No top level modules to build";
         }
@@ -51504,7 +51559,7 @@ Roo.apply(Roo.XComponent, {
         // make a flat list in order of modules to build.
         var mods = this.topModule ? [ this.topModule ] : [];
         Roo.each(this.elmodules,function(e) { mods.push(e) });
-        
+
         
         // add modules to their parents..
         var addMod = function(m) {
@@ -51573,16 +51628,21 @@ Roo.apply(Roo.XComponent, {
                     _this.topModule.fireEvent('buildcomplete', _this.topModule);
                 }
                 // THE END...
-                return false;    
+                return false;   
             }
             
             var m = mods.shift();
+            
+            
             Roo.debug && Roo.log(m);
-            if (typeof(m) == 'function') { // not sure if this is supported any more..
+            // not sure if this is supported any more.. - modules that are are just function
+            if (typeof(m) == 'function') { 
                 m.call(this);
                 return progressRun.defer(10, _this);
             } 
             
+            
+            
             Roo.MessageBox.updateProgress(
                 (total  - mods.length)/total,  "Building Interface " + (total  - mods.length) + 
                     " of " + total + 
@@ -51590,7 +51650,7 @@ Roo.apply(Roo.XComponent, {
                     );
             
          
-            
+            // is the module disabled?
             var disabled = (typeof(m.disabled) == 'function') ?
                 m.disabled.call(m.module.disabled) : m.disabled;    
             
@@ -51599,45 +51659,11 @@ Roo.apply(Roo.XComponent, {
                 return progressRun(); // we do not update the display!
             }
             
-            if (!m.parent || (typeof(m.parent) == 'string' && m.parent[0] == '#')) {
-                // it's a top level one..
-                var ctr = m.parent ? Roo.get(m.parent.substr(1)) : document.body;
-                if (!ctr) {
-                    Roo.log("not rendering module " + m.name + " " + m.parent + " no found");
-                     return progressRun.defer(10, _this);
-                    
-                }
-                
-                
-                var layoutbase = new Ext.BorderLayout(
-                    m.parent ? Roo.get(m.parent.substr(1)) : document.body,
-                    {
-                        center: {
-                             titlebar: false,
-                             autoScroll:false,
-                             closeOnTab: true,
-                             tabPosition: 'top',
-                             //resizeTabs: true,
-                             alwaysShowTabs: m.parent ? false : true,
-                             hideTabs : m.parent ? true : false,
-                             minTabWidth: 140
-                        }
-                });
-                var tree = m.tree();
-                tree.region = 'center';
-                m.el = layoutbase.addxtype(tree);
-                m.panel = m.el;
-                m.layout = m.panel.layout;    
-                return progressRun.defer(10, _this);
-            }
+            // now build 
             
-            var tree = m.tree();
-            tree.region = tree.region || m.region;
-            m.el = m.parent.el.addxtype(tree);
-            m.fireEvent('built', m);
-            m.panel = m.el;
-            m.layout = m.panel.layout;    
-            return progressRun.defer(10, _this); 
+            m.render();
+            // it's 10 on top level, and 1 on others??? why...
+            return progressRun.defer(10, _this);
              
         }
         progressRun.defer(1, _this);
@@ -51645,6 +51671,7 @@ Roo.apply(Roo.XComponent, {
         
         
     }
+    
      
    
     
index 4f54ee7..0e7541b 100644 (file)
@@ -26741,7 +26741,7 @@ Roo.extend(Roo.form.Form, Roo.form.BasicForm, {
         if (!id) {
             return ret;
         }
-        Ext.each(this.allItems, function(f){
+        Roo.each(this.allItems, function(f){
             if (f.id == id || f.name == id ){
                 ret = f;
                 return false;
@@ -36811,6 +36811,7 @@ Roo.XTemplate.from = function(el){
 /**
  * @class Roo.XComponent
  * A delayed Element creator...
+ * Or a way to group chunks of interface together.
  * 
  * Mypart.xyx = new Roo.XComponent({
 
@@ -36830,10 +36831,11 @@ Roo.XTemplate.from = function(el){
      ]
  *})
  *
- * Roo.onReady(function() {
-    Roo.XComponent.build();
- })
  *
+ * 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 )
+ * 
  * @extends Roo.util.Observable
  * @constructor
  * @param cfg {Object} configuration of component
@@ -36908,13 +36910,68 @@ Roo.extend(Roo.XComponent, Roo.util.Observable, {
      * String to display while loading.
      */
     name : false,
+    /**
+     * @cfg {String} region
+     * Region to render component to (defaults to center)
+     */
+    region : 'center',
+    
     /**
      * @cfg {Array} items
      * A single item array - the first element is the root of the tree..
      * It's done this way to stay compatible with the Xtype system...
      */
-    items : false
-     
+    items : false,
+    
+    
+     /**
+     * render
+     * render element to dom or tree
+     * @param {Roo.Element|String|DomElement} optional render to if parent is not set.
+     */
+    
+    render : function(el)
+    {
+        
+        el = el || false;
+        
+        if (!el && typeof(m.parent) == 'string' && m.parent[0] == '#') {
+            // if parent is a '#.....' string, then let's use that..
+            this.parent = false;
+            el = Roo.get(m.substr(1));
+        }
+        if (!this.parent) {
+            
+            el = el ? Roo.get(el) : false;
+            
+            // 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 ? false :  true,
+                         hideTabs: el ? true :  false,
+                         minTabWidth: 140
+                     }
+                 })
+            }
+        }
+            
+        var tree = this.tree();
+        tree.region = tree.region || this.region;
+        this.el = this.parent.el.addxtype(tree);
+        this.fireEvent('built', this);
+        
+        this.panel = this.el;
+        this.layout = this.panel.layout;    
+         
+    }
+    
 });
 
 Roo.apply(Roo.XComponent, {
@@ -36941,14 +36998,15 @@ Roo.apply(Roo.XComponent, {
      */
     
     modules : [],
-      
-     /**
+    /**
      * @property  elmodules
      * array of modules to be created by which use #ID 
      * @type {Array} of Roo.XComponent
      */
-    
+     
     elmodules : [],
+
+    
     /**
      * Register components to be built later.
      *
@@ -36977,7 +37035,7 @@ Roo.apply(Roo.XComponent, {
     /**
      * convert a string to an object..
      * eg. 'AAA.BBB' -> finds AAA.BBB
-     * 
+
      */
     
     toObject : function(str)
@@ -36988,15 +37046,13 @@ Roo.apply(Roo.XComponent, {
         if (str[0]=='#') {
             return str;
         }
+
         var ar = str.split('.');
         var rt, o;
         rt = ar.shift();
             /** eval:var:o */
         eval('if (typeof ' + rt + ' == "undefined"){ o = false;} o = ' + rt + ';');
         if (o === false) {
-             
-            
-            
             throw "Module not found : " + str;
         }
         Roo.each(ar, function(e) {
@@ -37051,7 +37107,6 @@ Roo.apply(Roo.XComponent, {
         var cmp = function(a,b) {   
             return String(a).toUpperCase() > String(b).toUpperCase() ? 1 : -1;
         };
-        
         if ((!this.topModule || !this.topModule.modules) && !this.elmodules.length) {
             throw "No top level modules to build";
         }
@@ -37059,7 +37114,7 @@ Roo.apply(Roo.XComponent, {
         // make a flat list in order of modules to build.
         var mods = this.topModule ? [ this.topModule ] : [];
         Roo.each(this.elmodules,function(e) { mods.push(e) });
-        
+
         
         // add modules to their parents..
         var addMod = function(m) {
@@ -37128,16 +37183,21 @@ Roo.apply(Roo.XComponent, {
                     _this.topModule.fireEvent('buildcomplete', _this.topModule);
                 }
                 // THE END...
-                return false;    
+                return false;   
             }
             
             var m = mods.shift();
+            
+            
             Roo.debug && Roo.log(m);
-            if (typeof(m) == 'function') { // not sure if this is supported any more..
+            // not sure if this is supported any more.. - modules that are are just function
+            if (typeof(m) == 'function') { 
                 m.call(this);
                 return progressRun.defer(10, _this);
             } 
             
+            
+            
             Roo.MessageBox.updateProgress(
                 (total  - mods.length)/total,  "Building Interface " + (total  - mods.length) + 
                     " of " + total + 
@@ -37145,7 +37205,7 @@ Roo.apply(Roo.XComponent, {
                     );
             
          
-            
+            // is the module disabled?
             var disabled = (typeof(m.disabled) == 'function') ?
                 m.disabled.call(m.module.disabled) : m.disabled;    
             
@@ -37154,45 +37214,11 @@ Roo.apply(Roo.XComponent, {
                 return progressRun(); // we do not update the display!
             }
             
-            if (!m.parent || (typeof(m.parent) == 'string' && m.parent[0] == '#')) {
-                // it's a top level one..
-                var ctr = m.parent ? Roo.get(m.parent.substr(1)) : document.body;
-                if (!ctr) {
-                    Roo.log("not rendering module " + m.name + " " + m.parent + " no found");
-                     return progressRun.defer(10, _this);
-                    
-                }
-                
-                
-                var layoutbase = new Ext.BorderLayout(
-                    m.parent ? Roo.get(m.parent.substr(1)) : document.body,
-                    {
-                        center: {
-                             titlebar: false,
-                             autoScroll:false,
-                             closeOnTab: true,
-                             tabPosition: 'top',
-                             //resizeTabs: true,
-                             alwaysShowTabs: m.parent ? false : true,
-                             hideTabs : m.parent ? true : false,
-                             minTabWidth: 140
-                        }
-                });
-                var tree = m.tree();
-                tree.region = 'center';
-                m.el = layoutbase.addxtype(tree);
-                m.panel = m.el;
-                m.layout = m.panel.layout;    
-                return progressRun.defer(10, _this);
-            }
+            // now build 
             
-            var tree = m.tree();
-            tree.region = tree.region || m.region;
-            m.el = m.parent.el.addxtype(tree);
-            m.fireEvent('built', m);
-            m.panel = m.el;
-            m.layout = m.panel.layout;    
-            return progressRun.defer(10, _this); 
+            m.render();
+            // it's 10 on top level, and 1 on others??? why...
+            return progressRun.defer(10, _this);
              
         }
         progressRun.defer(1, _this);
@@ -37200,6 +37226,7 @@ Roo.apply(Roo.XComponent, {
         
         
     }
+    
      
    
     
index 0914083..9f1cfeb 100644 (file)
@@ -502,7 +502,7 @@ Roo.form.Form.superclass.constructor.call(this,null,A);this.url=this.url||this.a
 this.active=this.root;this.buttons=[];this.allItems=[];this.addEvents({clientvalidation:true,rendered:true});if(this.progressUrl){this.addxtype({xns:Roo.form,xtype:'Hidden',name:'UPLOAD_IDENTIFIER'});}
 Roo.each(B,this.addxtype,this);};Roo.extend(Roo.form.Form,Roo.form.BasicForm,{buttonAlign:'center',minButtonWidth:75,labelAlign:'left',monitorValid:false,monitorPoll:200,progressUrl:false,column:function(c){var A=new Roo.form.Column(c);this.start(A);if(arguments.length>1){this.add.apply(this,Array.prototype.slice.call(arguments,1));this.end();}return A;},fieldset:function(c){var fs=new Roo.form.FieldSet(c);this.start(fs);if(arguments.length>1){this.add.apply(this,Array.prototype.slice.call(arguments,1));this.end();}return fs;},container:function(c){var l=new Roo.form.Layout(c);this.start(l);if(arguments.length>1){this.add.apply(this,Array.prototype.slice.call(arguments,1));this.end();}return l;},start:function(c){Roo.applyIf(c,{'labelAlign':this.active.labelAlign,'labelWidth':this.active.labelWidth,'itemCls':this.active.itemCls});this.active.stack.push(c);c.ownerCt=this.active;this.active=c;return this;},end:function(){if(this.active==this.root){return this;}
 this.active=this.active.ownerCt;return this;},add:function(){this.active.stack.push.apply(this.active.stack,arguments);this.allItems.push.apply(this.allItems,arguments);var r=[];for(var i=0,a=arguments,A=a.length;i<A;i++){if(a[i].isFormField){r.push(a[i]);}}if(r.length>0){Roo.form.Form.superclass.add.apply(this,r);}return this;},findbyId:function(id){var A=false;if(!id){return A;}
-Ext.each(this.allItems,function(f){if(f.id==id||f.name==id){A=f;return false;}});return A;},render:function(ct){ct=Roo.get(ct);var o=this.autoCreate||{tag:'form',method:this.method||'POST',id:this.id||Roo.id()};this.initEl(ct.createChild(o));this.root.render(this.el);this.items.each(function(f){f.render('x-form-el-'+f.id);});if(this.buttons.length>0){var tb=this.el.createChild({cls:'x-form-btns-ct',cn:{cls:"x-form-btns x-form-btns-"+this.buttonAlign,html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'}},null,true);var tr=tb.getElementsByTagName('tr')[0];for(var i=0,A=this.buttons.length;i<A;i++){var b=this.buttons[i];var td=document.createElement('td');td.className='x-form-btn-td';b.render(tr.appendChild(td));}}if(this.monitorValid){this.startMonitoring();}
+Roo.each(this.allItems,function(f){if(f.id==id||f.name==id){A=f;return false;}});return A;},render:function(ct){ct=Roo.get(ct);var o=this.autoCreate||{tag:'form',method:this.method||'POST',id:this.id||Roo.id()};this.initEl(ct.createChild(o));this.root.render(this.el);this.items.each(function(f){f.render('x-form-el-'+f.id);});if(this.buttons.length>0){var tb=this.el.createChild({cls:'x-form-btns-ct',cn:{cls:"x-form-btns x-form-btns-"+this.buttonAlign,html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'}},null,true);var tr=tb.getElementsByTagName('tr')[0];for(var i=0,A=this.buttons.length;i<A;i++){var b=this.buttons[i];var td=document.createElement('td');td.className='x-form-btn-td';b.render(tr.appendChild(td));}}if(this.monitorValid){this.startMonitoring();}
 this.fireEvent('rendered',this);return this;},addButton:function(A,B,C){var bc={handler:B,scope:C,minWidth:this.minButtonWidth,hideParent:true};if(typeof A=="string"){bc.text=A;}else {Roo.apply(bc,A);}var D=new Roo.Button(null,bc);this.buttons.push(D);return D;},addxtype:function(){var ar=Array.prototype.slice.call(arguments,0);var A=false;for(var i=0;i<ar.length;i++){if(!ar[i]){continue;}if(Roo.form[ar[i].xtype]){ar[i].form=this;var fe=Roo.factory(ar[i],Roo.form);if(!A){A=fe;}
 fe.form=this;if(fe.store){fe.store.form=this;}if(fe.isLayout){this.start(fe);this.allItems.push(fe);if(fe.items&&fe.addxtype){fe.addxtype.apply(fe,fe.items);delete fe.items;}
 this.end();continue;}
@@ -712,11 +712,12 @@ Roo.XTemplate=function(){Roo.XTemplate.superclass.constructor.apply(this,argumen
 D.push({id:id,target:G,exec:F,test:fn,body:m[1]||''});s=s.replace(m[0],'{xtpl'+id+'}');++id;}for(var i=D.length-1;i>=0;--i){this.compileTpl(D[i]);}
 this.master=D[D.length-1];this.tpls=D;};Roo.extend(Roo.XTemplate,Roo.Template,{re:/\{([\w-\.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,applySubTemplate:function(id,A,B){var t=this.tpls[id];if(t.test&&!t.test.call(this,A,B)){return '';}if(t.exec&&t.exec.call(this,A,B)){return '';}var vs=t.target?t.target.call(this,A,B):A;B=t.target?A:B;if(t.target&&vs instanceof Array){var C=[];for(var i=0,D=vs.length;i<D;i++){C[C.length]=t.compiled.call(this,vs[i],B);}return C.join('');}return t.compiled.call(this,vs,B);},compileTpl:function(A){var fm=Roo.util.Format;var B=this.disableFormats!==true;var C=Roo.isGecko?"+":",";var fn=function(m,E,F,G){if(E.substr(0,4)=='xtpl'){return "'"+C+'this.applySubTemplate('+E.substr(4)+', values, parent)'+C+"'";}var v;if(E.indexOf('.')!=-1){v=E;}else {v="values['"+E+"']";}if(F&&B){G=G?','+G:"";if(F.substr(0,5)!="this."){F="fm."+F+'(';}else {F='this.call("'+F.substr(5)+'", ';G=", values";}}else {G='';F="("+v+" === undefined ? '' : ";}return "'"+C+F+v+G+")"+C+"'";};var D;if(Roo.isGecko){D="tpl.compiled = function(values, parent){ return '"+A.body.replace(/(\r\n|\n)/g,'\\n').replace(/'/g,"\\'").replace(this.re,fn)+"';};";}else {D=["tpl.compiled = function(values, parent){ return ['"];D.push(A.body.replace(/(\r\n|\n)/g,'\\n').replace(/'/g,"\\'").replace(this.re,fn));D.push("'].join('');};");D=D.join('');}eval(D);return this;},applyTemplate:function(A){return this.master.compiled.call(this,A,{});var s=this.subs;},apply:function(){return this.applyTemplate.apply(this,arguments);},compile:function(){return this;}});Roo.XTemplate.from=function(el){el=Roo.getDom(el);return new Roo.XTemplate(el.value||el.innerHTML);};
 Roo.XComponent=function(A){Roo.apply(this,A);this.addEvents({'built':true,'buildcomplete':true});Roo.XComponent.register(this);this.modules=false;this.el=false;}
-Roo.extend(Roo.XComponent,Roo.util.Observable,{el:false,panel:false,layout:false,disabled:false,parent:false,order:false,name:false,items:false});Roo.apply(Roo.XComponent,{buildCompleted:false,topModule:false,modules:[],elmodules:[],register:function(A){this.modules.push(A);},toObject:function(A){if(!A||typeof(A)=='object'){return A;}if(A[0]=='#'){return A;}var ar=A.split('.');var rt,o;rt=ar.shift();eval('if (typeof '+rt+' == "undefined"){ o = false;} o = '+rt+';');if(o===false){throw "Module not found : "+A;}
+Roo.extend(Roo.XComponent,Roo.util.Observable,{el:false,panel:false,layout:false,disabled:false,parent:false,order:false,name:false,region:'center',items:false,render:function(el){el=el||false;if(!el&&typeof(m.parent)=='string'&&m.parent[0]=='#'){this.parent=false;el=Roo.get(m.substr(1));}if(!this.parent){el=el?Roo.get(el):false;this.parent={el:new Roo.BorderLayout(el||document.body,{center:{titlebar:false,autoScroll:false,closeOnTab:true,tabPosition:'top',alwaysShowTabs:el?false:true,hideTabs:el?true:false,minTabWidth:140}})}}var A=this.tree();A.region=A.region||this.region;this.el=this.parent.el.addxtype(A);this.fireEvent('built',this);this.panel=this.el;this.layout=this.panel.layout;}});Roo.apply(Roo.XComponent,{buildCompleted:false,topModule:false,modules:[],elmodules:[],register:function(A){this.modules.push(A);},toObject:function(A){if(!A||typeof(A)=='object'){return A;}if(A[0]=='#'){return A;}var ar=A.split('.');var rt,o;rt=ar.shift();eval('if (typeof '+rt+' == "undefined"){ o = false;} o = '+rt+';');if(o===false){throw "Module not found : "+A;}
 Roo.each(ar,function(e){if(typeof(o[e])=='undefined'){throw "Module not found : "+A;}
 o=o[e];});return o;},preBuild:function(){Roo.each(this.modules,function(A){A.parent=this.toObject(A.parent);if(!A.parent){this.topModule=A;return;}if(typeof(A.parent)=='string'){this.elmodules.push(A);return;}if(!A.parent.modules){A.parent.modules=new Roo.util.MixedCollection(false,function(o){return o.order+''});}
 A.parent.modules.add(A);},this);},buildOrder:function(){var A=this;var B=function(a,b){return String(a).toUpperCase()>String(b).toUpperCase()?1:-1;};if((!this.topModule||!this.topModule.modules)&&!this.elmodules.length){throw "No top level modules to build";}var C=this.topModule?[this.topModule]:[];Roo.each(this.elmodules,function(e){C.push(e)});var D=function(m){C.push(m);if(m.modules){m.modules.keySort('ASC',B);m.modules.each(D);}if(m.finalize){m.finalize.name=m.name+" (clean up) ";C.push(m.finalize);}};if(this.topModule){this.topModule.modules.keySort('ASC',B);this.topModule.modules.each(D);}return C;},build:function(){this.preBuild();var A=this.buildOrder();if(!A.length){throw "NO modules!!!";}
-Roo.MessageBox.show({title:'loading'});Roo.MessageBox.show({title:"Please wait...",msg:"Building Interface...",width:450,progress:true,closable:false,modal:false});var B=A.length;var C=this;var D=function(){if(!A.length){Roo.debug&&Roo.log('hide?');Roo.MessageBox.hide();if(C.topModule){C.topModule.fireEvent('buildcomplete',C.topModule);}return false;}var m=A.shift();Roo.debug&&Roo.log(m);if(typeof(m)=='function'){m.call(this);return D.defer(10,C);}Roo.MessageBox.updateProgress((B-A.length)/B,"Building Interface "+(B-A.length)+" of "+B+(m.name?(' - '+m.name):''));var E=(typeof(m.disabled)=='function')?m.disabled.call(m.module.disabled):m.disabled;if(E){return D();}if(!m.parent||(typeof(m.parent)=='string'&&m.parent[0]=='#')){var F=m.parent?Roo.get(m.parent.substr(1)):document.body;if(!F){Roo.log("not rendering module "+m.name+" "+m.parent+" no found");return D.defer(10,C);}var G=new Ext.BorderLayout(m.parent?Roo.get(m.parent.substr(1)):document.body,{center:{titlebar:false,autoScroll:false,closeOnTab:true,tabPosition:'top',alwaysShowTabs:m.parent?false:true,hideTabs:m.parent?true:false,minTabWidth:140}});var H=m.tree();H.region='center';m.el=G.addxtype(H);m.panel=m.el;m.layout=m.panel.layout;return D.defer(10,C);}var H=m.tree();H.region=H.region||m.region;m.el=m.parent.el.addxtype(H);m.fireEvent('built',m);m.panel=m.el;m.layout=m.panel.layout;return D.defer(10,C);}
+Roo.MessageBox.show({title:'loading'});Roo.MessageBox.show({title:"Please wait...",msg:"Building Interface...",width:450,progress:true,closable:false,modal:false});var B=A.length;var C=this;var D=function(){if(!A.length){Roo.debug&&Roo.log('hide?');Roo.MessageBox.hide();if(C.topModule){C.topModule.fireEvent('buildcomplete',C.topModule);}return false;}var m=A.shift();Roo.debug&&Roo.log(m);if(typeof(m)=='function'){m.call(this);return D.defer(10,C);}Roo.MessageBox.updateProgress((B-A.length)/B,"Building Interface "+(B-A.length)+" of "+B+(m.name?(' - '+m.name):''));var E=(typeof(m.disabled)=='function')?m.disabled.call(m.module.disabled):m.disabled;if(E){return D();}
+m.render();return D.defer(10,C);}
 D.defer(1,C);}});
 Roo.Login=function(A){this.addEvents({'refreshed':true});Roo.apply(this,A);Roo.onReady(function(){this.onLoad();},this);Roo.Login.superclass.constructor.call(this,this);}
 Roo.extend(Roo.Login,Roo.LayoutDialog,{method:'POST',url:'',user:false,checkFails:0,intervalID:0,onLoad:function(){if(Roo.get('loading')){Roo.get('loading').remove();}