在Flex3中顯示列表ItemRenderer索引

Question

是否有一種直接獲取itemRenderer中數據的項目索引的方法？我需要針對每個項目顯示項目編號。我目前正在做一個解決方法，不會允許重複使用我的itemRenderer組件。

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

這就是我現在使用的，它的工作原理，但是組件重用和數據抽象的概念受到影響。

我使用Flex 3

Answer 1

第一個答案似乎是工作，但速度緩慢。它需要O（n^2）次，因爲它每次都通過dataProvider數組運行以獲取項目索引。 我們可以從listData訪問rowIndex - 它表示當前可見項目的索引。從父列表垂直滾動位置表示滾動的項的金額：

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

Answer 2

您可以使用labelFunction解決您的問題。對於簡單的測試應用程序：

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

您可以使用下面的測試渲染：

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

項目渲染器上有一個項目索引屬性。

this.itemIndex 

樣品：

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