Flex中如何通过includeInLayout和visible属性设置Form容器内FormItem的显示与否的例子

By Minidxer | October 4, 2008

接下来的例子演示了Flex中如何通过includeInLayout和visible属性，设置Form容器内FormItem的显示与否。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application name="FormItem_includeInLayout_test"
  3.         xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white">
  7.  
  8.     <mx:Style>
  9.         Form {
  10.             indicatorGap: 0;
  11.             paddingLeft: 0;
  12.             paddingRight: 0;
  13.             paddingTop: 0;
  14.             paddingBottom: 0;
  15.         }
  16.     </mx:Style>
  17.  
  18.     <mx:ApplicationControlBar dock="true">
  19.         <mx:Button id="bccButton"
  20.                 label="Show BCC"
  21.                 toggle="true"
  22.                 selected="false" />
  23.         <mx:Button id="fromButton"
  24.                 label="Show From"
  25.                 toggle="true"
  26.                 selected="false" />
  27.     </mx:ApplicationControlBar>
  28.  
  29.     <mx:HBox width="100%">
  30.         <mx:Button id="sendButton"
  31.                 label="Send"
  32.                 height="100%" />
  33.         <mx:Form width="100%">
  34.             <mx:FormItem label="From:"
  35.                     includeInLayout="{fromButton.selected}"
  36.                     visible="{fromButton.selected}"
  37.                     width="100%">
  38.                 <mx:ComboBox id="fromComboBox"
  39.                         width="100%" />
  40.             </mx:FormItem>
  41.             <mx:FormItem label="To:" width="100%">
  42.                 <mx:TextInput id="toTextInput"
  43.                         width="100%" />
  44.             </mx:FormItem>
  45.             <mx:FormItem label="CC:" width="100%">
  46.                 <mx:TextInput id="ccTextInput"
  47.                         width="100%" />
  48.             </mx:FormItem>
  49.             <mx:FormItem label="BCC:"
  50.                     includeInLayout="{bccButton.selected}"
  51.                     visible="{bccButton.selected}"
  52.                     width="100%">
  53.                 <mx:TextInput id="bccTextInput"
  54.                         width="100%" />
  55.             </mx:FormItem>
  56.             <mx:FormItem label="Subject:"
  57.                     width="100%">
  58.                 <mx:TextInput id="subjectTextInput"
  59.                         width="100%" />
  60.             </mx:FormItem>
  61.         </mx:Form>
  62.     </mx:HBox>
  63.  
  64.     <mx:TextArea id="bodyTextArea"
  65.             width="100%"
  66.             height="100%" />
  67.  
  68. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Flex | Tags: , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads