AjaxTips

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

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

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

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

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

myTree = new Ext.tree.TreePanel ({
		width: 225,
		rootVisible:false,
		root: new Ext.tree.AsyncTreeNode({
			expanded: true,
			text: 'Some Tree'
		}),
		dataUrl: '/load_json_data.php'
	});
 

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

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

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

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

Ну а теперь к сути рассматриваемого вопроса. Для создания графического представления дерева служит класс TreePanel (Ext.tree.TreePanel). Который в качестве аргументов принимает следующие параметры (отмечу, что на самом деле параметров гораздо больше):

• width — ширина панели
• rootVisible — показывать «корень» дерева или нет
• root — корень дерева, определяется объектами типа TreeNode. В нашем примере AsyncTreeNode — это асинхронное дерево, которая позволяет дозагрузить «листья» дерева по мере раскрытия его «узлов»
• dataUrl — адрес по которому запрашивать данные

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

		$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 — параметр указаывающий на то является ли данный элемент «листом» дерева
  
  После совмещения этих двух частей мы получаем замечательное дерево.