● [Rails] Ext plugin

A plugin to use Ext JS library easily on Rails.

Features

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

SVN

http://wota.jp/svn/rails/plugins/branches/stable/ext/

● Install

1) install this plugin

Use "svn co" or "svn export" for installing method, because "plugin install" has a bug that fails to fetch all files named 'httpXXX'.

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

2) install additional plugins too

This plugin depends on following 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/

Here, feel free to run plugin command, because these don't contain 'httpXXX' files.

3) install Ext js library

Execute following lines in RAILS_ROOT directory.

wget http://www.yui-ext.com/deploy/ext-1.0-alpha3.zip
unzip ext-1.0-alpha3.zip
cd public
ln -s ../ext-1.0-alpha3 ext

Now, you can see "public/ext/XXX" files.

● Setup: Easy to include ext files

"ApplicationHelper#ext_include" method includes all files needed for Ext. So you can easily prepare Ext environment by putting one line into your view files.

Prepare Ext environment

<%= ext_include %>

Then, all you have to do is to pass Ext JS codes to "Ext.onReady" method as function.

● Sample1: Kuun world with message box

Code: <%= ext_include %> <script type="text/javascript"> Ext.onReady(function(){ Ext.MessageBox.alert('Kuun', 'World!'); }); </script> "Kuun" is a slang word for 'hello' in Japanese.

Result:

● Sample2: Pagination

Ext has a nice pagination feature.

Just call "ext_paginate" method like "scaffold" in your controller!You need no rhtmls.Then visit its index action.

Code: your controller class MessageController < ApplicationController ext_paginate Message, 20 end args arg explanation optional keyword default 1st AR class false :model (none) 2nd per_page true :limit 10

Result:

● Sample3: Pagination for Ext experts

If you are well familiar to Ext, use :cm option for "Ext.grid.ColumnModel" and :ds for "Ext.data.Store".

Code: your controller class MessageController < ApplicationController ext_paginate Message, 20, :cm => Ext::Grid::ColumnModel.new([ {:dataIndex => "code" , :width => 100, :header => "Thread ID"}, {:dataIndex => "written_at" , :width => 200, :header => "Time"}, {:dataIndex => "name" , :width => 400, :header => "Board Name"}, ]) end

Result:

● Sample4: Scaffold

Pagination is fine, but Scaffold is great :)

Although all CRUD operations are not supported yet in current version, "ext_paginate" recognizes :edit option that enables to edit column value in place and update it immediately by Ajax.

Code: your controller class MessageController < ApplicationController ext_paginate Message, :edit=>true end

Result: In place edit double click or enter key.

Result: Date or Datetime cell Ext JS has date picker!

● Tree

look forward to the next release!

● Links

• Ext JS http://extjs.com/
• Ext plugin http://wota.jp/svn/rails/plugins/branches/stable/ext/