Обновить

Работа с данными — 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. Можно использовать хелпер, а можна обычной функцией, без обертки.

Во второй части будет рассмотренно создание формы для редактирования данных, написание контроллера для редактирования и как данные удаляются.
Теги:phpzend frameworkjavascriptextjs
Хабы: Чулан
Рейтинг +5
Количество просмотров 441 Добавить в закладки 17
Комментарии
Комментарии 4

Похожие публикации

JavaScript Developer. Professional
29 марта 202172 500 ₽OTUS
Node.js: серверный JavaScript
5 апреля 202127 000 ₽Loftschool
Комплексное обучение JavaScript
19 апреля 202127 000 ₽Loftschool
Комплексное обучение PHP
19 апреля 202120 000 ₽Loftschool
Backend разработчик на PHP
26 апреля 202150 000 ₽OTUS

Лучшие публикации за сутки