Question

我有一个带缩略图的TileList。在每个缩略图图像下，我显示图像的名称。我想构建重命名功能。因此，在TileList下面是“重命名所选图像”按钮。

单击此按钮时，我想更改itemRenderer组件的状态。图像下方的标签将更改为TextInput，以便用户可以键入新名称。这很像Windows重命名文件功能。

如何访问所选图像的itemRenderer？如何才能听到Rename按钮的click事件呢？

一些代码：

<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：Image和mx：Text。在另一个mx：状态中，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}" />

Answer 1

查看this example - 现有的编辑控件可能会为您提供一个从控件开始的位置。

Answer 2

好的，谢谢Pbirkoff，你的回答让我朝着正确的方向前进。我现在这样做的方法是，只要在TileList所选项目上单击F2或重命名按钮，我就会将数据对象的name属性设置为“”。

我在itemRenderer中对该data.name属性（http://blogs.adobe.com/paulw/archives/2006/05/the_worlds_smal.html）实现了一个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>

Answer 3

我不认为这是最好的方式。

我要做的是从TileList中获取SelectedItem。这是此图像的数据模型（=图像集合中的项目）。我猜这个对象有一个像Name或Title这样的属性。尝试使用新值设置此值。当您创建对象[Bindable]时，正确的值应出现在ItemRenderer中。

访问所选项目的itemRenderer

3 个答案: