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效果