Ext JS に関しては,新しい記事は Sunvisor Lab. ExtJS 別館 にあります。そちらもよろしくお願いいたします。

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かけば勝手になります。参考までにー。

 

 

トラックバック


URL から "-MoIyadayo" を削除してトラックバックを送信してください。
トラックバックは承認後に表示されます。