Начальное смещение Flex TileList и обработчик щелчков

У меня есть изображения, которые я хотел бы отобразить в TileList во Flex. Мои размеры TileList - 2 столбца по n строк. Что я хочу сделать, так это отобразить первый элемент (строка 1, столбец 1) пустым и не кликабельным, и начать отображение моих элементов из строки 1, столбца 2. Возможно ли это?

Мне также интересно, когда я создаю событие щелчка для того же TileList, есть ли способ получить индекс элемента, по которому щелкнули?

Спасибо большое!
м.


actionscript-3 apache-flex flex3 mxml tilelist
person errata    schedule 23.10.2009    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Хороший вопрос. Я уверен, что кто-то предложит более элегантное решение, но простой подход может заключаться в том, чтобы просто добавить null к вашему dataProvider в позиции 0 и заставить ваш itemRenderer обрабатывать null, отображая какой-то альтернативный контент, или ничего в все.

Чтобы извлечь индекс выбранного элемента, у объектов ListEvent есть несколько свойств, которые вы можете использовать - event.currentTarget.selectedIndex (или event.currentTarget.selectedIndices, если вы используете множественный выбор), event.columnIndex и. rowIndex или event.itemRenderer, которые, среди прочего, можно использовать в сочетании со свойством itemRendererToIndex объекта TileList.

Вот примерный код приложения, демонстрирующий оба этих подхода:

<?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>

Надеюсь, поможет! Отправьте ответ с вопросами, если они у вас есть.

person Christian Nunciato    schedule 23.10.2009
comment
Большое тебе спасибо! Ваш пример с null в качестве первого элемента и обработкой itemRenderer работает великолепно! Так же, как отображение выбранного индекса из TileList! Большое большое спасибо ;-) - person errata; 23.10.2009