将Ext JS 五应用程序导入Web项目中

将Ext JS 5应用程序导入Web项目中

将Ext JS 5应用程序导入Web项目中

相关资料：

http://docs.sencha.com/extjs/5.1/getting_started/welcome_to_extjs.html

效果图：

将Ext JS 五应用程序导入Web项目中

工程目录结构图：

将Ext JS 五应用程序导入Web项目中

准备资料：

先到官网上下载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>

</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/

将Ext JS 五应用程序导入Web项目中

相关推荐