Roo/Document.js
[roojs1] / Roo / Document.js
1 /*
2  * Original code for Roojs - LGPL
3  * <script type="text/javascript">
4  */
5  
6 /**
7  * 
8  * This needs some more thought..
9  * 
10  *
11  * 
12  * 
13  * 
14  * @class Roo.XComponent
15  * @extends Roo.data.Observable
16  * 
17  * A delayed Element creator...
18  * 
19  * Mypart.xyx = new Roo.XComponent({
20
21     parent : 'Mypart.xyz', // empty == document.element.!!
22     order : '001',
23     name : 'xxxx'
24     region : 'xxxx'
25     disabled : function() {} 
26      
27     items : [  // technically only one component..
28         {
29             xtype : 'NestedLayoutPanel',
30             // technicall
31         }
32      ]
33  *})
34  * 
35  * 
36  * 
37  */
38 Roo.XComponent = function(cfg) {
39     Roo.apply(this, cfg);
40     this.addEvents({ 
41         /**
42              * @event built
43              * Fires when this the componnt is built
44              * @param {Button} this
45              * @param {EventObject} e The click event
46              */
47         'built' : true
48     });
49
50     Roo.XComponent.register(this);
51     this.modules = [];
52     this.el = false; // where the layout goes..
53     
54     
55 }
56 Roo.extend(Roo.XComponent, Roo.util.Observable {
57     /**
58      * @property el
59      * The created element (with Roo.factory())
60      * @type {Roo.Layout}
61      */
62     el  : false,
63     
64     /**
65      * @property el
66      * for BC  - use el in new code
67      * @type {Roo.Layout}
68      */
69     panel : false,
70     
71     /**
72      * @property layout
73      * for BC  - use el in new code
74      * @type {Roo.Layout}
75      */
76     layout : false,
77     
78      /**
79      * @cfg {Function|boolean} disabled
80      * If this module is disabled by some rule, return true from the funtion
81      */
82     disabled : false,
83     
84     /**
85      * @cfg {String} parent 
86      * Name of parent element which it get xtype added to..
87      */
88     parent: false,
89     
90     /**
91      * @cfg {String} order
92      * Used to set the order in which elements are created (usefull for multiple tabs)
93      */
94     
95     order : false,
96     /**
97      * @cfg {String} name
98      * String to display while loading.
99      */
100     name : false,
101     /**
102      * @cfg {Array} items
103      * A single item array - the first element is the root of the tree..
104      * It's done this way to stay compatible with the Xtype system...
105      */
106     items : false,
107 });
108
109 Roo.apply(Roo.XComponent, 
110     /**
111      * @property  buildCompleted
112      * True when the builder has completed building the interface.
113      * @type Boolean
114      */
115     buildCompleted : false,
116      
117     /**
118      * @property  topModule
119      * the upper most module - uses document.element as it's constructor.
120      * @type Object
121      */
122      
123     topModule  : false,
124       
125     /**
126      * @property  modules
127      * array of modules to be created by registration system.
128      * @type Roo.XComponent
129      */
130     
131     modules : [],
132       
133     
134     /**
135      * Register components to be built later.
136      * @param {Object} details about module
137      *
138      * This solves the following issues
139      * - Building is not done on page load, but after an authentication process has occured.
140      * - Interface elements are registered on page load
141      * - Parent Interface elements may not be loaded before child, so this handles that..
142      * 
143      *
144      * example:
145      * 
146      * MyApp.register({
147           order : '000001',
148           module : 'Pman.Tab.projectMgr',
149           region : 'center',
150           parent : 'Pman.layout',
151           disabled : false,  // or use a function..
152         })
153      * 
154      */
155     register : function(obj) {
156         this.modules.push(obj);
157          
158     },
159     /**
160      * convert a string to an object..
161      * 
162      */
163     
164     toObject : function(str)
165     {
166         if (typeof(str) == 'object') {
167             return str;
168         }
169         var ar = str.split('.');
170         var rt, o;
171         rt = ar.unshift();
172             /** eval:var:o */
173         eval('if (typeof ' + rt + ' == "undefined"){ o = false;} o = ' + rt + ';');
174         if (o === false) {
175             throw "Module not found : " + str;
176         }
177         Roo.each(ar, function(e) {
178             if (typeof(o[e]) == 'undefined') {
179                 throw "Module not found : " + str;
180             }
181             o = o[e];
182         });
183         return o;
184         
185     }
186     
187     
188     /**
189      * move modules into their correct place in the tree..
190      * 
191      */
192     preBuild : function ()
193     {
194         var modules = this.modules;
195         this.modules = false;
196         
197         Roo.each(modules , function (obj)
198         {
199             obj.parent = this.toObject(obj.parent);
200             
201             if (!obj.parent) {
202                 this.topModule = obj;
203                 return;
204             }
205             obj.parent = toObject(obj.parent);
206             if (!obj.parent.modules) {
207                 obj.parent.modules = new Roo.util.MixedCollection(false, 
208                     function(o) { return o.order + '' }
209                 );
210             }
211             
212             obj.parent.modules.add(obj);
213         }, this);
214     }
215     
216      /**
217      * make a list of modules to build.
218      * @return {Array} list of modules. 
219      */ 
220     
221     buildOrder : function()
222     {
223         var _this = this;
224         var cmp = function(a,b) {   
225             return String(a).toUpperCase() > String(b).toUpperCase() ? 1 : -1;
226         };
227         
228         if (!this.topModule || !this.topModule.modules) {
229             throw "No top level modules to build";
230         }
231        
232         // make a flat list in order of modules to build.
233         var mods = [ this.topModule ];
234         
235         
236         // add modules to their parents..
237         var addMod = function(m) {
238            // console.log(m.modKey);
239             
240             mods.push(m);
241             if (m.module.modules) {
242                 m.module.modules.keySort('ASC',  cmp );
243                 m.module.modules.each(addMod);
244             }
245             if (m.finalize) {
246                 m.finalize.name = m.name + " (clean up) ";
247                 mods.push(m.finalize);
248             }
249             
250         }
251         this.topModule.modules.keySort('ASC',  cmp );
252         this.topModule.modules.each(addMod);
253     }
254     
255      /**
256      * Build the registered modules.
257      * @param {Object} parent element.
258      * @param {Function} optional method to call after module has been added.
259      * 
260      */ 
261    
262     build : function() 
263     {
264         
265         this.preBuild();
266         var mods = this.buildOrder();
267         
268         //this.allmods = mods;
269         //console.log(mods);
270         //return;
271         if (!mods.length) { // should not happen
272             throw "NO modules!!!";
273         }
274         
275         
276         
277         // flash it up as modal - so we store the mask!?
278         Roo.MessageBox.show({ title: 'loading' });
279         Roo.MessageBox.show({
280            title: "Please wait...",
281            msg: "Building Interface...",
282            width:450,
283            progress:true,
284            closable:false,
285            modal: false
286           
287         });
288         var total = mods.length();
289         
290         var _this = this;
291         var progressRun = function() {
292             if (mods.length) {
293                 Roo.MessageBox.hide();
294                 _this.topModule.fireEvent('built', _this.topModule);
295                 return;    
296             }
297             
298             var m = mods.unshift();
299             
300             if (typeof(m) == 'function') {
301                 m.call(this);
302                 return progressRun.defer(10, _this);
303             } 
304             
305             Roo.MessageBox.updateProgress(
306                 (total  - mods.length)/total,  "Building Interface " + (total  - mods.length) + 
307                     " of " + total + 
308                     (m.name ? (' - ' + m.name) : '')
309                     );
310             
311          
312             
313             var disabled = (typeof(m.module.disabled) == 'function') ?
314                 m.module.disabled.call(m.module.disabled) : m.module.disabled;    
315             }
316             
317             if (disabled) {
318                 return progressRun(); // we do not update the display!
319             }
320             
321             m.el = m.parent.el.addxtype(m.items[0]);
322             m.panel = this.el;
323             m.layout = m.panel.layout;    
324              
325             
326         }
327         progressRun.defer(1, _this);
328      
329         
330         
331     }
332      
333    
334     
335     
336 });
337