I think there is probably code in the default TreeItemRenderer that centers the folder or branch icon. I think you can add code in your updateDisplayList override to reposition the icon
On 8/16/12 8:10 AM, "libbychantel" <libbychan...@yahoo.com> wrote: the issue I am not understanding here is, when I add the second line label, this causes all labels including the root label, to be pushed up so that they do not align with their icon. there is something I am not understanding as to how this works. I add the checkbox to the leaf branch at y=0 and that works ok - it (checkbox) aligns with the label and icon for the leaf. Then I add the second line at checkbox.y + checkbox.height + 15px line spacing. Now all the labels are pushed up above their icons, about the height of the new label I added. what am I missing here that is causing the labels to no longer be aligned with their icons? --- In flexcoders@yahoogroups.com <mailto:flexcoders%40yahoogroups.com> , Alex Harui <aharui@...> wrote: > > Looks like you want a 15 pixel gap (you are adding 15 in updateDisplayList) > but that is not accounted for in the measure() method. > > > On 8/15/12 4:18 PM, "libbychantel" <libbychantel@...> wrote: > > > > > > > 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 <mailto:flexcoders%40yahoogroups.com> > <mailto:flexcoders%40yahoogroups.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 > > > > > > > > > -- > Alex Harui > Flex SDK Team > Adobe Systems, Inc. > http://blogs.adobe.com/aharui > -- Alex Harui Flex SDK Team Adobe Systems, Inc. http://blogs.adobe.com/aharui
