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 はソースもみれるので参考になるのでどういう画面をつくりたいかをさわるときは見ると良い。
記述言語が JavaScript なだけの、あくまで「ExtJS」というフレームワーク
Sencha Touch を JavaScript でどうこうって考えるとけっこうハマるというかなんかモニョモニョしちゃって、どちらかというとこれはもう ExtJS というフレームワークが偶然 JavaScript をつかっていたというくらいに考えたほうがよさそうな感じ。で、わかんなかったら(たとえば XTemplate まわりとか)Sencha Touch というよりはもう ExtJS 自体のリファレンスをみたほうがいいかもしれないとのこと。
とっつきが難しいけど、わかってしまえば強力なフレームワーク
さすがフレームワークなので勝手がわかってしまえばポンポンと記述して簡単にアプリがつくれるらしい。ただ、このフレームワーク自体を学ぶには若干骨が折れるところがあるのでそこらへんは調べるなり自力でやるなりどうにかするしかないっぽい。最近では本も出たらしいので使うといいかもしれない。
thx
@xxxxxxxx ++