Ext.toolbar.Paging pagination Toolbar control in EXTJS4

The code is as follows	Copy Code
[Js] var store = ext.create (' Ext.data.Store ', { Fields: [' intdata ', ' stringdata ', ' timedata '], Pagesize:15, Proxy: { Type: ' Ajax ', URL: ' Pagingtoolbar1json ', Reader: { Type: ' JSON ', Root: ' Rows ', Totalproperty: ' Results ' } }, Autoload:true });

The code for the corresponding service-side MVC is as follows:

The code is as follows	Copy Code
[C # MVC] Public Jsonresult Pagingtoolbar1json (int start, int limit) { var json = new { Results = BasicData.Table.Count, rows = BasicData.Table.Skip (start). Take (limit). Select (x => New { Intdata = X.intdata, StringData = X.stringdata, Timedata = x.timedata.toshortdatestring () }) }; Return JSON (JSON, jsonrequestbehavior.allowget); }

Now we borrow the Ext.view.View control from the previous article and place it in a panel with the following code:

The code is as follows

Copy Code

[Js] var panel = ext.create (' Ext.panel ', { Renderto: "Div1", Frame:true, width:535, Autoheight:true, Collapsible:true, Layout: ' Fit ', Title: ' Pagination control used in view ', Items:Ext.create (' Ext.view.View ', { Store:store, TPL:TPL, Autoheight:true, Multiselect:true, ID: ' View1 ', Overitemcls: ' Hover ', Itemselector: ' Tr.data ', Emptytext: ' No data ', Plugins: [ Ext.create (' Ext.ux.DataView.DragSelector ', {}), Ext.create (' Ext.ux.DataView.LabelEditor ', {dataindex: ' Intdata '}) ] }), Bbar:Ext.create (' Ext.toolbar.Paging ', { Store:store, Displayinfo:true, Items: [ '-', { Text: ' 10th page ', Handler:function () { Store.loadpage (10); } }] }) });

Note The above code, we have a button in the Pagination toolbar control, when the button is clicked, the dataset automatically turns to page tenth.

Finally, let's look at the results: