The following example shows how you can set the row count on a Flex Gumbo FxList control by setting the requestedRowCount property on the VerticalLayout object.
Full code after the jump.
To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/25/setting-the-requested-row-count-on-an-fxlist-control-in-flex-gumbo/ -->
<FxApplication name="FxList_layout_VerticalLayout_requestedRowCount_test"
xmlns="http://ns.adobe.com/mxml/2009"
backgroundColor="white">
<FxList id="list"
horizontalCenter="0"
verticalCenter="0">
<layout>
<VerticalLayout requestedRowCount="6"
gap="0"
horizontalAlign="contentJustify" />
</layout>
<dataProvider>
<ArrayCollection>
<String>1. The</String>
<String>2. Quick</String>
<String>3. Brown</String>
<String>4. Fox</String>
<String>5. Jumps</String>
<String>6. Over</String>
<String>7. The</String>
<String>8. Lazy</String>
<String>9. Dog</String>
</ArrayCollection>
</dataProvider>
</FxList>
</FxApplication>
Or, you can also modify the FxList control’s default VerticalLayout object directly, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/25/setting-the-requested-row-count-on-an-fxlist-control-in-flex-gumbo/ -->
<FxApplication name="FxList_layout_VerticalLayout_requestedRowCount_test"
xmlns="http://ns.adobe.com/mxml/2009"
backgroundColor="white">
<Script>
<![CDATA[
import mx.layout.VerticalLayout;
private function init():void {
var vLayout:VerticalLayout = list.dataGroup.layout as VerticalLayout;
vLayout.requestedRowCount = 6;
}
]]>
</Script>
<FxList id="list"
horizontalCenter="0"
verticalCenter="0"
initialize="init();">
<dataProvider>
<ArrayCollection>
<String>1. The</String>
<String>2. Quick</String>
<String>3. Brown</String>
<String>4. Fox</String>
<String>5. Jumps</String>
<String>6. Over</String>
<String>7. The</String>
<String>8. Lazy</String>
<String>9. Dog</String>
</ArrayCollection>
</dataProvider>
</FxList>
</FxApplication>
Or, you can set the requested row count in a custom skin, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- MyFxListSkin.mxml -->
<!--
ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
-->
<SparkSkin xmlns="http://ns.adobe.com/mxml/2009"
minWidth="112" minHeight="112"
alpha.disabled="0.5">
<Metadata>
[HostComponent("mx.components.FxList")]
</Metadata>
<Script>
static private const exclusions:Array = ["scroller", "background"];
override public function get colorizeExclusions():Array {return exclusions;}
static private const contentFill:Array = ["bgFill"];
override public function get contentItems():Array {return contentFill};
</Script>
<states>
<State name="normal" />
<State name="disabled" />
</states>
<!-- border -->
<Rect left="0" right="0" top="0" bottom="0">
<stroke>
<SolidColorStroke color="0x686868" weight="1"/>
</stroke>
</Rect>
<!-- fill -->
<Rect id="background" left="1" right="1" top="1" bottom="1" >
<fill>
<SolidColor id="bgFill" color="0xFFFFFF" />
</fill>
</Rect>
<FxScroller left="1" top="1" right="1" bottom="1" id="scroller">
<DataGroup id="dataGroup" itemRenderer="mx.skins.spark.FxDefaultItemRenderer">
<layout>
<VerticalLayout gap="0" horizontalAlign="contentJustify" requestedRowCount="10" />
</layout>
</DataGroup>
</FxScroller>
</SparkSkin>
To use the custom skin, set the skinClass style, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/25/setting-the-requested-row-count-on-an-fxlist-control-in-flex-gumbo/ -->
<FxApplication name="FxList_skinClass_requestedRowCount_test"
xmlns="http://ns.adobe.com/mxml/2009"
backgroundColor="white"
initialize="init();">
<Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var arrColl:ArrayCollection;
private function init():void {
var idx:uint;
var len:uint = 1000;
var arr:Array = [];
for (idx=0; idx<len; idx++) {
arr.push(idx + ": " + Math.random().toFixed(4));
}
arrColl = new ArrayCollection(arr);
list.dataProvider = arrColl;
}
]]>
</Script>
<FxList id="list"
skinClass="MyFxListSkin"
horizontalCenter="0"
verticalCenter="0"
width="200" />
</FxApplication>
Or, you could extend the default FxListSkin class and override the requestedRowCount property using ActionScript, as seen in the following example:
/** MyFxListSkin2.as */
package {
import mx.layout.VerticalLayout;
import mx.skins.spark.FxListSkin;
public class MyFxListSkin2 extends FxListSkin {
public function MyFxListSkin2() {
super();
init();
}
private function init():void {
VerticalLayout(super.dataGroup.layout).requestedRowCount = 10;
}
}
}
To use the custom skin, set the skinClass style, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/25/setting-the-requested-row-count-on-an-fxlist-control-in-flex-gumbo/ -->
<FxApplication name="FxList_skinClass_requestedRowCount_test"
xmlns="http://ns.adobe.com/mxml/2009"
backgroundColor="white"
initialize="init();">
<Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var arrColl:ArrayCollection;
private function init():void {
var idx:uint;
var len:uint = 1000;
var arr:Array = [];
for (idx=0; idx<len; idx++) {
arr.push(idx + ": " + Math.random().toFixed(4));
}
arrColl = new ArrayCollection(arr);
list.dataProvider = arrColl;
}
]]>
</Script>
<FxList id="list"
skinClass="MyFxListSkin2"
horizontalCenter="0"
verticalCenter="0"
width="200" />
</FxApplication>
This entry is based on a beta version of the Flex Gumbo SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Gumbo SDK.
