Ext.Direct の勉強

参考サイト

• http://www.slideshare.net/naotori/extdirect

参考サイトは，株式会社ゼノフィの小堤一弘さんの発表資料です。そちらににサンプルのありかが書いてあったのでダウンロードしてみました。

http://extdirect.xenophy.net/directsample.zip

動かしてみると，TreePanelと連携，GridPanelとの連携，FormPanelとの連携。どれもちゃんと動作しました。これから，サンプルの内容を見て，自分でExt Directが使えるようになりましょう。（でも，実際にはたぶんサーバーサイドはxFrameworkPXを使うことになるとは思います）

基本的なRPCの使い方の節

APIの設定

APIというのがようわからんかったのですが....

サンプルのindex2.htmlの中で，次の場所がExt Direct のAPIを読み込んでいるところです。

 <!-- Ext Direct API -->
 <script type="text/javascript" src="api.php"></script>
 <!-- /Ext Direct API -->

スクリプトタイプがjavascriptなのにsrcはapi.phpになっています。なんで？ということで，サンプルをサーバーに配置してapi.phpをブラウザで開いて見ると次のようなコードが返ってきます。（整形してます）

Ext.ns('Ext.ss');
Ext.ss.APIDesc = {
    "url":"router.php",
    "type":"remoting",
    "actions":{
        "Echo":[{"name":"send","len":1}],
        "Exception":[{"name":"makeError","len":0}],
        "Time":[{"name":"get","len":0}],
        "File":[{"name":"list","len":1,"serverMethod":"listFiles"},{"name":"add","len":2,"formHandler":true}]
    },
    "namespace":"Ext.ss"
};

api.phpがjavascriptのコードを返していた訳ですね。で，その次に読み込んでいるのが本体のjavascriptです。

<!-- Application -->
    <script type="text/javascript" src="./sample2.js"></script>
    <!-- /Application -->

中身は次のとおり。

Ext.onReady(function(){

    // Ext.Directプロバイダ追加
    Ext.Direct.addProvider(Ext.ss.APIDesc);

    // sendメソッドコール
    Ext.ss.Echo.send('Ext.Direct Sample2!');

});

api.phpで生成されたExt.ss.APIDescをExt.Directプロバイダに追加して，メソッドをコールするという流れになるみたい。
で，これを実行しても，なにも起こりません。

EchoというAPIは，渡した値をそのまま返すAPIです。この場合，'Ext.Direct Sample2!' を渡しているのですが，返ってきた値を取得していないのでなにも起こりません。

RPCから戻ってきた値を得るには，コールバックを利用する。sample3.js のコードです。

// sendメソッドコール
    Ext.ss.Echo.send('Ext.Direct Sample3!', function(ret) {
        alert(ret);
    }, this);

二つ目の引数にコールバック関数を渡すということか。そしてその関数の引数にサーバーから返されたの値がセットされているってことか。資料には次のように書いてある。

• サーバーサイド側のメソッド引数をプロバイダ追加時に定義しているため、同様の引数で呼び出すことができる。 
• サーバーサイド側のメソッド引数以降は、コールバック関数を設定することができ、その次にスコープを設定できる。 
• コールバックの引数は、サーバーサイドが返した値になる、PHPの場合配列で返却すると、JS側でも配列になる。

このような仕組みでサーバーサイドとのやりとりをするわけですな。少しずつわかってきました。資料の方では，ここから独自のAPIを置いて，クライアント側のExtJSと連携するように入っていきます。

1. phpでAPIを処理するクラスを作る。
2. api.phpを書き換えてそのクラスを追加する。
3. Ext.Direct.addProviderでプロバイダを追加する。
4. APIのメソッドをコールする。

という流れ。

具体例

TreePanelとの連携の節では，

Tree.php に Class_Tree というクラスを作り，

それをapi.phpの $api->add( のところに追加して，

loader: new Ext.tree.TreeLoader({
    directFn: TreePanel.getTree
}),

こんな風にTreeLoaderにセットしています。これだけで，サーバーのデータをTreePanelにセットできるんですね。

次のGridPanelとの連携では，配列にセットされたレコードをグリッドに表示するというのをやっています。サーバーサイドのGrid.phpは，単に配列を返しているだけです。それをグリッドに表示するために，DirectStoreを使います。DirectStoreのdirectFnにExt.ss.Grid.getAllをセットすれば，もうグリッドにデータを表示することができます。

Ext.Direct Pack を使って Ext.Direct する方法がわかってきました。