Ext JS and Rails, how do they get along?

January 8th, 2008

The Ext JS framework got a lot of attention lately as it offers very sophisticated GUI components for web application development. But how does Ext play along with Ruby on Rails, everybody’s favorite development framework?

There is not a lot of documentation around, though some people seem to be using the combo quite successfully (if you take job posts looking for Rails and Ext skills into account).

Googling reveals some Rails plugins aiming at Ext integration, but a closer look exposes them as mostly “vaporware”, abandoned experiments or as not being actively developed.

RailsExt.pngFor my talk on Ext at the Berlin Ruby Users Group, I decided to roll my own. The presentation focuses on Rails scaffolding as a good starting point for playing with Ext. The biggest integration task from a Rails point of view is providing the correct JSON data structures that Ext can process - a task that can be solved in a re-usable way. Passing data around between Rails controllers and views and the actual JavaScript code is another focal point. Download the complete set of slides here.

The presentation features a preview version of my Ext Scaffold Generator, soon to be announced as a official Rails plugin.

[Edit by martin.rehfeld]: The Ext Scaffold Generator has been officially released on 18th January 2008, check out the details.

Related Posts

Entry Filed under: Howto, Ruby on Rails, Presentations, Ext JS

12 Comments Add your own

  • 1. George Bray  |  January 8th, 2008 at 4:51 pm

    Thanks Martin, this looks great. I’ll give it a go and post some feedback here.

  • 2. Some guy  |  January 8th, 2008 at 8:54 pm

    I’d like to see a generator to use existing model and create controllers and views instead of having to do it from scratch.

    The other thing is that the generated helper modules are identical except for the module name - not very dry.

  • 3. martin.rehfeld  |  January 8th, 2008 at 9:01 pm

    @#2/Some guy: The generator will leave existing models alone, so you could potentially generate controllers/views for existing resources but would have to merge the controller code manually.

    The helpers will be put into one central file within the plugin before the official release - got that on my refactoring TODO list :-)

  • 4. Miguel Cabero  |  January 11th, 2008 at 12:02 am

    Good job! The looks of the ext grids are great. But imho, their real potential lies in their cell editing capabilities. It seems then odd to edit records via a form.

  • 5. martin.rehfeld  |  January 11th, 2008 at 2:09 am

    @#4/Miguel: Now that the basic functionality is in place that might indeed be a nice addition to look into.

  • 6. George Bray  |  January 11th, 2008 at 9:10 am

    It worked out of the box for me.
    I expected a double-click in the list to give me the edit panel, instead of the show.

    I was able to customise the widths of the columns, but was unsure for the best way to pipe in the autoWidth:true to Ext.grid.ColumnModel. It worked when adding it to the helper but not in the index.html.rb

    ‘recording-grid’, :autoWidth => true %>

    This is mostly because I’m a newby to rails and haven’t quite grokked how it all fits together.

    I also found that some settings I fiddled with stayed set in the browser, so I’m guessing if the user adjusts the column width it gets remembered. This might be confusing for iterative UI design. Resetting the browser doesn’t work, you have to quit it.

    Nevertheless, I’m excited for the new GUI tools this plugin makes possible - keep up the great work.

    George

  • 7. Tom  |  January 12th, 2008 at 11:08 am

    I’d like to join the chorus for applauding your work. Thanks for the great plugin, Martin!

    However, I agree with Miguel as well - it would be nice for it to make use of cell-editing capabilities of Editable Grids. I really want to use this plugin for my new project, so I’ll try to modify the generated code to see how easy / difficult it is to achieve it.

    On the other hand, perhaps I shouldn’t expect too much from a scaffold generator - there will always be features that are needed to meet a particular business requirement, so it might be better for generators like this to stay simple.

    When do you plan to have this as an official Rails plugin? Are you / will you be looking for contributors as well?

  • 8. martin.rehfeld  |  January 12th, 2008 at 11:31 am

    @#7/Tom: Good to hear that the generator will be given a thorough test ;-) . I just have a couple of things to look at in my TODO list and should be ready to release a first version by the end of next week. If you would like to try out the cell-editing, I would surely love to to integrate your solution. Any contribution is of course most welcome. Then again, you are definitely right stating that a scaffold generator can only provide a starting point and perhaps point out some best pratices on how to proceed.

  • 9. luan  |  January 23rd, 2008 at 7:27 pm

    Hi Martin,

    Thanks for ext_scaffold plugin. I tried out a simple model and it worked fine.

    Do you have any association support among forms in the future?

    Thanks,
    Luan

  • 10. martin.rehfeld  |  January 23rd, 2008 at 8:51 pm

    @Luan/#9: While that’s beyond the resource scaffold generation, I already thought about providing some sample code on how to do that easily. I you have code you would like to share before I get to it, please feel free to to so :-)

  • 11. Chris  |  April 26th, 2008 at 8:08 am

    I once wrote an extensive ruby framework of wrappers for Ext1.0 which I abondoned when Ext2.0 was released. I’ve been working with Ext since V0.33 and it works great with rails.

    see my blog http://www.extonrails.com

    and this guy too: http://www.extjswithrails.com

  • 12. Sergei  |  January 8th, 2009 at 9:49 pm

    Yet another attempt to integrate Rails and Ext JS: the Netzke framework. Have a look at live demo of the Netzke GridPanel widget: http://netzke-demo.writelesscode.com/grid_panel/demo

Leave a Comment

Required

Required, hidden

Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Trackback this post  |  Subscribe to the comments via RSS Feed

Most Recent Posts