I posted a quick attempt to get something like this working. It uses DataGrid though. http://blogs.adobe.com/aharui/2008/08/datagrid_itemeditor_with_two_i.htm l
________________________________ From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Claudiu Ursica Sent: Monday, August 04, 2008 12:13 AM To: flexcoders@yahoogroups.com Subject: [flexcoders] Re: Tabbing children from custom item renderer inside List The problem here is that the default behaviour sends the focus outside the list in the document that contains the list... ie the txtAdaugaItem textfield in the code below... I managed before to switch the tab between the 2 steppers catching the focusOut event of the first stepper (stepperOne), but I had the same problem when the focus leaves the second stepper (stepperTwo). It goes outside the list. If I prevent default I don't know how to send the focus to the second renderer on the first stepper (stepperOne). I can get it's index, but that is as far as I got ... Another strange thing is that I traced getNextFocusManagerComponent() on the focusOut event of the stepperTwo and it displays the button (btnAdaugaItem) which is after the textfield that is actually focused (see bold id's below). Sorry for being such a apin in the a** but this is getting a little frustrating and I am unde! r pressure here te meet a deadline. Thanks, Claudiu <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute" initialize="appInitializeHandler(event)"> <mx:Script> <![CDATA[ import mx.events.FlexEvent; import mx.collections.ArrayCollection; [Bindable] private var listDataProvider : ArrayCollection; ! /** EVENT HANDLERS **/ ; private function appInitializeHandler(event:FlexEvent) : void { listDataProvider = new ArrayCollection(["unu","doi","trei"]); } private function btnAdaugaItemHandler(event:MouseEvent) : void { (txtAdaugaItem.text.length > 1) ? listDataProvider.addItem(txtAdaugaItem.text) : txtAdaugaItem.text = ""; txtAdaugaItem.text = ""; } ! ]]> </mx:Script> <mx:VBox width="100%" height="100%" verticalGap="0"> <mx:Canvas id="listHolder" width="100%" height="100%"> <mx:List selectable="false" &nbs! p; id="fxList" &! nbsp; &n bsp; width="100%" height="100%" dataProvider="{listDataProvider}" itemRenderer="ro.fxcodex.itemRenderers.fxListItemRenderer" /> </mx:Canvas> <mx:Canvas id="toolsHolder" width="100%" height="70"> <mx:TextInp! ut id="txtAdaugaItem" - this gets highlightet as having the focus x="40" y="24" /> <mx:Button id="btnAdaugaItem" - this is displayed as being the next focusable x="208" y="24" label="Adau! ga item" ! & nbsp; click="btnAdaugaItemHandler(event)"/> </mx:Canvas> </mx:VBox> </mx:Application> --- In flexcoders@yahoogroups.com, "Alex Harui" <[EMAIL PROTECTED]> wrote: > > You'll need more code in keyFocusChangeHandler. It has to not call > preventDefault when it is time to transfer the tab to the next renderer. > > ________________________________ > > From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On > Behalf Of Claudiu Ursica > Sent: Sunday, August 03, 2008 5:52 AM > To: flexcoders@yahoogroups.com > Subject: [flexcoders] Re: Tabbing children from custom item renderer > inside List > > > > Ok, I managed to send the focus to the second numeric stepper, but when > I hit tab again I loose the tab and cannot sent the focus to the second > item in the list on the first numeric stepper. > > Now my code looks something like this: > > <mx:HBox > xmlns:mx="http://www.adobe.com/2006/mxml"; > implements="mx.managers.IFocusManagerComponent" > width="100%" > height="100%" > verticalAlign="middle"> > > .............. skins and other stuff ...... > > <mx:Script> > <![CDATA[ > import mx.managers.IFocusManagerComponent; > import mx.collections.ArrayCollection; > import mx.controls.List; > > &nb! sp; > /** EVENT HANDLERS **/ > > private function it! emRendererDeleteButtonHandler(event:MouseEvent)! : &g t; void { > > // lista va fi tot timpul si in toate situatiile > itemRenderer.parent.parent > > var parentList : List = this.parent.parent as List; > > var parentListDataProvider:ArrayCollection = parentList.dataProvider as > ArrayCollection; > > var itemIndex:int = parentList.itemRendererToIndex(this); > parentListDataProvider.removeItemAt(itemIndex); > } > > > public override function set data (val : Object) : void > { > super.data = val; > } > > > override protected function focusInHandler(even! t:FocusEvent):void > { > trace("Focu! sHandler "); > addEventListener("keyFocusChange", keyFocusChangeHandler); > } > > protected function keyFocusChangeHandler(event:FocusEvent):void > { > event.preventDefault(); > trace(event.target); > stepperTwo.setFocus(); > } > > ]]> > </mx:Script> > > > > > <mx:Spacer width="10" /> > > <mx:NumericStepper id="stepperOne" > minimum="2" > maximum="100" > width="46" > height="20" > cornerRadius="3" > &nbs! p; backgroundColor="white" > borderStyle="solid" > borderThickness="0" > tabEnabled="true"> > </mx:NumericStepper> > > <mx:Spacer width="10" /> > > <mx:NumericStepper id="stepperTwo" > minimum="2" > maximum="100" > width="46" > height="20" > corner! Radius="3" > backgroundColor="white"> borderStyle="solid" > borderThickness="0" > tabEnabled="true"> > ! </mx:NumericStepper> > > &n! bsp;&nbs p; <mx:Button > tabEnabled="false" > id="buttonRemoveItem" > width="15" > height="14" > styleName="removeItemButtonSkin" > click="itemRendererDeleteButtonHandler(event)" > buttonMode="true" > /> > > <mx:Spacer width="5" /> > > </mx:HBox> > > > As said before the only components that I am interested in being in the > tabloop are the 2 numeric steppers. Maybe I'm missing something but > when the focus is on the "stepperTwo" and I hit tab it goes away. I have > no idea how to send the focus on the second item in the list, eg the > first nu! meric stepper of! the second item... > > I have tried to do stuff in the focuOut evt handler for the second > numeric stepper but it doesn't seem to work .... > > > TIA, > Claudiu >
