PDA

View Full Version : LoginForm



SagarAw
30 May 2012, 7:18 AM
Hi,

Below is the code I am using for Login Form. I developed this with v2.2, but now trying to migrate to v3.4.



var loginPanel = new Ext.form.FormPanel({
id: 'loginPanel',
labelWidth: 75, // label settings here cascade unless overridden
frame: false,
border: false,
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {
width: 230
},
defaultType: 'textfield',
autoHeight: true,
items: [{
id: 'idxLogin',
fieldLabel: 'Login',
name: 'login',
allowBlank: false,
enableKeyEvents: true,
maxLength: 50,
listeners: {
'keypress': trackEnter
}
}, new Ext.form.TextField({
fieldLabel: 'Password',
name: 'password',
allowBlank: false,
inputType: 'password',
enableKeyEvents: true,
maxLength: 50,
listeners: {
'keypress': trackEnter
}
})
]
});

var loginForm = new Ext.Window({
layout : 'fit',
width : 350,
closable : false,
modal: true,
plain : true,
title: 'User Authentication',
items: loginPanel,
autoHeight: true,
buttons: [{
text: 'OK',
handler: doLogin
},{
text: 'Cancel',
handler: function() {
loginForm.hide();
}
}],
listeners: {
'activate': function() {
setTimeout(function() {
Ext.getCmp("idxLogin").focus();
}, 100);
}
}
});

However, when I try to display this form, it shows
http://www.sencha.com/forum/image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAV0AAABmCAIAAADnINU6AAAG0klEQVR4nO3d3U4bRxjGcd/TXsuesb4C+wawc5ISLoJCOMEmUtWDqme8GJxcQJSoCoQsHykSSytDqBMbl9KKHszs1zDrQHY3Bvv/k6XszM7OzOv1PrEiRCpBEARBICIicgNghqkcCIKgokLh7Ozs5ubmCMAMu7m5OTs7E5GK7/vqm8LvAGae+tZQEZGrq6tjADg+Pj4+vrq60rlwAgAnJycnJzoXRqNRAABBEATBaDSqiMhwOPzjgdt46rqu+3Rj0vsApt9wONS58GfSxg+u67o/bNhauanpvj5hsZtIXf92qea6bm3p7fe6HHhMdC4MBoNe0qZ6CjZtrbw2dSy4bu3H374+sKhN5Ly+2PcAeNAGg0FFRPr9/nlSZ8F1XXehc7uljvVzvfzO3vVuuaaOOwvxLIo+tbBQiydILhAdJmd13YWOatdqtdTattVtI+2zWUtSO7RNab08OTz1htzeKvBI9Pv9iohcXFx8StpSn/sto7Wjn/edeOTOci3q2VrQZ/U49WCEs8TD3dryTmqqxHL2w6hVW95JnrCubh2ZVVJi8KdPO8sLt2rT58Zebixg3wDwaFxcXFRERCVErPvMdV33WddovX9ej/5urD9/3++nerR4XHh9TJ2oP3+fOkwuZz/MOGFf/T6zpXtTu0wXeofLo0bmqsDjcH5+rnPhc1J30XVdd7FraamGstjd00/3Xupye2/62niO1AL2w4wT9nXuM1u619x7dzF9OP7yqJG5KvA46FxQ/9KQ8Ep9nl+ZxyF/ta761Enr2fqqb5s06laj4knqq35qsfS61hPW1e1TZMyW2pO/urj6S9yRLGPs5dZdWVYFHoder2fNhUH0zLmp56Z+q8/odeurfkYuGLGQDIb0FOGDlOhdfJX1sN1ePWNk1my3Co3a9XqijKzLk+vroeQCHrkxuQBgRpELAEzkAgATuQDARC4AMJELAEz2XHgDYMbcKRcm/QPaAL6ru+bCRH9dNYDvRD3v5AKAGLkAwEQuADCRCwBMuXLhp59/5TVNr4l8BPEA5c2FiWwaZeBuIkIuQONuIkIuQONuIkIuQONuIkIuQONuIkIuQONuIkIuQONuIkIuQONuIkIuQONuIkIuQONuIkIuQONuIkIuQONuIkIuQONuIkIuQONuIkIuQONuIkIuQONuIkIuQONuIkIuQONuIsLvceMVvybyEcQDxO99BWAiFwCYyAUAJnIBgIlcAGAiFwCYyAUAJnIBgIlcAGAiFwCYyAUAJnIBgOl+ufAGwGy4Ry4AmB1fzwUAs4xcAGAiFwCYyAUAJnIBgIlcAGAiFwCYyAUAJnIBmWQaUfJdkAuwE5HT09NJ/+R+wU5PT8c8JzNYchZyARbqCbm+vp70p7pg19fXWc/JDJY8BrkACxH5b3qtrKxQ8njkAixE5N/plZULk95XicgFFEBErqdXVi5Mel8lIhdQABH5Z3pl5cKk91UicgEFEJGrEn18UXW0Jy/jvuqLj7rx8knyVNGyciH3xHFdBe/944tq9UWeCcgFFEBE/i7L0XrVqa4fqUa36TjNru7WvXFfSbJyId+sybq6zbjEIhytV6vreSYgF1AAERmV5HDd89YP4/Z202lux/3bTUe1S5SVC7kmTdd1eLh9eKi79VcIVdXhutdsNpM9lkGj0XbTvMpbz7M7cgEFEJHLkmw3neZ2on3Q9rz2gfrT8xzH8doHZa2tZeVCrknNui4vL+Pi4tMHbU+Piy7YboY165PxVeGgg7bntfPsjlxAAURkWJKthtPYSrT3257X3h8O99ue47X39R9lrT4cDofDrFzINalZV2i/HX4XCMvU5SUKNwreajgJXntfjcmzO3IBBfi2H6q/E7/leS0/bncaTqOT7PdbnqO6ypKVC7kmNesaDAaDQacRltJpOF7LTw4Lj25fGL4lxuR5dkcuoAAi8qUsfstzvJavGurB0d2W3lJk5UK+WZN1dRqO47X8L52GriPsSJQZHanICK/zWn48k9/ynEZHj82zOXIBBRCRzyX6sDYXfkue34z75tY+hCM25x1nbq2k5bNyIffEm/NhWWEpYc/8/LyqNS4zUXD8foRvRzST6viwNpfv3SAXUICSc2HCSsuFh4tcQAFEpD+9snJh0vsqEbmAAojIX9MrKxcmva8SkQsogIhcTK+sXJj0vkpELqAAS0tL6veUTB8RsT4kM1jyGOQC7FZWVqbvORn/hMxgyVnIBWRamUaUfBfkAgATuQDARC4AMJELAEzkAgATuQDAFOcC0QBgMBioNKiIyN7ubg8Aer1er7e3u1sJguCb/ptcAFOrEgDf6vXr15PeAkrxP2StkCHw8CY3AAAAAElFTkSuQmCC35753

What am I doing wrong, as oppose to what is required to be done in v3.4 ?

Thanks!

sword-it
31 May 2012, 12:42 AM
Hi SagarAw,

Try this code it work well for me..


var loginPanel = new Ext.form.FormPanel({
id: 'loginPanel',
labelWidth: 75, // label settings here cascade unless overridden
frame: false,
border: false,
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {
width: 230
},
defaultType: 'textfield',
autoHeight: true,
items: [{
fieldLabel: 'Login',
name: 'login',
allowBlank: false,
enableKeyEvents: true,
maxLength: 50,
},
{
fieldLabel: 'Password',
name: 'password',
allowBlank: false,
inputType: 'password',
enableKeyEvents: true,
maxLength: 50,
}
]
});

var loginForm = new Ext.Window({
layout : 'fit',
width : 380,
closable : false,
modal: true,
plain : true,
title: 'User Authentication',
items: loginPanel,
autoHeight: true,
items:[loginPanel ],
buttons: [{
text: 'OK',
// handler: doLogin
},{
text: 'Cancel',
handler: function() {
loginForm.hide();
}
}],
listeners: {
'activate': function() {
setTimeout(function() {
Ext.getCmp("idxLogin").focus();
}, 100);
}
}
});