ExtJs4 Learning (7) Store and extjs4mvc in MVC

ExtJs4 Learning (7) Store and extjs4mvc in MVC

Ext. data. store is a standard middleware used in extjs for data exchange and data interaction. Both Grid and ComboBox use it to perform data read, type conversion, sorting paging, and search operations.

Ext.define('User', {    extend: 'Ext.data.Model',    fields: [        {name: 'loginname', type: 'string'},        {name: 'ip',  type: 'string'}    ]});

Store can read data from the local array or remotely from the server. Of course, it can also be read by the server proxy, which must be implemented by proxy. What are the differences, and the implementation method will be described in the next section

To better understand the usage of Store, we will give the following example:

Var store = Ext. create ('ext. data. store', {model: 'user', proxy: {type: 'memory ', data: [{loginname: 'admin', ip: '100. 168.1.2 '}, {loginname: 'guest', ip: '2017. 168.1.5 '}]}, // autoLoad: true // This item is configured, indicating that the dataset is automatically loaded });

Common Methods

// Load the data store. load (); // Add Data store. add ({loginname: 'administrator. com ', ip: '2017. 168.1.8 '}); // read data store. each (function (record) {console.info (record. get ('loginname'); alert (record. get ('loginname') ;}); // filter // store. filter ("loginname ",/\. com $/); filter by a single attribute field: store. filter ([{property: "loginname", value :/\. com $/}, {filterFn: function (item) {return item. get ("ip") = '20180101. 168.1.5 ';}}]); // find a record var record = store. find ('loginname', 'Guest '); // a shortcut to obtain the first record in the store. var record = store. first (); // obtain the record var record = store at the specified index. getAt (2); // obtain the number of records in the store var count = store. getCount; // The shortcut for obtaining the last record in the store. var record = store. last ();

Reads data in the background

Var store = Ext. create ('ext. data. store', {model: 'user', pageSize: 5, // The number of entries displayed per page. The default value is 25 proxy: {type: 'ajax ', url: 'jsonserver. jsp ', reader: {type: 'json', root: 'rows', totalProperty: 'Total'}, writer: {type: 'json '}}});

How to obtain data

Store. load ({scope: this, callback: function (records, operation, success) {// obtain the total number of records // console.info (store. getCount (); this is from the statistics of the record console.info (store. getTotalCount (); // This is the total from the backend. // obtain the console.info (store. currentPage); Ext. each (records, function (record) {console.info (record. get ('loginname') ;}}}); // displays the second page of Data store. loadPage (2); // display the previous data store. previousPage (); // displays the next data store. nextPage ();

Background data, which I provide in the form of jsp

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><%String[] persons = new String[10];persons[0] = "{loginname : 'tom' , ip : '192.168.1.1'}";persons[1] = "{loginname : 'jack' , ip : '192.168.1.2'}";persons[2] = "{loginname : 'mary' , ip : '192.168.1.3'}";persons[3] = "{loginname : 'jone' , ip : '192.168.1.4'}";persons[4] = "{loginname : 'ada' , ip : '192.168.1.5'}";persons[5] = "{loginname : 'alex' , ip : '192.168.1.6'}";persons[6] = "{loginname : 'lucy' , ip : '192.168.1.7'}";persons[7] = "{loginname : 'jms' , ip : '192.168.1.8'}";persons[8] = "{loginname : 'smile' , ip : '192.168.1.9'}";persons[9] = "{loginname : 'somnus' , ip : '192.168.1.10'}";int pageSize = Integer.parseInt(request.getParameter("page").toString());int limit = Integer.parseInt(request.getParameter("limit").toString());System.out.println("pageSize="+pageSize+ " limit="+limit);StringBuffer personName = new StringBuffer();personName.append("{");personName.append("total : 10,");personName.append("rows : [");int min = (pageSize-1)*limit;int max = pageSize*limit;if(max > 10){max = 10;}for(int i = min ; i < max ; i++){personName.append(persons[i]);if(i < max - 1){personName.append(",");}};personName.append("]");personName.append("}");response.getWriter().write(personName.toString());%>