下载:ExtJS 4.1.1
在Eclipse中安装spket插件
让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,用记事本打开,把两处删除掉:
第一处:
<buildCommand>
<name>org.eclipse.wst.jsdt.core.javascriptValidator</name>
<arguments>
</arguments>
</buildCommand>
第二处:
<nature>org.eclipse.wst.jsdt.core.jsNature</nature>
iiii 保存退出,refresh一下工程。
3、将ext4部署到eclipse项目中。即:将ext-all.js、ext-all-debug.js、bootstarp.js和locale文件夹里的ext-lang-zh_CN.js以及resource整个文件夹拷入项目WebContent目录下自己指定的存放目录中
4、页面引入
<link rel="stylesheet" type="text/css" href="相对路径/resources/css/ext-all.css" />
<script src="Extjs/ext-all-debug.js" type="text/javascript" language="javascript" charset="UTF-8"></script>
5、我的项目目录
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、可以正常发布即可
ExtJs的帮助文档已经跟随代码被下载到电脑上了,在extjs-4.1.1/docs/文件夹中
方法一:
参考学习:http://my.oschina.net/junn/blog/102726 http://blog.csdn.net/notenlife/article/details/8210012