Javascript-extjs-Data

Source: Internet
Author: User

Ext.data namespaces

The classes for data storage and reading are defined in the Ext.data namespace. The data source for Ext's Gridpanel and ComboBox is from the classes provided by Ext.data. The classes under this namespace support a array of arrays, JSON, and XML data.

Ext.data.Connection

This class encapsulates Ajax, providing a more concise way to transmit data asynchronously than traditional JavaScript, and is compatible with all browsers. It is responsible for asynchronous interaction with the server and transferring the data from the server to the Ext.data.Proxy for processing. The following code creates an connection instance, configures its parameters, uses request to initiate a solicitation to the server, and receives feedback from the service side.

Configure the. config

Url:string//the requested URL. Extraparams:object| String//the parameter passed by the request. If configured in the request method, this property is changed to paramsMethod:' GET ' | ' POST '//the requested way. Callback:function //The callback function, whether successful or failed, is executed after the request is completed. Success:function //the callback function when the request succeeds. failure:function //callback function when a request failsScope:object//the scope of the callback function. Form:object| String//the form of the binding form. Isupload:bool//whether to perform a file upload. Headers:object//the requested header information. Xmldata:object//an XML Document object that can initiate a request by means of a URL-attached parameter. Disablecaching:bool//whether to disable caching, disabled by default. 
configure the. config

Methods. Method

// initiating the request and receiving the remote feedback, the configuration of the Ext.data.Connection can be written in the request configuration, except that the extraparams is changed to params.  Abort ([TransactionID]) TransactionID: Transaction ID// when more than one request occurs, discard one of the requests based on the specified transaction ID. If you do not specify a transaction ID, the last request is discarded.  isloading ([TransactionID  ])// determines whether the corresponding request is complete based on the transaction ID. If the transaction ID is not specified, the last request is determined to be complete. 
methods. Method

Example. Example

<script type= "Text/javascript" >Ext.onready (function () {        varconn =NewExt.data.Connection (); //initiating a request and receiving remote feedbackConn.request ({method:' GET ',//Request MethodTIMEOUT:300,//request time-out periodAutoabort:false,//whether to automatically break linksDisablecaching:false,//whether to disable caching            //The header of the requested URLDefaultheaders: {referer: ' http://localhost:6524/' },            //URL of the requestURL: ' Ajaxformhandler.ashx ',            //parameters supplied with the requestparams: {name:' Sam '}, Success:function(response) {//resolves JSON characters for remote feedback to JSON objects                varm =Ext.JSON.decode (Response.responsetext); Ext.Msg.alert (' Success ', m.msg); }, Failure:function() {Ext.Msg.alert (' ERROR ', ' HTTP error ');    }        }); });</script>
example. Example

Ajaxformhandler.ashx on the service side:

Ext.data.Model

Represents a data model, like an empty table in a database, which defines a field. If you want to build your own data model, you need to make your class derived from Ext.data.Model. Once you have created an instance of your custom data model, you are ready to insert the data. Ext.data.Record is an alias for Ext.data.Model, and creating a data model suggests using model rather than record.

Create a data model and get

<script type= "Text/javascript" >Ext.onready (function () {                        //Create a tableExt.define ("Employee", {extend:"Ext.data.Model", fields: [{name:"EmployeeName", type: "string"}, {name:"Age", type: "int", convert:NULL}, {name:"Gender", type: "int"}, {name:"Ismarried", type: "Boolean", DefaultValue:true, convert:NULL}                ]            }); //Create an instance, insert data            //instance name cannot be the same as class name, otherwise invalid            varuser =NewEmployee ({employeename:"Sam", Age:32, Gender:0, ismarried:false            }); varbr = "<br>"; //There are several ways to access the data, either            varRecord = User.get ("EmployeeName") + BR + user.data["age" + BR + user.data.gender + br +user.data.IsMarried; Ext.MessageBox.alert ("", record);    }); </script>
Create a data model and get

modifying data

Modifying records using the Data property is not recommended, and a set accessor should be used. Because the set method can tell if the value is inconsistent with the previous data, the inconsistency will be treated as a new value, and it will take the old value out before it is modified to be stored in the modified property so that you may be able to use it.

// Modify data user.data.employeeName = "Korn"; // It is not recommended to write user.data["EmployeeName"] = "Korn"; // It is not recommended to write user.set ("EmployeeName", "Korn"); // It is recommended to write Ext.MessageBox.alert ("", User.get ("EmployeeName"));
Modifying Data

methods. Method

commit () // The data is submitted, and after this method is called, the modified is emptied and the drity is set to false.  reject ()// undo the modification, restore the modified data to the value stored in modified and then empty the modified and set the Drity to False.  getChanges ()// Gets the modified data and wraps it back into a JSON object.  ismodified ()// test data has been modified. copy ()// ignores drity and modified, copies the record. the methods and properties of this class are mostly related to Ext.data.Store, and the details can be queried by the API. 
methods. Method

Ext.data.Store

Data interaction Mediator, which is responsible for sorting, grouping, paging, searching, and providing data to Gridpanel, Treepanel, and ComboBox for use. and its data source can be a two-dimensional array

Javascript-extjs-Data

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.