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）。我尝试了网上找到的很多东西，但似乎都不起作用。

任何帮助将不胜感激。

——查理

Answer 1

对此没有内置支持。如果您有可编辑的单元格，这将起作用，并且只有当您的编辑器实现 IFocusManagerComponent 时，它才起作用。 （在这种情况下，您的编辑器被包装在 HBox 中，而 HBox 则没有）。如果您使用的是 Spark 数据网格，则可以使用： 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>