My basic Login Form
The line: bodyStyle: 'padding:5px;background-image:url(graphic/graph.jpg);' does what you are asking.
Code:
function openLogonWindow() {
var txt_User = new Ext.form.TextField({
name: 'Username',
fieldLabel: 'User name',
width: 175,
allowBlank: false
});
var txt_Password = new Ext.form.TextField({
name: 'Password',
fieldLabel: 'Password',
inputType: 'password',
width: 175,
allowBlank: false
});
var btn_Logon = new Ext.Button({
text: 'Logon',
handler: function() {
form.getForm().submit({
waitMsg: 'Validating credentials...',
success: function() {
//Do What Ever
},
failure: function() {
//Do What Ever
}
});
}
});
var btn_Cancel = new Ext.Button({
text: 'Cancel',
disabled: false,
handler: function() {
window.close();
});
var form = new Ext.form.FormPanel({
baseCls: 'x-plain',
labelWidth: 300,
labelAlign: 'top',
title: 'Enter your Credentials',
items: [txt_User, txt_Password],
buttons: [btn_Logon, btn_Cancel],
keys: [{ key: [10, 13], fn: function() {
btn_Logon.focus();
btn_Logon.fireEvent("click", btn_Logon);}
}]
});
var window = new Ext.Window({
width: 200,
height: 190,
layout: 'fit',
plain: false,
resizable: false,
modal: true,
draggable: false,
closable: true,
bodyStyle: 'padding:5px;background-image:url(graphic/graph.jpg);',
items: form
});
window.on('show', function() { txt_User.focus(); }, null, { delay: 1000 });
window.show();
}