Here's the renderer code and the app file. I used someone else's code to build the data. I will email the entire project in a zip file to flexcoders. the name of the file is TwoLines.zip The problem is, when I add the second line (in CreateChildren()), the label is pushed up away from the icon. I am sure I am doing something stupid. I have included a screen print of the output in the src directory of the .zip file.
Thanks, Libby <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="vertical" > <mx:Script> <![CDATA[ private const treeData:Array = new Array( CompositeTreeDataBuilder.create(), CompositeTreeDataBuilder.create() ); ]]> </mx:Script> <mx:Label text="Selected: {tree.selectedItem.name}" /> <mx:Tree id="tree" itemRenderer="TwoLineTreeItemRenderer" dataProvider="{treeData}" labelField="name" height="100%" width="100%" /> </mx:Application> package { import mx.controls.CheckBox; import mx.controls.TextInput; import mx.controls.treeClasses.TreeItemRenderer; import mx.controls.treeClasses.TreeListData; public class TwoLineTreeItemRenderer extends TreeItemRenderer { private var _labelLineCheckBox:CheckBox; private var _secondLineLabel:TextInput; public function TwoLineTreeItemRenderer() { super(); mouseEnabled = false; } private var ckLabel:String = "CB"; override public function set data(value:Object):void { if(value != null) { super.data = value; } } override protected function createChildren():void { super.createChildren(); createFirstLineCheckBox(); createSecondLineLabel(0,_labelLineCheckBox.y); } override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void { super.updateDisplayList(unscaledWidth, unscaledHeight); if(super.data) { if(TreeListData(super.listData).hasChildren) { _labelLineCheckBox.visible = false; // there is a CB on every branch. don't show the ones not on leaves _secondLineLabel.visible = false; // there is a textInput on every branch. don't show the ones not on leaves } } } override protected function measure():void { super.measure(); measuredHeight = measuredMinHeight = measuredHeight + _labelLineCheckBox.getExplicitOrMeasuredHeight() + getSecondLineLabelHeight(); } private function createFirstLineCheckBox():void { _labelLineCheckBox = new CheckBox(); _labelLineCheckBox.label = ckLabel; _labelLineCheckBox.x = 350; _labelLineCheckBox.width = 100; _labelLineCheckBox.height = 18; addChild(_labelLineCheckBox); } private function createSecondLineLabel(x:int,y:int):void { _secondLineLabel = new TextInput(); _secondLineLabel.text = "Second Line Label"; _secondLineLabel.x = 100; _secondLineLabel.y = _labelLineCheckBox.y + _labelLineCheckBox.getExplicitOrMeasuredHeight() + 15;//label.y + label.height + 5; _secondLineLabel.width = 100; _secondLineLabel.height = 20; _secondLineLabel.editable = false; addChild(_secondLineLabel); } private function getSecondLineLabelHeight():int { if(_secondLineLabel) return _secondLineLabel.getExplicitOrMeasuredHeight(); return 0; } } } --- In flexcoders@yahoogroups.com, Alex Harui <aharui@...> wrote: > > Post your code. > > > On 8/15/12 7:10 AM, "libbychantel" <libbychantel@...> wrote: > > > > > > > Flex 3.x > > I have been trying to construct a Tree Custom ItemRenderer that has basically > 2 lines on the terminal branches. the first line should show the file icon > and the label, and the second line right below the first line should show > another label. It seems simple, yet when I try to do this the top label winds > up being pushed above the file icon, so there is something I am missing here. > > Does anyone know how to do this or better yet can provide me an example that > explains how to do it? > > Thanks, > Libby > > > > > > > -- > Alex Harui > Flex SDK Team > Adobe Systems, Inc. > http://blogs.adobe.com/aharui >
