内联 itemRenderer
12月 20th, 2006 — Dreamer英文原文：《Inline itemRenderer》
原文地址：http://weblogs.macromedia.com/pent/archives/2006/12/inline_itemrend.cfm
原文作者：Peter Ent
译者：Dreamer。 本文未经同意，谢绝转载。
近来我很高兴和我们的一个客户Davita 的 Ryan Green一起工作，他同意我公开这一段代码。我喜欢这段代码因为它虽然很简单然而却包含了很多有趣的东西。在这个例子中我对Ryan 的原始代码做了一些更改。
下载例子源码：点击这里
我从别人那里听到过一些问题，他们将按钮或者其他的交互式组件放到DataGrid的一个单元格中并且想知道如何通过按钮来改变DataGrid。一个常见的使用就是删除本行记录。这里介绍了一种方法，在一个简单的订单列表中，点击"add to cart"链接会减少库存中货物的数量。当数量减少到0的时候该链接就会被禁用而且其标签更改为“out of stock”。
让我们从声明DataGrid开始。你将会看到一个内联的itemRenderer，对于此问题来说这是一个优雅的解决方案。你也可以使用一个代码相同的自定义组件作为itemRenderer。
private function sendEvent() : void ]]>
width="390" height="169">
<mx:columns>
<mx:DataGridColumn headerText="Product" dataField="product"/>
<mx:DataGridColumn headerText="Quantity" dataField="quantity"/>
<mx:DataGridColumn headerText="Order" dataField="action" >
<mx:itemRenderer>
<mx:Component>
<mx:LinkButton label="{data.action}"
enabled="{data.quantity > 0}"
click="sendEvent()">
<mx:Script>
<
最后一列的itemRenderer是一个LinkButton。LinkButton的label是相应记录中"action"域的值。只有"quantity"域的值大于0的时候LinkButton才是激活的。当点击LinkButton的时候，会调用脚本代码中的sendEvent()方法。
注意：此处的itemRenderer是一个LinkButton，但是你也可以使用一个容器，比如一个Canvas，然后将LinkButton和其他与你的数据相关的组件放进去。
处理的点击事件方法sendEvent会分派一个ChartEvent（一个自定义事件）。ChartEvent只针对本行的数据记录。
注意：如果你对itemRenderer很陌生，请记住多数Flex组件，包括用来作为itemRenderer的组件都有一个data属性。这个属性是由dataProvider中与itemRenderer所在行相应的记录所设定的。
下面是CartEvent类的代码：
public function CartEvent(data:Object, bubbles:Boolean=true, cancelable:Boolean=false)
{
static public const ADD_TO_CART:String = "addToChart";
{
super(ADD_TO_CART, bubbles, cancelable);
this.data = data;
}
public var data:Object;
}
这里没有多少需要说明的。事件类型是"addToCart"。这不是DataGrid分派的事件，那么你将如何监听并使用这个事件呢？问题的关键在于事件的bubbles属性的值：它默认在CartEvent构造函数中被设定为true。
由于DataGrid并不正式地支持"addToCart"，所以你不能将它作为一个属性放到<mx:DataGrid>标签中。但是你可以在ActionScript中为它设定一个事件处理器：
使用customHander()函数：
{
// the data record is included in the event; it can be modified and
// put back into the dataProvider where it will be picked up by the
// DataGrid
event.data.quantity -= 1;
dp.itemUpdated(event.data,"quantity");
if( event.data.quantity <= 0 ) {
event.data.action = "out of stock";
dp.itemUpdated(event.data,"action");
}
}
当某一行中的LinkButton被点击的时候，将会分派一个CartEvent，该事件将由customHandler()函数处理。这个函数将更改对应数据记录的"quantity"的值然后dataProvider就被更新了。当"quantity"的值变成0的时候，"action"域中的文本将会更改为"out of stock"，同时dataProvider也将被更新。
一直点击Sprockets产品（看下图）的"add to cart"的链接直到它的数量减为0。然后LinkButton的标签就会变成"out of stock"并且被禁用。
注意当数据更新的时候属性的名字也传给了itemUpdated()方法，这样做可以保证只有那个域被更新了。如果dataProvider有排序操作的话，该域不是排序的一部分，更新它不会引发dataProvider自动排序。
这个例子可以有很多变型。例如，CartEvent可以传递行的索引而不是数据本身，然后customHandler就可以使用该索引从dataProvider中提取数据。在某些情况下索引可能比数据本身更有价值，或者你也可以同时使用这两个。
那么itemClick呢？
现在你可能会想：只通过itemClick就达到上述的目的阿，为何还好那样做？。没错，使用itemClick你可以知道哪一行的哪个域被点击了。然后你就可以更新数据，DataGrid中的显示也会自动更新。
但是这种方法的优势是：你有一个可交互的单元格——在本例中是一个LinkButton，但是它可以很复杂。当你需要一个自定义的itemRenderer的时候不妨考虑一下这种方法。
本文链接: http://www.zhuoqun.net/html/y2006/373.html 转载请注明出处，谢谢。
TrackBack引用地址：http://www.zhuoqun.net/html/y2006/373.html/trackback
谢谢你的文章帮助我解决了一个棘手的问题！