引き続きMVCパターンで具体的なアプリ構築に入っていく。
それと構築途中で判明したlocalstorageのバグにも触れる。
今回作成した物とそのソースファイルを以下に置いておく。
MemoApp
memoMVC.zip

[構築]
最低限必要な情報は得たのでlocalstroageを使った簡単なメモアプリを作ろうと決めた。まずは、jsonファイルをロードする形のまま画面構成を作成していった。

MainView.jsで画面クラスを下記のようにitemsとしていれこみ具体的な部分はMemoListViewやMemoView、MemoEditViewで作り込んで行っている。

items : [
  {
    xtype   : 'navigationbar',
    title   : 'MEMO',
    docked   : 'top'
  },
  {
    xtype   : 'memolistview'
  },
  {
    xtype   : 'memoview'
  },
  {
   xtype   : 'memoeditview'
  }
]

データのロードやボタン押しからの動作などは以前もお世話になったありえるあさんの記事を参考にさせていただきながら作成していった。
Sencha Touch 2 First Look
SenchaTouch2-simple-CRUD-sample
具体的にはMainController.jsでイベント登録して

'#memo-list-view': {
  show: this.onShowMemoList,
  select: this.onListSelectMemoList
},

こんな風にフォームにデータを表示するあたりなどだ。

onListSelectMemoList: function(list, memodata) {
  var memo_view = Ext.getCmp('memo-view');
  var form = memo_view.down('formpanel');
  form.setRecord(memodata);
  memo_view.show();		
},

ここでも使っているけれどExt.getCmp(id名)が使っていてとても便利だった。

[localstorageのバグ]
LocalStorageはドキュメントに載っているstoreを使う方法Ext.data.proxy.LocalStorageViewだとバグがありちゃんとした動作しない。下記のフォーラムでも指摘がなされている。
[PR1] LocalStorage throwing error on ‘sync()’
PR1でのバグ報告であるが、つい先日公開されたPR3を使用しても同じ症状がおきる。
MainView.jsの新規メモ保存している部分でドキュメンの通りであれば、このように書くべきところ

store.add({id: Math.ceil(Math.random()*1000),
  date:Ext.Date.format( now, 'Y-m-d H:i:s'),
  memo:values['memoedit']
});
store.sync();

これをこのように、モデル作成して追加するように変更する。

var myMemo = Ext.create('MemoApp.model.MemoModel',
  {
    id: Math.ceil(Math.random()*1000),
    date:Ext.Date.format( now, 'Y-m-d H:i:s'),
    memo:values['memoedit']
  }
);
myMemo.save();

こうしておけば、保存も取り出しも問題なくなる。

今回のでsencha touch2でアプリケーションを作成するための基礎がほぼ出来上がった気がする。
ということで、この後はeasel.jsに入りsenchaとの組み合わせ方も検討してみたい。