一个ExtJs的Rails Plugin

本文介绍一个专门集成ExtJs到Rails的Plugin。ExtJs库是一个实用的一流Javascript库，相信许多人在看到它之后会爱不释手。对于Rails爱好者，则希望了解如何在Rails下使用它。下面介绍其使用： 该plugin功能概要：

• Easy to include ext files
• Pagination
• Scaffold
• Tree (Not implemented yet)
• and so on (Not implemented yet)

1、安装 1）安装ext plugin：

cd vendor/plugins
svn co http://wota.jp/svn/rails/plugins/trunk/ext/

2）安装依赖的plugins：

ruby script/plugin install http://wota.jp/svn/rails/plugins/branches/stable/dsl_accessor/
ruby script/plugin install http://wota.jp/svn/rails/plugins/branches/stable/named_options/

3）安装extjs库 此处下载最新版的ExtJs，有三个adapter： jquery, prototype, yui wget http://extjs.com/deploy/ext-1.0.1a.zip unzip ext-1.0.1a.zip cd public ln -s ../ext-1.0.1a ext 基于Windows的用户可将ext-1.0.1a.zip直接展开到public目录，然后将目录ext-1.0.1a更名为ext。 2、修改ExtJs Plugin 该plugin是基于ext-1.0-alpha3而作的，稍加修改即可支持最新版ext-1.0.1a。 打开文件vendor/plugins/ext/lib/ext/helper.rb，将ext_include方法修改为：

ruby 代码

1. def ext_include
2. array = []
3. array << class="string">"#{ext_top}resources/css/ext-all")
4. array << class="string">"#{ext_top}adapter/yui/yui-utilities")
5. array << class="string">"#{ext_top}adapter/yui/ext-yui-adapter")
7. if RAILS_ENV == 'development'
8. array << class="string">"#{ext_top}ext-all-debug")
9. else
10. array << class="string">"#{ext_top}ext-all")
11. end
13. array <<>
14. array <<>
15. array.join("\n")
16. end

你也可以将adapter修改为jquery或prototype。查看public/ext/adapter/jquery或prototype目录下有哪些文件，参考上面的方法替换即可。 3、试用： 1） Migration:

ruby 代码

1. create_table :tomcats do |t|
2. t.column :kname, :string
3. t.column :memo, :text
4. end

2） 在Controller中添加 ext_paginate，不要含有其他方法。

ruby 代码

1. class TomcatsController <>
2. ext_paginate Tomcat, 20,
3. :cm => Ext::Grid::ColumnModel.new([
4. {:dataIndex => "id" , :width => 100, :header => "Thread ID"},
5. {:dataIndex => "kname" , :width => 200, :header => "Title"},
6. {:dataIndex => "memo" , :width => 400, :header => "Description"},
7. ])
8. end

3） 如果routes.rb文件中有map.resources :tomcats，则注释掉。 4） 重新启动script/server，浏览http://localhost:3000/tomcats 参考：

• Ext Plugin: http://wota.jp/ac/?date=20070406
• ExtJs: http://extjs.com/