Flex DataGrid组件用法

这是Flex开发中处理列表数据最常用的组件，非常实用。支持排序，默认的CSS风格也很漂亮。

Xml代码  

1. <?xml version="1.0"?>  
2. <!-- DataGrid control example. -->  
3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">  
4.   
5.     <mx:XMLList id="employees">  
6.         <employee>  
7.             <name>Christina Coenraets</name>  
8.             <phone>555-219-2270</phone>  
9.             <email>ccoenraets@fictitious.com</email>  
10.             <active>true</active>  
11.         </employee>  
12.         <employee>  
13.             <name>Joanne Wall</name>  
14.             <phone>555-219-2012</phone>  
15.             <email>jwall@fictitious.com</email>  
16.             <active>true</active>  
17.         </employee>  
18.         <employee>  
19.             <name>Maurice Smith</name>  
20.             <phone>555-219-2012</phone>  
21.             <email>maurice@fictitious.com</email>  
22.             <active>false</active>  
23.         </employee>  
24.         <employee>  
25.             <name>Mary Jones</name>  
26.             <phone>555-219-2000</phone>  
27.             <email>mjones@fictitious.com</email>  
28.             <active>true</active>  
29.         </employee>  
30.     </mx:XMLList>  
31.   
32.     <mx:Panel title="DataGrid Control Example" height="100%" width="100%"    
33.         paddingTop="10" paddingLeft="10" paddingRight="10">  
34.   
35.         <mx:Label width="100%" color="blue"  
36.             text="请选中DataGrid的某一行."/>  
37.   
38.         <mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{employees}">  
39.             <mx:columns>  
40.                 <mx:DataGridColumn dataField="name" headerText="Name"/>  
41.                 <mx:DataGridColumn dataField="phone" headerText="Phone"/>  
42.                 <mx:DataGridColumn dataField="email" headerText="Email"/>  
43.             </mx:columns>  
44.         </mx:DataGrid>  
45.   
46.         <mx:Form width="100%" height="100%">  
47.             <mx:FormItem label="Name">  
48.                 <mx:Label text="{dg.selectedItem.name}"/>  
49.             </mx:FormItem>  
50.             <mx:FormItem label="Email">  
51.                 <mx:Label text="{dg.selectedItem.email}"/>  
52.             </mx:FormItem>  
53.             <mx:FormItem label="Phone">  
54.                 <mx:Label text="{dg.selectedItem.phone}"/>  
55.             </mx:FormItem>  
56.         </mx:Form>  
57.            
58.     </mx:Panel>  
59. </mx:Application>          

<?xml version="1.0"?>
<!-- DataGrid control example. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:XMLList id="employees">
        <employee>
            <name>Christina Coenraets</name>
            <phone>555-219-2270</phone>
            <email>ccoenraets@fictitious.com</email>
            <active>true</active>
        </employee>
        <employee>
            <name>Joanne Wall</name>
            <phone>555-219-2012</phone>
            <email>jwall@fictitious.com</email>
            <active>true</active>
        </employee>
        <employee>
            <name>Maurice Smith</name>
            <phone>555-219-2012</phone>
            <email>maurice@fictitious.com</email>
            <active>false</active>
        </employee>
        <employee>
            <name>Mary Jones</name>
            <phone>555-219-2000</phone>
            <email>mjones@fictitious.com</email>
            <active>true</active>
        </employee>
    </mx:XMLList>

    <mx:Panel title="DataGrid Control Example" height="100%" width="100%" 
        paddingTop="10" paddingLeft="10" paddingRight="10">

        <mx:Label width="100%" color="blue"
            text="请选中DataGrid的某一行."/>

        <mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{employees}">
            <mx:columns>
                <mx:DataGridColumn dataField="name" headerText="Name"/>
                <mx:DataGridColumn dataField="phone" headerText="Phone"/>
                <mx:DataGridColumn dataField="email" headerText="Email"/>
            </mx:columns>
        </mx:DataGrid>

        <mx:Form width="100%" height="100%">
            <mx:FormItem label="Name">
                <mx:Label text="{dg.selectedItem.name}"/>
            </mx:FormItem>
            <mx:FormItem label="Email">
                <mx:Label text="{dg.selectedItem.email}"/>
            </mx:FormItem>
            <mx:FormItem label="Phone">
                <mx:Label text="{dg.selectedItem.phone}"/>
            </mx:FormItem>
        </mx:Form>
        
    </mx:Panel>
</mx:Application>        

 

 

转载于:https://blog.51cto.com/2771253/524226