List-like behaviour without item renderer

Hello Everyone ,
I have 4 or 5 VBoxes. I would like to use them in a list like fashion , (selectable , highlighting ) but I dont want to use an itemrenderer because of all that it entails ( recycling itemrenders , .... ). Is there anyway I can organize flex containers and use them as a list without having to use a custom itemrenderer ?
Sincerely ,
Justin Dallas

Hey Paul ,
Okay , here is the main problem. In my app , I will have many objects ordered in the form of lists/vboxes. These objects will have interconnections , basically a line sprite drawn across the canvas from one to the other. The objects have data deciding who is connected to whom.
In the case of the list , I would have to use an itemrenderer , <mx:HBox> ... </mx:HBox>. Now here is the question , knowing object A connects to object B , how would I find the itemrenderers of A and B , and retrieve x,y coordinates for both to draw the line. Not to mention , I'm not sure if a list recycles item renderers on dataprovider updates which could lead to "ghost" lines.
In the case of a vbox filled with containers that are contain the object data , I can have concrete x and y guaranteed not to change. However , I lose the list functionality. Now that I think about it , I may just hack an itemrenderer and keep the list.
Sincerely ,
UP

Similar Messages

How to find list of notifications without item information?

Dear Gurus,
i would like to list out the notifications, which are not not having item information ( like object codes,Damages, causes,Tasks, Activities). i checked with T-code: IW28 and found that it is listingout only all the notifications and when i check with Iw69, it is giving list of notification which are having item information. Please guide how can we acheive the same through s

Dear Ketul,
Thanks for the reply. our requirement is not fulfilling even with exclusion condition also. System is displaying only such notifications, which are atleast have one item information( even other fileds are blank) through T-code: IW68/69. we want to have the notification list like the output coming from Iw28/29. when count the infomation, Iw28 is showing 1500 notifications and Iw69 is showing only 59 notifications. we tried with status also, still same output is coming. what we conclude that is IW69 is not showing notification data of without item information. Can we get the required information through any other way.
Regards,
varsha

Accessing S:List Checkbox Item Renderer Outside the Renderer

Hi All,
I have an S:List, with a checkbox item renderer. I was to be able to access the selected portion of the renderer to create a new function that at the press of a button this will delect all the current selected items in the list.
Doco states that i should be able to do this just by setting the selectedIndex to -1. But not sure if this is specific to 4.5?? But it is not working for me.
Below is my current list. Outside of this list flashbuilder does not know about chkList, or even selected. How can i get access to this to deslect all?
<s:List
id="ltattributes">
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<fx:Script>
<![CDATA[
import mx.events.ItemClickEvent;
protected function chkList_changeHandler(event:Event):void
var e:ItemClickEvent = new ItemClickEvent(ItemClickEvent.ITEM_CLICK, true);
data.selected = event.currentTarget.selected;
e.item = data;
e.index = itemIndex;
dispatchEvent(e);
]]>
</fx:Script>
<s:CheckBox id="chkList" selected="false" label="{data.displayname}" change="chkList_changeHandler(event)"/>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
Thanks

Try: dataGroup.getElementAt().
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui

Getting the value of a checkbox in an item renderer?

I have a list that uses an item renderer with buttons and data. I need to add a checkbox and get the value of this checkbox passed along with the event of the pushbutton.
When the user clicks "add to menu: there is a click handler:
protected function addButton_clickHandler(event:MouseEvent):void
                    doubleIt = double.selected;
                    owner.dispatchEvent(new Event("ADD_TO_MENU", true));
Back in the main application, there is a listener for this event. I want that handler to be able to "know" the status of that checkbox (i.e. the value of "doubleIt", defined as a public boolean).
private function addToMenuHandler(event:Event):void {
           var i:int = event.target.selectedIndex;
           var obj:Object = new Object();
           obj = recipeListCollection.getItemAt(i);
           menuList += obj;
I have tried various permutations of the event.target, but can't figure out how to access that variable.

Create a custom event and stuff anything you want in there.
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui

Redraw item renderer after updating data.

I have large collection (through an AsyncListView) of elements and each element is not bindable for performance reasons. I wish to have the item renderer redraw an item after a property of that item has changed, but I really don't wish to make them all bindable.
I know I can simply "replace" the item in the collection, and that will trigger the redraw, but I rather not replace the item, nor I wish to do a list refresh.
The Update event also works on the concept of oldItem newItem, so that doesn't seem to do the trick.
Any suggestions on how to trigger the List to redraw the item renderer?
BTW. The app is decoupled, so the command that updated the value of the element does not know or care about the list. It should just trigger and event and if there is a List listening then it should update redraw the item renderer.
Thanks,

Hi Sumit,
I am using EO based VO but still I am facing the same problem.
The result VO query is given below,
SELECT EmploymentEO.EMPLOYMENT_HISTORY_ID,
EmploymentEO.PARTY_ID,
EmploymentEO.EMPLOYED_AS_TITLE,
EmploymentEO.EMPLOYED_BY_DIVISION_NAME,
EmploymentEO.EMPLOYED_BY_NAME_COMPANY,
EmploymentEO.STATION,
EmploymentEO.RESPONSIBILITY,
GovtDeptEO.GOVTDEPARTMENTID,
GovtDeptEO.GOVTDEPARTMENTNAME
FROM HZ_EMPLOYMENT_HISTORY EmploymentEO, GOVTDEPARTMENT GovtDeptEO
WHERE EmploymentEO.EMPLOYED_BY_DIVISION_NAME= GovtDeptEO.GOVTDEPARTMENTID(+)
Please suggest.
Thanks & Regards,
Sagarika

Changing List's item renderer and layout causes exception

I have buttons in my UI to switch a list between a tile view (thumbnails) and a list view (details).
This code works:
     var layout:TileLayout = new TileLayout();
     resultsList.layout = layout;
     resultsList.itemRenderer = new ClassFactory(MediaTileRenderer);
This code doesn't:
     var layout:VerticalLayout = new VerticalLayout();
     resultsList.layout = layout;
     resultsList.itemRenderer = new ClassFactory(MediaItemRenderer);
It's not the item renderer's fault, I can use the tile renderer again in the second block of code and it will still explode. If I swap the VerticalLayout for a TileLayout, it works fine. HorizontalLayout explodes.
The exception is occurring in LinearLayoutVector/remove (541):
Error: invalidIndex
at spark.layouts.supportClasses::LinearLayoutVector/remove()[E:\dev\4.x\frameworks\projects\ spark\src\spark\layouts\supportClasses\LinearLayoutVector.as:541]
at spark.layouts::VerticalLayout/elementRemoved()[E:\dev\4.x\frameworks\projects\spark\src\s park\layouts\VerticalLayout.as:1311]
at spark.components::DataGroup/http://www.adobe.com/2006/flex/mx/internal::itemRemoved()[E:\dev\4.x\frameworks\projects\s park\src\spark\components\DataGroup.as:1580]
at spark.components::DataGroup/removeRendererAt()[E:\dev\4.x\frameworks\projects\spark\src\s park\components\DataGroup.as:625]
at spark.components::DataGroup/removeAllItemRenderers()[E:\dev\4.x\frameworks\projects\spark \src\spark\components\DataGroup.as:642]
at spark.components::DataGroup/set itemRenderer()[E:\dev\4.x\frameworks\projects\spark\src\spark\components\DataGroup.as:446 ]
at spark.components::SkinnableDataContainer/set itemRenderer()[E:\dev\4.x\frameworks\projects\spark\src\spark\components\SkinnableDataCon tainer.as:420]
Does anyone know why this doesn't work? It seems like a fairly common idea- using a single list and toggling between different view modes.

Here's a zip of a sample project: http://dl.dropbox.com/u/15760/LayoutTest.zip.
A workaround that I've found:
Switch to a BasicLayout while changing the itemRenderer, then apply the VerticalLayout afterwards.

Flex 3 Item renderer in List dissapear and shifted place

I successfully added ItemRenderer in my List but whenever I scroll down to the bottom and scroll up again. The ItemRenderer in the List would be either gone or shifted places.
I have search up on possible solution but they doesn't seen like working. I tried to put dataChange=”validateNow()” in the ItemRenderer but it doesn't work. I read something about useVirtualLayout="false" but it seen like my List doesn't have useVirtualLayout ?
<mx:List
        id="rowsList2" width="{VBoxCall.width}" height="{ scheduleViewerHeight }"
        rowHeight="{ scheduleViewer.rowHeight }"
        verticalScrollPolicy="off" verticalAlign="middle"
         horizontalScrollPolicy="off"
        alternatingItemColors="[0xEEEEEE, 0xDFDFDF]" itemRenderer="RendererState">
        
        <mx:dataProvider>
            <mx:Object label="Mr Swabby"
                       data="Juneau"
                       webPage="http://www.state.ak.us/"/>
            <mx:Object label="Mrs Harrington"
                       data="Montgomery"
                       webPage="http://www.alabama.gov/" />
        </mx:dataProvider>
    </mx:List>
Before (picture) http://i.stack.imgur.com/VxoeP.gif
After (picture) http://i.stack.imgur.com/3qHO9.gif
Any Ideas ?
Regards, Mike

Hi Alex,
I've read your blog but I still could find the solution.
I tried to override the set data but it is not working. Whenever I scroll to the bottom and move up again, all the buttons are gone.
Please advise me on this.
Regards,
Mike
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
          <mx:Script>
                    <![CDATA[
                              // Import Event and URLRequest classes.
                              import flash.events.Event;
                              import flash.net.URLRequest;
                              override public function set data(value:Object):void{
                                        if(value != null)
                                        super.data = value;
                                        if(data.label == null)
                                                  Button.label="";
                                        else
                                                  if(data.label == null || data.label=="")
                                                            Button.label = "";
                                                  else
                                                            Button.label = data.label;
                                        else
                                                  myVBox.removeChild(Button);
                    ]]>
          </mx:Script>
          <mx:VBox id="myVBox">
                    <mx:Button id="Button" width="90">
                    </mx:Button>
          </mx:VBox>
</mx:VBox>

I need s:list display 2 colums item, like mx:tilelist.

RT,
How can I do, I need 2 colums item, I write itemrenderer, set some properties, but it's not work.
I want s:list like mx:tilelist.
Please help me.
code is here:
      c2.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
    <fx:Declarations>
        
        <mx:CurrencyFormatter id="currFormatter" precision="2" />
    </fx:Declarations>
    <s:layout><s:BasicLayout /></s:layout>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            public var myar:ArrayCollection = new ArrayCollection(
            [{name:"The",   price:"0.23"},
            {name:"quick", price:"1.03"},
            {name:"brown", price:"0.98"},
            {name:"fox",   price:"1.19"},
            {name:"jumps", price:"0.28"},
            {name:"over", price:"0.42"},
            {name:"the",   price:"0.09"},
            {name:"lazy", price:"0.81"},
            {name:"dog",   price:"0.72"}]
            private function comboBox_labelFunc(item:Object):String {
                return item.name + "\t" + currFormatter.format(item.price);
        ]]>
    </fx:Script>
    <s:List id="comboBox"
        itemRenderer="TabItemRenderer"
        horizontalCenter="-157"
        verticalCenter="-124"
        width="250"
        height="500"
         dataProvider="{myar}"
        >
    </s:List>
</s:Application>
tabItemRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/halo"
                xmlns:fxg="http://ns.adobe.com/fxg/2009">
    <fx:Declarations>
        
    </fx:Declarations>
    <s:layout><s:BasicLayout /></s:layout>
        <mx:Tile   direction="horizontal" autoLayout="true" tileWidth="100" tileHeight="50" horizontalGap="0" >
            <s:Button label="{data.name}" width="100%" height="100%" />
        </mx:Tile>
</s:ItemRenderer>
this only one colum.
please!!!!

I know it.
in c2.mxml change to:
<s:List id="comboBox"
        itemRenderer="TabItemRenderer"
        horizontalCenter="-157"
        verticalCenter="-124"
        width="250"
        height="500"
         dataProvider="{myar}"
        >
       <s:layout>
            <s:TileLayout requestedColumnCount="2" />
        </s:layout>
    </s:List>
add s:layout here.
and tabItemRenderer.mxml, delete mx:Tile.
set s:TileLayout requestedColumnCount = 2.
and ,it's working.

Image in item renderer issue for List Components

Hello,
I have an issue when I use an item renderer with an image in
it. This happens when I do this with a List or TileList component
that has enough items to create a scroll bar. What happens is the
images load fine, then I scroll down and the other items and their
images start appearing, but then the first and last images start
loading the wrong image. I'll scroll back up and the first item now
has a different image, and when I scroll back down, the last images
changes too.
Has anyone had this problem with image itemrenderers in List
components?
Thanks for any help.
Brade

The creationComplete event is called ONCE and that's it. But
each time an itemRenderer is recycled it will have its data
property reset with new a new record from the dataProvider. Thus
overriding the set data function lets you inspect the data and do
what you want with it.
Data binding in MXML <mx:Image source="{data.image}" />
is set up by the Flex compiler. When the data property is reset it
will trigger the data binding notifications. The Flex
compiler-generated code will intercept that and update the Image
source property.
If you use MXML, then use data binding. If you write your
itemRenderer in ActionScript, override the set data
function.

Flex Mobile List Item Renderer problems

i have flex mobile list created with item renderer,i remove individual item in flex mobile list,it is worked very well,but some times i double click action or another scroll event using in list, last item doesn't delete in flex mobile list.it is repeated again and again.so anyone this problem faced,give me a solution.
i expect your feedback.Thanking You

Hi Alex,
I've searched a lot for that post (on this forum and on google). Not sure if this is the post you were talking about: http://tech.groups.yahoo.com/group/flexcoders/message/161146
I have fixed the setter of the data not to also manage the state (I figured it was inappropriate there)... overrode the getCurrentRendererState, I'm managing the state staight from the data. When I run the following... All sold items show as sold... and normal states show as normal. When I try to hover over the normal state, it dosen't play the hovered state, and when I click to the selected state. These built in states don't work.
override public function set data(value:Object):void {
     super.data = value;
     ticketNumber_ti.text = value.slots_id;
override protected function getCurrentRendererState():String {
     var state:String;
     if (data.date_purchased != null) {
          state = 'sold';
          mouseChildren = false;
          mouseEnabled = false;
     } else {
          state = 'normal';
          mouseChildren = true;
          mouseEnabled = true;
     return state;
On another note, the states only update, once I start scrolling, everything updates... I tried to validateDisplayList() to the List after setting the dataProvider with no luck.
Once I find a solution I will certainly add it to my Blog as I have not found a lot of solutions for this problem.
Any help is grteatly appreciated.

Custom Item Renderer Issue for List

Hi,
I have a List that uses a custom renderer that contains a
combo box and a checkbox.
If i define the data provider inline in MXML both the
combobox and the checkbox render values correctly.
However, if I switch the dataprovider to an AS 3.0
ArrayCollection using same name/value pairs, the checkbox renders
properly but the combo box doesn't show text values. What is weird
is that if I trace the data, the value is accessible but it won't
show in combo.text of control.
Any ideas?

The creationComplete event is called ONCE and that's it. But
each time an itemRenderer is recycled it will have its data
property reset with new a new record from the dataProvider. Thus
overriding the set data function lets you inspect the data and do
what you want with it.
Data binding in MXML <mx:Image source="{data.image}" />
is set up by the Flex compiler. When the data property is reset it
will trigger the data binding notifications. The Flex
compiler-generated code will intercept that and update the Image
source property.
If you use MXML, then use data binding. If you write your
itemRenderer in ActionScript, override the set data
function.

Programmatically selecting hovered state of item renderer - Greg pleeease

I'm a bit new to Flex, so I have the idea but can't get it to work.
I'm using an item renderer that takes its data from an HTTPService
    <s:SkinnableDataContainer
                              dataProvider="{boData}"
                              itemRenderer="extras.BoItemRenderer"
                              skinClass="extras.BoSkin" />
the boData data provider is an ArrayCollection not an Array
In my <s:ItemRenderer ...... > (BoItemRenderer.mxml) I have
- 2 states: normal and hovered (each has different style, which I will leave out to keep things simple)
- and the data is presented as follows:
    <s:HGroup>
        <s:Label text="{data.idNum}" />
        <s:Label text="{data.firstName}" />
        <s:Label text="{data.lastName}" />
    </s:HGroup>
Naturally as I hover on any row in the item renderer, it changes to the hovered state styling, all done by flex.
What I want to do however is programmatically induce that hover state without actually hovering.
For example, given a hard-coded idNum, I need to programmatically set the state of that row to hovered.
My approach is as follows, but not sure how to target that specific item,
- search the dataProvider to find the index of the row with idNum that matches my hard-coded value. I looked at the documentation, and there is indexOf, but it's for Array and not ArrayCollection.. also not sure how that works since I'd like to read the data from the item renderer directly, not from the original data provider.
- then I would find that index in the itemrenderer and set the state of that index to hovered.
Simpler said then done, but I'm stuck on it...
Thanks,
David

Depending on what is it the ArrayCollection, in theory you might be able to do this:
var myIndex:uint;
for(var a:uint=0;a<myCollection.length;a++){
    if(myCollection.getItemAt(a).idNum == myHardCodedIdNum){
        myIndex = a;
        break;
You can programmatically simulate a hover over by having the component manually dispatch a mouseOver event, but this is not the way to do it with itemRenderers.
Item renderers can be tricky, particularly if they are being used in List based controls, like List, DataGrid, TileList, etc. because the itemRenderers are recycled.
With that in mind, and with your somewhat non-typical situation (manually simulating hover over), I might be wrong on this, but it might be best to control this via the dataProvider data. So have a field named currState, and somehow make the renderer automatically change its state if that data field changes, then you simply programmatically change the currState data field for the desired item.
As far as how to change the state of the item renderer based on changes to a data field, maybe ChangeWatcher?
If this post answers your question or helps, please mark it as such.
Greg Lafrance - Flex 2 and 3 ACE certified
www.ChikaraDev.com
Flex / AIR Development, Training, and Support Services

Dynamic Item Renderer

Hello everyone,
I used Catalyst to design my interaction and navigation and then use Flash Builder to add all my logic. Everything works as expected but i have one issue regarding my item renderer data list.
Here is my issue : i set up an itemRenderer for a dynamic calendar filled by a database.
Every schedule contain one to four workshops (data.ws, data.ws2. data.ws3 data.ws4) and are separated by a static bar (footerGroup)
So, i am trying (since days now) to make this separate bar dynamic so there are no blank gap between repeated two schedules if there are less than 4 workshops.
I reckon i need to code an actionscript "if statement" for the bar to move its Y according to workshops.
Thanks for your help and guidance guys,
i have a designer background and have some hard time to develop some special features
End-user view without the dynamic bar:
here's my Flash Builder code :
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:d="http://ns.adobe.com/fxg/2008/dt"
                    xmlns:flm="http://ns.adobe.com/flame/2008"
                    autoDrawBackground="false"
                    xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
     <![CDATA[
     ]]>
</fx:Script>
     <s:states>
          <s:State name="normal"/>
     </s:states>
     <s:RichText id="time"
                    x="5" y="20"
                    color="#2B4381" fontFamily="Arial" fontSize="20" tabStops="S0 S50 S100 S150"
                    text="{data.time}"/>
     <s:RichText id="subject"
                    x="160" y="20"
                    color="#2B4381" fontFamily="Arial" fontSize="20" tabStops="S0 S50 S100 S150"
                    text="{data.subject}"/>
     <s:RichText id="workshop"
                    x="5" y="60"
                    color="#000000" fontFamily="Arial" fontSize="20" fontWeight="bold" tabStops="S0 S50 S100 S150"
                    text="{data.ws}"/>
     <s:RichText id="workshop2"
                    x="5" y="100"
                    color="#2B4381" fontFamily="Arial" fontSize="20" tabStops="S0 S50 S100 S150"
                    text="{data.ws2}"/>
     <s:RichText id="workshop3"
                    x="5" y="140"
                    color="#2B4381" fontFamily="Arial" fontSize="20" tabStops="S0 S50 S100 S150"
                    text="{data.ws3}"/>
     <s:RichText id="workshop4"
                    x="5" y="180"
                    color="#2B4381" fontFamily="Arial" fontSize="20" tabStops="S0 S50 S100 S150"
                    text="{data.ws4}"/>
     <s:Group flm:knockout="false" rotation="90" x="520" y="232.3"
                id="footerGroup">
          <s:Path data="M 0.199 0.952 C 0.119 -0.504 -0.109 1.737 0.062 0 C 0.205 0.196 0.311 0.479 0.199 0.952 Z" height="1.124" width="0.246" winding="nonZero" x="3.022" y="0">
               <s:fill>
                    <s:SolidColor color="#202020"/>
               </s:fill>
          </s:Path>
          <s:Path data="M 3.021 388.311 C 2.105 383.619 3.03 377.439 2.447 372.301 C 2.408 371.697 2.948 372.455 2.828 371.098 C 2.116 366.115 2.541 358.266 3.089 352.197 L 3.23 352.565 C 3.333 351.41 2.864 349.998 2.929 348.773 C 3.023 348.765 3.063 349.166 3.193 348.883 C 2.908 348.575 3.06 346.668 2.849 346.149 C 2.96 345.666 3.185 345.712 3.31 345.087 L 2.987 344.386 C 2.22 342.438 3.04 339.652 2.643 336.992 C 2.719 337.121 2.777 337.386 2.849 337.174 C 2.384 332.905 2.471 327.563 2.299 322.79 C 2.413 322.98 2.62 323.155 2.749 322.877 C 2.409 322.641 2.324 321.167 2.257 319.888 C 2.606 319.312 1.938 317.694 2.132 316.192 L 2.208 316.321 C 1.842 315.213 2.419 314.677 1.98 313.777 L 2.255 313.072 C 1.762 312.587 2.51 311.468 2.26 310.552 L 2.158 310.581 C 2.039 309.718 2.286 309.268 2.203 308.466 L 2.26 308.39 C 2.132 306.513 2.404 305.421 2.02 305.468 C 2.328 304.809 2.161 307.288 2.609 306.253 C 2.213 300.08 2.291 293.713 2.283 287.497 C 2.437 286.792 2.484 286.342 2.631 286.184 C 2.553 285.563 2.559 283.845 2.362 283.281 C 2.371 283.49 2.559 282.88 2.578 282.551 C 2.723 281.421 2.156 281.315 2.328 280.074 C 2.43 280.568 2.554 280.736 2.697 280.57 C 2.397 279.513 2.445 278.096 2.348 276.844 C 2.413 277.038 2.451 277.34 2.572 277.293 C 2.232 275.923 2.643 274.796 2.429 273.597 L 2.65 274.044 C 2.92 272.112 2.186 273.475 2.345 271.804 C 2.416 272.205 2.503 272.063 2.594 272.136 C 2.19 270.577 2.324 268.057 2.186 266.503 C 2.217 266.596 2.278 266.57 2.278 266.57 C 2.227 264.877 2.353 263.105 2.178 261.244 C 2.275 260.566 2.719 261.466 2.637 259.673 C 2.191 259.738 2.454 256.631 1.95 257.687 C 2.022 256.155 2.19 253.732 2.039 252.712 C 2.208 253.4 2.583 251.967 2.62 253.24 L 2.89 252.277 C 3.072 252.421 2.829 253.268 3.058 252.962 C 3.04 252.324 2.864 250.466 2.936 249.896 C 2.664 248.714 2.154 247.629 2.097 245.716 C 2.271 246.615 2.589 245.205 2.665 245.814 L 1.812 243.146 C 1.792 242.511 2.163 243.009 2.047 242.089 C 1.929 242.135 1.856 241.734 1.76 241.455 C 1.812 241.215 1.65 238.808 2.09 238.531 C 2.26 238.248 2.179 239.567 2.337 238.862 C 2.333 237.688 2.181 237.636 2.175 236.46 L 2.233 236.437 C 2.299 235.662 2.047 234.15 1.804 234.993 C 1.792 235.533 2.068 234.788 1.94 235.588 C 1.686 235.041 1.615 233.676 1.611 232.499 C 1.68 232.9 1.798 232.852 1.922 233.013 C 1.577 231.434 1.469 229.759 1.324 227.994 C 1.115 227.967 1.704 228.652 1.594 228.912 C 1.883 226.651 1.183 224.242 1.606 222.361 C 1.642 222.67 1.31 222.526 1.369 222.505 C 1.394 221.415 1.697 221.466 1.586 220.757 C 1.762 220.685 1.528 219.863 1.474 219.133 C 1.346 218.755 1.56 218.943 1.58 219.579 C 1.43 218.562 1.158 214.486 1.416 212.135 C 1.299 212.181 0.985 210.69 0.998 210.15 L 1.272 210.361 C 1.436 209.867 1.249 208.55 1.483 208.459 C 1.15 207.304 1.767 212.907 1.511 211.345 C 1.739 210.939 1.073 209.168 1.447 209.504 C 1.436 208.419 1.129 207.365 1.385 206.328 C 1.341 206.628 1.765 207.209 1.746 206.333 C 1.697 204.787 1.615 205.894 1.523 204.64 L 1.411 203.854 C 1.143 203.804 1.447 202.474 1.148 203.048 C 1.369 202.857 1.012 200.804 1.455 200.962 L 1.804 201.177 C 1.779 200.51 1.436 200.084 1.283 199.56 C 1.314 199.472 1.385 199.296 1.441 199.33 C 0.907 199.223 1.486 197.736 1.073 196.942 C 1.259 195.542 1.091 193.385 1.423 192.724 C 1.261 191.647 1.07 190.665 1.183 189.438 C 1.234 189.684 1.249 190.018 1.364 190.087 C 1.521 189.316 1.381 189.126 1.294 188.421 C 1.373 188.579 1.606 186.88 1.795 186.022 C 1.636 184.954 1.347 185.322 1.172 185.214 C 1.699 184.236 0.832 182.193 1.31 180.969 C 1.383 181.34 1.569 182.531 1.701 181.64 C 2.227 180.662 1.313 179.668 1.565 178.093 L 1.129 178.479 C 1.399 177.776 0.874 176.159 1.319 176.319 C 1.162 175.792 1.465 174.46 1.038 174.635 C 1.399 172.047 0.82 168.337 1.586 166.747 C 1.513 166.376 1.587 165.449 1.367 165.639 C 1.13 166.255 1.537 166.5 1.376 166.73 C 1.363 166.396 1.246 166.325 1.187 166.289 C 1.284 165.484 1.314 164.852 1.67 165.611 C 1.933 163.821 0.944 163.764 1.112 161.484 C 1.288 161.587 1.354 161.414 1.326 160.747 L 1.024 159.482 C 1.095 158.009 1.426 158.645 1.724 158.608 C 1.674 157.821 1.687 156.858 1.465 156.499 L 1.84 155.543 C 1.569 156.242 1.659 154.895 1.587 154.525 L 1.659 154.895 C 1.787 154.751 1.709 153.839 1.671 153.377 C 1.486 153.488 1.411 154.418 1.357 154.925 C 1.225 154.523 1.256 153.896 1.101 153.362 C 1.394 153.539 1.31 152.078 1.341 151.453 C 1.404 150.735 1.078 150.643 1.088 150.434 C 1.24 150.415 1.113 149.262 1.326 149.821 C 1.376 150.066 1.179 150.381 1.313 150.786 C 1.426 150.313 1.691 150.368 1.498 149.385 C 1.352 148.646 0.919 149.574 1.103 148.173 C 1.177 148.54 1.294 148.607 1.399 148.895 L 1.552 147.579 L 1.284 147.522 C 1.352 147.345 1.376 147.468 1.411 147.388 C 1.13 146.994 1.324 145.38 1.008 145.082 C 0.979 144.419 1.193 143.685 1.223 143.051 L 1.247 143.173 C 1.404 142.398 1.301 141.37 1.12 140.72 L 1.179 140.754 C 1.2 140.331 1.158 139.333 1.001 138.801 C 1.202 137.734 2.01 138.444 1.674 137.262 C 1.664 136.179 1.183 135.564 1.012 135.999 C 1.193 134.053 0.757 131.84 1.172 130.035 C 1.064 129.754 0.996 129.932 0.932 129.354 C 1.038 126.494 0.616 123.315 1.141 121.039 C 1.254 121.867 1.41 121.094 1.56 121.077 C 1.322 120.393 1.809 120.254 1.399 120.009 C 1.158 120.076 1.041 120.009 0.943 120.813 C 0.813 119.107 0.813 116.513 1.038 115.566 C 0.927 116.04 0.853 115.672 0.78 115.301 C 1.166 115.423 1.223 114.165 1.088 113.213 L 0.853 113.08 L 1.095 112.459 C 1.019 112.094 0.602 112.056 0.827 111.112 C 0.919 111.062 1.012 111.007 1.078 110.833 C 0.886 109.85 0.56 108.46 0.76 107.393 L 1.101 106.518 C 1.064 106.062 0.857 105.291 0.76 106.096 C 0.966 104.271 0.991 103.098 1.288 102.52 C 0.566 99.378 0.537 94.817 0.588 91.165 L 0.763 91.275 C 0.928 90.293 0.457 90.764 0.579 90.08 C 0.746 90.397 0.943 89.333 1.148 90.104 C 1.334 88.699 0.844 88.294 0.763 87.382 C 0.533 87.242 0.912 88.116 0.619 87.94 C 0.537 87.783 0.799 85.997 0.45 85.779 C 0.587 85.427 0.844 85.701 0.985 85.892 L 0.815 85.034 C 1.223 83.985 1.545 87.424 2.047 86.322 L 1.993 85.532 C 2.357 84.776 2.404 87.622 2.53 85.638 C 2.357 84.776 1.851 84.042 1.697 84.809 C 1.6 83.016 0.865 83.979 0.894 82.051 C 1.099 81.525 0.943 83.595 1.23 83.223 C 1.512 82.315 1.073 81.402 1.172 80.594 C 1.041 81.491 0.687 80.733 0.623 80.153 C 0.789 79.174 0.954 80.791 0.99 79.401 C 0.789 79.174 0.637 77.897 0.497 79 C 0.04 78.498 0.623 77.557 0.269 76.801 C 0.592 76.349 1.012 78.23 1.173 76.703 C 0.863 76.946 0.752 74.822 0.294 75.629 C 0.382 75.031 0.626 74.968 0.815 75.402 C 1.007 74.55 0.251 73.332 0.865 73.051 L 0.549 72.758 C 0.651 72.489 0.73 72.107 0.9 71.67 C 0.906 70.919 0.47 69.246 0.949 69.314 C 0.9 69.073 0.921 67.355 0.592 68.018 C 0.39 69.086 0.832 69.246 0.386 69.842 C 0.75 69.086 0.338 68.301 0.216 67.684 L 0.4 67.583 C 0.328 67.216 0.369 66.369 0.169 66.139 C 0.274 66.422 0.4 66.273 0.445 65.982 L 0.164 65.596 C 0.023 64.104 0.658 65.243 0.576 63.791 L 0.795 64.896 C 0.748 64.652 1.012 64.158 0.924 63.462 C 0.667 63.191 0.358 62.685 0.159 62.452 C 0.047 61.633 0.449 62.085 0.185 61.278 L 0.494 62.334 C 0.579 62.495 0.919 61.623 0.912 60.529 C 0.822 59.83 0.452 58.745 0.311 59.848 C 0.306 59.298 0.464 58.529 0.651 58.965 C 0.562 57.721 0.375 59.129 0.216 58.057 C 0.387 57.618 0.631 56.25 0.879 55.426 L 1.308 56.545 L 1.313 55.802 C 1.657 56.765 1.575 55.313 1.938 55.857 C 1.994 55.348 1.871 54.731 1.776 54.24 C 1.195 55.729 0.982 52.574 0.452 53.007 C 0.306 50.968 1.741 51.731 0.912 49.606 C 0.773 49.954 0.37 48.953 0.523 50.237 C 0.581 48.97 -0.008 49.375 0.211 47.881 C 0.429 48.987 0.748 46.692 1.064 48.29 C 0.889 48.185 0.931 49.184 0.979 49.429 C 1.183 48.907 1.513 49.536 1.513 48.239 C 1.464 47.448 1.453 46.362 1.177 46.522 C 0.873 46.553 1.209 47.729 0.902 47.222 C 0.797 45.645 1.259 45.381 0.72 44.729 C 0.762 45.726 0.45 45.975 0.241 45.955 L 0.115 44.799 L 0.316 45.023 C 0.462 43.164 -0.049 44.474 0.005 42.675 L 0.403 41.83 C 0.746 42.259 0.251 44.448 0.809 44.127 C 0.832 42.957 0.549 42.569 0.692 41.467 L 0.804 42.29 C 0.822 41.87 1.563 41.454 1.13 39.786 C 0.961 38.925 0.931 39.559 0.721 39.537 C 0.658 37.658 0.445 37.097 0.412 35.887 C 0.82 36.136 0.452 33.748 0.869 35.085 C 0.631 35.699 0.654 38.416 1.043 39.081 C 1.527 38.397 0.974 40.557 1.465 40.958 C 1.476 39.453 1.952 39.526 2.263 39.284 C 2.286 38.866 2.154 38.46 2.105 38.211 C 1.812 38.034 1.816 38.581 1.513 38.612 C 1.594 36.932 1.43 35.313 1.143 34.386 C 1.289 33.824 1.582 34.002 1.611 34.667 C 1.523 32.667 1.563 30.531 1.652 28.63 C 1.173 29.859 1.54 26.513 1.141 27.351 C 1.033 28.369 0.692 29.243 0.478 28.681 C 0.509 28.046 0.687 28.702 0.79 28.437 C 0.528 27.626 1.209 27.178 0.797 26.382 C 0.951 28.209 1.381 26.737 1.756 27.072 C 1.545 25.755 2.022 27.129 2.022 25.825 C 1.814 24.514 1.65 22.9 1.569 21.442 C 1.924 19.609 1.575 16.799 1.56 15.163 C 1.751 14.306 2.175 14.886 2.249 13.958 C 2.24 12.866 1.792 14.766 1.985 13.151 L 2.069 13.307 C 1.972 12.817 2.357 10.345 1.748 9.868 L 2.208 10.366 C 2.25 10.065 2.144 9.786 2.095 9.537 C 2.245 9.524 2.381 9.173 2.479 9.663 C 2.796 8.667 2.429 7.571 2.416 6.488 L 2.144 7.185 C 1.931 5.331 2.201 4.09 2.105 2.295 L 2.372 2.35 L 2.213 1.282 C 2.471 1.543 2.637 0.564 2.421 0 L 3.072 2.774 C 2.916 3.545 2.752 1.932 2.489 2.416 C 2.26 2.827 2.333 4.486 2.589 4.754 C 2.618 4.119 2.559 4.09 2.463 3.596 C 2.834 3.387 2.819 4.352 3.066 4.829 C 3.052 4.495 3.164 4.022 3.047 3.95 C 3.227 4.604 3.256 5.264 3.264 6.353 C 3.119 5.616 3.035 6.754 2.929 6.475 C 3.256 6.562 3.356 7.603 3.264 8.95 C 2.887 9.91 3.508 11.477 3.403 13.037 C 3.072 12.404 2.807 11.595 2.674 10.647 C 2.509 11.627 2.683 11.736 2.517 12.718 C 2.763 13.193 3.14 13.531 3.291 14.808 L 3.047 14.878 C 3.172 16.035 3.533 16.035 3.464 17.509 C 3.345 20.034 3.345 22.632 3.314 24.56 L 3.071 24.632 C 3.592 25.705 3.263 28.204 3.494 29.648 C 3.26 32.104 3.726 34.981 3.306 36.239 C 3.494 40.574 3.678 44.363 3.588 48.852 L 3.234 48.096 C 3.494 48.9 3.03 48.62 3.083 49.409 C 3.365 48.501 3.45 50.503 3.667 51.059 C 3.391 53.058 3.692 55.625 3.939 57.397 L 3.696 57.466 C 4.153 59.256 3.752 61.395 3.678 63.626 C 3.576 63.882 3.347 64.285 3.375 64.95 C 3.768 66.16 3.74 66.793 3.986 68.568 C 3.986 69.865 3.889 71.97 3.736 73.287 C 4.289 78.164 3.935 83.145 4.267 88.214 L 3.982 88.579 C 4.594 93.494 4.038 99.538 4.352 103.733 L 3.863 103.328 C 3.714 104.644 3.991 106.326 4.338 105.99 C 4.188 107.31 4.575 109.281 4.173 110.12 C 4.083 111.467 4.399 111.769 4.465 112.89 C 4.279 115.588 4.322 116.589 4.413 119.133 L 4.443 118.501 C 4.336 118.223 4.129 118.197 4.096 118.831 C 4.234 119.781 3.966 122.322 4.549 121.377 C 4.213 124.092 4.823 127.711 4.369 130.354 C 4.528 130.13 4.558 130.797 4.666 131.076 C 4.674 133.459 4.347 135.966 4.619 137.865 C 4.54 138.243 4.347 137.262 4.331 138.233 C 4.393 138.808 4.54 138.243 4.629 138.953 C 4.927 142.814 4.322 146.771 4.399 150.279 C 4.707 156.521 4.552 163.031 4.603 169.011 L 4.486 168.943 C 4.933 170.944 4.027 173.641 4.701 175.238 C 4.59 175.712 4.648 177.046 4.423 176.695 C 4.739 178.289 4.125 181.158 4.527 183.464 C 4.537 183.253 4.513 183.131 4.464 182.886 C 4.205 185.214 4.558 187.269 4.324 189.726 C 4.273 189.477 4.237 189.022 4.12 188.949 C 3.895 189.899 4.615 191.199 4.05 191.719 C 4.054 192.264 4.334 192.107 4.317 191.773 C 4.096 197.153 4.458 202.896 4.587 208.495 C 4.249 212.506 3.635 208.739 4.056 211.904 C 3.948 212.164 4.272 212.092 4.155 212.135 C 4.313 213.359 3.525 214.043 3.82 214.892 C 4.167 214.541 4.014 215.458 4.225 215.482 C 4.001 217.937 3.687 218.428 3.951 220.364 L 3.768 220.219 C 4.284 222.488 4.008 225.118 4.603 227.033 C 4.712 239.549 5.041 251.545 5.11 263.748 C 4.997 275.81 5.263 287.619 4.947 299.869 C 4.469 302.738 4.481 302.953 4.676 306.105 C 4.598 305.977 4.58 305.78 4.507 305.991 C 4.9 306.147 4.545 308.21 4.92 308.51 C 4.846 313.039 4.955 317.21 4.957 321.87 C 4.915 321.133 4.594 320.764 4.619 321.64 L 4.871 322.554 L 4.76 322.704 C 4.818 323.304 5.013 323.956 5.139 323.337 C 5.479 335.042 4.691 346.557 4.787 358.021 C 4.623 360.742 4.773 364.616 4.853 367.576 C 4.33 376.342 3.906 384.244 4.272 393.151 C 4.272 393.151 3.256 391.988 3.021 388.311 Z" height="464.274" width="5.229" winding="nonZero" x="0" y="4.637" id="footer">
               <s:fill>
                    <s:SolidColor color="#202020"/>
               </s:fill>
          </s:Path>
          <s:Path data="M 0.565 0.015 C 0.369 0.328 0.261 1.347 0 0.534 C 0.184 0.433 0.39 -0.09 0.565 0.015 Z" height="0.992" width="0.565" winding="nonZero" x="2.694" y="3.177">
               <s:fill>
                    <s:SolidColor color="#202020"/>
               </s:fill>
          </s:Path>
          <s:Path data="M 0.224 0.443 C 0.282 0.479 0.144 0.832 0.112 0.918 C 0.097 0.583 -0.068 0.268 0.033 0 C 0.048 0.342 0.142 0.289 0.224 0.443 Z" height="1.084" width="0.239" winding="nonZero" x="1.011" y="34.817">
               <s:fill>
                    <s:SolidColor color="#202020"/>
               </s:fill>
          </s:Path>
          <s:Path data="M 0.335 2.472 C 0.16 2.367 0.021 0.878 0 0 L 0.335 2.472 Z" height="2.919" width="0.335" winding="nonZero" x="0.783" y="40.641">
               <s:fill>
                    <s:SolidColor color="#202020"/>
               </s:fill>
          </s:Path>
          <s:Path data="M 0.225 0.357 C 0.076 0.916 -0.004 0.762 0 0.008 C 0.093 -0.046 0.14 0.203 0.225 0.357 Z" height="0.818" width="0.225" winding="nonZero" x="0.172" y="50.798">
               <s:fill>
                    <s:SolidColor color="#202020"/>
               </s:fill>
          </s:Path>
          <s:Path data="M 0.199 0.02 C 0.203 0.559 0.101 0.827 0 1.089 C 0.15 1.07 -0.094 -0.159 0.199 0.02 Z" height="1.286" width="0.199" winding="nonZero" x="0.596" y="51.739">
               <s:fill>
                    <s:SolidColor color="#202020"/>
               </s:fill>
          </s:Path>
          <s:Path data="M 0.095 0.038 C 0.108 0.376 0.254 1.108 0.06 1.423 C 0.195 1.07 -0.162 -0.224 0.095 0.038 Z" height="1.681" width="0.159" winding="nonZero" x="0.192" y="68.345">
               <s:fill>
                    <s:SolidColor color="#202020"/>
               </s:fill>
          </s:Path>
          <s:Path data="M 0.219 0 C 0.207 0.211 0.176 0.298 0.224 0.542 C 0.144 0.931 0.016 0.521 0 0.194 L 0.219 0 Z" height="0.825" width="0.224" winding="nonZero" x="0.332" y="76.116">
               <s:fill>
                    <s:SolidColor color="#202020"/>
               </s:fill>
          </s:Path>
          <s:Path data="M 0.087 0.708 L 0 0 L 0.174 0.104 L 0.087 0.708 Z" height="0.836" width="0.174" winding="nonZero" x="1.167" y="215.937">
               <s:fill>
                    <s:SolidColor color="#202020"/>
               </s:fill>
          </s:Path>
          <s:Path data="M 0.192 0 C 0.301 0.705 0.028 0.49 0.001 0.608 C -0.017 -0.029 0.217 0.845 0.192 0 Z" height="0.718" width="0.219" winding="nonZero" x="1.072" y="278.409">
               <s:fill>
                    <s:SolidColor color="#202020"/>
               </s:fill>
          </s:Path>
          <s:Path data="M 0.005 0.215 L 0 0 L 0.359 0.071 L 0.005 0.215 Z" height="0.254" width="0.359" winding="nonZero" x="2.133" y="311.389">
               <s:fill>
                    <s:SolidColor color="#202020"/>
               </s:fill>
          </s:Path>
     </s:Group>
     <s:transitions>
          <s:Transition fromState="normal" toState="hovered" autoReverse="true">
               <s:Parallel>
                    <s:Parallel target="{time}">
                         <s:Move duration="0" autoCenterTransform="true"/>
                         <s:Resize duration="0"/>
                    </s:Parallel>
                    <s:Parallel target="{subject}">
                         <s:Fade duration="0"/>
                    </s:Parallel>
                    <s:Parallel target="{workshop}">
                         <s:Fade duration="0"/>
                    </s:Parallel>
                    <s:Parallel target="{workshop2}">
                         <s:Fade duration="0"/>
                    </s:Parallel>
                    <s:Parallel target="{workshop3}">
                         <s:Fade duration="0"/>
                    </s:Parallel>
                    <s:Parallel target="{workshop4}">
                         <s:Fade duration="0"/>
                    </s:Parallel>
                    <s:Parallel target="{footerGroup">
                         <s:Fade duration="0"/>
                    </s:Parallel>
               </s:Parallel>
          </s:Transition>
     </s:transitions>
</s:ItemRenderer>

Wouldn't I then just get one image? Whereas what I want is if
the value = 1, display 1 image. If the value = 2, display 2 images.
Thus creating a bar of images.
Im actually having trouble adding multiple images to the HBox
in the itemRenderer.

Custom Style in Item Renderer

Hello guys, again here :)
Well, i have a tile list which renders almost 50-60 items.
I want to give a toolbar, which will be used to customize all
the item renders at the same time. like, change picture border and
it will change the border in all the item renderers
If i am not wrong then the solution is to add a custom style,
and invoke it using sytlemanager.
need your guidance in this regard
thanks in advance :)

Attache some code as inspiration.
HTH.

DataGrid Using an item renderer that spans an entire row

Anyone know how can I do this using DataGrid?

I dont understand how Can I do it. Below I have a source code that I'm working with this case. I have 2 columns and I would like when i click in combobox my item renderer fill all rows.
Look I have this code (Main Application and Renderer):
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/halo">
     <mx:transitions>
          <mx:Transition fromState="*" toState="*">
               <mx:Resize target="{this}"/>
          </mx:Transition>
     </mx:transitions>
     <mx:states>
          <mx:State name="normal"/>
          <mx:State name="expanded"/>
     </mx:states>
     <fx:Script>
     <![CDATA[
          import mx.collections.ArrayCollection;
          [Bindable]
          public var ac:ArrayCollection;
          private function changeState(event:Event) : void {
               if( event.target.selected )
                    currentState = "expanded";
               else
                    currentState = "normal";
          override public function set data(value:Object) : void {
               super.data = value;
               ac = new ArrayCollection(value.models);
     ]]>
     </fx:Script>
     <mx:CheckBox label="{data.title}" click="changeState(event)"/>
     <mx:List dataProvider="{ac}" y="20" width="100%" includeIn="expanded"/>
</mx:Canvas>
<s:Application
     xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:mx="library://ns.adobe.com/flex/halo"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:ct="*"
     height="100%" width="100%">
     <fx:Script>
     <![CDATA[
          import mx.collections.ArrayCollection;
          [Bindable]
          public var dp:ArrayCollection = new ArrayCollection([
          {title:"Ford", style: 'Modern', models:["Fusion","Taurus","Mustang"]},
               {title:"Volkswagen", style: 'Normal', models:["Passat","Jetta","Beetle", "Golf", "GTI"]},
               {title:"Infiniti", style: 'Modern', models:["FX35","GX35","Q45","M35"]},
               {title:"Audi", style: 'Esport', models:["A3","A4","A6"]}
     ]]>
     </fx:Script>
     <mx:DataGrid dataProvider="{dp}" variableRowHeight="true" height="100%" width="100%">
          <mx:columns>
               <mx:DataGridColumn dataField="title" headerText="title" itemRenderer="DetailItem"/>
               <mx:DataGridColumn dataField="style" headerText="style" />
          </mx:columns>
     </mx:DataGrid>
</s:Application>

List-like behaviour without item renderer

Similar Messages

Maybe you are looking for