Import the Ext JS 5 application into the Web project

Import the Ext JS 5 application into the Web project

Related information:

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

：

Project Catalog Structure diagram:

Preparation information:

First to the official web download Ext-5.1.0-gpl.zip then decompression, the official online I see buy I did not dare to download, Hee can also go to csdn up to find http://cdn.sencha.com/ext/gpl/ Ext-5.1.0-gpl.zip, originally wanted to pass up, but said 70m is too big to pass, I do not know why, others can upload so large I this line?

Build Order:

1. Create a new WebProject project on MyEclipse first extjsV5.1

2, under the \extjsv5.1\webroot directory ext, JS

3, I want to use the style, import in

Unzip the previous Ext-5.1.0-gpl.zip package and copy the Ext-theme-classic and Ext-ux directories to the EXT directory of the project.

E:\www\ext-5.1.0\build\packages\ext-theme-classic

E:\www\ext-5.1.0\build\packages\ext-ux

Then copy the Ext-all.js and Bootstrap.js to the project ext directory

E:\www\ext-5.1.0\build\ Ext-all.js

4, create a new App.js file in the JS directory

Then refer to the second section of the code on the above information 1 copy, as follows:

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. Create a new main.jsp file in the root directory

The first piece of code provided on reference 1 deletes the contents of the body in the main.jsp, with the following code:

<%@ 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< Span style= "COLOR: #BF5F3F" >%> 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. Change Web. xml

Find the Project Web. xml File open modify inside the welcome-file value is just new main.jsp, so access to the project by default is main.jsp, the code is as follows:

<? 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. Publish, visit

Publish to the Tomcat server, then access the content is what it looks like!

Http://127.0.0.1:8123/extjsV5.1/

Import the Ext JS 5 application into the Web project