"ExtJS" Table control grid additions and deletions, using renderer to let the Action column Actioncolumn use text instead of icons

In the "ExtJS" with the background database interaction with the Paged Table component grid query (click the Open link) describes how the grid control is displayed on the page. Plus the addition, deletion, and modification of the data within this control, it's really done. The ordering of this control should add an order BY statement in the database query statement in the background, and the foreground sort can only be sorted on the current page after paging, making no sense. Here is an example of how to ExtJS a Table control grid

I. BASIC OBJECTIVES

Or there is a user table in the database:

Then in the Web page, as shown, the Add, edit, delete buttons can be added to the table control for editing and checking.

Second, the basic idea

The directory structure of this project is as follows:

Third, the production process

1, showdata.php

This page is "ExtJS" with the background database interaction with the page Table component Grid query (click Open link), the reading of the data formsubmit.php, the word has not changed, the data, from the Model.php class read out. and complete the construction of the paging data. Don't repeat it 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 is also not modified, according to the "PHP" using the original Java JavaScript ajax MVC layered design, compatible with IE6 "(Click to open the link) idea, just for the insert Into,delete from, Update, such as no result returned statements added a method, in fact, this file is the user this table business logic.

<?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 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 ("SELECT * from the user order by ID;");        /Here according to the ID arrangement, if need other sort oneself modifies $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;          The Public function modify ($sql) {//For those methods that pass SQL to return no results, generalize to the same class $con =createcon ();          mysql_query ($sql);            Mysql_close ($con);  }}?>

3, grid.html

Front end, although only one grid.html page, but this page is quite grand

(1) First introduce the EXT resources, and then with the "ExtJS" and background database interaction with the page Table component Grid query (click Open link), define the model and according to the Construction data center. The definition here is written in Ext.onready (function () {}) and outside of functions as a global variable.

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
(2) Afterwards is a fairly grand declaration of the Tabular control grid. The "Add" button in the upper right corner, using the ExtJS form technology, this thing in "ExtJS" ExtJS form plug-in and form layout, submission and verification (click Open Link) has been detailed, here no longer repeat. After a while the form processing page is adddata.php.
If you want to use text instead of an icon in the Action column actioncolumn the table control, you should use the renderer renderer to construct the column instead of using a xtype to indicate the action column. You want in the renderer renderer function, which column of data, directly through the record.data["xx", where xx is the above dataindex, and then put you in this column of the construction of things, directly placed in the return value can be. Because the edit hyperlink here requires three parameters to construct the form, so this time using the custom properties of any node within the "JavaScript" body (click the Open link), the Id,username,password, These three parameters are hidden in the custom attribute of the a tag, and are passed to the following onclick processing in the JS function editrow (obj) using Editrow (this). So there are too many arguments in the Editrow in the return value string, which can cause this string to go awry. So use this approach instead.
Ext.onready (function () {Ext.QuickTips.init (); Ext.form.Field.prototype.msgTarget = ' side ';//above these two lines of code, declaring the form error authentication information 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 Datacenter tools:[{//buttons in the upper-right corner construct xtype through Tools: ' button ', Text: ' Add ', listeners: {click:function () {//Click this button to show a form and fill in the 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: ' 95% '}, {fieldlabel: ' Password ', xtype: ' TextField ', Allowblank:false,name: ' Password ', regex:/^[a-za-z]+$/,//Regular expression Regextext: ' No other characters are allowed except English characters! ', Anchor: ' 95% '}],bbar: [{xtype: ' Tbfill '}, {xtype: ' button ', text: ' OK ', 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: ' Off ', listEners: {click:function () {window1.close ();//This windows1 uses the close () Destroy method instead of hide (), because each click will re-declare a Window1 }}}, {xtype: ' Tbfill '}]}), Var window1=ext.create (' Ext.window.Window ', {renderTo:Ext.getBody (), Header:false,bord Er:false,//No Border resizable:false,//Can not be freely resized, default can be Width:400,items:[form1]}); Window1.show ();}}}],columns:[// Then there are the things that each column holds {text: ' id ', dataindex: ' id ', Flex:1},{text: ' username ', Dataindex: ' username ', Flex:1},{text: ' Password ', dataindex: ' Password ', flex:1},{//if you want to make the Action column not an icon, but instead use text to declare the 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= ' DeleteRow (this) ' href= ' javascript:void (0); ' id= ' +record.data[' id ']+ ' > Delete </a> '}}],bbar:{xtype: ' Pagingtoolbar ',///Bottom toolbar is a paging toolbar store:userstore,//according to Userstore data page displayinfo:true//display a total of XX pages, each page shows xx bar of Information});}); 
(3) The following is written in Ext.onready (function () {}), outside of functions editdata (obj) JS function, similarly to the "Add" button in tools, like the listener, constructs a form, only the value of a form is already stored in the column of all the information, To be taken by means of Obj.id,obj.username,obj.password. After a while the form processing page is editdata.php. At the same time, because the ID shown is not available in the domain disabled:true, so you want to declare a hidden domain, otherwise because the HTML form submission, the default is not to disaled:true the contents of the unavailable domain, Editdata.php because of the ID of which item disabled:true cannot get the ID of this parameter, fill a hidden field just fine.
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: ' 95% '},{xtype: ' Hidden ', Name: ' ID ', value:id}, {fieldlabel: ' username ', xtype: ' TextField ', Name: ' username ', Allowblank:false,value:username,anchor: ' 95% '}, {fieldlabel: ' Password ', xtype: ' TextField ', Allowblank: False,name: ' Password ', Value:password,regex:/^[a-za-z]+$/,//Regular expression regextext: ' There must be no other character except English characters! ', Anchor: ' 95% '}],bbar: [{xtype: ' Tbfill '}, {xtype: ' button ', text: ' OK ', 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: ' button ', text: ' Off ', 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,//Can not be freely resized, default can Width:400,items:[form1]}); Window1.show ();};
(4) Deleted JS function Similarly, here no longer repeat. But there is no need for users to fill in anything, so directly through the "ExtJS" ExtJS Ajax (click to open the link) way, let deletedata.php this page to complete the work.
function DeleteRow (obj) {var id=obj.id; Ext.MessageBox.confirm ("Warning", "Are you sure you want to delete it?") 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 timed out or network fault, error number: ' + Response.Status);});}              );     
So the whole grid.html page is this way, the key is all the additions and deletions to change the form after the completion of work, fill a sentence userstore.reload () method, refresh the data center, so that the foreground data center back to the background database to take the numbers, Update the contents of the entire grid by means of Ajax:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
After the various database processing page, nothing to say, is to catch the front desk ExtJS data, the use of PHP to MySQL operation, and then this page print a good response to the JSON,EXTJS through its own AJAX mechanism, read this string, will be automatically processed. With the help of the front desk ExtJS data, of course, if you really take to open the system, but also to prevent SQL injection, here is only a small example, do not write so complex.
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 ': ' Add success! '}";? >
5, editdata.php
To modify the data back-end 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
Delete the data back-end page, in fact, generally do not do this, it is fair to say, for the database of all deleted data operations are marked Delete, then if the emergency situation or need to analyze the situation, you can search records. Just like the surveillance video, deleting data directly, is too amateur, but here is just a small example, do not care about these details!
Since this is ExtJS ajax processing, not a form, print out a normal string!
<?php$id=$_request["id"];include_once ("model.php"), $userClass =new userclass (); $userClass->modify ("delete From user where id= ". $id."; "); echo "deleted successfully! ";? >


 ExtJS Table control Grid's additions and deletions, using renderer to let the Action column Actioncolumn use text instead of icons