0

我有一个带有缩略图的 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}" />
4

3 回答 3

0

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

我已经在该 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-12T09:53:19.053 回答
0

看看这个例子——就地编辑控件可能会给你一个从控件开始的地方。

于 2010-02-03T17:56:46.623 回答
-1

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

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

于 2010-02-03T12:43:44.470 回答