If you have multiple 'constraints': 1) fit to renderers, 2) fit inside screen, then you'll have to code it yourself.
________________________________ From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of Justin Winter Sent: Monday, November 26, 2007 3:32 PM To: [email protected] Subject: [flexcomponents] Re: Scrollable Accordion Navigation-Custom List Item Render (re: Scroll Tree Bra hmmm. InvalidateSize doesn't seem to be working for me. I don't think I can use percentages though as I need the parent list to only vertically size to the itemRenderer's height unless the itemRenderer's list has more elements than can be displayed on the stage. Here is how I have things set up: APPLICATION: ---------------------- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; > <!-- ADDITIONAL CODE REMOVED FOR BREVITY --> <mx:List id="navList" width="225" maxHeight="{this.height}"variableRowHeight="true" resizeEffect="Resize" dataProvider="{model.navigationXMLListCol}" labelField="@title" itemRenderer="LabelWithSubList"/> <!-- ADDITIONAL CODE REMOVED FOR BREVITY --> </Application> ITEM RENDERER (LabelWithSubList): ----------------------------------------------------- <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"; xmlns:custom="*" width="190" height="20" creationComplete="creationCompleteHandler(event)"> <mx:CheckBox id="parentItem" label="[EMAIL PROTECTED]" click="changeState(event)" filters="{filtersArray}"/> <mx:states> <mx:State name="expandedState"> <mx:SetProperty target="{this}" name="height" value="{getChildListHeight()}"/> <mx:AddChild position="firstChild"> <custom:ExtendedList id="subChildList" width="100%" y="{parentItem.y + parentItem.height}" borderStyle="none" dataProvider="{xmlListCol}" labelField="@title" /> </mx:AddChild> </mx:State> </mx:states> <mx:Script> <![CDATA[ import mx.collections.XMLListCollection; [Bindable] private var isExpanded:Boolean = false; [Bindable] private var xmlListCol:XMLListCollection; [Bindable] private var parentList:ExtendedList; private function getChildListHeight():int { return xmlListCol.length * 20; } private function creationCompleteHandler(event:*):void { parentList = this.owner as ExtendedList; } private function changeState(event:flash.events.Event) : void { if( event.target.selected ) currentState = "expandedState"; else currentState = ""; } override public function set data(value:Object) : void { if(value) { super.data = value; xmlListCol = new XMLListCollection(value.media); } } ]]> </mx:Script> <mx:transitions> <mx:Transition fromState="*" toState="*"> <mx:Resize target="{this}" /> </mx:Transition> </mx:transitions> </mx:Canvas> DATA SET (small subset): ---------------------------------- <nav> <media title="ABOUT"> <media title="MAKING IT HAPPEN"/> <media title="DANVILLE KENTUCKY"/> </media> <media title="BACKSTAGE"> <media title="OPENING"/> <media title="SLIDESHOW"/> <media title="MULTIMEDIA MEANS"/> <media title="PJ SQUARES"/> </media> <media title="PHOTO PARTICIPANTS"> <media title="PARTICPANT 1"/> <media title="PARTICPANT 2"/> <media title="PARTICPANT 3"/> ... <media title="PARTICPANT 100"/> </media> </nav> SCREEN SHOTS ------------------------ 1. Use Case 1 - The user opens a submenu with only two nodes. The parent list's height should resize to accomodate the child list's height to reveal all child list nodes because there is enough vertical space available. (working for the most part) <http://www.useflashmore.com/flex-as3-scrollable-accordion-menu/1.png> 2. Use Case 2 - The user opens a submenu with more nodes that can display even if the parent list is scaled to 100% of the stage height. Scrollbars should be displayed so the user can navigate to the sub nodes. The parent list should be scaled to the stage height. (via maxHeight?) <http://www.useflashmore.com/flex-as3-scrollable-accordion-menu/2.png> PROBLEMS: 1. Can't get the parent list to fit to the stage height 2. Can't get the child list to fill the available space
