4 Replies Latest reply on Aug 24, 2010 4:48 AM by Ibarim

    Focus on tabNavigator instead of textInput

    Ibarim Level 1

      I've got a tab navigator with forms inside, something like this:

       

      <mx:TabNavigator id="tabNav" width="433" height="100%" fontSize="12" fontWeight="normal" creationPolicy="all">
           <mx:Form label="Basic" width="100%" height="100%">
           <mx:FormItem label="Surname" width="100%" height="100%">
                <mx:TextInput id="surnameInput" text="{gridPacjent.selectedItem.nazwisko}" editable="false" width="200"/>
           </mx:FormItem>
           <mx:FormItem label="Name" width="100%" height="100%">
                <mx:TextInput id="nameInput" text="{gridPacjent.selectedItem.imie}" editable="false" width="200"/>
           </mx:FormItem>
           </mx:Form>
           <mx:Form label="Advanced" width="100%" height="100%">
               <some other formItems....>
           </mx:Form>
      </mx:TabNavigator>
      
      

       

      then, on some button press I got this function to set focus on textInput on the first tab:

       

       private function newPerson():void {     
               surnameInput.editable = true;
               nameInput.editable = true;
               tabNav.selectedIndex = 0;
               //I tried this
               nazwiskoInput.setFocus();
               //and this
               stage.focus = nazwiskoInput;
               //and this
               nazwiskoInput.setSelection(0,0);
      }
      
      

      but every solution I try sets the focus on tab navigator's tab instead of a textInput control. Has anyone got any idea how to do it properly?

       

      The problem appears only when I'm on other tabs. For example: when the component appears on the stage then calling this fuction newPerson() works good - it sets focus on the textInput control. But when I go to any other tab and then call this function it focuses on tab navigator.

        • 1. Re: Focus on tabNavigator instead of textInput
          BhaskerChari Level 4

          Hi lbarim,

           

          Checkout this example below...It works even if you navigate to another tab and returns to the original tab...

           

          Actually I think the problem is coming with the property that you set editable="false" on TextInput...

           

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

          <mx:Script>
            <![CDATA[
             private function newPerson():void {    
                      surnameInput.editable = true;
                      nameInput.editable = true;
                      tabNav.selectedIndex = 0;
                      surnameInput.setFocus();
                      //This below line is required only if you want to put the cursor at the first position of textinput
                      //surnameInput.setSelection(0,0);
             }

            ]]>
          </mx:Script>
          <mx:Button label="Set Focus" click="newPerson()"/>
          <mx:TabNavigator id="tabNav" width="433" height="100%" fontSize="12" fontWeight="normal" creationPolicy="all">
               <mx:Form label="Basic" width="100%" height="100%">
               <mx:FormItem label="Surname" width="100%" height="100%">
                    <mx:TextInput id="surnameInput" text=""  width="200"/>
               </mx:FormItem>
               <mx:FormItem label="Name" width="100%" height="100%">
                    <mx:TextInput id="nameInput" text="" width="200"/>
               </mx:FormItem>
               </mx:Form>
               <mx:Form label="Advanced" width="100%" height="100%">
                  
               </mx:Form>
          </mx:TabNavigator>


          </mx:Application>

           

           

          Thanks,

          Bhasker

          • 2. Re: Focus on tabNavigator instead of textInput
            Ibarim Level 1

            ****, I posted wrong names in my original post. The function is actually doing what you adviced:

            I was using 'surnameInput.setFocus();' and 'stage.focus=surnameInput', but they don't work - they set focus on the tab navigator instead of textInput

            I also removed the 'editable=false' parameter but it didn't help either.

            Thanks for help though.

            • 3. Re: Focus on tabNavigator instead of textInput
              BhaskerChari Level 4

              Hi lbarim,

               

              Have you tested the sample code that I have posted in my previous post...???

               

              I could see no problem in that...and I could see the focus being set in both cases..

               

              Are you using Flex3 or FlashBuilder4..??

               

              Thanks,

              Bhasker

              • 4. Re: Focus on tabNavigator instead of textInput
                Ibarim Level 1

                I tested Your solution and it works. But my still doesn't

                 

                I wonder where the difference might be...

                - I'm doing a full-screen Air app. not a browser app., but it has nothing to do, I tested your proposition as an Air app. and it worked

                - my tabNavigator is inside HBox, which is inside a VBox, which is inside a Panel. But it shouldn't have any consequences on focus behaviour

                - my textInput 'text' property has a bindable data: text="{someGrid.someItem.someField}", but it shouldn't spoil anything either

                - I got 3 tabs in my tabNavigator, but it has no influence on focus

                 

                I don't know what else might be wrong. I'm working on Flex 3.