Javascript RemoteActionを使ったExt JSアプリを試してみる(Ext JS編)(1) #Salesforce

Javascript RemoteActionを使ったExt JSアプリを試してみる(Apex編)の続編です。

Ext.dataパッケージについて(ほんの触りだけ)

Ext JSでは、Ext.dataパッケージにて、Extアプリ内のデータおよび、外部とのデータ通信を管理しています。

Ext.dataパッケージでは、大きく以下３つのクラスが定義されています。

データを格納するModelクラス
Modelを格納するためのStoreクラス
Storeに対して、データのCRUD操作を提供するProxyクラス

※Ext JSリファレンスより抜粋
http://docs.sencha.com/extjs/4.2.3/#!/guide/data

Salesforceとデータ連携する上では、Proxyクラスをいじって、データをやり取りできるようにするのが良いと思います。

Proxyクラスの実装について

Salesforce側は、RemoteActionを実装する方針としています。それに合わせてExt JS側はExt.data.DirectProxyを使います。

Proxyクラスは、実際にはModelクラス or Storeクラス内で実装することが多いです。今回は、Storeクラス内で実装する方針にします。

※1 実は、RemoteActionもExt.data.DirectProxyを使っている..ような気がします。VFRemote.jsを眺める限りは。。

※2 Ext.data.DirectProxyはじめ、Ext.Directに関しては、例えば以下の資料など参照してみてください。
Ext.Directことはじめ

※3 ModelクラスとStoreクラスのどちらに実装するのが良いか？についての考察は以下にまとめられています。
Model/StoreとProxyの関係

[サンプルコード]

以下、Storeクラスを定義したものとなります。この中で、proxy: {…}の箇所が、Ext.data.DirectProxyを使った箇所となります。

Ext.define('MyStore', {
    extend: 'Ext.data.Store',
    model: 'MyModel',
    pageSize: 50,

//-----
// ↓↓↓ココからProxy定義
    proxy: {
        // ①Proxyのtypeとして'direct'を指定します
        type: 'direct',
        api: {
            // ②Salesforce側に実装したRemoteActionを指定します
            read    : AccountRemoteActionController.doSearch
            //create  : ..
            //update  : ..
            //destroy : ..
        },
        // ③パラメータをHashで受け取るようにします
        paramAsHash: true,
        extraParams: {},
        limitParam: 'limitParam',
        pageParam: 'pageParam',
        // ④RemoteActionを呼び出す際のescapeパラメータです。ここではfalseにしています。
        escape: false,

        reader: {
            type: 'json',
            root: 'records',
            messageProperty: 'errorMessage',
            model: 'MyModel'
        }
    }
// ↑↑↑ココまで
//-----

});

[補足]

②にて、Salesforce側で実装したRemoteActionを指定しています。
上記のサンプルでは、readしか指定していませんが、readの他にはcreate,update,destroyを指定することができます。それぞれに応じたRemoteActionを用意すると良いでしょう。

③にて、パラメータをHashで受け取るようにしています。paramAsHashをtrueにしておくと、Salesforce側で

{limitParam: 50, pageParam: 1, start: 0..}

といった具合でMapとして受け取れます。

他のパラメータを追加したい場合には、

// (略)
    paramAsHash: true,
    extraParams: {
        salesforceObjectId: 'xxxxxx'
    },
    limitParam: 'limitParam',
    pageParam: 'pageParam',
// (略)

という具合にextraParamsにパラメータを指定します。
SalesforceオブジェクトのIdや、その他キーなどを、extraParamsにセットすると、Salesforce側でそれを元に様々な処理ができるようになるでしょう。

実は必要な下準備

RemoteActionを支えるSalesforce側のExt JSのバージョンと、Ext JS最新版のバージョン(5.0.1)は異なります。。
Ext JS4以降を使う場合には、そのバージョン違いによる調整が必要となります。
ある意味、"おまじない"のような処理が必要になる、といった具合でしょうか。

// ① RemoteActionを少し拡張
AccountRemoteActionController.doSearch.directCfg.method.getArgs = Ext.direct.RemotingMethod.prototype.getArgs;


// ② Ext.data.proxy.Directを少し拡張
Ext.data.proxy.Direct.prototype.createRequestCallback = function(request, operation, callback, scope){
    var me = this;
    return function(data, event){
        me.processResponse(event.status, operation, request, {data: data, message: event.message}, callback, scope)
    };
};

※参考:
Force.com Developer Technical Libraryのブログ
-> "Step 9: Adjusting Our Proxy To Work With Visualforce Remoting" を参照ください

まとめ

RemoteActionを使ってデータを連携するには、Ext.data.DirectProxyを使う
Salesforce側でRemoteActionを実現するためのExt JSバージョンが若干古いので、Ext JS4以降を使う場合には、拡張が必要

(ちょっと長くなってきたので、ここらで一旦続きにします。。)

次回は、実際にExt JSアプリを作ってみたい…と思います。たぶん

あと、多分始めにサンプルを参照できる方がイメージしやすいので、そのうちサンプルをのっけたいと思います。。