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" />

This entry was posted on Sunday, August 12th, 2007 at 10:17 pm and is filed under ruby, tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.