ExtJS 4.2 Tips for using---store and reader

Recently, the boss asked to use ExtJS to write the front end, so studied. This thing is more powerful than jquery-ui and so on, the effect is relatively tall, but it is more difficult to use. I am not the IQ of all kinds of pits are jumping to try out the results, is the main record of the store and reader experience.

Before introducing the store, let's say Model,model represents some of the objects that the application manages. For example, we want to model a real world in the system, and we will define a model for some objects in the world like users, products, and automobiles, which will be registered by the system, used by the store (warehouse), and then used by many of the data-bound components in ext.

The main idea of the store is: warehouse, storage meaning. The store class encapsulates a client-side cache for storing Model objects. The Stores loads the data through an agent proxy and provides functions to sort, filter, and query the model instances contained within.

Creating a store is simple, just passing in the Model and proxy for loading/saving the data as a configuration item:

 //Create a store to use the modelExt.define (' User ', {extend:' Ext.data.Model ', fields: [{name:' ID ', type: ' int '}, {name:' Name ', type: ' String '}, {name:' Age ', type: ' int '}     ] }); varMystore = ext.create (' Ext.data.Store '), {model:' User ', Proxy: {type:' Ajax ', URL:'/users.json ', Reader: {type:' JSON '}}, AutoLoad:true });

In the example above, we configured an AJAX proxy to load data from the URL '/users.json '. and tells Proxy to use Jsonreader to parse the data returned by the server as the model object.

Reader is typically used to translate data so that it is loaded as a Model instance or store, which is typically the response data for an AJAX request. In general, you do not need to create a reader instance directly, because reader is always used with proxy and it is configured with the Reader configuration property of proxy. For the above code, the Reader property will read the data from the server and will accept the following response:

[    {        "id": 1,        "name": "Ed Spencer",        "age": "$"    },    {        "id": 2,        "name": "Abe Elias",        "age": "$"    }]

But if you already have a well-defined JSON format that looks less like the one we provide, you can use the Jsonreader configuration option to parse your format, for example, if your data has a root node, as follows:

{    "users": [       {           "id": 1,           "name": "Ed Spencer",           "age": "22"        },       {           "id": 2,           "name": "Abe Elias",           "age": "$"       }    ]}

To resolve this, we only need to pass a root configuration to match the "users" above:

Reader: {    ' json ',    ' users '}

or more complex JSON formats, some document data often provides data in the following structure:

{    "total": $,    "offset": 0,    "Users": [        {            "id": " Ed-spencer-1 ",            " value ": 1,            " user ": {                " id ": 1,                " name " ":" Ed Spencer ",                " age ":" ~ "}        }    ]}

The record data in the example above is an extra level nested in the "users" array, where each "user" item contains additional metadata, such as ' id ' and ' value ' in this example. To parse the data in each of the ' user ' entries in the JSON data above, you need to specifically specify the record configuration as follows:

Reader: {    type  ' json ',    root  ' users ',    ' user '}

Metadata for responses

The server can return metadata in its response, in addition to the record data, where the data itself describes the property set of the data or the reader used for reconfiguration. In order to get the metadata in the response, you need to add a ' metaData ' attribute to the root of the response data. Metadata attributes can contain anything, but if reader exists, it also supports a specific setting property:

• Root: The name of the node that contains the record data in the response
• Idproperty: Primary key field property name in data
• Totalproperty: Attribute name for all records in data
• Successproperty: Success Status Property name in response
• Messageproperty: An optional property name for the response information
• Fields: Configuration of the field set used to reconfigure the model before the response data is converted to records