学步园

Flex的一大亮点就是数据的无刷新技术
----------------------------------
因为数据控件可以绑定数据。
只要数据改变了，那么控件的数据自然更新

如图：

描述：

1：dataGrid控件读取了xml的数据
2：下面的表格里输入要添加的数据记录
3：点“提交”按钮 完成本地的更新+数据库存取

 

该例子涉及的知识点：

1：xml的节点添加

2：model的格式
3：验证控件配合表单的使用

 

代码：

 

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" verticalAlign="top"
 3      paddingTop="0" viewSourceURL="srcview/index.html" borderColor="#EEF2F5">
 4     <!--xml数据源和 model不同  model不可以带属性 而xml节点和属性都可以作为数据源-->
 5     <mx:XML xmlns="" id="dtt">
 6         <root>
 7         <item name="王鹏" sex="男" age="14"/>
 8         <item name="王超" sex="女" age="16"/>
 9         <item name="何俊" sex="男" age="34"/>
10     </root>
11     </mx:XML>
 　　　<!--model不可以带属性-->
12     <mx:Model id="sexGroup">
13         <sex>
14             <item>男</item>
15             <item>女</item>
16             
17         </sex>
18     </mx:Model>
19     <mx:Script>
20         <![CDATA[
21           function update(){
25                 var dttt:XML=dtt;
　　　　　　　　　　//注意下面的格式
26                 var node:XMLList=XMLList("<item name='"+nameTxt.text+"' sex='"+sex.selectedItem.toString()+"' age='"+ageTxt.text+"'/>")
27                 dttt.appendChild(node);
28             
29             }
30             
31         ]]>
32     </mx:Script>
33     
34     
35     <mx:DataGrid  dataProvider="{dtt.item}" x="535" y="100">
36         <mx:columns>
37             <mx:DataGridColumn dataField="@name" headerText="姓名"/>
38             <mx:DataGridColumn dataField="@sex" headerText="性别"/>
39             <mx:DataGridColumn dataField="@age" headerText="年龄"/>
40         </mx:columns>
41     </mx:DataGrid>
42     <mx:Button label="提交"  x="662" y="466" id="subBtn"/>
43     <mx:Form x="535" y="316" width="302" height="142" borderStyle="solid">
44         <mx:FormItem label="姓名">
45             <mx:TextInput id="nameTxt"/>
46         </mx:FormItem>
47         <mx:FormItem label="性别">
48             <mx:ComboBox dataProvider="{sexGroup.item}" id="sex" width="57"></mx:ComboBox>
49         </mx:FormItem>
50         <mx:FormItem label="年龄">
51             <mx:TextInput id="ageTxt"/>
52         </mx:FormItem>
53     </mx:Form>
54     <mx:StringValidator id="vldName" source="{nameTxt}" property="text" requiredFieldError="用户名不为空" minLength="2" trigger="{subBtn}" triggerEvent="click" valid="update();"/>
55     
56     
57 </mx:Application>

 

 注意：StringValidator

  source="{id}":  需要大括号  里面是id 

  property="text" 验证的属性

  minLength="2"; 注意数字不是字符数目，而是汉字的个数

  trigger="{subBtn}"需要大括号 ，里面指定了执行验证行为的按钮

  triggerEvent="click" 执行的事件或方法

  valid="update（）"当验证通过后执行的操作（只适合单一的操作和验证）