Flex-ItemRenderer-verhindert, dass die Verwendung der Tabulatortaste zwischen text-inputs

Ich lief in das gleiche problem mit einem itemRender bei "ListBase abgeleitete" Komponente.
Ich fand, dass alle "ListBase abgeleitete" Komponenten wickeln Sie alle Artikel rendereres in einem ListBaseContentHolder.

Aus der ListBase-Quelle:

/**
 *  An internal display object that parents all of the item renderers,
 *  selection and highlighting indicators and other supporting graphics.
 *  This is roughly equivalent to the <code>contentPane</code> in the 
 *  Container class, and is used for managing scrolling.
 */
protected var listContent:ListBaseContentHolder;

Den tabChildren und tabEnabled Eigenschaften dieser Klasse sind standardmäßig auf false festgelegt. Die einzige Lösung die ich finden konnte, war die Erstellung einer MyList Komponente, die sich aus der Liste und überschreiben Sie die Methode createChildren (wo die listContent initialisiert wird) auf diese Weise:

import flash.display.DisplayObject;
import mx.controls.List;

public class MyList extends List {
    override protected function createChildren():void {
            super.createChildren();
            this.listContent.tabChildren = this.tabChildren
            this.listContent.tabEnabled = this.tabEnabled
        }
    }

Dann mit "<MyList tabChildren="true"/>" statt "<mx:List/>" Komponente gab mir wieder die Tab-functionnality in der ItemRender.

Hoffe es hilft,

Warum machst du tabChildren="false"? Wollen Sie nicht auf der Registerkarte die Kinder der HorziontalList? da die itemRenderer-ist ein Kind von der Liste....

Ich hatte das gleiche problem, löste es, indem Sie versuchen, zu implementieren das Verhalten der tab-Taste. Der Schlüssel zum Erfolg ist einfach die event.preventdefault() Methode. Der code verwendet wird, gezeigt vor.

private function initFocusMap():void {
    focusMap = {
        InNom:benefPersona.InApePat,
        InApePat:benefPersona.InApeMat,
        InApeMat:benefPersona.InFecNacimiento,
        InFecNacimiento:benefPersona.InRFC,
        InRFC:benefPersona.InCURP,
        InCURP:benefPersona.InIdSexo,
        InIdSexo:benefPersona.InIdParentesco,
        InIdParentesco:benefPersona.InPorc,
        InPorc:domBeneficiario.InCalle,
        InCalle:domBeneficiario.InNumExterior,
        InNumExterior:domBeneficiario.InNumInterior,
        InNumInterior:domBeneficiario.InCP,
        InCP:domBeneficiario.InColonia,
        InColonia:domBeneficiario.InIdPais,
        InIdPais:domBeneficiario.InIdEdo,
        InIdEdo:domBeneficiario.InIdCiudad,
        InIdCiudad:benefPersona.InNom                   
    }
}

private function kfcHandler(event:FocusEvent):void {
    var id:String = ""
    if (event.target is AperClsDateField || event.target is AperClsCombo) {
        id = event.target.id;
    } else {
        id = event.target.parent.id;
    }
    if (id != "InIdDelegacionMunic") {
        event.preventDefault();             
        focusManager.setFocus(focusMap[id]);
    }
}

Ich hatte die gleichen Probleme der Navigation mit der Tabulatortaste eine der itemRenderer in meinem AdvancedDataGrid - (by the way, bin ich mit dem Flex SDK 3.5), aber dieser Beitrag war extrem hilfreich, damit ich mich um mein tab-freundlich itemRenderer-so möchte ich einen Beitrag als gut 🙂

Machen diese zu arbeiten, müssen Sie auch ändern Sie einige Eigenschaften für das raster und gridColumn.

Let ' s 1. Rede über das raster und gridColumn.

Wie Sie alle wissen, wenn Sie das raster "editable" - Eigenschaft auf "true" können Sie die Registerkarte durch jede Spalte, Zelle (vorausgesetzt, Sie haben nicht die Spalte "editable" - Eigenschaft auf "false").

Schritt #1, machen Sie Ihre grid "editable" - Eigenschaft setzt auf "true"

Schritt #2, machen Sie Ihre grid-Spalte "editable" - Eigenschaft setzt auch auf "true" und "rendererIsEditor" auf "true"

Ist es wichtig, legen Sie die dataField-zu einem falschen Feld, weil da wir den renderer als Redakteur das bedeutet, dass was auch immer Sie aktualisieren in der itemRenderer zugewiesen werden, die dataField-d.h. Sie legen Sie die dataField-zu "Foo", die einen Typ int, und Sie nicht-primitive Objekte füllen einer comboBox-itemRenderer. Wenn Sie eine Auswahl treffen, wird dieses Objekt wird zugeordnet zu "Foo"

Schritt #3, machen Sie Ihre grid-Spalte "Datenfeld" - Eigenschaft setzt auch zu einem falschen Feld.

Nun lassen Sie uns das tun,, die es ermöglichen, Navigation mit der Tabulatortaste zu arbeiten itemRenderer

Weiß ich, dass dies nicht in einer optimierten version, aber dies zu tun für den 1. Durchlauf.

import mx.core.mx_internal;
import mx.managers.IFocusManagerComponent;
use namespace mx_internal;

public class FriendlyItemRendererContainer extends HBox implements IFocusManagerComponent
{

    public function FriendlyItemRendererContainer ()
    {
    super();
    addEventListener(FocusEvent.KEY_FOCUS_CHANGE, keyFocusChangeHandler);       
    }

    private var _listData:DataGridListData;
    //This is required to make it work as itemEditor
    public var text:String;

    private function keyFocusChangeHandler(event:FocusEvent):void
    {
            if (event.keyCode == Keyboard.TAB &&
                ! event.isDefaultPrevented() &&
                findNextChildToFocus(event.shiftKey))
            {

                event.preventDefault();

            }

    }

    private function findNextChildToFocus(shiftKey:Boolean):Boolean
    {
          var myChildrenAry:Array = getChildren();
      var incr:int = shiftKey ? -1 : 1;
      var index:int = shiftKey ? myChildrenAry.length : 0;
      var focusChildIndex:int = 0;
      var found:Boolean = false;

         for (focusChildIndex = 0; focusChildIndex < myChildrenAry.length; ++focusChildIndex)
     {
        if (!(myChildrenAry[focusChildIndex] as UIComponent).visible ||
            (myChildrenAry[focusChildIndex] is Container))
        {
            //If it's an invisible UIComponent or a container then just continue
            continue;
        }

            if (myChildrenAry[focusChildIndex] is TextInput)
        {
                    if (systemManager.stage.focus == (myChildrenAry[focusChildIndex] as TextInput).getTextField())
                    {
                        (myChildrenAry[focusChildIndex] as UIComponent).drawFocus(false);
                        found = true;
                        break;
                    }
        }
        else
        {
                    if (systemManager.stage.focus == myChildrenAry[focusChildIndex])
                    {
                        (myChildrenAry[focusChildIndex] as UIComponent).drawFocus(false);
                        found = true;
                        break;
                    }
       }
         }

         if (!found)
     {
        focusChildIndex = 0;
      }

      while (true)
      {
                focusChildIndex = focusChildIndex + incr;

                if ((focusChildIndex < 0) || (focusChildIndex >= myChildrenAry.length))
                {
                    UIComponentGlobals.nextFocusObject = null;
                    return false;
                }
                else
                if (myChildrenAry[focusChildIndex] is UIComponent)
                {
                (myChildrenAry[focusChildIndex] as UIComponent).setFocus();
                (myChildrenAry[focusChildIndex] as UIComponent).drawFocus(true);

                    break;
                }
        }


        return true;
    }

    override public function setFocus():void
    {
       var myChildrenAry:Array = getChildren();
       if (myChildrenAry.length > 0)
       {
        for (var i:int = 0; i < myChildrenAry.length; ++i)
        {
            if ((myChildrenAry[i] is UIComponent) && (myChildrenAry[i] as UIComponent).visible)
            {
               (myChildrenAry[i] as UIComponent).setFocus();
                   (myChildrenAry[i] as UIComponent).drawFocus(true);
               break;
            }
       }
    }

    }

    public function get listData():BaseListData
    {
            return _listData;
    }

    public function set listData(value:BaseListData):void
    {
            _listData = DataGridListData(value);
    }  
}

Beispiel dafür, wie es auf Ihren itemRenderer:

<FriendlyItemRendererContainer xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:TextInput/>
<mx:Button label="Boo"/>
<mx:RadioButton/>
<<mx:TextInput/>
<mx:Button label="Baa"/>

</FriendlyItemRendererContainer>

Nur dann setzen, dass in der gridColumn-und das ist es.

Genießen.