[ExtJs] adds, deletes, modifies, and queries the table control Grid, and uses renderer to use text rather than icons for the actioncolumn of the operation column. extjsactioncolumn

[ExtJs] adds, deletes, modifies, and queries the table control Grid, and uses renderer to use text rather than icons for the actioncolumn of the operation column. extjsactioncolumn

In the query of grid, a paging table component that interacts with the background database in ExtJs (click to open the link), this article describes how the Grid control is displayed by page. In addition, adding, deleting, and modifying the data in the control is a success. To sort the control, add an order by statement to the database query statement in the background. The order by statement in the foreground can only sort the current page after the page is displayed, which makes no sense. The following example shows how to add, delete, modify, and query the table control Grid of ExtJs.

I. Basic Objectives

Or there is a user table in the database:

Then, in the webpage, as shown in, add, edit, and delete buttons can be used to add, delete, modify, and query the table control.

Ii. Basic Ideas

The directory structure of this project is as follows:

Iii. Production Process

1. showData. php

This page is the formSubmit used to read data in [ExtJs] query of grid, a paging table component that interacts with the background database (click to open the link. php, the field is not changed, and the data is taken from the model. php class. Complete the construction of paging data. I will not go into details here.

<?php$start=$_REQUEST["start"];$limit=$_REQUEST["limit"];include_once("model.php");$userClass=new userClass();$user=$userClass->getUserInfoByPaging($start,$limit);$total=$userClass->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}]}";?>

2. model. php

This page has not been modified yet. According to the idea of [php] using the original JavaScript Ajax to design MVC layers for php and compatible with IE6 (click to open the link), it is only for insert, delete from, update, and other statements that do not return results add another method. In fact, this file is the business logic of the user table.

<? Php function createCon () {// The database address is localhost: 3306, the database username (Item 2) is root, and the database password (item 3) is root $ con = mysql_connect ("localhost", "root", "root"); if (! $ Con) {die ("connection failed! ") ;}// Test Database mysql_select_db (" test ", $ con); // prevent garbled mysql_query (" set names utf8; "); return $ con ;} class userClass {public function getUserTotalNum () {$ con = createCon (); $ result = mysql_query ("select count (*) as total from user ;"); $ row = mysql_fetch_array ($ result); mysql_close ($ con); return $ row ['Total'];} public function getUserInfoByPaging ($ start, $ limit) {$ con = createCon (); $ result = mysql_query ("sel Ect * from user order by id; "); // sort by id here. Modify $ 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;} p Ublic function modify ($ SQL) {// For methods that pass SQL statements and do not return results, sum them into the same class $ con = createCon (); mysql_query ($ SQL ); mysql_close ($ con) ;}}?>

32.16grid.html

Although there is only one grid.html page at the front end, this page is quite ambitious.

(1) first introduce Ext resources, and then use the same method as [ExtJs] for querying the grid with a paging table component that interacts with the background database (click to open the link, first, define the model and construct a data center. The definition here is written in Ext. onReady (function () {}); outside of the function as a global variable.

<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> 

(2) The subsequent declaration of a fairly ambitious table control Grid. The "add" button in the upper-right corner uses the form Technology of ExtJs. This is the form plug-in and form layout, submission and verification of ExtJs in [ExtJs] (click to open the link) I have already discussed it in detail. I will not go into details here. After a while, the form processing page is addData. php.
If you want to use text rather than icons in the actioncolumn of the operation column in the table control, you should use the renderer to construct this column instead of specifying this column as an operation column with an xtype. Which column of data you want in the renderer function of the renderer directly uses record. data ["xx"], where xx is the dataIndex above, and then put the constructor in this column directly in the return value. The Edit hyperlink here requires three parameters to construct the form. Therefore, this time, we use "Custom Attributes of any node in the [JavaScript] body" (click to open the link) the id, username, And password parameters are hidden in the Custom Attributes of tag a, using editRow (this ), it is passed to the onclick processing JS function editRow (obj. Therefore, if too many parameters are written in the editRow of the returned string, the string will be disordered. Therefore, this method is used.

Ext. onReady (function () {Ext. quickTips. init (); Ext. form. field. prototype. msgTarget = 'day'; // the above two lines of code declare the form error verification information 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 tools: [{// the buttons in the upper-right corner use tools to construct xtype: 'click ', text: 'add', listeners: {click: function () {// click this button to display a form and add data to the user. Var form1 = Ext. create ('ext. form. panel ', {width: 400, method: 'post', layout: 'anchor', title: 'edit', items: [{fieldLabel: 'username', xtype: 'textfield', name: 'username', allowBlank: false, anchor: '000000'}, {fieldLabel: 'Password', xtype: 'textfield', allowBlank: false, name: 'Password', regex:/^ [A-Za-z] + $/, // Regular Expression regexText: 'except for English characters, no other characters are allowed! ', Anchor: '20140901'}], bbar: [{xtype: 'tbfill'}, {xtype: 'call', text: 'true', disabled: true, formBind: true, listeners: {click: function () {var thisForm = form1.getForm (); thisForm. submit ({url: "addData. php ", success: function (form, action) {userStore. reload (); window1.close (); Ext. msg. alert ('success', action. result. msg) ;}}}},{ xtype: 'button ', text: 'close', listeners: {click: function () {window1.close (); // here, windows1 uses the close () destroy method instead of hide (), because a window1 }},{ xtype: 'tbfill'}]} is re-declared every time you click it. var window1 = Ext. create ('ext. window. window ', {renderTo: Ext. getBody (), header: false, border: false, // no border resizable: false, // The size cannot be adjusted freely. The default value is width: 400, and items: [form1]}); window1.show () ;}}], columns: [// What is stored in each column {text: 'id', dataIndex: 'id', flex: 1}, {text: 'username', dataIndex: 'username', flex: 1}, {text: 'Password', dataIndex: 'Password ', flex: 1}, {// if you want to use text instead of icons for the Operation column, declare text: 'operation', flex: 1, renderer: function (value, cellmeta, record, rowIndex, columnIndex, store) {return "<a onclick = 'editrow (this) 'href = 'javascript: void (0); 'id =" + record. data ["id"] + "username =" + record. data ["username"] + "password =" + record. data ["password"] + "> edit </a> <a onclick = 'delimiterow (this) 'href = 'javascript: void (0 ); 'id = "+ record. data ["id"] + "> Delete </a>"}], bbar: {xtype: 'pagingtoolbar', // The toolbar at the bottom is the paging toolbar store: userStore, // display displayInfo by PAGE according to userStore data: true // display XX pages in total, with XX information displayed on each page }});});
(3) It is written in Ext. onReady (function () {}); The editData (obj) JS function outside of the function, and construct a form like the listener of the "add" button in tools, only the value of a form already stores all the information of the modified column. id, obj. username, obj. password. The form processing page is editData. php. At the same time, because the displayed id is the unavailable domain disabled: true, you must declare another hidden domain. Otherwise, because HTML forms are submitted, disaled is disabled by default: true: the content of the unavailable domain is replaced by editData. because the disabled: true parameter of the id does not match the id parameter, php just fills in the hidden domain.


Function editRow (obj) {var id = obj. id; var username = obj. username; var password = obj. password; var form1 = Ext. create ('ext. form. panel ', {width: 400, method: 'post', layout: 'anchor', title: 'edit', items: [{fieldLabel: 'id', xtype: 'textfield', disabled: true, value: id, anchor: '000000'}, {xtype: 'hided', name: 'id', value: id}, {fieldLabel: 'username', xtype: 'textfield', name: 'username', allowBlank: false, value: username, Chor: '000000'}, {fieldLabel: 'Password', xtype: 'textfield', allowBlank: false, name: 'Password', value: password, regex: // ^ [A-Za-z] + $/, // Regular Expression regexText: 'No other than English characters! ', Anchor: '20140901'}], bbar: [{xtype: 'tbfill'}, {xtype: 'call', text: 'true', disabled: true, formBind: true, listeners: {click: function () {var thisForm = form1.getForm (); thisForm. submit ({url: "editData. php ", success: function (form, action) {userStore. reload (); window1.close (); Ext. msg. alert ('success', action. result. msg) ;}}}},{ xtype: 'call', text: 'close', listeners: {click: function () {window1.close () ;}}, {xtype: 'tbfill'}]}); var window1 = Ext. create ('ext. window. window ', {renderTo: Ext. getBody (), header: false, border: false, // no border resizable: false, // The size cannot be adjusted freely. The default value is width: 400, and items: [form1]}); window1.show ();};
(4) The same is true for the deleted Js functions. I will not repeat them here. You do not need to enter anything here. Therefore, you can use [ExtJs] ExtJs Ajax (click to open the link) to complete the deleteData. php page.


Function deleteRow (obj) {var id = obj. id; Ext. MessageBox. confirm ("warning", "Are you sure you want to delete it? The change operation cannot be undone! ", Function (btn) {if (btn = 'yes') {Ext. ajax. request ({url: 'deletedata. php ', params: {id: id}, method: 'post', success: function (response, options) {Ext. messageBox. alert ('success', response. responseText); userStore. reload () ;}, failure: function (response, options) {Ext. messageBox. alert ('failed', 'request timeout or network failure, error code: '+ response. status );}});}});}

The whole grid.html page looks like this. The key is to add, delete, modify, and query userStore after all the forms are completed. reload () method, refresh the data center, let the data center at the front end fetch numbers from the background database, and update the content of the entire Grid through Ajax:

<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> 

Next, There will be various database processing pages. There is nothing to say, it is to catch data from ExtJs at the front end, use php to operate Mysql, and then print the response Json on this page, extJs reads this string through its own Ajax mechanism and will automatically process it. Data is sent from ExtJs at the front end. Of course, if the system is actually used, you also need to prevent SQL injection. Here is just a small example, so don't write it so complicated.
4. addData. php
Insert data back-end page

<? Php $ username = $ _ REQUEST ["username"]; $ password = $ _ REQUEST ["password"]; include_once ("model. php "); $ userClass = new userClass (); $ userClass-> modify (" insert into user (username, password) values ('". $ username. "','". $ password. "');"); echo "{'success': true, 'msg ':' added successfully! '} ";?>
5. editData. php

Modify data backend page

<? Php $ id = $ _ REQUEST ["id"]; $ username = $ _ REQUEST ["username"]; $ password = $ _ REQUEST ["password"]; include_once ("model. php "); $ userClass = new userClass (); $ userClass-> modify (" update user set username = '". $ username. "'where id = ". $ id. ";"); $ userClass-> modify ("update user set password = '". $ password. "'where id = ". $ id. ";"); echo "{'success': true, 'msg ':' modified successfully! '} ";?>
6. deleteData. php

Deleting the data backend page is generally not the case. It is reasonable to say that all operations to delete data in the database are marked as deleted. In case of an emergency or data analysis, review records. Just like monitoring videos, it's a waste of time to delete data directly. But here is just a small example. Don't care about these details!
This is the Ajax processing of ExtJs, not the form, so print out a common string!

<? Php $ id = $ _ REQUEST ["id"]; include_once ("model. php "); $ userClass = new userClass (); $ userClass-> modify (" delete from user where id = ". $ id. ";"); echo "deleted successfully! ";?>