我有一个带有缩略图的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:State中,mx:Text变为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-12 17:53:19
好的,谢谢Pbirkoff,你的回答把我引向了正确的方向。我现在的做法是,只要在TileList selected项上单击F2或rename按钮,就会将数据对象的name属性设置为"“。
我已经在该data.name属性(http://blogs.adobe.com/paulw/archives/2006/05/the_worlds_smal.html)的itemRenderer中实现了一个观察者。一旦此属性发生更改,我就会更改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-04 01:56:47
看看this example--就地编辑控件可能为您提供了一个开始使用控件的地方。
发布于 2010-02-03 20:43:44
我不认为这是最好的方法。
我要做的是从TileList获取SelectedItem。这是此图像的数据模型(=图像集合中的一项)。我猜这个对象有一个像Name或Title这样的属性。尝试使用新值设置此值。当您将对象设置为可绑定时,正确的值应该出现在ItemRenderer中。
https://stackoverflow.com/questions/2191351
复制相似问题