Sencha Touch の Model と Store の使い方メモ

JavaScript

Sencha Touch の Model を Store を使って、 Web API からデータを取得する方法をメモしておく。

まず、次のようなモデルを定義したとする。

Ext.define("App.model.Post", {
  extend: "Ext.data.Model",
  config: {
    fields: [
      { name:"name", type:"string" },
      { name:"body", type:"string" }
    ]
  }
});

Sencha Touch のドキュメントでは下のような、Ext.data.Store を使ってデータを取得する方法が載っていた。

var store = Ext.create("Ext.data.Store", {
  model: "App.model.Post",
  proxy: {
    type: "ajax",
    url: "/posts.json",
    reader: {
      type: "json"
    }
  }
});
store.load({
  callback: function(record, operation, success) {
    // データを取得できたときの処理
  }
});

データを取得するのが1回きりなら、これでもいいんだけど、実際はいろんな箇所で呼び出すはず。 カスタム Store を定義して、再利用できるようにしておいたほうがいい。

Ext.define("App.store.Posts", {
  extend: "Ext.data.Store",
  config: {
    model: "App.model.Post",
    proxy: {
      type: "ajax",
      url: "/posts.json",
      reader: {
        type: "json"
      }
    }
  }
});

カスタム Store を使ってデータを取得するコードは、ほんの少しだけ短くなった。

var store = Ext.create("App.store.Posts");
store.load({
  callback: function(record, operation, success) {
    // データを取得できたときの処理
  }
});

書き捨てのサンプルじゃなく、ちゃんとしたアプリ作るときは、カスタム Store を定義するべきだな。