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
Used to define events on this Observable
| 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 has any listeners for a specified event
| isUpdating() : Boolean | UpdateManager
Returns true if an update is in progress
| on( `String eventName`, `Function handler`, [`Object scope`], [`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` )`
Used to define events on this Observable
Parameters:

- `object` : Object
  The object with the events defined

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.
  - 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)

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

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

      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 which passes the same scope object to all handlers:

      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 has any listeners 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 scope`], [`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
- `scope` : Object
  (optional) The scope in which to execute the handler function. The handler function's "this" context.
- `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.