内联 itemRenderer

最新推荐文章于 2023-04-06 09:39:15 发布

shangmw

最新推荐文章于 2023-04-06 09:39:15 发布

阅读量517

点赞数

分类专栏： Flex.DataGrid 文章标签： datagrid actionscript flex function object string

Flex.DataGrid 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

内联 itemRenderer

12月 20th, 2006 — Dreamer

英文原文：《Inline itemRenderer》

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

译者：Dreamer。本文未经同意，谢绝转载。

内联 itemRenderer

用来更新数据的itemRenderer

近来我很高兴和我们的一个客户Davita 的 Ryan Green一起工作，他同意我公开这一段代码。我喜欢这段代码因为它虽然很简单然而却包含了很多有趣的东西。在这个例子中我对Ryan 的原始代码做了一些更改。

下载例子源码：点击这里

我从别人那里听到过一些问题，他们将按钮或者其他的交互式组件放到DataGrid的一个单元格中并且想知道如何通过按钮来改变DataGrid。一个常见的使用就是删除本行记录。这里介绍了一种方法，在一个简单的订单列表中，点击"add to cart"链接会减少库存中货物的数量。当数量减少到0的时候该链接就会被禁用而且其标签更改为“out of stock”。

让我们从声明DataGrid开始。你将会看到一个内联的itemRenderer，对于此问题来说这是一个优雅的解决方案。你也可以使用一个代码相同的自定义组件作为itemRenderer。

<mx:DataGrid id=&#34;grid&#34; dataProvider=&#34;{dp}&#34; sel&#101;ctable=&#34;false&#34; y=&#34;45&#34; horizontalCenter=&#34;0&#34;
width=&#34;390&#34; height=&#34;169&#34;>
<mx:columns>
<mx:DataGridColumn headerText=&#34;Product&#34; dataField=&#34;product&#34;/>
<mx:DataGridColumn headerText=&#34;Quantity&#34; dataField=&#34;quantity&#34;/>
<mx:DataGridColumn headerText=&#34;Order&#34; dataField=&#34;action&#34; >
<mx:itemRenderer>
<mx:Component>
<mx:LinkButton label=&#34;{data.action}&#34;
enabled=&#34;{data.quantity > 0}&#34; 
click=&#34;sendEvent()&#34;>
<mx:Script>
<![CDATA[ 
 private function sendEvent() : void
{
dispatchEvent( new CustomEvent(data) );
}
 ]]>
</mx:Script>
</mx:LinkButton>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>

效果如图：

最后一列的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 class CartEvent extends Event
{
static public const ADD_TO_CART:String = &#34;addToChart&#34;; 
 public function CartEvent(data:Object, bubbles:Boolean=true, cancelable:Boolean=false)
{
super(ADD_TO_CART, bubbles, cancelable);
this.data = data;
}
public var data:Object;
}

这里没有多少需要说明的。事件类型是"addToCart"。这不是DataGrid分派的事件，那么你将如何监听并使用这个事件呢？问题的关键在于事件的bubbles属性的值：它默认在CartEvent构造函数中被设定为true。

由于DataGrid并不正式地支持"addToCart"，所以你不能将它作为一个属性放到<mx:DataGrid>标签中。但是你可以在ActionScript中为它设定一个事件处理器：

grid.addEventListener(CartEvent.ADD_TO_CART, customHandler);

使用customHander()函数：

private function customHandler( event:CartEvent ) : void
{
// the data record is included in the event; it can be modified and
// put back into the dataProvider wh&#101;re it will be picked up by the
// DataGrid
event.data.quantity -= 1;
dp.itemUp&#100;ated(event.data,&#34;quantity&#34;);
if( event.data.quantity <= 0 ) {
event.data.action = &#34;out of stock&#34;;
dp.itemUp&#100;ated(event.data,&#34;action&#34;);
}
}

当某一行中的LinkButton被点击的时候，将会分派一个CartEvent，该事件将由customHandler()函数处理。这个函数将更改对应数据记录的"quantity"的值然后dataProvider就被更新了。当"quantity"的值变成0的时候，"action"域中的文本将会更改为"out of stock"，同时dataProvider也将被更新。

一直点击Sprockets产品（看下图）的"add to cart"的链接直到它的数量减为0。然后LinkButton的标签就会变成"out of stock"并且被禁用。