Java web开发Extjs与Spring入门实例

一、Extjs与Spring基础知识。

（关于代码的基础知识在之后贴出）

二、从零开始构建Extjs入门实例

1、最终页面效果展示图（无后台）

2、搭建一个ExtJs的HelloWorld程序

（1）、在Ubuntu系统上安装JDK

1、JDK

1.1下载JDK：http://download.oracle.com/otn-pub/java/jdk/7/jdk-7-linux-i586.tar.gz（下载默认路劲为主目录中的下载文件夹，下同）

(下载链接:http://pan.baidu.com/share/link?shareid=3125558486&uk=1228060797 密码:aily)

1.2 解压

$cd 下载

$tar jdk-7-linux-i586.tar.gz

1.3 将解压后的jdk1.7.0移到/usr/local/目录下

$sudo mv jdk1.7.0 /usr/local/

1.4 配置环境

$sudo gedit /etc/environment 

将内容改为：

PATH="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/jdk1.7.0/bin"  

CLASSPATH=.:/usr/local/jdk1.7.0/lib  

JAVA_HOME=/usr/local/jdk1.7.0

1.5 运行$source ~/.bashrc

1.6 测试$java -version

如果查询不到版本号，说明还没安装成功，那么再执行以下语句：

$sudo update-alternatives --install /usr/bin/java java /usr/local/jdk1.7.0/bin/java 300  

$sudo update-alternatives --install /usr/bin/javac javac /usr/local/jdk1.7.0/bin/javac 300  

$sudo update-alternatives --install /usr/bin/javap javap /usr/local/jdk1.7.0/bin/javap 300  

$sudo update-alternatives --install /usr/bin/javadoc javadoc /usr/local/jdk1.7.0/bin/javadoc 300 

再次测试，则可以看到版本号了。

（2）、在Ubuntu上安装eclipse与tomcat

参考资料 ：http://www.linuxidc.com/Linux/2013-04/82213p2.htm

（3）、在eclipse中配置Spket与ExtJS

参见 ：http://www.cnblogs.com/maowang1991/archive/2013/02/05/2893142.html

ps：在单击addfile按钮的过程中不需要引入sdk.jsb3文件，引入ext-all.js,ext-all-debug.js即可

（4）、编写extjs helloworld程序

新建一个Dynamic Web Project项目并在其webContent下新建一个index.html文件





在webcontent目录下面加入extjs工具包，新建main.js文件，并修改index.html文件如下

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src = "main.js"></script>

在main.js文件中加入

Ext.onReady(function(){
Ext.MessageBox.alert('tip',"helloworld");
})

main.js文件如下所示



run as - 》 run on server 运行结果如下所示

（5）、网站登录页面的实现

Extjs的MVC分离是其特点之一，关于它的controller、view详见 http://blog.csdn.net/etufo1/article/details/38352655
首先在webcontent下面建立app文件夹，在app文件夹下面建立controller、view文件夹。



修改main.js

Ext.application({
name : 'app',
appFolder : 'app',

launch : function(){
Ext.create('Ext.container.Viewport',{
layout : 'fit',
items  : [{
xtype :'panel',
layout:'absolute',
bodyStyle: 'background:#ffc; padding:10px;',
items : [

]
}]
});
}
});

运行结果如下



在这个panel组件中在放置其它的组件。在组件功能实现之后调整样式。

第一个文件组件效果图



在view目录下面新建一个DisplayView文件，文件内容如下

Ext.define('app.view.DisplayView',{
extend : 'Ext.panel.Panel',
alias : 'widget.displayView',
x : 280,
y : 100,
height : 300,
width : 400,

html : '<h2> ExtJS某系统</h2><br><h2>  -----------------您的支持是我们最大的鼓励！</h2>',

initComponent : function(){
this.callParent(arguments);
}
})

在controller目录下面新建一个DisplayController文件，文件内容如下

Ext.define('app.controller.DisplayController',{
extend : 'Ext.app.Controller',
views  : ['app.view.DisplayView'],

init : function(){
this.callParent(arguments);
}
});

除此之外需要对main.js文件进行修改

Ext.application({
name : 'app',
appFolder : 'app',
controllers :['app.controller.DisplayController'],

launch : function(){
Ext.create('Ext.container.Viewport',{
layout : 'fit',
items  : [{
xtype :'panel',
layout:'absolute',
bodyStyle: 'background:#ffc; padding:10px;',
items : [
{
xtype : 'displayView'
}
]
}]
});
}
});

容易忽视的地方，在controller文件中需要对它所控制的视图view添加进去，在main.js文件中需要将它所包含的controller添加进去。

main.js

controllers :['app.controller.DisplayController'],

DisplayController.js

views  : ['app.view.DisplayView'],

参照此例写出LoginView、LoginController
LoginView.js

Ext.define('app.view.LoginView',{
extend : 'Ext.panel.Panel',
alias : 'widget.loginView',
x : 780,
y : 100,
height : 300,
width : 400,
layout : 'border',

items :[{
xtype : 'panel',
region : 'north',
html : "<h1>帐号登录</h1>"
},{
xtype : 'panel',
region : 'center',
itemId : 'panelCenter',
height : 200,
items :[{
xtype : 'textfield',
emptyText : '用户名/邮箱名',
itemId : 'UserName'
},{
xtype : 'textfield',
emptyText : '密码',
inputType : 'password',
itemId : 'Password'
},{
xtype : 'button',
text : '登录',
itemId : 'Login'
}]
},{
xtype : 'toolbar',
region : 'south',
items :['->',{
xtype : 'button
4000
',
text :'忘了密码?',
itemId : 'ForgetPass'
},'-',{
xtype : 'button',
text : '新用户注册',
itemId : 'Sign in'
},'-',{
xtype : 'button',
text : '意见反馈',
itemId : 'advice'
}]
}
],

initComponent : function(){
this.callParent(arguments);
}
})

LoginController.js

Ext.define('app.controller.LoginController',{
extend : 'Ext.app.Controller',
alias : 'widget.loginController',
views :['app.view.LoginView'],

init : function(){
this.callParent(arguments);
}
})

修改的main.js

Ext.application({
name : 'app',
appFolder : 'app',
controllers :['app.controller.DisplayController','app.controller.LoginController'],

launch : function(){
Ext.create('Ext.container.Viewport',{
layout : 'fit',
items  : [{
xtype :'panel',
layout:'absolute',
bodyStyle: 'background:#ffc; padding:10px;',
items : [
{
xtype : 'displayView'
},{
xtype : 'loginView'
}
]
}]
});
}
});

运行结果



在LoginController里面为各种点击事件添加响应。
点击忘记密码


LoginController.js

Ext.define('app.controller.LoginController',{
extend : 'Ext.app.Controller',
alias : 'widget.loginController',
views :['app.view.LoginView'],

init : function(){
this.control({
'loginView button[itemId=Login]' : {
click : this.loginClick
},
'loginView button[itemId=ForgetPass]':{
click : this.forgetButtonClick
}
})

this.callParent(arguments);
},

loginClick : function(){
Ext.MessageBox.alert("tip","You have click the Login BUTTON!");
},
forgetButtonClick : function(){
var window=Ext.widget('window',{
title : '忘记密码',
width : 300,
height : 300
});
window.show();
//		alert('forget');
}
})

之后修改页面的样式

三、从零开始构建Spring入门实例

关于spring的核心思想是IOC和AOP，先通过两个demo进行演示

1、Spring IOC Demo

首先new一个java project



右键 》 build path》 confirgure build path 》libraries 》 add ext... jars

引入spring.jar等jar包



新建一个名为human的接口，内容如下：

package cn.com.chengang.spring;

public interface Human {
void eat();
void walk();
}

之后新建一个American与Chinese的类

分别如下

Chinese.java

package cn.com.spring;
public class Chinese implements Human {
/* （非 Javadoc）
* @see cn.com.chengang.spring.Human#eat()
*/
public void eat() {
System.out.println("中国人对吃很有一套");
}

/* （非 Javadoc）
* @see cn.com.chengang.spring.Human#walk()
*/
public void walk() {
System.out.println("中国人行如飞");
}
}

Amreican.java

public class American implements Human {
/* （非 Javadoc）
* @see cn.com.chengang.spring.Human#eat()
*/
public void eat() {
System.out.println("美国人主要以面包为主");
}

/* （非 Javadoc）
* @see cn.com.chengang.spring.Human#walk()
*/
public void walk() {
System.out.println("美国人以车代步，有四肢退化的趋势");
}
}

使用xml文件进行配置

bean.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" " http://www.springframework.org/dtd/spring-beans.dtd"> <beans>
<bean id = "chinese"
class = "cn.com.spring.Chinese">
</bean>
<bean id = "american"
class = "cn.com.spring.American">
</bean>
</beans>

编写测试类

ClientTest.java

package cn.com.spring;

import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;
public class ClientTest {

public static void main(String[] args) {
ApplicationContext factory = new ClassPathXmlApplicationContext("bean.xml");
Chinese china =(Chinese)factory.getBean("chinese");
china.eat();
china.walk();
American usa =(American)factory.getBean("american");
usa.eat();
usa.walk();
}
}

运行结果



在这个过程中，如果缺少必要的jar包，将报错。

2、Spring AOP Demo

此Demo引自
http://www.blogjava.net/javadragon/archive/2006/12/03/85115.html
运行结果