Сегодня речь пойдет о встроенной в Magento возможности для построения древовидных структур. Движок использует такое дерево при построение списка категорий магазина (Catalog->Manage Categories). Для такого построения используется урезанная библиотека Ext и ее дополнительный компонент TreeCheckNode.
Рассмотрим процесс создания такого дерева подробнее.
Первым шагом необходимо в контролере включить загрузку библиотеки ExtJs
public function indexAction() { $this->loadLayout(); // Add out block to content to render $this->_addContent($this->getLayout()->createBlock('codename/adminhtml_blockname')); // Say Magento Load ExtJs $this->getLayout()->getBlock('head')->setCanLoadExtJs(true); $this->renderLayout(); }
Далее переходим к отображению. Категории для нашего дерева мы будем подгружать используя Ajax, поэтому для начала просто определим начальную информацию о дереве
<script type="text/javascript"> var tree; var defaultLoadTreeParams = { animate:false, enableDD:false, containerScroll: true, rootUIProvider: Ext.tree.CheckboxNodeUI, selModel:new Ext.tree.CheckNodeMultiSelectionModel(), rootVisible:false } /** * Function for render new Tree. * @param requestUrl url for get tree information */ function renderNewTree(requestUrl) { if (!requestUrl) { requestUrl = 'treesample'; } defaultLoadTreeParams['loader'] = new Ext.tree.CustomUITreeLoader({ dataUrl: requestUrl, baseAttr: { uiProvider: Ext.tree.CheckboxNodeUI } }); if (tree) { // Clear prev tree version tree.purgeListeners(); tree.el.dom.innerHTML = ''; } tree = new Ext.tree.TreePanel('tree-div', defaultLoadTreeParams); root = new Ext.tree.AsyncTreeNode({ text: 'root', draggable:false, id:'source', uiProvider: Ext.tree.CheckboxNodeUI }); tree.setRootNode(root); tree.render(); root.expand(false, false, function() { if (root.childNodes.length>0) { // Tree Successfull loaded (root node has child). // Show tree container $("tree-div").show($("tree-div")); root.firstChild.expand(false); } else { // Root node don't have child elements // Hide tree container and show some error $("tree-div").hide($("tree-div")); alert("Empty Tree!"); } }); } </script>
Для инициализации дерева необходимо дополнительно создать контейнер с id=”tree-div”
<div id="tree-div"></div>
В дальнейшем при загрузке документа необходимо произвести вызов функции renderNewTree.
Рассмотри формат данных используемый для указания информации о дереве.
$categoryList = array( 0 => array( "text" => "Sample", "id" => 123123, "depth" => 0, "leaf" => false, "children" => array( 0 => array( "text" => "Sample2", "id" => 1231233, "depth" => 1, "leaf" => true ) ) ) ); echo json_encode($categoryList);
Преведенный выше код вернет данные, на основании которых будет сгенерировано просто дерево из 2х элементов – “Sample” и “Sample2″
Ключ “depth” указывает уровень вложености элемента дерева, а ключ “leaf” говорит является ли элемент последним (дословно листом дерева)
Вот что получилось:

На этом я заканчиваю краткий обзор компонета для построения деревьев в Magento. Надеюсь данный материал пригодиться кому то.

Я вот чего не пойму нафига если ты уже используешь Extjs через Jquery или что там prototype показывать див $(“tree-div”).show($(“tree-div”));
Чем тебе Ext.get(“tree-div”) не подходит? зачем ещё одна сторонняя библиотека?
Спасибо за замечание. Там в любом случае подгружается prototype, с которым я немного работал, а вот ext вообще не шарю. Потому Ext используется только для дерева, остальная обработка с помощью prototype.
Здравствуйте.
Прочитал Вашу статью и задумался над материалом, т. к. усиленно пытаюсь разобраться в основах magento.
На сколько я понимаю, для реализации предложенного Вами метода, необходимо создать файл с расширением html по следующему принципу:
Каталог товаров
renderNewTree($_SERVER["REQUEST_URI"]);
ВАШ СКРИПТ
Насколько я прав в своих размышления и как правильно включить загрузку библиотеки ExtJs в контролере?
Заранее спасибо.
Добрый день Евгений.
Я использовал построение дерева для административной части magento. Мне необходимо было произвести отображение дерева для древовидной структуры данный.
Если Вам необходимо произвести отображение подобной структуре на фронтенде, подключить extJs так просто не получится.
В админке он подключается через контроллер $this->getLayout()->getBlock(‘head’)->setCanLoadExtJs(true);
Данные о дереве я получал через ajax запрос (параметр в функции renderNewTree – это адрес обращения для получения содержимого дерева)
А так Вы правильно написали. После загрузки страницы вызвать метод renderNewTree, который производить ajax запрос для получения данных и запуск рендеринга дерева.
Успехов.