Skip to content

April 26, 2012

13

Creating a login page with ExtJS 4

by Joe Kuan

This post is the ExtJs 4 update of my other post of ‘Creating a login page with ExtJS‘ which is based on an older version.

  var login = new Ext.form.Panel({
    labelWidth : 80,
    bodyStyle : "background-image:url('app/images/fibre_cable_logon.jpg')",
    frame : true,
    id : 'login_form',
    iconCls : 'itrinegy',
    title : 'Welcome to AppQoS',
    height : 282,
    width : 425,
    defaultType : 'textfield',
    labelAlign : 'top',
    layout : 'absolute',
    // Login form elements
    items : [{
      xtype : 'component',
      autoEl : {
        tag : 'a',
        target : 'itrinegy',
        href : 'http://www.itrinegy.com',
        html : '<font color="#006ba5"><b>i</b></font><font color="black">Trin</font><font color="#006ba5"><b>e</b></font><font color="black">gy</font>'
      },
      style : 'font-size: 20px; text-decoration:none; font-family: sans-serif, helvetica, "aria black"',
      x : 300,
      y : 8
    }, {
      xtype : 'label',
      style : 'color: #FFF; font-weight: bold; font-size: 12px',
      text : 'Username:',
      x : 165,
      y : 80
    }, {
      name : 'loginUsername',
      id : 'login_user',
      x : 160,
      y : 98,
      height: 28,
      width: 200
    }, {
      xtype : 'label',
      style : 'color: #FFF; font-weight: bold; font-size: 12px',
      text : 'Password:',
      x : 165,
      y : 136
    }, {
      name : 'loginPassword',
      id: 'login_password',
      inputType : 'password',
      height: 28,
      width: 200,
      x : 160,
      y : 154,
    }, {
      xtype : 'checkbox',
      name : 'remember_me',
      boxLabel : 'Remember Me',
      inputValue : 1,
      x : 160,
      y : 192,
      id : 'remember_me'
    }, {
      xtype : 'button',
      id : 'login_button',
      text : 'Log In',
      width : 80,
      x : 290,
      y : 210,
      formBind : true,
    }]
  });

And here is for the CSS:

#login_user .x-form-field, #login_password .x-form-field {
    font-size: 20px;
}

#remember_me .x-form-cb-label {
   font-size: 11px;
   color: #4d4d4d;
}

#login_button .x-btn-inner {
   font-size: 12px;
   font-weight: bold;
   color: #6666A2;
}
13 Comments Post a comment
  1. mohammed
    Nov 27 2012

    what about the server side…..using php

    Reply
    • Joe Kuan
      Nov 28 2012

      Well, it really depends on what you need in your application.

      The hard part is to come out with a front end design of login screen in ExtJs.

      Reply
  2. Abdelkader
    Dec 11 2012

    Thanks for the example, but i’m wondering where should i put the css code ?

    Reply
    • Joe Kuan
      Dec 11 2012

      It’s really up to u. Inside the section or in separate css file. Most developers choose the later.

      Reply
  3. gino
    Feb 20 2013

    where do i must put this code? i’m a newbie learning something :P please help me ahah

    Reply
    • Joe Kuan
      Feb 24 2013

      You should generally load all your ExtJs source in one html file. So when my application starts, I simply display the login form inside a Ext.window.Window, disable move and close actions, etc.

      Something like that ….

      Ext.onReady(function() {
      var win = Ext.create(‘Ext.window.Window’, {
      layout : ‘fit’,
      closable : false,
      resizable : false,
      draggable : false,
      border : false,
      items: [{
      // xtype create login form
      xtype: ‘form’,
      ….,
      items:[{
      }, {
      xtype : ‘button’,
      text : ‘Log In’,
      width : 80,
      x : 290,
      y : 210,
      formBind : true,
      handler: function() {
      // Check login ok via Ext.util.Ajax call
      // If password is valid, close the login window
      // and launch the main application layout
      // with ViewPort
      }
      }]
      }]
      }).show();
      });

      Reply
  4. me
    May 31 2014

    Horrible code with inline css..

    Reply
    • Joe Kuan
      May 31 2014

      If you don’t like it, then improve it.

      Reply

Trackbacks & Pingbacks

  1. login extjs 4 php
  2. extjs 4 login page example
  3. extjs 4 login page
  4. extjs 4 login tutorial
  5. extjs 4 login window example

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: