UpdateManager.js
/**
* @class Ext.UpdateManager
* @extends Ext.util.Observable
* Provides AJAX-style update for Element object.<br><br>
* Usage:<br>
* <pre><code>
* // Get it from a Ext.Element object
* var el = Ext.get("foo");
* var mgr = el.getUpdateManager();
* mgr.update("http://myserver.com/index.php", "param1=1&param2=2");
* ...
* mgr.formUpdate("myFormId", "http://myserver.com/index.php");
* <br>
* // or directly (returns the same UpdateManager instance)
* var mgr = new Ext.UpdateManager("myElementId");
* mgr.startAutoRefresh(60, "http://myserver.com/index.php");
* mgr.on("update", myFcnNeedsToKnow);
* <br>
// short handed call directly from the element object
Ext.get("foo").load({
url: "bar.php",
scripts:true,
params: "for=bar",
text: "Loading Foo..."
});
* </code></pre>
* @constructor
* Create new UpdateManager directly.
* @param {String/HTMLElement/Ext.Element} el The element to update
* @param {Boolean} forceNew （可选） By default the constructor checks to see if the passed element already has an UpdateManager and if it does it returns the same instance. This will skip that check (useful for extending this class).
*/
Ext.UpdateManager = function(el, forceNew){
el = Ext.get(el);
if(!forceNew && el.updateManager){
return el.updateManager;
}
/**
* The Element object
* @type Ext.Element
*/
this.el = el;
/**
* Cached url to use for refreshes. Overwritten every time update() is called unless "discardUrl" param is set to true.
* @type String
*/
this.defaultUrl = null;
this.addEvents({
/**
* @event beforeupdate
* Fired before an update is made, return false from your handler and the update is cancelled.
* @param {Ext.Element} el
* @param {String/Object/Function} url
* @param {String/Object} params
*/
"beforeupdate": true,
/**
* @event update
* Fired after successful update is made.
* @param {Ext.Element} el
* @param {Object} oResponseObject The response Object
*/
"update": true,
/**
* @event failure
* Fired on update failure.
* @param {Ext.Element} el
* @param {Object} oResponseObject The response Object
*/
"failure": true
});
var d = Ext.UpdateManager.defaults;
/**
* Blank page URL to use with SSL file uploads (Defaults to Ext.UpdateManager.defaults.sslBlankUrl or "about:blank").
* @type String
*/
this.sslBlankUrl = d.sslBlankUrl;
/**
* Whether to append unique parameter on get request to disable caching (Defaults to Ext.UpdateManager.defaults.disableCaching or false).
* @type Boolean
*/
this.disableCaching = d.disableCaching;
/**
* Text for loading indicator (Defaults to Ext.UpdateManager.defaults.indicatorText or '<div class="loading-indicator">Loading...</div>').
* @type String
*/
this.indicatorText = d.indicatorText;
/**
* Whether to show indicatorText when loading (Defaults to Ext.UpdateManager.defaults.showLoadIndicator or true).
* @type String
*/
this.showLoadIndicator = d.showLoadIndicator;
/**
* Timeout for requests or form posts in seconds (Defaults to Ext.UpdateManager.defaults.timeout or 30 seconds).
* @type Number
*/
this.timeout = d.timeout;
/**
* True to process scripts in the output (Defaults to Ext.UpdateManager.defaults.loadScripts (false)).
* @type Boolean
*/
this.loadScripts = d.loadScripts;
/**
* Transaction object of current executing transaction
*/
this.transaction = null;
/**
* @private
*/
this.autoRefreshProcId = null;
/**
* Delegate for refresh() prebound to "this", use myUpdater.refreshDelegate.createCallback(arg1, arg2) to bind arguments
* @type Function
*/
this.refreshDelegate = this.refresh.createDelegate(this);
/**
* Delegate for update() prebound to "this", use myUpdater.updateDelegate.createCallback(arg1, arg2) to bind arguments
* @type Function
*/
this.updateDelegate = this.update.createDelegate(this);
/**
* Delegate for formUpdate() prebound to "this", use myUpdater.formUpdateDelegate.createCallback(arg1, arg2) to bind arguments
* @type Function
*/
this.formUpdateDelegate = this.formUpdate.createDelegate(this);
/**
* @private
*/
this.successDelegate = this.processSuccess.createDelegate(this);
/**
* @private
*/
this.failureDelegate = this.processFailure.createDelegate(this);
/**
* The renderer for this UpdateManager. Defaults to {@link Ext.UpdateManager.BasicRenderer}.
*/
this.renderer = new Ext.UpdateManager.BasicRenderer();
Ext.UpdateManager.superclass.constructor.call(this);
};
Ext.extend(Ext.UpdateManager, Ext.util.Observable, {
/**
* Get the Element this UpdateManager is bound to
* @return {Ext.Element} The element
*/
getEl : function(){
return this.el;
},
/**
* Performs an async request, updating this element with the response. If params are specified it uses POST, otherwise it uses GET.
* @param {Object/String/Function} url The url for this request or a function to call to get the url or a config object containing any of the following options:
<pre><code>
um.update({<br/>
url: "your-url.php",<br/>
params: {param1: "foo", param2: "bar"}, // or a URL encoded string<br/>
callback: yourFunction,<br/>
scope: yourObject, //(optional scope) <br/>
discardUrl: false, <br/>
nocache: false,<br/>
text: "Loading...",<br/>
timeout: 30,<br/>
scripts: false<br/>
});
</code></pre>
* The only required property is url. The optional properties nocache, text and scripts
* are shorthand for disableCaching, indicatorText and loadScripts and are used to set their associated property on this UpdateManager instance.
* @param {String/Object} params （可选） The parameters to pass as either a url encoded string "param1=1&param2=2" or an object {param1: 1, param2: 2}
* @param {Function} callback （可选） Callback when transaction is complete - called with signature (oElement, bSuccess, oResponse)
* @param {Boolean} discardUrl （可选） By default when you execute an update the defaultUrl is changed to the last used url. If true, it will not store the url.
*/
update : function(url, params, callback, discardUrl){
if(this.fireEvent("beforeupdate", this.el, url, params) !== false){
var method = this.method;
if(typeof url == "object"){ // must be config object
var cfg = url;
url = cfg.url;
params = params || cfg.params;
callback = callback || cfg.callback;
discardUrl = discardUrl || cfg.discardUrl;
if(callback && cfg.scope){
callback = callback.createDelegate(cfg.scope);
}
if(typeof cfg.method != "undefined"){method = cfg.method;};
if(typeof cfg.nocache != "undefined"){this.disableCaching = cfg.nocache;};
if(typeof cfg.text != "undefined"){this.indicatorText = '<div class="loading-indicator">'+cfg.text+"</div>";};
if(typeof cfg.scripts != "undefined"){this.loadScripts = cfg.scripts;};
if(typeof cfg.timeout != "undefined"){this.timeout = cfg.timeout;};
}
this.showLoading();
if(!discardUrl){
this.defaultUrl = url;
}
if(typeof url == "function"){
url = url.call(this);
}
if(typeof params == "function"){
params = params();
}
if(params && typeof params != "string"){ // must be object
var buf = [];
for(var key in params){
if(typeof params[key] != "function"){
buf.push(encodeURIComponent(key), "=", encodeURIComponent(params[key]), "&");
}
}
delete buf[buf.length-1];
params = buf.join("");
}
var cb = {
success: this.successDelegate,
failure: this.failureDelegate,
timeout: (this.timeout*1000),
argument: {"url": url, "form": null, "callback": callback, "params": params}
};
method = method || (params ? "POST" : "GET");
if(method == "GET"){
url = this.prepareUrl(url);
}
this.transaction = Ext.lib.Ajax.request(method, url, cb, params);
}
},
/**
* Performs an async form post, updating this element with the response. If the form has the attribute enctype="multipart/form-data", it assumes it's a file upload.
* Uses this.sslBlankUrl for SSL file uploads to prevent IE security warning. See YUI docs for more info.
* @param {String/HTMLElement} form The form Id or form element
* @param {String} url （可选） The url to pass the form to. If omitted the action attribute on the form will be used.
* @param {Boolean} reset （可选） Whether to try to reset the form after the update
* @param {Function} callback （可选） Callback when transaction is complete - called with signature (oElement, bSuccess, oResponse)
*/
formUpdate : function(form, url, reset, callback){
if(this.fireEvent("beforeupdate", this.el, form, url) !== false){
formEl = Ext.getDom(form);
if(typeof url == "function"){
url = url.call(this);
}
if(typeof params == "function"){
params = params();
}
url = url || formEl.action;
var cb = {
success: this.successDelegate,
failure: this.failureDelegate,
timeout: (this.timeout*1000),
argument: {"url": url, "form": formEl, "callback": callback, "reset": reset}
};
var isUpload = false;
var enctype = formEl.getAttribute("enctype");
if(enctype && enctype.toLowerCase() == "multipart/form-data"){
isUpload = true;
cb.upload = this.successDelegate;
}
this.transaction = Ext.lib.Ajax.formRequest(formEl, url, cb, null, isUpload, this.sslBlankUrl);
this.showLoading.defer(1, this);
}
},
/**
* Refresh the element with the last used url or defaultUrl. If there is no url, it returns immediately
* @param {Function} callback （可选） Callback when transaction is complete - called with signature (oElement, bSuccess)
*/
refresh : function(callback){
if(this.defaultUrl == null){
return;
}
this.update(this.defaultUrl, null, callback, true);
},
/**
* Set this element to auto refresh.
* @param {Number} interval How often to update (in seconds).
* @param {String/Function} url （可选） The url for this request or a function to call to get the url (Defaults to the last used url)
* @param {String/Object} params （可选） The parameters to pass as either a url encoded string "¶m1=1¶m2=2" or as an object {param1: 1, param2: 2}
* @param {Function} callback （可选） Callback when transaction is complete - called with signature (oElement, bSuccess)
* @param {Boolean} refreshNow （可选） Whether to execute the refresh now, or wait the interval
*/
startAutoRefresh : function(interval, url, params, callback, refreshNow){
if(refreshNow){
this.update(url || this.defaultUrl, params, callback, true);
}
if(this.autoRefreshProcId){
clearInterval(this.autoRefreshProcId);
}
this.autoRefreshProcId = setInterval(this.update.createDelegate(this, [url || this.defaultUrl, params, callback, true]), interval*1000);
},
/**
* Stop auto refresh on this element.
*/
stopAutoRefresh : function(){
if(this.autoRefreshProcId){
clearInterval(this.autoRefreshProcId);
delete this.autoRefreshProcId;
}
},
isAutoRefreshing : function(){
return this.autoRefreshProcId ? true : false;
},
/**
* Called to update the element to "Loading" state. Override to perform custom action.
*/
showLoading : function(){
if(this.showLoadIndicator){
this.el.update(this.indicatorText);
}
},
/**
* Adds unique parameter to query string if disableCaching = true
* @private
*/
prepareUrl : function(url){
if(this.disableCaching){
var append = "_dc=" + (new Date().getTime());
if(url.indexOf("?") !== -1){
url += "&" + append;
}else{
url += "?" + append;
}
}
return url;
},
/**
* @private
*/
processSuccess : function(response){
this.transaction = null;
if(response.argument.form && response.argument.reset){
try{ // put in try/catch since some older FF releases had problems with this
response.argument.form.reset();
}catch(e){}
}
if(this.loadScripts){
this.renderer.render(this.el, response, this,
this.updateComplete.createDelegate(this, [response]));
}else{
this.renderer.render(this.el, response, this);
this.updateComplete(response);
}
},
updateComplete : function(response){
this.fireEvent("update", this.el, response);
if(typeof response.argument.callback == "function"){
response.argument.callback(this.el, true, response);
}
},
/**
* @private
*/
processFailure : function(response){
this.transaction = null;
this.fireEvent("failure", this.el, response);
if(typeof response.argument.callback == "function"){
response.argument.callback(this.el, false, response);
}
},
/**
* Set the content renderer for this UpdateManager. See {@link Ext.UpdateManager.BasicRenderer#render} for more details.
* @param {Object} renderer The object implementing the render() method
*/
setRenderer : function(renderer){
this.renderer = renderer;
},
getRenderer : function(){
return this.renderer;
},
/**
* Set the defaultUrl used for updates
* @param {String/Function} defaultUrl The url or a function to call to get the url
*/
setDefaultUrl : function(defaultUrl){
this.defaultUrl = defaultUrl;
},
/**
* Aborts the executing transaction
*/
abort : function(){
if(this.transaction){
Ext.lib.Ajax.abort(this.transaction);
}
},
/**
* Returns true if an update is in progress
* @return {Boolean}
*/
isUpdating : function(){
if(this.transaction){
return Ext.lib.Ajax.isCallInProgress(this.transaction);
}
return false;
}
});
/**
* @class Ext.UpdateManager.defaults
* The defaults collection enables customizing the default properties of UpdateManager
*/
Ext.UpdateManager.defaults = {
/**
* Timeout for requests or form posts in seconds (Defaults 30 seconds).
* @type Number
*/
timeout : 30,
/**
* True to process scripts by default (Defaults to false).
* @type Boolean
*/
loadScripts : false,
/**
* Blank page URL to use with SSL file uploads (Defaults to "javascript:false").
* @type String
*/
sslBlankUrl : (Ext.SSL_SECURE_URL || "javascript:false"),
/**
* Whether to append unique parameter on get request to disable caching (Defaults to false).
* @type Boolean
*/
disableCaching : false,
/**
* Whether to show indicatorText when loading (Defaults to true).
* @type Boolean
*/
showLoadIndicator : true,
/**
* Text for loading indicator (Defaults to '<div class="loading-indicator">Loading...</div>').
* @type String
*/
indicatorText : '<div class="loading-indicator">Loading...</div>'
};
/**
* Static convenience method. This method is deprecated in favor of el.load({url:'foo.php', ...}).
*Usage:
* <pre><code>Ext.UpdateManager.updateElement("my-div", "stuff.php");</code></pre>
* @param {String/HTMLElement/Ext.Element} el The element to update
* @param {String} url The url
* @param {String/Object} params （可选） Url encoded param string or an object of name/value pairs
* @param {Object} options （可选） A config object with any of the UpdateManager properties you want to set - for example: {disableCaching:true, indicatorText: "Loading data..."}
* @static
* @deprecated
* @member Ext.UpdateManager
*/
Ext.UpdateManager.updateElement = function(el, url, params, options){
var um = Ext.get(el, true).getUpdateManager();
Ext.apply(um, options);
um.update(url, params, options ? options.callback : null);
};
// alias for backwards compat
Ext.UpdateManager.update = Ext.UpdateManager.updateElement;
/**
* @class Ext.UpdateManager.BasicRenderer
* Default Content renderer. Updates the elements innerHTML with the responseText.
*/
Ext.UpdateManager.BasicRenderer = function(){};
Ext.UpdateManager.BasicRenderer.prototype = {
/**
* This is called when the transaction is completed and it's time to update the element - The BasicRenderer
* updates the elements innerHTML with the responseText - To perform a custom render (i.e. XML or JSON processing),
* create an object with a "render(el, response)" method and pass it to setRenderer on the UpdateManager.
* @param {Ext.Element} el The element being rendered
* @param {Object} response The YUI Connect response object
* @param {UpdateManager} updateManager The calling update manager
* @param {Function} callback A callback that will need to be called if loadScripts is true on the UpdateManager
*/
render : function(el, response, updateManager, callback){
el.update(response.responseText, updateManager.loadScripts, callback);
}
};
Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.