使用ExtDirectSpring整合Spring3和ExtJs4
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" 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? ??
<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是由系统生成而非一个静态文件。
<script type="text/javascript" src="/SpringMVC/resources/app/welcome.js"></script>? 注：该文件由用户自定义
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 } ] }); }});?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' } }});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' } ]});?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); }});?
?
?