Flex4でカスタムMXAdvancedDataGridItemRendererを作成する方法を教えてください。

Question

まあ、私は1つを作成したが、それは問題の束を持っています

• 私はエラーを取得し、レンダリング列でクリックした場合：

TypeError: Error #1009: Cannot access a property or method of a null object reference. at Test/clickHandler()[C:\Documents and Settings\NDEGRAEV\workspace-dummy\Test\src\Test.mxml:27] at Test/___Test_AdvancedDataGrid1_click()[C:\Documents and Settings\NDEGRAEV\workspace-dummy\Test\src\Test.mxml:31]

• テキストはにこだわっていますセルの左上隅。
• セルの背景が選択された背景に変化しません。

私はFlexには新しく、おそらく完全に間違っていますが、ここではネット上のカスタムMXAdvancedDataGridItemRendererの例はあまりありません。あなたは正しい方向に私を向けることができますか？

Test.mxml

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" 
       xmlns:test="*" 
       initialize="init()"> 
    <fx:Script> 
     <![CDATA[ 
      import mx.collections.ArrayCollection; 
      import mx.controls.Alert; 

      [Bindable] 
      private var data:ArrayCollection = new ArrayCollection(); 

      private function init():void { 
       var dataItem:DataItem = new DataItem(1000, 1000); 
       this.data.addItem(dataItem); 
       dataItem = new DataItem(1001, 1001); 
       this.data.addItem(dataItem); 
      } 

      private function clickHandler(e:Event):void { 
       var dataItem:DataItem = e.currentTarget.selectedItem as DataItem; 
       Alert.show(dataItem.col1 + ' ' + dataItem.col2); 
      } 
     ]]> 
    </fx:Script> 
    <mx:AdvancedDataGrid dataProvider="{data}" click="clickHandler(event);" x="0" y="0" designViewDataType="flat"> 
     <mx:columns> 
      <mx:AdvancedDataGridColumn dataField="col1" headerText="Column 1"/> 
      <mx:AdvancedDataGridColumn dataField="col2" headerText="Column 2" id="column2"/> 
     </mx:columns> 
     <mx:rendererProviders> 
      <mx:AdvancedDataGridRendererProvider column="{column2}" renderer="MyRenderer" /> 
     </mx:rendererProviders> 
    </mx:AdvancedDataGrid> 
</s:Application> 

MyRenderer.mxml

<?xml version="1.0" encoding="utf-8"?> 
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:mx="library://ns.adobe.com/flex/mx" 
            focusEnabled="true"> 
    <s:Label id="lblData" /> 
    <fx:Declarations> 
     <mx:NumberFormatter id="numberformatter" useThousandsSeparator="true" /> 
    </fx:Declarations> 
    <fx:Script> 
     <![CDATA[ 
      override public function set data(value:Object):void { 
       if (value.col1 > 1000) { 
        lblData.text = numberformatter.format(value.col2); 
       } else { 
        lblData.text = value.col2; 
       } 
      } 
     ]]> 
    </fx:Script> 
</s:MXAdvancedDataGridItemRenderer> 

Answer 1

私は解決策を自分で見つけ：

<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:mx="library://ns.adobe.com/flex/mx" 
            focusEnabled="true"> 
    <s:Label text="{format(this.row)}" width="100%" height="100%" verticalAlign="middle" paddingLeft="5"/> 
    <fx:Declarations> 
     <mx:NumberFormatter id="numberformatter" useThousandsSeparator="true" /> 
    </fx:Declarations> 
    <fx:Script> 
     <![CDATA[ 
      [Bindable] 
      private var row:DataItem; 

      override public function set data(value:Object):void { 
       this.row = value as DataItem; 
      } 

      override public function get data():Object { 
       return this.row 
      } 

      private function format(row:DataItem):Object { 
       if (row.col1 > 1000) { 
        return numberformatter.format(row.col2); 
       } else { 
        return row.col2; 
       } 
      } 
     ]]> 
    </fx:Script> 
</s:MXAdvancedDataGridItemRenderer>