Flex ItemRenderer可防止在文本输入之间使用Tab键

Question

我有一个自定义ItemRenderer,它在3个面板中显示5个文本输入:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    height="300"
    width="800"
    creationComplete="onCreationComplete()"
>
    <!-- code-behind -->
    <mx:Script source="ChainListRenderer.mxml.as" />

    <mx:Label text="{data.title}" fontSize="25" fontWeight="bold" width="100%" textAlign="center" />
    <mx:HBox>
        <mx:Panel id="triggerPanel" title="Trigger" width="260">
            <mx:VBox id="tpBoxes" width="100%" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
                <mx:TextInput id="trigger1" width="100%" textAlign="left" tabIndex="0" tabEnabled="true" />
                <mx:TextInput id="trigger2" width="100%" textAlign="left" tabIndex="1" tabEnabled="true" />
                <mx:TextInput id="trigger3" width="100%" textAlign="left" tabIndex="2" tabEnabled="true" />
                <mx:TextInput id="trigger4" width="100%" textAlign="left" tabIndex="3" tabEnabled="true" />
                <mx:TextInput id="trigger5" width="100%" textAlign="left" tabIndex="4" tabEnabled="true" />
            </mx:VBox>
        </mx:Panel>
        <mx:Panel id="linkPanel" title="Link" width="260">
            <mx:VBox id="lpBoxes" width="100%" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
                <mx:TextInput id="link1" width="100%" textAlign="left" tabIndex="5" tabEnabled="true" />
                <mx:TextInput id="link2" width="100%" textAlign="left" tabIndex="6" tabEnabled="true" />
                <mx:TextInput id="link3" width="100%" textAlign="left" tabIndex="7" tabEnabled="true" />
                <mx:TextInput id="link4" width="100%" textAlign="left" tabIndex="8" tabEnabled="true" />
                <mx:TextInput id="link5" width="100%" textAlign="left" tabIndex="9" tabEnabled="true" />
            </mx:VBox>
        </mx:Panel>
        <mx:Panel id="answerPanel" title="Answer" width="260">
            <mx:VBox id="apBoxes" width="100%" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
                <mx:TextInput id="answer1" width="100%" textAlign="left" tabIndex="10" tabEnabled="true" />
                <mx:TextInput id="answer2" width="100%" textAlign="left" tabIndex="11" tabEnabled="true" />
                <mx:TextInput id="answer3" width="100%" textAlign="left" tabIndex="12" tabEnabled="true" />
                <mx:TextInput id="answer4" width="100%" textAlign="left" tabIndex="13" tabEnabled="true" />
                <mx:TextInput id="answer5" width="100%" textAlign="left" tabIndex="14" tabEnabled="true" />
            </mx:VBox>
        </mx:Panel>
    </mx:HBox>
</mx:VBox>

不幸的是,当用作ItemRenderer时,即使使用上面的tabIndex值,文本输入之间的选项卡也不起作用.如果我将此代码复制到自己的MXML应用程序,则文本输入之间的选项卡按预期工作.

有谁知道在这种情况下如何恢复标签？如果我必须在没有这么简单的可用性元素的情况下发布这个应用程序,那将是一种耻辱.

我想我可能需要实现mx.managers.IFocusManagerComponent,但我找不到任何关于如何做到这一点的例子,而且FocusManager文档也没有帮助.

Answer 1

我使用 mx:VBox 作为自定义 itemRenderer，其 rendererIsEditor="true" 用于我的数据网格，并且我也遇到了 Tab 键顺序问题。

我发现 itemRenderer 需要实现 IFocusManagerComponent 以便主应用程序的 FocusManager() 能够正确地选择它。我尝试实现该接口：

<?xml version="1.0"?>
<mx:VBox implements="mx.managers.IFocusManagerComponent" ...>
 [the rest of my itemRenderer code]
</mx:VBox>

...事实证明做起来相当复杂...需要实现很多接口函数。

但就我而言，我很幸运；我的 itemRenderer 中只有一个 TextInput 元素（其余的都只是自定义代码、验证器和格式化程序），因此我将 itemRenderer 从 mx:VBox 转换为 mx:TextInput （它已经实现了 IFocusManagerComponent）：

<?xml version="1.0"?>
<mx:TextInput ...>
 [the rest of my itemRenderer code]
</mx:TextInput>

瞧！我的 Tab 键顺序问题已修复。

我想对于那些拥有更复杂 itemRenderer 的人来说，结论是您需要在类中完全实现 IFocusManagerComponent 接口...这可能很好，因为它看起来会告诉 flex 如何通过 itemRenderer 自定义选项卡字段。或者，也许您可​​以将顶级标记更改为已经实现接口的标记，例如：您可以将 mx:VBox 嵌套在以下内容中吗：

<mx:Container focusIn="FocusManager.setFocus(trigger1)">

...它可能有效吗？代码比我更复杂的人应该尝试一下，看看会发生什么。