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

我有一个自定义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 docs也没有帮助.

解决方法

我使用mx：VBox作为我的数据网格的rendererIsEditor =“true”的自定义itemRenderer,我也遇到了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>

瞧！我的标签订单问题已修复.

我认为对于那些拥有更复杂的itemRenderers的人来说,你需要在你的类中完全实现IFocusManagerComponent接口…这可能是好的,因为它看起来会告诉flex如何通过itemRenderer自定义tab领域.或者您可以将顶级标记更改为已实现接口的内容,例如：您可以将mx：VBox嵌套在以下内容中：

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

……也许它有用吗？代码比我更复杂的人应该试试看看会发生什么.

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

解决方法

猜你在找的Flex相关文章