Paging data in Spark list component

I'm wondering if paging data for Spark list components will be available in the final release of FB 4 / Flex SDK 4? Currently you will get an error when trying to bind a paged service method to a Spark list component: "Paged operations are not supported by this component".
I'm asking this because of some problems we currently have with paging data in a Flex 3 TileList. See Jira issue: http://bugs.adobe.com/jira/browse/SDK-18758
The suggested solution in this issue is to use a Gumbo Spark TileLayout instead of a TileList. That's currently not a suitable solution since the list doesn't support paging...

Hi Jacob and Ram,
Thank you for the information. Not the type of info I was hoping for of course . Do you guys know what I have to do to re-open my bug report (http://bugs.adobe.com/jira/browse/SDK-18758)? I'd really like to have the Halo TileList fixed so we are able to use it properly.
Thanks,
Jaap

Similar Messages

Return data from spark list itemrenderer

Does anybody no how to return data from the itemrender for a spark list. say i had a checkbx in my itemrenderer how can I get that info back to my main component if its selected or not. I looked at datagrid and itemeditor but I really rather use a spark list. Thanks

thanks I also found another way to doing it. A click handler on my list when that fires I can check if checkbx has been selected by doing event.target.document.mycheckBx.selected this will not work if using currentTarget cause it take the info from the itemRenderer. Now I understand the difference between currentTarget and target.
not sure if this is a better way to access the data I think I might still just dispatch a event and do it your way.
Its weird that mx:list has a editItemRenderer and s:list does not
thanks again TK

Wrap long lines in a Spark List component?

I have a Spark List.
The text for each entry is on one line, and is too long to fit.
Can I get it to break to as many lines as needed without a custom item renderer?

If you define an explicit width on the SimpleText in the DefaultItemRenderer you can get this behavior.
Here is an example of this using an inline ItemRenderer:
<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">
    <s:List width="50" height="200">
        <s:ArrayList>
            <fx:String>a</fx:String>
            <fx:String>b</fx:String>
            <fx:String>c c c c c c c c c c c c</fx:String>
            <fx:String>d</fx:String>
            <fx:String>e</fx:String>
        </s:ArrayList>
        
        <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer focusEnabled="false">
                    <fx:Script>
                        <![CDATA[
                            override public function set label(value:String):void
                                super.label = value;
                                labelDisplay.text = label;
                        ]]>
                    </fx:Script>
                    <s:states>
                        <s:State name="normal" />
                        <s:State name="hovered" />
                        <s:State name="selected" />
                        <s:State name="normalAndShowsCaret"/>
                        <s:State name="hoveredAndShowsCaret"/>
                        <s:State name="selectedAndShowsCaret"/>
                    </s:states>
                    <s:Rect left="0" right="0" top="0" bottom="0">
                        <s:stroke.normalAndShowsCaret>
                            <s:SolidColorStroke
                                color="{selectionColor}"
                                weight="1"/>
                        </s:stroke.normalAndShowsCaret>
                        <s:stroke.hoveredAndShowsCaret>
                            <s:SolidColorStroke
                                color="{selectionColor}"
                                weight="1"/>
                        </s:stroke.hoveredAndShowsCaret>
                        <s:stroke.selectedAndShowsCaret>
                            <s:SolidColorStroke
                                color="{selectionColor}"
                                weight="1"/>
                        </s:stroke.selectedAndShowsCaret>
                        <s:fill>
                            <s:SolidColor
                                color.normal="{contentBackgroundColor}"
                                color.normalAndShowsCaret="{contentBackgroundColor}"
                                color.hovered="{rollOverColor}"
                                color.hoveredAndShowsCaret="{rollOverColor}"
                                color.selected="{selectionColor}"
                                color.selectedAndShowsCaret="{selectionColor}"
                                />
                        </s:fill>
                    </s:Rect>
                    
                    <s:SimpleText id="labelDisplay" verticalCenter="0" width="48" top="6" bottom="4"/>
                </s:ItemRenderer>
            </fx:Component>
        </s:itemRenderer>
    </s:List>
</s:Application>

Can you disable the spark list component?

i need to disable the spark list in my application when the user clicks on new story... is that possible?

Set the Boolean enabled property to false.
<?xml version="1.0"?>
<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/mx">
    <s:controlBarContent>
        <s:CheckBox id="ch" label="enabled" selected="true" />
    </s:controlBarContent>
    <s:List id="lst" enabled="{ch.selected}" horizontalCenter="0" verticalCenter="0">
        <s:dataProvider>
            <s:ArrayList source="[One,Two,Three,Four,Five,Six,Seven,Eight]" />
        </s:dataProvider>
    </s:List>
</s:Application>
Peter

Spark list horizontal scroller doesn't actualize when rows is set lesser than list container

Hello,
The size of the Image control is set larger than that of its parent Group container. By default, the child extends past the boundaries of the parent container. Rather than allow the child to extend past the boundaries of the parent container, the Scroller specifies to clip the child to the boundaries and display scroll bars.
In the spark list, when I change the list dataProvider and the size of the Image control is set lesser than that of its parent Group container, the horizontal scroller doesn't actualize.
thanks.


<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/mx" applicationComplete="comp()" width="260" height="400">
    <fx:Script>
        <![CDATA[
    import mx.collections.*;
    public var dpArray:Array;
    [Bindable]
    public var dpCol:ArrayCollection;
    public function handleClick():void {
        dpCol.removeAll();
        dpCol.addItem({ label:"spark test" });
        dpCol.addItem({ label:"spark text" });
    public function comp():void {
        dpCol = new ArrayCollection(dpArray);
        dpCol.addItem({ label:"spark list horizontal scroller doesn't actualize when rows is set lesser than list container" });
        dpCol.addItem({ label:"spark test" });
        dpCol.addItem({ label:"spark text" });
         ]]>
    </fx:Script>
    <s:Panel title="List">
        <s:VGroup left="20" right="20" top="20" bottom="20">
            <s:List width="200" id="lis" dataProvider="{dpCol}" height="120"/>
            <s:Button id="button1" label="Click here!" width="100" fontSize="12" click="handleClick();"/>
        </s:VGroup>
    </s:Panel>
</s:Application>

List component skin or style problem

I am building a scrolling list that pulls data from a xml
file, and binds the data to a list component
I am trying to figure out how to change the look of the list
component.
I need to create a rounded backgound for each list item and I
would like to use a symbol for this.
I can't find a setStyle property to change this and if I try
to adjust the HaloTheme.fla there is no List symbol to change.
How do I access the graphic being used by the list component?
Thanks for any help

You could write your own CellRenderer and apply it to the
list.
http://www.adobe.com/support/documentation/en/flash/fl8/samples.html#component_samples

Removing items from List Component

Below is a function set that's used to get info from an XML
source(s) and populate a List Component (videoList). Works great.
The second function loads data from a separate XML source and
populates the SAME List Component. When the second function is
called it loads the data in addition to the existing data into the
List Component. I want it to REPLACE the data. How would I
accomplish this?
public function getXMLdata(event:Event):void {
var campXML:XML = new XML(xmlLoader.data);
var vid:XML;
for each(vid in campXML.vid) {
videoList.addItem({label:vid.attribute("desc").toXMLString(),
data:vid.attribute("src").toXMLString(),
text:vid.attribute("text").toXMLString()});;
videoList.selectedIndex = 0;
videoList.addEventListener(Event.CHANGE, playnewvid);
FLVPlayer.source = videoList.selectedItem.data;
FLVPlayer.pause();
clipText.text = videoList.selectedItem.text;
public function getXMLdata2(event:Event):void {
var nflXML:XML = new XML(xmlLoader2.data);
var vid:XML;
for each(vid in nflXML.vid) {
videoList.addItem({label:vid.attribute("desc").toXMLString(),
data:vid.attribute("src").toXMLString(),
text:vid.attribute("text").toXMLString()});;
videoList.selectedIndex = 0;
videoList.addEventListener(Event.CHANGE, playnewvid);
FLVPlayer.source = videoList.selectedItem.data;
FLVPlayer.pause();
clipText.text = videoList.selectedItem.text;
}

That took 2 minutes! Works like a charm Manno. Thank you for
your response.
For those curious, here's the solution:
public function getXMLdata(event:MouseEvent):void {
videoList.removeAll();
var campXML:XML = new XML(xmlLoader.data);
var vid:XML;
for each(vid in campXML.vid) {
videoList.addItem({label:vid.attribute("desc").toXMLString(),
data:vid.attribute("src").toXMLString(),
text:vid.attribute("text").toXMLString()});;
videoList.selectedIndex = 0;
videoList.addEventListener(Event.CHANGE, playnewvid);
FLVPlayer.source = videoList.selectedItem.data;
FLVPlayer.pause();
clipText.text = videoList.selectedItem.text;
public function getXMLdata2(event:MouseEvent):void {
videoList.removeAll();
var nflXML:XML = new XML(xmlLoader2.data);
var vid:XML;
for each(vid in nflXML.vid) {
videoList.addItem({label:vid.attribute("desc").toXMLString(),
data:vid.attribute("src").toXMLString(),
text:vid.attribute("text").toXMLString()});;
videoList.selectedIndex = 0;
videoList.addEventListener(Event.CHANGE, playnewvid);
FLVPlayer.source = videoList.selectedItem.data;
FLVPlayer.pause();
clipText.text = videoList.selectedItem.text;
}

How to search XML data from a HTTPMultiService and display the result on the Spark List

Hello all,
I am totally new to Flash Builder and Actionscript and hope someone might be able to help me out. I basically create a mobile app with a single view. The view has a TextInput as a search box and a search button. I conntected a Data/Service using a local XML file and bind the Data to a Spark List. Innitally the List will show nothing until the user enter the search term and hit the button. The List suppose to show the XML data that match the search term.
Now is my problem. I cannot make the List to show the data that match the search text. The List just shows ALL the data.
Here are my MXML code:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:shopping="services.shopping.*"
        title="Search">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            protected function button1_clickHandler(event:MouseEvent):void
                navigator.popView();
            protected function list_creationCompleteHandler(event:FlexEvent):void
                getDataResult.token = shopping.getData();
            protected function seach_clickHandler(event:MouseEvent):void
                getDataResult.token = shopping.getSearchData(searchTxt.text);
        ]]>
    </fx:Script>
    <fx:Declarations>
        <s:CallResponder id="getDataResult"/>
        <shopping:Shopping id="shopping"/>
        
    </fx:Declarations>
    <s:actionContent>
        <s:Button height="79" label="Back" click="button1_clickHandler(event)"/>
    </s:actionContent>
    <s:List id="list" left="0" right="0" top="111" bottom="0"
            creationComplete="list_creationCompleteHandler(event)" labelField="english">
        <s:AsyncListView list="{getDataResult.lastResult}"/>
    </s:List>
    <s:TextInput id="searchTxt" x="80" y="34" width="250" height="49" enabled="true"
                 prompt="search..."/>
    <s:Button id="search" x="338" y="35" width="72" height="49" label="s"
              click="seach_clickHandler(event)"/>
</s:View>
Here is the _Super_Shopping.as file:
* This is a generated class and is not intended for modification. To customize behavior
* of this service wrapper you may modify the generated sub-class of this class - Shopping.as.
package services.shopping
import com.adobe.fiber.core.model_internal;
import com.adobe.fiber.services.wrapper.HTTPServiceWrapper;
import com.adobe.serializers.xml.XMLSerializationFilter;
import mx.rpc.AbstractOperation;
import mx.rpc.AsyncToken;
import mx.rpc.http.HTTPMultiService;
import mx.rpc.http.Operation;
import valueObjects.Shop;
[ExcludeClass]
internal class _Super_Shopping extends com.adobe.fiber.services.wrapper.HTTPServiceWrapper
    private static var serializer0:XMLSerializationFilter = new XMLSerializationFilter();
    // Constructor
    public function _Super_Shopping()
        // initialize service control
        _serviceControl = new mx.rpc.http.HTTPMultiService();
         var operations:Array = new Array();
         var operation:mx.rpc.http.Operation;
         var argsArray:Array;
         operation = new mx.rpc.http.Operation(null, "getData");
         operation.url = "assets/data/shopping.xml";
         operation.method = "GET";
         operation.serializationFilter = serializer0;
         operation.properties = new Object();
         operation.properties["xPath"] = "/::shop";
         operation.resultElementType = valueObjects.Shop;
         operations.push(operation);
         operation = new mx.rpc.http.Operation(null, "getSearchData");
         operation.url = "assets/data/shopping.xml";
         operation.method = "GET";
         operation.resultFormat = "text";
         argsArray = new Array("item");
         operation.argumentNames = argsArray;
         operation.properties = new Object();
         operation.properties["xPath"] = "/::shop";
         operation.resultElementType = valueObjects.Shop;
         operations.push(operation);
         _serviceControl.operationList = operations;
         preInitializeService();
         model_internal::initialize();
    //init initialization routine here, child class to override
    protected function preInitializeService():void
      * This method is a generated wrapper used to call the 'getData' operation. It returns an mx.rpc.AsyncToken whose
      * result property will be populated with the result of the operation when the server response is received.
      * To use this result from MXML code, define a CallResponder component and assign its token property to this method's return value.
      * You can then bind to CallResponder.lastResult or listen for the CallResponder.result or fault events.
      * @see mx.rpc.AsyncToken
      * @see mx.rpc.CallResponder
      * @return an mx.rpc.AsyncToken whose result property will be populated with the result of the operation when the server response is received.
    public function getData() : mx.rpc.AsyncToken
        var _internal_operation:mx.rpc.AbstractOperation = _serviceControl.getOperation("getData");
        var _internal_token:mx.rpc.AsyncToken = _internal_operation.send() ;
        return _internal_token;
    public function getSearchData(item:String) : mx.rpc.AsyncToken
        var _internal_operation:mx.rpc.AbstractOperation = _serviceControl.getOperation("getSearchData");
        var _internal_token:mx.rpc.AsyncToken = _internal_operation.send(item);
        return _internal_token;
The getSearchData() supposed to return XML data that match the search text, but it doesn't. Can anyoen help?
Thank you!

Hi,
are you able to change dynamically the operation.url = "assets/data/shopping.xml";?
i need to do that based on the users input.
Thanks in advance,

Extending a component which already extends a spark list ItemRenderer

Hello everyone,
I have the following situation: Im displaying lists of very similar data objects (they extend the same parent) so in order to avoid a lot of changes to many itemrenderers (if i need to change something in the common properties) when displaying this data, i defined a spark list ItemRenderer (in MXML) which displays the common properties (file called BaseRenderer.mxml):
<s:ItemRenderer>
     //in the script section i override the set data property
     //some MXML labels, checkboxes, etc
</s:ItemRenderer>
Then i created a specific itemrenderer which extended it (file SpecificRenderer.mxml):
<model:BaseRenderer>
     //again i override the set data property
     //some ADITIONAL MXML labels, checkboxes, etc
</model:BaseRenderer>
When i run the app, and when the specific renderer is used, it works (no errors are thrown) , but it only shows the content of specific renderer, nothing from base renderer is visible. Is this the right way to do this, or do i have to override some additional stuff in my specific renderers?
Thank you.
One more thing, i just noticed, if i remove all MXML tags from specific renderer, the content from base renderer becomes visible, seems as if specific content overrides base content. Is there a way to add mxml tags into the specificrenderer?

Yes i suspected them to be merged, and you gave me a great idea. As you say this behavior is true across all mxml defined components, not just itemrenderers. I want to avoid actionscript renderers because i dont (and wont) have any performance issues anyway and i like flexibility in design view, so instead i found another solution which i slightly modified. Some spark components inherit property mxmlContent, which you can override. This is what i came up with in the end: I added the property override into specific renderer and everything is shown as expected (because base elements are merged with the ones from extended component).
override public function set mxmlContent(value:Array):void {
                                        var adding:Boolean = true;
                                        var index:int = 0;
                                        while (adding) {
    var element:IVisualElement = null;
    try {          element = super.getElementAt(index); } catch(e:Error) {          }
    if ( element != null ) {
       value.push(element);
       index += 1;
    else
      adding = false;
                                        value.reverse();
                                        super.mxmlContent = value;

Data Grid in a List Component???

Hi there!
I have a populated List Component set to Multiple Selection.
This list contains titles of a magazine issues.
I wish to allow the user to select one or more items in the
list and enter the quantity of the selected issue(s) he/she wants
to receive.
Is it possible to achieve this with a Data GRid integrated in
the List Component or which simplier solution must I contemplate?
I thank you in advance for indicating the best way to
explore.
Best regards,
Gerry

Hi GWD and thanks for responding.
I fully understood your explanations and the example you
provided.
I'll give it a try, for sure.
But I want to know:
- How do I populate a DataGrid Component? Like a List
Component? (you said they are quite the same, I assume methods to
apply are identical...)
-In the same way, I can pull out the data from a DataGrid as
I do for the List, right?
Thanks again!
Best,
gerry

List Component - Multi-select retrieve data

Hey there,
I'm having trouble retrieving the value of a multi-select
list component. It always traces the last value selected, but I
need to trace all values to parse the data.
I've been using trace(myList.value);
thanks!
Billy

Hi
"selectedItems" will give you the items selected.
var data_array:Array = new Array({data:1, label:"yaho"},
{data:2, label:"proper"}, {data:3, label:"myname"}, {data:4,
label:"thatfigure"}, {data:5, label:"fulltight"}, {data:6,
label:"mythigsare"}, {data:7, label:"thatis"}, {data:8,
label:"thisda"});
lst.dataProvider = data_array;
lst.addEventListener("change", mx.utils.Delegate.create(this,
mySelection));
function mySelection(evt) {
var _items = evt.target.selectedItems;
for (var i = 0; i<_items.length; i++) {
trace(_items
.label);
trace("----------------");

Spark List Itemrenderer items outside of List

I have a spark list and i want some of the items in it to appear out side of the list depending on the users interaction.
Is there a way to make items of an item renderer appear outsid of the LIst container?
When i use basic layout on the lsit and explicitly set the x and y, they appear behind the list.
Thanks.

Hi jmandawg,
My ListRenderer.mxml may be what you want as follows,
<?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" hide="mOut(
null)" mouseMove="mOut(event)" mouseOut="mOutValueItem(event)"mouseDownOutside="mOut(event)" creationComplete="inited()"
autoDrawBackground="
true">
<fx:Script>
<![CDATA[
import mx.controls.TextInput;
import mx.managers.PopUpManager;
import mx.utils.StringUtil;
import flash.text.TextLineMetrics;
public var mouseOnPopup:Boolean = false;
public var vi:mx.controls.TextInput;
private function inited():void {vi =
new mx.controls.TextInput();vi.editable=
false;vi.addEventListener(MouseEvent.MOUSE_OUT, mOut);
vi.addEventListener(MouseEvent.ROLL_OUT, mOut);
vi.addEventListener(MouseEvent.MOUSE_OVER, mOverPopup);
private function mOut(event:MouseEvent):void {
if ( vi.isPopUp ) {PopUpManager.removePopUp(vi)
mouseOnPopup =
false;}
private function mOverPopup(event:MouseEvent):void {mouseOnPopup =
true;}
private function mOutValueItem(event:MouseEvent):void {
if ( vi.isPopUp && !mouseOnPopup) {PopUpManager.removePopUp(vi)
private function mOver(event:MouseEvent):void {
var txt:String = itemValue.texttxt = StringUtil.trim(txt);
if(txt.length<5) return;
if(!vi.isPopUp) {PopUpManager.addPopUp(vi,
this.parent)vi.text=txt;
vi.setStyle(
'fontSize',18);
var txtMetrics:TextLineMetrics = vi.measureText(vi.text);vi.width=txtMetrics.width*1.2
vi.height=itemValue.height*1.4
var p:Point = itemValue.localToGlobal(new Point(itemValue.x, itemValue.y));vi.x=p.x;
vi.y=p.y-10;
]]>
</fx:Script>
<s:TextInput id="itemValue" text="{data.value}" width="200" mouseOver="mOver(event)" mouseOut="mOutValueItem(event)" mouseMove="mOut(event)" editable="false"/>
</s:ItemRenderer>
You may test it with the following in your main.mxml
Bindable]
private var detailAC:ArrayCollection = new ArrayCollection([{value:"nteDevice.device"},{value:
"nteDevice.deviceTypenteDevice.loopbackIpAddr"},{value:
"nteDevice.ipAddressnteDevice.loopbackIpAddr"},{value:
"nteDevice.loopbackIpAddrnteDevice.loopbackIpAddr"}, {value:
"nteDevice.release"},{value:
"nteDevice.releasenteDevice.loopbackIpAddr"},{value:
"nteDevice.clli"},{value:
"nteDevice.provisionStatus"}]);
<s:List id="lst" itemRenderer="com.att.ntscp.view.component.ListRenderer" dataProvider="{detailAC}" width="200" height="200"/>
Is it a little bit trick?
Jeffrey

Spark list filter not working

I have a spark list with custom itemRenderers and I have a filter on the list. I run the filter, but at random times the filter doesn't work. I threw in some trace statements and its passing the filter but the screen doesn't show the filters results. It only shows the results of the last filter. I think it has to do with the spark lists itemRenderer resuse.
Is this a known bug?

The bug is in TileLayout.
If I remove the the TileLayout the list functions as aspected. Here is a simple example. Make sure when running the app to follow these instructions.
1. Run the app (notice the list shows all the items in it)
2. Click "K"
3. Click "All"
4. Look at the Bottom list to see if only two items show even when "ALL" is selected.
5.Repeat steps 2-4 until you see the bug.
<?xml version="1.0" encoding="utf-8"?>

<s:Application name="Spark_List_ensureIndexIsVisible_test"
   xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var array:Array = ['one', 'otwo', 'othree', 'ofour', 'ofive', 'osix', 'oseven', 'oeight', 'nine', 'nten'];
private var myAC:ArrayCollection = new ArrayCollection( array );
private function setAlphaFilter() : void {
if( myAC ) {
myAC.filterFunction = alphaFilter;
myAC.refresh();
private function alphaFilter( item:Object ) : Boolean {
var tempStr:String;
if( String(alphaList.selectedItem.firstName).toLowerCase() == 'all' ) {
return true;
if( item.toLowerCase().charAt(0) == String(alphaList.selectedItem.firstName).toLowerCase() ) { // if something a letter is selected.
return true;
return false;
]]>
</fx:Script>
<s:List id="alphaList" changing="setAlphaFilter()"
width="100%" top="2" bottom="2" left="2" right="2" borderColor="#7F7F7F" >
<s:layout>
<s:HorizontalLayout columnWidth="20" paddingLeft="1" />
</s:layout>

<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:Group top="1">
<s:Label id="blah" text="{data.firstName}" fontSize="13" bottom="1" top="1" right="1" left="1" />
</s:Group>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
<s:dataProvider>
<s:ArrayList>
<fx:Object firstName="All" />
<fx:Object firstName="A" />
<fx:Object firstName="B" />
<fx:Object firstName="C" />
<fx:Object firstName="D" />
<fx:Object firstName="E" />
<fx:Object firstName="F" />
<fx:Object firstName="G" />
<fx:Object firstName="H" />
<fx:Object firstName="I" />
<fx:Object firstName="J" />
<fx:Object firstName="K" />
<fx:Object firstName="L" />
<fx:Object firstName="M" />
<fx:Object firstName="N" />
<fx:Object firstName="O" />
<fx:Object firstName="P" />
<fx:Object firstName="Q" />
<fx:Object firstName="R" />
<fx:Object firstName="S" />
<fx:Object firstName="T" />
<fx:Object firstName="U" />
<fx:Object firstName="V" />
<fx:Object firstName="W" />
<fx:Object firstName="X" />
<fx:Object firstName="Y" />
<fx:Object firstName="Z" />
<fx:Object firstName="1" />
<fx:Object firstName="2" />
<fx:Object firstName="3" />
<fx:Object firstName="4" />
<fx:Object firstName="5" />
<fx:Object firstName="6" />
<fx:Object firstName="7" />
<fx:Object firstName="8" />
<fx:Object firstName="9" />
</s:ArrayList>
</s:dataProvider>
</s:List>
<s:List id="list" width="630" height="100"
horizontalCenter="0" verticalCenter="0" dataProvider="{myAC}" useVirtualLayout="true" allowMultipleSelection="true">
<s:layout>
<s:TileLayout columnWidth="300" rowHeight="50" verticalGap="1" horizontalGap="1"
requestedColumnCount="2" />
</s:layout>
</s:List>
</s:Application>

DataTipFields in Spark Lists?

It doesn't seem like Spark's List controls are fully implemented; at the very least dataTips and dataTipFields aren't. This Halo code works:
<mx:List id="courseCatalog" dataProvider="{getAllCoursesResult.lastResult}" labelField="title" showDataTips="true" dataTipField="slug" ></mx:List>
but the Spark version:
<s:List id="courseCatalog" dataProvider="{getAllCoursesResult.lastResult}" labelField="title" showDataTips="true" dataTipField="slug" ></s:List>
yields these errors.
Cannot resolve attribute 'dataTipField' for component type spark.components.List.
Cannot resolve attribute 'showDataTips' for component type spark.components.List.
Is this a known issue?
--Mike Jennings

Correct, the mx:List and s:List components are two separate components and don't always have the exact same APIs. Most of the time the same functionality exists in both controls, but they may have slightly different names. I believe the latest Flex 4/ActionScript 3.0 Language Reference is posted at http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/ and should list which properties/methods/styles are supported by each component.
As for your dataTip question, this may work for you: http://blog.flexexamples.com/2009/08/15/creating-data-tips-on-a-spark-list-control-in-flex -4/
Not 100% certain about the variable row height, but I can take a look.
Peter

Spark.List Control: right order in selectedItems

Hi there,
How can I get the right order from the selectedItemsArray?
The docs say:
"These Vectors contain a list of the selected indices and selected data items in the reverse order in which they were selected. That means the first element in each Vector corresponds to the last item selected."
But this is not correct. If you have a look in the example "Handling multiple selection in the Spark List control" at the end of
http://help.adobe.com/en_US/flex/using/WSc2368ca491e3ff923c946c5112135c8ee9e-7fff.html
you will see, that the order is switching around at every click you make to select an Item in the list.
Indeed the last selected item is the first item in the array, but the order of the other items is not forseeable...
My Problem:
I'm using a list control as an itemeditor in a datagrid. (BTW: Is there a way to use dropshadow on the control?)
The selectedItems are written to Database as a string in form of "firstselection : secondSelection : thirdSelection".
I also already tried to push the last selectedItem in an array on every change event and join this to a string at focusOut.
But that seems to be to late, because the datagridColums editorDataFiled doesn't take the the new values.
Maybe there are other events , which would be better to use?
Besides how to handle the prevoiuos selectedItems, which comes already from the db. The best would be, if they are already in the right order at the beginning of that array respectivelythe string. "prevSelectedItem1 : prevSelectedItem2 : newSelectedItem1 ..."
Another solution would be to have at least the first selectedItem to be the first Item in the string to be written to the db whether is already selected at the editbeginnig or complete new selections are made.
I hope its understandable, because I'm from Germany
Every help is welcome!
Thanks, Kalle!
            <mx:DataGridColumn headerText="Fliesenart" dataField="prd_art" resizable="false" width="300" editorDataField="artLiSelected" >
                <mx:itemEditor >
                    <fx:Component>
                        <s:MXDataGridItemRenderer height="22" >
                            <fx:Script><![CDATA[
                                import mx.collections.ArrayCollection;
                                import mx.events.FlexEvent;
                                import spark.events.IndexChangeEvent;
                                [Bindable]
                                public var artLiSelected:String;
                                [Bindable]
                                public var artTempArr:Array = new Array();
                                public var artNewTempArr:Array = new Array();
                                protected function artLi_creationCompleteHandler(artStr:String):void
                                    artLiSelected = artStr;
                                    artTempArr = artStr.split(" : ");
                                    var artTempVec:Vector.<Object> = new Vector.<Object>();
                                    for each (var art:Object in artTempArr) {
                                        artTempVec.push(art);
                                    artLi.selectedItems = artTempVec;
                                protected function dataCollector():void {
                                    artNewTempArr.push(artLi.selectedItems[0]);
                                    //artLiSelected = artLi.selectedItems.join(" : ");
                                    trace ("change");
                                protected function dataSubmitter ():void {
                                    artLiSelected = artNewTempArr.join(" : ");
                                    trace ("focusOut");
                            ]]></fx:Script>
                            <s:List id="artLi" height="300" top="5" left="5" right="5"
                                    dataProvider="{outerDocument.artNamesArr}"
                                    change="dataCollector()"
                                    focusOut="dataSubmitter()"
                                    requireSelection="true"
                                     creationComplete="artLi_creationCompleteHandler(data.prd_art)"
                                    allowMultipleSelection="true"
                                    />
                        </s:MXDataGridItemRenderer>
                    </fx:Component>
                </mx:itemEditor>
            </mx:DataGridColumn>

Create your own list which must extend from spark.List and then override the function calculateSelectedIndices.
Then you can do 2 things depending on how you want the order in the selectedItems:
1. Change all the interval.splice to interval.push (now you have the normal order)
2. Change the "for (i = 0; i < selectedIndices.length; i++)" to "for (i = selectedIndices.length -1; i > -1; i--)" (then you have a reversed order)

Paging data in Spark list component

Similar Messages

Maybe you are looking for