硕正套件在ExtJS中的应用心得

本案例由捷永信息 毛必炬 提供
Email: maobiju@ginyong.com
QQ：15380805

　　1.前言

　　我公司的产品是基于 Java EE 的 B/S 结构报表类项目，前端采用 ExtJS 4.0 结合硕正套件实现，硕正套件帮我们完美解决了表格的展示、交互、打印的问题。下面就开发中 ExtJS 与硕正套件的应用谈一点心得体会。

　　2.心得1.如何动态加载

　　一般需要使用硕正套件必须在页面文件中加上如下脚本:

 <script type='text/javascript' src='dynaload.js?20'></script>

　　但是我们想把硕正套件封装成 ExtJS 的组件来随时能使用，额外加上这么一句显得非常别扭。且 ExtJS 都是 OnePage 的应用，很多时候我们并不想一开始就把什么东西都列入加载项，而是希望能够 lazyload。经过反复试验，发现可以利用 ExtJS 的动态加载机制实现。实现步骤如下：

a).假设脚本存放位置(与启动页面的相对位置)为 resources/supcan/dynaload.js

b).修改dynaload.js，在末尾添加一条语句:

 Ext.define('resources.supcan.dynaload',{});

c).在封装组件的定义 requires 处增加语句:

 Ext.define('gp.util.form.SupcanImpl', {
  requires:['resources.supcan.dynaload'
  ,'gp.wf.editor.util.XmlUtil'
  ,'gp.store.form.FrmFlds'
  ,'gp.store.form.FrmTbls']

　　这样 gp.util.form.SupcanImpl 组件被加载时就能动态加载dynaload.js，且 ExtJS 的加载机制能保证即使多处使用组件也不会出现重复加载的问题。

　　3.心得2.IE浏览器中ActiveX控件遮挡其他控件的问题

　　以前在 asp, jsp 网页中也经常碰到 div 菜单、对话框等被 select 控件、flash 等遮挡的问题。ExtJS 都是用 div 来模拟实现窗口、对话框等UI组件的，硕正套件是ActiveX控件，所以同样会碰到这个问题。查找ExtJS的文档，马上就有答案，那就是在应用启动时设置:

 Ext.useShims = true;

　　默认情况向是false, 文档说明中提到当使用到 flash 等插件且是 IE 时，可能需要设置为true。
　　这样，就能顺利在硕正套件的上层弹出对话框、窗口等UI组件了.

　　4.心得3.FireFox浏览器中，插件在隐藏时被销毁、重新创建的问题

　　该问题在硕正官网的开发文档中《常见问题解答》的"问16" 中有描述，但没有解决方案。Baidu或者Google一下，发现这个似乎是 FireFox 多年来一直存在的 Bug，众多 flash 插件早已中枪，硕正套件也是Plug-In插件，没有理由幸免。
　　众多的解决方案中大多是修改默认的隐藏模式 display/block 为其他模式来规避，否则没招。对应到 ExtJS 中，则是可视组件的 hideMode 属性，它的默认模式就是 display/block，但是实验中发现改成其他模式同样不靠谱。查找ExtJS的文档、及源码，发现还有一个文档中未公开的模式:
　　　　hideMode=’asclass’
　　官方讨论组里面也有描述，可以解决此问题。那么定义UI组件时，采用如下模式即可(以panel为例)：

 Ext.define(‘myPanel’,{
  Items:[
  {
   hideMode:'asclass',
    layout:’fit’,
    html:’ insertTreeList(id,para)’
  }
  ]
 });

　　不过实际应用中发现，上述模式在单独使用时没有问题，但是 ExtJS 的 UI 组件往往是多层嵌套的，那这种模式也会时常失灵。通过多次反复观察 render 后的 html 代码与实验, 最后总结出一种模式能较为彻底解决问题，同样以Panel为例：

 Ext.define(‘myPanel’,{
  Items:[
  {
   hideMode:'asclass',
   layout:’fit’,
    Items:[{
     html:’ insertTreeList(id,para)’
    }]
  }
  ]
 });

　　注意与前例的对比，关键就是在 hideMode:'asclass' 所在层，将硕正套件单独加在一个内层中。这样 myPanel 无论被用在什么地方都不会出现控件被浏览器销毁的情况。

　　5.心得4.如何让硕正套件支持Chrome浏览器

　　大家都知道硕正套件能完美支持 IE 和 FireFox 两大浏览器，可 ExtJS 能支持绝大多数的浏览器啊，目前 Chrome 浏览器的性能是有目共睹的，用户群也在不断扩大中，如果能够支持岂不是一件大好事。现在有个较好的工具暂时也能解决这个问题，就是ActiveX for Chrome 。笔者经过试用，发现能较好地支持硕正套件(略有瑕疵, 但基本不影响使用)。不过我们热切期待硕正官方版本的正式支持。

　　使用用步骤：
a.下载安装ActiveX for Chrome；
　　目前最新版本是1.4.9.6, 下载地址 http://code.google.com/p/np-activex/downloads/list
b. 对dynaload.js下面这段略作修改：

 var typeid;
 if($isIE==false)
  typeid = 'type="application/supcan-plugin" Codebase="' +SupcanPath+ 'supcan.xpi"';
 else
  typeid = 'CLASSID="clsid:619F1AC0-2644-40D3-9EB1-22F81C5FE097" Codebase="' +SupcanPath+ 'supcan2.cab#Version=1,0,0,3"';

　　修改思路: 硕正套件判断是否IE，否则就是FireFox, 把这段判断改成是否 FireFox 否则就是IE (ActiveX for Chrome其实是让插件认为自己是在 IE 里面运行!).
　　以上是开发中的一些体会与大家分享，希望能有所帮助。
　　附：经过小改造的dynaload.js.

　　硕正公司的提示

　　硕正套件从 1.0.75.0 版开始，已原生支持 Chrome 了。