Learn Yui. Ext 5th day-simple paging of the grid component

The reader should first download the Demo code involved in this example. Here is a completed example.

Grid Data
The data on each page of the grid must be divided by the server side.

In this example, the server is Php, and the database is MySQL, which is used to export random data. The following script is used to obtain the data we want and the data has been divided into pages. The paging parameters are determined by the limit and start variables passed in by the page toolbar.

$ Link = mysql_pconnect ("test-db.vinylfox.com", "test", "testuser ")
Or die ("cocould not connect ");
Mysql_select_db ("test") or die ("cocould not select database ");

$ SQL _count = "select ID, name, title, hire_date, active from random_employee_data ";
$ SQL = $ SQL _count. "limit". $ _ Get ['start']. ",". $ _ Get ['limit'];

$ Rs_count = mysql_query ($ SQL _count );

$ Rows = mysql_num_rows ($ rs_count );

$ Rs = mysql_query ($ SQL );

While ($ OBJ = mysql_fetch_object ($ RS ))
{
$ Arr [] = $ OBJ;
}

Echo $ _ Get ['callback']. '({"Total ":"'. $ rows. '"," Results ":'. json_encode ($ ARR ). '})';

Because the development environment in each background is different, the server code here is not detailed.

How to Create a grid with pagination
In this example, scripttagproxy is used because the sample code and the server code are not on the same server. In most cases, you can directly use httpproxy to obtain data on the same server.

The only difference between datastore and datastore is that you need to set the totalproerty attribute. In this example, we calculate the value of "Total" from the script on the server to tell datastore how many records there are in total. This indicates the number of all records.

VaR DS = new Ext. Data. Store ({

Proxy: New Ext. Data. scripttagproxy ({
URL: 'http: // www.vinylfox.com/yui-ext/examples/grid-paging/grid-paging-data.php'
}),

Reader: New Ext. Data. jsonreader ({
Root: 'results ',
Totalproperty: 'Total ',
ID: 'id'
},[
{Name: 'employee _ name', mapping: 'name '},
{Name: 'job _ title', mapping: 'title '},
{Name: 'hire _ date', mapping: 'hire _ date', type: 'date', dateformat:'m-D-y '},
{Name: 'Is _ activity', mapping: 'activity '}
])

});

Toolbar
Add a tab bar to the grid panel. -- almost done.

VaR gridfoot = grid. getview (). getfooterpanel (true );

VaR paging = new Ext. pagingtoolbar (gridfoot, DS ,{
Pagesize: 25,
Displayinfo: True,
Displaymsg: 'displaying results {0}-{1} of {2 }',
Emptymsg: "No results to display"
});

Finally, input the start and limit parameters to initialize the data.

DS. Load ({Params: {start: 0, limit: 25 }});

A lot of time is spent on how to generate data in the background to work with the grid. Once these jobs are OK, paging the grid is no longer a problem.

 

Translator name: Frank
Translator's blog: http://www.ajaxjs.com/blog/