将Ext JS 5应用程序导入Web项目中
将Ext JS 5应用程序导入Web项目中
相关资料：
http://docs.sencha.com/extjs/5.1/getting_started/welcome_to_extjs.html
效果图：
工程目录结构图：
准备资料：
先到官网上下载ext-5.1.0-gpl.zip然后解压，官网上的我看到buy我就没敢下载了，嘻嘻也可以到csdn上去找http://cdn.sencha.com/ext/gpl/ext-5.1.0-gpl.zip，本来想传上去的，可是说70m太大了不让传，我也不知道为什么，别人能上传那么大我这就行？
搭建顺序：
1、先在MyEclipse上新建一个webproject工程extjsV5.1
2、在\extjsV5.1\WebRoot下建目录ext、js
3、把我想要用到的样式、导入进来
把之前的ext-5.1.0-gpl.zip包解压后把ext-theme-classic、ext-ux目录整个拷贝到工程的ext目录下
E:\www\ext-5.1.0\build\packages\ext-theme-classic
E:\www\ext-5.1.0\build\packages\ext-ux
再把ext-all.js、bootstrap.js拷贝到工程ext目录下
E:\www\ext-5.1.0\build\ ext-all.js
4、新建一个app.js文件在js目录下
然后参考上面资料1上的把第二段代码copy,如下：
Ext.application({
name : ‘MyApp‘,
launch : function() {
Ext.create(‘Ext.Panel‘, {
renderTo : Ext.getBody(),
width : 200,
height : 150,
bodyPadding : 5,
title : ‘title‘,
html : ‘Hello <b>ext5 struts hello world!</b>...‘
});
}
});
5、在新建一个main.jsp文件在根目录下
参考资料1上提供的第一段代码，删除main.jsp里body里的内容，代码如下：
<%@ page language="java"import="java.util.*" pageEncoding="utf-8"%>
<%
String path =request.getContextPath();
String basePath =request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title><%=path%>ext5 <%=basePath%></title>
<link rel="stylesheet"type="text/css" href="<%=basePath%>ext/ext-theme-classic/build/resources/ext-theme-classic-all.css">
<script type="text/javascript"src="<%=basePath%>ext/ext-all.js"></script>
<script type="text/javascript"src="<%=basePath%>ext/ext-bootstrap.js"></script>
<script type="text/javascript"src="<%=basePath%>ext/ext-theme-classic/build/ext-theme-classic.js"></script>
<script type="text/javascript"src="<%=basePath%>js/app.js"></script>
</head>
<body>
</body>
</html>
6、更改web.xml
找到工程的web.xml文件打开修改里面的welcome-file值为刚刚新建的main.jsp,这样访问工程的时候默认就是main.jsp了，代码如下：
<?xml version="1.0"encoding="UTF-8"?>
<web-app version="3.0"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
<display-name></display-name>
<welcome-file-list>
<welcome-file>main.jsp</welcome-file>
</welcome-file-list>
</web-app>
7、发布、访问
发布到tomcat服务器上，然后访问得到的内容就是上面效果图样子了！
http://127.0.0.1:8123/extjsV5.1/
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
