beta
Click here to ask Question Now
Its free No registration required. Flash, Flex, Flash
Media Server, ActionScript,Adobe Air. Most questions receive a response in an hour.
6/4/2010 2:39:38 AM
Title: How to change different style for each row in list controll
HI All,
I have created a list and set it dataprovider as service in PHP and its populating the data from DB to list now.
Now what i am looking is --> Want to change the font of each row individually like first row's font size should be 36pt, 2nd line's 28pt, and 3rd line's 18 pt and all other are as same to 18pt.
Can anybody please help me , and tell how to do this.
I am adding code here
protected function list_creationCompleteHandler(event:FlexEvent):void
{
getAllAnnouncementsResult.token = announcementsService.getAllAnnouncements();
}
<s:Panel x="417" y="528" width="390" height="263" title="Company Announcements" chromeColor="#C9C9C9" borderColor="#000000" dropShadowVisible="true" borderVisible="true" rollOverColor="#DCD7FF" focusColor="#DCD7FF" symbolColor="#DCD7FF" color="#000000" cornerRadius="6">
<s:List x="10" y="10" width="368" height="201" id="Announcementlist" creationComplete="list_creationCompleteHandler(event)" labelField="subject" click="list_clickHandler(event)" fontSize="10" textAlign="center" >
<s:AsyncListView list="{getAllAnnouncementsResult.lastResult}"/>
</s:List>
</s:Panel>
1
to give you an idea , you can use a item renderer for list control and pass it the font size value from data provider . then use that value to set style inside the itemrenderer.
So if the value for row 1 is 9 it will change font size to 9 and so on. The code inside item renderer can be like this :
So if the value for row 1 is 9 it will change font size to 9 and so on. The code inside item renderer can be like this :
<mx:Script>
<![CDATA[
override public function set data(value:Object):void {
super.data = value;
setStyle("fontSize",value);
}
]]>
</mx:Script>
2
Hey Andrid,
Thanks for your answer. I was searching for "how to apply Itemrenderer to list".
But unfortunately i did not get exact thing what i want to use.
Can you please let me know how can I use the ItemRender for list and which syntax i can use to check the row number from list?
*** Sorry,if this is very silly question, but i am totally new to flex and learning ****
Thanks for your answer. I was searching for "how to apply Itemrenderer to list".
But unfortunately i did not get exact thing what i want to use.
Can you please let me know how can I use the ItemRender for list and which syntax i can use to check the row number from list?
*** Sorry,if this is very silly question, but i am totally new to flex and learning ****
3
no problem Rakesh, I have created this example source code for you. Its in Flex and actionscript 3.0. You will see the Use if itemrenderer in List control with different font in each row of List
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel title="My List" width="100%">
<mx:List labelField="@label" width="100%">
<mx:dataProvider>
<mx:XMLList xmlns="">
<fruit label="Car" fontSize="8"/>
<fruit label="Jeep" fontSize="14"/>
<fruit label="Aeroplane" fontSize="12"/>
<fruit label="Bus" fontSize="11"/>
<fruit label="SUV" fontSize="16"/>
</mx:XMLList> </mx:dataProvider>
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:Script>
<![CDATA[
override public function set data(value:Object):void {
super.data = value;
setStyle("fontSize",data.@fontSize);
}
]]>
</mx:Script> <mx:Label text="{data.@label}"/> </mx:HBox>
</mx:Component>
</mx:itemRenderer> </mx:List>
</mx:Panel>
</mx:Application>
4
Hi Andrid,
Again thanx... but can this code is checking the line number to display font for different line?
Again thanx... but can this code is checking the line number to display font for different line?
5
no, check the code the font size can be specified in the dataprovider. You can update the dataprovider row any time and change any row's font size, set the dataprovider again to refresh it. Its not necessary to specify the font size initially in the dataprovider.
6
Thanks Andrid,
I tried to use this code in my example, but this did not worked.
The problem is my data provided is fetching data using PHP services from DB to list.
so i am using only one line as
<s:AsyncListView list="{getAllAnnouncementsResult.lastResult}"/>
how can i use your code for my list here ..? (I need individual lines to have diff fontsize)
I tried to use this code in my example, but this did not worked.
The problem is my data provided is fetching data using PHP services from DB to list.
so i am using only one line as
<s:AsyncListView list="{getAllAnnouncementsResult.lastResult}"/>
how can i use your code for my list here ..? (I need individual lines to have diff fontsize)
7
Hey ANdrid,,,,,
Very Thanks to you ....
This solution helped me .. I tried in my list and it is working fineeeeeee
Very Thanks to you ....
This solution helped me .. I tried in my list and it is working fineeeeeee
8
that's great rakesh, I tried to do it with AsyncListView but it was not working. Happy to see the solution worked for you :)
Post your Reply