使用ExtDirectSpring整合Spring3和ExtJs4

ExtDirectSpring是一个用于ExtJs4直接调用远程Spring方法的第三方库。我们不再需要在spring方法中封装json对象供外界调用，ExtJs4也不再需要手动解析远程服务器返回过来的Json对象，所有这些操作都由ExtDirectSpring去处理，ExtJs4只需要象调用本地方法一样去操作远程资源。

 

ExtDirectSpring主页地址:

https://github.com/ralscha/extdirectspring

 

以下是一个简要的工程搭建过程（我们假设你已经创建了一个Spring MVC的工程)

1: 在pom.xml中添加相关依赖

1. <dependency>  
2.     <groupId>ch.ralscha</groupId>  
3.     <artifactId>extdirectspring</artifactId>  
4.     <version>1.2.0</version>  
5. </dependency>  
6. <dependency>  
7.     <groupId>commons-fileupload</groupId>  
8.     <artifactId>commons-fileupload</artifactId>  
9.     <version>1.2.2</version>  
10. </dependency>  
11. <dependency>  
12.     <groupId>commons-io</groupId>  
13.     <artifactId>commons-io</artifactId>  
14.     <version>2.1</version>  
15. </dependency> 

2: 将含有@ExtDirectMethod标签的类所在包添加到Spring组件管理中

注：所有被暴露出来允许远程访问的方法都需要添加@ExtDirectMethod注解

< context:component-scan   base-package = "com.train.extdirectspring,ch.ralscha.extdirectspring"   />  

3: 在Spring配置文件中添加对ExtDirectSpring的全局配置信息

1. <bean id="extDirectSpringConfiguration" class="ch.ralscha.extdirectspring.controller.Configuration" p:timeout="12000"  
2.     p:maxRetries="10" p:enableBuffer="false">  
3.     <property name="exceptionToMessage">  
4.         <map>  
5.             <entry key="java.lang.IllegalArgumentException" value="illegal argument" />  
6.             <entry key="org.springframework.beans.factory.NoSuchBeanDefinitionException">  
7.                 <null />  
8.             </entry>  
9.         </map>  
10.     </property>  
11. </bean>  

  到此为止，服务器端的配置基本完成，下面开始讲述页面前端如何配置调用远程后端方法。

4: 下载并复制ExtJs4的关联文件到工程中去

• 从官网下载并解压http://www.sencha.com/products/extjs

• 复制文件夹locale, resources及文件ext-all-debug.js and ext-all.js到WEB工程目录中    

5: 引入ExtJs4的CSS和JS文件到你的页面中

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

  6: 引入ExtDirectSpring提供的api.js/api-debug.js文件到你的页面中

1. 
   <script type="text/javascript" src="/spring/api-debug.js"></script>  

注：这里的/spring/前缀取决于你的web.xml中的Spring Dispatcher的配置。并且该api-debug.js是由系统生成而非一个静态文件。

7: 引入用于当前页面布局的js文件

Html代码  

1. <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

 

1. Ext.Loader.setConfig({  
2.     enabled: true  
3. });  
4.   
5. Ext.require('Ext.direct.*', function() {  
6.     Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);  
7. });  
8.   
9. Ext.application({  
10.     controllers : [ 'sample'], //与第12个步骤中文件名一致  
11. //    autoCreateViewport : true,  
12.     name : 'Mtx', //应用名，可以任取，不重复即可  
13.     appFolder: 'resources/app', //这里配置当前应用下你的ExtJs MVC代码的存放路径  
14.           
15.     launch : function() {  
16.         Ext.create('Ext.container.Viewport', {  
17.             items : [ {  
18.                 xtype : 'sampleList', //参考第11步中的视图别名  
19.                 layout : 'fit',  
20.                 margins: 5  
21.             } ]  
22.         });  
23.     }  
24. });  

9:  编写模型Model

按照ExtJs的规范，我们默认将model文件存放在resources/app/model目录下，其中'resources/app'由第8个步骤中的appFolder配置所决定,model是默认的模型存放文件夹名。我们在这里创建一个路径为resources/app/model/sample.js的用于描述model的文件。我们只简单定义id和name两个字段(实际开发中，一般需要根据数据库中的表结构来定义)

1. Ext.define('Mtx.model.Sample', {  
2.     extend : 'Ext.data.Model',//所有定义的model对象都需要继承该父对象  
3.   
4.     fields : [ {  
5.         name : 'id',  
6.         type : 'int'  
7.     }, {  
8.         name : 'name',  
9.         type : 'string',  
10.     } ],  
11.   
12.     proxy : {  
13.         type : 'direct',  
14.         api : {  
15.             read : helloController.read, //这里的四个方法是ExtJs框架默认集成好的，一般我们只需要实现对应的方法就可以轻松实现增删改查操作  
16.             create : helloController.save,  
17.             update : helloController.save,  
18.             destroy : helloController.destroy  
19.         },  
20.         reader : {  
21.             root : 'records'  
22.         }  
23.     }  
24. });  

10: 编写store(这个对象主要用于数据集的展示，如实现分页排序等功能)

和model一样，store的默认存放路径为$appFolder+'/store', 这里对应路径为resources/app/store/sample.js

1. Ext.define('Mtx.store.Skus', {  
2.     extend: 'Ext.data.Store',  
3.     model: 'Mtx.model.Sample', //参考第9步中定义的model  
4.     autoLoad: true,  
5.     pageSize: 25,   
6.     remoteSort: true,  
7.     autoSync: true,  
8.     sorters: [ {  
9.         property: 'name',  
10.         direction: 'ASC'  
11.     } ]  
12. });  

 
 11: 编写视图层View

与上面一样，store的默认存放路径为$appFolder+'/view', 这里对应路径为resources/app/view/sample.js

1. Ext.define('Mtx.view.Sample', {  
2.     extend : 'Ext.grid.Panel',  
3.     alias : 'widget.sampleList', //别处如果需要引用该View,可以使用别名sampleList  
4.   
5.     store : 'sample',//必须与第9步中创建的model文件名一致  
6.   
7.     initComponent : function() {  
8.         var me = this;  
9.   
10.         Ext.applyIf(me, {  
11.             columns : [ {  
12.                 xtype : 'gridcolumn',   
13.                 dataIndex : 'id', //列中显示数据在model中与之对应的变量名  
14.                 text : 'ID', //表中的列名  
15.                 flex : 1  
16.             }, {  
17.                 xtype : 'gridcolumn',  
18.                 dataIndex : 'name',  
19.                 text : 'Name',  
20.                 flex : 1  
21.             }],  
22.   
23.             dockedItems : [ {  
24.                 xtype : 'toolbar',  
25.                 dock : 'top',  
26.                 items : [ {  
27.                     fieldLabel : 'Filter', //增加过滤功能，根据输入的字符与name字段进行模糊匹配  
28.                     labelWidth : 40,  
29.                     xtype : 'textfield',  
30.                     itemId : 'filtertextfield'  
31.                 }, '->', {  
32.                     xtype : 'pagingtoolbar', //加上分页功能  
33.                     store : me.getStore(),  
34.                     displayInfo : true  
35.                 } ]  
36.             }, ]  
37.         });  
38.   
39.         me.callParent(arguments);  
40.     }  
41.   
42. });  

12: 编写控制层Controller

还是和上面一样，store的默认存放路径为$appFolder+'/controller', 这里对应路径为resources/app/controller/sample.js。控制层主要用于为视图中的组件绑定不同的事件。