PDA

View Full Version : Login bar



Moinois
20 Nov 2010, 2:54 PM
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!

griffiti93
20 Nov 2010, 9:02 PM
"FormLayout is responsible for rendering the labels of Fields."
FormLayout (http://dev.sencha.com/deploy/dev/docs/?class=Ext.layout.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

Moinois
21 Nov 2010, 12:16 PM
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! :)

Condor
22 Nov 2010, 1:58 AM
So you want something like:

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!

Moinois
7 Dec 2010, 2:53 PM
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.