Question

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

以下是组件：

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

以下是Itemrenderer代码：

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}替换属性文本。

Answer 1

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

然后，在项呈示器中，检查此字段并决定是否显示复选标记。这是一个有效的示例app和渲染器：

应用：

<?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列表

1 个答案: