"ExtJS" Query with paged table component grid interacting with background database

ExtJS's tabular component grid is paginated, and this component interacts with the background database on the go. Just like the list Table control in MFC for VCs.

Basically, this table control as the main character of OA system, with "ExtJS" use tree structure, border layout and label page to Carve OA interface (click Open link) is really a complete OA system.

However, the online description of this component is very bad, all kinds of assorted data, layer out different back-end language, people can not understand. Here is an example of how a grid component can query the data of a database, and the paging reality comes out.

I. BASIC OBJECTIVES

For example, the MySQL database has a user information table, as shown in:

Then I'm going to put it on the grid.html and show 2 results per page, such as:

Second, the basic idea

The directory structure of this project is as follows:

The necessary ext resources are not in the directory structure above. One of the grid.html is the foreground display page, formsubmit.php explain grid.html in the paging information passed over, to model.php the MySQL database in the User table query, and then use Ajax to play back to grid.html display.

formsubmit.php key is to print out a JSON string such as the following, grid.html directly waiting to accept the following information, if not accepted, will remain in the read state:

{' Success ': true, ' Total ': 3, ' data ': [{' id ': 1, ' username ': ' A ', ' Password ': ' B '},{' ID ': 2, ' username ': ' c ', ' Password ': ' B ' },{' ID ': 3, ' username ': ' s ', ' password ': ' B '}]}

Where total is the number of entries in data, data is each item.

Third, the production process

1, grid.html

The first thing in HTML is simply the introduction of EXTJS resources:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
After that, we first construct a user entity, object, model, object, whatever, that's what it means! ExtJS is so demanding, I'm not as complicated as writing!
Ext.define (' user ', {extend: ' Ext.data.Model ', fields:[{name: ' id ', type: ' int '},{name: ' username ', type: ' String '},{ Name: ' Password ', type: ' String '}]});
The JSON array in fields in this object corresponds basically to a table in the database, and also to the columns to be displayed by the grid table control below.
Second, define a so-called ExtJS Data Center store. The model for developing this data center is user, with various attributes and fixed configurations of various assorted.
var userstore=ext.create (' Ext.data.Store ', {model: ' user ', pagesize:2,//per page display number Proxy:{type: ' ajax ', url: ' Formsubmit.php ',//provide JSON strings for page Reader:{type: ' json ', Root: ' Data ', Totalproperty: ' Total '///}},autoload:true});
Finally, the Grid table control, the ExtJS table control is quite complex, and the data center provides data support to work properly.
Ext.create (' Ext.grid.Panel ', {title: ' User Information table ', RenderTo:Ext.getBody (), store:userstore,// The data for this table control is supported by the Userstore data Center columns:[{text: ' ID ', dataindex: ' id ', Flex:1},{text: ' username ', Dataindex: ' username ', flex:1}, {text: ' Password ', dataindex: ' Password ', Flex:1}],bbar:{xtype: ' Pagingtoolbar ',//Bottom toolbar is the Pagination toolbar store:userstore,// According to Userstore data for pagination displayinfo:true//display a total of XX pages, each page shows xx bar information});
In the column definition for this control, text is the column header that is presented to the user, and Dataindex indicates which item of this column corresponds to the model in the datacenter. For example, I have defined the username column in the user entity, so the data for "username" here is the data of username column, and it is a string type. The flex:1 represents the automatic column width.
2, formsubmit.php
This page, if the user in the Grid.html definition each page shows 2, then no matter which page it turns to, you will receive limit=2 this variable, if the user turns to page 1th, then you will receive start=0 this variable, if 2nd, then start=1, in other words, You will receive two variables, and your task is to use these two variables to construct a JSON string such as the following, printed directly on this page!
{' Success ': true, ' total ': How many items are in the 3,//database, this value should be fixed. ' Data ': [{' id ': 1, ' username ': ' A ', ' Password ': ' B '},{' ID ': 2, ' username ': ' c ', ' Password ': ' B '}]//on this page, you want to grid.html show something}
Therefore, the following statement is available. Where the value of $total, $data the construction of the string, directly using the method in model.php to find out. Finish a big round and print the results. When printing $data, if this JSON item is not the last item, add a comma, make a JSON array, the last item must not have a comma, otherwise there will be "JavaScript" at the end of the array definition do not leave a comma "(Click Open link) problem.
<?php$start=$_request["Start"]; $limit =$_request["Limit"];include_once ("model.php"), $db =new db (), $user = $db- >getuserinfobypaging ($start, $limit); $total = $db->getusertotalnum (); $data = ""; for ($i =0; $i <count ($user); $ i++) {  $data. = "{' id ':". $user [$i] [' ID ']. ", ' username ': '". $user [$i] [' username ']. "', ' Password ': '". $user [$i] [' Password ']. "'}"; if ($i + 1)!=count ($user)) {$data. = ",";}} echo "{' Success ': true, ' total ': {$total}, ' data ': [{$data}]}";? >
JSP users I recommend that you directly use the servlet or SSH directly in a Java to print these things to the page. Use a statement such as the following, where SSH will also need to use HttpServletResponse response=servletactioncontext.getresponse (); Remove the Respond object.
        PrintStream out = new PrintStream (Response.getoutputstream ());          Response.setcontenttype ("Text/html;charset=utf-8");          Out.print ("Print content");  
ASPX can be used to respond.write.
3, model.php
This is really nothing to say, directly in the "PHP" using the original Java JavaScript ajax for PHP MVC layered design, compatible with IE6 "(Click to open the link) has been said. Are some very simple PHP operation database code just. Anyway, the query results of the database are all saved with a two-dimensional array. is the ported version of Xxlist in SSH.
Paged query, query by the database of all the results of the query, and then paging, the results of the paging into another array and then hit back to formsubmit.php, so that it will be accurate paging. Do not query the first X item based on what ID. If the ID of this table is a fault, it is possible for a user to have inaccurate paging through problems such as manipulating the database.
At the same time, as normal, this is only the operation of a table, so this class named DB is not so-called, according to Normal, should be named user. This is really strictly according to what the garbage framework, team development standards.
<?php function Createcon () {///database address is localhost:3306, database user name (second item) is root, database password (third item) is Root $con =mysql_connect ("Loc      Alhost "," root "," root "); if (! $con) {die ("Connection failed!      ");      }//To manipulate the test database mysql_select_db ("test", $con);      Prevent garbled mysql_query ("Set names UTF8;");  return $con;          } class Db{public function Getusertotalnum () {$con =createcon ();        $result =mysql_query ("select * from User;");        $userList =array ();              for ($i =0; $row =mysql_fetch_array ($result), $i + +) {$userList [$i] [' ID ']= $row [' id '];              $userList [$i] [' username ']= $row [' username '];          $userList [$i] [' Password ']= $row [' Password '];          } mysql_close ($con);    return count ($userList);}          Public Function getuserinfobypaging ($start, $limit) {$con =createcon ();        $result =mysql_query ("select * from User;");        $userList =array (); for ($i =0; $row =mysql_fetch_array ($result), $i + +) {$userList [$i] [' ID ']= $row [' ID '];              $userList [$i] [' username ']= $row [' username '];          $userList [$i] [' Password ']= $row [' Password ']; } $user =array (), for ($i =0, $j = $start, $j < ($start + $limit), $i + +, $j + +) {if (Empty ($userList [$j])) {break;}        $user [$i]= $userList [$j];}          Mysql_close ($con);      return $user;  }}?>


"ExtJS" Query with paged table component grid interacting with background database