用于列表的 Flex 4 Itemrenderer [英] Flex 4 Itemrenderer for List

问题描述

我刚开始使用 Flex.我知道这很可悲，但这是一个很长的故事.现在，我面临的问题是我有一个列表组件，上面有一个数据提供程序.我想要做的是，当单击列表中的一个项目时，我希望在标签旁边有一个复选标记.

I just started working with Flex. I know it's pathetic but it's a long story. Now, the problem I am facing is that I have a list component which has a dataprovider on it. What I would like to do is when an item on the list is clicked I would like to have a check sign right next to the label.

以下是组件:

<s:List id="tabList" width="100%"
                        borderVisible="false" click="tabList_clickHandler(event)"
                        selectedIndex="{this.hostComponent.selectedIndex}"
                        itemRenderer="MultiTabListRenderer" />

以下是Itemrenderer代码:

Below is the Itemrenderer code:

protected function AddCheck_clickHandler(event:MouseEvent):void {
        // TODO Auto-generated method stub
        var checkLabel:Label;
        checkLabel = new Label();
        checkLabel.text = "checkMark";

        var e: ItemClickEvent = new ItemClickEvent(ItemClickEvent.ITEM_CLICK, true);
        e.item = data;
        e.index = itemIndex;
        dispatchEvent(e);
        this.checkRectGroup.addElementAt(checkLabel, e.index);
    }

<s:Label id="customMultitabList" text="{data.label}"
             left="10" right="0" top="6" bottom="6" click="AddCheck_clickHandler(event)"/>

我在函数内部的代码是错误的，这主要是因为我对 flex 中的每一个都不太了解.我没有心情详细学习这门语言，因为这对我来说不是一项长期的工作.此外，在渲染器文件中，当我使用 s:List 而不是 s:label 时，我再也看不到标签了.当然我用 dataprovider={data.selectedItem} 替换了属性文本.

My code inside the function is wrong which is mainly due to the fact that I do not understand each and everything in flex. I am not in a mood to learn the language in detail because it's not a long term work for me. Also, in the renderer file when I use s:List instead of s:label I do not see the labels anymore. Of course I replace the attribute text with dataprovider={data.selectedItem}.

推荐答案

解决此问题的一种方法是向 dataProvider 中的对象添加一个字段，用于跟踪项目是否已被选中.

One way to approach this is to add a field to the objects in your dataProvider that tracks whether or not the item has been selected.

然后，在您的项目渲染器中，您检查此字段并决定是否显示复选标记.这是一个工作示例应用程序和渲染器:

Then, in your item renderer, you inspect this field and decide whether or not to display the checkmark. Here's a working example app and renderer:

应用:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*"
               creationComplete="application1_creationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.CollectionEvent;
            import mx.events.CollectionEventKind;
            import mx.events.FlexEvent;
            import mx.events.PropertyChangeEvent;
            import mx.events.PropertyChangeEventKind;

            private var collection:ArrayCollection;

            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                collection = new ArrayCollection([
                    { label: 1, selected: false },
                    { label: 2, selected: false },
                    { label: 3, selected: false }]);

                listbert.dataProvider=collection;
            }

            protected function listbert_clickHandler(event:MouseEvent):void
            {
                var index:int = listbert.selectedIndex;
                var item:Object = listbert.selectedItem;
                item.selected = !item.selected;
                // Create these events because the items in the ArrayCollection
                // are generic objects. It shouldn't be necessary if items in
                // your collection are a Class that extends EventDispatcher
                // see ArrayList::startTrackUpdates()
                var e:PropertyChangeEvent = new PropertyChangeEvent(
                    PropertyChangeEvent.PROPERTY_CHANGE, false,false,
                    PropertyChangeEventKind.UPDATE, 'selected', !item.selected,
                    item.selected, item);

                collection.dispatchEvent(new CollectionEvent(
                    CollectionEvent.COLLECTION_CHANGE, false,false,
                    CollectionEventKind.UPDATE, index, index, [e]));
            }

        ]]>
    </fx:Script>

        <s:List id="listbert" click="listbert_clickHandler(event)" itemRenderer="TestRenderer"/>
</s:Application>

项目渲染器:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" >
    <fx:Script>
        <![CDATA[

            override public function set data(value:Object):void
            {
                super.data = value;
                labelDisplay.text = value.label;
                if (value.selected)
                    checkMarkLabel.text = "✓";
                else
                    checkMarkLabel.text = "";
            }
        ]]>
    </fx:Script>

    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>
    <s:Label id="labelDisplay" />
    <s:Label id="checkMarkLabel" />
</s:ItemRenderer>

这篇关于用于列表的 Flex 4 Itemrenderer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！