Dreamer’s Blog Dreamer's Blog

英文原文：《Inline itemRenderer》 English text: "Inline itemRenderer"

原文地址：http://weblogs.macromedia.com/pent/archives/2006/12/inline_itemrend.cfm Original Address: http://weblogs.macromedia.com/pent/archives/2006/12/inline_itemrend.cfm
原文作者：Peter Ent Original Author: Peter Ent

译者：Dreamer。 Translator: Dreamer. 本文未经同意，谢绝转载。 In this paper, without consent, refused to reprint.

近来我很高兴和我们的一个客户Davita 的Ryan Green一起工作，他同意我公开这一段代码。 Recently I am glad that one of our customers and Davita's Ryan Green to work together, he agreed that I open this section of the code. 我喜欢这段代码因为它虽然很简单然而却包含了很多有趣的东西。 I like it because although the code is very simple but it contains many interesting things. 在这个例子中我对Ryan 的原始代码做了一些更改。 In this example I have the original code Ryan has made some changes.

下载例子源码： 点击这里 Download example source: Click here

我从别人那里听到过一些问题，他们将按钮或者其他的交互式组件放到DataGrid的一个单元格中并且想知道如何通过按钮来改变DataGrid。 I heard from others where a number of issues, they will button or other interactive components DataGrid put in a cell and would like to know how the button to change the DataGrid. 一个常见的使用就是删除本行记录。 A common use is to delete records of the Bank. 这里介绍了一种方法，在一个简单的订单列表中，点击"add to cart"链接会减少库存中货物的数量。 But here is a method, in a simple list of orders, click the "add to cart" link will reduce the quantity of goods in stock. 当数量减少到0的时候该链接就会被禁用而且其标签更改为“out of stock”。 When the number reduced to 0 when the link will be banned and their labels changed to "out of stock".

让我们从声明DataGrid开始。 Let us start from the DataGrid statement. 你将会看到一个内联的itemRenderer，对于此问题来说这是一个优雅的解决方案。 You will see a joint within the itemRenderer, this issue, this is an elegant solution. 你也可以使用一个代码相同的自定义组件作为itemRenderer。 You can also use a custom code the same components as itemRenderer.

效果如图： Figure results:

最后一列的itemRenderer是一个LinkButton。 Finally one of the itemRenderer is a LinkButton. LinkButton的label是相应记录中"action"域的值。 LinkButton the label is the corresponding records of the "action" domain value. 只有"quantity"域的值大于0的时候LinkButton才是激活的。 Only "quantity" domain value greater than 0 when the LinkButton is activated. 当点击LinkButton的时候，会调用脚本代码中的sendEvent()方法。 When you click LinkButton when the script code will be called in sendEvent () method.

注意：此处的itemRenderer是一个LinkButton，但是你也可以使用一个容器，比如一个Canvas，然后将LinkButton和其他与你的数据相关的组件放进去。 Note: The itemRenderer here is a LinkButton, but you can also use a container, such as a Canvas, then you LinkButton and other data related to the components into.

处理的点击事件方法sendEvent会分派一个ChartEvent（一个自定义事件）。 Click on the method of handling the incident will be assigned a sendEvent ChartEvent (a custom case). ChartEvent只针对本行的数据记录。 ChartEvent only for the Bank's data records.

注意：如果你对itemRenderer很陌生，请记住多数Flex组件，包括用来作为itemRenderer的组件都有一个data属性。 Note: If you itemRenderer very strange, keep in mind that the majority of Flex components, including components used as a itemRenderer have a data attribute. 这个属性是由dataProvider中与itemRenderer所在行相应的记录所设定的。 This attribute is dataProvider itemRenderer in the row with the corresponding records set.

下面是CartEvent类的代码： Below are the CartEvent category code:

这里没有多少需要说明的。 There is no need to note the number. 事件类型是"addToCart"。 Type of event is "addToCart". 这不是DataGrid分派的事件，那么你将如何监听并使用这个事件呢？ This is not the case assigned DataGrid, you will monitor and how to use this incident? » 问题的关键在于事件的bubbles属性的值：它默认在CartEvent构造函数中被设定为true。 The crux of the problem lies in the event the value of property bubbles: It default in CartEvent structural function is set to true.

由于DataGrid并不正式地支持&#34;addToCart&#34;，所以你不能将它作为一个属性放到<mx:DataGrid>标签中。 As DataGrid does not officially support the "addToCart", so you can not put it as an attribute <mx: DataGrid> tab. 但是你可以在ActionScript中为它设定一个事件处理器： But you can set it ActionScript for an event processor:

使用customHander()函数： The use of customHander () function:

当某一行中的LinkButton被点击的时候，将会分派一个CartEvent，该事件将由customHandler()函数处理。 When a line of the LinkButton is clicked, will be assigned a CartEvent, the incident will be customHandler () function processing. 这个函数将更改对应数据记录的&#34;quantity&#34;的值然后dataProvider就被更新了。 This function will change the corresponding data records "quantity" and the value of the dataProvider been updated. 当&#34;quantity&#34;的值变成0的时候，&#34;action&#34;域中的文本将会更改为&#34;out of stock&#34;，同时dataProvider也将被更新。 When the "quantity" of the time value of a 0, "action" domain of the text will be changed to "out of stock", while dataProvider will also be updated .

一直点击Sprockets产品（看下图）的&#34;add to cart&#34;的链接直到它的数量减为0。 Click product has been Sprockets (unless they) of the "add to cart" the link until it reduced the number of 0. 然后LinkButton的标签就会变成&#34;out of stock&#34;并且被禁用。 LinkButton then the label will become "out of stock" and is disabled.

注意当数据更新的时候属性的名字也传给了itemUp&#100;ated()方法，这样做可以保证只有那个域被更新了。 Attention to the time when the data is updated attributes also passed on the names of the itemUpdated () method, it can only guarantee that domain been updated. 如果dataProvider有排序操作的话，该域不是排序的一部分，更新它不会引发dataProvider自动排序。 If dataProvider a sort of operation, this domain is not part of the sort, update it will not lead automatically to sort dataProvider.

这个例子可以有很多变型。 This example, there can be many variations. 例如，CartEvent可以传递行的索引而不是数据本身，然后customHandler就可以使用该索引从dataProvider中提取数据。 For example, CartEvent line can transfer data rather than the index itself, and then customHandler can use the index to extract data from the dataProvider. 在某些情况下索引可能比数据本身更有价值，或者你也可以同时使用这两个。 In some cases the index may be more valuable than the data itself, or you can use these two.

那么itemClick呢？ So it itemClick »

现在你可能会想：只通过itemClick就达到上述的目的阿，为何还好那样做？ Now you might think: only through itemClick to achieve the above purpose of Afghanistan, why did better » 。 . 没错，使用itemClick你可以知道哪一行的哪个域被点击了。 Yes, you can use itemClick know what the line which was clicked on the domain. 然后你就可以更新数据，DataGrid中的显示也会自动更新。 Then you can update the data, DataGrid of the show will be updated automatically.

但是这种方法的优势是：你有一个可交互的单元格——在本例中是一个LinkButton，但是它可以很复杂。 However, the advantages of this method is: you can interact with a cell - in this case is a LinkButton, but it can be very complicated. 当你需要一个自定义的itemRenderer的时候不妨考虑一下这种方法。 When you need a custom itemRenderer the time may wish to consider this approach.

分享收藏 Share collections