docs/source/ComponentLoader.html

   1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-ComponentLoader'>/**
   2 </span> * @class Ext.ComponentLoader
   3  * @extends Ext.ElementLoader
   4  *
   5  * This class is used to load content via Ajax into a {@link Ext.Component}. In general
   6  * this class will not be instanced directly, rather a loader configuration will be passed to the
   7  * constructor of the {@link Ext.Component}.
   8  *
   9  * ## HTML Renderer
  10  * By default, the content loaded will be processed as raw html. The response text
  11  * from the request is taken and added to the component. This can be used in
  12  * conjunction with the {@link #scripts} option to execute any inline scripts in
  13  * the resulting content. Using this renderer has the same effect as passing the
  14  * {@link Ext.Component#html} configuration option.
  15  *
  16  * ## Data Renderer
  17  * This renderer allows content to be added by using JSON data and a {@link Ext.XTemplate}.
  18  * The content received from the response is passed to the {@link Ext.Component#update} method.
  19  * This content is run through the attached {@link Ext.Component#tpl} and the data is added to
  20  * the Component. Using this renderer has the same effect as using the {@link Ext.Component#data}
  21  * configuration in conjunction with a {@link Ext.Component#tpl}.
  22  *
  23  * ## Component Renderer
  24  * This renderer can only be used with a {@link Ext.Container} and subclasses. It allows for
  25  * Components to be loaded remotely into a Container. The response is expected to be a single/series of
  26  * {@link Ext.Component} configuration objects. When the response is received, the data is decoded
  27  * and then passed to {@link Ext.Container#add}. Using this renderer has the same effect as specifying
  28  * the {@link Ext.Container#items} configuration on a Container.
  29  *
  30  * ## Custom Renderer
  31  * A custom function can be passed to handle any other special case, see the {@link #renderer} option.
  32  *
  33  * ## Example Usage
  34  *     new Ext.Component({
  35  *         tpl: '{firstName} - {lastName}',
  36  *         loader: {
  37  *             url: 'myPage.php',
  38  *             renderer: 'data',
  39  *             params: {
  40  *                 userId: 1
  41  *             }
  42  *         }
  43  *     });
  44  */
  45 Ext.define('Ext.ComponentLoader', {
  46
  47     /* Begin Definitions */
  48
  49     extend: 'Ext.ElementLoader',
  50
  51     statics: {
  52         Renderer: {
  53             Data: function(loader, response, active){
  54                 var success = true;
  55                 try {
  56                     loader.getTarget().update(Ext.decode(response.responseText));
  57                 } catch (e) {
  58                     success = false;
  59                 }
  60                 return success;
  61             },
  62
  63             Component: function(loader, response, active){
  64                 var success = true,
  65                     target = loader.getTarget(),
  66                     items = [];
  67
  68                 //&lt;debug&gt;
  69                 if (!target.isContainer) {
  70                     Ext.Error.raise({
  71                         target: target,
  72                         msg: 'Components can only be loaded into a container'
  73                     });
  74                 }
  75                 //&lt;/debug&gt;
  76
  77                 try {
  78                     items = Ext.decode(response.responseText);
  79                 } catch (e) {
  80                     success = false;
  81                 }
  82
  83                 if (success) {
  84                     if (active.removeAll) {
  85                         target.removeAll();
  86                     }
  87                     target.add(items);
  88                 }
  89                 return success;
  90             }
  91         }
  92     },
  93
  94     /* End Definitions */
  95
  96 <span id='Ext-ComponentLoader-cfg-target'>    /**
  97 </span>     * @cfg {Ext.Component/String} target The target {@link Ext.Component} for the loader. Defaults to &lt;tt&gt;null&lt;/tt&gt;.
  98      * If a string is passed it will be looked up via the id.
  99      */
 100     target: null,
 101
 102 <span id='Ext-ComponentLoader-cfg-loadMask'>    /**
 103 </span>     * @cfg {Mixed} loadMask True or a {@link Ext.LoadMask} configuration to enable masking during loading. Defaults to &lt;tt&gt;false&lt;/tt&gt;.
 104      */
 105     loadMask: false,
 106
 107 <span id='Ext-ComponentLoader-cfg-scripts'>    /**
 108 </span>     * @cfg {Boolean} scripts True to parse any inline script tags in the response. This only used when using the html
 109      * {@link #renderer}.
 110      */
 111
 112 <span id='Ext-ComponentLoader-cfg-renderer'>    /**
 113 </span>     * @cfg {String/Function} renderer
 114
 115 The type of content that is to be loaded into, which can be one of 3 types:
 116
 117 + **html** : Loads raw html content, see {@link Ext.Component#html}
 118 + **data** : Loads raw html content, see {@link Ext.Component#data}
 119 + **component** : Loads child {Ext.Component} instances. This option is only valid when used with a Container.
 120
 121 Defaults to `html`.
 122
 123 Alternatively, you can pass a function which is called with the following parameters.
 124
 125 + loader - Loader instance
 126 + response - The server response
 127 + active - The active request
 128
 129 The function must return false is loading is not successful. Below is a sample of using a custom renderer:
 130
 131     new Ext.Component({
 132         loader: {
 133             url: 'myPage.php',
 134             renderer: function(loader, response, active) {
 135                 var text = response.responseText;
 136                 loader.getTarget().update('The response is ' + text);
 137                 return true;
 138             }
 139         }
 140     });
 141      * @markdown
 142      */
 143     renderer: 'html',
 144
 145 <span id='Ext-ComponentLoader-method-setTarget'>    /**
 146 </span>     * Set a {Ext.Component} as the target of this loader. Note that if the target is changed,
 147      * any active requests will be aborted.
 148      * @param {String/Ext.Component} target The component to be the target of this loader. If a string is passed
 149      * it will be looked up via its id.
 150      */
 151     setTarget: function(target){
 152         var me = this;
 153
 154         if (Ext.isString(target)) {
 155             target = Ext.getCmp(target);
 156         }
 157
 158         if (me.target &amp;&amp; me.target != target) {
 159             me.abort();
 160         }
 161         me.target = target;
 162     },
 163
 164     // inherit docs
 165     removeMask: function(){
 166         this.target.setLoading(false);
 167     },
 168
 169 <span id='Ext-ComponentLoader-method-addMask'>    /**
 170 </span>     * Add the mask on the target
 171      * @private
 172      * @param {Mixed} mask The mask configuration
 173      */
 174     addMask: function(mask){
 175         this.target.setLoading(mask);
 176     },
 177
 178 <span id='Ext-ComponentLoader-method-setOptions'>    /**
 179 </span>     * Get the target of this loader.
 180      * @return {Ext.Component} target The target, null if none exists.
 181      */
 182
 183     setOptions: function(active, options){
 184         active.removeAll = Ext.isDefined(options.removeAll) ? options.removeAll : this.removeAll;
 185     },
 186
 187 <span id='Ext-ComponentLoader-method-getRenderer'>    /**
 188 </span>     * Gets the renderer to use
 189      * @private
 190      * @param {String/Function} renderer The renderer to use
 191      * @return {Function} A rendering function to use.
 192      */
 193     getRenderer: function(renderer){
 194         if (Ext.isFunction(renderer)) {
 195             return renderer;
 196         }
 197
 198         var renderers = this.statics().Renderer;
 199         switch (renderer) {
 200             case 'component':
 201                 return renderers.Component;
 202             case 'data':
 203                 return renderers.Data;
 204             default:
 205                 return Ext.ElementLoader.Renderer.Html;
 206         }
 207     }
 208 });
 209 </pre></pre></body></html>