ExtJS从零开始（0）-搭建MyEclipse+Tomcat+ExtJS4.2.1开发环境

q528

　　前言：
　　近期因为公司进行短暂的歇业调整 我也有了一些空闲的时间 混沌的过了不少些日子 慢慢平静下来了 心里想 在公司没有重新营业之前 总想干点什么有意义的事情
　　这些年从事的大部分都是技术工作 现在一空闲下来 回想曾经接触过的 使用过的软件技术 从最开始的纯Java技术 到后面WEB方向的HTML CSS JavaScript Ajax JSP Servlet Struts2 及
　　EclipseRAP   Adobe Flex  客户端方向的Swing EclipseRCP SWT JFace Microsoft Winform WPF 及一直在为我效力的Hibernate Ibaist Spring SQLServer Oracle MySQL等小伙伴
　　花了5分钟左右回想做过的项目 大大小小12个了 在XXX企业维护（功能升级 修改BUG）过6个月的1个医疗软件没有算进来  
　　
　　5天前 BOSS郑告诉我 既然公司还要过一段日期才营业 希望我能重新对公司技术框架进行一些检视 当然意思我也听出来了 就是那没办法令人心情愉快的Flex技术  
　　
　　RIA类富互联网应用现在的趋势 分两个方向在发展 A方向以Adobe Flex Microsoft SliverLight为代表的浏览器插件RIA应用 B方向则是以ExtJS Jquery EasyUI等利用HTML CSS
　　JavaScript组合实现的RIA应用 如何在这两个方向中去选择合适公司业务产品的技术呢 我想应该考虑的因素有业务产品的功能性 公司的开发成本 技术本身的优缺点 技术的拥护者与相关的资
　　源文档 技术的可扩展性 技术的生命周期与可持续性 将来的维护升级 客户的使用环境等 最终ExtJS悄悄的浮现出来了 完全满足了需求 像土豪般的霸气 也许因为ExtJS美工们的活会越来越
　　少
　　企业级InterRIA ExtJS作为头面技术再合适不过了 优雅简洁的UI风格 灵活的事件监听机制 因为衍生于JavaScript血统注定拥有了无比的可扩展性 与其它UI技术的集成也不是一件难事 　
　　
　　
　　OK 该进入主题了 从我的职业技术体系来分析 我选择以Java+ExtJS来作为系统的框架 那么在我心中自然最好的环境莫过于MyEclise+Spket+Tomcat
　　1. MyEclipse版本2013（MyEclipse Professional）下载地址http://www.myeclipseide.com
　　2. Apache-tomcat-6.0.35 下载地址http://tomcat.apache.org/download-60.cgi
　　3. Spket IDE 1.6.23 下载地址http://www.spket.com/
　　
　　一 安装调试好MyEclipse与Tomcat 如何做 我就不详细写了 我相信这是一个程序员最基本的要求 也不是本文的重点
　　
　　二 将Spket集成到MyEclipse
　　1  解压好的Spket目录如下

　　
　　2  建议以link方式安装Spket到MyEclipse中 找到MyEclipse的安装目录 如

　　3  在MyEclipse 的根目录新建一个目录extjs 当然也可以随意命名 为了规范建议以extjs命名 从spket根目录eclipse目录开始全部复制到extjs目录下 如下图

　　
　　4  在MyEclipse安装根目录少的dropins下新建extjs.link 以文本编辑器的方式编辑第3步中的路径 如下图

　　
　　5 重新启动MyEclipse 选择 Window>Preferences>  会发现增加了一个spket项 打开spket>JavaScript Profiles  如下图：

　　
　　6 点击窗体右边的New 新建一个Extjs 如下图

　　
　　7 选择新建的Extjs 再选择右边的Add Library 选择 ExtJS 如下图

　　
　　8  选择添加的ExtJS库 再选择右边的Add File 后 选择ExtJS根目录下的ext-all-dev.js文件 最好不要有中文路径 另外新建文件夹保存此文件 如下图


　　
　　9 将第六步中新建的ExtJS设置为default 设置之后Extjs就会变成粗体显示 如下图
   
　　
　　 基本的配置就到这里了 这时候 要做的就是重新启动MyEclipse
　　
　　10  重新打开MyEclipse后 新建一个JavaWEB项目，新建一个.js页面 输入Ext.之后 应该出现下面的提示就说明成功了

　　
　　11 当然很多情况下 可能并不会这样轻易得成功 那么 我们还可以去注意一些设置是否正确了 如下图
　　11.1 查看是否设置好了文件引用 Window>Preferences>General>Editors>File Associatior>*.js>选择Spket为default.

　　11.2   确认当前打开的.js文件是否是以spket Editor. 选择.js文件>右键Open With>Spket JavaScript Editor。
　　11.3   另外我想需要注意的就是各个版本之间的冲突了 我这一套版本确认是OK的
　　11.4   以及软件的安装路径 及所的涉及到路径的是否存在中文 很多时候由于中文引起的问题也不少 这也需要注意的 最好全部采用英文路径
　　
　　三  OK 我想搭建环境到这一步就可以了 下一文章 我想记录我的第一个Hello World吧 虽然这样很土鳖 但接触一个新技术 确实很有用
　　
　　作者寄望：
　　因本人是在一路学习ExtJS cnblogs上面ExtJS从零开始系列文章 是我整理记录我使用ExtJS的过程
　　或者我的方法实现 有更加好的方式 如看到文章的朋友们 有任何的意见与建议 欢迎批评与指正 一起进步