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.

Similar Messages

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

Latest ep of my podcast doesn't show in iTunes. Subscribers CAN download it. Podcast page shows 'Total: 3 items' but lists only items 2 and 3. RSS feed is validated and fine.

Latest ep of my podcast doesn't show in iTunes store. Subscribers CAN download it. Podcast page shows 'Total: 3 items' but lists only items 2 and 3. RSS feed is validated and fine. How do I get iTunes to display it?

I've used Feedburner many times and never had such a problem. I am a bit confused, forgive me if I ask for questions already answerd. Have you tried updating the podcast in someone elses copy of iTunes? My guess is that the file is bad since it is working in other programs but not iTunes. I would try making a new .mp4 file and podcasting it and seeing if that works.
Good luck!
~Ben

Not option for Transport under the tab Change list in both IR and ID

Hello All,
The option transport is missing in tab change list for both IR and ID. We have created the track, maintained the systems in the NWDI but still no luck. We have also included the SC SAP-INTDIR 3.0 for both the tracks (i.e.) IR and ID. Also we are running a seperate NWDI server for CMS and the SLD is with the XI production server.
Am I missing any configuration? Kindly suggest
Regards,
Anand

Hi Anand
Please check if the following link is of some good to you:
http://help.sap.com/saphelp_nw70/helpdata/EN/45/f9f02cf3e41ecce10000000a1553f7/frameset.htm
Also check for steps mentioned here:
http://www.saptechies.com/minisap-610-installation/
I hope it helps
Regards
Chen

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

BOM Change - Delete an item(s) and insert new line items

Hi,
We need to mass update BOMs like for some of the existing BOM's we need to delete some line items and insert new line items. We want to use the BOMMAT04 IDOC in LSMW but I'd like to know couple of things before I go ahead with that approach
For instance, I've a finished good material 12345678 and it has three components
                      a) Item 0010 Material 30101010 of quantity 10
                      b) Item 0020 Material 30101011 of quantity 11
                      C) Item 0030 Material 30101012 of quantity 12
Now, I'd like delete Item 0010 and add a new item 0040 Material 30101013 of quantity 13.
In the segment E1STKOM, there is LOEKZ (Deletion Flag) but I dont want to flag for deletion but instead delete the whole line item and add a new line item.
Is there any way to achieve this using BOMMAT04 IDOC? If not, can you please suggest me a better way to do it
Any help is greatly appreciated
Thanks,
Srinivas

Dear Srinivas,
1.IF you want to change for an individual BOM,use CS02,select the item which you want to delete,select the entire and click on
delete button and then add new line items and save.
2.For Mass changes of BOM you can use CS20.
3.Check these functional module's also if you want to change using a report,
CS_BI_BOM_CHANGE_BATCH_INPUT   Change bill of material via batch input
CSEP_MAT_BOM_SELECT_CHANGE     API Bills of Material: Select BOM(s)
CS_CL_P_BOM_MASS_CHANGE
CS_CL_S_BOM_CHANGE_COMPLETE
Check and revert back,.
Regards
Mangalraj.S

Change itunes window content size and layout

If I use any app, I can resize the window, and resize the contents. And change between boxes and lists. By clicking on the "view" tab on the toolbar menu.
Where is the information on how to change the view of the itunes app window on computer? I don't want huge boxes taking up 3/4 of my screen, that I have to scroll to even see. I want lists, and a resizeable window LIKE ANY OTHER APP. Cannot find ability to change this ANYWHERE! Please! What clever person thought this up and does apple at least give users the ability to change it??? And put it in the "view" toolbar menu, like other apps do, so we can find it? Duh. This takes up nearly my whole screen:
Other apps resize-for example this takes a space the size of the picture below:
Any help or tips appreciated. :-)

Hi,
Well i generate a report which has two three columns.....
1) Description
2) Column 1 for fiscal year 2009
3) Column 2 for fiscal year 2008 for comparison
Here after these columns we have unformated space as a column.
Now we tried to hide this column but the system is not allowing to hide this.
How can we remove this unformatted column/space from the print output.
Thanking you,
Parin

Item Renderer and Label Function

Hi,
I have a grid with the datacolumns that use the
labelfunction. So the label function displays a value in the
column(like Y or N).
Now I want to use a button for that column and toggle the
button to change the values between Y and N
How do I accomplish this
This is the code I am having now
<mx:DataGridColumn dataField="test"
labelFunction="LabelFuncAction"/>
I am trying to use change it to
<mx:DataGridColumn dataField="test"
labelFunction="LabelFuncAction">
<mx:itemRenderer>
<mx:Component>
<mx:Button />
</mx:Component>
</mx:itemRenderer>
but the button shows blank text. I am new to flex and I am
not sure if I am completely wrong.
Thanks,
Josh

Hi,
I tried using a label for the button. But the content in the
column disappears and the button shows blank.
The second option that I tried is
<mx:DataGridColumn dataField="4"
labelFunction="LabelFuncAction"
itemRenderer="mx.controls.Button"/>
The label is this case also shows nothing.
Could someone please help me with this?

Change list of items in purchase order with own fields

Hi,
we use exit MM06E005 with own customer screens (SAPMM06E/ 0101 and 0111).
We can change/insert the fields on this screen and store the data in EKPO.
All is OK.
Now we want to use these fields in the Item overview (tablecontroll?).
Has anyone an idea how to do this?
thanks.
Regards, Dieter

Hi
If it can do it, it can try to use the BADI ME_GUI_PO_CUST
Max

TileLayout spark Item Renderer and Zoom in and zoom out

I implemented a spark ItemRenderer, which serves a DataGroup with TileLayout:
    <s:Border id="scrollView"
              styleName="scrollView"
              width="100%"
              height="100%">
        <s:filters>
            <s:DropShadowFilter inner="true"
                                alpha=".35"/>
        </s:filters>
        <s:Scroller id="continuousViewScroller"
                    height="100%"
                    width="100%">
            <s:DataGroup id="continuousView"
                         height="100%"
                         width="100%"
                         itemRenderer="PageRenderer"
                         dataProvider="{pages}">
                <s:layout>
                         <s:TileLayout columnAlign.OneUpView="justifyUsingWidth"
                         columnAlign.TwoUpView="left"
                         verticalGap="10"
                         horizontalGap.TwoUpView="10"
                         horizontalAlign="center"
                         verticalAlign="top"
                         useVirtualLayout="true"
                         clipAndEnableScrolling="false"
                         requestedColumnCount.OneUpView="1"
                         requestedColumnCount.TwoUpView="2"/>
                    
                </s:layout>
            </s:DataGroup>
        </s:Scroller>
    </s:Border>
I execute a zoom effect everytime some one pushes zoom in or zoom out buttons. The trouble is that zoom in and zoom out works fine. However, the gap between two item renderers increase, when I zoom out.
Is there a way that the gap remains fixed?

Zoom in means, within the PageRenderer, I use a Scale effect, which zooms in and out based on an event. The following code is for doing zoom in and zoom out for the PageRenderer. It works fine. However, the vertical/horizontal gaps increases once have a zoomed in and then try to zoom out incrementally. I want to keep the gap between elements same all the time.
If I run this same code, with VerticalLayout, It works great. However, this does not work with TileLayout.
The following link:
http://opensource.adobe.com/wiki/display/flexsdk/Spark+TileLayout
says:
"Note that justify only grows the columnWidth/rowHeight, so to handle cases where the size of the columns/rows has to shrink, the default column width/row height should set explicitly to zero."
Does anyone has any idea how to implement this?
Source Code for zoom in and zoom out:
<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"
                creationComplete="init()">
    <fx:Declarations>
        <s:Scale target="{this}" id="zoomPlayer" duration="150" />
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.core.FlexGlobals;
            import mx.events.EffectEvent;
            private var _zoom:Number=1.0;
            [Bindable]
            public function set zoom(value:Number):void
                _zoom=value;
            public function get zoom():Number
                return _zoom;
            private function init():void
                var proj:TestProject=FlexGlobals.topLevelApplication as   TestProject;
                proj.systemManager.addEventListener(ZoomEvent.ZoomChange, updateZoom);
            private function updateZoom(event:ZoomEvent):void
                if(zoom != event.zoom){
                    if(zoomPlayer.isPlaying){
                        zoomPlayer.stop();
                    zoomPlayer.addEventListener(EffectEvent.EFFECT_END, zoomEnd);
                    zoomPlayer.scaleXFrom=zoom;
                    zoomPlayer.scaleXTo=event.zoom;
                    zoomPlayer.scaleYFrom=zoom;
                    zoomPlayer.scaleYTo=event.zoom;
                    zoomPlayer.play();
                    zoom=event.zoom;
            private function zoomEnd(event:EffectEvent):void{
                zoomPlayer.removeEventListener(EffectEvent.EFFECT_END,zoomEnd);

Click event on a item renderer stops data being passed

Hi
I'm trying to create a item renderer based on a Canvas, this renderer is then used in a List component. I'm trying to get a click event fired when the user clicks on one of the items in the List. I'm also formatting the data being passed into the item renderer to do this I'm overriding the set data property like this:
override public function set data(value:Object):void
title.text = value.marketName;
sellPrice.text = value.sellPrice;
buyPrice.text = value.buyPrice;
change.text = value.percentageChangeOnDay;
var i:String = "-";
if(String(value.percentageChangeOnDay).indexOf(i))
change.styleName = "PositiveChange";
else
change.styleName = "NegativeChange";
When I add a click event to my item renderer like this,
<view:DisplayItem click="itemClickedEvent( event )" />
I get a null reference error in my set data function. If I remove the click event the data is passed correctly, I've also found that if I use a rollOut event like this,
<view:DisplayItem rollOut="rolledOverEvent( event )"/>
the data is passed fine and the event works too, it seems that click events cause the data not to be passed.
Why does having a click event cause this problem? How can I have a click event on the item renderer and still format my data?
Cheers
Stephen

Found out that I can use the itemClick event of the List component I'm using my item renderer in, so really my item renderer does not need a click event.

I need my label to remember the value of the previous number in item renderer

I have a label used as an item renderer and the dataprovider frequently changes. I need my label to remember the value of the previous number it was assigned to {data.ask} but am having trouble doing this.
Any ideas how to do this?

You could override the data setter on the item renderer or listen for dataChange and store the value somewhere at that time. This post demonstrates how to override the data setter or listen for dataChange:
http://flexponential.com/2009/11/11/binding-warnings-when-using-object-in-a-list-dataprovi der/

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 do you measure performance of an item renderer?

I'm creating an ItemRenderer in Flex 4.6 and I want to know how to measure total time to create, view and render an item renderer and how long it takes to view and render that item renderer when it's being reused.
I just watched the video, Performance Tips and Tricks for Flex and Flash Development and it describes the creation time, validation time and render time and also the reset time. This is described at 36:43 and 40:25.
I'm looking for a way to get numbers in milliseconds for total item renderer render time and reset time (what is being done in the video).

To answer your first question, in this video Ryan Frishberg recommends measuring and tuning your code. I'm trying to follow his example for my own item renderers.
I've taken some key slides out to show you.

List of script and smart forms(except TNAPR) with output type or print prog

How to find out List of SAP SCRIPT and SMART FORMS (except TNAPR)with output type or print program..I like to chk in output type WMTA whch form should use.kindly help on this

Hi
WMTA is special msg and doesn't create any print: so you can't find a sapscript or smartform to link to it.
WMTA is a message for delivery, so you can find it by NACE trx or TNAPR table (It's the same): infact here it can find only all messages of logistic modules (SD & MM).
The routine ENTRY of RLAUTA20 is called by WMTA and creates a Transfer Order (for WM, Warehouse Management, module), so if you need to create a print for that msg you need to change prg RLAUTA20,
Max

Changing List's item renderer and layout causes exception

Similar Messages

Maybe you are looking for