extjs文件服务器,rails集成extjs

原文见：http://extjs.com/tutorial/using-ext-grid-ruby-rails

E文好的就直接看吧。

1.下载extjs，将需要的文件放到对应的文件夹(具体需要的文件见第二步的列表)

2.在layout中加入javascript引用

3.在view中增加显示grid的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}});

}

5.实现服务器端

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

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