StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow do I change the appearance of nodes in a Tree control in Flex using an extended TreeItemRenderer?
text
Body
copied!<p>I'm using a tree control that I want to customize. The data items in the tree's <code>dataProvider</code> have a property <code>name</code> that should be used for labeling the node, and a property <code>type</code> that should be used to select one of several embedded images for use as an icon. The simplest way to do this is by using the <code>labelField</code> and <code>iconFunction</code> properties. </p> <p>However, I wanted to get started with item renderers and open the door for adding more complex customization later, so I tried making my own item renderer. I extended the <code>TreeItemRenderer</code> class as follows and used it in my tree control:</p> <pre><code>class DirectoryItemRenderer extends TreeItemRenderer { [Embed("assets/directory/DefaultIcon.png")] private static var _DEFAULT_ICON:Class; // ... some more icons ... override public function set data(value:Object):void { super.data = value; // let the base class take care of everything I didn't think of if (value is Node) { // only handle the data if it's our own node class switch ((value as Node).type) { // ... some case clauses ... default: this._vSetIcon(_DEFAULT_ICON); } this.label.text = (value as Node).name; } } private function _vSetIcon(icon:Class):void { if (null != this.icon && this.contains(this.icon)) { this.removeChild(this.icon); } this.icon = new icon(); this.addChild(this.icon); this.invalidateDisplayList(); } } </code></pre> <p>This code has no effect whatsoever, icon and label in the tree control remain at their defaults. Using <code>trace()</code>, I verified that my code is actually executed. What did I do wrong?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload