In many cases, we need to display tens of thousands of data records in the grid instead of just a few or dozens. If a large amount of data is displayed on a single page, you can imagine the user experience. Therefore, almost all grid controls now support the paging function. Extjs is no exception. It also provides powerful and convenient support for paging, so that we can easily handle paging.
In extjs, the Ext. PagingToolbar class encapsulates paging operations, which are inherited from the Toolbar. From the name alone, we can also guess that this is a Toolbar that can process paging. Well, let's take a look at how to construct such a toolbar. The constructor of the PagingToolbar class requires a json object for configuration. In js, It is very convenient to use a json object to provide the required parameters, so that we can only fill in the parameters of interest, you do not need to care about the order of parameters. Common configuration parameters in the pagination toolbar include:
PageSize: the number of records displayed on each page. The default value is 20.
Store: This is the same as the store parameter in the grid, because paging also needs to deal with data, so this parameter is required.
DisplayMsg: displays page status information, for example, "Article {0}-{1}, {2} in total". Note that 0, 1, 2, must be enclosed in braces, it indicates the start, end, and number of all records of the current page. You can write other words as long as you read them smoothly, this information is displayed on the right side of the page toolbar.
DisplayInfo: whether to display displayMsg. displayInfo is not displayed by default.
EmptyMsg: Text displayed when no record exists.
Items: The items to be displayed on the toolbar. After being constructed, let's take a look at what items can be displayed.
Now we can construct our paging toolbar. However, because we need a Store class object in our parameters, we should first construct it:
The Code is as follows:
Var store = new Ext. data. JsonStore ({
Root: 'topics ',
TotalProperty: 'totalcount ',
IdProperty: 'threadid ',
RemoteSort: true,
Fields :[
'Title', 'forumtitle', 'forumid', 'author ',
{Name: 'replace count', type: 'int '},
{Name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp '},
'Lastposter', 'excerpt'
],
// Because of cross-origin, ScriptTagProxy is used and HttpProxy is used in the same domain.
Proxy: new Ext. data. ScriptTagProxy ({
Url: 'http: // extjs.com/forum/topics-browse-remote.php'
})
});
This time, we use the JsonStore class to construct the required Store object. As the name suggests, this is used to convert data in json format. In addition, we get data from external servers, so the code is more complicated than the original data obtained from the array. Let's take a look at the meanings of the parameters used:
Root: name of the attribute containing the data row set.
TotalProperty: name of the attribute indicating the total number of records in the dataset. This attribute is only required for paging.
IdProperty: the name of the attribute used as the identifier in the Data row.
RemoteSort: whether to obtain new data through proxy during sorting. The default value is false.
Fields: mentioned in the previous series. Here, a mapping is added, which maps the names in the data to the names of the encapsulated Record fields. If the names are the same, you can ignore the mapping.
Proxy: the data source. Here, we only need to know that our data is obtained from the address specified by the url, because this address is cross-origin, so we use ScriptTagProxy.
Note that the data returned from the server must have the following format:
The Code is as follows:
{
"TotalCount": 10000, // corresponding totalProperty Value
"Topics": [// value of the root apartment
// Here is a collection of json objects, the attributes of each object
// It must correspond to the name attribute value in fields.
// Observe the data returned by the url to better understand this point.
]
}
Next we will construct our paging toolbar:
The Code is as follows:
Var pagingToolbar = new Ext. PagingToolbar ({
PageSize: 25,
Store: store,
DisplayInfo: true,
DisplayMsg: 'displaying topics {0}-{1} of {2 }',
EmptyMsg: "No articles ",
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 is a set of items on the toolbar. The default type is button. Here we only use two items, "-" represents the separator, and the second item is a button. Let's take a look at what each attribute represents:
Pressed: indicates whether the button is pressed at the beginning. It is only useful when enableToggle is true.
EnableToggle: indicates whether the button can be in the pressed state.
Text: The text displayed on the button.
Cls: the css class of the button.
ToggleHander: Specifies the event handler function when the enableToggle is set to true.
It is time to combine the pagination toolbar and grid. Instead of using ColumnModel, this time, our grid uses the columns attribute, and viewConfig to configure the user interface, let's take a look at the complete code:
The Code is as follows:
///
/**//*
* Author: Dummies
* Date: 2009-10-13
* Release: 1.0
* Blog: http://yage.cnblogs.com
*/
Ext. BLANK_IMAGE_URL = '/extjs/resources/images/default/s.gif ';
Ext. onReady (function (){
// Create a store
Var store = new Ext. data. JsonStore ({
Root: 'topics ',
TotalProperty: 'totalcount ',
IdProperty: 'threadid ',
RemoteSort: true,
Fields :[
'Title', 'forumtitle', 'forumid', 'author ',
{Name: 'replace count', type: 'int '},
{Name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp '},
'Lastposter', 'excerpt'
],
// Because of cross-origin, ScriptTagProxy is used and HttpProxy is used in the same domain.
Proxy: new Ext. data. ScriptTagProxy ({
Url: 'http: // extjs.com/forum/topics-browse-remote.php'
})
});
Store. setDefaultSort ("lastpost", "DESC"); // you can specify the default sorting column and direction.
// Create a toolbar with the paging Function
Var pagingToolbar = new Ext. PagingToolbar ({
PageSize: 25,
Store: store,
DisplayInfo: true,
DisplayMsg: 'Article {0}-{1}, total {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 ();
}
}]
});
// Construct a grid with a paging Toolbar
Var grid = new Ext. grid. GridPanel ({
RenderTo: "grid ",
Width: 700,
Height: 500,
Title: 'grid with pagination ',
Store: store,
TrackMouseOver: false,
DisableSelection: true,
LoadMask: true,
// Grid Column
Columns :[{
Id: 'topic ',
Header: "topic ",
DataIndex: 'title ',
Width: 420,
Renderer: renderTopic,
Sortable: true
},{
Header: "author ",
DataIndex: 'author ',
Width: 100,
Hidden: true,
Sortable: true
},{
Header: "replies ",
DataIndex: 'replace count ',
Width: 70,
Align: 'right ',
Sortable: true
},{
Id: 'last ',
Header: "last reply ",
DataIndex: 'lastpost ',
Width: 150,
Renderer: renderLast,
Sortable: true
}],
// Customize the user interface
ViewConfig :{
ForceFit: true,
EnableRowBody: true,
ShowPreview: true,
GetRowClass: function (record, rowIndex, p, store ){
If (this. showPreview ){
P. body ='
'+ Record. data. excerpt +'
';
Return 'x-grid3-row-expanded ';
}
Return 'x-grid3-row-collapsed ';
}
},
// On the top page Toolbar
// Tbar: pagingToolbar,
// Click the tab bar at the bottom.
Bbar: pagingToolbar
});
// Load data
Store. load ({params: {start: 0, limit: 25 }});
// Renderer function of the topic Column
Function renderTopic (value, p, record ){
Return String. format (
'
{0}{1} Forum ',
Value, record. data. forumtitle, record. id, record. data. forumid );
}
// Returns the renderer function of the column.
Function renderLast (value, p, r ){
Return String. format ('{0}
By {1} ', value. dateFormat ('m j, Y, g: I A'), r. data ['lastposter']);
}
})
Run the following command to check the effect. We can see that the page is covered by an animation when obtaining data,
When the data is loaded, we can see that the data is displayed by page in the grid and arranged in descending order according to the last published column, where the author column is hidden:
When you click the column name for sorting, new data is reloaded from the server. Click the right arrow to flip the page and Click Preview to see the effect. Although this time the Code is much more than the simplest grid, it also has a lot of cool effects. Let's take a look at the code from the beginning:
Row 8th uses an image placeholder, which points to an empty image. In the extjs library file, the placeholder image will be replaced with another image as needed. In our example, if this line is removed, the impact will not be too great, the small arrow next to "last reply" in the title bar will disappear. Let's develop the habit of writing this line.
Lines 11-28 construct a Store class object.
Set the lastpost column in row 30th as the default sorting column and sort it in descending order. Note that "DESC" must be in uppercase and "ASC" in ascending order ".
Lines 3-51 construct a toolbar with pagination, as mentioned above.
Lines 54-112 construct a grid with the paging function.
The second line indicates that the row is not highlighted when the mouse is suspended over the row.
Row 61 indicates that you cannot select a grid.
Row 62 indicates that the page is overwritten when loading data. We can see the effect on the page, but we recommend you run it yourself to see the effect. After all, the animation is displayed here. After the data is loaded, the masking effect disappears.
Line Set User Interface, let's look at the meaning of each parameter:
ForceFit: whether to force the column to adjust the width so that horizontal scroll bars are not displayed. The default value is false.
EnableRowBody: If this parameter is set to true, a tr element can be added to each row to expand data rows.
ShowPreview: Custom bool type attribute, used to control whether to display preview in the code.
GetRowClass: This method is used to rewrite the css style of a row. It has four parameters: the first is the Record object representing the row data, and the second is the row index, the third is passed in when enableRowBody is set to true.
Parameter. You can use this parameter's body attribute to expand row data. This method should return a css class name. In our example, the summary information of the article is dynamically displayed based on the value of showPreview.
The page Toolbar of row 111 is displayed at the bottom of the grid. to display it at the top, use tbar instead of bbar.
Row 3 sends a request to the server to obtain the data. extjs sends the parameters in params to the server in post mode, where start indicates the number of data records starting from the ground, limit indicates how much data is displayed on each page.
118 to 126 are two renderer functions, which have been explained in the previous series.
It should be pointed out that the paging function is actually completed on the server side. When a page is displayed on the client, parameters are submitted in the same way as those in line 3, on the server side, we need to calculate the data to be returned Based on the passed star and limit values and send the data to the client in the correct format. For details about how the server obtains the parameters passed by the client and how to send data to the client, see section 1 of this series.
