Results 1 to 5 of 5

Thread: Login bar

  1. #1
    Sencha Premium Member
    Join Date
    Nov 2010
    Posts
    12
    Vote Rating
    3
      0  

    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
    Vote Rating
    0
      0  

    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
    Vote Rating
    3
      0  

    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,246
    Vote Rating
    133
      0  

    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
    Vote Rating
    3
      0  

    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
  •