troubleshooting Question

In Flex, how can I have variable/different row heights for the <mx:TileList> container?

Avatar of robbersrow
robbersrow asked on
Web ApplicationsApache Flex
9 Comments1 Solution3722 ViewsLast Modified:
I am dynamically populating a TileList with data from a database.  There are multiple rows in the TileList, but each row needs to be a different height depending on the data that is populated, and the row height needs to adjust dynamically to that data.  Is it possible to do this?  I tried setting the "variableRowHeight" property on the TileList, but apparently that does not apply to the TileList control (or at least it does not seem to work).
<mx:TileList width="100%" height="100%" fontFamily="Times New Roman" color="#000000" fontSize="14" borderStyle="none" 
		allowMultipleSelection="false" enabled="true" alternatingItemColors="[#D0E2F6, #EEEEEE]"
		columnCount="1" rowCount="{_model.products.length}" variableRowHeight="true"
		dataProvider="{_model.products}">
		<mx:itemRenderer>
            <mx:Component>
	                <mx:VBox backgroundAlpha="0.0" borderStyle="none" backgroundColor="#ffffff">
	                	<mx:Script>
	                        <![CDATA[
	                        	import com.komelon.model.KomelonModelLocator;
	                        
	                        	[Bindable]
		    					private var _model:KomelonModelLocator = KomelonModelLocator.getInstance();
	                        ]]>
	                    </mx:Script>
	                    <mx:Canvas borderStyle="outset" borderColor="#cccccc" x="5" y="5" borderThickness="2">
					    	<mx:Image source="{data.image}" maxWidth="176"/>
					    </mx:Canvas>
					    <mx:Canvas borderStyle="outset" borderColor="#cccccc" x="100" y="5" borderThickness="2">
					    	<mx:Image source="{data.image_usage}" maxWidth="176"/>
					    </mx:Canvas>
					    <mx:Canvas borderStyle="outset" borderColor="#cccccc" x="200" y="5" borderThickness="2">
					    	<mx:Image source="{data.image_clamshell}" maxWidth="176"/>
					    </mx:Canvas>
					    <mx:Canvas borderStyle="outset" borderColor="#cccccc" x="300" y="5" borderThickness="2">
					    	<mx:Image source="{data.image_table}" maxWidth="176"/>
					    </mx:Canvas>
						<mx:Label text="{data.title}" color="#000000" width="400" textAlign="left" height="30" fontFamily="Times New Roman" fontSize="20" id="title" x="195" y="0"/>
						<mx:Label text="{data.model_number}" color="#333333" width="400" textAlign="left" height="18" id="date" fontFamily="Times New Roman" fontSize="12" x="195" y="27" />
						<mx:List dataProvider="{data.description}"/>
					</mx:VBox>
            </mx:Component>
		</mx:itemRenderer>
	</mx:TileList>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 9 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 9 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros