In recent years most of the systems are getting upgraded with the new User Interface and Extjs is once of the most widely used technology for the rich look and feel. In most of the domain mostly in DMS (Document Management System) upload and download functionality is provided. To achieve the performance most of the system uses applets for upload and downloading the content from the systems. One of the major problem with applet is they used different tags (applet, object and embed) for different browsers. I came across such issues so decided to write a blog on it.
To achieve the mention problem i am writing few steps that will be helpful to you guys.
1) Create a main.html page and in the same directory put the ext-base.js and ext-all.js files.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script type="text/javascript" src="ext-base.js"></script> <script type="text/javascript" src="ext-all.js"></script> <script type="text/javascript" src="applet.js"></script> <script> Ext.onReady(function(){ my.appletRenderer.getFileSelector(); my.appletRenderer.getUploadApplet(); }); </script> </head> <body scroll="no"> <div id="center"> <div id="x-desktop"> <div id="center-panel-container" style="background:transparent;"></div> </div> </div> </body> </html> |
2) Create an applet.js file in the same directory with following contents.
my.appletRenderer = { getFileSelector : function() { if (new ActiveXObject("Scripting.Dictionary") != null) { return this.getActiveXFileSelector(); } else { return this.getSwingFileSelector(); } }, getSwingFileSelector : function(){ if (Ext.isIE || Ext.isChrome) { if (Ext.isIE8 ) { return new Ext.Panel({ renderTo: 'center-panel-container', height: 0, html: '<object ' + 'id = "SwingFileSelectorApplet" ' + 'name="SwingFileSelectorApplet" ' + 'codebase="" ' + 'archive="" ' + 'code="" ' + 'cache_archive="" ' + 'cache_version="" ' + 'width="0" ' + 'height="0" ' + 'mayscript="true" ' + 'bodyStyle="display:none;"> ' + '</object>' }); }else{ return new Ext.Panel({ renderTo:'center-panel-container', height : 0, html : '<applet ' + 'id="SwingFileSelectorApplet" ' + 'name="SwingFileSelectorApplet" ' + 'codebase="" ' + 'archive="" ' + 'code="" ' + 'width=0 ' + 'height=0 ' + 'mayscript="true">' + '<param name="cache_archive" value="" />'+ '<param name="cache_version" value="" />'+ '</applet>' }); } }else{ return new Ext.Panel({ renderTo:'center-panel-container', height : 0, html:'<EMBED ' + 'id="SwingFileSelectorApplet" ' + 'name="SwingFileSelectorApplet" ' + 'codebase="" ' + 'archive="" ' + 'code="" ' + 'type="application/x-java-applet;version=1.4" ' + 'cache_archive="" ' + 'cache_version="" ' + 'EMBEDDED="true" ' + 'mayscript="true" ' + 'width="0" ' + 'height="0"> ' + '<NOEMBED> No Java 2 SDK, Standard Edition v 1.4.1 support for APPLET!! </NOEMBED> ' + '</EMBED>' }); } }, getActiveXFileSelector : function() { return new Ext.Panel({ renderTo:'center-panel-container', height : 0, html : ' <object classid="" align="baseline" border="0">' + '<param name="LPKPath" value="">' + '</object>' + '<object classid="" codebase="" ' + 'VIEWASTEXT name="fileDialog" id="CommonDialog1"><param NAME="CancelError" VALUE="0">' +'<param NAME="DialogTitle" VALUE="'+ fs.locale.write("docUpload", "selectFile") +'">' +'<param NAME="" VALUE=""><param NAME="" VALUE="">' +'</object>' }); }, getUploadApplet : function(){ if(Ext.isWindows){ return this.getWindowsUploadApplet(); } else{ return this.getUnixUploadApplet(); } }, getWindowsUploadApplet : function(){ if (Ext.isIE) { if (Ext.isIE8 ) { return new Ext.Panel({ renderTo:'center-panel-container', height : 0, html : '<object ' + 'id = "FileUpload" ' + 'name="FileUpload" ' + 'codebase="" ' + 'archive="" ' + 'code="" ' + 'width=0 ' + 'height=0 ' + 'mayscript="true" ' + 'bodyStyle="display:none;">' + '<param name="cache_archive" value="" />' + '<param name="cache_version" value="" />' + '</object>' }); }else{ return new Ext.Panel({ renderTo:'center-panel-container', height : 0, html : '<applet ' + 'id = "FileUpload" ' + 'name="FileUpload" ' + 'codebase="" ' + 'archive="" ' + 'code="" ' + 'width=0 ' + 'height=0 ' + 'mayscript="true" ' + 'bodyStyle="display:none;">' + '<param name="cache_archive" value="" />' + '<param name="cache_version" value="" />' + '</applet>' }); } }else if (Ext.isChrome) { return new Ext.Panel({ renderTo:'center-panel-container', height : 0, html : '<applet ' + 'id = "FileUpload" ' + 'name="FileUpload" ' + 'codebase="" ' + 'archive="" ' + 'code="" ' + 'width=0 ' + 'height=0 ' + 'mayscript="true" ' + 'bodyStyle="display:none;">' + '<param name="cache_archive" value="" />' + '<param name="cache_version" value="" />' + '</applet>' }); }else{ return new Ext.Panel({ renderTo:'center-panel-container', height : 0, html:'<EMBED ' + 'id="FileUpload" ' + 'name="FileUpload" ' + 'codebase="" ' + 'archive="" ' + 'code="" ' + 'type="application/x-java-applet;version=1.4" ' + 'cache_version="" ' + 'cache_archive="" ' + 'width="0" ' + 'height="0" ' + 'mayscript="true"> ' + '<NOEMBED> No Java 2 SDK, Standard Edition v 1.4.1 support for APPLET!! </NOEMBED>'+ '</EMBED>' }); } }, getUnixUploadApplet : function(){ return new Ext.Panel({ renderTo:'center-panel-container', height : 0, html : '<applet ' + 'id = "FileUpload" ' + 'name="FileUpload" ' + 'codebase="" ' + 'archive="" ' + 'code="" ' + 'width=0 ' + 'height=0 ' + 'mayscript="true" ' + 'bodyStyle="display:none;">' + '<param name="cache_archive" value="" />' + '<param name="cache_version" value="" />' + '</applet>' }); } } |
3) In the applet.js file if you pass the proper values of the attribute which i have kept blank like codebase, archive,code,classid etc. the applets will get render.
4) View the main.html and view source the applets be enabled.
5) And this code will work for almost all the browser and OS. (Only you need to create your own jar files operating system specific)
6) Same check can be applied for the download and other applet.
相关推荐
Extjs & Ext.net中的一些属性
extjs&使用grid显示数据参照.pdf
ext可视化设计的破解,在myeclipse中使用ext框架
最新 HTML&JS&ExtJS&jQuery 智能提示 Eclipse插件 可直接解压安装
EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用
extjs资料extjs资料extjs资料extjs资料extjs资料
ExtJS实用开发指南&ExtJS中文文档-API
extjs实现简单的树状结构级联Ext onReady function { Ext QuickTips init ; Ext BLANK IMAGE URL "extjs resources images default s gif"; var mytree new Ext tree TreePanel { el : "...
Extjs例子Extjs例子Extjs例子Extjs例子Extjs例子
xtJs已经升级到了5.0了,目前可能多数应用还在使用ExtJs 3.系列。 从开发大型的web后台或者企业管理系统来看,ExtJs3的缺陷还是比较明显的,从ExtJs4 开始引入了MVC架构,从而能够从容的组织系统的JS文件了。 从...
ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS...
EXTJS实例 EXTJS树,可以编辑的EXTJS,EXTJS3.0
extjs电子书,extjs电子书,extjs电子书,extjs电子书
extJs3升级extjs4方案, extJs3升级extjs4需要修改大量代码
包含各种类型的extjs小图标,Extjs4小图标
extjsapi,extjs文档,api手岫
一 Extjs 基础 EXTJS4自学手册——EXT文件目录,本地加载文档,命名规范 EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) ...
JBPM4 SSH EXTJS JBPM SSH EXTJS JBPM4 SSH EXTJS JBPM SSH EXTJS JBPM4 SSH EXTJS JBPM SSH EXTJS JBPM4 SSH EXTJS JBPM SSH EXTJS 希望对大家有帮助。
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
项目进行前端框架升级——extJS 4升级至extJS6.6所遇的一些问题及相对应的解决方案建议