PDA

View Full Version : Login form with tool-/statusbar



jite
9 Mar 2011, 2:01 AM
Does anyone have a example of a loginform with a status-/toolbar?
I've only found examples from ExtJS 2.x.

emils
9 Mar 2011, 2:20 AM
I'm not sure whether it is possible to put your form in statusbar. Rather try to put fields only and submit them with an Ajax request.

fay
9 Mar 2011, 3:29 AM
What 2.x example did you find? It should be very straight-forward to update a login form for 3.x...

jite
9 Mar 2011, 4:09 AM
I've solved the problem by myself:


var statusbar = new Ext.Toolbar({
items: [
{
xtype: 'tbspacer',
width: 5
},
{
xtype: 'tbtext',
text: 'Ready!',
id: 'message'
}
]
});


var form = Ext.create('Ext.form.FormPanel', {
url:'php/user.php',
frame:true,
title: 'Login',
bodyStyle:'padding:5px 5px 0;',
region: 'center',
preventHeader: true,
border: 0,

fieldDefaults: {
msgTarget: 'side',
labelWidth: 60
},
defaultType: 'textfield',
defaults: {
anchor: '100%'
},

items: [{
fieldLabel: 'Username',
name: 'username',
allowBlank:false
},{
fieldLabel: 'Password',
inputType:'password',
name: 'password',
allowBlank:false
}],

buttons:[{
text:'Login',
formBind: true,

handler:function(){
login_form.getForm().submit({
url: 'php/user.php',
params: { action: 'auth_user' },
success: function(){ window.location.reload(); },
failure: function(){
//alert("Failed!"); login.getForm().reset();
Ext.getCmp('message').setText('Auth failed!');
}
});
}
}]
});


var panel = new Ext.Panel({
renderTo: Ext.getBody(),
title: 'Login',
width: 400,
bbar: statusbar,
items: [form]
})

Is there a way to change the color of the tbtext inside the JS script?
I've tried this, but it doesn't work:


var statusbar = new Ext.Toolbar({
items: [
{
xtype: 'tbspacer',
width: 5
},
{
xtype: 'tbtext',
text: 'Ready!',
id: 'message',
color: '#CC0000'
}
]
});

emils
9 Mar 2011, 4:31 AM
style: 'color: #CC0000;'

jite
9 Mar 2011, 4:36 AM
Nope. Doesn't work. :(