使用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" 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文件

<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。控制層主要用於爲視圖中的組件綁定不同的事件。