Пятница , Июль 21 2017

ExtJS. Создаем дерево на основе JSON Data

ExtJS

С развитием идей RIA (Rich Internet Application) все чаще стали появляться задачи создать не какой-нибудь там веб-сайт, а вполне себе самостоятельное веб-приложение. Но вот панель управления для какой-либо задачи просят точно. Основой при выполнении подобных заказов служит построение интерфейса (по возможности приятной и дружелюбной наружности). Почему-то заказчику не важен, на красивый во всех отношениях, код, а вот на окошечки с меню нет.

Я решил использовать в своих проектах фреймворк ExtJS. Получив при это сразу два плюса: первый — это симпатичный интерфейс, а второй это все тот же симпатичный интерфейс, а так же унификация под один дизайн всех проектов.

Давайте разберем какой-нибудь конкретный пример. Первое, что мне очень пригодилось при создании проектов — это возможность строить замечательные древовидные меню средствами ExtJS. Делается все быстро, просто и можно даже сказать изящно.

Задача состоит из двух подзадач: первое — это построение графического отображения дерева (часть которой занимает ExtJS), второе — это предоставление данных (часть которой занимается php-скрипт на сервере).

Вот как выглядит первая часть: my Tree = new Ext.tree.TreePanel ({ width: 225, root Visible:false, root: new Ext.tree.AsyncTreeNode({ expanded: true, text: ‘Some Tree’

}), data Url: ‘/load_json_data.php’

});

Конечно, пример очень упрощен. Более того, этого всего лишь часть скрипта, которая отвечает за создание дерева. Для реального проекта, этого будет маловато. Но для данной статьи, приведенного примера будет достаточно.

Попытаемся разобраться, что происходит в этом куске кода.

Во-первых, для реализации подобия Namespace на JS используется объект с именем Ext. Все остальные классы являются частью этого объекта. Таким образом разработчики подключая библиотеки ExtJS к своему проекту могут не волноваться, что ExtJS заменит уже существующий класс проекта.

Во-вторых, практически все классы в ExtJS конфигурируются с помощью конфигурационного объекта, это позволяет создавать классы с очень большим количеством параметров, без ухудшения читабельности кода.

Ну а теперь к сути рассматриваемого вопроса. Для создания графического представления дерева служит класс TreePanel (Ext.tree.TreePanel). Который в качестве аргументов принимает следующие параметры (отмечу, что на самом деле параметров гораздо больше): width — ширина панели root Visible — показывать «корень» дерева или нет root — корень дерева, определяется объектами типа TreeNode. В нашем примере AsyncTreeNode — это асинхронное дерево, которая позволяет загрузить «листья» дерева по мере раскрытия его «узлов» data Url — адрес по которому запрашивать данные

Теперь о том, как выглядит вторая часть:

$sampleArr = array( id=>1, ‘text’=>»Node 1″, leaf=>false, children=>array( array(id=>2, «text»=>»Child 1», leaf=>true), array(id=>3, «text»=>»Child 2», leaf=>true))); echo json_encode($sampleArr);

Здесь совсем просто. json_encode переводит PHP-массив в JSON формат. Для того, чтобы ExtJS мог построить отображение дерева массив должен содержать следующие поля: id — идентификатор узла text — отображаемый для узла текст children — потомки узла (каждый потомок — отдельный массив с точно такими же полями) leaf — параметр указывающий на то является ли данный элемент «листом» дерева

После совмещения этих двух частей мы получаем замечательное дерево.

Смотрите также

Грабли от Google AdSense лучше обойти

Многие веб-мастера начиная работу с Google AdSense, не до конца изучают все ее возможности, а …

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *