带有图像,文本和'x'的图标,用于在Carousel列表中删除

时间:2021-01-03 18:56:37

I've a carousel, that has got an image and a label that shows a description of the icon. It is done using It has got an ItemRenderer that renders the image above the icon description text. It's very similar to: the carousel in http://livedocs.adobe.com/flex/3/html/help.html?content=dpcontrols_2.html

我有一个旋转木马,它有一个图像和一个标签,显示图标的描述。它是使用它有一个ItemRenderer,它将图像呈现在图标描述文本上方。它非常类似于:http://livedocs.adobe.com/flex/3/html/help.html?content=dpcontrols_2.html中的轮播

Up on click event I display the image and details of some text pertaining that image/icon.

在点击事件中,我显示与该图像/图标有关的一些文本的图像和细节。

Now I wanted to introduce a smaller 'x' icon on top right hand side of the icons so the user could remove the items he's not interested in from the carousel's list of items. This would dispatch a different event so removeIconEvent and clickEvent would be handled differently.

现在我想在图标的右上方引入一个较小的“x”图标,这样用户就可以从旋转木马的项目列表中删除他不感兴趣的项目。这将调度一个不同的事件,因此removeIconEvent和clickEvent将以不同的方式处理。

I'm not sure how to do that. I tried defining custom event but it's not working.

我不知道该怎么做。我尝试定义自定义事件,但它不起作用。

Any ideas? references?

有任何想法吗?参考?

thanks.

谢谢。

1 个解决方案

#1


1  

Well, if thing's first, you need to add that 'x' at the corner of your custom item renderer. Simple enough just a quick <s:Button text="x" /> with position information should do.

好吧,如果是第一个,你需要在自定义项目渲染器的角落添加'x'。只需一个简单的快速 和位置信息就可以了。

What comes next is slightly more difficult since I would imagine you're adding all these images/text using the dataProvider property of the List. First, you need to create a custom event class that has a data property (the data of the item renderer) and then add that event to be dispatched (with bubbling) on the button click event:

接下来会有点困难,因为我想你会使用List的dataProvider属性添加所有这些图像/文本。首先,您需要创建一个具有data属性(项呈示器的数据)的自定义事件类,然后在按钮单击事件上添加要调度的事件(使用冒泡):

<s:Button click="dispatchEvent(new CustomEvent('someEventString', data, true))" />

That event needs to be listened on the List using addEventListener, and when it's received, get the data property and remove it from the dataProvider using removeItem.

需要使用addEventListener在List上侦听该事件,并在收到它时获取data属性并使用removeItem将其从dataProvider中删除。

#1


1  

Well, if thing's first, you need to add that 'x' at the corner of your custom item renderer. Simple enough just a quick <s:Button text="x" /> with position information should do.

好吧,如果是第一个,你需要在自定义项目渲染器的角落添加'x'。只需一个简单的快速 和位置信息就可以了。

What comes next is slightly more difficult since I would imagine you're adding all these images/text using the dataProvider property of the List. First, you need to create a custom event class that has a data property (the data of the item renderer) and then add that event to be dispatched (with bubbling) on the button click event:

接下来会有点困难,因为我想你会使用List的dataProvider属性添加所有这些图像/文本。首先,您需要创建一个具有data属性(项呈示器的数据)的自定义事件类,然后在按钮单击事件上添加要调度的事件(使用冒泡):

<s:Button click="dispatchEvent(new CustomEvent('someEventString', data, true))" />

That event needs to be listened on the List using addEventListener, and when it's received, get the data property and remove it from the dataProvider using removeItem.

需要使用addEventListener在List上侦听该事件,并在收到它时获取data属性并使用removeItem将其从dataProvider中删除。