Flex 3 DataGrid 选项卡顺序答案

【问题标题】：Flex 3 DataGrid Tab OrderFlex 3 DataGrid 选项卡顺序
【发布时间】：2012-03-11 00:56:57
【问题描述】：

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

<?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，您能否列出一些您尝试过的事情（tabIndex 是我首先想到的）在发布有关自定义组件的问题时，请包含指向 API 的链接，我找到了这个我相信你正在使用的东西，但如果我们不必搜索reusable-fx.googlecode.com/svn/trunk/docs/com/iwobanas/controls/…，它会让每个人都更容易
啊，我也知道为什么我的建议行不通，为什么您尝试过的其他东西可能行不通。 DataGridColumn 和其他网格列类基本上是用于描述需要为网格动态创建的 UI 组件的模型对象，因此您并没有真正使用这些标签直接定义 UIComponents，而是给出了如何创建的描述需要他们的时候。因此，您可能需要通过查看在每个实例上适当设置 tabIndex 的自定义 headerRenderer 对象来处理此问题

标签： actionscript-3 apache-flex datagrid mxml

【解决方案1】：

没有对此的内置支持。如果您有可编辑的单元格，这将起作用，并且它也仅在您的编辑器实现 IFocusManagerComponent 时才起作用。（在这种情况下，您的编辑器被包裹在 HBoxes 中，而 HBoxes 没有）。如果您使用的是 spark 数据网格，则可以使用：http://squaredi.blogspot.com/2011/09/precision-focus-control-within-spark.html

【讨论】：

感谢 Flexicious。这就是我最终能够开始工作的地方。看起来我们的商店最终可以搬到 Spark 上会很好。
没问题。仅供参考，没有必要将您的编辑器包装在 HBox 中，特别是因为您在 HBox 中只有一个控件。所以你可以只使用

【解决方案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>

【讨论】：