-4

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)"/>

関数内のコードが間違っています。これは主に、フレックスのすべてを理解していないことが原因です。私にとっては長期的な仕事ではないので、言語を詳細に学ぶ気分にはなりません。また、s:label の代わりに s:List を使用すると、レンダラー ファイルでラベルが表示されなくなります。もちろん、属性テキストを dataprovider={data.selectedItem} に置き換えます。

4

1 に答える 1

2

これにアプローチする 1 つの方法は、アイテムが選択されているかどうかを追跡する 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>

アイテム レンダラー:

<?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>
于 2013-02-26T02:11:47.820 に答える