JavaScript
Ext.application({
name: 'Login Form',
launch: function(){
Ext.create('Ext.window.Window',{
layout:'fit',
title:'Login',
closable: false,
draggable: true,
resizable: false,
width: 425,
height:420,
//x:450,
//y:120,
plain: true,
border: false,
bbar: [{
xtype: 'tbtext',
text: ' 2013 - present. My Apps'
}],
items:[{
xtype:'form',
//bodyStyle: "background-image:url('login2.png')",
layout:'absolute',
height:400,
items:[{
xtype:'label',
text:'Username:',
labelWidth:10,
style: 'color: black; font-weight: bold; font-size: 11px',
x:42,
y:155
},{
xtype:'textfield',
name:'username',
emptyText:'type username here',
allowBlank:false,
width:330,
height: 30,
x:42,
y:170,
style: 'font-size: 20px'
},{
xtype:'label',
text:'Password:',
style: 'color: black; font-weight: bold; font-size: 11px',
labelWidth:10,
x:42,
y:222,
},{
xtype:'textfield',
inputType:'password',
name:'password',
emptyText:'type password here',
id:'password_id',
allowBlank:false,
width:330,
height: 30,
x:42,
y:235,
enableKeyEvents: true,
listeners: {
render: function() {
this.capsWarningTooltip = new Ext.ToolTip({
target: this.id,
anchor: 'top',
width: 305,
autoHide:true,
mustShow: false,
html: '<div class="ux-auth-warning">Caps Lock is On</div><br />',
listeners: {
beforeshow: function(){
return this.mustShow;
}
}
});
},
keypress: {
fn: function(field, e) {
var charCode = e.getCharCode();
if((e.shiftKey && charCode >= 97 && charCode <= 122) ||
(!e.shiftKey && charCode >= 65 && charCode <= 90)) {
...