ExtJS4.2 Learning (6) Table paging and obtaining paging data through background scripts

Think about the table we created in the previous section. If there are tens of thousands of pieces of data displayed in the table and the scroll bar is used to view the data, it is obviously not a good solution, and the efficiency is not allowed. In fact, table controls have high performance requirements. Put three tables on one page, and you will feel slow response. With thousands of data entries displayed in the table, the efficiency can be imagined.
Therefore, paging is essential. Next we will look at the paging toolbar provided by EXT.

// Create a table var grid = new Ext. grid. gridPanel ({renderTo: 'grie', // rendering position autoHeight: true, store: store, columns: columns, // display column stripeRows: true, // zebra effect // enableColumnMove: false, // do not drag and drop columns // enableColumnResize: false, // do not change the column width loadMask: true, // display the mask and prompt functions, load Loading ...... // ForceFit: true // automatically fills the table bbar: new Ext. pagingToolbar ({pageSize: 10, // several pieces of data are displayed on each page: store, displayInfo: true, // whether to display the data information displayMsg: 'display records from {0} to {1}, total records from {2} ', // valid only when displayInfo is true, it is used to display prompt information when data exists. {0}, {1}, {2} will be automatically replaced with the corresponding data emptyMsg: "No record" // display information when no data exists })

The following results are displayed:
650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131229/1223144303-0.jpg "border =" 0 "style =" margin: 0px; padding: 0px; border: medium none; line-height: 22.390625px; font-family: ' ', arial, helvetica, 'san-serif'; font-size: 14px; background-color: # ffffff; "alt =" 5893591b426081ac24444e10a5c14032.jpg "/>
The above data is simply defined on the static page, but how can we transmit the data through the Java background?
I used servlet technology for simple processing:
UserServices. java

Package cn.com. shuyangyang. services; import java. io. IOException; import javax. servlet. servletException; import javax. servlet. http. httpServlet; import javax. servlet. http. httpServletRequest; import javax. servlet. http. httpServletResponse;/*** user Servlet * <a href = "http://home.51cto.com/index.php? S =/space/1269642 "target =" _ blank "> @ author </a> shuYangYang * @ email: shuyangyang@aliyun.com * @ website: [url] www.shuyangyang.com.cn [/url] */@ SuppressWarnings ("serial") public class UserServices extends HttpServlet {<a href = "http://home.51cto.com/index.php? S =/space/5017954 "target =" _ blank "> @ Override </a> protected void doGet (HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost (req, resp);} <a href = "http://home.51cto.com/index.php? S =/space/5017954 "target =" _ blank "> @ Override </a> protected void doPost (HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String start = req. getParameter ("start"); String limit = req. getParameter ("limit"); try {int index = Integer. parseInt (start); int pageSize = Integer. parseInt (limit); System. out. println (index); System. out. println (pageSize); String json = "{tot Al: 100, root: ["; for (int I = index; I <pageSize + index; I ++) {json ++ =" {id: "+ I + ", name: 'name "+ I +" ', descn: 'desc' + I + "'}"; if (I! = PageSize + index-1) {json + = "," ;}} json + = "]}"; resp. getWriter (). write (json);} catch (Exception e) {e. printStackTrace ();}}}

The MySQL database is being installed tonight, so it will not be read from the database here, so it may be a waste of time. I simulate paging of 100 pieces of data in the background, after obtaining start and limit, data in JSON format is generated.
The obtained data is printed by the test program as follows:
{TotalProperty: 100, root :[
{Id: 0, 'name: 'name0', descn: 'desc0'}, {id: 1, 'name: 'name1', descn: 'desc1 '}, {id: 2, 'name: 'name2', descn: 'desc2'}, {id: 3, 'name: 'name3', descn: 'desc3 '},
{Id: 4, 'name: 'name4', descn: 'sc4'}, {id: 5, 'name: 'name5', descn: 'sc5 '}, {id: 6, 'name: 'name6', descn: 'sc6'}, {id: 7, 'name: 'name7', descn: 'sc7 '},
{Id: 8, 'name: 'name8', descn: 'sc8'}, {id: 9, 'name: 'name9', descn: 'sc9 '}
]}
Remember this format. No matter whether your background is Shenma, PHP, or C #, Ext can accept and process the format and display it in the table. Take a simple look at the JSON data. totalProperty: 100 indicates a total of 100 data records. Then there is root: [], and root corresponds to an array. There are 10 objects in the data, and each object has id, name, and descn. The 10 data entries should be shown in the table at last.
My servlet configuration is as follows:

<servlet>     <servlet-name>userService</servlet-name>     <servlet-class>cn.com.shuyangyang.services.UserServices</servlet-class> </servlet>            <servlet-mapping>     <servlet-name>userService</servlet-name>     <url-pattern>/userServlet</url-pattern> </servlet-mapping>

Next, adjust the table attributes:

// Define the column var columns = [{header: 'number', dataIndex: 'id', width: 50}, // sortable: true: You can set whether to sort the column. {header: 'name', dataIndex: 'name', width: 80}, {header: 'description', dataIndex: 'desc ', width: 112}]; // convert the original data to the data that can be displayed by EXT var store = new Ext. data. store ({proxy: {type: 'ajax ', url:'/ExtJs4.2Pro/userServlet ', reader: {type: 'json', totalProperty: 'Total', root: 'root', idProperty: 'id' }}, fields: [{name: 'id'}, // mapping: 0 can specify the position where the column is displayed, 0 represents the 1st columns. You can set the position {name: 'name'}, {name: 'desc'}, {name: 'status'}]} displayed at will.) // create a table var grid = new Ext. grid. gridPanel ({renderTo: 'grid', // rendering position autoHeight: true, store: store, width: 550, columns: columns, // display column bbar: new Ext. pagingToolbar ({pageSize: 25, // several pieces of data are displayed on each page: store, displayInfo: true, // whether to display the data information displayMsg: 'display records from {0} to {1}, total records from {2} ', // valid only when displayInfo is true, it is used to display prompt information when data exists. {0}, {1}, {2} will be automatically replaced with the corresponding data emptyMsg: "No record" // display information when no data exists}); // load the data store. load ({params: {start: 0, limit: 25 }});

OK. The result is as follows:
650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131229/1223141U1-1.jpg "border =" 0 "style =" margin: 0px; padding: 0px; border: medium none; line-height: 22.390625px; font-family: ' ', arial, helvetica, 'san-serif'; font-size: 14px; background-color: # ffffff; "alt =" inherit "/>
Here I found a problem. Although I set pageSize to 10 or another number on the foreground, the final result is always the number of entries you set on the first page, there is a problem on the second page. I don't know why yet. Tell me if you know the problem.


During the serialization, please keep an eye on it. This article is from my personal website thinker's diary.

This article is from the "On My Way" blog, please be sure to keep this source http://shuyangyang.blog.51cto.com/1685768/1332885