Flex, open tree nodes.Открываем узлы дерева. Part 1

Open tree node. Part 1. Открытие одного из узлов дерева при нажатии на кнопку. Открывает один узел с параметрами, которые были введены в текстовые поля

Очень часто необходимо в приложениях использовать компонент Tree и нужно открывать его узлы. Представлю серию уроков для манипуляции с узлами дерева. В первом уроке будем использовать стандартный компонент Tree и в качестве DataProvider inline XML.

...< mx:XML id="treeProvider" xmlns="" >
< productgroup label='main group' id='0' price='0' >
< node label='Fantasy' id='0' price='0' >
< node label='The Lord of the rings' id='1' price='20'/ >
< node label='Alien' id='1' price='30'/ >
< node label='Star wars' id='1' price='40'/ >
< /node>...

Наш XML содержит в себе жанры фильмов, поджанры и собственно сами фильмы. Его мы будем использовать в качестве DataProvider. Узел содержит аттрибуты label (тут пишем название жанра или фильма), id (просто идентификатор, будем использовать его для отображения узлов дерева в компоненте) и price (это цена).

В дереве параметр showRoot ставим false, labelFunction назначаем функцию renderLabel (она будет нам отображать названия узлов дерева).

...< mx:Tree x="10" y="10" height="390" width="218" id="treeList" labelFunction="renderLabel" showRoot="false" >< /mx:Tree > ...

Теперь при событии приложения creationComplete инициализируем наше дерево функцией initTree(). Эта функция просто назначает DataProvider дерева.

...treeList.dataProvider = treeProvider;...

renderLabel(item:Object):String - отображает названия узлов дерева, возвращает строку, которая будет отображена

...var str:String;
if(item.@id == 1){
str = item.@label + ' - ' + item.@price + '$';
}else{
str = item.@label;
}
return str;...

При нажатии на кнопку open node вызываем функцию openTree(event:MouseEvent).

В ней сначала ищем нужный узел - findNodeById(), а expandParents(xmlNode:XML) открывает найденный узел и всех его родителей.

Эти строчки

...indexRenderer = treeList.itemToItemRenderer(indexNode);
if(indexRenderer != null)
treeList.selectedIndex = treeList.itemRendererToIndex(indexRenderer);...

выделяют выбранный узел.

Исходники - source, приложение - application