Results 1 to 5 of 5

Thread: Login bar

  1. #1
    Sencha Premium Member
    Join Date
    Nov 2010
    Posts
    12

    Default Login bar

    Hi all,

    I'm new here (and with ExtJS) so I'm sorry if I repeat a topic. I've searched the net but I haven't found any obvious solution to my problem, so I'm asking you to help me.

    What I want is a sleak and simple login/register bar, I've tried to use a form with text fields but they seem to be tacking on top of eachother and that's not what I want.

    What I want, simplified, is this:

    Username: [_________] Password: [_________] (Log in) (New? Register here)

    Two text fields after eachother and a button (or preferrably a link) that log in the user and one that opens up a new form that requests further information to process a new user. And, if possible, have it all aligned to the right. Even nicer would be if I could have it in the titlebar of a form but I'm guessing it's a far reach.

    So, my main problem is how to build the form with the fields after each other.

    I've tried to use a column layout but then the labels disappeared and I had to do some stuff that I don't think is Ext-esque to say the least.

    Any help that can put me in the right direction is appreciated, thanks!

  2. #2
    Ext JS Premium Member griffiti93's Avatar
    Join Date
    Mar 2007
    Location
    Owasso, OK
    Posts
    130

    Default

    "FormLayout is responsible for rendering the labels of Fields."
    FormLayout

    Sencha announced the deprecation of FormLayout for the upcoming Ext JS 4 scheduled for release on February 28, 2011. But until then, you have to get a bit creative with layouts to get what you want. You're on the right track with a column layout. However, each panel within the column needs to have it's layout set to "form." Try that to see if it works. If not, I can post some alternative code using an hbox and nested panels.


    - Jonathan

  3. #3
    Sencha Premium Member
    Join Date
    Nov 2010
    Posts
    12

    Default

    Okay, I see your solution but I haven't tried it yet, been busy trying to understand how to build a layout the way I want it. Good to hear that I was on the right way anyway. I will try this as sson as I can.

    Thanks!

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    So you want something like:
    Code:
    layout: 'vbox',
    items: [{
      flex: 1,
      xtype: 'container',
      layout: 'form',
      items: {
        anchor: '0',
        xtype: 'textfield',
        fieldLabel: 'Username',
        name: 'username'
      }
    },{
      flex: 1,
      xtype: 'container',
      layout: 'form',
      items: {
        anchor: '0',
        xtype: 'textfield',
        inputType: 'password',
        fieldLabel: 'Password',
        name: 'password'
      }
    },{
      width: 100,
      xtype: 'button',
      text: 'Log in',
      handler: function(){
        // do stuff
      }
    },{
      width: 150,
      xtype: 'box',
      autoEl: {
        children: [{
          tag: 'span',
          cn: 'New? Register '
        },{
          tag: 'a',
          href: '#',
          cn: 'here'
        }]
      },
      listeners: {
        render: function(c){
          c.el.select('a').on('click', function(){
            // do stuff
          });
        }
      }
    }]
    Disclaimer: Completely untested code!

  5. #5
    Sencha Premium Member
    Join Date
    Nov 2010
    Posts
    12

    Default

    Condor, excellent! I've come a bit further in my Ext adventures so I finally resorted to a tbar which was exactly what I wanted.
    Sorry to have used your time.

Similar Threads

  1. How to write a login control using form,does it good for login?
    By hahaEr2003 in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 5 Jul 2010, 10:05 PM
  2. Login Example: Every submit fails on failed login
    By gerryw in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 13 Jul 2009, 1:00 AM
  3. Help: how to replace login form with menu after successful login
    By gkassyou in forum Ext 1.x: Help & Discussion
    Replies: 6
    Last Post: 6 Sep 2007, 11:14 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •