Ext.Direct と xFrameworkPX のコラボ

 さて，Ext.Direct を xFrameworkPX で使うというところにやっとたどりついた。

前回の資料で

• xFrameworkPXにはxFrameworkPX_Controller_ExtDirectクラスが存在する。
• モジュールを作成して、コントローラーに登録するだけでモジュール名でJS側からアクセスできる。
• サーバーサイドのやりとり（api.phpとかrouter.phpの部分）は、ちゃんとオリジナルで実装して動作確認済。
• MVCのModel部分をExt側から透過的に利用できるため、開発が高速。

というのがありました。xFrameworkPX_Controller_ExtDirect を継承したコントローラーを使うと，「モジュール名でアクセスできる」ってことですね。モジュールに必要なメソッドを書いてやれば，それをExt.Directで使えるという訳です。ぐっとハードルが低くなります。

「これはすばらしい」と思っているわけですが，そのxFrameworkPX_Controller_ExtDirectに関する資料がみつからない。

小堤さんのブログで「xFrameworkPX_Controller_ExtDirect」という記事を発見。

これじゃ，これじゃがな。（ただこれは，xFrameworkPX 3.5 をリリースする前に出された記事のようです。）
ブログの記事には，コントローラーコード，モジュールコード，JSコードが載ってます。なるほど，ふむふむという感じなのですが，

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

上記のような部分をどう書いたらいいのかわからない。apiの指定とか，routerの指定はどうなるのだろう。とかいろいろと思う。

試しにサンプルのコードを配置してアクセスしてみた。すると

eval(Ext.app.REMOTING_API = {"url":"extdirect.html","type":"remoting","actions":[]});

というのが返ってくる。きっとこれがAPIだ。（ちゃんと中身がないのが気になるが，なにか間違ってるんだ，それは後でしらべよう）
それから，xFrameworkPX_Controller_ExtDirectクラスのソースコードを眺めたりしていて，POSTパラメータがない場合は，api.php の戻り値みたいなのを返して，POSTパラメータがある場合はrouterとなるような感じ。ということは，Ext.Directを使うときには，きっと

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

のように書くに違いない。で，htmlファイルには上記のように書いて，コントローラーのファイル名を .extdirect.php として保存した。

そうすれば，extdirect.html としてアクセスできるから。また，APIの中身がなかったのは，コントローラーのコードがちょっと違っているためだったようなので，そこも修正。

そうしたらうまく動いた！これは大きな一歩を踏み出したぞ！次が実際に動かしたソース

コントローラー　.extdirect.php

<?php
class extdirect extends xFrameworkPX_Controller_ExtDirect {

    public $modules = array(
        'TreePanel' => array(
            // {{{ コネクション名設定
            'conn' => 'default'
            // }}}
        )
    );
}

モジュール　treePanel.php

<?php
class TreePanel extends xFrameworkPX_Model {

    public function getTree( $id ) {

        $out = array();
        if($id == "root"){
            for($i = 1; $i <= 5; ++$i){
                array_push($out, array(
                    'id'=>'n' . $i,
                    'text'=>'Node ' . $i,
                    'leaf'=>false
                ));
            }
        }else if(strlen($id) == 2){
            $num = substr($id, 1);
            for($i = 1; $i <= 5; ++$i){
                array_push($out, array(
                    'id'=>$id . $i,
                    'text'=>'Node ' . $num . '.' . $i,
                    'leaf'=>true
                ));
            }
        }
        return $out;

    }

}

JavaScript

/**
 *
 */
Ext.onReady( function() {

    Ext.Direct.addProvider(Ext.app.REMOTING_API);

    var tree = new Ext.tree.TreePanel({
        width: 400,
        height: 400,
        autoScroll: true,
        renderTo: Ext.getBody(),
        root: {
            id: 'root',
            text: 'Root'
        },
        loader: new Ext.tree.TreeLoader({
            directFn: TreePanel.getTree
        }),
        fbar: [{
            text: 'Reload root',
            handler: function(){
                tree.getRootNode().reload();
            }
        }]
    });

});

宿題

• コントローラーの名前はextdirectでなくてはならんのだろうか。別にそれでもいいんだけど。
• 小堤さんから，ツイートで教えてもらった。次の件，どういうことなのか調べる

ちなみに、フォームパネルとの連携の際、formHandler=trueをAPIで帰す必要がありますが、xFrameworkPXの場合、メソッドのコメントに@formHandlerかけば勝手になります。参考までにー。