【Extjs】eclipse 部署EXTJS
下载：ExtJS 4.1.1
在Eclipse中安装spket插件
下载：spket-1.6.23.zip最低要求：你需要java 1.5或更高版本运行安装程序，可独立使用步骤：1.作为eclipse的插件使用，按Plugin进入下载页面把他下载下来。让spket作为javascript的默认编辑器
步骤：
Eclipse工具栏 window --> preferences --> Editors --> File Associations --> 右面的File types选中*.js --> 下面的Associated editors选中Spket javascript Editor --> 按右面的按钮Default --> OK退出
建立js文件，的图标变成js文件对应的图片就成功了。
Hello word 项目建立
1.eclipse中新建Dynamic Web Project项目，命名为ExtjsTest
2.为避免eclipse的校验可进行如下操作
i 选中工程右键 --> Properties --> Resource --> Text file encoding --> Other --> UTF-8
ii 选中工程右键 --> Properties -->左边选Builders --> 去掉JavaScript Validation和Validation前面的勾 --> OK退出
iii 去到工程根目录下，找到.project，用记事本打开，把两处删除掉：
6、代码login.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link href="Extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" /><script src="Extjs/ext-all-debug.js" type="text/javascript" language="javascript" charset="UTF-8"></script><script type="text/javascript">Ext.application({ name: 'HelloExt', launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [ { title: 'Hello Ext', html : 'Hello! Welcome to Ext JS.' } ] }); }});</script><title>登陆界面</title></head><body><!-- <form id="loginFrom" action=""><table class=" "><tr><td><label>用户名</label></td><td><input id="txtName" name="username" type="text" /></td></tr><tr> <td><label>密 码</label></td> <td><input id="txtPass" name="password" type="password" /></td></tr><tr><td >${loginMessage}</td></tr><tr><td><input id="btnLogin" type="button" value="登陆" onclick="javascript:login()" /></td><td><input id="btnCancel" type="button" value="新增"onclick="javascript:insert()" /></td></tr></table></form> --></body></html>web.xml<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"id="WebApp_ID" version="2.5"><display-name>ExtjsTest</display-name><!-- 设置首页 --><welcome-file-list><welcome-file>/Login.jsp</welcome-file></welcome-file-list></web-app>7、可以正常发布即可
查看本地APIExtJs的帮助文档已经跟随代码被下载到电脑上了，在extjs-4.1.1/docs/文件夹中
方法一：
将下载下来的整个ExtJs解压文件拷贝到Tomcat的webapps文件夹下，然后启动Tomcat服务器在浏览器中输http://localhost:8080/extjs-4.1.1/docs/即可进入Ext JS4.1帮助文档的首页
方法二：
查看doc文件夹下的index.html文件，将<script type="text/javascript" src="../ext.js"></script>改成<script type="text/javascript" src="../ext-all.js"></script>，然后双击inde.html后可以正常加载API文档了。ExtJs4.1目录结构
文件/文件夹名的作用： build：文件夹下有一个sdk.jsb3文件，这个文件用于eclipse中spket插件，可以实现ExtJs的代码提示功能；
builds：压缩后的ExtJS代码，体积更小，更快；
docs：开发文档；
examples：官方演示示例；
locale：多国语言资源文件；
pkgs：ExtJS各部分功能的打包文件；
resource：ExtJS所需要的CSS与图片文件；
src：未压缩的源代码目录；
bootstarp.js：ExtJS库引导文件,可通过参数自动切换ext-all.js与ext-all-debug.js；
ext-all.js：ExtJS核心库,需要引用；
ext-all-debug.js：ExtJS核心库的调试版,调试时使用。
注：EXTJS文件的区别：
ext-all.js：包含所有的EXTJS框架文件，已经混淆
ext-all-debug.js：包含所有的EXTJS框架文件，没有混淆
ext-all-dev.js：包含所有的EXTJS框架文件，没有混淆，且包含调试信息
ext.js：仅包含能让EXTJS运行的最小集合，已经混淆
ext-debug.js：仅包含能让EXTJS运行的最小集合，没有混淆
ext-dev.js：仅包含能让EXTJS运行的最小集合，没有混淆，且包含调试信息
bootstrap.js：自动加载ext-all.js或者ext-all-debug.js，在以下情况下会加载ext-all-debug.js
1.当前主机名是本地
2.当前主机是使用IPV4地址
3.Current protocol is a file
4.其他情况下自动加载ext-all.js参考学习：http://my.oschina.net/junn/blog/102726 http://blog.csdn.net/notenlife/article/details/8210012
