rails集成extjs
原文见:http://extjs.com/tutorial/using-ext-grid-ruby-rails
E文好的就直接看吧。
- 下载extjs,将需要的文件放到对应的文件夹(具体需要的文件见第二步的列表)
- 在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 %>
- 在view中增加显示grid的div
java 代码
- <%= 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中。
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'}
- ]),
-
- 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
分享到:
- 2007-09-15 13:04
- 浏览 5113
- 评论(2)
- 论坛回复 / 浏览 (2 / 5359)
- 查看更多
相关推荐
extjs-rails 这颗宝石提供: ExtJS 4.1 与 rails 资产管道完美配合安装宝石“extjs-rails” 宝石“指南针” //= require ext-all / / = require ext - all - dev定制 config . extjs_theme非常感谢用于 jquery-rails...
angular_rails_csrf, 面向AngularJS的Rails 集成风格的CSRF保护 angularjs对 Rails的CSRF保护 AngularJS的 $http服务已经构建了CSRF保护。 默认情况下,它查找名为 XSRF-TOKEN的cookie,如果发现,将它的值写入 X-...
tinymce-rails, 集成TinyMCE与 Rails 资产管道 用于TinyMCE的 Rails 集成tinymce-rails gem 将 TinyMCE 编辑器与 Rails 资产管道集成在一起。这里 gem 与 Rails 3.1.1和更高的( 包括 Rails 4 ) 兼容。这是 Tiny
minitest-rails, Rails的Minitest集成 minitestRails 5的Minitest集成 安装gem install minitest-rails这将安装以下宝石:minitest配置创建一个新的Rail
adminlte-rails, AdminLTE Rails gem 将AdminLTE主题与 Rails 资产管道集成 AdminLTE Rails gem AdminLTE 是后端的高级 Bootstrap 主题。英镑 AdminLTE Rails gem 与 Rails 资产管道集成了英镑AdminLTE主题。安装将...
cloudinary_gem, 用于 Ruby on Rails 集成的Cloudinary gem CloudinaryCloudinary是一个云服务,提供了一个解决方案,可以解决整个应用程序图像管理管道的问题。轻松将图片上传到云。 自动执行智能图像调整,裁剪和...
NULL 博文链接:https://chen-miao.iteye.com/blog/1584495
The simple document introduce Rails + Extjs
webpack-rails, 将 web pack与你的Ruby on Rails 应用程序集成 不再维护webpack-rails 不再被维护。 有关详细信息,请参阅 #90. web pack-railsweb pack 为你提供了将 web pack集成到现有的Ruby on Rails 应用程序中...
ckeditor-rails, 集成 CKEditor javascript库和 Rails 资产管道 用于 Rails 资产管道的 CKEditorCKEditor 是一个WYSIWYG编辑器用来使用 inside 网页的库。ckeditor_rails gem 将 CKEditor 与 Rails 资产管道集成在...
为身份验证框架提供Rails集成。 目录 资源资源 有用的链接: 文章: 为什么选择Rodauth? 已经有几种流行的Rails身份验证解决方案(Devise,Sorcery,Clearance,Authlogic),那么为什么要选择Rodauth? 以下是...
pjax_rails, Rails的PJAX集成 用于 Rails 3.2 的 PJAX 通过资产管道将 wanstrath PJAX的Chris 集成到 Rails 3.2 中。要激活,请将它的添加到 app/assets/javascripts/application.j
weixin_rails_middleware, 微信集成 ruby weixin_rails_middleware for integration weixin.
该gem将Sass的C实现集成到资产管道中。 在一个较大的项目中,这使编译速度提高了4倍: # Using sassc-rails[1] pry(main)> Benchmark.bm { |bm| bm.report { Rails.application.assets["application.css"] } } user...
jquery-fileupload-rails, 用于 Rails的jQuery文件上传集成 Rails 文件上传jQuery-File-Plugin 是一个文件上传插件,由的Tschan 。 jQuery文件上传功能多文件选择。drag&拖放支持。进度栏和jQuery预览图像。 支持...
AnyCable滑轨AnyCable允许您使用任何WebSocket服务器(以任何语言编写)代替内置的Rails Action Cable服务器。 使用AnyCable,您可以使用频道,客户端JS,广播-(几乎)使用Action Cable可以完成的所有工作。 您甚至...
Master 是一个简单的 API,没有招摇Swagger 分支包含 Swagger 集成如何查看此示例 API 文档- git checkout swagger - rake db:create - rake db:migrate - rails s - http://localhost:3000/docs 您可以通过 ...
chosen-rails, 将选择的javascript库与 Rails 资产管道集成 为 Rails 资产管道选择的选择是一个用于制作长的,笨拙的选择框的用户友好的库。chosen-rails gem 将 Chosen 与 Rails 资产管道集成在一起。用法安装选择...