creating a simple logon window

First, we need a simple view for our index defined in part 1

index.rhtml in views/login

<script type="text/javascript"

   src="/javascripts/login.js"></script>    

<p>Here comes the Content which

will be used after the user logged on.</p>

This is just some dummy content that will be “blocked” by a modal extjs window. There can be any HTML content inside it, which will be disabled, but would be visible via the html source code, so aditional client checks are neccessary if it should work as a secure formular.

Now the interesting stuff is of course the login.js itself:

var loginForm = new Ext.form.FormPanel({
    baseCls: 'x-plain',
    labelWidth: 75,
    url:'/login/doLoginTest',
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'Username',
        name: 'name',
        anchor:'90%'  // anchor width by percentage
    },{
    fieldLabel: 'Password',
    name: 'subject',
    anchor: '90%'  // anchor width by percentage
}],
buttons: [{
    text: 'Login',
    handler: function() {
        loginForm.getForm().submit(
            {
                method: 'GET',
                waitMsg:'Submitting...',

                reset : false,
                success : function() {
                    loginWindow.close();

                },
                failure: function(form, action){Ext.Msg.alert('Error',action.result.text)}
            });
        }
    }]

});

var loginWindow = new Ext.Window({
    title: 'Login',
    width: 300,
    height:140,
    closable:false,
    minWidth: 300,
    minHeight: 140,
    layout: 'fit',
    plain:true,
    modal:true,
    bodyStyle:'padding:5px;',
    items: loginForm
});
Ext.onReady(function(){
    loginWindow.show(this);
});

Now lets get through this step by step:
The first function that is called is Ext.onReady, which is the startup function that is called by the extjs toolkit after the page has finnished loading and the toolkit did initialize. The function shows up the loginWindow, which was declared earlier by the line “var loginWindow = new Ext.Window({“. Parameters are always passed as a Javascript Object {param1,param2,param3}, which might look a bit confusing at first, but is very practical to set different parameters. The real interesting parmeter in loginWindow is the “items: loginForm” line, it does define what will end up inside the window, here its a FormPanel. The rest are basicly only stlye information to make it look like a window.

Now, the “loginForm” Object contains the real interesting stuff. You’ll probably recognize the style stuff from the loginWindow object, along with the “items:” line. But here we are not referencing another Object, but just inline the things we need as a Javascript Object again, but this time as an array of Objects, noted with the “items:[{object1},{object2]” line. The “buttons:” line behaves the same, but uses button Objects with onClick handlers instead.

handler: function() {
        loginForm.getForm().submit(
            {
                method: 'GET',
                waitMsg:'Submitting...',

                reset : false,
                success : function() {
                    loginWindow.close();

                },
                failure: function(form, action){Ext.Msg.alert('Error',action.result.text)}
            });
        }

This javasctipt parts creates an Ajax submit form for the “Login” button. Extjs does take care of all houskeeping and wait messages, etc, you just need to tell what to display. The “success” and “failure” functions are user defined and send back from the controller in form of an json hash. Now the controller looks like this:

   def doLoginTest
      headers["Content-Type"] = "text/plain; charset=utf-8" 

      puts params[:name]
      if (params[:name] == "mg")
         data = { :success => 'true'}
      else
         data = { :failure => 'true', :text => "Username or Password wrong !"}
      end
      render :text => data.to_json, :layout => false
   end

As you can see, its a very secure mechanisim thats basicly foolproof and impossible to guess But all joking aside, you can see the result is gathered into a ruby hash or array, which is later then converted to json. For this to work you need either rails 2.0 (which is recommened because it makes life a lot easier with activerecord and json), or you need the json gem and put a

require 'json/objects'

on the top of the controller. Using this mechanic you can transfer all kinds of data from your rails controller to the extjs frontend. In fact all communication between extjs and rails is basicly json, but this will be covered more in part 3, where we’ll have a more in deep look into getting some activerecord data into extjs