Work with data - ExtJS and Zend Framework, part 1

In this topic I tell you how to work with the javascript components of the ExtJS framework and the php Zend Framework using the example of editing some content in the database table.
To edit the list of content items we will use the ExtJS GridPanel component, for a separate instance - the FormPanel.
The review is designed for people who know the basics of robots with the specified frameworks, I will not dwell on some details, such as creating a database connection, writing a loader.
For development I used ExtJS 3.0, Zend Framework 1.8.1.

DB

To begin with we create the table in a DB.

1. CREATE TABLE `articles` ( `id` int ( 11 ) NOT NULL AUTO_INCREMENT , `title` varchar ( 255 ) , `shorttext` text , `createdate` datetime , `text` text , PRIMARY KEY ( `id` ) ) ;
2. CREATE TABLE `articles` ( `id` int ( 11 ) NOT NULL AUTO_INCREMENT , `title` varchar ( 255 ) , `shorttext` text , `createdate` datetime , `text` text , PRIMARY KEY ( `id` ) ) ;
3. CREATE TABLE `articles` ( `id` int ( 11 ) NOT NULL AUTO_INCREMENT , `title` varchar ( 255 ) , `shorttext` text , `createdate` datetime , `text` text , PRIMARY KEY ( `id` ) ) ;
4. CREATE TABLE `articles` ( `id` int ( 11 ) NOT NULL AUTO_INCREMENT , `title` varchar ( 255 ) , `shorttext` text , `createdate` datetime , `text` text , PRIMARY KEY ( `id` ) ) ;
5. CREATE TABLE `articles` ( `id` int ( 11 ) NOT NULL AUTO_INCREMENT , `title` varchar ( 255 ) , `shorttext` text , `createdate` datetime , `text` text , PRIMARY KEY ( `id` ) ) ;
6. CREATE TABLE `articles` ( `id` int ( 11 ) NOT NULL AUTO_INCREMENT , `title` varchar ( 255 ) , `shorttext` text , `createdate` datetime , `text` text , PRIMARY KEY ( `id` ) ) ;
7. CREATE TABLE `articles` ( `id` int ( 11 ) NOT NULL AUTO_INCREMENT , `title` varchar ( 255 ) , `shorttext` text , `createdate` datetime , `text` text , PRIMARY KEY ( `id` ) ) ;
8. CREATE TABLE `articles` ( `id` int ( 11 ) NOT NULL AUTO_INCREMENT , `title` varchar ( 255 ) , `shorttext` text , `createdate` datetime , `text` text , PRIMARY KEY ( `id` ) ) ;

In this example, it will be a news feed, the table provides for the fields - title, date, short and full text.

GridPanel

Creating an interface for working with data using the Zend Framework library.
Create a new html page. Connect all you need, css, ExtJS.

1. var record = Ext. data . Record . create ( [
2. { name : 'id' , type : 'int' } ,
3. { name : 'title' } ,
4. { name : 'createdate' , type : 'date' , dateFormat : 'Ymd h: i: s' } ,
5. ] ) ;
6. var ds = new Ext. data . Store ( {
7. remoteSort : false ,
8. proxy : new Ext. data . HttpProxy ( {
9. url : '/ grid / grid /'
10. } )
11. reader : new Ext. data . JsonReader ( {
12. root : 'result' ,
13. totalProperty : 'totalCount'
14. } , record )
15. } ) ;
16. paddingBar = new Ext. PagingToolbar ( {
17. pageSize : 10 ,
18. store : ds ,
19. displayInfo : true
20. displayMsg : 'Displaying topics {0} - {1} of {2}' ,
21. emptyMsg : "No topics to display"
22. } ) ;
23. var renderDate = function ( value , p , record ) {
24. return value. format ( "j / n / YH: i: s" ) ;
25. } ;
26. var grid = new Ext. grid . GridPanel ( {
27. store : ds ,
28. trackMouseOver : false ,
29. loadMask : true
30. columns : [ {
31. id : 'id' ,
32. header : "Id" ,
33. dataIndex : 'id' ,
34. width : 40 ,
35. sortable : true
36. } , {
37. header : "Title" ,
38. dataIndex : 'title' ,
39. width : 300 ,
40. sortable : true
41. } , {
42. header : "Createdate" ,
43. dataIndex : 'createdate' ,
44. width : 200 ,
45. renderer : renderDate ,
46. sortable : true
47. } ] ,
48. tbar : [
49. new Ext. Button ( {
50. text : 'New' ,
51. handler : addRecord
52. } )
53. new Ext. Button ( {
54. text : 'Edit' ,
55. handler : editRecord
56. } )
57. new Ext. Button ( {
58. text : 'Delete' ,
59. handler : deleteRecords
60. } )
61. ] ,
62. bbar : paddingBar
63. } ) ;
64. grid. on ( "rowdblclick" , editRecord ) ;
65. var window = new Ext. Window ( {
66. id : 'example-window' ,
67. title : "Grid Example" ,
68. layout : 'fit' ,
69. width : 800 ,
70. height : 400 ,
71. items : [ grid ]
72. } ) ;
73. window. show ( ) ;
74. grid. getStore ( ) . load ( ) ;

Comments on the code:
Create an entry with the definition of the desired fields. Names and formats should correspond to the fields in the database table (1-5). Specify the url of the controller that will load the data (/ grid / grid /). The result will contain the table entries. And to be able to navigate through the pages in totalCount, you must specify the total number of records. For page-by-page navigation in ExtJS libraries, the Ext.PagingToolbar component (16-22) is provided. We indicate that the page will display 10 entries.
Render for the date - we will display it in a more convenient for viewing format (23-25).
In the toolbar you need to add buttons to add, edit and delete content (48-61).
Added another handler for double clicking on a record in the table. It is inconvenient to select content, and then click on the button to edit it (64).
Displays the table in the window (65-73). Finally, we load the data into a table (74).
')
The result should be something like this.

Gridcontroller

We turn to php and create a controller that will interact with the client part.

1. class GridController extends Zend_Controller_Action
2. {
3. ...
4. }

Let's create a model, I added one method to it that returns the total number of records in the table (I did not find the standard function in the framework that does this).

1. class Grid extends Zend_Db_Table_Abstract
2. {
3. public function getCountRows ( )
4. {
5. $ select = $ this -> select ( ) -> from ( array ( 'p' => $ this -> _name ) , array ( 'c' => 'COUNT (*)' ) ) ;
6. $ stmt = $ select -> query ( ) ;
7. $ result = $ stmt -> fetchAll ( ) ;
8. return $ result [ 0 ] [ 0 ] ;
9. }
10. }

A method for the Grid controller that will load data into the table.

1. public function gridAction ( )
2. {
3. $ this -> _helper -> viewRenderer -> setNoRender ( ) ;
4. require_once 'Grid.php' ;
5. $ grid = new Grid ( array ( 'name' => 'articles' ) ) ;
6. $ totalCount = $ grid -> getCountRows ( ) ;
7. $ where = null ;
8. $ order = "id" ;
9. $ limit = $ this -> getRequest ( ) -> getParam ( 'limit' , 5 ) ;
10. $ start = $ this -> getRequest ( ) -> getParam ( 'start' , 0 ) ;
11. $ rows = $ grid -> fetchAll ( $ where , $ order , $ limit , $ start ) ;
12. $ data = array (
13. 'totalCount' => $ totalCount ,
14. 'result' => $ rows -> toArray ( )
15. ) ;
16. echo json_encode ( $ data ) ;
17. }

In the method we find the total number of records and select the page. During pagination, the values ​​of start and limit will also be passed as parameters. We form an array with the total number of elements and data and convert it into JSON format. You can use a helper, and you can use a normal function, without a wrapper.

In the second part, the creation of a form for editing data, writing a controller for editing and how data is deleted will be considered.