Sencha Touch 2 でいろいろハマるポイントとか大枠をとらえようとしてみる

Sencha Touch 2 から MVC 的に書けるようになったらしい

Sencha Touch 1 のときより分離して書けるようになったらしいかわりに、なにも情報がないとなにがなんだかわからなくなる。generate したときの大枠として生成されるものなどを整理して書く

Model

これは Django やなんらかの Web フレームワークと同じような感じの model ととらえればいい感じ。具体的には Ext.data.Model のサンプルを張る

Ext.define('User', {
    extend: 'Ext.data.Model',

    config: {
        fields: [
            {name: 'name',  type: 'string'},
            {name: 'age',   type: 'int'},
            {name: 'phone', type: 'string'},
            {name: 'alive', type: 'boolean', defaultValue: true}
        ]
    },

    changeName: function() {
        var oldName = this.get('name'),
            newName = oldName + " The Barbarian";

        this.set('name', newName);
    }
});

ここでは type も指定しているけど指定しなくてもよかったりする。要挙動確認。ここでは User というモデルを定義してやっている。実際の JSON でのやりとりなどは適宜やる

Store

モデルに対してどう処理をかぶせるかという感じのレイヤー。具体的には Ext.data.Store のサンプルを張る

// Set up a model to use in our Store
Ext.define("User", {
    extend: "Ext.data.Model",
    config: {
        fields: [
            {name: "firstName", type: "string"},
            {name: "lastName",  type: "string"},
            {name: "age",       type: "int"},
            {name: "eyeColor",  type: "string"}
        ]
    }
});

var myStore = Ext.create("Ext.data.Store", {
    model: "User",
    proxy: {
        type: "ajax",
        url : "/users.json",
        reader: {
            type: "json",
            rootProperty: "users"
        }
    },
    autoLoad: true
});

Ext.create("Ext.List", {
    fullscreen: true,
    store: myStore,
    itemTpl: "{lastName}, {firstName} ({age})"
});

ここでは ext.data.Model を一度定義してやって、それから Store を定義してやってるけど、上記の用に一度定義してやればいい。重要なのはどのモデルをつかってそれをどういう type や url やなんらかの通信処理であるとかのレイヤーを定義してやるか、というところらしい。

Controller

主に JavaScript においてのイベントリスナー。Ext.app.Controller 具体的な公式サンプルを張る。

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            nav: '#mainNav'
        }
    },

    addLogoutButton: function() {
        this.getNav().add({
            text: 'Logout'
        });
    }
});

たとえばページが遷移するときに push/pop というイベントを受け取った時にどういう挙動をするかなどを記述する。で、この場合の xtype は Main だけど、分割している場合はもちろん違う処理に挟むことができる(Detail, Subなど)

View

具体的な画面。Ext.navigation.View 。公式サンプルを張る

var view = Ext.create('Ext.NavigationView', {
    fullscreen: true,

    items: [{
        title: 'First',
        items: [{
            xtype: 'button',
            text: 'Push a new view!',
            handler: function() {
                // use the push() method to push another view. It works much like
                // add() or setActiveItem(). it accepts a view instance, or you can give it
                // a view config.
                view.push({
                    title: 'Second',
                    html: 'Second view!'
                });
            }
        }]
    }]
});

画面をどうするかって話ですね。画面遷移した時のイベントは Controller で定義してやるといいかんじに疎結合にできます。

xtype で連鎖させて名前解決する

ExtJS がクラスベースっぽいつくりになっているので xtype にわたす名前にインスタンスをどうとかはあまりよくわかっていない。すいません。とりあえず、デフォルトで用意されている xtype もあるが、オレオレでいろいろ定義できるのでそれで名前解決させてつなげていく感じっぽい。

公式ドキュメントでハマる

公式ドキュメントはたしかに網羅されているけど、「そう書いてあるけど、だからなんなの?」みたいなけっこうわからないところが多い様子。バグバグしいところはコメント欄をみるとよい。で、公式ドキュメントをみるのにも慣れというか若干わかりづらくて、Ext を起点としたリファレンスを丁寧に読み解くというのもあるし、あとはわりとサンプルをみるとよい。特にKitchen Sink はソースもみれるので参考になるのでどういう画面をつくりたいかをさわるときは見ると良い。

config とかでなにを書けばいいの?って話(予約語って結局どれがなんなの?)

実際のところよくよく公式ドキュメントで「configs」ってところをマウスオーバーさせると設定項目が出てくる。「いったいなにを設定すればいいんじゃ!」とおもったらちゃんと公式ドキュメントにかいてありましたとさ。フレームワークとしてなにが予約語というかなにを記述すればどうなるのかは、その「configs」をひたすらみていくしかないっぽい。

記述言語が JavaScript なだけの、あくまで「ExtJS」というフレームワーク

Sencha Touch を JavaScript でどうこうって考えるとけっこうハマるというかなんかモニョモニョしちゃって、どちらかというとこれはもう ExtJS というフレームワークが偶然 JavaScript をつかっていたというくらいに考えたほうがよさそうな感じ。で、わかんなかったら(たとえば XTemplate まわりとか)Sencha Touch というよりはもう ExtJS 自体のリファレンスをみたほうがいいかもしれないとのこと。

とっつきが難しいけど、わかってしまえば強力なフレームワーク

さすがフレームワークなので勝手がわかってしまえばポンポンと記述して簡単にアプリがつくれるらしい。ただ、このフレームワーク自体を学ぶには若干骨が折れるところがあるのでそこらへんは調べるなり自力でやるなりどうにかするしかないっぽい。最近では本も出たらしいので使うといいかもしれない。

thx

@xxxxxxxx ++