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