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' } } });
でましたぁ〜。あー、すっきり。
追記
こんなサンプルコードを書いてる人がいた。
素晴らしい。