Here is a tidbit that will autoCreate an ExtJs BasicDialog populated by a partial returned from an AJAX call to a rails controller action.

In your js

function loadDialog(){
    var cb = {
      success: showDialog,
      failure: displayError
    };
    Ext.lib.Ajax.formRequest( 'merge_form', '/controller/get_dialog' , cb , null, false, null);
}
function showDialog(response){
   var dlg = new Ext.BasicDialog("example_dialog",{
		        height: 200,
		        width: 300,
		        resizeable: false,
			autoCreate: true,
		        modal: true,
		        draggable:false,
			collapsible:false,
		        shadow: true,
			title:'Hola'
		    });

		    dlg.addKeyListener(27, dlg.hide, dlg);
		    dlg.addButton('Yes', dlg.hide, dlg);
		    dlg.addButton('No', dlg.hide, dlg);
		    dlg.body.dom.innerHTML = response.responseText;
		    dlg.show();
		}
function displayError(response){
   if(response.responseText == null){
	 Ext.MessageBox.alert("Woops!","The requested operation failed.");
   }else{
	Ext.MessageBox.alert("Woops!",response.responseText);
   }
}

In your controller

  def get_dialog
    @msg = "hello world"
    render :partial=>"/dialogs/content"
  end

In your partial

  <%= @msg %>

In your view

<input type="button" onClick="loadDialog();" value="show dialog" />

These are a few functions that I use in every rails project I do so I figured I would pass them along. Perhaps someone will find them useful.

This first one is a function to get a page number for pagination based on start index and result set size.

  def get_page(_start,_limit)
    start = (_start || 1).to_i
    size = (_limit || 25).to_i
    return ((start/size).to_i)+1
  end

This function returns an age based on birth date thats pulled from a DateTime db col.

  def age(birthdate)
    unless birthdate.nil?
      age = Date.today.year - birthdate.year
      if Date.today.month < birthdate.month ||
      (Date.today.month == birthdate.month && birthdate.day >= Date.today.day)
        age = age - 1
      end
      return age
    else
      return 0
    end
  end

This function takes a string and a length and truncates it while also appending … to the end.

  def ellipses(str,length)
    if str.nil?
      return
    else
      return (str.length > length) ? "#{str[0,length]}…” : str
    end
  end

Jack Slocum and the guys over at Ext JS labs have delivered in my humble opinion one of the best JavaScript UI libs I have ever had the pleasure to work with.

They have a particularly nice tree widget that I’ve leveraged a few times using Json rendered from rails. This page is the only one I’ve found that explains how to populate it from rails and it leverages acts_as_nested_set. I found that to be a bit of overkill (and in Japanese or something) so I did an alternate version which uses acts_as_tree instead.

Here’s hoping this saves someone some time… Enjoy

In your Model:

  acts_as_tree

In your controller:

  def get_tree_data
    folders = Folder.find(:all)
    data = get_tree(folders)
    render :text=>data.to_json, :layout=>false
  end

In your application controller:

 def get_node(obj)
   if obj.children.empty?
     return [{"text"=>obj.name,"id"=>"#{obj.class}_#{obj.id}","cls"=>"#{obj.class}_node".downcase,"leaf"=>true}]
   else
     return [{"text"=>obj.name,"id"=>"#{obj.class}_#{obj.id}","cls"=>"#{obj.class}_node".downcase,"leaf"=>false}]
   end
end

def get_tree(collection)
  data = Array.new
  collection.each { |item|
    if data.empty?
      data = get_node(item)
    else
      data.concat(get_node(item))
    end
  }
  return data
end