Ext.ux.Login.js

Ext.define("Ext.ux.Login", {
    extend: "Ext.Container",
    formWrap: true,
    loginButtonLabel: "Log In",
    title: "Login form",

    baseCls: Ext.baseCSSPrefix + 'wr-login',
    headerCls: Ext.baseCSSPrefix + 'wr-login-header-panel',
    innerCls: Ext.baseCSSPrefix + 'wr-login-inner-panel',
    errorCls: Ext.baseCSSPrefix + 'wr-login-message',

    headerGlyphIcon: false,
    buttonGlyphIcon: false,

    headerMessage: 'Доступ к запрашиваемому ресурсу разрешен только зарегистрированным пользователям.',
    errorTemplate: "<div class='{messageCls}'><tpl for='.'>{message}</tpl></div><span id='{closeToolId}' class='{closeToolCls}'></span>",

    submitMode: 'standard',

    loginFieldLabel: 'Username',
    loginFieldName: 'username',

    passwordFieldLabel: 'Password',
    passwordFieldName: 'password',

    loginFieldValue: null,
    passwordFieldValue: null,

    signInButtonScale: 'medium',

    _loginFieldCfg: {
        xtype: 'textfield',
        validateOnBlur: false,
        allowBlank: false
    },
    _passwordFieldCfg: {
        inputType: 'password',
        vtype: 'alphanum',
        allowBlank: false,
        validateOnBlur: false
    },
    _windowConfig: {
        width: 420,
        closable: false,
        resizable: false,
        draggable: true
    },

    csrfName: null,
    csrfToken: null,

    initComponent: function () {
        this.stylesheet = Ext.util.CSS.createStyleSheet("body { background : #EEE !important; }" +
        ("." + this.headerCls + " { background: #F5F5F5; border: 1px dotted #CCCCCC!important; font-size:12px; line-height:18px; font-weight:bold; }") +
        ("." + this.errorCls + " { text-align: left; padding: 5px; background: #FF9494; border-radius: 3px; color: white;}") +
        ("." + this.errorCls + " .close-tool { position: absolute; right: 15px; top: 15px; cursor: pointer;opacity:0.7;}") +
        ("." + this.errorCls + " .close-tool:hover {opacity:1;}"));
        this.loginDialog = new Ext.Window(Ext.apply({
            title: this.title,
            glyph: this.headerGlyphIcon,
            border: false,
            items: [
                this.errorPanel = new Ext.Container({
                    padding: 10,
                    margin: 10,
                    border: false,
                    hidden: true,
                    listeners: {
                        show: function () {
                            var closeTool = Ext.get(this.id + "-close-tool");
                            if (closeTool) {
                                closeTool.on('click', function () { this.errorPanel.hide(true); }, this, {single: true});
                            }
                        },
                        scope: this
                    },
                    tpl: this.errorTemplate
                }), this.headerPanel = new Ext.Container({
                    padding: 10,
                    margin: 10,
                    border: false,
                    html: this.headerMessage
                }), this.innerPanel = new Ext.form.Panel({
                    autoEl: this.formWrap ? {tag: 'form'} : null,
                    border: false,
                    padding: 10,
                    height: '100%',
                    layout: 'vbox'
                })
            ],
            buttons: [
                this.signInButton = new Ext.Button({
                    text: this.loginButtonLabel,
                    scale: this.signInButtonScale,
                    glyph: this.buttonGlyphIcon,
                    handler: this.submit,
                    scope: this
                })
            ]
        }, this._windowConfig));
        Ext.apply(this, {
            items: [this.loginDialog]
        });

        this.initializeFields();

        this.passwordField = this.createField(Ext.apply({
            fieldLabel: this.passwordFieldLabel,
            value: this.passwordFieldValue,
            enableKeyEvents: true,
            listeners: {
                specialkey: function (f, e) {
                    if (e.getKey() === e.ENTER) {
                        return this.submit();
                    }
                },
                scope: this
            },
            name: this.passwordFieldName
        }, this._passwordFieldCfg));

        if (this.csrfName && this.csrfToken) {
            this.createField({
                name: this.csrfName,
                value: this.csrfToken,
                inputType: 'hidden',
                hidden: true
            });
        }

        this.headerPanel.addCls(this.headerCls);
        this.innerPanel.addCls(this.innerCls);
        this.errorPanel.addCls(this.errorCls);

        this.form = this.innerPanel.getForm();

        Ext.EventManager.onWindowResize(function(x, y, w){ w.center() } , this, this.loginDialog);

        return this.callParent(arguments);
    },
    /**
     * May overridden
     * @protected
     */
    initializeFields: function(){
        this.loginField = this.createField(Ext.apply({
            fieldLabel: this.loginFieldLabel,
            value: this.loginFieldValue,
            name: this.loginFieldName
        }, this._loginFieldCfg));
    },
    createField: function (o) {
        var config = Ext.apply({ width: '100%', margin: 10 }, o);

        if(!config.xtype){
            config.xtype = 'textfield';
        }

        return this.innerPanel.add(config);
    },
    updateMessage: function () {
        if (!Ext.isEmpty(this.errorMessage)) {
            this.errorPanel.update({
                message: this.errorMessage,
                messageCls: 'error-message',
                closeToolId: "" + this.id + "-close-tool",
                closeToolCls: 'close-tool fa fa-times-circle'
            });
            return this.errorPanel.show();
        }
    },
    submit: function () {
        if (this.form.isValid()) {
            if (this.fireEvent('submit', this, this.form.getValues())) {
                this.form.standardSubmit = this.submitMode;
                if (this.form.standardSubmit) {
                    this.form.url = this.url;
                }
                return this.form.submit({
                    url: this.url,
                    method: this.method,
                    waitMsg: this.waitMessage,
                    success: this.onSuccess,
                    failure: this.onFailure,
                    scope: this
                });
            }
        }
    },
    onSuccess: function () {
        return console.log("success");
    },
    onFailure: function () {
        return console.log("failure");
    },
    show: function () {
        this.loginDialog.show().center();
        this.updateMessage();

        if(this.innerPanel.items.first()){
           Ext.defer(function(){ this.focus(); }, 100, this.innerPanel.items.first());
        }
    }
});