examples/remoteload/ComponentLoader.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 Ext.namespace('Ext.ux');\r
  10 \r
  11 /**\r
  12  * @class Ext.ux.ComponentLoader\r
  13  * Provides an easy way to load components dynamically. If you provide these components\r
  14  * with an id you can use Ext.ComponentMgr's onAvailable function to manipulate the components\r
  15  * as they are added.\r
  16  * @singleton\r
  17  */\r
  18 Ext.ux.ComponentLoader = function() {\r
  19         var cm = Ext.ComponentMgr;                      \r
  20         return {\r
  21                 /*\r
  22                  *  \r
  23                  */\r
  24                 root: 'components',\r
  25                 /*\r
  26                  * Load components from a server resource, config options include anything available in @link Ext.data.Connect#request\r
  27                  * Note: Always uses the connection of Ext.Ajax \r
  28                  */\r
  29                 load : function(config) {\r
  30                         Ext.apply(config, {\r
  31                                 callback: this.onLoad.createDelegate(this, [config.container], true),\r
  32                                 scope: this\r
  33                         });     \r
  34                         if (config.container) {\r
  35                                 Ext.apply(config.params, {\r
  36                                         container: config.container\r
  37                                 });\r
  38                         }\r
  39                         Ext.Ajax.request(config);\r
  40                 },\r
  41                 // private\r
  42                 onLoad : function(opts, success, response, ct) {                        \r
  43                         var config = Ext.decode(response.responseText);\r
  44                         if (config.success) {\r
  45                                 var comps = config[this.root];                          \r
  46                                 // loop over each component returned.                           \r
  47                                 for (var i = 0; i < comps.length; i++) {\r
  48                                         var c = comps[i];\r
  49                                         // special case of viewport, no container to add to\r
  50                                         if (c.xtype && c.xtype === 'viewport') {\r
  51                                                 cm.create(c);\r
  52                                         // add to container\r
  53                                         } else {\r
  54                                                 var ct = c.container || ct;\r
  55                                                 Ext.getCmp(ct).add(c);\r
  56                                                 Ext.getCmp(ct).doLayout();\r
  57                                         }\r
  58                                 }\r
  59                                 \r
  60                         } else {\r
  61                                 this.onFailure();\r
  62                         }\r
  63                 },\r
  64                 onFailure: function() {\r
  65                         Ext.Msg.alert('Load failed.');\r
  66                 }\r
  67         };\r
  68 }();