2007-04-06 [長年日記]

[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:

sample1.jpg

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

argexplanationoptionalkeyworddefault
1stAR classfalse:model(none)
2ndper_pagetrue:limit10

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!

本日のツッコミ(全9件) [ツッコミを入れる]
_ yamaz (2007-04-10 21:10)

Can you change to use prototype.js instead of yui-utilities? Without prototype.js, we can not use RJS or such kinds of powerful Rails ways.

_ Robert Berger (2007-08-21 11:25)

Is the Rails ext plugin still being actively developed? Thanks!

_ Maiha (2007-08-23 02:38)

No, I'm not active about this plugin. I'm currently devoting myself to other things. Do you desire the "Tree" feature now? :)

_ collin (2007-11-14 01:38)

I'm more interested more in the CRUD actions.

_ Auguste (2007-12-13 22:38)

I'am interested by tree support. In SVN, there are several files related to tree support. Is it need lot of development to complete support ?

_ Maiha (2007-12-14 06:31)

OK. I'll release next version soon, hopefully within less than a month.<br>The supported features are<br>* tree helper<br>* scaffold

_ Auguste (2007-12-14 21:35)

Great !

_ Maiha (2007-12-28 06:08)

supported Scaffold and Tree feature<br>http://wota.jp/ac/?date=20071227

_ &#21834; (2008-09-27 19:06)

kasdf


サイト内検索 (by Google)

| JRuby | Rails | Berryz | ℃-ute | エッグ | jQuery |

過去

2007年
4月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30

未来

コンタクト