ExtJS for Newbies - Getting Started with the Store

This topic is a continuation of the note left in the sandbox. Here, as promised in the note, it will be described in more detail about the use of DataProxy objects, DataReader .

But first, let's consider a structure that contains already prepared data with which the Store operates, this is a Record .

Imagine a table, we have the names of the columns at the top, and below are the rows of values, Record is of itself and represents such a row of values, with the difference that each such row contains the names of the column values. Record has two main properties:

• fields - contains an array of Field objects. These objects just replace the names of the columns, and, moreover, expand them. They are intended to describe the corresponding values. This is quite a powerful tool for generating data of the desired type. I want to take a closer look at its properties
  
  • allowBlank is used when validating a value; the default is true, which means the value may be empty
  • convert is a kellback function that is called by the Reader when it saves each Record value of a. This function accepts both the parameter and the record itself, so we have the opportunity to combine the values, as shown in the official documentation (see later).
  • type indicates the type of value, it can be an integer, string, or date, there are many types, and the type sometimes determines how this value is displayed, for example, in the Grid 'e
  • dateFormat is used to form a date, but only if the value type is date
  • defaultValue sets default value
  • name indicates the name value, the name of the column in our table
  • sortDir indicates the direction of sorting
  • sortType - here you can set your own sorting function
  • mapping - here we indicate which value from the source array will match this Field
• data - this is our data, each field element corresponds to a Field object from the fields array

Example of creating Record 'a (from official documentation)

function fullName(v, record){
return record.name.last + ', ' + record.name.first;
}

function location(v, record){
return !record.city ? '' : (record.city + ', ' + record.state);
}

var Dude = Ext.data.Record.create([
{name: 'fullname' , convert: fullName},
{name: 'firstname' , mapping: 'name.first' },
{name: 'lastname' , mapping: 'name.last' },
{name: 'city' , defaultValue: 'homeless' },
'state' ,
{name: 'location' , convert: location}
]);

* This source code was highlighted with Source Code Highlighter .

')
Let's return to our readers and proxies.
DataProxy , as already noted, is engaged in the delivery of information to the object of the DataReader class (more precisely, to the object of the Store class, which already decodes this information with the help of the DataReader ), for subsequent parsing. In the standard full delivery framework, there are several classes inheriting DataProxy :

• MemoryProxy - used to get data from a regular array created in the application
• HttpProxy - used to get data through an AJAX request
• ScriptTagProxy - like HttpProxy , with the difference that this class can make a cross-domain AJAX request (remember that a regular XmlHttpRequest cannot request data from other domains)

All these classes inherit two basic properties from DataProxy :

• api - a list of 4 URLs for each of the data processing actions (load, creat, save, destroy), is used only by DataProxy heirs who use AJAX. We will talk about these URLs below when we consider working with the Store .
• doRequest - is inherited as a property, but with subsequent assignment turns into a function that does the main work - it requests data from the source. If you want to create your own proxy type, you will have to write and assign / override this function.

Now we will consider classes successors of DataReader 'a. In the standard full delivery of them, like a proxy, several:

• ArrayReader - designed to “read” a regular array, usually used with MemoryProxy
• JsonReader - used to decode a json string or “read” a json array (associative, hash), which is considered an object
• XmlReader - respectively, for decoding XML

Here is an example of creating an ArrayReader

var fields = Ext.data.Record.create([ // Record -.
{name: 'name' , mapping: 1}, // ,
{name: 'last' , mapping: 2} // , , name last - ( )
]);

var myReader = new Ext.data.ArrayReader({}, fields);

* This source code was highlighted with Source Code Highlighter .

And here we have JsonReader

var myReader = new Ext.data.JsonReader({
totalProperty: "results" , //
// ( , , Pager'a)
root: "rows" , // , Record'
idProperty: "id" // Record a Reader id, ,
// id Reader id ""
},
fields
);

* This source code was highlighted with Source Code Highlighter .

The response from the proxy for JsonReader 'a should be of this type (note the same names for the elements below, and the values ​​above, for a better understanding):

{
results: 2,
rows: [
{ id: 1, name: ' 1' , last: ' 1' },
{ id: 2, name: ' 2' , last: ' 2' }
]
}

* This source code was highlighted with Source Code Highlighter .

The XmlReader is a little different, the names of the properties are different, but almost the same

var myReader = new Ext.data.XmlReader({
totalRecords: "results" ,
record: "row" ,
id: "id"
}, fields);

* This source code was highlighted with Source Code Highlighter .

When responding from a proxy

<? xml version ="1.0" encoding ="UTF-8" ? >
< dataset >
< results > 2 </ results >
< row >
< id > 1 </ id >
< name > 1 </ name >
< last > 1 </ last >
</ row >
< row >
< id > 2 </ id >
< name > 2 </ name >
< last > 2 </ last >
</ row >
</ dataset >

* This source code was highlighted with Source Code Highlighter .

As we know, there are quite a few abbreviations in ExtJS , so it’s not necessary to create a Record , you can do this (it will be created automatically)

var myReader = new Ext.data.XmlReader({
totalRecords: "results" ,
record: "row" ,
id: "id" ,
fields:[
{name: "id" },
"name" , // name,
...
]
});

* This source code was highlighted with Source Code Highlighter .

If habra people wish, then in the next topic we will talk about working with the Store , using the accumulated knowledge :)

UPD : so that it is more understandable for what this proxy is all about, I will write briefly how the Store uses DataProxy and DataReader in order:

• Store asks DataProxy for the doRequest method with the load parameter, DataProxy returns Store some object / string
• this Store object / string passes the DataReader 'y, which raids it all, and returns the Record array for the Store just uses the ready :)