ExtJS Grid Paging

Use ExtJS to create a grid with paging functionality as follows:

1. Create a model

        Create a calculation definition Model model name User        ext.define (' user ', {            extend: ' Ext.data.Model ', fields            : [' name ', ' email ', ' phone ', ' BirthDate ']//load the specified data field        });

2. Create store to store the model, where mypagesize is the default page initial size, set to 10

Create Store        var userstore = ext.create (' Ext.data.Store ', {            model: ' User ',  //Use custom model            //fields: [' name ', ' Email ', ' phone ', ' birthDate ',//Add this field, you can delete the model field            Autoload:false,            //id: ' Userstoreid ',            pageSize: Mypagesize,            Proxy: {//proxy field gets data from background                type: ' Ajax ',                URL: '/home/getdata ',                reader: {                    type: ' JSON ',                    root: ' Data ',                    totalproperty: ' TotalCount ',                }            }        });

3. Create a paging control method one:

            /* Add a paging control at the bottom of the grid, add the component to the component in the Panel, or a series of components. Docked items can be docked at the top, right, left, or bottom of the panel. This is usually used like toolbars and tab bars: *            /Dockeditems: [         {                xtype: ' Pagingtoolbar ',                store:userstore,   //and Gridpanel make The store is the same as the                dock: ' Bottom ',                displayinfo:true,                displaymsg: ' Show {0} data to {1} data, there are altogether {2} strips ',                emptymsg: " No record "            }           "

Pagination Control Method Two:

　

   Bbar:new Ext.pagingtoolbar ({       //define page Flip control                pagesize:mypagesize,           //Parameter 1: Display number of                Store:userstore per page,      //Data source---Very important                displayinfo:true,                displaymsg: ' Show {0} data to {1} data, there are altogether {2} bars ',                emptymsg: ' No record '            }),

The details of the method received in the background are as follows (C # MVC controller code below)

 Public Jsonhelper GetData () {list<users> myList = new list<users> ();            Jsonhelper json = new Jsonhelper ();            Json.success = true;            Json.totlalcount = 50;　　int num = 10;            Analog production Record count//POST request//var pageSize = request.form["Start"];            var pageIndex = request.form["Limit"]; Get request Gets the page number that the front end sends to the server, page size var pageIndex = request.params["Start"];　Current request page number var pageSize = request.params["Limit"];            Page size//read data var model = Userservice.getdata (pageIndex, pageSize, NULL); if (model = null) {foreach (var m in model) {JSON.                    AddItem ("name", M.name); Json.                    AddItem ("Phone", m.phone); Json.                    AddItem ("email", m.email); Json.                    AddItem ("BirthDate", m.birthdate); Json.                Itemok ();           } } return JSON; }

Note: The format returned in the background must be in JSON format, and the JSON format returned is as follows:

var userData = {    "success": True,    "TotalCount": "    users": [        {"name": "Lisa", "email": "[Email protect Ed] "," Phone ":" 111111111 ", Birthdate: ' 1991-02-01 '},        {" name ":" Bart "," email ":" [email protected] "," Phone ":" 222222 ", Birthdate: ' 1991-02-02 '},    ]};

ExtJS Grid Paging