Flex TileList Start Offset und klicken Handler

Question

Ich habe ein paar Bilder Ich mag würde in TileList in Flex anzuzeigen. Meine TileList Dimensionen sind 2 Spalten von n Zeilen. Was ich tun möchte, ist das erste Element (Zeile 1, Spalte 1) leer und nicht anklickbar angezeigt werden, und von der Reihe, meine Einzelteile zu starten Anzeige 1, Spalte 2. Ist das möglich?

Ich frage mich auch, wenn ich Ereignis für den gleichen TileList erstellen klicken, ist es eine Möglichkeit, einen Index von geklickt Elemente erhalten?

Vielen Dank!
m.

Answer 1

Gute Frage. Ich bin sicher, someone'll biete eine elegantere Lösung, aber ein einfacher Ansatz könnte einfach eine Null auf Ihre Datenprovider an Position 0 hinzufügen sein, und mit Ihren itemRenderer der Null-Griff durch irgendeine Art von alternativem Inhalt angezeigt wird, oder gar nichts alle.

Um den Index des angeklickten Element zu extrahieren, gibt es mehrere Eigenschaften auf die Listevent Objekte, die Sie verwenden können - event.currentTarget.selectedIndex (oder event.currentTarget.selectedIndices, wenn Sie mit Multi-Auswahl), Veranstaltung. column und .rowIndex oder event.itemRenderer, die Sie in Verbindung mit dem TileList des itemRendererToIndex Eigenschaft unter anderem verwenden können.

Hier ist ein Quick-and-dirty App-Code dieser beiden Ansätze zeigen:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">

    <mx:Script>
        <![CDATA[

            import mx.controls.Alert;
            import mx.events.ListEvent;
            import mx.collections.ArrayCollection;

            private var dpSource:Array = [
                null, 
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"}, 
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"},
                {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"}
            ];      

            [Bindable]
            private var dp:ArrayCollection = new ArrayCollection(dpSource);

            private function myList_itemClick(event:ListEvent):void
            {
                Alert.show("You clicked the item at position (" + event.columnIndex + ", " + event.rowIndex + "), which is item " + myList.itemRendererToIndex(event.itemRenderer).toString() + " in the list.");
            } 

        ]]>
    </mx:Script>

    <mx:TileList id="myList" dataProvider="{dp}" itemClick="myList_itemClick(event)">
        <mx:itemRenderer>
            <mx:Component>
                <mx:Canvas>

                    <mx:Script>
                        <![CDATA[

                            override public function set data(value:Object):void
                            {
                                super.data = value;
                            }

                        ]]>
                    </mx:Script>

                    <mx:Image source="{data.src}" width="100" height="60" visible="{data != null}" />
                    <mx:Label text="No item!" visible="{data == null}" />

                </mx:Canvas>
            </mx:Component>
        </mx:itemRenderer>
    </mx:TileList>

</mx:Application>

Hoffe, es hilft! Post zurück mit Fragen, wenn Sie ‚em.