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
> 
> <div id="collection-grid"></div>
> <%= 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:

<div id="grid"></div>
<script>
  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
-- 
Posted via http://www.ruby-forum.com/.

-- 
You received this message because you are subscribed to the Google Groups "Ruby 
on Rails: Talk" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to 
[email protected].
For more options, visit this group at 
http://groups.google.com/group/rubyonrails-talk?hl=en.

Reply via email to