Display List ItemRenderer Index en Flex3

actionscript-3

Question

¿Hay una manera directa de obtener el índice del artículo de los datos dentro de un itemRenderer? Necesito mostrar el número de artículo en cada artículo. Actualmente estoy haciendo una solución y no permitiré la reutilización de mi componente itemRenderer.

var index:int = model.dataColl.getItemIndex(data) + 1;
itemNo = index.toString();

Esto es lo que estoy usando ahora, funciona, pero los conceptos de reutilización de componentes y abstracción de datos están en peligro.

Estoy usando Flex 3.

Answer 1

El renderizador de elementos tiene una propiedad de índice de elementos.

this.itemIndex

Muestra:

<s:List>
        <s:dataProvider>
            <s:ArrayList>
                <fx:String>Item 1</fx:String>
                <fx:String>Item 2</fx:String>
                <fx:String>Item 3</fx:String>
                <fx:String>Item 4</fx:String>
                <fx:String>Item 5</fx:String>
                <fx:String>Item 6</fx:String>
            </s:ArrayList>
        </s:dataProvider>
        <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer>
                    <s:HGroup>
                        <s:Label text="This index is: {this.itemIndex}" />
                        <s:Label text="{data}" />
                    </s:HGroup>
                </s:ItemRenderer>
            </fx:Component>
        </s:itemRenderer>
    </s:List>

Answer 2

Puede usar labelFunction para resolver su problema. Para la aplicación de prueba simple:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application creationComplete="init()" layout="absolute" xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        private static const DATA_LENGTH:Number = 100;

        [Bindable]
        private var dp:ArrayCollection;

        private function countFinction(item:Object):String
        {
            return (dp.getItemIndex(item) + 1).toString();
        }

        private function init():void
        {
            var dataArray:Array = [];
            for (var i:int = 0; i < DATA_LENGTH; i++)
            {
                var item:Object = { firstName: "First" + (i + 1), lastName: "Last" + (i + 1) };
                dataArray.push(item);
            }
            dp = new ArrayCollection(dataArray);
        }
    ]]>
    </mx:Script>
    <mx:List dataProvider="{dp}" height="500" horizontalCenter="0" itemRenderer="TestRenderer"
        labelFunction="countFinction" verticalCenter="0" width="500" />
</mx:Application>

Puede usar el siguiente procesador de prueba:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox implements="mx.controls.listClasses.IDropInListItemRenderer" xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
    <![CDATA[
        import mx.controls.listClasses.BaseListData;

        private var _listData:BaseListData;

        /**
         * @inheritDoc
         */
        public function get listData():BaseListData
        {
            return _listData;
        }

        [Bindable(event = "listDataChanged")]
        /**
         * @inheritDoc
         */
        public function set listData(value:BaseListData):void
        {
            if (value == _listData)
                return;
            _listData = value;
            dispatchEvent(new Event("listDataChanged"));
        }
    ]]>
    </mx:Script>
    <mx:Label fontWeight="bold" text="{listData.label}" />
    <mx:Label text="{data.firstName + '' '' + data.lastName}" />
</mx:HBox>

Answer 3

La primera respuesta parece estar funcionando, pero lenta. Se necesita O (n ^ 2) tiempo mientras se ejecuta a través de la matriz dataProvider para obtener el índice del elemento cada vez. Podemos acceder a rowIndex desde listData - representa el índice del elemento visible actual. La posición de desplazamiento vertical desde la lista principal representa la cantidad de elementos desplazados:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" implements="mx.controls.listClasses.IDropInListItemRenderer">
<mx:Script>
    <![CDATA[
        import mx.controls.listClasses.BaseListData;
        import mx.controls.listClasses.ListBase;

        [Bindable] private var index:int = 0;

        private var _listData:BaseListData;
        public function get listData():BaseListData
        {
            return _listData;
        }
        public function set listData(value:BaseListData):void
        {
            _listData = value;
        }

        override public function set data(value:Object):void
        {
            super.data = value;
            if (data && listData)
                index = _listData.rowIndex + ListBase(_listData.owner).verticalScrollPosition;
            else
                index = 0;
        }
    ]]>
</mx:Script>
<mx:Label text="{index}"/>
<mx:Label text="{data.toString()}"/>
</mx:HBox>