如何向DataGrid的自定义单元格显示查询结果[Flex]

时间:2011-12-14 21:48:31

标签: flex datagrid mxml

我按照本指南显示mysql数据库中的数据: http://www.flashrealtime.com/flash-builder-4-and-php-data-services/

但如果我有这样的数据网格怎么办:

<mx:DataGrid id="dataGrid" width="100%" height="100%" creationComplete="dataGrid_creationCompleteHandler(event)" >
   <mx:columns>
      <mx:DataGridColumn id="something" dataField="customerId" editable="false">
         <mx:itemRenderer > 
            <mx:Component>
              <mx:VBox>
               <mx:Label id="l1" text=???????  ></mx:Label>
               <mx:Label id="l2" text=???????  ></mx:Label>
              </mx:VBox>
            </mx:Component>
          </mx:itemRenderer>
      </mx:DataGridColumn>

1 个答案:

答案 0 :(得分:0)

在DataGrid中使用itemRenderer时,整个“行”的值存储在“data”对象中

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;

            [Bindable]
            private var dp:ArrayCollection = new ArrayCollection([
                {id : "1", name : "Bob"},
                {id : "2", name : "Andrew"},
                {id : "3", name : "Paul"}
            ]);

        ]]>
    </fx:Script>

    <mx:DataGrid dataProvider="{dp}">
        <mx:columns>
            <mx:DataGridColumn>
                <mx:itemRenderer>
                    <fx:Component>
                        <mx:VBox>                           
                            <mx:Label text="{data.id}"/>
                            <mx:Label text="{data.name}"/>
                        </mx:VBox>
                    </fx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>

</s:WindowedApplication>