Flex Gumbo中如何通过itemRenderer创建一个多列项FxList的例子

By Minidxer | July 23, 2009

接下来的例子演示了Flex Gumbo中如何通过itemRenderer创建一个多列项FxList。



下面是实现代码：

  1. <?xml version="1.0"?>
  2. <FxApplication name="FxList_itemRenderer_test"
  3.         xmlns="http://ns.adobe.com/mxml/2009"
  4.         backgroundColor="white">
  5.     <layout>
  6.         <BasicLayout />
  7.     </layout>
  8.  
  9.     <Script>
  10.         <![CDATA[
  11.             private function comboBox_labelFunc(item:Object):String {
  12.                 return item.name + "\t" + currFormatter.format(item.price);
  13.             }
  14.         ]]>
  15.     </Script>
  16.  
  17.     <Declarations>
  18.         <CurrencyFormatter id="currFormatter" precision="2" />
  19.     </Declarations>
  20.  
  21.     <FxList id="comboBox"
  22.             labelFunction="comboBox_labelFunc"
  23.             itemRenderer="TabItemRenderer"
  24.             horizontalCenter="0"
  25.             verticalCenter="0"
  26.             width="200">
  27.         <dataProvider>
  28.             <ArrayCollection>
  29.                 <Object name="The"   price="0.23" />
  30.                 <Object name="quick" price="1.03" />
  31.                 <Object name="brown" price="0.98" />
  32.                 <Object name="fox"   price="1.19" />
  33.                 <Object name="jumps" price="0.28" />
  34.                 <Object name="over"  price="0.42" />
  35.                 <Object name="the"   price="0.09" />
  36.                 <Object name="lazy"  price="0.81" />
  37.                 <Object name="dog"   price="0.72" />
  38.             </ArrayCollection>
  39.         </dataProvider>
  40.     </FxList>
  41.  
  42. </FxApplication>

下面是TabItemRenderer.mxml的代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <ItemRenderer name="TabItemRenderer"
  3.         xmlns="http://ns.adobe.com/mxml/2009"
  4.         focusEnabled="false">
  5.  
  6.     <states>
  7.         <State name="normal"/>
  8.         <State name="hovered"/>
  9.         <State name="selected"/>
  10.     </states>
  11.  
  12.     <Rect left="0" right="0" top="0" bottom="0">
  13.         <fill>
  14.             <SolidColor color="{contentBackgroundColor}" />
  15.         </fill>
  16.         <fill.hovered>
  17.             <SolidColor color="{rollOverColor}" />
  18.         </fill.hovered>
  19.         <fill.selected>
  20.             <SolidColor color="{selectionColor}" />
  21.         </fill.selected>
  22.     </Rect>
  23.  
  24.     <TextGraphic id="labelElement"
  25.             tabStops="E192"
  26.             verticalCenter="0"
  27.             left="3"
  28.             right="3"
  29.             top="6"
  30.             bottom="4"/>
  31.  
  32. </ItemRenderer>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: FxList, Gumbo | 1 Comment » | Tags: , ,

你可能还对下列文章感兴趣:

One comment | Add One

  1. 金融街 - 07/24/2009 at 12:57 pm

    看不懂，支持下。

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll