rails集成extjs

原文见：http://extjs.com/tutorial/using-ext-grid-ruby-rails
E文好的就直接看吧。

1.下载extjs，将需要的文件放到对应的文件夹（具体需要的文件见第二步的列表）
2.在layout中加入javascript引用

<%= stylesheet_link_tag "../javascripts/ext/resources/css/ext-all.css" %>
<%= javascript_include_tag "ext/adapter/prototype/prototype.js" %>
 <%= javascript_include_tag "ext/adapter/prototype/scriptaculous.js" %>
<%= javascript_include_tag "ext/adapter/prototype/effects.js" %>
<%= javascript_include_tag "ext/adapter/prototype/ext-prototype-adapter.js" %>
<%= javascript_include_tag "ext/ext-all-debug.js" %>
<%= yield %>

3.在view中增加显示grid的div

<%= javascript_include_tag "grid-paging.js" %>
<div id="movies_grid" style="border:5px solid #99bbe8; overflow:hidden; width:650px;">
</div>  

4.使用javascript搭建一个grid
url: '/movie/grid_data' 指定了数据源
Ext.grid.Grid('movies_grid'... 则指定了grid出现在哪个div中。

var grid;  var ds;
Ext.onReady(function(){
  init_grid();
});
function init_grid() {      ds = new Ext.data.Store({
  proxy: new Ext.data.HttpProxy({url: '/movie/grid_data'}),

    reader: new Ext.data.JsonReader({
      root: 'Movies',
      totalProperty: 'Total',
      id: 'id'
  }, [
      {name: 'title', mapping: 'title'},
      {name: 'plot', mapping: 'plot'},
      {name: 'release_year', mapping: 'date'},
      {name: 'genre', mapping: 'genre'},
      {name: 'mpaa', mapping: 'mpaa'},
      {name: 'directed_by', mapping: 'directed_by'}
  ]),

  // turn on remote sorting
  remoteSort: true
  });
var cm = new Ext.grid.ColumnModel
  ([{
     id: 'title',
     header: "Title",
     dataIndex: 'title',
     width: 250
  },{
     header: "Release Year",
     dataIndex: 'release_year',
     width: 75
  },{
       header: "MPAA Rating",
     dataIndex: 'mpaa',
     width: 75
  },{
       header: "Genre",
     dataIndex: 'genre',
     width: 100
  },{
       header: "Director",
     dataIndex: 'directed_by',
     width: 150
  }]);

cm.defaultSortable = true;
grid = new Ext.grid.Grid('movies_grid', {
  ds: ds,
  cm: cm,
  selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
  autoExpandColumn: 'title'
});
grid.render();
  ds.load({params:{start:0, limit:20}});
}  

class MovieController < ApplicationController

  def list      
  end             
  # Called from the list page to get the movie list data to populate the grid.
  # def grid_data          
    start = (params[:start] || 1).to_i                
    size = (params[:limit] || 20).to_i           
    sort_col = (params[:sort] || 'id')          
    sort_dir = (params[:dir] || 'ASC')                    
    page = ((start/size).to_i)+1                
    @movie_pages = Paginator.new(self, Movie.count, size, page)                
    @movies = Movie.find(:all,
              :select => "id, title, plot, date, genre, mpaa, directed_by",
              :limit=>@movie_pages.items_per_page,                               
              :offset=>@movie_pages.current.offset,                                
              :order=>sort_col+' '+sort_dir)              
    return_data = Hash.new()                
    return_data[:Total] = @movie_pages.item_count                
    return_data[:Movies] = @movies.collect{|u| {:id=>u.id,
                          :title=>u.title,
                          :plot=>u.plot,
                          :date=>u.date,
                          :genre=>u.genre,
                          :mpaa=>u.mpaa,
                          :directed_by=>u.directed_by} }                
    render :text=>return_data.to_json, :layout=>false      
  end  
end