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

</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 5应用程序导入Web项目中相关推荐

html整个项目怎么导出来,怎样将jquery导入web项目中？
怎样将jquery导入web项目中?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 将jquery导入web项目中的方法导入jquery文件在页面中使 ...
《人人都玩开心网：Ext JS+Android+SSH整合开发Web与移动SNS》销售排名第4，发篇ExtJS的文章(拖放树结点)庆祝下
<人人都玩开心网:Ext JS+Android+SSH整合开发Web与移动SNS>一书上架短短几天,就进入了互动网计算机类销售总排名第4的好成绩(见下图).现发篇Ext JS的技术文章庆祝 ...
把EXCEL用程序导入到ORACLE中(SpringMVC+MyBatis)
id="BAIDU_DUP_fp_iframe" src="//pos.baidu.com/wh/o.htm?ltr=" style="width: ...
Web项目中前端页面引用外部Js和Css的路径问题
公众号:南宫一梦 Web项目中前端页面引用外部Js和Css的路径问题一般我们在做Web项目时,通常会将多个页面引入的公共js和css文件抽取出来,单独写成一个公共文件,以期方便各个页面单独引入,达到 ...
小程序和Web项目的区别
小程序和Web项目的区别运行环境不同: 微信小程序只能通过微信打开 web项目可以通过多个终端的浏览器打开项目规模不同: 微信小程序一般是小应用级别的,大小限制为2M,否则上传不了审核 Web项目 ...
web项目中js加载慢问题解决思路
web项目中js加载慢问题解决思路参考文章: (1)web项目中js加载慢问题解决思路 (2)https://www.cnblogs.com/cslj2013/p/8491786.html 备忘一下 ...
在j2ee的web项目中，执行文件如excel、word导入，文件路径可以是“C:/Users/user/Desktop/abc/abc.xls”这样的路径吗？还是应该是工程的路径：/WEB-INF/
在j2ee的web项目中,执行文件如excel.word导入,文件路径可以是"C:/Users/user/Desktop/abc/abc.xls"这样的路径吗?还是应该是工程的路径 ...
eclipse导入web项目出现红色叉叉
今天在导入web项目的时候,补齐完缺失的jar包之后项目上还是有个红色的叉叉,而且不影响代码运行 1:原因: 可能是项目曾经在weblogic或者tomcat上运行过 2:解决办法在项目下的.set ...
编写高质量代码改善java程序的151个建议——[110-117]异常及Web项目中异常处理
编写高质量代码改善java程序的151个建议--[110-117]异常及Web项目中异常处理原创地址:http://www.cnblogs.com/Alandre/(泥沙砖瓦浆木匠),需要转载的,保 ...

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

将Ext JS 5应用程序导入Web项目中相关推荐

最新文章

热门文章