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


[Javascript RemoteActionを使ったExt JSアプリを試してみる(Apex編)](http://qiita.com/yonet77/items/b58479fe3dff847fed98)の続編です。

- - -

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

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

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

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

![スクリーンショット 2014-09-13 11.45.28.png](https://qiita-image-store.s3.amazonaws.com/0/1840/a05524fe-f5e9-1084-a7cb-5e1440b3572f.png "スクリーンショット 2014-09-13 11.45.28.png")

※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ことはじめ](http://www.slideshare.net/ShuheiAoyama/extdirect-16018738)

※3 ModelクラスとStoreクラスのどちらに実装するのが良いか？についての考察は以下にまとめられています。
[Model/StoreとProxyの関係](http://extjs.sunvisor.net/646)

[サンプルコード]

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

```Javascript
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側で

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

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

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

```Javascript
// (略)
	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以降を使う場合には、そのバージョン違いによる調整が必要となります。
ある意味、"おまじない"のような処理が必要になる、といった具合でしょうか。

```Javascript
// ① 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のブログ](https://developer.salesforce.com/page/Developing_Mobile_Applications_With_Force.com_And_Sencha_Touch_Part_2)
 -> "Step 9: Adjusting Our Proxy To Work With Visualforce Remoting" を参照ください
- - -

#### まとめ

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

- - -

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

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

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