Actionscript 3 Flex3数据网格选项卡顺序

一段时间以来，我一直试图让标签顺序在这个数据网格上工作，但我不知道我做错了什么。有人能发现吗

<?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>

我试图按如下方式获取每行的选项卡顺序：供应商发票>发票日期>选择，但在本例中，当我尝试使用选项卡切换到下一个字段时，它会跳转到浏览器IE的URL。我试过在网上找到的很多东西，但似乎都不管用

任何帮助都将不胜感激

---

-Charly

对此没有内置支持。如果您有可编辑的单元格，这将起作用，而且只有当编辑器实现IfocusManager组件时，这也将起作用。在这种情况下，您的编辑器被包装在HBox中，而HBox没有。如果您使用的是spark datagrid，则可以使用：

生成的工作代码：

<?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>

---

嗨，Charly，你能列出一些你尝试过的东西吗？tabIndex是我第一个想到的。在发布关于自定义组件的问题时，请包括一个API链接，我发现了这个，我相信这就是你正在使用的，但是如果我们不需要搜索的话，对每个人来说都会更容易。而且我想我知道为什么我的建议不起作用，为什么你尝试过的其他东西可能不起作用。DataGridColumn和其他grid column类基本上都是用于描述需要为网格动态创建的UI组件的模型对象，因此您并不是直接使用这些标记来定义UIComponents，而是在需要时向它描述如何创建它们。因此，您可能需要通过创建自定义headerRenderer对象来处理此问题，这些对象可以在每个实例上适当地设置tabIndex。这就是我最终能够得到的工作。看来我们的店最终可以搬到斯帕克去会很好。没问题。仅供参考，没有必要将编辑器包装在HBox中，特别是因为HBox中只有一个控件。所以你可以用