[djyamato]

Специально сделал для Вас
К сожалению, почему-то не выделяется первый элемент во время поиска, спать уже хочу - не вижу причину
Листаются страницы, ищется фраза в каждом айтеме и первый нашедшийся выделяется
Лист сам перематывается к выделенному айтему (ensureIndexIsVisible)
Обратите внимание как при помощи байндинга выводится надпись PAGE 1/3 (выше в коде переменные _pageIndex и _totalPages в тэге [Bindable])
С точки зрения архитектуры код ужасный, но я преследовал цель показать как можно это сделать, не более

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   width="350" 
			   height="420"
			   creationComplete="application1_creationCompleteHandler(event)">
 
	<fx:Declarations>
		<s:ArrayCollection id="myData">
			<s:source>
				<fx:Object label="Привет всем" image=""/>
				<fx:Object label="это опять я" image=""/>
				<fx:Object label="Нужно реализвать" image=""/>
				<fx:Object label="менюшку как в" image=""/>
				<fx:Object label="приложении" image=""/>
				<fx:Object label="используй байндинг" image=""/>
				<fx:Object label="кастом рендерер" image=""/>
				<fx:Object label="и скинирование" image=""/>
				<fx:Object label="Я так понял" image=""/>
				<fx:Object label="что рабочую область" image=""/>
				<fx:Object label="нужно разбить на два компонента" image=""/>
				<fx:Object label="и разместить их друг под другом" image=""/>
				<fx:Object label="item13" image=""/>
				<fx:Object label="item14" image=""/>
				<fx:Object label="item15" image=""/>
				<fx:Object label="item16" image=""/>
				<fx:Object label="item17" image=""/>
				<fx:Object label="item22" image=""/>
				<fx:Object label="item34" image=""/>
				<fx:Object label="item3dsbdsbn" image=""/>
				<fx:Object label="sdb" image=""/>
				<fx:Object label="dsfbndsn" image=""/>
				<fx:Object label="dsgndsfgn" image=""/>
				<fx:Object label="gjn rtgn" image=""/>
				<fx:Object label="retjh" image=""/>
				<fx:Object label="dsfn d" image=""/>
				<fx:Object label="dsfgnsdf n" image=""/>
				<fx:Object label="tgjhnrtjn" image=""/>
				<fx:Object label="stgjhnert" image=""/>
				<fx:Object label="y,l" image=""/>
				<fx:Object label="fghmked" image=""/>
				<fx:Object label="sdghn" image=""/>
				<fx:Object label="sdn" image=""/>
				<fx:Object label="FINAL" image=""/>
			</s:source>
		</s:ArrayCollection>
	</fx:Declarations>
 
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
 
			import spark.events.TextOperationEvent;
 
			[Bindable]
			protected var _pageIndex:int=0;
 
			[Bindable]
			protected var _totalPages:int;
 
			protected function button1_clickHandler(event:MouseEvent):void
			{
				//back
				_pageIndex-=1;
				if(_pageIndex<0)
				{
					_pageIndex=0;
				}
 
				itemsList.scroller.viewport.horizontalScrollPosition=350*_pageIndex;
			}
 
			protected function button2_clickHandler(event:MouseEvent):void
			{
				// forw
				_pageIndex+=1;
				if(_pageIndex>_totalPages-1)
				{
					_pageIndex=_totalPages-1;
				}
				itemsList.scroller.viewport.horizontalScrollPosition=350*_pageIndex;
			}
 
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
                                             // расчет количества страниц с округлением в болшую сторону
				_totalPages=Math.round(myData.length/12);
			}
 
			protected function serchTextInput_changeHandler(event:TextOperationEvent):void
			{	
				var firstFoundItemIndex:int=getFirstFoundItemIndex();
 
				// почему-то не выделяется первый item :(
				if(firstFoundItemIndex)
				{
					itemsList.selectedIndex=firstFoundItemIndex;
					itemsList.ensureIndexIsVisible(firstFoundItemIndex);
				}
				else
				{
					itemsList.selectedIndex=-1;
					itemsList.ensureIndexIsVisible(0);
				}
			}
 
			// поиск первого совпадения 
			protected function getFirstFoundItemIndex():int
			{
				var total:int=myData.length;
				var i:int;
 
				var index:int;
 
				for(i=0;i<total;i++)
				{
					if(String(myData.getItemAt(i).label).search(serchTextInput.text)!=-1)
					{
						index=i;
						break
					}
				}
				return index;
			}
		]]>
	</fx:Script>
 
	<s:layout>
		<s:VerticalLayout horizontalAlign="center"/>
	</s:layout>
	<s:List id="itemsList" 
			width="100%" 
			height="350" 
			horizontalScrollPolicy="off"
			verticalScrollPolicy="off"
			borderVisible="false"
			itemRenderer="components.itemRenderers.CustomItemRenderer"
			dataProvider="{myData}">
		<s:layout>
			<s:TileLayout requestedRowCount="7" horizontalGap="0" verticalGap="0" orientation="columns"/>
		</s:layout>
	</s:List>
 
	<s:Group width="80%">
		<s:Button left="5" label="prev" click="button1_clickHandler(event)"/>
		<s:HGroup width="100%"
				  height="100%"
				  horizontalAlign="center"
				  verticalAlign="middle">
			<s:Label text="PAGE {(_pageIndex+1)+'/'+_totalPages} "/>
		</s:HGroup>
		<s:Button right="5" label="next" click="button2_clickHandler(event)"/>
	</s:Group>
 
	<s:TextInput id="serchTextInput" 
				 width="80%"
				 change="serchTextInput_changeHandler(event)"/>
</s:Application>

itemRenderer

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark" 
				xmlns:mx="library://ns.adobe.com/flex/mx" 
				autoDrawBackground="false"
				width="175"
				height="50"
				mouseEnabled="false">
	<s:states>
		<s:State name="normal"/>
		<s:State name="selected"/>
	</s:states>
 
	<s:Group width="100%" height="100%">
		<s:Rect left="2" 
				right="2" 
				top="2" 
				bottom="2">
			<s:stroke>
				<s:SolidColorStroke color.normal="0xcccccc" color.selected="0xff0000"/>
			</s:stroke>
			<s:fill>
				<s:SolidColor color="0xcccccc" alpha=".3"/>
			</s:fill>
		</s:Rect>
	</s:Group>
 
 
	<s:HGroup width="100%" 
			  height="100%" 
			  horizontalAlign="center" 
			  verticalAlign="middle">
		<s:Label text="{data.label}" textAlign="center" width="175"/>
	</s:HGroup>
</s:ItemRenderer>