Flex数据更新

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 = " { n ameTxt} "   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（）"当验证通过后执行的操作（只适合单一的操作和验证）