Задача: в List изменить визуализацию элементов. Решение: Все очень просто, 1. Добавляем в наш проект новый mxml, обзовем его, например, myItemRenderer 2. Открываем его код и пишем: | Код |
<?xml version="1.0"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle">
<mx:Label id="firstLabel" text="{data.firstLabel}"/>
<mx:Label id="secondLabel" text="{data.secondLabel}"/>
</mx:HBox>
|
3. У компонента Tree прописываем параметр itemRenderer как myItemRenderer 4. В DataProvider-е для List: | Код |
<mx:XMLList xmlns="" id="treeDataProvider">
<node firstLabel='testFirstLabel' secondLabel='testSecondLabel' />
<node firstLabel='testFirstLabe2' secondLabel='testSecondLabe2' />
</mx:XMLList>
|
Пускаем, смотрим. Работает  Теперь далее... Задача: в Tree изменить отображение элементов. Решение: Тут уже не все так просто. Сделаем замену label-а двумя обычными TextField-ами. Просто заменить не получиться, ибо метод updateDisplayList юзает label проперти и в null его не загонишь, так что просто сделаем ему текст в null. Итак: 1. Создадим в проекте новый as class и обзовем его MyTreeItemRenderer, заэкстендив его от TreeItemRenderer. Добавим пару новых свойств (TextField-ы): | Код |
package
{
import mx.collections.*;
import flash.text.TextField;
public class MyTreeItemRenderer extends TreeItemRenderer
{
protected var firstField:TextField;
protected var secondField:TextField;
public function MyTreeItemRenderer()
{
super();
this.firstField = new TextField();
this.firstField.width = 100;
this.firstField.height = 20;
this.firstField.x = 50;
this.addChild(this.firstField);
this.secondField = new TextField();
this.secondField.width = 100;
this.secondField.height = 20;
this.secondField.x = 130;
this.addChild(this.secondField);
}
public function set firstLabel(value:Object):void
{
this.firstField.text = value.toString();
}
public function set secondLabel(value:Object):void
{
this.secondField.text = value.toString();
}
}
}
|
2. override-им метод updateDisplayList: | Код |
protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
//если есть данные
if (super.data)
{
//получим данные
var treeListData:TreeListData = TreeListData(super.listData);
//сформируем XMLList
var list:XMLList = new XMLList(treeListData.item);
//и установим тексты в field-ы из его параметров
this.firstLabel = list.@firstLabel;
this.secondLabel = list.@secondLabel;
//текст в label убиваем
super.label.text = null;
}
}
|
3. В mxml-е правим для Tree параметр itemRenderer="MyTreeItemRenderer" Уаля! Целиком класс выглядит так: | Код |
package
{
import mx.controls.treeClasses.*;
import mx.collections.*;
import flash.text.TextField;
import mx.core.IDataRenderer;
import flash.xml.XMLNode;
public class MyTreeItemRenderer extends TreeItemRenderer
{
public var firstField:TextField;
public var secondField:TextField;
public function MyTreeItemRenderer()
{
super();
this.firstField = new TextField();
this.firstField.width = 100;
this.firstField.height = 20;
this.firstField.x = 50;
this.addChild(this.firstField);
this.secondField = new TextField();
this.secondField.width = 100;
this.secondField.height = 20;
this.secondField.x = 130;
this.addChild(this.secondField);
}
public function set firstLabel(value:Object):void
{
this.firstField.text = value.toString();
}
public function set secondLabel(value:Object):void
{
this.secondField.text = value.toString();
}
protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
if (super.data)
{
var treeListData:TreeListData = TreeListData(super.listData);
var list:XMLList = new XMLList(treeListData.item);
this.firstLabel = list.@firstLabel;
this.secondLabel = list.@secondLabel;
super.label.text = null;
}
}
}
}
|
mxml: | Код |
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" height="700" width="700">
<mx:XMLList xmlns="" id="treeDataProvider">
<node firstLabel='testFirstLabel' secondLabel='testSecondLabel' >
<node firstLabel='testFirstSSUBLabel' secondLabel='testFirstSSUBLabel' />
</node>
<node firstLabel='testFirstLabe2' secondLabel='testSecondLabe2' />
</mx:XMLList>
<mx:Tree itemRenderer="MyTreeItemRenderer" rowHeight="20" height="200" width="400" dataProvider="{this.treeDataProvider}" >
</mx:Tree>
</mx:Application>
|
|
ItemRenderer, Меняем элеметны в List и Tree 
Загрузка ...
