# Data in json ruby on rails and Extjs

**URL:** <https://www.ruby-forum.com/t/data-in-json-ruby-on-rails-and-extjs/177104>\
**Category:** Rails\
**Created:** [October 11, 2009, 8:44pm UTC](https://www.ruby-forum.com/t/data-in-json-ruby-on-rails-and-extjs/177104 "2009-10-11T20:44:23Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![markror2009](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/91b2a8/32.png) [@markror2009](https://www.ruby-forum.com/u/markror2009)\
**Post date:** [October 11, 2009, 8:44pm UTC](https://www.ruby-forum.com/t/data-in-json-ruby-on-rails-and-extjs/177104/1 "2009-10-11T20:44:23Z")

</div>

Hi all,  
I start to use ruby on rails with Extjs, in a controller i put this code  
respond\_to do |format|  
format.html  
format.ext\_json { render :json =\>  
Collection.find(:all).to\_ext\_json(:class =\> Collection) }  
end  
and in view i put this code

\<%= ext\_datastore\_for 'Collection' %\> \<% javascript\_tag do -%\> var collection\_column\_model = new Ext.grid.ColumnModel([{id: 'id', header: "#", width: 20, dataIndex: 'id'}, {header: 'name', dataIndex: 'collection[name]'}, {header: 'description', dataIndex: 'collection[description]'} ]); \<% end -%\> \<%= ext\_grid\_for 'Collection', :element =\> 'collection-grid' %\>

in the browser i have grid but without data.  
any one can help me for this.  
Thank’s

---

<div class="post-metadata">

**Author:** ![markror2009](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/91b2a8/32.png) [@markror2009](https://www.ruby-forum.com/u/markror2009)\
**Post date:** [March 1, 2010, 8:00pm UTC](https://www.ruby-forum.com/t/data-in-json-ruby-on-rails-and-extjs/177104/2 "2010-03-01T20:00:26Z")

</div>

Markror2009 Markror2009 wrote:

> Hi all,  
> I start to use ruby on rails with Extjs, in a controller i put this code  
> respond\_to do |format|  
> format.html  
> format.ext\_json { render :json =\>  
> Collection.find(:all).to\_ext\_json(:class =\> Collection) }  
> end  
> and in view i put this code
> 
> \<%= ext\_datastore\_for 'Collection' %\> \<% javascript\_tag do -%\> var collection\_column\_model = new Ext.grid.ColumnModel([{id: 'id', header: "#", width: 20, dataIndex: 'id'}, {header: 'name', dataIndex: 'collection[name]'}, {header: 'description', dataIndex: 'collection[description]'} ]); \<% end -%\> \<%= ext\_grid\_for 'Collection', :element =\> 'collection-grid' %\>
> 
> in the browser i have grid but without data.  
> any one can help me for this.  
> Thank’s

I write this mini-tutorial to you:  
We will using the convencional way.

Requirements: nifty-generators (install using gem install  
nifty-generators)

1. Create the application: rails contacts
2. Create the database: rake db:create
3. Create layout using nifty\_layout: script/generate nifty\_layout
4. Create our Contact using nifty\_scaffold: script/generate  
nifty\_scaffold name:string phone:string email:string
5. Create the table contacts: rake db:migrate

In config/initializers/new\_rails\_defaults.rb change following:

ActiveRecord::Base.include\_root\_in\_json = true

To

ActiveRecord::Base.include\_root\_in\_json = false

Open your layout in app/views/layout/application.html.erb and add the  
follow:

```
<%= stylesheet_link_tag '/ext/resources/css/ext-all' %>
<%= javascript_include_tag '/ext/adapter/ext/ext-base' %>
<%= javascript_include_tag '/ext/ext-all' %>

```

I’m assume your ext folder is in public.

Now open your contacts\_controller and change the action index to:

def index  
@contacts = Contact.all

respond\_to do |format|  
format.html  
format.json { render :json =\> @contacts.to\_json }  
end  
end

Open the app/views/contacts/index.html.erb and change to:

 function index(){ var store = new Ext.data.JsonStore({ url: '/contacts.json', id: 'store', idProperty: 'id', fields: ['id', 'name', 'email', 'phone'] });

```
store.load();

var grid = new Ext.grid.GridPanel({
  title: 'Contacts',
  width: 400,
  height: 300,
  frame: true,
  renderTo: 'grid',
  store: store,
  columns: [
    { header: 'NAME', dataIndex: 'name', sortable: true },
    { header: 'EMAIL', dataIndex: 'email', sortable: true },
    { header: 'PHONE', dataIndex: 'phone', sortable: true }
  ]
});

```

}

Ext.onReady(index());  
\</script

Run your server by script/server and fun.

Atc.,  
Kirk Patrick