Как я могу создать собственный MXAdvancedDataGridItemRenderer во Flex4? - PullRequest
Новая
       35

Как я могу создать собственный MXAdvancedDataGridItemRenderer во Flex4?

0 голосов
/ 17 декабря 2010

Хорошо, я создал один, но у него есть куча проблем:

  • если я щелкну в визуализированном столбце, я получу ошибку:

TypeError: Ошибка # 1009: Невозможно получить доступ к свойству или методу пустой ссылки на объект. в 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>

1 Ответ

0 голосов
/ 03 января 2011

Я сам нашел решение: 

<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>
...