Ext JS - Learning Center

Documentation:Data Loading

From Learn About the Ext JavaScript Library

Jump to: navigation, search
Summary: Overview of the Ext GWT Data API
Author: Darrell Meyer
Published: May 7, 2008
Ext Version: 1.0
Languages: en.png English

Contents

Data API (draft)

Ext GWT includes a very powerful and configurable API for data loading. The API includes a large list of classes and interfaces which can cause confusion when first working with the library. The tutorial will cover the high level concepts and design of this framework.

Loaders

Loaders are objects that are used to retrieve different types of remote data. Data loading begins with the Loader interface. This is the base interface for all loaders.

Image:Loader.gif

A data load operation begins by calling one of the load methods on the loader. The LoadConfig is the input, and the LoadResult is the output of the load operation.

LoadConfig

LoadConfig is an object that is passed to the server which contains the information needed to complete the load request. Subclasses define the required data. For example, when using a paging table, the LoadConfig will contain the current offset and page size which be used when by the server side code when retrieving the requested data.

Image:LoadConfig.gif

LoadResult

LoadResult defines the interface for objects that are returned by the server in a data load operation. Subclasses add additional behavior particular to the type of data being requested.

Image:LoaderResult.gif

Sequence

The basic sequence of a data load operation is:

  1. The load() method is called on the loader instance.
  2. The loader makes a data load request using LoadConfig instance for the input.
  3. The server returns the data via a LoadResult as the output.

DataProxy and DataReader

The loader uses a DataProxy to communicate with the server and retrieve the returned data, while the DataReader is used to process the raw data returned by the server.

Image:DataProxyReader.gif

There are several data proxy and data reader subclasses to handle the various ways of server communication and handle different types of raw data.

The basic sequence of a data load operation using a DataProxy and DataReader is:

  1. The load() method is called on the loader instance.
  2. The loader makes a data load request by forwarding the request to the DataProxy.
  3. The DataProxy makes the server call and accepts the returned data.
  4. The raw data is passed to the DataReader and it is converted into the required data type.

Stores

Store is a specialized cache of model instances. Store adds support for both editing, sorting and filtering.

Image:Store.gif

Stores can be bound to some Ext GWT data components. This list currently includes:

  • Combo
  • DataView

When bound, the components listen for the stores events and automatically update the UI to reflect changes to the store. For examples, if a child is added to a store, any bound tables will add the new record to the table. This works the same with sorting and filtering.

A Loader can be bound to a store. When the store has a loader, it will use it for its data requests.

StoreBinder

Image:StoreBinder.gif

Binders are used to “connect” a data component to a Store. When connected, the binder listens and handles all the Store events. Binders also provide a mechanism for specifying a model’s text value and icon style.

  • This page was last modified 15:39, 7 May 2008.
  • This page has been accessed 2,172 times.