Introduction of Ext.data in ExtJS

The primary function of Ext.data is to acquire and organize data structures and to connect with specific controls, so that Ext.data becomes the source of the data and is responsible for displaying them.

Ext.data defines a series of store, reader, and proxy namespaces. Both grid and Comboxbox obtain data in the medium of Ext.data, which includes functions such as asynchronous loading, type conversion, paging, and so on.

Ext.data supports array, JSON, XML and other data formats by default, and can obtain data in these formats through memory, HTTP, Scripttag, and so on. If you want to implement a new protocol and a new data structure, you only need to extend reader and proxy.

Dwrproxy has implemented its own proxy and reader, allowing Ext to get data directly from DWR.

Dataproxy: Get the data you want, through which he can get data from different places, such as arrays, remote servers, and organized into different formats.

DataReader: Defines the logical structure of a data item, a data item has many columns, what the name of each column is, and what data type it is, is defined by that class. In addition, it is also responsible for reading and parsing data in different formats.

Store: Memory, used to integrate proxies and Reader, and often deal with him when requesting data.

1. Ext.data.Connection

Ext.data.Connection is the encapsulation of Ext.lib.Ajax, which provides a common way to configure the use of Ajax, which internally implements asynchronous calls to the background through Ext.lib.Ajax. Compared to the underlying Ext.lib.Ajax, Ext.data.Connection provides a more concise configuration and is more convenient to use.

Ext.data.Connection is primarily used to perform tasks that interact with the background in Ext.data.HttpProxy and Ext.data.ScriptTagProxy, and it obtains data from the specified URL and gives the data returned in the background to Httpproxy or Scriptta Gproxy processing

2. Ext.data.Record

Ext.data.Record is an object that sets the internal data type, which is the most basic part of the Ext.data.Store. If you think of Ext.data.Store as a two-dimensional table, each of its rows corresponds to a Ext.data.Record instance.

The main function of Ext.data.Record is to save the data and record the modified state when the internal data changes, and it can retain the original value before the modification. When we use Ext.data.Record, we usually start with the Create () function and first create a custom record type with the Create () function, as shown in the following code.

Varpersonrecord=ext.data.record.create ([{name: ' name ', type: ' String '},
{name: ' Sex ', type: ' int '}
]);

Personrecord is the new type we define, contains the name of the string type and the sex two properties of the integer type, and then we use the New keyword to create an instance of Personrecord, as shown in the following code.

3. Ext.data.Store

Ext.data.Store is the standard middleware used for data exchange and data interaction in ext, whether it is a grid or a ComboBox, through which data reading, type conversion, sorting, paging, and searching are done.

There is a Ext.data.Record array in the Ext.data.Store, and all the data is stored in these Ext.data.Record instances to prepare for subsequent read and modify operations.

Before you use it, you first create an instance of Ext.data.Store, as shown in the following code.

var data=[[' Boy ', 0],[' girl ', 1]];varstore=NewExt.data.Store ({proxy:newExt.data.MemoryProxy (data), Reader:newExt.data.ArrayReader ({},personrecord)
}); Store.load ()

Each store requires a minimum of two components, Proxy and reader,proxy, which are used to read raw data from a single source, and reader is used to convert the raw data into a record instance.

Here we are using Ext.data.MemoryProxy and Ext.data.ArrayReader, converting the data in the database array to the corresponding Personrecord instances, and then putting them in the store. After the store is created, execute store.load () to implement the conversion process.

After the conversion, the data in the store can be provided to the grid or ComboBox, which is the most basic use of Ext.data.Store.
Ext.data.Store provides a series of properties and functions that are used to sort the data.
You can use the Sortinfo parameter to specify the sort field and sort method when you create Ext.data.Store, as shown in the following code.

4.ext.data: Common proxy memoryproxy, httpproxy, Scripttagproxy

Ext.data. Dataproxy is the source of such an inspiration.

Ext.data.DataProxy is the proxy that gets the data, which may come from memory, possibly from remote server data from the same domain, and more likely from remote server data in different domains.

However, in practical applications, we do not use Ext.data.DataProxy directly, but instead use his subclasses: Memoryproxy, Httpproxy, and Scripttagproxy, respectively:

Memoryproxy: Gets the data from memory, which can be an array, JSON, or XML.

Httpproxy: A proxy that uses the HTTP protocol to obtain data from a remote server via AJAX requires a URL to be specified.

Scripttagproxy: Functionality and Httpproxy, but support for data acquisition across domains is a bit sly when implemented.

5. Ext.data Common Reader

The data read from the proxy needs to be parsed and converted into a record array before it can be supplied to Ext.data.Store.

6.ext.data.store

Actual development, do not need each time the proxy, reader, store these three objects to configure, Ext provides us with several optional integration solutions.

A:simplestore = Store + memoryproxy + arrayreader

var ds=Ext.data.SimpleStore ({    data:[[' id1 ', ' name1 ', ' descn1 '],[' id2 ', ' name2 ', ' descn2 ')], fields: [' id ', ' name ', ' DESCN ']
});   

Simplestore is designed to simplify the reading of local arrays, and the fields needed to set up memoryproxy required data and Arrayreader are ready to use.

B:jsonstore = Store +httpproxy + jsonreader

var ds = Ext.data.JsonStore ({     ' xxx.jsp ',     ' root ', fields     : [' id ', ' Name ', ' DESCN ']    });

Jsonstore combines Jsonreader and httpproxy to provide a convenient way to read JSON information from the background, and in most cases consider directly using it to read data from the background.

C:ext.data.groupingstore Grouping of data

Ext.data.GroupingStore inherits from Ext.data.Store, its main function is to be able to group internal data, we can create Ext.data.GroupingStore when you specify the group according to a field, you can also call its group after the instance is created The by () function re-groups the internal data, as shown in the following code.

var ds=NewExt.data.GroupingStore ({data:[[' id1 ', ' name1 ', ' female ', ' descn1 '],[' id2 ', ' name2 ', ' Male ', ' Descn2 '],[' id3 ', ' name3 ', ' female ', ' descn3 '],[' id4 ', ' name4 ', ' Male ', ' descn4 '],[' id5 ', ' name5 ', ' female ', ' descn5 ' ] , Reader:newExt.data.ArrayReader ({fields:[' id ', ' name ', ' sex ', ' DESCN ')
}), GroupField:' sex ',
Grouponsort:True
});

In the example above, we use GroupField as the parameter, The Group field is set for Ext.data.Grouping, and the Grouponsort parameter is set, which guarantees that the data within the Ext.data.grouping-store is sorted only when it is grouped. If you use the default values, you will need to specify the Sortinfo parameter manually, specifying the default sort fields and sorting methods, or an error occurs.
After creating an instance of Ext.data.GroupingStore, we can also call the GroupBy () function to group the data again. Because we set the Grouponsort:true, Ext uses the grouped fields to sort the internal data when it is re-grouped. If you do not want to group the data, you can also call the cleargrouping () function to clear the grouping information, as shown in the following code.
DS.GROUPBY (' id ');d s.cleargrouping ();

7. Extajax

The basic usage of Extajax is as follows:

extajax.request ({     ' 07-01.txt ',     function(response) {           Ext.Msg.alert ( "Success!" ", Response.responsetext);     },     function(response) {           Ext.Msg.alert ( "Failure!" ", Response.responsetext);     },     ' value '}});        

This is called the request function of Ext.ajax, whose parameters are a JSON object, as shown below. The Qurl parameter represents the background URL that will be accessed.

The Q success parameter indicates a callback function after a successful response.

In the example above we get the returned string directly from response and display it with Ext.Msg.alert.

The Q failure parameter represents a callback function after a failed response.
Note that the response failure here does not refer to a business failure such as a database operation, but rather an HTTP return 404 or 500 error, and do not confuse HTTP response errors with business errors.
The Q params parameter represents a parameter that is sent to the background when requested, either using a JSON object or directly using the
A string in the form "Name=value".
The above example can be found in 10.store/07-01.html.
Ext.ajax directly inherits from the Ext.data.Connection, the difference is that it is a singleton, do not need to create an instance with new, can be used directly. You need to create an instance before using Ext.data.Connection, because Ext.data.Connection is designed to provide AJAX functionality to various proxies in ext.data, and assigning different instances is better for managing separately. Ext.ajax provides users with a simple call interface, when actually used, you can choose according to their own needs.

8. Ext.lib.Ajax the lower-level Ajax package

In fact, Ext.ajax and Ext.data.Connection of the internal functions of the implementation are based on Ext.lib.Ajax to complete, in the Ext.lib.Ajax below is a variety of bottom-level library Ajax.
If you use Ext.lib.Ajax to implement the above functionality, you need to write the following form, as shown in the following code.

Ext.lib.Ajax.request (
' POST ',

{
Success:function(response) {
Ext.Msg.alert (' success ', response.responsetext);
},
Failure:function
Ext.Msg.alert (' failure ', response.responsetext);
}
       
       ' Data= ' +encodeuricomponent (Ext.encode ({name: ' Value '})
);

As we can see, we need to pass 4 parameters, namely method, URL, callback, and params, when using Ext.lib.Ajax. Their meanings are one by one corresponding to the parameters in Ext.ajax, and the only method parameter that is not mentioned represents the way to request HTTP, which can also be set in Ext.ajax using method: ' POST '.

Source: http://wenku.baidu.com/link?url=vA84T-2kDhlUi_DGQ5DOGs2rOCYIrfPmkXxx8rTrWF797QlIPK6m7JpjQIOcimFSwFJO3A8_ Yzj97oufb9_uz-lzs4e5ilj8fi3vckdy-q7