Flex中如何利用textInputStyleName样式创建一个自定义ComboBox控件的例子

By Minidxer | November 11, 2008

接下来的例子演示了Flex中如何利用textInputStyleName样式,创建一个自定义ComboBox控件。

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


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

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="top"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Style>
  8.         ComboBox {
  9.             textInputStyleName: myCustomTextInputStyleName;
  10.         }
  11.  
  12.         .myCustomTextInputStyleName {
  13.             color: red;
  14.             fontStyle: italic;
  15.             fontWeight: bold;
  16.         }
  17.     </mx:Style>
  18.  
  19.     <mx:ApplicationControlBar dock="true">
  20.         <mx:Form styleName="plain">
  21.             <mx:FormItem label="editable:">
  22.                 <mx:CheckBox id="checkBox"
  23.                         selected="false" />
  24.             </mx:FormItem>
  25.         </mx:Form>
  26.     </mx:ApplicationControlBar>
  27.  
  28.     <mx:ComboBox id="comboBox"
  29.             editable="{checkBox.selected}"
  30.             creationComplete="comboBox.open();">
  31.         <mx:dataProvider>
  32.             <mx:Array>
  33.                 <mx:Object label="One" />
  34.                 <mx:Object label="Two" />
  35.                 <mx:Object label="Three" />
  36.                 <mx:Object label="Four" />
  37.                 <mx:Object label="Five" />
  38.                 <mx:Object label="Six" />
  39.                 <mx:Object label="Seven" />
  40.             </mx:Array>
  41.         </mx:dataProvider>
  42.     </mx:ComboBox>
  43.  
  44. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子

Topics: ComboBox | No Comments » | 801 views Tags: , ,

Search Posts