docs/source/ElementLoader.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-ElementLoader'>/**
  19 </span> * @class Ext.ElementLoader
  20  * A class used to load remote content to an Element. Sample usage:
  21  * &lt;pre&gt;&lt;code&gt;
  22 Ext.get('el').load({
  23     url: 'myPage.php',
  24     scripts: true,
  25     params: {
  26         id: 1
  27     }
  28 });
  29  * &lt;/code&gt;&lt;/pre&gt;
  30  * &lt;p&gt;
  31  * In general this class will not be instanced directly, rather the {@link Ext.core.Element#load} method
  32  * will be used.
  33  * &lt;/p&gt;
  34  */
  35 Ext.define('Ext.ElementLoader', {
  36
  37     /* Begin Definitions */
  38
  39     mixins: {
  40         observable: 'Ext.util.Observable'
  41     },
  42
  43     uses: [
  44         'Ext.data.Connection',
  45         'Ext.Ajax'
  46     ],
  47
  48     statics: {
  49         Renderer: {
  50             Html: function(loader, response, active){
  51                 loader.getTarget().update(response.responseText, active.scripts === true);
  52                 return true;
  53             }
  54         }
  55     },
  56
  57     /* End Definitions */
  58
  59 <span id='Ext-ElementLoader-cfg-url'>    /**
  60 </span>     * @cfg {String} url The url to retrieve the content from. Defaults to &lt;tt&gt;null&lt;/tt&gt;.
  61      */
  62     url: null,
  63
  64 <span id='Ext-ElementLoader-cfg-params'>    /**
  65 </span>     * @cfg {Object} params Any params to be attached to the Ajax request. These parameters will
  66      * be overridden by any params in the load options. Defaults to &lt;tt&gt;null&lt;/tt&gt;.
  67      */
  68     params: null,
  69
  70 <span id='Ext-ElementLoader-cfg-baseParams'>    /**
  71 </span>     * @cfg {Object} baseParams Params that will be attached to every request. These parameters
  72      * will not be overridden by any params in the load options. Defaults to &lt;tt&gt;null&lt;/tt&gt;.
  73      */
  74     baseParams: null,
  75
  76 <span id='Ext-ElementLoader-cfg-autoLoad'>    /**
  77 </span>     * @cfg {Boolean/Object} autoLoad True to have the loader make a request as soon as it is created. Defaults to &lt;tt&gt;false&lt;/tt&gt;.
  78      * This argument can also be a set of options that will be passed to {@link #load} is called.
  79      */
  80     autoLoad: false,
  81
  82 <span id='Ext-ElementLoader-cfg-target'>    /**
  83 </span>     * @cfg {Mixed} target The target element for the loader. It can be the DOM element, the id or an Ext.Element.
  84      */
  85     target: null,
  86
  87 <span id='Ext-ElementLoader-cfg-loadMask'>    /**
  88 </span>     * @cfg {Mixed} loadMask True or a string to show when the element is loading.
  89      */
  90     loadMask: false,
  91
  92 <span id='Ext-ElementLoader-cfg-ajaxOptions'>    /**
  93 </span>     * @cfg {Object} ajaxOptions Any additional options to be passed to the request, for example timeout or headers. Defaults to &lt;tt&gt;null&lt;/tt&gt;.
  94      */
  95     ajaxOptions: null,
  96
  97 <span id='Ext-ElementLoader-cfg-scripts'>    /**
  98 </span>     * @cfg {Boolean} scripts True to parse any inline script tags in the response.
  99      */
 100     scripts: false,
 101
 102 <span id='Ext-ElementLoader-cfg-success'>    /**
 103 </span>     * @cfg {Function} success A function to be called when a load request is successful.
 104      */
 105
 106 <span id='Ext-ElementLoader-cfg-failure'>    /**
 107 </span>     * @cfg {Function} failure A function to be called when a load request fails.
 108      */
 109
 110 <span id='Ext-ElementLoader-cfg-scope'>    /**
 111 </span>     * @cfg {Object} scope The scope to execute the {@link #success} and {@link #failure} functions in.
 112      */
 113
 114 <span id='Ext-ElementLoader-cfg-renderer'>    /**
 115 </span>     * @cfg {Function} renderer A custom function to render the content to the element. The passed parameters
 116      * are
 117      * &lt;ul&gt;
 118      * &lt;li&gt;The loader&lt;/li&gt;
 119      * &lt;li&gt;The response&lt;/li&gt;
 120      * &lt;li&gt;The active request&lt;/li&gt;
 121      * &lt;/ul&gt;
 122      */
 123
 124     isLoader: true,
 125
 126     constructor: function(config) {
 127         var me = this,
 128             autoLoad;
 129
 130         config = config || {};
 131         Ext.apply(me, config);
 132         me.setTarget(me.target);
 133         me.addEvents(
 134 <span id='Ext-ElementLoader-event-beforeload'>            /**
 135 </span>             * @event beforeload
 136              * Fires before a load request is made to the server.
 137              * Returning false from an event listener can prevent the load
 138              * from occurring.
 139              * @param {Ext.ElementLoader} this
 140              * @param {Object} options The options passed to the request
 141              */
 142             'beforeload',
 143
 144 <span id='Ext-ElementLoader-event-exception'>            /**
 145 </span>             * @event exception
 146              * Fires after an unsuccessful load.
 147              * @param {Ext.ElementLoader} this
 148              * @param {Object} response The response from the server
 149              * @param {Object} options The options passed to the request
 150              */
 151             'exception',
 152
 153 <span id='Ext-ElementLoader-event-exception'>            /**
 154 </span>             * @event exception
 155              * Fires after a successful load.
 156              * @param {Ext.ElementLoader} this
 157              * @param {Object} response The response from the server
 158              * @param {Object} options The options passed to the request
 159              */
 160             'load'
 161         );
 162
 163         // don't pass config because we have already applied it.
 164         me.mixins.observable.constructor.call(me);
 165
 166         if (me.autoLoad) {
 167             autoLoad = me.autoLoad;
 168             if (autoLoad === true) {
 169                 autoLoad = {};
 170             }
 171             me.load(autoLoad);
 172         }
 173     },
 174
 175 <span id='Ext-ElementLoader-method-setTarget'>    /**
 176 </span>     * Set an {Ext.Element} as the target of this loader. Note that if the target is changed,
 177      * any active requests will be aborted.
 178      * @param {Mixed} target The element
 179      */
 180     setTarget: function(target){
 181         var me = this;
 182         target = Ext.get(target);
 183         if (me.target &amp;&amp; me.target != target) {
 184             me.abort();
 185         }
 186         me.target = target;
 187     },
 188
 189 <span id='Ext-ElementLoader-method-getTarget'>    /**
 190 </span>     * Get the target of this loader.
 191      * @return {Ext.Component} target The target, null if none exists.
 192      */
 193     getTarget: function(){
 194         return this.target || null;
 195     },
 196
 197 <span id='Ext-ElementLoader-method-abort'>    /**
 198 </span>     * Aborts the active load request
 199      */
 200     abort: function(){
 201         var active = this.active;
 202         if (active !== undefined) {
 203             Ext.Ajax.abort(active.request);
 204             if (active.mask) {
 205                 this.removeMask();
 206             }
 207             delete this.active;
 208         }
 209     },
 210
 211 <span id='Ext-ElementLoader-method-removeMask'>    /**
 212 </span>     * Remove the mask on the target
 213      * @private
 214      */
 215     removeMask: function(){
 216         this.target.unmask();
 217     },
 218
 219 <span id='Ext-ElementLoader-method-addMask'>    /**
 220 </span>     * Add the mask on the target
 221      * @private
 222      * @param {Mixed} mask The mask configuration
 223      */
 224     addMask: function(mask){
 225         this.target.mask(mask === true ? null : mask);
 226     },
 227
 228 <span id='Ext-ElementLoader-method-load'>    /**
 229 </span>     * Load new data from the server.
 230      * @param {Object} options The options for the request. They can be any configuration option that can be specified for
 231      * the class, with the exception of the target option. Note that any options passed to the method will override any
 232      * class defaults.
 233      */
 234     load: function(options) {
 235         //&lt;debug&gt;
 236         if (!this.target) {
 237             Ext.Error.raise('A valid target is required when loading content');
 238         }
 239         //&lt;/debug&gt;
 240
 241         options = Ext.apply({}, options);
 242
 243         var me = this,
 244             target = me.target,
 245             mask = Ext.isDefined(options.loadMask) ? options.loadMask : me.loadMask,
 246             params = Ext.apply({}, options.params),
 247             ajaxOptions = Ext.apply({}, options.ajaxOptions),
 248             callback = options.callback || me.callback,
 249             scope = options.scope || me.scope || me,
 250             request;
 251
 252         Ext.applyIf(ajaxOptions, me.ajaxOptions);
 253         Ext.applyIf(options, ajaxOptions);
 254
 255         Ext.applyIf(params, me.params);
 256         Ext.apply(params, me.baseParams);
 257
 258         Ext.applyIf(options, {
 259             url: me.url
 260         });
 261
 262         //&lt;debug&gt;
 263         if (!options.url) {
 264             Ext.Error.raise('You must specify the URL from which content should be loaded');
 265         }
 266         //&lt;/debug&gt;
 267
 268         Ext.apply(options, {
 269             scope: me,
 270             params: params,
 271             callback: me.onComplete
 272         });
 273
 274         if (me.fireEvent('beforeload', me, options) === false) {
 275             return;
 276         }
 277
 278         if (mask) {
 279             me.addMask(mask);
 280         }
 281
 282         request = Ext.Ajax.request(options);
 283         me.active = {
 284             request: request,
 285             options: options,
 286             mask: mask,
 287             scope: scope,
 288             callback: callback,
 289             success: options.success || me.success,
 290             failure: options.failure || me.failure,
 291             renderer: options.renderer || me.renderer,
 292             scripts: Ext.isDefined(options.scripts) ? options.scripts : me.scripts
 293         };
 294         me.setOptions(me.active, options);
 295     },
 296
 297 <span id='Ext-ElementLoader-property-setOptions'>    /**
 298 </span>     * Set any additional options on the active request
 299      * @private
 300      * @param {Object} active The active request
 301      * @param {Object} options The initial options
 302      */
 303     setOptions: Ext.emptyFn,
 304
 305 <span id='Ext-ElementLoader-method-onComplete'>    /**
 306 </span>     * Parse the response after the request completes
 307      * @private
 308      * @param {Object} options Ajax options
 309      * @param {Boolean} success Success status of the request
 310      * @param {Object} response The response object
 311      */
 312     onComplete: function(options, success, response) {
 313         var me = this,
 314             active = me.active,
 315             scope = active.scope,
 316             renderer = me.getRenderer(active.renderer);
 317
 318
 319         if (success) {
 320             success = renderer.call(me, me, response, active);
 321         }
 322
 323         if (success) {
 324             Ext.callback(active.success, scope, [me, response, options]);
 325             me.fireEvent('load', me, response, options);
 326         } else {
 327             Ext.callback(active.failure, scope, [me, response, options]);
 328             me.fireEvent('exception', me, response, options);
 329         }
 330         Ext.callback(active.callback, scope, [me, success, response, options]);
 331
 332         if (active.mask) {
 333             me.removeMask();
 334         }
 335
 336         delete me.active;
 337     },
 338
 339 <span id='Ext-ElementLoader-method-getRenderer'>    /**
 340 </span>     * Gets the renderer to use
 341      * @private
 342      * @param {String/Function} renderer The renderer to use
 343      * @return {Function} A rendering function to use.
 344      */
 345     getRenderer: function(renderer){
 346         if (Ext.isFunction(renderer)) {
 347             return renderer;
 348         }
 349         return this.statics().Renderer.Html;
 350     },
 351
 352 <span id='Ext-ElementLoader-method-startAutoRefresh'>    /**
 353 </span>     * Automatically refreshes the content over a specified period.
 354      * @param {Number} interval The interval to refresh in ms.
 355      * @param {Object} options (optional) The options to pass to the load method. See {@link #load}
 356      */
 357     startAutoRefresh: function(interval, options){
 358         var me = this;
 359         me.stopAutoRefresh();
 360         me.autoRefresh = setInterval(function(){
 361             me.load(options);
 362         }, interval);
 363     },
 364
 365 <span id='Ext-ElementLoader-method-stopAutoRefresh'>    /**
 366 </span>     * Clears any auto refresh. See {@link #startAutoRefresh}.
 367      */
 368     stopAutoRefresh: function(){
 369         clearInterval(this.autoRefresh);
 370         delete this.autoRefresh;
 371     },
 372
 373 <span id='Ext-ElementLoader-method-isAutoRefreshing'>    /**
 374 </span>     * Checks whether the loader is automatically refreshing. See {@link #startAutoRefresh}.
 375      * @return {Boolean} True if the loader is automatically refreshing
 376      */
 377     isAutoRefreshing: function(){
 378         return Ext.isDefined(this.autoRefresh);
 379     },
 380
 381 <span id='Ext-ElementLoader-method-destroy'>    /**
 382 </span>     * Destroys the loader. Any active requests will be aborted.
 383      */
 384     destroy: function(){
 385         var me = this;
 386         me.stopAutoRefresh();
 387         delete me.target;
 388         me.abort();
 389         me.clearListeners();
 390     }
 391 });
 392 </pre>
 393 </body>
 394 </html>