Flex DataGrid 内联 itemRenderer

我从别人那里听到过一些问题，他们将按钮或者其他的交互式组件放到DataGrid的一个单元格中并且想知道如何通过按钮来改变DataGrid。一个常见的使用就是删除本行记录。这里介绍了一种方法，在一个简单的订单列表中，点击"add tocart"链接会减少库存中货物的数量。当数量减少到0的时候该链接就会被禁用而且其标签更改为“out of stock”。
让我们从声明DataGrid开始。你将会看到一个内联的itemRenderer，对于此问题来说这是一个优雅的解决方案。你也可以使用一个代码相同的自定义组件作为itemRenderer。

程序代码

<mx:DataGrid id="grid" dataProvider="{dp}" selectable="false" y="45" horizontalCenter="0"
                     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>
                                        <![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 = "addToChart";
      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 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的时候不妨考虑一下这种方法。