Flex中如何利用focusIn和focusOut事件，对表单中获得焦点的项目进行颜色高亮（highlight）显示。

Flex中如何利用focusIn和focusOut事件，对表单中获得焦点的项目进行颜色高亮（highlight）显示。  

2011-05-12 13:12:33|  分类： 个人日记 |字号 订阅

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3.         layout="vertical"
4.         verticalAlign="middle"
5.         backgroundColor="white">
6.  
7.     <mx:Style>
8.         FormItem {
9.             paddingLeft: 4;
10.             paddingRight: 4;
11.             paddingTop: 4;
12.             paddingBottom: 4;
13.         }
14.     </mx:Style>
15.  
16.     <mx:Script>
17.         <![CDATA[
18.             private const BACKGROUND_COLOR:Object = "haloBlue";
19.  
20.             private function formItem_focusIn(evt:FocusEvent):void {
21.                 var item:FormItem = FormItem(evt.currentTarget.parent);
22.                 item.setStyle("backgroundAlpha", 0.2);
23.                 item.setStyle("backgroundColor", BACKGROUND_COLOR);
24.             }
25.  
26.             private function formItem_focusOut(evt:FocusEvent):void {
27.                 var item:FormItem = FormItem(evt.currentTarget.parent);
28.                 item.setStyle("backgroundColor", null);
29.             }
30.         ]]>
31.     </mx:Script>
32.  
33.     <mx:Form>
34.         <mx:FormItem label="First name:">
35.             <mx:TextInput id="firstName"
36.                     focusIn="formItem_focusIn(event);"
37.                     focusOut="formItem_focusOut(event);" />
38.         </mx:FormItem>
39.         <mx:FormItem label="Last name:">
40.             <mx:TextInput id="lastName"
41.                     focusIn="formItem_focusIn(event);"
42.                     focusOut="formItem_focusOut(event);" />
43.         </mx:FormItem>
44.     </mx:Form>
45.  
46. </mx:Application>
47.