Доступ к itemRenderer выбранного элемента

У меня есть 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: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}" />
Источник

3 ответа

Решение

Хорошо, спасибо, Пбиркофф, твой ответ привел меня в правильном направлении. Теперь я делаю это так: я устанавливаю для свойства name объекта данных значение "", как только F2 или кнопка переименования нажимается на выбранном элементе TileList.

Я реализовал Observe в itemRenderer для этого свойства data.name ( 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>
Источник

Взгляните на этот пример- имеющиеся на месте элементы управления для редактирования могут дать вам возможность начать с ваших элементов управления.

Источник

Я не думаю, что это лучший способ пойти.

То, что я хотел бы сделать, это получить SelectedItem из TileList. Это модель данных для этого изображения (= элемент из вашей коллекции изображений). Я предполагаю, что у этого объекта есть свойство, такое как Name или Title. Попробуйте установить это значение с новым значением. Когда вы создаете объект [Bindable], правильное значение должно появиться в вашем ItemRenderer.

Источник
Другие вопросы по тегам