Работа с данными — ExtJS и Zend Framework, часть 1

В этом топике рассказываю как можно работать с компонентами javascript фреймворка ExtJS и php Zend Framework на примере редактирования некоторого контента в таблице БД.
Для редактирования списка элементов контента будем использовать компонент ExtJS GridPanel, для отдельного экземпляра — FormPanel.
Обзор расчитан на людей, которые знают основы роботы с указанными фреймворками, я не буду останавливаться на некоторых подробностях, как, например, создание соединения с БД, написание загрузчика.
Для разработки использовал ExtJS 3.0, Zend Framework 1.8.1.

БД

Для начала создаем таблицу в БД.

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

В данном примере это будет лента новостей, в таблице предусмотренны поля — заголовок, дата, короткий и полный текст.

GridPanel

Создание интерфейса для работы с данными с помощью библиотеки Zend Framework.
Создаем новую html страницу. Подключаем все что нужно, css, ExtJS.

1. var record = Ext.data.Record.create([
2. {name: 'id', type: 'int'},
3. {name: 'title'},
4. {name: 'createdate', type: 'date', dateFormat: 'Y-m-d 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/Y H: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();

Комментарии к коду:
Создание записи с определением нужных полей. Названия и форматы должны соответствовать полям в таблице БД (1-5). Указываем url контроллера, который будет загружать данные (/grid/grid/). В result будут находиться записи таблицы. А для возможности навигации по страницах в totalCount необходимо указать общее колличество записей. Для постраничной навигации в библиотеках ExtJS предусмотренн компонент Ext.PagingToolbar (16-22). Укажем, что на странице будет выводиться 10 записей.
Рендер для даты — отобразим ее в более удобном для просмотра формате (23-25).
В тулбар нужно добавить кнопки для добавления, редактирования и удаления контента (48-61).
Добавил еще обработчик для двойного клика на запись в таблице. Неудобно выделять контент, а потом нажимать на кнопку для его редактирования (64).
Выводится таблица в окне (65-73). И наконец, загружаем данные в таблицу (74).

В результате должно получиться примерно такое.

GridController

Преходим к php и создаем контроллер, который будет взаимодействовать с клиентской частью.

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

Создадим модель, в нее я добавил один метод, который возвращает общее количество записей в таблице (не нашел в фреймворке стандартной функции, которая это делает).

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. }

Метод для контроллера Grid, который будет загружать даные в таблицу.

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. }

В методе находим общее колличество записей и выбираем страницу. При постраничной навигации также в качестве параметров будут передаваться значения start и limit. Формируем массив с общим количеством элементов и данными и конвертируем его в формат JSON. Можно использовать хелпер, а можна обычной функцией, без обертки.

Во второй части будет рассмотренно создание формы для редактирования данных, написание контроллера для редактирования и как данные удаляются.