選択した項目の itemRenderer へのアクセス
https://stackoverflow.com/questions/2191351
-
25-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
サムネイル画像を含む TileList があります。各サムネイル画像の下に画像の名前を表示します。名前変更機能を構築したいと考えています。したがって、TileList の下には「選択した画像の名前を変更」ボタンがあります。
このボタンをクリックしたときに 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:Image と mx:Text を備えた単なる mx:VBox です。ここには、mx:Text が mx:TextInput に変わる別の mx:State があります。
<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}" />
解決 2
わかりました、プビルコフに感謝します。あなたの答えは私を正しい方向に導きました。私が今行っている方法は、TileList で選択した項目上で F2 キーまたは名前変更ボタンをクリックするとすぐに、データ オブジェクトの name プロパティを "" に設定することです。
その data.name プロパティの itemRenderer に Observe を実装しました (http://blogs.adobe.com/paulw/archives/2006/05/the_worlds_smal.html）。このプロパティが変更されるとすぐに、ラベルではなく入力ボックスを表示するように 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>
