请高手解释一上flex tabindex的跳转顺序

请高手解释一下flex tabindex的跳转顺序
现在正在做flex的tabindex顺序的调整，很是疑惑。
因为我们系统里有很多自定义的控件，当我在页面上指定了tabindex，又在控件里指定了tabindex的时候，它是如何跳转的呢？
以下是个简单的例子。

自定义控件

XML code

<?xml version="1.0" encoding="utf-8"?><mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:ns1="com.a.b.components.*" height="37" top="10" left="10" width="98%" creationComplete="init()" >    <mx:MenuBar id="workflowmenubar" width="100%" height="37" labelField="@label" click="menuApplicationHandler(event)"/>    <ns1:ComDisplayDate id="comDate" right="100" top="7" width="390">    </ns1:ComDisplayDate>    <ns1:ComButtonLogout id="syslogout" tabIndex="1" top="5" right="35">    </ns1:ComButtonLogout>    <mx:Image id="helpImg" source="assets/images/help.png" tabIndex="2" right="3" click="onHelpImgClickHandler(event)"/>            private function init():void{                syslogout.tabIndex=this.tabIndex;            }            private function onHelpImgClickHandler(event:MouseEvent):void{                var url:String=this.parentApplication.SERVER_ADDR + "/workFlow.pdf";                openURLInWindow(url);             }       ]]>    </mx:Script></mx:Canvas>

下面是页面的引用部分

XML code

<?xml version="1.0" encoding="utf-8"?><mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"           xmlns:ns1="com.a.b.components.*"           xmlns:flexlib="http://code.google.com/p/flexlib/"           layout="absolute" width="100%" height="100%"           creationComplete="init()"           minHeight="600" minWidth="800">    <mx:Script>        <![CDATA[            import mx.collections.SortField;            import mx.collections.Sort;            import mx.events.DataGridEvent;            import mx.utils.ObjectUtil;            import mx.utils.StringUtil;            import flexlib.controls.tabBarClasses.SuperTab;            import mx.core.ScrollPolicy;            private function initMXML():void            {                changePageTitle("WIN067"));                hboxIncidentSelectConditions.height=0;            }        ]]>    </mx:Script>    <ns1:ComWorkFlowApplicationMenu id="workFlowApplicationMenu" tabIndex="1" tabEnabled="true" height="47" left="10" width="{mainVbox.width}" >    </ns1:ComWorkFlowApplicationMenu>    <mx:VBox id="mainVbox" right="20" left="10" top="52" bottom="10" tabIndex="2" minWidth="550">    </mx:VBox></mx:Module>

页面里也有个tabindex=2的对象，它应该如何跳转呢，
如果我把tabindex=2 改为=3，难道就能顺利从控件跳出来吗？

[解决办法]
tabIndex你可以理解为是一个全局的变量，定义了Tab键触发的焦点顺序

如果出现你上面说的tabIndex重复情况，父容器优先

其实这种问题你自己写个Demo测试一下就知道了~~~
[解决办法]
测试例子给你贴上，就不该有疑问了~~
Test
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()" xmlns:n1="*">
<mx:VBox>
<n1:comp1/>
<n1:comp2/>
</mx:VBox>
</mx:Application>

comp1

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
<mx:HBox>
<mx:Button label="第二个" fontSize="16" tabIndex="2"/>
<mx:TextInput id="input1" tabIndex="3" text="第三个"/>
</mx:HBox>
</mx:Canvas>

comp2
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
<mx:VBox>
<mx:Button label="第一个" tabIndex="1"/>
<mx:TextInput id="input2" tabIndex="4" text="第四个"/>
<mx:Button label="重复第二个" tabIndex="2"/>
</mx:VBox>
</mx:Canvas>
[解决办法]
你用Image来显示图片当然是没有效果

借助容器的backgroundImage属性来实现，内部放入链接即可

例<mx:Canvas width="200" height="200" borderStyle="inset" backgroundImage="images/bg.jpg">
<mx:LinkButton label="O(∩_∩)O~" fontSize="16"/>
</mx:Canvas>

查看更多 下一篇