rails集成extjs

阅读更多

rails集成extjs


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

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

   
        
        
        
        
   
         
         
         
         java 代码
        
        
        
        
        
        
        
        
           <%= 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
   

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

4.使用javascript搭建一个grid
url: '/movie/grid_data' 指定了数据源

Ext.grid.Grid('movies_grid'... 则指定了grid出现在哪个div中。

    
    
    
    

     
     
     
     java 代码
    
    
    
    
    
    
    
    
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}});
}
 

5.实现服务器端

list方法只是为了显示list.rhtml，其实也可以不写，grid_data才是真正的幕后英雄，注意其中的render方法直接返回text，不使用layout。

    
    
    
    

     
     
     
     java 代码
    
    
    
    
    
    
    
    
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