Skip to content

August 12, 2011

10

Creating a login page with ExtJS

by Joe Kuan

I need to polish up the login screen of my ExtJS application and come across the
WordPress style login designs which gives me some ideas. Here is my first design of the login page using ExtJS.


Login Form – Positioning the input fields

The login page is basically a ExtJS FormPanel with a background image in the bodyStyle config and the textfields for username and password.

The default alignment between label and input is horizontal and FormPanel arranges all the label and input fields in nice table rows format. However, it will look awkward with the fields covering the main part of the image. Hence I need to shift the textfields to the right of the image. The FormPanel‘s default layout is ‘form’, which restricts the movement of those fields. In order to freely position label & fields, the FormPanel has to be created with ‘absolute’ layout, as a result the labels have to be created explicitly instead of using fieldLabel config.

var login = new Ext.FormPanel({
  labelWidth: 80,
  bodyStyle: "background-image:url('/images/logon.jpg')",
  layout: 'absolute',
  id: 'loginForm',
  ...

The textfield and label are created as follows:

{
   xtype: 'label',
   style: 'color: #FFF; font-weight: bold; font-size: 11px',
   text: 'Username:',
   x: 165,
   y: 80,
}, {
   name: 'loginUsername',
   allowBlank: false,
   x: 160,
   y: 98,
   style: 'font-size: 20px',
   autoHeight: true
}

The components are positioned with x and y properties whereas the font size and color are configured using style config.

The Login button

The form’s button, Log In, is slightly tricky. If the login button is defined inside the form.buttons properties, the button will appear underneath the image which is not my preference.

To make sure the login button overlay bottom right corner of the image, the button has to be created as part of the form’s items attribute as follows:

items:[{
  ...  // form label & textfields
}, {
  xtype: 'button',
  name: 'login',
  text: 'Log In',
  width: 80,
  x: 290,
  y: 210,
  formBind: true,
  handler: function() {
    ...
  }
}

The other tricky bit is setting the button font style. In ExtJS button, changing the style property won’t affect the appearance as it is defined with specific class in the CSS file. To change the font style, either define a new CSS class and assign to button.cls field, or override existing class definition, (.x-btn button).

.x-btn button {
  font-size: 12px;
  font-weight: bold;
  color: #7786A2;
}

Company Logo

The company logo at the top right corner is a simple Box component with html content, ie launches a new browser window with company’s homepage. This is declared within form items properties.

{
  xtype: 'box',
  autoEl: { tag: 'a', target: 'itrinegy', href: 'http://www.itrinegy.com', html: '</pre>
<span style="color: #006ba5;"><strong>i</strong></span><span style="color: black;">Trin</span><span style="color: #006ba5;"><strong>e</strong></span><span style="color: black;">gy</span>
<pre>' },
  style: 'font-size: 20px; text-decoration:none; font-family: sans-serif, helvetica, "aria black"',
  x: 300,
  y: 8
}

Login Window

The window is created as borders decoration around the login form instead of an actual window, ie user cannot resize, minimise, move or close it. Also the window’s bottom menu bar is a good place to accommodate the copyright message.

var win = new Ext.Window({
  layout:'fit',
  closable: false,
  draggable: false,
  resizable: false,
  width: 425,
  plain: true,
  border: false,
  bbar: [{
    xtype: 'tbtext',
    text: ' ©    2011 - present. iTrinegy'
  }],
  items: [ login ]
});

[ Updated on 23 Apr ]

ExtJs 4 update is here
10 Comments Post a comment
  1. Mohtashim
    Oct 23 2011

    Hi,

    This is really a great login page and liked it. Would it be possible to share complete source code for this innovative work.

    Regards
    Mohtashim

    Reply
  2. Miguel Antonio
    Mar 13 2012

    Hi,

    The logo of the company does not take absolute positions in the form. Can you help me please.

    Reply
    • Joe Kuan
      Mar 14 2012

      Np, please post me your code.

      Reply
  3. amine
    Feb 22 2013

    can you give us the source code

    Reply
    • Joe Kuan
      Feb 24 2013

      You are not the first one to ask. I see what I can do to come up a general login example. I am a bit busy right now, so you may have to wait for a while.

      Thanks
      Joe

      Reply
  4. amine
    Feb 25 2013

    ok thanx

    Reply
  5. yasz
    Sep 6 2013

    Can you help me to fix this bug?The textfield is covered by background-image.
    I try to fix the Z-index of textfiedld more than bg-image.But The fault is still

    Reply
    • Joe Kuan
      Sep 8 2013

      Sorry for the late reply. Can you post your example code here?

      Reply
  6. Feb 11 2014

    i m facing problem in some designing code.can u help me?

    Reply
    • Joe Kuan
      Feb 11 2014

      You can email me the code but I don’t know when I will be next available.

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: