Flexible tree expands and collapses
I created a tree with a custom treeitemrenderer where I added a textbox next to each label. My data provider is ArrayCollection
.
When I enter a value in the input box, I can see the value in order when I expand or collapse the tree with the disclousure arrow. There is a strange issue when I try to expand and collapse the tree from the page mxml
by clicking the button to expand and collapse the tree using the following code.
The problem is when I expand or collapse the tree, the values entered in the input fields appear to be moving.
For example, I entered 15 in input field 1. When I expand and collapse the tree, 15 moves to another input field and moves to another, and then goes back to where it was entered as I continue to expand and collapse the tree. I am still learning Flex. I'm not sure what's going on, it has something to do with ArrayCollection
.
Any help would be greatly appreciated. Thank you.
private function expandTree():void{
for (var i:int = 0; i < thisTree.dataProvider.length; i ++){
thisTree.expandChildrenOf(thisTree.dataProvider[i], true)
}
}
private function collapseTree():void{
for (var i:int = 0; i < thisTree.dataProvider.length; i ++){
thisTree.expandChildrenOf(thisTree.dataProvider[i], false)
}
}
source to share
Flex item handlers return, which causes your data to flow like this. In an item renderer, I usually find it useful to pass data to the bind value object and override the customizer for the data.
[Bindable]
private var myBindableValueObject:MyBindableValueObject;
override public function set data(v:Object):void
{
if(v == data)
return;
myBindableValueObject = v as MyBindableValueObject;
super.data = value;
validateNow();
}
You will need to bind the text and label input properties to the values in the value object. This will ensure that the correct values are displayed in the correct location. Using this approach should eliminate the oddities you are encountering.
source to share
I tried as you suggested, but I don't see any changes. Not sure if I was able to follow your suggestion. Here is the code. Thank.
package
{
import mx.collections.*;
import mx.controls.Label;
import mx.controls.TextInput;
import mx.controls.listClasses.*;
import mx.controls.treeClasses.*;
[Bindable]
public class TestSetupTreeItemRenderer extends TreeItemRenderer {
[Bindable]
public var _numQuestion:TextInput;
private var _numOfQuestionText:Label;
private var _listData:TreeListData;
[Bindable]
public var tItem:TestSetupTreeItem;
public function TestSetupTreeItemRenderer():void {
super();
mouseEnabled = false;
}
override protected function createChildren():void {
super.createChildren();
_numQuestion = new TextInput();
_numQuestion.text = "0"; //default
_numQuestion.width = 45;
_numQuestion.height = 20;
_numQuestion.restrict = "0123456789";
addChild(_numQuestion);
_numOfQuestionText = new Label();
_numOfQuestionText.width = 60;
_numOfQuestionText.height = 22;
addChild(_numOfQuestionText);
}
override public function set data(value:Object):void {
if(value == data)
return;
tItem= value as TestSetupTreeItem;
super.data = value;
validateNow();
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth,unscaledHeight);
if(super.data){
tItem = super.data as TestSetupTreeItem;
this.label.width = 150;
this.label.truncateToFit(null);
this.label.multiline = true;
this.label.wordWrap = true;
var tld:TreeListData = TreeListData(super.listData);
this._numOfQuestionText.text = "of " + tItem.totalQuestionCount;
this._numOfQuestionText.x = 300;
this._numOfQuestionText.y = super.label.y;
this._numQuestion.x = 200;
this._numQuestion.y = super.label.y;
this._numQuestion.editable = true;
tItem.desiredQuestionCount = this._numQuestion.text;
}
}
}
}
source to share