訪問所選項目的itemRenderer

我有一個TileList縮略圖。在每個縮略圖圖像下，我顯示圖像的名稱。我想建立重命名功能。所以在TileList下是一個「重命名選定的圖像」按鈕。訪問所選項目的itemRenderer

單擊此按鈕時，我想更改itemRenderer組件的狀態。圖像下方的標籤將更改爲TextInput，以便用戶可以輸入新名稱。這很像Windows重命名文件功能。

如何訪問所選圖像的itemRenderer？我怎樣才能讓它收聽重命名按鈕的點擊事件？

一些代碼：

<mx:TileList id="imageTileList" width="100%" height="100%" doubleClickEnabled="true" 
itemsChangeEffect="{tileListEffect}" dataProvider="{images}" 
keyDown="{tileListKeyDownHandler(event)}" 
itemRenderer="com.n200.components.htmlElement.ImageTile" 
columnWidth="128" rowHeight="128" itemDoubleClick="{insertImage()}" 
horizontalScrollPolicy="off" verticalScrollPolicy="auto" /> 

<mx:LinkButton label="Rename selected image" labelPlacement="left" 
    enabled="{imageTileList.selectedIndex>0}" 
    styleName="rename24" click="{renameSelectedImage()}" /> 


<mx:Script> 
<![CDATA[ 
    private function renameSelectedImage():void 
    { 
     // Need to access itemRenderer of selected image here 
    } 
]]> 
</mx:Script>

的itemRenderer只是一個MX：VBox中的MX：圖像和MX：文本。在還有另一個MX：狀態，其中MX：文本變成一個MX：的TextInput：

<mx:states> 
    <mx:State name="rename"> 
     <mx:RemoveChild target="{imageName}" /> 
     <mx:AddChild> 
      <mx:TextInput id="newName" text="{originalName}" keyDown="{textInputKeyDownHandler(event)}" 
       width="100%" focusOut="{commit()}" focusThickness="0" /> 
     </mx:AddChild> 
    </mx:State> 
</mx:states> 

<enterComponents:P200Image source="{imgFunction?imgFunction.fileId:null}" width="82" height="82" verticalAlign="bottom" stretch="true" /> 
<mx:Text id="imageName" text="{imgFunction.name}" selectable="false" truncateToFit="true" 
    textAlign="center" width="82" toolTip="{imgFunction.name}" />

來源

2010-02-03 Bocaxica

好的，謝謝Pbirkoff，你的回答讓我朝着正確的方向前進。我現在的做法是在F2或重命名按鈕單擊TileList選定項目後立即將數據對象的名稱屬性設置爲「」。

我已經在data.name屬性（http://blogs.adobe.com/paulw/archives/2006/05/the_worlds_smal.html）的itemRenderer中實現了Observe。只要此屬性更改，我將更改itemRenderer的狀態以顯示輸入框而不是標籤。

這和Windows文件瀏覽器現在一樣工作。

一些代碼的itemRenderer的一些相關功能：

<mx:states> 
    <mx:State name="rename"> 
     <mx:RemoveChild target="{imageName}" /> 
     <mx:AddChild> 
      <mx:TextInput id="newName" text="{originalName}" keyDown="{textInputKeyDownHandler(event)}" 
       width="100%" focusOut="{commit()}" focusThickness="0" /> 
     </mx:AddChild> 
    </mx:State> 
</mx:states> 

<enterComponents:P200Image source="{imgFunction?imgFunction.fileId:null}" width="82" height="82" verticalAlign="bottom" stretch="true" /> 
<mx:Text id="imageName" text="{imgFunction.name}" selectable="false" truncateToFit="true" 
    textAlign="center" width="82" toolTip="{imgFunction.name}" /> 

<util:Observe source="{imgFunction.name}" handler="{nameChangedHandler}" /> 

<mx:Script> 
    <![CDATA[ 
     [Bindable] 
     private var imgFunction:ImageFunctionRecord; 

     [Bindable] 
     public override function set data(value:Object):void 
     { 
      super.data = value; 
      if(value) 
      { 
       imgFunction = ImageFunctionRecord(value); 
       originalName = imgFunction.name; 
      } 
      else 
      { 
       imgFunction = null; 
      } 
     } 
     public override function get data():Object 
     { 
      return imgFunction; 
     } 

     private function nameChangedHandler():void 
     { 
      if (imgFunction.name.length == 0) 
       // when rename is clicked, the name property will be set to "" 
       renameImage(); 
      else 
       originalName = imgFunction.name; 
     } 


     private function renameImage():void 
     { 
      currentState = "rename"; 
      newName.setFocus(); 
      selectAllText(); 
     } 

    ]]> 
</mx:Script>

來源

2010-02-12 09:53:19 Bocaxica

-1

我不認爲這是最好的一段路要走。

我會做的是從TileList中獲取SelectedItem。這是該圖像的數據模型（=圖像集合中的一個項目）。我猜這個對象有一個屬性，如Name或Title。嘗試用新值設置此值。當您製作對象[Bindable]時，正確的值應該出現在您的ItemRenderer中。

來源

2010-02-03 12:43:44 Pbirkoff

您好，感謝答案。這不是我正在尋找的。我試圖澄清。我所追求的是重命名功能，如Windows文件瀏覽器的重命名功能。如果您單擊列出的項目，然後按F2，文件的名稱將更改爲TextInput。用戶可以在列表中輸入新名稱。這是我想要實現的，這意味着我需要更改我的itemRenderer的狀態，以便文本更改爲輸入並且名稱變爲可編輯。 – Bocaxica 2010-02-03 13:18:17

好吧，我明白你的意思。不過，我認爲這不是最好的選擇。不建議直接訪問itemrenderer（如此處所述：http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html）。你應該讓行動從itemrenderer內部進行。希望你找到一種方法來做到這一點！ – Pbirkoff 2010-02-04 15:52:58

看看this example - 就地編輯控件可能會爲您提供一個開始控制的地方。

來源

2010-02-03 17:56:46

訪問所選項目的itemRenderer

回答

相關問題