How to set hidden window property before the component is loaded? - authentication

Question

In my application, I have a log in window with two textfields (email and password) and submit button that submits those values to the server:
doLogin: function() {
var me = this,
form = me.lookupReference('form');
me.getView().mask('Authenticating... Please wait...');
form.submit({
clientValidation: true,
url: 'login.php',
scope: me,
success: 'onLoginSuccess',
failure: 'onLoginFailure'
});
},
I would like have an option ‘remember me on this device’ in login window, so the user doesn’t need to input credentials every time. My idea was to use cookies to store values for email and password.
So, I added a checkbox in login form, and upon successful log in, if checkbox is checked, I save email in cookie:
Ext.util.Cookies.set('MyApplication', user_email);
And the same I do for the password. Those cookies can be cleared on logout. At the very beginning of the application I can read those cookies
Ext.util.Cookies.get('MyApplication');
That could be done at the very beginning or for example on ‘beforerenderer’ event of login window.
But now comes the part when I should skip appearance of login window if the user selected that option. Actually, I don’t want to skip that window at all – I would just like to hide it and to maintain its actions.
So, is it possible at some place to add something like
if (Ext.util.Cookies.get('MyApplication')){
// 1. hide the login window so it won't appear at all
// 2. Set value of email and password textfields to stored values
// 3. Submit such hidden form to the server
}

Answer 1

You can set hidden in beforerender event and submit the form, in this case user will not see it (it will be rendered in hidden mode):
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,
// The form will submit an AJAX request to this URL when submitted
url: 'save-form.php',
// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'Email',
name: 'email',
value: Ext.util.Cookies.get('email'),
allowBlank: false
}, {
fieldLabel: 'password',
name: 'password',
allowBlank: false,
inputType: 'password',
value: Ext.util.Cookies.get('password')
}],
// Reset and Submit buttons
buttons: [{
text: 'Reset',
handler: function () {
this.up('form').getForm().reset();
}
}, {
text: 'Submit',
formBind: true, //only enabled once the form is valid
disabled: true,
handler: function () {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function (form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function (form, action) {
Ext.Msg.alert('Failed', action.result.msg);
}
});
}
}
}],
listeners: {
beforerender: function(loginWindow) {
if(Ext.util.Cookies.get('email') && Ext.util.Cookies.get('password')) {
console.log('Hidden');
loginWindow.setHidden(true);
loginWindow.getForm().submit();
}
}
},
renderTo: Ext.getBody()
});
}
});