RailsのJSONをExtJS4のExt.grid.panelで読み込む

RailsにExtJS4を乗せてみて、ちょっとはまったことをメモ。

Rails側

Userモデルに、nameとageを持たせてるとする。
そして、UserをJSONで全件返すコントローラを作成したとする。

class TweetsController < ApplicationController
  def index
    @users = User.all

    respond_to do |format|
      format.html # index.html.erb
      format.xml  { render :xml => @users }
      format.json  { render :json => @users }
    end
  end
end

http://localhost:3000/users.jsonのような感じでアクセスすると下記のJSONが返ってくる。

[
  {"user":{"name":"_ryog","created_at":"2011-07-28T08:33:01Z","id":1,"updated_at":"2011-07-28T08:33:01Z","age":"24"}},
  {"user":{"name":"mr_k_o","created_at":"2011-07-28T08:36:33Z","id":2,"updated_at":"2011-07-28T08:36:33Z","age":"30"}}
]

ExtJS側

Ext.grid.PanelにExt.data.Storeを設定して、上記のJSONを表示させたいんだけど、こんな感じでいけるかなと思ったらだめだった。
Panel

Ext.define('Sample.view.User' ,{
  extend: 'Ext.grid.Panel',
  alias : 'widget.users',

  title : 'ユーザ一覧',
  store: 'Users',

  initComponent: function() {
    this.columns = [
      {header: '名前', dataIndex: 'name', flex: 1},
      {header: 'å¹´é½¢', dataIndex: 'age', flex: 1}
    ];
    this.callParent(arguments);
  }
});

Model

Ext.define('Sample.model.User', {
  extend: 'Ext.data.Model',
  fields: ['name', 'age']
});

Store

Ext.define('Sample.store.Users', {
  extend: 'Ext.data.Store',
  model: 'Sample.model.User',
  autoLoad: true,

  proxy: {
    type: 'ajax',
    api: {
      read: 'http://localhost:3000/users.json'
    }, 
    reader: {
      type: 'json',
      root: '',
      successProperty: 'success'
    }
  }
});

readerのtypeにjsonとあるから、そういうクラスがあるのかと思って探してみたら、Ext.data.reader.Jsonがあった。
ドキュメント読んでみたら、recordを設定しろと。
Store

Ext.define('Sample.store.Users', {
  extend: 'Ext.data.Store',
  model: 'Sample.model.User',
  autoLoad: true,

  proxy: {
    type: 'ajax',
    api: {
      read: 'http://localhost:3000/users.json'
    }, 
    reader: {
      type: 'json',
      root: '',
      record: 'user',
      successProperty: 'success'
    }
  }
});

でましたぁ〜。あー、すっきり。

追記

こんなサンプルコードを書いてる人がいた。
素晴らしい。