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
- 浏览 5160
- 评论(2)
- 论坛回复 / 浏览 (2 / 5398)
- 查看更多
相关推荐
extjs-rails 这颗宝石提供: ExtJS 4.1 与 rails 资产管道完美配合安装宝石“extjs-rails” 宝石“指南针” //= require ext-all / / = require ext - all - dev定制 config . extjs_theme非常感谢用于 jquery-rails...
标题 "Rails 集成Open Flash Charts" 涉及的是在Ruby on Rails框架中集成Open Flash Chart这一图表库的技术细节。Open Flash Chart是一个开源的Flash图表生成器,它允许开发者通过简单的API创建各种复杂的图表,包括...
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是一个云服务,提供了一个解决方案,可以解决整个应用程序图像管理管道的问题。轻松将图片上传到云。 自动执行智能图像调整,裁剪和...
webpack-rails, 将 web pack与你的Ruby on Rails 应用程序集成 不再维护webpack-rails 不再被维护。 有关详细信息,请参阅 #90. web pack-railsweb pack 为你提供了将 web pack集成到现有的Ruby on Rails 应用程序中...
Ruby on Rails:Rails与JavaScript集成.docx
ckeditor-rails, 集成 CKEditor javascript库和 Rails 资产管道 用于 Rails 资产管道的 CKEditorCKEditor 是一个WYSIWYG编辑器用来使用 inside 网页的库。ckeditor_rails gem 将 CKEditor 与 Rails 资产管道集成在...
为身份验证框架提供Rails集成。 目录 资源资源 有用的链接: 文章: 为什么选择Rodauth? 已经有几种流行的Rails身份验证解决方案(Devise,Sorcery,Clearance,Authlogic),那么为什么要选择Rodauth? 以下是...
Cucumber-Rails集成了Cucumber与Rails,使得开发者能够在Rails环境中方便地使用Cucumber进行功能测试。 在 Rails 应用中使用 Cucumber-Rails,开发者可以创建一个名为`features`的目录,里面包含这些Gherkin特性...
`weixin_rails_middleware` 是一个开源的 Ruby 框架中间件,设计用于帮助开发者轻松地在 Rails 应用程序中集成微信服务。这个中间件提供了与微信API交互的功能,包括验证微信服务器的请求、处理用户消息、以及发送...
pjax_rails, Rails的PJAX集成 用于 Rails 3.2 的 PJAX 通过资产管道将 wanstrath PJAX的Chris 集成到 Rails 3.2 中。要激活,请将它的添加到 app/assets/javascripts/application.j
EXTJS的开发工具通常包括Sencha Cmd、Ruby、JavaFX Packager Installer(JXPI)和集成开发环境(IDE)。 1. **Sencha Cmd**: - Sencha Cmd是EXTJS的主要命令行工具,用于自动化EXTJS项目构建过程,包括创建应用、...
Rails鼓励TDD(测试驱动开发),包括单元测试、集成测试和功能测试。RSpec、Capybara等库可以帮助编写和运行这些测试,确保代码质量。 这个Rails项目提供了学习和研究Web开发的机会,特别是对于Ruby on Rails新手...
`cljs-rails` 提供了Rails友好的集成方式,包括自动编译、Sprockets的集成、Rails Asset Pipeline的兼容等,使得Clojurescript可以像其他Rails asset一样被管理和部署。 使用`cljs-rails` 的步骤通常包括以下几点:...
AnyCable滑轨AnyCable允许您使用任何WebSocket服务器(以任何语言编写)代替内置的Rails Action Cable服务器。 使用AnyCable,您可以使用频道,客户端JS,广播-(几乎)使用Action Cable可以完成的所有工作。 您甚至...