Flex学习笔记(五)

DataGrid语法：

  <mx:DataGrid

    Properties

    columns="From dataProvider"

    draggableColumns="true|false"

    editable="false|true"

    editedItemPosition="null"

    horizontalScrollPosition="null"

    imeMode="null"

    itemEditorInstance="null"

    minColumnWidth="NaN"

    resizableColumns="true|false"

    sortableColumns="true|false"   

    Events

    columnStretch="No default"

    headerRelease="No default"

    headerShift="No default"

    itemEditBegin="No default"

    itemEditBeginning="No default"

    itemEditEnd="No default"

    itemFocusIn="No default"

    itemFocusOut="No default"

  />

部分属性的意思

draggableColumns：true表示可以拖动每一列，来调整显示的顺序（默认是true，比如默认显示列的顺序是1，2，3，draggableColumns如果是true的你可以拖动随意一列，让他变化显示顺序。例如3，1，2）

editable：表示DataGrid是否可以编辑（true表示可以编辑）

resizableColumns：表示是否可以调整每一列的宽度。默认是true。

sortableColumns：点击每一列的标题头，可以让它对内部显示的数据进行排序。

 1


<?
xml version="1.0" encoding="utf-8"
?>

 2



<
mx:Application 
xmlns:mx
="http://www.adobe.com/2006/mxml"
 layout
="absolute"
 fontSize
="12"
>

 3



    
<
mx:XMLList 
id
="info"
>

 4



        
<
info
>

 5



            
<
name
>
Alps
</
name
>
            

 6



            
<
mail
>
alps@hotmail.com
</
mail
>

 7



            
<
phone
>
010-12345678
</
phone
>

 8



        
</
info
>

 9



        
<
info
>

10



            
<
name
>
Ceasar
</
name
>
            

11



            
<
mail
>
Ceasar@hotmail.com
</
mail
>

12



            
<
phone
>
010-87654321
</
phone
>

13



        
</
info
>

14



        
<
info
>

15



            
<
name
>
Wong
</
name
>
            

16



            
<
mail
>
Wong@hotmail.com
</
mail
>

17



            
<
phone
>
0532-87654321
</
phone
>

18



        
</
info
>

19



    
</
mx:XMLList
>

20



    
<
mx:Label 
text
="从下方选择信息:"
 color
="red"
 fontWeight
="10"
/>

21



    
<
mx:Panel 
layout
="vertical"
 paddingBottom
="10"
 paddingLeft
="10"
 paddingRight
="10"
 paddingTop
="10"
 width
="50%"
>

22



        
<
mx:DataGrid 
dataProvider
="{info}"
 width
="80%"
 id
="mg"
>

23



            
<
mx:columns
>

24



                
<
mx:DataGridColumn 
dataField
="name"
 headerText
="姓名"
/>

25



                
<
mx:DataGridColumn 
dataField
="mail"
 headerText
="Email"
/>

26



                
<
mx:DataGridColumn 
dataField
="phone"
 headerText
="电话"
/>

27



            
</
mx:columns
>

28



        
</
mx:DataGrid
>

29



        

30



        
<
mx:Form 
borderStyle
="inset"
 width
="50%"
>

31



            
<
mx:FormHeading 
label
="您的选择是:"
/>

32



            
<
mx:FormItem 
label
="姓名:"
>

33



                
<
mx:Label 
text
="{mg.selectedItem.name}"
/>

34



            
</
mx:FormItem
>

35



            
<
mx:FormItem 
label
="Email:"
>

36



                
<
mx:Label 
text
="{mg.selectedItem.mail}"
/>

37



            
</
mx:FormItem
>

38



            
<
mx:FormItem 
label
="电话:"
>

39



                
<
mx:Label 
text
="{mg.selectedItem.phone}"
/>

40



            
</
mx:FormItem
>

41



        
</
mx:Form
>

42



    
</
mx:Panel
>

43



</
mx:Application
>

Flex效果

Tree语法：

<mx:Tree

    Properties

    dataDescriptor="Instance of DefaultDataDescriptor"

    dataProvider="null"

    dragMoveEnabled="true|false"

    firstVisibleItem="First item in the control"

    hasRoot="false|true"

    itemIcons="null"

    maxHorizontalScrollPosition="0"

    openItems="null"

    showRoot="true|false"    

    Events

    change="No default"

    itemClose="No default"

    itemOpen="No default"

    itemOpening="No default"

  />

dragMoveEnabled：是drag-and-drop操作的一部分,配合drag-and-drop使用，当
dragMoveEnabled=true的情况下，相当于移动，可以拖动内部元素到你想放置的地方，当等于false的时候，相当于复制，将会复制一个
相同的元素到你想放置的地方。

showRoot：是否显示根目录中的元素。默认是true。 

 1


<?
xml version="1.0" encoding="utf-8"
?>

 2



<
mx:Application 
xmlns:mx
="http://www.adobe.com/2006/mxml"
 layout
="absolute"
 fontSize
="12"
>

 3



    
<
mx:XMLList 
id
="treeData"
>

 4



        
<
hd 
text
="您的邮箱"
>

 5



            
<
hd 
text
="收件箱"
>

 6



                
<
hd 
text
="新建"
/>

 7



                
<
hd 
text
="草稿"
/>

 8



            
</
hd
>

 9



            
<
hd 
text
="发件箱"
>

10



                
<
hd 
text
="已发邮件"
/>

11



            
</
hd
>

12



            
<
hd 
text
="垃圾箱"
>

13



                
<
hd 
text
="已删除邮件"
/>

14



            
</
hd
>

15



        
</
hd
>

16



    
</
mx:XMLList
>

17



    

18



    
<
mx:Panel 
paddingBottom
="10"
 paddingLeft
="10"
 paddingRight
="10"
 paddingTop
="10"
     layout
="vertical"
 width
="70%"
>

19



        
<
mx:Label 
text
="请点击Tree控件中的节点"
/>

20



        
<
mx:HDividedBox 
width
="90%"
>

21



            
<
mx:VBox 
width
="40%"
>

22



                
<
mx:Label 
text
="showRoot=true时的效果，默认为true"
 color
="red"
/>

23



                
<
mx:Tree 
id
="treeSimple"
 dataProvider
="{treeData}"
 labelField
="@text"
 width
="90%"
 dragMoveEnabled
="true"

24



                      dropEnabled
="true"
 dragEnabled
="true"
/>

25



                
<
mx:Form
>

26



                    
<
mx:FormItem 
label
="您选择的是:"
>

27



                        
<
mx:Label 
id
="lab"
 text
="{treeSimple.selectedItem.@text}"
 
/>

28



                    
</
mx:FormItem
>

29



                
</
mx:Form
>

30



            
</
mx:VBox
>

31



            
<
mx:VBox 
width
="40%"
>

32



                
<
mx:Label 
text
="showRoot=false时的效果"
 color
="red"
/>

33



                
<
mx:Tree 
id
="treeSimple1"
 dataProvider
="{treeData}"
 labelField
="@text"

34



                 showRoot
="false"
 width
="90%"
 dragMoveEnabled
="false"

35



                      dropEnabled
="true"
 dragEnabled
="true"
/>

36



            
</
mx:VBox
>

37



        
</
mx:HDividedBox
>

38



    
</
mx:Panel
>

39



</
mx:Application
>

Flex效果

menuBar、RichTextEditor

这两个控件很简单，看看代码就明白了。有问题我们一起讨论下。

 1


<?
xml version="1.0" encoding="utf-8"
?>

 2



<
mx:Application 
xmlns:mx
="http://www.adobe.com/2006/mxml"
 layout
="absolute"
 fontSize
="12"
>

 3



    
<
mx:Script
>

 4



        
<![CDATA[

 5



            import mx.events.MenuEvent;

 6



            function doClick(evt:MenuEvent):void {

 7



                richText.text = "您点击了： "+ evt.item.@label +" ,属性值是： "+ evt.item.@data;

 8



            }

 9



        
]]>

10



    
</
mx:Script
>

11



    
<
mx:XMLList 
id
="menuData"
>

12



            
<
subMenu 
label
="新建"
 data
="new"
>

13



                
<
subMenu 
label
="打开"
 data
="open"
/>

14



                
<
subMenu 
label
="保存"
 data
="save"
/>

15



                
<
subMenu 
type
="separator"
/>

16



                
<
subMenu 
label
="退出"
 data
="exit"
/>

17



            
</
subMenu
>

18



            
<
subMenu 
label
="编辑"
 data
="edit"
>

19



                
<
subMenu 
label
="撤销"
 data
="undo"
/>

20



                
<
subMenu 
type
="separator"
/>

21



                
<
subMenu 
label
="复制"
 data
="copy"
/>

22



                
<
subMenu 
label
="剪切"
 data
="cut"
/>

23



                
<
subMenu 
label
="粘贴"
 data
="paste"
/>

24



            
</
subMenu
>

25



    
</
mx:XMLList
>

26



    
<
mx:Panel 
paddingBottom
="10"
 paddingLeft
="10"
 paddingRight
="10"
 paddingTop
="10"
 width
="40%"
 height
="50%"
>

27



        
<
mx:ApplicationControlBar 
dock
="true"
>

28



            
<
mx:MenuBar 
dataProvider
="{menuData}"
 labelField
="@label"
 id
="mb"

29



                 itemClick
="doClick(event)"
/>
    

30



        
</
mx:ApplicationControlBar
>

31



        
<
mx:RichTextEditor 
id
="richText"
 height
="40%"
 width
="90%"
/>

32



        
<
mx:HBox 
width
="90%"
>

33



            
<
mx:TextArea 
id
="txt"
 width
="90%"
/>

34



            
<
mx:Button 
label
="转换成Html"
 click
="txt.text=richText.htmlText"
/>

35



        
</
mx:HBox
>

36



    
</
mx:Panel
>

37



    

38



</
mx:Application
>

Flex效果