Try boxa.setStyle("styleName", super.data.style)
From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of
Benjamin
Sent: Wednesday, November 05, 2008 7:16 AM
To: [email protected]
Subject: [flexcomponents] Change item renderer style name in Tilelist
Hello,
I am new to Flex. I am facing one problem which is driving me crazy. It would
be very helpful if any one of Flex experts out there help me.
I need to show a label with gradient background color as each item component in
TileList. Label does not support colored gradient background. So I am placing
the Label on top of a canvas and using below workaround style on canvas.
.grad1
{ borderStyle: applicationControlBar;
fillAlphas: 1.0, 1.0;
highlightAlphas: 0, 0;
fillColors: #C6292C, #700C06;
}
Using the following code, I am able to acheive this.
<mx:TileList width="100%" height="100%" dataProvider="{ listData.item }"
x="0" y="0" horizontalScrollPolicy="off" itemRenderer="TileItemRenderer">
<mx:itemRenderer>
<mx:Component>
<mx:VBox paddingTop="4" paddingRight="4" paddingBottom="2" paddingLeft="4">
<mx:Canvas id="boxa" width="100%" height="100%" styleName="grad1"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Label text="{data.name }" />
</mx:Canvas>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
<! ;/mx:TileList>
Now I want change the gradient color based on the data text displayed in Label
TileList data
<mx:XMLList id="listData">
<items>
<item>
<name>XXXXX</name>
<style>grad1</style>
</item>
<item>
<name>YYYYY</name>
<style>grad3</style>
</item>
<item>
<name>ZZZZ</name>
<style>grad2</style>
</item>
</items>
</mx:XMLL! ist>
I added some inline styles for different colors
<mx:Style>
.grad1, .grad2,.grad3, .grad4
{ borderStyle: applicationControlBar;
fillAlphas: 1.0, 1.0;
highlightAlphas: 0, 0;
}
.grad1
{
fillColors: #C6292C, #700C06;
}
.grad2
{
fillColors: #F7A71A, #E36E11;
}
.grad3
{
fillColors: #ECC917, #BB8E00;
}
.grad4
{
fillColors: #2F72CB, #15396F;
}
</mx:Style>
I changed the itemrenderer as below
<mx:itemRenderer>
<mx:Component>
<mx:VBox paddingTop="4" paddingRight="4" paddingBottom="2" paddingLeft="4">
<mx:Canvas id="boxa" width="100%" height="100%" styleName="grad1"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Script>
<![CDATA[
override protected function commitProperties():void
{
super.commitProperties();
boxa.styleName = super.data.style;
}
]]>
</mx:Script>
<mx:Label text="{data.name }" />
</mx:Canvas>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
But this gives me an error on the line
boxa.styleName = super.data.style;
TypeError: Error #1006: value is not a function.
at
mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::initThemeColor()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\core\UIComponent.as:7845]
at mx.core::UIComponent/set
styleName()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\core\UIComponent.as:4546]
at
RiskEnginePrototype_inlineComponent1/commitProperties()[C:\projects\RiskEnginePrototype\themesamples\brownie\src\RiskEnginePrototype.mxml:325]
at
mx.core::UIComponent/validateProperties()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\core\UIComponent.as:5749]
at
mx.managers::LayoutManager/validateClient()[E:\dev\3.1.0\frameworks\projects\fra!
mework\src\mx\managers\LayoutManager.as:794]
at
mx.controls.listClasses::TileBase/http://www.adobe.com/2006/flex/mx/internal::setupRendererFromData()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\controls\listClasses\TileBase.as:1998]
at
mx.controls.listClasses::TileBase/measureHeightOfItems()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\controls\listClasses\TileBase.as:2024]
at
mx.controls.listClasses::TileBase/commitProperties()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\controls\listClasses\TileBase.as:2329]
at
mx.core::UIComponent/validateProperties()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\core\UIComponent.as:5749]
at mx.managers::LayoutManager!
/validateProperties()[E:\dev\3.1.0\frameworks\proj
ects\framework\src\mx\managers\LayoutManager.as:522]
at
mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:642]
at Function/http://adobe.com/AS3/2006/builtin::apply()
at
mx.core::UIComponent/callLaterDispatcher2()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8565]
at
mx.core::UIComponent/callLaterDispatcher()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8508]
is there any other easier way to acheive this?
Thanks in advance!!
Ben
