如何在加载组件之前设置隐藏的 window 属性？

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()
        });
    }
});