[ExtJs] query of the grid with paging table component interacting with the background database

[ExtJs] query of the grid with paging table component interacting with the background database

ExtJs table component Grid can be paged, And it interacts with the background database anytime, anywhere. Just like the List table control in VC's MFC.

Basically, this table control is the main character of the OA system. It works with ExtJs to use a tree structure, Border layout, and tabs to describe the OA interface (click to open the link) it is really a complete OA system.

However, the description of this component on the Internet is very bad. The various types of miscellaneous materials come out of different backend languages, which are hard to understand. The following is an example to illustrate how the Grid component can query database data and display the data on pages.

 

I. Basic Objectives

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

Then, I need to put the cursor in grid.html and display two results on each page, for example:

 

Ii. Basic Ideas

The directory structure of this project is as follows:

The required Ext resources are not in the preceding directory structure. Region.

The key to formsubmit.php is to print the following jsonlogs. grid.html is waiting to accept the following information. If it cannot be received, it will remain in the read status:

 

{'success':true,'total':3,'data':[{'id':1,'username':'a','password':'b'},{'id':2,'username':'c','password':'b'},{'id':3,'username':'s','password':'b'}]}

 

Total is the total number of items in data, and data is the data of each item.

 

Iii. Production Process

1、Grid.html

First, only ExtJs resources are introduced in HTML:

 

<Script type = "text/javascript" src = ".. /js/ext-all.js "> </script> <script type =" text/javascript "src = ".. /js/bootstrap. js "> </script> <script type =" text/javascript "src = ".. /js/ext-lang-zh_CN.js "> </script> Then, construct a User Object, Object, model, Object, or something. That's what it means! ExtJs requires this, and I am 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 basically corresponds to the table in the database and the column to be displayed in the following Grid table control.

 

Second, define a so-called ExtJs data center store. The data center model is user, and various attributes are fixed with various miscellaneous configurations.

Var userStore = Ext. create ('ext. data. store', {model: 'user', pageSize: 2, // number of entries displayed per page proxy: {type: 'ajax ', url: 'formsubmit. php ', // page reader: {type: 'json', root: 'data', totalProperty: 'Total' // total number of items}, autoLoad: true });

Finally, the Grid table control is used. The ExtJs table control is quite complex and can run normally only when the data center provides data support.

 

 

Ext. create ('ext. grid. panel ', {title: 'user info table', renderTo: Ext. getBody (), store: userStore, // The data of this table control is provided by the userStore data center to support columns: [{text: 'id', dataIndex: 'id', flex: 1}, {text: 'username', dataIndex: 'username', flex: 1}, {text: 'Password', dataIndex: 'Password', flex: 1}], bbar: {xtype: 'pagingtoolbar', // The toolbar at the bottom is the paging toolbar store: userStore, // display a total of XX pages by PAGE according to userStore data displayInfo: true, XX messages per page }});

In the column definition of this control, text is the column header presented to the user. dataIndex indicates which column corresponds to the model in the data center. For example, if the username column is defined in the user object, the "username" data here is the data in the username column and is of the string type. Flex: 1 indicates the automatic column width.

Therefore, the code for the entire page is as follows:

 

<Script type = "text/javascript" src = ".. /js/ext-all.js "> </script> <script type =" text/javascript "src = ".. /js/bootstrap. js "> </script> <script type =" text/javascript "src = ".. /js/ext-lang-zh_CN.js "> </script>

 

2. formSubmit. php

In this page, if the user defines that two entries are displayed on each page in grid.html, then no matter which page it goes to, you will receive the limit = 2 variable. If the user goes to page 1st, then you will receive the Variable start = 0. If there is page 2nd, start = 1. In other words, you will receive two variables. Your task is to use these two variables, construct Json strings such as the following and print them directly on this page!

 

{'Success': true, 'Total': 3, // The total number of items in the database. The value should be fixed. 'Data': [{'id': 1, 'username': 'A', 'Password': 'B'}, {'id': 2, 'username ': 'C', 'Password': 'B'}] // In the current page, you want to display grid.html}

 

Therefore, the following statement is available. The $ total value and $ data string are constructed by using the method in model. php. Complete a big round and print the results. When printing $ data, if this json item is not the last one, add a comma to create a json array. do not include a comma in the last one, otherwise, the [JavaScript] array definition should end with a comma (click to open the link.

 

 getUserInfoByPaging($start,$limit);$total=$db->getUserTotalNum();$data="";for($i=0;$i
 

 

Jsp users I suggest you print these items directly to the page using Servlet or SSH in a Java file. Use the following statement, for example, HttpServletResponse response = ServletActionContext. getResponse (); to retrieve the Respond object.

 

PrintStream out = new PrintStream (response. getOutputStream (); response. setContentType ("text/html; charSet = UTF-8"); out. print ("print content ");

Aspx can be implemented using respond. write.

 

3. model. php

This is really nothing to say. I have already said in "[php] using the original JavaScript Ajax to design MVC layers for php and be compatible with IE6" (click to open the link. These are some simple php operations on Database code. The query results of the database are stored in a two-dimensional array. Is the port version of XXList in SSH.

Paging query: by querying all the results of the database, paging is performed, and the results of paging are placed in another array and then returned to formSubmit. php. This will surely ensure accurate paging. Do not query Item X based on any id. If the table id is faulty, an inaccurate paging may occur when a user operates databases.

At the same time, normally, only a table is operated here. Therefore, this class is named db. Normally, it should be named user. In this way, the spam framework and team development standards are strictly followed.