how to skin dropdownlist with different arraycollection field

Question

I use dropdownlist in different location on my air application. For those dataprovider, is always an arraycollection, but some with one field, like

case 1

var collection:ArrayCollection = new ArrayCollection(["foo", "foo2", "foo3"]);

And some times arraycollection is populate with other method has several field:

Case 2

var collection:ArrayCollection = new ArrayCollection (
                [{DESC:"foo", ID:"0"},
                {DESC:"foo1", ID:"1"},
                {DESC:"foo2",ID:"2"},
                {DESC:"foo3", ID:"3"}
                ]
                );

In this case labelField is Desc.

So, I like to custom DDL, and I create a skin with itemrender for label part:

    <?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/mx" 
                autoDrawBackground="true">


    <s:states>
        <s:State name="normal"/>
        <s:State name="hovered"/>
        <s:State name="selected"/>
    </s:states>
    <s:Label text="{data}" backgroundColor.selected="#1B5790" color.selected="white"
             backgroundColor.hovered="#E1DFD2" color.hovered="white" fontWeight.hovered="bold"
             width="100%" height="25" paddingLeft="5" paddingTop="5" styleName="myLabelBlack" toolTip="{data}"/>

</s:ItemRenderer>

This method works well with example 1 (arListBank) but display [Object object] with case 2.

So my goal is to have the same itemrenderer in both case.

Could you help me?

Thanks

While you provide a lot of good info here; You neglected to explain how your data objects are structured. Without that information it is impossible to help you write an itemRenderer. It doesn't matter how you populate the dataProvider; it matters what data you're actually trying to display. As a point of reference, I probably wouldn't try to use the same itemRenderer to display two different sets of data. — JeffryHouser, Feb 15 '12 at 23:39
+1 for the edit, which I believe makes your post infinitely more answerable. — JeffryHouser, Feb 16 '12 at 04:53

score 0 · Answer 1 · edited May 23 '17 at 09:59

0

There is a pretty good way to change up renderer "views" HERE
Make sure you read the comments.

edited May 23 '17 at 09:59

Community

1
1

answered Feb 16 '12 at 01:01

The_asMan

6,364
4
23
34

score 0 · Answer 2 · answered Feb 16 '12 at 05:03

I'm going to make the assumption that it is impossible to change your data structure at this point, and go from there. Keep in mind that the data element passed in to the itemRenderer represents a single item in your dataProvider. In your first case, that will be a String, like this:

foo

In the second case, it will be an object, like this:

{DESC:"foo", ID:"0"}

So, in the first case your label is properly displayed because it is a string. In the second case, Flex will run the toString() method on your object and that will return the [Object object] moniker that you're seeing.

To do this in one itemRenderer, you need to update how the text is set on your label. The steps are like this:

1) Remove the bound text attribute from the label 2) Listen to the dataChange event on the ItemRenderer component 3) in the dataChange event handler, check to see what type of data you have and use that to conditionally set the text value on the Label based on the type of data.

This is psuedo-code, but this is the gist

<?xml version="1.0" encoding="utf-8"?>

<fx:Script>
   protected function onDataChange(event:Event):void{
       if(data is Object){
         labelDisplay.text = data.DESC;
       } else {
         labelDisplay.text = data;
      }
   }
</fx:Script>
<s:states>
    <s:State name="normal"/>
    <s:State name="hovered"/>
    <s:State name="selected"/>
</s:states>
<s:Label id="labelDisplay" backgroundColor.selected="#1B5790" color.selected="white"
         backgroundColor.hovered="#E1DFD2" color.hovered="white" fontWeight.hovered="bold"
         width="100%" height="25" paddingLeft="5" paddingTop="5" styleName="myLabelBlack" toolTip="{data}"/>

[Use the same approach to set the toolTip]

There are many ways to do this differently, though. You could create a super class with the basic components and extend it, overriding the onDataChange event handler for the respective types of data. Then you'd have three components (the super component, the data as a string component and the data as an object component), but you'd be reusing the bulk of the code.

If you have explicit object types defined for your second dataProvider, just implement a custom toString() method to return the description and use the original itemRenderer you have defined.

how to skin dropdownlist with different arraycollection field

2 Answers2