As a result, almost all grid controls now support paging functionality. ExtJS is no exception, it also provides a strong and convenient support for pagination, so that we can be handy in the paging processing.
In ExtJS, class Ext.pagingtoolbar encapsulates an operation on paging, which is inherited from toolbar, and as a single name, we can also guess that this is a toolbar that handles pagination. Well, let's look at how to construct such a toolbar. The constructor of the Pagingtoolbar class requires a JSON object to configure, and in JS, it is convenient to use JSON objects to provide the required parameters so that we can fill in the parameters of interest and not care about the order of the parameters. The common configuration parameters for our pagination toolbar include:
PageSize: The number of records displayed per page, default is 20.
Store: This is the same as the store parameter in the grid, because pagination also needs to deal with the data, so this parameter is required.
DISPLAYMSG: The paging state information displayed, for example, "0}-{1}", Total {2} ", note must have curly braces around the 0,1,2, respectively, representing the beginning of the current page, the end, there are all the records, the other words themselves casually write it, as long as it can be read smoothly, This information is displayed on the right side of the paging toolbar.
DisplayInfo: Whether to display displaymsg, default is not displayed.
Emptymsg: Text that is displayed when there is no record.
Items: To display the items on the toolbar, we'll look at what we can do after we construct them.
OK, now we can construct our pagination toolbar, but because we need a store class object in our parameters, we'll construct it first:
Copy Code code as follows:
var store = new Ext.data.JsonStore ({
Root: ' Topics ',
Totalproperty: ' TotalCount ',
Idproperty: ' ThreadID ',
Remotesort:true,
Fields: [
' title ', ' Forumtitle ', ' ForumID ', ' author ',
{name: ' Replycount ', type: ' int '},
{name: ' Lastpost ', Mapping: ' Lastpost ', type: ' Date ', DateFormat: ' Timestamp '},
' Lastposter ', ' excerpt '
],
Because Cross-domain, so use Scripttagproxy, in the same domain inside with httpproxy
Proxy:new Ext.data.ScriptTagProxy ({
URL: ' http://extjs.com/forum/topics-browse-remote.php '
})
});
This time, we used the Jsonstore class to construct the desired store object, which, as the name suggests, is used to transform JSON-formatted data. In addition, we get the data from the external server, so the code is more complicated than the original data from the array, so let's take a look at the meaning of those parameters:
Root: The name of the property that contains the data row collection.
Totalproperty: The name of the attribute that represents the number of records in the dataset, only required when paging.
Idproperty: The name of the property used as the identity in the data row.
Remotesort: The default is False if you get new data by proxy when sorting.
Fields: Mentioned in the previous series. Here is a mapping, it is the data inside the name map to the encapsulated record field name, when the same name, can be ignored.
Proxy: The source of the data. Here, we just need to know that our data is obtained from the address specified in the URL, because this address is cross-domain, so use Scripttagproxy.
It is important to note that the data returned from the server must have the following format:
Copy Code code as follows:
{
"TotalCount": 10000,//The value of the corresponding Totalproperty property
"Topics": [//corresponding to the value of the root type
This is a collection of JSON objects, and the properties of each object
needs to correspond to the value of the name attribute in the fields
Observation URL returned to our data can be clearer to see this
]
}
The next step is to construct our page-splitting toolbar:
Copy Code code as follows:
var pagingtoolbar = new Ext.pagingtoolbar ({
PAGESIZE:25,
Store:store,
Displayinfo:true,
Displaymsg: ' Displaying topics {0}-{1} of {2} ',
Emptymsg: "No article",
Items: [
'-', {
Pressed:true,
Enabletoggle:true,
Text: ' Show Preview ',
CLS: ' X-btn-text-icon details ',
Togglehandler:function (BTN, pressed) {
var view = Grid.getview ();
View.showpreview = pressed;
View.refresh ();
}
}]
});
Items are a collection of items on the toolbar, and the default type is a button. We've only used two items here, "-" to represent the separator, and the second is a button, so let's look at what each of these attributes represents:
Pressed: Indicates whether the button is pressed at the beginning, only when the Enabletoggle is true.
Enabletoggle: Indicates whether the button can be in a pressed state.
The text that is displayed on the button.
CLS: CSS class for buttons.
Togglehander: Sets the event handler function when the button is clicked when Enabletoggle is true.
It's time to put the pagination toolbar and grid together, this time our grid does not use Columnmodel but use the columns attribute, we use the Viewconfig to configure the user interface, look at the complete code:
Copy Code code as follows:
<reference path= "Vswd-ext_2.0.2.js"/>
/**//*
* Author: Big stupid
* Date: 2009-10-13
* Version: 1.0
* Blog Address: http://yage.cnblogs.com
*/
Ext.blank_image_url = '/extjs/resources/images/default/s.gif ';
Ext.onready (function () {
Construction Store
var store = new Ext.data.JsonStore ({
Root: ' Topics ',
Totalproperty: ' TotalCount ',
Idproperty: ' ThreadID ',
Remotesort:true,
Fields: [
' title ', ' Forumtitle ', ' ForumID ', ' author ',
{name: ' Replycount ', type: ' int '},
{name: ' Lastpost ', Mapping: ' Lastpost ', type: ' Date ', DateFormat: ' Timestamp '},
' Lastposter ', ' excerpt '
],
Because Cross-domain, so use Scripttagproxy, in the same domain inside with httpproxy
Proxy:new Ext.data.ScriptTagProxy ({
URL: ' http://extjs.com/forum/topics-browse-remote.php '
})
});
Store.setdefaultsort ("Lastpost", "DESC"); Set the default sort column and orientation
To construct a toolbar with paging functionality
var pagingtoolbar = new Ext.pagingtoolbar ({
PAGESIZE:25,
Store:store,
Displayinfo:true,
Displaymsg: ' 0}-{1}, altogether {2} ',
Emptymsg: "No topics to display",
Items: [
'-', {
Pressed:true,
Enabletoggle:true,
Text: ' Preview ',
CLS: ' X-btn-text-icon details ',
Togglehandler:function (BTN, pressed) {
var view = Grid.getview ();
View.showpreview = pressed;
View.refresh ();
}
}]
});
To construct a grid with a page-splitter toolbar
var Grid = new Ext.grid.GridPanel ({
Renderto: "Grid",
width:700,
HEIGHT:500,
Title: ' Grid with paging function ',
Store:store,
Trackmouseover:false,
Disableselection:true,
Loadmask:true,
Columns in grid
Columns: [{
ID: ' Topic ',
Header: "Subject",
Dataindex: ' title ',
width:420,
Renderer:rendertopic,
Sortable:true
}, {
Header: "Author",
Dataindex: ' Author ',
WIDTH:100,
Hidden:true,
Sortable:true
}, {
Header: "Reply Count",
Dataindex: ' Replycount ',
Width:70,
Align: ' right ',
Sortable:true
}, {
ID: ' Last ',
Header: "Last reply",
Dataindex: ' Lastpost ',
width:150,
Renderer:renderlast,
Sortable:true
}],
Customizing the user interface
Viewconfig: {
Forcefit:true,
Enablerowbody:true,
Showpreview:true,
Getrowclass:function (Record, RowIndex, p, store) {
if (This.showpreview) {
P.body = ' <p> ' + record.data.excerpt + ' </p> ';
Return ' x-grid3-row-expanded ';
}
Return ' x-grid3-row-collapsed ';
}
},
Pagination toolbar at the top
Tbar:pagingtoolbar,
At the bottom of the paging toolbar
Bbar:pagingtoolbar
});
Loading data
Store.load ({params: {start:0, limit:25}});
Renderer function for topic columns
function Rendertopic (value, p, record) {
Return String.Format (
' <b><a href= ' http://extjs.com/forum/showthread.php?t={2} ' href= ' Http://extjs.com/forum/showthread.php?t ={2} "target=" _blank ">{0}</a></b><a href=" http://extjs.com/forum/forumdisplay.php?f={3} "href=" HTTP://EXTJS.COM/FORUM/FORUMDISPLAY.PHP?F={3} "target=" _blank ">{1} forum</a>",
Value, Record.data.forumtitle, Record.id, Record.data.forumid);
}
Renderer function of the last reply column
function Renderlast (value, p, r) {
Return String.Format (' {0}<br/>by {1} ', Value.dateformat (' M J, Y, g:i a '), r.data[' Lastposter ']);
}
})
Run a look at the effect, we can see the data when the page is animated cover, as shown in figure:
When the data is loaded, we see that the data is paginated in grid and sorted in descending order by the last published column, where the author column is hidden:
When you click on the column name to sort, the new data will be reloaded from the server, click the right arrow, you can turn the page, you can click the "Preview" button to see the effect. Although this time the code relative to the most simple grid a lot more, but the effect also cool a lot. Let's start with the code from the beginning:
Line 8th uses a picture placeholder, which points to an empty picture. In the ExtJS library file, replace the picture placeholder with another image as needed, and in our case, if you remove the line, the impact is not too great, except that the down arrow next to the "last reply" in the title bar disappears. Let's get into the habit of writing this line.
The 11-28 line constructs a store class object, which has nothing to say.
Line 30th sets lastpost column as the default sort, and is in descending order, noting that "DESC" must be uppercase, and ascending is "ASC."
The 33-51 line constructs a toolbar with pagination, which has been said before.
54-112 line constructs a grid with paging functionality.
Line 60th, which indicates that the mouse is suspended on the row, is not highlighted.
Line 61 indicates that the user cannot select the grid.
62 lines indicate that when loading the data to cover the page, we can see the effect on the screenshot, but it is recommended to run a look at the effect, after all, this shows the animation. The masking effect disappears when the data is loaded.
94-105 lines to set the user interface, let's look at the meaning of each parameter:
Forcefit: Whether the column is forced to adjust width makes the horizontal scroll bar not appear, and the default is False.
Enablerowbody: True to allow one TR element to be added to each row to extend the rows of data.
Showpreview: A custom bool-type attribute used to control whether a preview is displayed in code.
Getrowclass: This is a method that overwrites the CSS style of a row, it has four parameters, the first is a record object that represents the row data, the second is the index of the row, and the third is the enablerowbody that is passed in when set true.
parameter, you can extend the row data through the Body property of the parameter. The method should return a CSS class name. In our example, the summary information for the article is dynamically displayed based on the value of the Showpreview.
The 111 Row tab toolbar appears at the bottom of the grid, and Tbar can be used instead of Bbar if you want to display it at the top.
115 rows Send a request to the server to get the data, and ExtJS sends the parameters in the params to the server by post, where start indicates starting with several data, and limit indicates how much data is displayed per page.
118 to 126 are two renderer functions that have been explained in the previous series.
Finally, the paging function is actually done on the server side. When turning the page on the client, the parameters are submitted as 115 rows, and we need to compute the data that should be returned and send it to the client in the correct format based on the value of the star and limit passed over. See the first section of this series for how the server side can get the parameters passed by the client and how to send the data to the client.
