oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
webgui/www/extras/extjs/docs/output/UpdateManager.jss.html

487 lines
No EOL
22 KiB
HTML
Raw Blame History

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