2 * @class Ext.ElementLoader
3 * A class used to load remote content to an Element. Sample usage:
14 * In general this class will not be instanced directly, rather the {@link Ext.core.Element#load} method
18 Ext.define('Ext.ElementLoader', {
20 /* Begin Definitions */
23 observable: 'Ext.util.Observable'
27 'Ext.data.Connection',
33 Html: function(loader, response, active){
34 loader.getTarget().update(response.responseText, active.scripts === true);
43 * @cfg {String} url The url to retrieve the content from. Defaults to <tt>null</tt>.
48 * @cfg {Object} params Any params to be attached to the Ajax request. These parameters will
49 * be overridden by any params in the load options. Defaults to <tt>null</tt>.
54 * @cfg {Object} baseParams Params that will be attached to every request. These parameters
55 * will not be overridden by any params in the load options. Defaults to <tt>null</tt>.
60 * @cfg {Boolean/Object} autoLoad True to have the loader make a request as soon as it is created. Defaults to <tt>false</tt>.
61 * This argument can also be a set of options that will be passed to {@link #load} is called.
66 * @cfg {Mixed} target The target element for the loader. It can be the DOM element, the id or an Ext.Element.
71 * @cfg {Mixed} loadMask True or a string to show when the element is loading.
76 * @cfg {Object} ajaxOptions Any additional options to be passed to the request, for example timeout or headers. Defaults to <tt>null</tt>.
81 * @cfg {Boolean} scripts True to parse any inline script tags in the response.
86 * @cfg {Function} success A function to be called when a load request is successful.
90 * @cfg {Function} failure A function to be called when a load request fails.
94 * @cfg {Object} scope The scope to execute the {@link #success} and {@link #failure} functions in.
98 * @cfg {Function} renderer A custom function to render the content to the element. The passed parameters
101 * <li>The loader</li>
102 * <li>The response</li>
103 * <li>The active request</li>
109 constructor: function(config) {
113 config = config || {};
114 Ext.apply(me, config);
115 me.setTarget(me.target);
119 * Fires before a load request is made to the server.
120 * Returning false from an event listener can prevent the load
122 * @param {Ext.ElementLoader} this
123 * @param {Object} options The options passed to the request
129 * Fires after an unsuccessful load.
130 * @param {Ext.ElementLoader} this
131 * @param {Object} response The response from the server
132 * @param {Object} options The options passed to the request
138 * Fires after a successful load.
139 * @param {Ext.ElementLoader} this
140 * @param {Object} response The response from the server
141 * @param {Object} options The options passed to the request
146 // don't pass config because we have already applied it.
147 me.mixins.observable.constructor.call(me);
150 autoLoad = me.autoLoad;
151 if (autoLoad === true) {
159 * Set an {Ext.Element} as the target of this loader. Note that if the target is changed,
160 * any active requests will be aborted.
161 * @param {Mixed} target The element
163 setTarget: function(target){
165 target = Ext.get(target);
166 if (me.target && me.target != target) {
173 * Get the target of this loader.
174 * @return {Ext.Component} target The target, null if none exists.
176 getTarget: function(){
177 return this.target || null;
181 * Aborts the active load request
184 var active = this.active;
185 if (active !== undefined) {
186 Ext.Ajax.abort(active.request);
195 * Remove the mask on the target
198 removeMask: function(){
199 this.target.unmask();
203 * Add the mask on the target
205 * @param {Mixed} mask The mask configuration
207 addMask: function(mask){
208 this.target.mask(mask === true ? null : mask);
212 * Load new data from the server.
213 * @param {Object} options The options for the request. They can be any configuration option that can be specified for
214 * the class, with the exception of the target option. Note that any options passed to the method will override any
217 load: function(options) {
220 Ext.Error.raise('A valid target is required when loading content');
224 options = Ext.apply({}, options);
228 mask = Ext.isDefined(options.loadMask) ? options.loadMask : me.loadMask,
229 params = Ext.apply({}, options.params),
230 ajaxOptions = Ext.apply({}, options.ajaxOptions),
231 callback = options.callback || me.callback,
232 scope = options.scope || me.scope || me,
235 Ext.applyIf(ajaxOptions, me.ajaxOptions);
236 Ext.applyIf(options, ajaxOptions);
238 Ext.applyIf(params, me.params);
239 Ext.apply(params, me.baseParams);
241 Ext.applyIf(options, {
247 Ext.Error.raise('You must specify the URL from which content should be loaded');
254 callback: me.onComplete
257 if (me.fireEvent('beforeload', me, options) === false) {
265 request = Ext.Ajax.request(options);
272 success: options.success || me.success,
273 failure: options.failure || me.failure,
274 renderer: options.renderer || me.renderer,
275 scripts: Ext.isDefined(options.scripts) ? options.scripts : me.scripts
277 me.setOptions(me.active, options);
281 * Set any additional options on the active request
283 * @param {Object} active The active request
284 * @param {Object} options The initial options
286 setOptions: Ext.emptyFn,
289 * Parse the response after the request completes
291 * @param {Object} options Ajax options
292 * @param {Boolean} success Success status of the request
293 * @param {Object} response The response object
295 onComplete: function(options, success, response) {
298 scope = active.scope,
299 renderer = me.getRenderer(active.renderer);
303 success = renderer.call(me, me, response, active);
307 Ext.callback(active.success, scope, [me, response, options]);
308 me.fireEvent('load', me, response, options);
310 Ext.callback(active.failure, scope, [me, response, options]);
311 me.fireEvent('exception', me, response, options);
313 Ext.callback(active.callback, scope, [me, success, response, options]);
323 * Gets the renderer to use
325 * @param {String/Function} renderer The renderer to use
326 * @return {Function} A rendering function to use.
328 getRenderer: function(renderer){
329 if (Ext.isFunction(renderer)) {
332 return this.statics().Renderer.Html;
336 * Automatically refreshes the content over a specified period.
337 * @param {Number} interval The interval to refresh in ms.
338 * @param {Object} options (optional) The options to pass to the load method. See {@link #load}
340 startAutoRefresh: function(interval, options){
342 me.stopAutoRefresh();
343 me.autoRefresh = setInterval(function(){
349 * Clears any auto refresh. See {@link #startAutoRefresh}.
351 stopAutoRefresh: function(){
352 clearInterval(this.autoRefresh);
353 delete this.autoRefresh;
357 * Checks whether the loader is automatically refreshing. See {@link #startAutoRefresh}.
358 * @return {Boolean} True if the loader is automatically refreshing
360 isAutoRefreshing: function(){
361 return Ext.isDefined(this.autoRefresh);
365 * Destroys the loader. Any active requests will be aborted.
369 me.stopAutoRefresh();