A Cookbook.

The FormPanel widget in ExtJS does a real good job. It can be configured to validate complicated wired fields directly in the browser and has a clean, easy, and generic way to handle loading, checking and saving data through Ajax and JSON. Of course we want this widget in our Rails application. Luckily, Apotomo’s Extjs::FormPanel does all this.

Here’s a very simple example how to insert and customize such a FormPanel.

app/apotomo/apotomo_widget_tree.rb

1
2

  w << my_form = cell(:my_first_form, :render_as_function, 'my_form',
    :object_id => 9)

We plug a cell widget into our application, and set it’s start state. I also explicitly set a static parameter (line 2) for demonstration purposes.

app/cells/my_first_form_cell.rb

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
31

class MyFirstFormCell < Extjs::FormPanel
 
  def init_config
    config = super
    config[:title] = "My first cheap Form"
    config[:width] = 300
    config[:frame] = true
 
    config[:items] = [
      { :xtype      => :textfield, 
        :fieldLabel => "Some text", 
        :name       => "text_field"}]
  end
 
  def load_data
    id = param(:object_id)   # find out business object to edit.
    @obj = get_object_for(id)
    return @obj
  end
 
  # note that we already have the form business object in @obj.
  def process_data(data)
    if @obj.valid?(data[:text_field])
      # update and save @obj here, send an email, ...
 
      return valid_answer
    end
 
    return invalid_answer({:text_field => "not ok!"})
  end  
end

To customize the generic FormPanel we derive MyFirstFormCell (line 1). The easiest way to add some fields to the form is to provide their config in #init_config (line 9-12). If you think this is to coarse-grained (or static) and would like to add real Apotomo widgets like TextField, you can also go this way. But- more on that in another article.

Loading initial data
By overwriting the #load_data method, we can implement the way our form finds its data to edit (line 15-19). In this example, this method is called whenever the “Load” button in the form is clicked.

Processing the input
When overwriting the #process_data method we can hook into the form processing workflow and implement our own. It’s called after clicking “Save”. We already get the form input as a hash in the data parameter. It’s our time to check it here. We could e.g. pass it to ActiveRecord::update_attributes.
If we encounter validation errors on the server-side we can send those back to the ExtJS form with #invalid_answer (line 29).

Summary
The Extjs::FormPanel widget provides a quick but flexible way to integrate FormPanels in your applications, using pure Ruby. By overwriting methods you can easily build quite complex forms without having to worry about JavaScript and ExtJS events, since they’re mapped to Ruby via Apotomo.

This example was very generic and simple. It was meant to show the basic idea behind this cool widget.

Tags: FormPanel

This entry was posted on Tuesday, June 17th, 2008 at 2:37 pm and is filed under ExtJS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.