Pull to refresh

Как я программирую под ExtJS и Zend Framework

Reading time2 min
Views1.3K
Как известно последня версия Zend Framework включает в себя js библиотеки dojo. но, не смотря на это, для работы я выбрал связку Zend Framework + Ext JS.
Почему Zend Framework — в нем отлично реализован принцип MVC, он хорошо документирован, имеет много полезных библиотек, поддерживается Zend — ом. Да, есть недостатки — не самый быстрый, некоторые модули нужно брать у сторонних разработчиков.
Почему ExtJS — также хорошо документировано, имеет много компонентов, отлично реализована оконная модель, Grid — доведен до идеала.
Пока что не буду останавливатся на таких деталях как авторизация, построение интерфейса, подгрузка скриптов.
Ибо тут можно и книгу написать, о всех нюансах.
Вкратце раскажу о трех компонентах, которые чаще необходимы для работы с данными — TreePanel, GridPanel, Form Panel.

image
TreePanel использую в основном для отображения категорий каких либо данных. категории имеют древообразную структуру. для создания дерева использую модель nested sets.
создаю контроллер для работы с TreePanel. в упрощенно виде он выглядит примерно так:
class TreeController extends Zend_Controller_Action {

public function init()
{
if ($this->getRequest()->isXmlHttpRequest()) {
Zend_Controller_Action_HelperBroker::removeHelper('viewRenderer');
}
}

public function indexAction()
{
$parent = $this->getRequest()->getParam('node', 0);
$table = $this->getRequest()->getParam('table', 0);
Zend_Loader::loadClass('Tree');
$tree = new Content();
$res = $tree->getItems($parent, $classname);
echo $res;
}

}


основной момент в работе с Zend Framework с AJAX:
если запрос AJAX — убираем использование вьювера.
if ($this->getRequest()->isXmlHttpRequest()) {
Zend_Controller_Action_HelperBroker::removeHelper('viewRenderer');
}

Создаю модель Tree. в методе getItems($parent, $table) прописую выборку с таблицы $table данных с parent = $parent. возвращаю масив в формате JSON (можна XML конечно, кому как нравится).
формат данных получается примерно такой:
[{"text":"category1","id":"1"},{"text":"category2","id":"2"},{"text":"category3","id":"3"}}]


дальше работаем с ExtJS.
на панеле размещаю дерево.
var categoriesTree = new Ext.tree.TreePanel({
id:'tree',
....
loader: new Ext.tree.TreeLoader({
dataUrl: '/tree/',
baseParams: {
table: 'categories'
}
})
});

var rootNode = new Ext.tree.AsyncTreeNode( {
text: 'Root',
draggable:false,
id: 'root',
expanded:true
})
categoriesTree.setRootNode(rootNode);
rootNode.expand();


примерно код такой. при загрузке странички и отрендеривании дерева, загружаются корневые ветки. по мере необходимости при нажатии на плюсики — подгружаются остальные.
кроме загрузки реализовал добавление/удаление узлов, перетаскивание с ветки на ветку.

аналогично реализовал таблицу GridPanel в паре с контроллером GridController. используется для отображения данных, редактировании порядка, удаления.
для добавления новых данных и для их редактирования использую связку FormPanel + FormController.
Если тема интересна, то продолжу их описание.
Tags:
Hubs:
Total votes 19: ↑12 and ↓7+5
Comments9

Articles