Flex常见问题及解决办法.docx

Flex常见问题及解决办法杨永耀,陈兵北京北科博研科技有限公司摘 要：本文主要对Flex运用过程中几个常见问题的现象和解决办法进行说明，常见问题包括1: Flex与ExtJs交互，切换tabpanel时导致事件和方法丢失2: Flex嵌入切换到HTML中焦点不能输入中文3: Flex数据异步加载和FLEX本身加载顺序控制4: Flex嵌入到HTML中遮盖DIV的问题关键词：Flex,ExtJs,事件丢失,中文输入,遮盖,异步加载1. Flex与ExtJs交互，切换tabpanel时事件和方法丢失我的flex封装文件是嵌入在extjs的tabpanel的一个tab中，当第一次打开该页面的时候，可以调用到ExternalInterface注册的方法，如果我切换到其他的tab然后再回到该页面，那么注册的方法就为null了。也就是说操作完flex的东西，再切换tab后，flex中注册过的方法和监听事件都丢失了。 另外如果在多个页签中有多个tabpanel时，各个页签中的FLEX对象会出现互相卡死现象。解决方法1： 重新注册flex中的方法和监听事件 解决方法2： 如果你点击flex里的内容怎么切换都没问题，只要操作过flex中的内容，在做tab切换，就会发现注册过的方法和监听事件都丢失了。 在切换tab前，可以把焦点从flex中移走，比如contentTabPanel.on(beforetabchange,function(tabPanel,tab) document.body.focus(); )2. Flex嵌入切换到HTML中焦点不能输入中文当焦点置于Flash后再切换到HTML元素中 如HTML的INPUT输入框中，不管怎么切换我们的输入法，中文就是出不来。其实这算是Flash的一个BUG。通过翻阅了FlexAPI相关函数时，发现flash.system.Capabilities参数组。flash.system.Capabilities中有个是查看系统的输入法 Capabilities.hasIME ：只读 指定系统是否安装了输入法编辑器 (IME)，如果是，则为 true，否则为 false。服务器字符串为 IME。当我们焦点进入到Flash时 我们的 IME.enabled属性直接被Flash禁用, IME.enabled值变为false 这也就是 当我们为什么焦点放在HTML的元素中,无论如何切换输入法就是不管用的原因。首先对Flash主程序进行事件监听用到这个事件MouseEvent.ROLL_OUT：用户将指针设备从 InteractiveObject 实例上移开时分派。事件目标是指先前在指针设备下的对象或该对象的父级。relatedObject 是将指针设备向其移动的对象。在该对象的父级链以上连续分派 rollOut 事件，以该对象为开头，并以除 relatedObject 的根或始祖之外的最高级别的父级结束。 rollOut 事件的目的是简化带有子级的显示对象容器的移开行为的编码。当鼠标离开显示对象区域或任何其子级区域并转到除其子级以外的对象时，显示对象分派 rollOut 事件。这是与 mouseOut 事件行为不同的行为，因为该事件是在每次鼠标离开显示对象容器的任何子对象区域时才会被分派，即使鼠标仍保留在显示对象容器的另一个子对象上也是如此。当光标离开Flash时手动设置输入法开启代码如下appGroup.addEventListener(MouseEvent.ROLL_OUT, setSRF);/* 当光标离开Flash时开启设置系统的输入法* */private function setSRF(event:MouseEvent):voidif(Capabilities.hasIME)/安装了输入法编辑器 try if(!IME.enabled) IME.enabled=true; IME.conversionMode=CHINESE; catch(error:Error) 3. Flex数据异步加载和FLEX本身加载顺序控制当Flex比较大，本身加载比较慢，而同时数据采用通过JS进行异步加载和交互时，就会出现Flex还没有加载完成，就出现数据装载而找不到Flex对象。 当然采用同步加载的方式也可以解决问题，但不利就是用户感受不是很好。解决办法就是在Flex加载完成之后处罚相关JS标准事件，这样就能解决相关问题。如下JS代码function ChildrenRefresh(baseparams,initparams)swfobject.embedSWF(REQUEST_CONTEXTPATH+ /rfs/flex/WaterLineKGraph.swf, caliChartFlashDiv,100%, 100%, 9.0.0, false, flashvars, params, attributes);bp = baseparams;if (baseparams.viewCode) showGraph();watfChart.id = chartId;var flashvars = loading : 【水位流量关系曲线图】,wmode : transparent,menu : false,getData : showGraph ;如FLEX中发现有getData : showGraph时，在装载完成之后触发该函数，并提示数据开始装载，这样用户感受和效果会比较好。function showGraph() if (!bp.viewCode) return;Watf.maskTopMsg(正在查询 , green);Ext.Ajax.request(method : POST,url : REQUEST_CONTEXTPATH + /watf/waterRegimeg.do?,params : Ext.urlEncode(viewCode : bp.viewCode,note : bp.note,name : ,thmcd : bp.thmcd,fthmcd : bp.fthmcd),success : function(res, options) var respText = Ext.util.JSON.decode(res.responseText);if(respText & respText.data & respText.data.length = 1) watfChart.watfChartNew(respText);Watf.unmaskTopMsg(查询成功, green, 600);else Watf.unmaskTopMsg(没有数据, green, 1500);,failure : function(res, options) Watf.unmaskTopMsg(查询出错了, red, 1500);); 4. Flex嵌入到HTML中遮盖DIV的问题默认情况下如果Flash被嵌入到Web页面中，则SWF文件默认被置于所有HTML元素的顶层渲染级别的。类似在所有html元素的总父容器上一层，无法被任何html元素遮挡。无论怎么设置flash容器和层的深度(z-index)也无济于事。遇到这个问题我们可以在插入flash的embed或object标签中加入“wmode”属性并设置为wmode=“transparent”或”opaque” 在Flex4中默认的HTML包围容器的方式变了如代码： var swfVersionStr = 10.0.0; var xiSwfUrlStr = playerProductInstall.swf; var flashvars = ; var params = ; params.quality = high; params.bgcolor = #ebf4ff; params.allowscriptaccess = always; params.allowfullscreen = true; var attributes = ; attributes.id = *_App; = *_App; attributes.align = middle; swfobject.embedSWF( *.swf, flashContent, 100%, 100%, swfVersionStr, xiSwfUrlStr, flashvars, params, attributes);swfobject.createCSS(#flashContent, display:block;text-align:left;); 这时我们可以在上面的params中加 params.wmode = opaque;或者 params.wmode = transparent;相关属性含义如下：l window 模式默认情况下的显示模式，在这种模式下flash player有自己的窗口句柄，这就意味着flash影片是存在于Windows中的一个显示实例，并且是在浏览器核心显示窗口之上的，所以flash只是貌似显示在浏览器中，但这也是flash最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面，这就导致默认显示方式下flash总是会遮住位置与他重合的所有DHTML层。但是大多数苹果电脑浏览器会允许DHTML层显示在flash之上，但当flash影片播放时会出现比较诡异的现象，比如DHTML层像被flash刮掉一块一样显示异常。l Opaque 模式这是一种无窗口模式，在这种情况下flash player没有自己的窗口句柄，这就需要浏览器需要告诉flash player在浏览器的渲染表面绘制的时间和位置。这时flash影片就不会在高于浏览器HTML渲染表面而是与其他元素一样在同一个页面上,因此你就可以使用z-index值来控制DHTML元素是遮盖fla