Apache flex 列表的Flex 4 Itemrenderer

Apache flex 列表的Flex 4 Itemrenderer,apache-flex,flash-builder,mxml,Apache Flex,Flash Builder,Mxml,我刚开始使用Flex。我知道这很可悲,但说来话长。 现在,我面临的问题是,我有一个列表组件,上面有一个数据提供者。我想做的是,当列表中的某个项目被单击时,我希望在标签旁边有一个复选标记 以下是组成部分: <s:List id="tabList" width="100%" borderVisible="false" click="tabList_clickHandler(event)" selec

我刚开始使用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)"/>
protectedfunction AddCheck\u clickHandler(事件:MouseEvent):void{
//TODO自动生成的方法存根
var-checkLabel:标签;
checkLabel=新标签();
checkLabel.text=“checkMark”;
变量e:ItemClickEvent=新建ItemClickEvent(ItemClickEvent.ITEM\u CLICK,true);
e、 项目=数据;
e、 索引=项目索引;
调度事件(e);
this.checkRectGroup.addElementAt(checkLabel,e.index);
}

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

一种方法是在dataprovider中的对象中添加一个字段,跟踪是否已选择该项

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

应用程序:

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


你刚才说和Flex一起工作很可怜吗?也许这不是寻求帮助时提出问题的恰当方式?嗯,社区太小了,我找不到更好的词了。不是我讨厌它,而是我认识的人讨厌它;一个小社区并不等同于一项可怜的技术。对不起,你认识的每个人都讨厌Flex。ApacheFlex团队正在用Flex做一些非常酷的事情,包括一些关于“HTML5”输出的伟大实验。如果你想在Flex方面得到帮助,我建议你不要一开始就“抨击”那些使用Flex的人。我已经发布了一个解决方案,概述了一个典型的策略。不是说你需要这样做,只是我推荐的策略的一个例子。给这只猫剥皮的方法不止一种。公平地说,我否决了这个问题(我认为他没有)。Flex非常棒,我知道仍然有很多聪明人在推动它。如果您需要帮助根据您的实施调整以下战略,请发表意见。+1;因为这与我使用的方法相似。反对这一点的最大理由是“数据/模型”对象不应该知道它们的“UI/显示”状态。然而,我还没有找到一种在这种情况下分离数据和UI逻辑的方法,这种方法易于实现和维护。
<?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>