There are two ways to implement the paging function:
One is the server paging method, that is, the Web Client transmits the page number parameter to the server. The server returns the specified number of data records based on the page parameters. That is, how much is required. This method is suitable for grid with a large amount of data and batch fetch is required.
The other is the client paging method. All data retrieved from the server at one time is displayed on the client side. This is naturally suitable for scenarios with a small amount of data, reducing interaction with the server, which is helpful for performance. Another advantage of this method is that the ext JS grid or paging function is relatively simple and intuitive for beginners.
In the official documentation of Ext, there are not many introductions and examples on the client paging method, but the server-side method is related to the specific server-side technology, so ext does not provide much introduction.
This article first introduces the idea of paging implementation, and then introduces the implementation method of the client. After all, the test is simpler. Finally, it introduces the method of the server.
Paging effect:
Grid panel paging implementationTo implement the paging function on the grid,
First, add an Ext. pagingtoolbar to the grid panel.
You can use the config of bbar to add it to the button bar.
You can also use dockeditems config to add
For example:
bbar: Ext.create('Ext.PagingToolbar',{ store: store, displayInfo: true, displayMsg: 'Displaying topics {0} - {1} of {2}', emptyMsg: "No topics to display", } ),
Or:
dockedItems: [{ xtype: 'pagingtoolbar', store: store, // same store GridPanel is using dock: 'bottom', displayInfo: true }]
Use Ext. Create or directly in [] config.
The next step is the processing of this store. There are some differences between the page store and the general store, which will be described below.
Client paging (local data)In ext JS, the client page is also called the "local data" page.
An Introduction to pageingstore is mentioned in ext JS official documents.
Ext. UX. Data. pagingstore.
This method is implemented by adding some new classes. This extension package is implemented for ext JS 3.x and needs to be downloaded.
The download link in this introduction requires the permission. In short, it is a little troublesome.
In the new version of ext JS 4, this method is not required.
The ext js api has the following class, and the store constructed with it can achieve paging effect.
Ext. UX. Data. pagingmemoryproxy
Proxy: pagingmemory
Note that the ext-all.js In the ext import package does not include this class and it looks like this is an extension package.
Therefore, you need to import the definition JS file of this package or use the Dynamic Loading Method of ext before use.
Let's look at the example:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Note:
1. Be sure to import pagingmemoryproxy. js
<SCRIPT type = "text/JavaScript" src = "../lib/extjs/UX/data/pagingmemoryproxy. js"> </SCRIPT>
You can also use the dynamic import method (first set the file paths that allow dynamic import and import, and then use the require method to import)
Ext.Loader.setConfig({enabled: true});Ext.Loader.setPath('Ext.ux', 'lib/extjs/ux');Ext.require([ 'Ext.ux.data.PagingMemoryProxy' ]);2. the type in the store proxy must be 'pagingmemory '. If it is defined according to the general store method.
The toolbar will be available on the page, but all the data will be displayed at one time, so page turning will have no effect.
Server-side Paging
The difference between the paging method on the server side and that on the client side is only in the definition of store.
The added pagingtoolbar has a forward or backward button. When you click it, some page information is transmitted to the server through the URL. Like? _ Dc = 1374646308167 & page = 2 & START = 4 & limit = 4
In JSP, you can get these values through request. getparameter.
String spage = request. getparameter ("page ");
String sstart = request. getparameter ("START ");
String slimit = request. getparameter ("Limit ");With these values, you can perform some filtering on the server. For example, there are two files.
Testpagegrid.html
Pagegriddata. jsp -- JSP outputs server data
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><%response.setContentType( "text/html; charset=UTF-8" );//page=2&start=4&limit=4String sPage = request.getParameter("page");String sStart = request.getParameter("start");String sLimit = request.getParameter("limit");int iPage = Integer.valueOf(sPage);int iStart = Integer.valueOf(sStart);int iLimit = Integer.valueOf(sLimit);int totalCount = 12;StringBuffer dataBuffer = new StringBuffer();dataBuffer.append("{totalCount:'").append(totalCount).append("',");dataBuffer.append("items:[");for(int i =0;i<iLimit;i++){dataBuffer.append("{");String name = "jack_"+sPage+"_"+String.valueOf(i);String mail = "jack"+sPage+"_"+String.valueOf(i)+"@email.com";String phone = "000-"+sPage+"_"+String.valueOf(i);dataBuffer.append("name:'"+name+"',");dataBuffer.append("email:'"+mail+"',");dataBuffer.append("phone:'"+phone+"'");dataBuffer.append("}");if(i<iLimit-1){dataBuffer.append(",");}}dataBuffer.append("]");dataBuffer.append("}");out.write(dataBuffer.toString());out.flush();%>Note the following:
1. Access the test through http url. In tomcat or weblogic.
2. in store, you must specify the totalproperty of reader. Otherwise, there will be only one page.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
