Flex 3 DataGridタブオーダー

Question

私はこのデータグリッドでタブオーダーを使用しようとしていましたが、何が間違っているのか分かりません。誰でもそれを見つけることができますか？

<?xml version="1.0" encoding="utf-8"?> 
<controls:MDataGrid xmlns:mx="http://www.adobe.com/2006/mxml" 
       xmlns:controls="com.iwobanas.controls.*" 
       xmlns:dgc="com.iwobanas.controls.dataGridClasses.*" 
       dataProvider="{locator.vendorInvoices}"> 

<mx:Script> 
    <![CDATA[ 
     import com.model.PayablesLocator; 

     [Bindable] private var locator:PayablesLocator = PayablesLocator.getInstance(); 
    ]]> 
</mx:Script> 

<controls:columns> 

    <dgc:MDataGridColumn dataField="loadNumber" 
         headerText="Load"/> 

    <dgc:MDataGridColumn dataField="carrierName" 
         headerText="Carrier"/> 

    <mx:DataGridColumn dataField="vendorInvoiceNumber" 
         headerText="Vendor Invoice #" 
         rendererIsEditor="true" 
         editorDataField="vendorInvoiceNumber"> 
     <mx:itemRenderer> 
      <mx:Component> 
       <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">       

        <mx:Script> 
         <![CDATA[ 
          protected function invoiceNumberInput_changeHandler(event:Event):void { 
           data.vendorInvoiceNumber = invoiceNumberInput.text; 
          } 
         ]]> 
        </mx:Script> 

        <mx:TextInput id="invoiceNumberInput" 
            text="{data.vendorInvoiceNumber}" 
            editable="true" 
            width="95%" 
            change="invoiceNumberInput_changeHandler(event)"/> 
       </mx:HBox> 
      </mx:Component> 
     </mx:itemRenderer> 
    </mx:DataGridColumn> 

    <mx:DataGridColumn dataField="vendorInvoiceDate" 
         headerText="Invoice Date" 
         rendererIsEditor="true" 
         editorDataField="vendorInvoiceDate"> 
     <mx:itemRenderer> 
      <mx:Component> 
       <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle"> 

        <mx:Script> 
         <![CDATA[ 
          import mx.controls.Alert; 
          import mx.events.CalendarLayoutChangeEvent; 
          import mx.events.CloseEvent; 

          protected function invoiceDateChanged(event:CalendarLayoutChangeEvent):void { 
           data.vendorInvoiceDate = event.newDate; 
          } 
         ]]> 
        </mx:Script> 

        <mx:DateField id="vendorInvoiceDateInput" 
            selectedDate="{data.vendorInvoiceDate}" 
            editable="true" 
            width="95%" 
            change="invoiceDateChanged(event)"/>      
       </mx:HBox> 

      </mx:Component> 
     </mx:itemRenderer> 
    </mx:DataGridColumn> 

    <mx:DataGridColumn dataField="isSelected" 
         headerText="Select" 
         rendererIsEditor="true" 
         editorDataField="isSelected"> 
     <mx:itemRenderer> 
      <mx:Component> 
       <mx:HBox horizontalAlign="center" verticalAlign="middle">      

        <mx:Script> 
         <![CDATA[ 
          import com.controller.PayablesController; 

          private var control:PayablesController = PayablesController.getInstance(); 

          private function onCheckboxClick():void { 

           data.isSelected = selectionCheckBox.selected; 
           control.updateBatchSelections(); 
          } 
         ]]> 
        </mx:Script>  

        <mx:CheckBox id="selectionCheckBox" 
           selected="{data.isSelected}" 
           change="onCheckboxClick()"/> 
       </mx:HBox> 
      </mx:Component> 
     </mx:itemRenderer> 
    </mx:DataGridColumn> 

</controls:columns> 

私は行ごとに次のようにタブ順序を取得しようとしている：選択>ベンダー請求書>請求書の日付は、私は次のフィールドにタブにしようとすると、それはのURLにジャンプブラウザ（この場合はIE）。私はネット上で見つけたものをたくさん試しましたが、どれもうまくいかなかったようです。

ご協力いただければ幸いです。

--Charly

Answer 1

このためサポートが組み込まれていないがあります。これは編集可能なセルがある場合に機能し、編集者がIFocusManagerComponentを実装する場合にのみ機能します。 （この場合、あなたのエディタはHBoxesの中に入っていません）。あなたはスパークデータグリッドを使用していた場合は、使用することができます：http://squaredi.blogspot.com/2011/09/precision-focus-control-within-spark.html

Answer 2

結果の作業コードを：

<?xml version="1.0" encoding="utf-8"?> 
<controls:MDataGrid xmlns:mx="http://www.adobe.com/2006/mxml" 
       xmlns:controls="com.iwobanas.controls.*" 
       xmlns:dgc="com.iwobanas.controls.dataGridClasses.*" 
       dataProvider="{locator.vendorInvoices}" 
       editable="true"> 

<mx:Script> 
    <![CDATA[ 
     import com.model.PayablesLocator; 

     [Bindable] private var locator:PayablesLocator = PayablesLocator.getInstance(); 
    ]]> 
</mx:Script> 

<controls:columns> 

    <dgc:MDataGridColumn dataField="loadNumber" 
         headerText="Load" 
         editable="false"/> 

    <dgc:MDataGridColumn dataField="carrierName" 
         headerText="Carrier" 
         editable="false"/> 

    <mx:DataGridColumn dataField="vendorInvoiceNumber" 
         headerText="Vendor Invoice #" 
         rendererIsEditor="true" 
         editorDataField="value"> 
     <mx:itemRenderer> 
      <mx:Component> 
       <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" 
         implements="mx.managers.IFocusManagerComponent">      

        <mx:Script> 
         <![CDATA[ 
          [Bindable] public var value:String; 

          override public function drawFocus(draw:Boolean):void { 
           invoiceNumberInput.setFocus(); 
          } 
         ]]> 
        </mx:Script> 

        <mx:TextInput id="invoiceNumberInput" 
            text="{value}" 
            width="95%"/> 

       </mx:HBox> 
      </mx:Component> 
     </mx:itemRenderer> 
    </mx:DataGridColumn> 

    <mx:DataGridColumn dataField="vendorInvoiceDate" 
         headerText="Invoice Date" 
         rendererIsEditor="true" 
         editorDataField="value"> 
     <mx:itemRenderer> 
      <mx:Component> 
       <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" 
         implements="mx.managers.IFocusManagerComponent">      

        <mx:Script> 
         <![CDATA[ 
          [Bindable] public var value:Date; 

          override public function drawFocus(draw:Boolean):void { 
           vendorInvoiceDateInput.setFocus(); 
          } 
         ]]> 
        </mx:Script> 

        <mx:DateField id="vendorInvoiceDateInput" 
            selectedDate="{value}" 
            editable="true" 
            width="95%"/> 

       </mx:HBox> 
      </mx:Component> 
     </mx:itemRenderer> 
    </mx:DataGridColumn> 

    <mx:DataGridColumn editorDataField="isSelected" 
         headerText="Select" 
         rendererIsEditor="true">   
     <mx:itemRenderer> 
      <mx:Component> 

       <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" 
         implements="mx.controls.listClasses.IDropInListItemRenderer,mx.managers.IFocusManagerComponent"> 

        <mx:Script> 
         <![CDATA[ 
          import com.controller.PayablesController; 

          import mx.controls.dataGridClasses.DataGridListData; 
          import mx.controls.listClasses.BaseListData; 

          private var control:PayablesController = PayablesController.getInstance(); 

          private var _listData:DataGridListData; 
          [Bindable] public var isSelected:Boolean; 

          override public function drawFocus(draw:Boolean):void { 
           selectionCheckBox.setFocus(); 
          } 

          override public function get data():Object { 
           return super.data; 

          } 

          override public function set data(value:Object):void { 
           super.data = value; 
           selectionCheckBox.selected = data.isSelected 
          } 

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

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

          protected function onChange(event:Event):void { 
           data.isSelected = selectionCheckBox.selected; 
           control.updateBatchSelections(); 
          }        
         ]]> 
        </mx:Script> 

        <mx:CheckBox id="selectionCheckBox" change="onChange(event)"/> 

       </mx:HBox> 

      </mx:Component> 
     </mx:itemRenderer> 
    </mx:DataGridColumn> 

</controls:columns>