Print Friendly

Class Ext.UpdateManager

Package:Ext
Class:UpdateManager
Extends:Observable
Defined In:UpdateManager.js
Provides AJAX-style update for Element object.

Usage:
// 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");


// 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);


   // short handed call directly from the element object
   Ext.get("foo").load({
        url: "bar.php",
        scripts:true, 
        params: "for=bar",
        text: "Loading Foo..."
   });

Properties   -  Methods   -  Events

Public Properties

Property Defined By
  defaultUrl : String UpdateManager
Cached url to use for refreshes. Overwritten every time update() is called unless "discardUrl" param is set to true.
  disableCaching : Boolean UpdateManager
Whether to append unique parameter on get request to disable caching (Defaults to Ext.UpdateManager.defaults.disableC...
  el : Ext.Element UpdateManager
The Element object
  formUpdateDelegate : Function UpdateManager
Delegate for formUpdate() prebound to "this", use myUpdater.formUpdateDelegate.createCallback(arg1, arg2) to bind arg...
  indicatorText : String UpdateManager
Text for loading indicator (Defaults to Ext.UpdateManager.defaults.indicatorText or '<div class="loading-indicator...
  loadScripts : Boolean UpdateManager
True to process scripts in the output (Defaults to Ext.UpdateManager.defaults.loadScripts (false)).
  refreshDelegate : Function UpdateManager
Delegate for refresh() prebound to "this", use myUpdater.refreshDelegate.createCallback(arg1, arg2) to bind arguments
  renderer : Object UpdateManager
The renderer for this UpdateManager. Defaults to Ext.UpdateManager.BasicRenderer.
  showLoadIndicator : String UpdateManager
Whether to show indicatorText when loading (Defaults to Ext.UpdateManager.defaults.showLoadIndicator or true).
  sslBlankUrl : String UpdateManager
Blank page URL to use with SSL file uploads (Defaults to Ext.UpdateManager.defaults.sslBlankUrl or "about:blank").
  timeout : Number UpdateManager
Timeout for requests or form posts in seconds (Defaults to Ext.UpdateManager.defaults.timeout or 30 seconds).
  transaction : Object UpdateManager
Transaction object of current executing transaction
  updateDelegate : Function UpdateManager
Delegate for update() prebound to "this", use myUpdater.updateDelegate.createCallback(arg1, arg2) to bind arguments

Public Methods

Method Defined By
  UpdateManager(String/HTMLElement/Ext.Element el, [Boolean forceNew]) UpdateManager
Create new UpdateManager directly.
  UpdateManager.updateElement(String/HTMLElement/Ext.Element el, String url, [String/Object params], [Object options]) : void UpdateManager
Deprecated. <static> Static convenience method. This method is deprecated in favor of el.load({url:'foo.php', ....
  abort() : void UpdateManager
Aborts the executing transaction
  addEvents(Object object) : void Observable
Copies any events from the passed object onto this object if they do not already exist. The passed object must also ...
  addListener(String eventName, Function handler, [Object scope], [Object options]) : void Observable
Appends an event handler to this component
  fireEvent(String eventName, Object... args) : Boolean Observable
Fires the specified event with the passed parameters (minus the event name).
  formUpdate(String/HTMLElement form, [String url], [Boolean reset], [Function callback]) : void UpdateManager
Performs an async form post, updating this element with the response. If the form has the attribute enctype="multipar...
  getEl() : Ext.Element UpdateManager
Get the Element this UpdateManager is bound to
  hasListener(String eventName) : Boolean Observable
Checks to see if this object is currently listening for a specified event
  isUpdating() : Boolean UpdateManager
Returns true if an update is in progress
  on(String eventName, Function handler, [Object options]) : void Observable
Appends an event handler to this element (shorthand for addListener)
  purgeListeners() : void Observable
Removes all listeners for this object
  refresh([Function callback]) : void UpdateManager
Refresh the element with the last used url or defaultUrl. If there is no url, it returns immediately
  removeListener(String eventName, Function handler, [Object scope]) : void Observable
Removes a listener
  setDefaultUrl(String/Function defaultUrl) : void UpdateManager
Set the defaultUrl used for updates
  setRenderer(Object renderer) : void UpdateManager
Set the content renderer for this UpdateManager. See Ext.UpdateManager.BasicRenderer.render for more details.
  showLoading() : void UpdateManager
Called to update the element to "Loading" state. Override to perform custom action.
  startAutoRefresh(Number interval, [String/Function url], [String/Object params], [Function callback], [Boolean refreshNow]) : void UpdateManager
Set this element to auto refresh.
  stopAutoRefresh() : void UpdateManager
Stop auto refresh on this element.
  un(String eventName, Function handler, [Object scope]) : void Observable
Removes a listener (shorthand for removeListener)
  update(Object/String/Function url, [String/Object params], [Function callback], [Boolean discardUrl]) : void UpdateManager
Performs an async request, updating this element with the response. If params are specified it uses POST, otherwise i...

Public Events

Event Defined By
  beforeupdate : (Ext.Element el, String/Object/Function url, String/Object params) UpdateManager
Fired before an update is made, return false from your handler and the update is cancelled.
  failure : (Ext.Element el, Object oResponseObject) UpdateManager
Fired on update failure.
  update : (Ext.Element el, Object oResponseObject) UpdateManager
Fired after successful update is made.

Property Details

defaultUrl

public String defaultUrl
Cached url to use for refreshes. Overwritten every time update() is called unless "discardUrl" param is set to true.
This property is defined by UpdateManager.

disableCaching

public Boolean disableCaching
Whether to append unique parameter on get request to disable caching (Defaults to Ext.UpdateManager.defaults.disableCaching or false).
This property is defined by UpdateManager.

el

public Ext.Element el
The Element object
This property is defined by UpdateManager.

formUpdateDelegate

public Function formUpdateDelegate
Delegate for formUpdate() prebound to "this", use myUpdater.formUpdateDelegate.createCallback(arg1, arg2) to bind arguments
This property is defined by UpdateManager.

indicatorText

public String indicatorText
Text for loading indicator (Defaults to Ext.UpdateManager.defaults.indicatorText or '<div class="loading-indicator">Loading...</div>').
This property is defined by UpdateManager.

loadScripts

public Boolean loadScripts
True to process scripts in the output (Defaults to Ext.UpdateManager.defaults.loadScripts (false)).
This property is defined by UpdateManager.

refreshDelegate

public Function refreshDelegate
Delegate for refresh() prebound to "this", use myUpdater.refreshDelegate.createCallback(arg1, arg2) to bind arguments
This property is defined by UpdateManager.

renderer

public Object renderer
The renderer for this UpdateManager. Defaults to Ext.UpdateManager.BasicRenderer.
This property is defined by UpdateManager.

showLoadIndicator

public String showLoadIndicator
Whether to show indicatorText when loading (Defaults to Ext.UpdateManager.defaults.showLoadIndicator or true).
This property is defined by UpdateManager.

sslBlankUrl

public String sslBlankUrl
Blank page URL to use with SSL file uploads (Defaults to Ext.UpdateManager.defaults.sslBlankUrl or "about:blank").
This property is defined by UpdateManager.

timeout

public Number timeout
Timeout for requests or form posts in seconds (Defaults to Ext.UpdateManager.defaults.timeout or 30 seconds).
This property is defined by UpdateManager.

transaction

public Object transaction
Transaction object of current executing transaction
This property is defined by UpdateManager.

updateDelegate

public Function updateDelegate
Delegate for update() prebound to "this", use myUpdater.updateDelegate.createCallback(arg1, arg2) to bind arguments
This property is defined by UpdateManager.

Constructor Details

UpdateManager

public function UpdateManager(String/HTMLElement/Ext.Element el, [Boolean forceNew])
Create new UpdateManager directly.
Parameters:
  • el : String/HTMLElement/Ext.Element
    The element to update
  • forceNew : Boolean
    (optional) 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).

Method Details

UpdateManager.updateElement

public function UpdateManager.updateElement(String/HTMLElement/Ext.Element el, String url, [String/Object params], [Object options])
Deprecated. <static> Static convenience method. This method is deprecated in favor of el.load({url:'foo.php', ...}). Usage: 
Ext.UpdateManager.updateElement("my-div", "stuff.php");
Parameters:
  • el : String/HTMLElement/Ext.Element
    The element to update
  • url : String
    The url
  • params : String/Object
    (optional) Url encoded param string or an object of name/value pairs
  • options : Object
    (optional) A config object with any of the UpdateManager properties you want to set - for example: {disableCaching:true, indicatorText: "Loading data..."}
Returns:
  • void
This method is defined by UpdateManager.

abort

public function abort()
Aborts the executing transaction
Parameters:
  • None.
Returns:
  • void
This method is defined by UpdateManager.

addEvents

public function addEvents(Object object)
Copies any events from the passed object onto this object if they do not already exist. The passed object must also inherit from Observable for this method to have any effect.
Parameters:
  • object : Object
    The object from which to copy events
Returns:
  • void
This method is defined by Observable.

addListener

public function addListener(String eventName, Function handler, [Object scope], [Object options])
Appends an event handler to this component
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} True to prevent the default action
    • stopPropagation {Boolean} True to prevent event propagation
    • normalized {Boolean} False to pass a browser event to the handler function instead of an Ext.EventObject
    • delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.
    • single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} Causes the handler to be scheduled to run in an Ext.util.DelayedTask delayed by the specified number of milliseconds. If the event fires again within that time, the original handler is not invoked, but the new handler is scheduled in its place.

    Combining Options
    Using the options argument, it is possible to combine different types of listeners:

    A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)

    Code: 
    el.on('click', this.onClick, this, { single: true, delay: 100, stopEvent : true, forumId: 4 });

    The method also allows for a single argument to be passed which is a config object containing properties which specify multiple handlers.

    Attaching multiple handlers in 1 call
    Code: 

    el.on({ 'click' : { fn: this.onClick scope: this, delay: 100 }, 'mouseover' : { fn: this.onMouseOver scope: this }, 'mouseout' : { fn: this.onMouseOut scope: this } });

    Or a shorthand syntax:
    Code: 

    el.on({ 'click' : this.onClick, 'mouseover' : this.onMouseOver, 'mouseout' : this.onMouseOut scope: this });
Returns:
  • void
This method is defined by Observable.

fireEvent

public function fireEvent(String eventName, Object... args)
Fires the specified event with the passed parameters (minus the event name).
Parameters:
  • eventName : String
  • args : Object...
    Variable number of parameters are passed to handlers
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true
This method is defined by Observable.

formUpdate

public function formUpdate(String/HTMLElement form, [String url], [Boolean reset], [Function callback])
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.
Parameters:
  • form : String/HTMLElement
    The form Id or form element
  • url : String
    (optional) The url to pass the form to. If omitted the action attribute on the form will be used.
  • reset : Boolean
    (optional) Whether to try to reset the form after the update
  • callback : Function
    (optional) Callback when transaction is complete - called with signature (oElement, bSuccess, oResponse)
Returns:
  • void
This method is defined by UpdateManager.

getEl

public function getEl()
Get the Element this UpdateManager is bound to
Parameters:
  • None.
Returns:
  • Ext.Element
    The element
This method is defined by UpdateManager.

hasListener

public function hasListener(String eventName)
Checks to see if this object is currently listening for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
This method is defined by Observable.

isUpdating

public function isUpdating()
Returns true if an update is in progress
Parameters:
  • None.
Returns:
  • Boolean
This method is defined by UpdateManager.

on

public function on(String eventName, Function handler, [Object options])
Appends an event handler to this element (shorthand for addListener)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • options : Object
    (optional)
Returns:
  • void
This method is defined by Observable.

purgeListeners

public function purgeListeners()
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
This method is defined by Observable.

refresh

public function refresh([Function callback])
Refresh the element with the last used url or defaultUrl. If there is no url, it returns immediately
Parameters:
  • callback : Function
    (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
Returns:
  • void
This method is defined by UpdateManager.

removeListener

public function removeListener(String eventName, Function handler, [Object scope])
Removes a listener
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The handler to remove
  • scope : Object
    (optional) The scope (this object) for the handler
Returns:
  • void
This method is defined by Observable.

setDefaultUrl

public function setDefaultUrl(String/Function defaultUrl)
Set the defaultUrl used for updates
Parameters:
  • defaultUrl : String/Function
    The url or a function to call to get the url
Returns:
  • void
This method is defined by UpdateManager.

setRenderer

public function setRenderer(Object renderer)
Set the content renderer for this UpdateManager. See Ext.UpdateManager.BasicRenderer.render for more details.
Parameters:
  • renderer : Object
    The object implementing the render() method
Returns:
  • void
This method is defined by UpdateManager.

showLoading

public function showLoading()
Called to update the element to "Loading" state. Override to perform custom action.
Parameters:
  • None.
Returns:
  • void
This method is defined by UpdateManager.

startAutoRefresh

public function startAutoRefresh(Number interval, [String/Function url], [String/Object params], [Function callback], [Boolean refreshNow])
Set this element to auto refresh.
Parameters:
  • interval : Number
    How often to update (in seconds).
  • url : String/Function
    (optional) The url for this request or a function to call to get the url (Defaults to the last used url)
  • params : String/Object
    (optional) The parameters to pass as either a url encoded string "¶m1=1¶m2=2" or as an object {param1: 1, param2: 2}
  • callback : Function
    (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
  • refreshNow : Boolean
    (optional) Whether to execute the refresh now, or wait the interval
Returns:
  • void
This method is defined by UpdateManager.

stopAutoRefresh

public function stopAutoRefresh()
Stop auto refresh on this element.
Parameters:
  • None.
Returns:
  • void
This method is defined by UpdateManager.

un

public function un(String eventName, Function handler, [Object scope])
Removes a listener (shorthand for removeListener)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The handler to remove
  • scope : Object
    (optional) The scope (this object) for the handler
Returns:
  • void
This method is defined by Observable.

update

public function update(Object/String/Function url, [String/Object params], [Function callback], [Boolean discardUrl])
Performs an async request, updating this element with the response. If params are specified it uses POST, otherwise it uses GET.
Parameters:
  • url : Object/String/Function
    The url for this request or a function to call to get the url or a config object containing any of the following options: 
     um.update({
     url: "your-url.php",
     params: {param1: "foo", param2: "bar"}, // or a URL encoded string
     callback: yourFunction,
     scope: yourObject, //(optional scope) 
     discardUrl: false, 
     nocache: false,
     text: "Loading...",
     timeout: 30,
     scripts: false
     });
    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.
  • params : String/Object
    (optional) The parameters to pass as either a url encoded string "param1=1&param2=2" or an object {param1: 1, param2: 2}
  • callback : Function
    (optional) Callback when transaction is complete - called with signature (oElement, bSuccess, oResponse)
  • discardUrl : Boolean
    (optional) By default when you execute an update the defaultUrl is changed to the last used url. If true, it will not store the url.
Returns:
  • void
This method is defined by UpdateManager.

Event Details

beforeupdate

public event beforeupdate
Fired before an update is made, return false from your handler and the update is cancelled.
Subscribers will be called with the following parameters:
  • el : Ext.Element
  • url : String/Object/Function
  • params : String/Object
This event is defined by UpdateManager.

failure

public event failure
Fired on update failure.
Subscribers will be called with the following parameters:
  • el : Ext.Element
  • oResponseObject : Object
    The response Object
This event is defined by UpdateManager.

update

public event update
Fired after successful update is made.
Subscribers will be called with the following parameters:
  • el : Ext.Element
  • oResponseObject : Object
    The response Object
This event is defined by UpdateManager.
Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.