使用ExtDirectSpring整合Spring3和ExtJs4
2016-03-23 09:24
447 查看
ExtDirectSpring是一个用于ExtJs4直接调用远程Spring方法的第三方库。我们不再需要在spring方法中封装json对象供外界调用,ExtJs4也不再需要手动解析远程服务器返回过来的Json对象,所有这些操作都由ExtDirectSpring去处理,ExtJs4只需要象调用本地方法一样去操作远程资源。
ExtDirectSpring主页地址:
https://github.com/ralscha/extdirectspring
以下是一个简要的工程搭建过程(我们假设你已经创建了一个Spring MVC的工程)
1: 在pom.xml中添加相关依赖
<dependency>
<groupId>ch.ralscha</groupId>
<artifactId>extdirectspring</artifactId>
<version>1.2.0</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.2.2</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.1</version>
</dependency>
2: 将含有@ExtDirectMethod标签的类所在包添加到Spring组件管理中
注:所有被暴露出来允许远程访问的方法都需要添加@ExtDirectMethod注解
<context:component-scan base-package="com.train.extdirectspring,ch.ralscha.extdirectspring" />
3:
在Spring配置文件中添加对ExtDirectSpring的全局配置信息
<bean id="extDirectSpringConfiguration" class="ch.ralscha.extdirectspring.controller.Configuration" p:timeout="12000"
p:maxRetries="10" p:enableBuffer="false">
<property name="exceptionToMessage">
<map>
<entry key="java.lang.IllegalArgumentException" value="illegal argument" />
<entry key="org.springframework.beans.factory.NoSuchBeanDefinitionException">
<null />
</entry>
</map>
</property>
</bean>
到此为止,服务器端的配置基本完成,下面开始讲述页面前端如何配置调用远程后端方法。
4: 下载并复制ExtJs4的关联文件到工程中去
从官网下载并解压http://www.sencha.com/products/extjs
复制文件夹locale, resources及文件ext-all-debug.js and ext-all.js到WEB工程目录中
5:
引入ExtJs4的CSS和JS文件到你的页面中
<link rel="stylesheet" type="text/css" href="/resources/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="/resources/extjs/ext-all-debug.js" ></script>
6: 引入ExtDirectSpring提供的api.js/api-debug.js文件到你的页面中
<script type="text/javascript" src="/spring/api-debug.js"></script>
注:这里的/spring/前缀取决于你的web.xml中的Spring Dispatcher的配置。并且该api-debug.js是由系统生成而非一个静态文件。
7: 引入用于当前页面布局的js文件
Html代码
<script type="text/javascript" src="/SpringMVC/resources/app/welcome.js"></script>
注:该文件由用户自定义
从下面开始我们就要开始编写Extjs代码,我们采用Extjs的MVC框架,编写的一般过程为:编写页面布局js(上面的welcome.js) -> 编写model(MVC) -> 编写store(这个对象主要用于数据集的展示,如实现分页排序等功能) -> 编写视图层(MVC) -> 编写控制层(MVC) -> 编写SpringMVC方法与ExtJs控制层交互
8: 编写上面定义的welcome.js
Ext.Loader.setConfig({
enabled: true
});
Ext.require('Ext.direct.*', function() {
Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
});
Ext.application({
controllers : [ 'sample'], //与第12个步骤中文件名一致
// autoCreateViewport : true,
name : 'Mtx', //应用名,可以任取,不重复即可
appFolder: 'resources/app', //这里配置当前应用下你的ExtJs MVC代码的存放路径
launch : function() {
Ext.create('Ext.container.Viewport', {
items : [ {
xtype : 'sampleList', //参考第11步中的视图别名
layout : 'fit',
margins: 5
} ]
});
}
});
9: 编写模型Model
按照ExtJs的规范,我们默认将model文件存放在resources/app/model目录下,其中'resources/app'由第8个步骤中的appFolder配置所决定,model是默认的模型存放文件夹名。我们在这里创建一个路径为resources/app/model/sample.js的用于描述model的文件。我们只简单定义id和name两个字段(实际开发中,一般需要根据数据库中的表结构来定义)
Ext.define('Mtx.model.Sample', {
extend : 'Ext.data.Model',//所有定义的model对象都需要继承该父对象
fields : [ {
name : 'id',
type : 'int'
}, {
name : 'name',
type : 'string',
} ],
proxy : {
type : 'direct',
api : {
read : helloController.read, //这里的四个方法是ExtJs框架默认集成好的,一般我们只需要实现对应的方法就可以轻松实现增删改查操作
create : helloController.save,
update : helloController.save,
destroy : helloController.destroy
},
reader : {
root : 'records'
}
}
});
10: 编写store(这个对象主要用于数据集的展示,如实现分页排序等功能)
和model一样,store的默认存放路径为$appFolder+'/store', 这里对应路径为resources/app/store/sample.js
Ext.define('Mtx.store.Skus', {
extend: 'Ext.data.Store',
model: 'Mtx.model.Sample', //参考第9步中定义的model
autoLoad: true,
pageSize: 25,
remoteSort: true,
autoSync: true,
sorters: [ {
property: 'name',
direction: 'ASC'
} ]
});
11: 编写视图层View
与上面一样,store的默认存放路径为$appFolder+'/view', 这里对应路径为resources/app/view/sample.js
Ext.define('Mtx.view.Sample', {
extend : 'Ext.grid.Panel',
alias : 'widget.sampleList', //别处如果需要引用该View,可以使用别名sampleList
store : 'sample',//必须与第9步中创建的model文件名一致
initComponent : function() {
var me = this;
Ext.applyIf(me, {
columns : [ {
xtype : 'gridcolumn',
dataIndex : 'id', //列中显示数据在model中与之对应的变量名
text : 'ID', //表中的列名
flex : 1
}, {
xtype : 'gridcolumn',
dataIndex : 'name',
text : 'Name',
flex : 1
}],
dockedItems : [ {
xtype : 'toolbar',
dock : 'top',
items : [ {
fieldLabel : 'Filter', //增加过滤功能,根据输入的字符与name字段进行模糊匹配
labelWidth : 40,
xtype : 'textfield',
itemId : 'filtertextfield'
}, '->', {
xtype : 'pagingtoolbar', //加上分页功能
store : me.getStore(),
displayInfo : true
} ]
}, ]
});
me.callParent(arguments);
}
});
12: 编写控制层Controller
还是和上面一样,store的默认存放路径为$appFolder+'/controller', 这里对应路径为resources/app/controller/sample.js。控制层主要用于为视图中的组件绑定不同的事件。
ExtDirectSpring主页地址:
https://github.com/ralscha/extdirectspring
以下是一个简要的工程搭建过程(我们假设你已经创建了一个Spring MVC的工程)
1: 在pom.xml中添加相关依赖
<dependency>
<groupId>ch.ralscha</groupId>
<artifactId>extdirectspring</artifactId>
<version>1.2.0</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.2.2</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.1</version>
</dependency>
2: 将含有@ExtDirectMethod标签的类所在包添加到Spring组件管理中
注:所有被暴露出来允许远程访问的方法都需要添加@ExtDirectMethod注解
<context:component-scan base-package="com.train.extdirectspring,ch.ralscha.extdirectspring" />
3:
在Spring配置文件中添加对ExtDirectSpring的全局配置信息
<bean id="extDirectSpringConfiguration" class="ch.ralscha.extdirectspring.controller.Configuration" p:timeout="12000"
p:maxRetries="10" p:enableBuffer="false">
<property name="exceptionToMessage">
<map>
<entry key="java.lang.IllegalArgumentException" value="illegal argument" />
<entry key="org.springframework.beans.factory.NoSuchBeanDefinitionException">
<null />
</entry>
</map>
</property>
</bean>
到此为止,服务器端的配置基本完成,下面开始讲述页面前端如何配置调用远程后端方法。
4: 下载并复制ExtJs4的关联文件到工程中去
从官网下载并解压http://www.sencha.com/products/extjs
复制文件夹locale, resources及文件ext-all-debug.js and ext-all.js到WEB工程目录中
5:
引入ExtJs4的CSS和JS文件到你的页面中
<link rel="stylesheet" type="text/css" href="/resources/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="/resources/extjs/ext-all-debug.js" ></script>
6: 引入ExtDirectSpring提供的api.js/api-debug.js文件到你的页面中
<script type="text/javascript" src="/spring/api-debug.js"></script>
注:这里的/spring/前缀取决于你的web.xml中的Spring Dispatcher的配置。并且该api-debug.js是由系统生成而非一个静态文件。
7: 引入用于当前页面布局的js文件
Html代码
<script type="text/javascript" src="/SpringMVC/resources/app/welcome.js"></script>
注:该文件由用户自定义
从下面开始我们就要开始编写Extjs代码,我们采用Extjs的MVC框架,编写的一般过程为:编写页面布局js(上面的welcome.js) -> 编写model(MVC) -> 编写store(这个对象主要用于数据集的展示,如实现分页排序等功能) -> 编写视图层(MVC) -> 编写控制层(MVC) -> 编写SpringMVC方法与ExtJs控制层交互
8: 编写上面定义的welcome.js
Ext.Loader.setConfig({
enabled: true
});
Ext.require('Ext.direct.*', function() {
Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
});
Ext.application({
controllers : [ 'sample'], //与第12个步骤中文件名一致
// autoCreateViewport : true,
name : 'Mtx', //应用名,可以任取,不重复即可
appFolder: 'resources/app', //这里配置当前应用下你的ExtJs MVC代码的存放路径
launch : function() {
Ext.create('Ext.container.Viewport', {
items : [ {
xtype : 'sampleList', //参考第11步中的视图别名
layout : 'fit',
margins: 5
} ]
});
}
});
9: 编写模型Model
按照ExtJs的规范,我们默认将model文件存放在resources/app/model目录下,其中'resources/app'由第8个步骤中的appFolder配置所决定,model是默认的模型存放文件夹名。我们在这里创建一个路径为resources/app/model/sample.js的用于描述model的文件。我们只简单定义id和name两个字段(实际开发中,一般需要根据数据库中的表结构来定义)
Ext.define('Mtx.model.Sample', {
extend : 'Ext.data.Model',//所有定义的model对象都需要继承该父对象
fields : [ {
name : 'id',
type : 'int'
}, {
name : 'name',
type : 'string',
} ],
proxy : {
type : 'direct',
api : {
read : helloController.read, //这里的四个方法是ExtJs框架默认集成好的,一般我们只需要实现对应的方法就可以轻松实现增删改查操作
create : helloController.save,
update : helloController.save,
destroy : helloController.destroy
},
reader : {
root : 'records'
}
}
});
10: 编写store(这个对象主要用于数据集的展示,如实现分页排序等功能)
和model一样,store的默认存放路径为$appFolder+'/store', 这里对应路径为resources/app/store/sample.js
Ext.define('Mtx.store.Skus', {
extend: 'Ext.data.Store',
model: 'Mtx.model.Sample', //参考第9步中定义的model
autoLoad: true,
pageSize: 25,
remoteSort: true,
autoSync: true,
sorters: [ {
property: 'name',
direction: 'ASC'
} ]
});
11: 编写视图层View
与上面一样,store的默认存放路径为$appFolder+'/view', 这里对应路径为resources/app/view/sample.js
Ext.define('Mtx.view.Sample', {
extend : 'Ext.grid.Panel',
alias : 'widget.sampleList', //别处如果需要引用该View,可以使用别名sampleList
store : 'sample',//必须与第9步中创建的model文件名一致
initComponent : function() {
var me = this;
Ext.applyIf(me, {
columns : [ {
xtype : 'gridcolumn',
dataIndex : 'id', //列中显示数据在model中与之对应的变量名
text : 'ID', //表中的列名
flex : 1
}, {
xtype : 'gridcolumn',
dataIndex : 'name',
text : 'Name',
flex : 1
}],
dockedItems : [ {
xtype : 'toolbar',
dock : 'top',
items : [ {
fieldLabel : 'Filter', //增加过滤功能,根据输入的字符与name字段进行模糊匹配
labelWidth : 40,
xtype : 'textfield',
itemId : 'filtertextfield'
}, '->', {
xtype : 'pagingtoolbar', //加上分页功能
store : me.getStore(),
displayInfo : true
} ]
}, ]
});
me.callParent(arguments);
}
});
12: 编写控制层Controller
还是和上面一样,store的默认存放路径为$appFolder+'/controller', 这里对应路径为resources/app/controller/sample.js。控制层主要用于为视图中的组件绑定不同的事件。
相关文章推荐
- 使用Struts 2开发应用04:程序概要分析
- eclipse中maven项目交付svn忽略配置文件
- Spring AOP原理及拦截器
- java中的栈和堆
- 新学习:在eclipse中新建maven项目出现的一些问题
- 追根溯源---volatile关键字
- java aio 编程
- Java WebSockets: The remote endpoint was in state [TEXT_FULL_WRITING]
- (java)实现全排列
- Java中List集合的遍历
- Spring注解@Component、@Repository、@Service、@Controller @Resource、@Autowired、@Qualifier 解析
- 转载:Java虚拟机体系结构
- struts Tag标签使用
- eclipse ADT
- 【集合框架】JDK1.8源码分析之LinkedList(七)
- javaEE MyEclipse下SSH框架搭建+测试
- Spring Mvc——Controller中常规方法示例
- Spring Mvc——Controller中常规方法示例
- 举例讲解Java编程中this关键字与super关键字的用法
- Struts2 S2-029远程代码执行漏洞