How I program under ExtJS and Zend Framework

As you know, the latest version of Zend Framework includes the dojo js library. but, in spite of this, for the work I chose a bunch of Zend Framework + Ext JS.
Why is Zend Framework - the MVC principle is perfectly implemented in it, it is well documented, has many useful libraries, Zend is supported. Yes, there are drawbacks - not the fastest, some modules need to be taken from third-party developers.
Why ExtJS is also well documented, has many components, the window model is perfectly implemented, the Grid is brought to the ideal.
So far I will not dwell on such details as authorization, building the interface, loading scripts.
For here you can write a book about all the nuances.
Briefly I will tell about three components that are more often necessary for working with data - TreePanel, GridPanel, Form Panel.


TreePanel is mainly used to display categories of any data. categories have a woody structure. To create a tree I use the nested sets model.
I create a controller to work with TreePanel. in simplified form, it looks like this:
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;
}

}


The main point in working with the Zend Framework with AJAX:
if the request is AJAX, we remove the use of the viewer.
if ($this->getRequest()->isXmlHttpRequest()) {
Zend_Controller_Action_HelperBroker::removeHelper('viewRenderer');
}

Create a tree model. in the getItems method ($ parent, $ table) I will prefetch a sample from the table $ table data with parent = $ parent. I return the array in JSON format (XML is possible, of course, as you like).
The data format is approximately as follows:
[{"text":"category1","id":"1"},{"text":"category2","id":"2"},{"text":"category3","id":"3"}}]


we work further with ExtJS.
I place a tree on the panel.
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();


something like this. when loading a page and rendering a tree, root branches are loaded. As needed, when you click on the pluses, the rest are loaded.
In addition to loading, it implemented adding / deleting nodes, dragging from branch to branch.
')
similarly implemented the GridPanel table together with the GridController controller. used to display data, edit order, delete.
To add new data and edit it, use the FormPanel + FormController combination.
If the topic is interesting, then I will continue their description.