<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js"><span id='Ext-ElementLoader'>/**
|
</span> * A class used to load remote content to an Element. Sample usage:
|
*
|
* Ext.get('el').load({
|
* url: 'myPage.php',
|
* scripts: true,
|
* params: {
|
* id: 1
|
* }
|
* });
|
*
|
* In general this class will not be instanced directly, rather the {@link Ext.Element#method-load} method
|
* will be used.
|
*/
|
Ext.define('Ext.ElementLoader', {
|
|
/* Begin Definitions */
|
|
mixins: {
|
observable: 'Ext.util.Observable'
|
},
|
|
uses: [
|
'Ext.data.Connection',
|
'Ext.Ajax'
|
],
|
|
statics: {
|
<span id='Ext-ElementLoader-property-Renderer'> Renderer: {
|
</span> Html: function(loader, response, active){
|
loader.getTarget().update(response.responseText, active.scripts === true);
|
return true;
|
}
|
}
|
},
|
|
/* End Definitions */
|
|
<span id='Ext-ElementLoader-cfg-url'> /**
|
</span> * @cfg {String} url (required)
|
* The url to retrieve the content from.
|
*/
|
url: null,
|
|
<span id='Ext-ElementLoader-cfg-params'> /**
|
</span> * @cfg {Object} params
|
* Any params to be attached to the Ajax request. These parameters will
|
* be overridden by any params in the load options.
|
*/
|
params: null,
|
|
<span id='Ext-ElementLoader-cfg-baseParams'> /**
|
</span> * @cfg {Object} baseParams Params that will be attached to every request. These parameters
|
* will not be overridden by any params in the load options.
|
*/
|
baseParams: null,
|
|
<span id='Ext-ElementLoader-cfg-autoLoad'> /**
|
</span> * @cfg {Boolean/Object} autoLoad
|
* True to have the loader make a request as soon as it is created.
|
* This argument can also be a set of options that will be passed to {@link #method-load} is called.
|
*/
|
autoLoad: false,
|
|
<span id='Ext-ElementLoader-cfg-target'> /**
|
</span> * @cfg {HTMLElement/Ext.Element/String} target
|
* The target element for the loader. It can be the DOM element, the id or an {@link Ext.Element}.
|
*/
|
target: null,
|
|
<span id='Ext-ElementLoader-cfg-loadMask'> /**
|
</span> * @cfg {Boolean/String} loadMask
|
* True or a string to show when the element is loading.
|
*/
|
loadMask: false,
|
|
<span id='Ext-ElementLoader-cfg-ajaxOptions'> /**
|
</span> * @cfg {Object} ajaxOptions
|
* Any additional options to be passed to the request, for example timeout or headers.
|
*/
|
ajaxOptions: null,
|
|
<span id='Ext-ElementLoader-cfg-scripts'> /**
|
</span> * @cfg {Boolean} scripts
|
* True to parse any inline script tags in the response.
|
*/
|
scripts: false,
|
|
<span id='Ext-ElementLoader-cfg-success'> /**
|
</span> * @cfg {Function} success
|
* A function to be called when a load request is successful.
|
* Will be called with the following config parameters:
|
*
|
* - this - The ElementLoader instance.
|
* - response - The response object.
|
* - options - Ajax options.
|
*/
|
|
<span id='Ext-ElementLoader-cfg-failure'> /**
|
</span> * @cfg {Function} failure A function to be called when a load request fails.
|
* Will be called with the following config parameters:
|
*
|
* - this - The ElementLoader instance.
|
* - response - The response object.
|
* - options - Ajax options.
|
*/
|
|
<span id='Ext-ElementLoader-cfg-callback'> /**
|
</span> * @cfg {Function} callback A function to be called when a load request finishes.
|
* Will be called with the following config parameters:
|
*
|
* - this - The ElementLoader instance.
|
* - success - True if successful request.
|
* - response - The response object.
|
* - options - Ajax options.
|
*/
|
|
<span id='Ext-ElementLoader-cfg-scope'> /**
|
</span> * @cfg {Object} scope
|
* The scope to execute the {@link #success} and {@link #failure} functions in.
|
*/
|
|
<span id='Ext-ElementLoader-cfg-renderer'> /**
|
</span> * @cfg {Function} renderer
|
* A custom function to render the content to the element. The function should
|
* return false if the renderer could not be applied. The passed parameters are:
|
*
|
* - The loader
|
* - The response
|
* - The active request
|
*/
|
|
<span id='Ext-ElementLoader-property-isLoader'> /**
|
</span> * @property {Boolean} isLoader
|
* `true` in this class to identify an object as an instantiated ElementLoader, or subclass thereof.
|
*/
|
isLoader: true,
|
|
<span id='Ext-ElementLoader-method-constructor'> constructor: function(config) {
|
</span> var me = this,
|
autoLoad;
|
|
config = config || {};
|
Ext.apply(me, config);
|
me.setTarget(me.target);
|
me.addEvents(
|
<span id='Ext-ElementLoader-event-beforeload'> /**
|
</span> * @event beforeload
|
* Fires before a load request is made to the server.
|
* Returning false from an event listener can prevent the load
|
* from occurring.
|
* @param {Ext.ElementLoader} this
|
* @param {Object} options The options passed to the request
|
*/
|
'beforeload',
|
|
<span id='Ext-ElementLoader-event-exception'> /**
|
</span> * @event exception
|
* Fires after an unsuccessful load.
|
* @param {Ext.ElementLoader} this
|
* @param {Object} response The response from the server
|
* @param {Object} options The options passed to the request
|
*/
|
'exception',
|
|
<span id='Ext-ElementLoader-event-load'> /**
|
</span> * @event load
|
* Fires after a successful load.
|
* @param {Ext.ElementLoader} this
|
* @param {Object} response The response from the server
|
* @param {Object} options The options passed to the request
|
*/
|
'load'
|
);
|
|
// don't pass config because we have already applied it.
|
me.mixins.observable.constructor.call(me);
|
|
if (me.autoLoad) {
|
autoLoad = me.autoLoad;
|
if (autoLoad === true) {
|
autoLoad = {};
|
}
|
me.load(autoLoad);
|
}
|
},
|
|
<span id='Ext-ElementLoader-method-setTarget'> /**
|
</span> * Sets an {@link Ext.Element} as the target of this loader.
|
* Note that if the target is changed, any active requests will be aborted.
|
* @param {String/HTMLElement/Ext.Element} target The element or its ID.
|
*/
|
setTarget: function(target){
|
var me = this;
|
target = Ext.get(target);
|
if (me.target && me.target != target) {
|
me.abort();
|
}
|
me.target = target;
|
},
|
|
<span id='Ext-ElementLoader-method-getTarget'> /**
|
</span> * Returns the target of this loader.
|
* @return {Ext.Component} The target or null if none exists.
|
*/
|
getTarget: function(){
|
return this.target || null;
|
},
|
|
<span id='Ext-ElementLoader-method-abort'> /**
|
</span> * Aborts the active load request
|
*/
|
abort: function(){
|
var active = this.active;
|
if (active !== undefined) {
|
Ext.Ajax.abort(active.request);
|
if (active.mask) {
|
this.removeMask();
|
}
|
delete this.active;
|
}
|
},
|
|
<span id='Ext-ElementLoader-method-removeMask'> /**
|
</span> * Removes the mask on the target
|
* @private
|
*/
|
removeMask: function(){
|
this.target.unmask();
|
},
|
|
<span id='Ext-ElementLoader-method-addMask'> /**
|
</span> * Adds the mask on the target
|
* @private
|
* @param {Boolean/Object} mask The mask configuration
|
*/
|
addMask: function(mask){
|
this.target.mask(mask === true ? null : mask);
|
},
|
|
<span id='Ext-ElementLoader-method-load'> /**
|
</span> * Loads new data from the server.
|
* @param {Object} options The options for the request. They can be any configuration option that can be specified for
|
* the class, with the exception of the target option. Note that any options passed to the method will override any
|
* class defaults.
|
*/
|
load: function(options) {
|
//<debug>
|
if (!this.target) {
|
Ext.Error.raise('A valid target is required when loading content');
|
}
|
//</debug>
|
|
options = Ext.apply({}, options);
|
|
var me = this,
|
mask = Ext.isDefined(options.loadMask) ? options.loadMask : me.loadMask,
|
params = Ext.apply({}, options.params),
|
ajaxOptions = Ext.apply({}, options.ajaxOptions),
|
callback = options.callback || me.callback,
|
scope = options.scope || me.scope || me;
|
|
Ext.applyIf(ajaxOptions, me.ajaxOptions);
|
Ext.applyIf(options, ajaxOptions);
|
|
Ext.applyIf(params, me.params);
|
Ext.apply(params, me.baseParams);
|
|
Ext.applyIf(options, {
|
url: me.url
|
});
|
|
//<debug>
|
if (!options.url) {
|
Ext.Error.raise('You must specify the URL from which content should be loaded');
|
}
|
//</debug>
|
|
Ext.apply(options, {
|
scope: me,
|
params: params,
|
callback: me.onComplete
|
});
|
|
if (me.fireEvent('beforeload', me, options) === false) {
|
return;
|
}
|
|
if (mask) {
|
me.addMask(mask);
|
}
|
|
me.active = {
|
options: options,
|
mask: mask,
|
scope: scope,
|
callback: callback,
|
success: options.success || me.success,
|
failure: options.failure || me.failure,
|
renderer: options.renderer || me.renderer,
|
scripts: Ext.isDefined(options.scripts) ? options.scripts : me.scripts
|
};
|
me.active.request = Ext.Ajax.request(options);
|
me.setOptions(me.active, options);
|
},
|
|
<span id='Ext-ElementLoader-method-setOptions'> /**
|
</span> * Sets any additional options on the active request
|
* @private
|
* @param {Object} active The active request
|
* @param {Object} options The initial options
|
*/
|
setOptions: Ext.emptyFn,
|
|
<span id='Ext-ElementLoader-method-onComplete'> /**
|
</span> * Parses the response after the request completes
|
* @private
|
* @param {Object} options Ajax options
|
* @param {Boolean} success Success status of the request
|
* @param {Object} response The response object
|
*/
|
onComplete: function(options, success, response) {
|
var me = this,
|
active = me.active,
|
scope;
|
|
if (active) {
|
scope = active.scope;
|
if (success) {
|
success = me.getRenderer(active.renderer).call(me, me, response, active) !== false;
|
}
|
|
if (success) {
|
Ext.callback(active.success, scope, [me, response, options]);
|
me.fireEvent('load', me, response, options);
|
} else {
|
Ext.callback(active.failure, scope, [me, response, options]);
|
me.fireEvent('exception', me, response, options);
|
}
|
Ext.callback(active.callback, scope, [me, success, response, options]);
|
if (active.mask) {
|
me.removeMask();
|
}
|
}
|
|
delete me.active;
|
},
|
|
<span id='Ext-ElementLoader-method-getRenderer'> /**
|
</span> * Gets the renderer to use
|
* @private
|
* @param {String/Function} renderer The renderer to use
|
* @return {Function} A rendering function to use.
|
*/
|
getRenderer: function(renderer){
|
if (Ext.isFunction(renderer)) {
|
return renderer;
|
}
|
return this.statics().Renderer.Html;
|
},
|
|
<span id='Ext-ElementLoader-method-startAutoRefresh'> /**
|
</span> * Automatically refreshes the content over a specified period.
|
* @param {Number} interval The interval to refresh in ms.
|
* @param {Object} options (optional) The options to pass to the load method. See {@link #method-load}
|
*/
|
startAutoRefresh: function(interval, options){
|
var me = this;
|
me.stopAutoRefresh();
|
me.autoRefresh = setInterval(function(){
|
me.load(options);
|
}, interval);
|
},
|
|
<span id='Ext-ElementLoader-method-stopAutoRefresh'> /**
|
</span> * Clears any auto refresh. See {@link #startAutoRefresh}.
|
*/
|
stopAutoRefresh: function(){
|
clearInterval(this.autoRefresh);
|
delete this.autoRefresh;
|
},
|
|
<span id='Ext-ElementLoader-method-isAutoRefreshing'> /**
|
</span> * Checks whether the loader is automatically refreshing. See {@link #startAutoRefresh}.
|
* @return {Boolean} True if the loader is automatically refreshing
|
*/
|
isAutoRefreshing: function(){
|
return Ext.isDefined(this.autoRefresh);
|
},
|
|
<span id='Ext-ElementLoader-method-destroy'> /**
|
</span> * Destroys the loader. Any active requests will be aborted.
|
*/
|
destroy: function(){
|
var me = this;
|
me.stopAutoRefresh();
|
delete me.target;
|
me.abort();
|
me.clearListeners();
|
}
|
});
|
</pre>
|
</body>
|
</html>
|
