Range component in custom item renderer

Hi,
I am trying to put a spark Range component into the labelItemRenderer for flex mobile. Everytime I add it I get the error: "Skin for (long directory name for my range component) cannot be found". The custom item renderer is an actionscipt class because I read this is the best way to make them for mobile. I'll put the error in the bottom of the post.
If anyone has any idea why this could be happening or if anyone knows a possible way around this it would be extremely helpful. I basicaly just need a list where each item has a label on side and then a progress bar on the other side.
Thanks.
Here is the full error, ill put a star on the line where the addChild method gets called in my item renderer for the range component.
Error: Skin for HoosFit0.TabbedViewNavigatorApplicationSkin5.tabbedNavigator.TabbedViewNavigatorSkin7.con tentGroup.ViewNavigator1.ViewNavigatorSkin12.contentGroup.
FCfacilities139.SkinnableContainerSkin141.contentGroup.Group143.facilityList.ListSkin145.S croller147.ScrollerSkin148.DataGroup146.FCfacilitiesInnerClass0_157.Range154 cannot be found.
          at spark.components.supportClasses::SkinnableComponent/attachSkin()[E:\dev\4.y\frameworks\pr ojects\spark\src\spark\components\supportClasses\SkinnableComponent.as:698]
          at spark.components.supportClasses::SkinnableComponent/validateSkinChange()[E:\dev\4.y\frame works\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:443]
          at spark.components.supportClasses::SkinnableComponent/createChildren()[E:\dev\4.y\framework s\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:406]
          at mx.core::UIComponent/initialize()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UI Component.as:7634]
          at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UIComponent.as:7495]
          at mx.core::UIComponent/addChild()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UICo mponent.as:7176]
*** at views::itemRenderer2/set data()[/Users/evan/Documents/Adobe Flash Builder 4.6/HoosFit/src/views/itemRenderer2.as:73]
          at spark.components::SkinnableDataContainer/updateRenderer()[E:\dev\4.y\frameworks\projects\ spark\src\spark\components\SkinnableDataContainer.as:606]
          at spark.components.supportClasses::ListBase/updateRenderer()[E:\dev\4.y\frameworks\projects \spark\src\spark\components\supportClasses\ListBase.as:1106]
          at spark.components::DataGroup/setUpItemRenderer()[E:\dev\4.y\frameworks\projects\spark\src\ spark\components\DataGroup.as:1157]
          at spark.components::DataGroup/initializeTypicalItem()[E:\dev\4.y\frameworks\projects\spark\ src\spark\components\DataGroup.as:327]
          at spark.components::DataGroup/ensureTypicalLayoutElement()[E:\dev\4.y\frameworks\projects\s park\src\spark\components\DataGroup.as:384]
          at spark.components::DataGroup/measure()[E:\dev\4.y\frameworks\projects\spark\src\spark\comp onents\DataGroup.as:1467]
          at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::measureSizes()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UIComponent.as:8506]
          at mx.core::UIComponent/validateSize()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\ UIComponent.as:8430]
          at mx.managers::LayoutManager/validateSize()[E:\dev\4.y\frameworks\projects\framework\src\mx \managers\LayoutManager.as:665]
          at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.y\frameworks\projects\framewo rk\src\mx\managers\LayoutManager.as:816]
          at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.y\frameworks\projects \framework\src\mx\managers\LayoutManager.as:1180]

Similar Messages

Data provider problem in custom item renderer

I have a complex, custom item renderer for a list. I add
items that I extracted from an xml to the data provider using the
IList interface. But when displaying the list, the items are all
screwed up. Each rendered item has some parts which are initialized
as different components depending on the values from the xml. This
initialization is called in the item renderer for the
creationComplete event.
The weird thing is that when I output the dataProvider to
check its values, some of the items have internal uids sometimes
and sometimes they don't. If I output the dataProvider right after
I add the items to it, none of them get internal uids. But from the
initialize method, some of them do and some don't.
To make things weirder, sometimes, as I scroll up and down
the list, the dynamic components get all switched up. I'm either
having a problem with internal uids or with the creation policies
for lists. Or it's probably some simpler mistake I have yet to see.
Anyone have any idea where the problem could lie? Any help is
greatly appreciated.

Any successful render must:
1) override the set data property of the component
Further, best practice is to store any data you need in the
override set data(), and call invalidateProperties(). Then do the
actual work in an override commitProperties() function.
The framework is smart about when to call commitProperties
efficiently. set data() gets called much more often.
Tracy

Need for a Datagrid with variableRowHeight="true" and custom Item Renderer to display exact rows

Hi again, developers:
I'm in a search of a datagrid with certain characteristics:
     - variableRowHeight = "true"
     - only one column
     - each row must have a custom item renderer with possibly different heights, and a fixed width
     - the datagrid must show always every item in the data provider with no vertical scroll bars, what means that the datagrid height must have always the exact height sum of all the item renderers it is displaying.
     - and no extra empty rows must appear in the last positions of the datagrid
The last two requirements are something difficult to achieve... for some reason, empty rows appear at the last positions of the datagrid. I post what i've managed to get:
<mx:Script>
     <![CDATA[
     private function resize():void
                if (dg.dataProvider)
                    var h:Number = dg.measureHeightOfItems( -1, dg.dataProvider.length);
                    dg.height = h;
     ]]>
</mx:Script>
<mx:DataGrid id="dg" width="530" horizontalCenter="0" verticalScrollPolicy="off"
        dataProvider="{dp}"
        wordWrap="true" variableRowHeight="true" showHeaders="false" dataChange="resize()" height="{dg.measureHeightOfItems(-1,dg.dataProvider.length)}" click="Alert.show(dg.rowCount.toString());">
        <mx:columns>
            <mx:DataGridColumn headerText="ID" width="50">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:TextArea height="{Math.random()*100}" wordWrap="true" backgroundColor="{Math.random() * 16777216}" paddingTop="0" paddingBottom="0"/>
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>

Thanks Harui, but it doesn't help. If the border is set it will help, but the very big problem is the empty rows that appear at the end of the datagrid... I can't find a way of measuring correctly the height of the itemRenderers!
I'll update this thread if I manage to do it.

Changing values in custom item renderer

I have an xml feed that I am using to populate a List control. The list control has it's itemRenderer property set to CustomListItem which a custom component built by me to display various pieces of data from the xml along with an icon. At certain points I would like to ba able to tell one of the fields in CustomListItem to change from displaying xml.firstData to xml.secondData depending on a radio button selection but I can't find a way to access the properties of CustomListItem from main.mxml (which is where the radio buttons are).
At the moment the values in CustomListItem are set using functions within it to parse the 'data' property.
Sorry if this is a bit of a sketchy explanation of my problem Any suggestions would be great.
Cheers

I hope this code represents your situation, but at least I hope it helps you!
----------------------- main app ----------------------------
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%"
height="100%" creationComplete="dataRequest.send();"
xmlns:comp="*" horizontalAlign="left">
<mx:Script>
    <![CDATA[
      import mx.rpc.events.ResultEvent;
      import MyListItems;
      import mx.collections.XMLListCollection;
      [Bindable] private var xmllist:XMLList;
      [Bindable] private var xlc:XMLListCollection;
      private function resultHandler(evt:ResultEvent):void{
        xmllist = evt.result.item;
        xlc = new XMLListCollection(xmllist.firstData);
      private function changeData(evt:Event):void{
        if(evt.currentTarget.label == "First Data"){
          xlc = new XMLListCollection(xmllist..firstData);
        }else{
          xlc = new XMLListCollection(xmllist.secondData);
    ]]>
</mx:Script>
<mx:HTTPService id="dataRequest" useProxy="false" url="data.xml"
    resultFormat="e4x" result="resultHandler(event)"/>
<mx:RadioButtonGroup id="items"/>
<mx:RadioButton group="{items}" label="First Data" change="changeData(event)"
    selected="true"/>
<mx:RadioButton group="{items}" label="Second Data" change="changeData(event)"/>
<mx:List width="100" height="150" itemRenderer="MyListItems"
    dataProvider="{xlc}"/>
</mx:Application>
----------------------- item renderer --------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Text text="{data}"/>
</mx:HBox>
------------------------------- data.xml ---------------------------
<?xml version="1.0" encoding="utf-8"?>
<mydata>
<item>
    <firstData>apples</firstData>
    <secondData>oranges</secondData>
</item>
<item>
    <firstData>beef</firstData>
    <secondData>chicken</secondData>
</item>
<item>
    <firstData>milk</firstData>
    <secondData>juice</secondData>
</item>
<item>
    <firstData>carrot</firstData>
    <secondData>tomato</secondData>
</item>
</mydata>

Help with datagrid custom item renderer

Hi ,
I have a datagrid in which I have a column with a checkbox and a custom Checkbox header renderer and an item renderer.
When I try to disable the grid the checkbox column does not get disabled?
Is there any way I can disable the entire grid along with the checkbox column?
Thanks.

Override updateDisplayList on the renderer and set the .enabled to match
owner.enabled.

How can I use the CustomEvent in custom Item Renderer

Hi all.
I have a small problem, which i must solve.
I have a ImageRenderer - TileList with a custom ItemRenderer.
When I choose a picture a button appears (in the ItemRenerer) and when I click it it throws an event with the name of the picture.
The Problem is, that i can not add an event Listener to the ItemRenderer.
Can anybody help me to resolve this problem?

But how can I catch it in the top of the list??????
The ItemRenderer is a IFactory Class Object, which has only one function newInstance().
I repeat it again, there is no addEventListener or something else for the ItemRenderer.
I can give you only a header of the code because it is a big project (and if somebody have a solution or an example, maybe he could give me the it, please)
<?xml version="1.0" encoding="utf-8"?>
<mx:TileList xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init();"
     dataProvider="{imageList}"
     labelField="label"
     iconField="thumbnail"
     itemRenderer="{new ClassFactory(ThumbnailRenderer)}" verticalScrollPolicy="auto">......
and the renderer
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
          horizontalAlign="center" verticalAlign="middle" creationComplete="init()"
          xmlns:DataModels="DataModels.*"
          click="selectedHandler()" height="125">
     <mx:Image source="{data.thumbnail}"
              width="80"
              height="50"                    horizontalCenter="0"
                 verticalCenter="0" horizontalAlign="center" verticalAlign="middle"/>
     <mx:Label text="{data.label}"
               horizontalCenter="0"
               bottom="0" />
     <mx:Metadata>
         [Event(name="addImageEvent", type="DataModels.AddImageEvent")]
    </mx:Metadata>
The button is created dynamicly. When i clicked it, then i dispatch a new AddImageEvent
like this
...button.addEventListener(MouseEvent.CLICK, dispatchAddImageEvent);...private function dispatchAddImageEvent(event:Event):void{     var addImageEvent:AddImageEvent = new AddImageEvent(AddImageEvent.ADD_IMAGE_EVENT);     dispatchEvent(addImageEvent);}
Inside the renderer i can catch it, because there is the addEventListener method, but not in the ITEMRENDERER (IFactory element)

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.

Custom item renderer

I want to render the data into icons. But I cannot seem to
make the codes reusable for multiple columns. The following are my
codes. I know there must be something wrong with my logical
thinking.

"irislpc" <[email protected]> wrote in
message
news:gf20sa$2mu$[email protected]..
>I want to render the data into icons. But I cannot seem
to make the codes
> reusable for multiple columns. The following are my
codes. I know there
> must be
> something wrong with my logical thinking.
I think the AdvancedDataGridGroupItemRenderer has logic to
suppress display
of the icon if it's not being used in the first column. And
an ordinary
AdvancedDataGridItemRenderer has no logic to support icons.
HTH;
Amy

How to make a item renderer have a custom and rounded corners background

Hi,
I'm using custom item renderer for items of list. However,
there is still one thing I haven't made yet. I can't put a
background with a custom color and with rounded corners.
How can I do that?
It seems that all the options I try don't work.
Can someone give me a tip here?
Thanks,
Nuno

"sinosoidal" <[email protected]> wrote in
message
news:gese3u$63n$[email protected]..
> Hi,
>
> I'm using custom item renderer for items of list.
However, there is still
> one
> thing I haven't made yet. I can't put a background with
a custom color and
> with
> rounded corners.
>
> How can I do that?
>
> It seems that all the options I try don't work.
>
> Can someone give me a tip here?
Check out my extended TileList:
http://flexdiary.blogspot.com/2008/08/tilelist-with-stylefunction.html
You might want to swipe the itemRenderer from this example
and modify it:
http://flexdiary.blogspot.com/2008/09/groupingcollection-example-featuring.html

When to use Drop In Item renderer and InLine Item Renderers ??

Hi ,
I am getting confused in where to use Inline ItemRenderer and DropIn Item Renderer .
What i feel is that DROP in Item Renderer are easy to use , and those can satisfy any requirements .
What i read from tutorilas that we cant use Drop In because they say , The only drawback to using drop in is that them is that you cannot configure them
Please help me .

Hi Kiran,
Here is the detailed explanation you needed:
You can also refer the link below:
http://blog.flexdevelopers.com/2009/02/flex-basics-item-renderers.html
Drop-In Item Renderers
Drop-In Item Renderers are generic in nature and don't rely on specific data fields to render data. This allows them to be used with a wide range of data sets, hence, the term “drop-in”. Drop-In Item Renderers can be “dropped-in” to any list-based control regardless of the dataprovider’s data properties.
In our previous example, the employee photo property requires use of a custom Item Renderer to render properly in the UI. In this scenario the Image component satisfies our rendering needs out of the box. Implemented as a Drop-In Item Renderer, the Image component takes any data property regardless of name and uses it as the Image component's source property value. Assuming our employee photo property contains a valid image path, the Image Drop-In Item Renderer will work perfectly and resolve the image path as an image in the UI.

<mx:DataGridColumn dataField="photo"
                   headerText="Employee Photo"
                   itemRenderer="mx.controls.Image"/>
Drop-In Item Renderers are simple and easy to use and satisfy specific use cases nicely. However, they provide no flexibility whatsoever. If your needs are not satisfied by a Drop-In Item Renderer, you must create your own Item Renderer as an inline component or an external component.
Inline Item Renderers
Generally used for simple item rendering requiring minimal customization, inline Item Renderers are defined as a component nested within the MXML of your list-based control.
It is important to note that Item Renderers nested within the itemrender property of a list-based control occupy a different scope than the list-based control. Any attempt to reference members (properties or methods) of the parent component from the nested Item Renderer component will result in a compile-time error. However, references to the members of the parent component can be achieved by utilizing the outerDocument object.
<mx:DataGrid id="myGrid" dataProvider="{gridData}">
   <mx:columns>
      <mx:DataGridColumn headerText="Show Relevance">
         <mx:itemRenderer>
            <mx:Component>
               <mx:Image source="{'assets/images/indicator_' + data.showRelevance + '.png'}"
                         toolTip="{(data.showRelevance == 1) ? 'On' : 'Off'}"
                         click="outerDocument.toggle()" />
            </mx:Component>
         </mx:itemRenderer>
      </mx:DataGridColumn>
   </mx:columns>
</mx:DataGrid>
Remember, rules of encapsulation still apply. Mark all properties or methods public if you want them accessible by your inline Item Renderer. In the previous example, the toggle() method must have a public access modifier to expose itself to the inline Item Renderer.
public function toggle():void
Inline Item Renderers can also be reusable by creating a named component instance outside of the list-based control. This component must have an id property and contain the rendering logic of the Item Renderer. Using data bindings, the component is assigned to the itemrenderer property of one or more data properties of a list-based control.

<mx:Component id="ImageRenderer">
   <mx:VBox width="100%" height="140"
            horizontalAlign="center" verticalAlign="middle">
      <mx:Image source="{'assets/'+data.image}"/>
      <mx:Label text="{data.image}" />
   </mx:VBox>
</mx:Component>

<mx:DataGridColumn headerText="Image"
                   dataField="image" width="150"
                   itemRenderer="{ImageRenderer}"/>
In the previous example, note that the Item Renderer component contains 2 UI controls – Image and Label. When using multiple controls within an Item Renderer, a layout container is required. In this example, a VBox was used.
If this post answers your question or helps, please kindly mark it as such.
Thanks,
Bhasker Chari
Message was edited by: BhaskerChari

Problems regarding a cutoms item renderer

Hello,
I have created a custom item renderer whcih contains two labels and a button. this list is populated on a sertain event. but this list behaves very weird when the triggering event is triggered second time and so on.
What happens is the content set to labels labelFuntion are chaned or changes their place if I set them dynamically. And they do not change even if I want to when they are placed statically. I am attaching my code herewith
<?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"
                left="5" autoDrawBackground="false" creationComplete="_initializeHandler(event)"
                fontSize="12" fontWeight="bold" resize="itemrenderer1_resizeHandler()"
                width="100%" cachePolicy="on">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            import mx.events.ResizeEvent;
            import mx.managers.PopUpManager;
            import skins._alert;
            import skins.creoCustomButtons;
            import skins.logoutConf;
            import spark.components.CheckBox;
            import spark.events.PopUpEvent;
            private var but:Button;
            private var a:_alert;
            public var timer2:Timer;
            import spark.components.Button;
            private var cb:CheckBox;
            private var confirmation:logoutConf;
            private var tempo:String;
            public static var _temp_array:Array = new Array();
            import skins.radioButtonList;
            public var _billingCycle:radioButtonList;
            public var subOptions:ArrayCollection;
            [Bindable]public var initiator:int = 0;
            public static var config_data_Temp:ArrayCollection = new ArrayCollection();
            public static var counter:int = new int();
            public function confirmAction(event:MouseEvent):void{
                //    config_data_Temp.removeItemAt(data.subOptions[this.data].name);
                subOptions = new ArrayCollection(data.subOptions);
                _billingCycle = new radioButtonList;
                _billingCycle.dataProvider = subOptions;
                _billingCycle.labelField = "name";
                _billingCycle.width = stage.width;
                _billingCycle.height = stage.height ;
                _billingCycle.addEventListener(PopUpEvent.CLOSE, selectedValue);
                _billingCycle.open(this,true);
            public function selectedValue(event:PopUpEvent):void{
                if(event.commit){
                    var selectedItems:Vector.<Object> = event.data as Vector.<Object>
                    for(var i:int = 0; i<GlobalData.configurations_data.length; i++){
                        var tempo:String = GlobalData.configurations_data.getItemAt(i,0).toString();
                        //if(config_data_Temp[i]==this.name)
                        if(tempo==btn.label.toString())
                            GlobalData.configurations_data.removeItemAt(i);
                            GlobalData.configurations_data.addItemAt(selectedItems[0].name, i);
                            _price.text = GlobalData.configurations_data[i].price;
                    type.text = selectedItems[0].name;
                    btn.label = selectedItems[0].name;
                    //GlobalData.configurations_data = null;
                    //GlobalData.configurations_data = config_data_Temp;
            private function processRequest(event:PopUpEvent):void{
                if(event.commit)
                    _temp_array.push(data.domain_name+data.tldname);
                    GlobalData.domain_name_data = _temp_array;
                    a = new _alert();
                    a.title = "Request Status";
                    a.message = "Your request is successfully processed.\n Check you email account for details";
                    a.open(this.parent, true);
                    PopUpManager.centerPopUp(a);
                    timer2 = new Timer(2000, 1);
                    timer2.addEventListener(TimerEvent.TIMER_COMPLETE,timerComplete2);
                    timer2.start();
            Timer coplete event closing the current displayed popup
            text="{data.subOptions[0].optFees}"
            label="{data.subOptions[0].name}"
            public function timerComplete2(event:TimerEvent):void
                a.close()
            public function itemrenderer1_resizeHandler():void{
                if(but){
                    but.x = (this.parent.width-but.width)-10;
                if(confirmation)
                    PopUpManager.centerPopUp(confirmation);
                if(a)
                    PopUpManager.centerPopUp(a);
            public var myButon:Button;
            protected function _initializeHandler(event:FlexEvent):void
                btn.label = data.subOption[0].name;
        ]]>
    </fx:Script>
    <s:HGroup height="30" width="100%" verticalAlign="middle" gap="0">
        <s:Label width="30%" text="{data.name}"
                 fontSize="10" fontWeight="normal" id="type"/>
        <s:Label id ="_price" width="10%"
                 fontSize="10" fontWeight="normal"/>
        <s:Button fontSize="12" fontWeight="normal"
                  skinClass="skins.creoCustomButtons" chromeColor="#ffffff"
                  click="confirmAction(event)" width="60%" id="btn"/>
    </s:HGroup>
</s:ItemRenderer>
NOTE: [ Please ignore comments and import statements ]
The button pops up a radio button list. After an item is clicked the selected text should be placed on button permenantly, which is not happening in current scenario.
Any kind of help is appreciated!

Hi Karthik
         to where u are dragging this record from grid...? the second component also ready to accept the same type of records when u drag form grid to second component.. that is the scenario..

Flex SDK 3.4 Tree Item Renderer Root Folder displays Tooltip for Child

I have a Flex Tree that uses a custom item renderer. The item renderer extends Tree Item Renderer and I add my button in commit properties (since the data is dynamic) and I use update displaylist to move it to the right position. I set the button to be visible on rollover and make the icon invisible. On rollout I reverse that logic.
When I have my item renderer add the button, it causes only one problem and it seems to be under certain conditions:
- Single root folder for the tree
- Upon opening the tree, the root folder displays the tool tip for the last child in the tree
Any idea why the tooltip comes up?
public function AssetTreeItemRenderer ()
            super();
            addEventListener(MouseEvent.ROLL_OVER, onItemRollover);
            addEventListener(MouseEvent.ROLL_OUT, onItemRollout);
            addEventListener(ToolTipEvent.TOOL_TIP_SHOWN, toolTipShown);
            addEventListener(ToolTipEvent.TOOL_TIP_CREATE, onCreateToolTip);
        // OVERRIDEN FUNCTIONS
         * override createChildren
        override protected function commitProperties():void {
            super.commitProperties();
            if(data is IAsset) {
                if(playBtn === null) {
                    playBtn = new Button();
                    playBtn.styleName = "previewPlayButton";
                    playBtn.toolTip = "Play";
                    playBtn.width = icon.width + 2;
                    playBtn.height = icon.height + 2;
                    playBtn.visible = false;
                    playBtn.addEventListener(MouseEvent.CLICK, onPlayBtnClick);
                    addChild(playBtn);
            } else {
                if(playBtn !== null) {
                    removeChild(playBtn);
                    playBtn = null;
         * override updateDisplayList
         * @param Number unscaledWidth
         * @param Number unscaledHeight
        override protected function updateDisplayList(unscaledWidth:Number,
                                                      unscaledHeight:Number):void
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            //Move our play button to the correct place
            if(super.data && playBtn !== null)
                playBtn.x = icon.x;
                playBtn.y = icon.y;

You are not clearing tooltip if data is not IAsset

How to make a variable in main application available in item renderer

I have a variable in my main applicaton.
public var accessLevel:String;
I have a spark list that uses a custom item renderer. How do i access the value of accessLevel in my item renderer?

You can use outerDocument/parentDocument or FlexGlobals.topLevelApplication

Item Renderer in a Datagrid

I'm struggling with how to make a check mark ( image ) show
up or not based on the value of some data in each datagrid line
item. I'm using an item renderer but I'm missing something. Any
help would be greatly appreciated.
thanks,
STeveR

The following is my entire itemrenderer...please excuse any
bad style as this is a WIProgress..
Its probably easier to quote the adobe docs on listdata...If
a component implements the IDropInListItemRenderer interface, you
can use its listData property to obtain information about the data
passed to the component when you use the component in an item
renderer or item editor..I made sure the component implements the
interface as you can see in the code at the top of component. Then
add the couple of required functions regarding listdata, then you
can access the listdata in your own functions in the renderer, like
i do in set data function.
this.BTN_***_mark.label =
value[DataGridListData(listData).dataField];
this line assigns the value from my datagrid to the renderers
button label. (this renderer is a button that the user can press)
so i want the buttons label to show the value coming in from the
datagrid. So listdata is just a way to
explicitly get the column name where the current data is
being sourced from in your datagrid.As the grid is being rendered,
it renders row by row. In each row it goes thru your columns . SO
initially it for row 1 it would begin rendering firstname, surname,
mark, average...etc etc. If i put an alert in on
value[DataGridListData(listData).dataField
I would see these column names popping up as they are getting
rendered in the DGrid.
Hope this helps...

<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
creationComplete="init()" width="74" height="30"
horizontalAlign="center" verticalAlign="middle"
implements="mx.core.IFactory,mx.controls.listClasses.IDropInListItemRenderer">
<mx:Metadata>
</mx:Metadata>
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.controls.DataGrid;
import mx.utils.ArrayUtil;
import mx.collections.ArrayCollection;
import mx.collections.IViewCursor;
import mx.controls.Alert;
import mx.events.*;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.containers.TitleWindow;
private var panel:AssessmentMarkPopup = new
AssessmentMarkPopup();
var the_val = 0;
var col_index:int;
private var _listData:BaseListData;
public function get listData() : BaseListData
return _listData;
public function set listData( value:BaseListData ) : void
_listData = value;
private function showLoginForm():void {
var pop:AssessmentMarkPopup =
AssessmentMarkPopup(PopUpManager.createPopUp(this,AssessmentMarkPopup,true));
pop.addEventListener("closepopup",onClose);
pop.TXT_***_mark.text = this.BTN_***_mark.label;
var row:int =
this.parentApplication.DG_class_students.selectedIndex;
pop.student_name =
this.parentApplication.DG_class_students.selectedItem.firstname + "
" + this.parentApplication.DG_class_students.selectedItem.lastname;
private function onClose(e:MyClosePopupEvent):void{
this.BTN_***_mark.label = e.data.mark;
public function newInstance():*
return new MarkEntry();
public override function get data():Object
return super.data;
override public function set data(value:Object):void {
var dg:DataGrid = (listData) ? DataGrid(listData.owner) :
null;
var column:DataGridColumn = (dg) ?
dg.columns[listData.columnIndex] as DataGridColumn : null;
col_index = listData.columnIndex;
var str:String = String(column.dataField);
this.BTN_***_mark.label =
value[DataGridListData(listData).dataField];
]]>
</mx:Script>
<mx:Button click="showLoginForm()" id="BTN_***_mark"
width="52"/>
</mx:VBox>

Item Renderer for DataGrid

I have a button component as a Item renderer in the column of
the datagrid .
I am not able to access the Itemrenderer component(which I
declared in other mxml file in the datagrid)
This is the data grid where I have the Itemrenderer:
<mx:DataGrid id="dgCondition1"
variableRowHeight="true" width="100%" height="150"
verticalScrollPolicy="auto" editable="true"
dataProvider="{initDataGrid_Create}" >
<mx:columns>
<mx:DataGridColumn headerText="" dataField="conditi"
/>
<mx:DataGridColumn headerText="Condition"
dataField="syntax" width="300" />
<mx:DataGridColumn headerText="1" dataField="value"
width="80" editable="false" itemRenderer="buttonRenderer"/>
<mx:DataGridColumn dataField="value" headerText="2"
itemRenderer="buttonRenderer" />
I created a new mxml component for this button component
.(buttonRenderer.mxml)
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
width="400" height="300">
<mx:Script source="..TableDataGridBtn.as" />
<mx:Button id="col1" label="" width="75"
click="getDetail(event,col1)" />
</mx:VBox>
The Problem is I am not able to access the buttonRenderer in
the datagrid itemRenderer tag .
It says "Access of Undefined Property buttonRenderer".

"nash99" <[email protected]> wrote in
message
news:g7alc5$nkd$[email protected]..
> So
> Is it that I can Use this ItemRenderer tag in the
Application Tags only
> Is there any other way I can use them in mxml components
because I am
> using
> the same button in 16 datagrid columns , I dont wan't to
make the code
> look
> redundant.
http://www.adobe.com/livedocs/flex/3/html/help.html?content=intro_3.html

Range component in custom item renderer

Similar Messages

Maybe you are looking for