Browser does not remember password during login

问题

An earlier question mentioned a method using the el config in order to make the browser remember passwords. Howewer, the el config no longer exists in ExtJS 4.1.

Now, what should I do?

回答1:

I believe it should be contentEl instead of el but I do this another way. You can build the entire thing with ExtJS directly. The only twist is that Ext fields will be created with the autocomplete=off attribute by default, so I use a derived class to override that.

Ext.define('ACField', {
    extend: 'Ext.form.field.Text',

    initComponent: function() {
        Ext.each(this.fieldSubTpl, function(oneTpl, idx, allItems) {
            if (Ext.isString(oneTpl)) {
                allItems[idx] = oneTpl.replace('autocomplete="off"', 'autocomplete="on"');
            }
        });
        this.callParent(arguments);
    }
});

Ext.onReady(function() {
    new Ext.panel.Panel({
        renderTo: Ext.getBody(),
        width: 300,
        height: 100,
        autoEl: {
            tag: 'form',
            action: 'login.php',
            method: 'post'
        },  
        items: [
            new ACField({
                xtype: 'textfield',
                name: 'username',
                fieldLabel: 'Username'
            }), 
            new ACField({
                xtype: 'textfield',
                name: 'password',
                fieldLabel: 'Password',
                inputType: 'password'
            }), 
        ],
        buttons: [{
            xtype: 'button',
            text: 'Log in',
            type: 'submit',
            preventDefault: false
        }]
    });
});

回答2:

The answer from lagnat was mostly correct, to get this also working on Chrome and Firefox the following is required:

1) Override default ExtJS Textfield behavior for autocomplete (copied from lagnat):

Ext.define('ACField', {
    extend: 'Ext.form.field.Text',

    initComponent: function() {
        Ext.each(this.fieldSubTpl, function(oneTpl, idx, allItems) {
            if (Ext.isString(oneTpl)) {
                allItems[idx] = oneTpl.replace('autocomplete="off"', 'autocomplete="on"');
            }
        });
        this.callParent(arguments);
    }
});

2) Make sure the textfields are within a <form> tag: (see answer from lagnat), since ExtJS 4 the <form> tag is no longer present in a FormPanel.

    autoEl: {
        tag: 'form',
        action: '/j_spring_security_check',
        method: 'post'
    },

3) Make sure there is a <form> present in the HTML, with the same <input> names:

            items:[
                Ext.create('ACField',{
                    fieldLabel: 'Username',
                    name:'j_username',
                    inputId: 'username',
                    allowBlank:false,
                    selectOnFocus:true
                }),
                Ext.create('ACField',{
                    fieldLabel:'Password',
                    name:'j_password',
                    inputId: 'password',
                    xtype:'textfield',
                    allowBlank:false,
                    inputType:'password'
                })
            ],

and within the HTML the regular form with same input names:

<body>
<div id="login-panel">
    <form id="loginForm" action="<c:url value="/j_spring_security_check"/>" method="post">
        <input class="x-hidden" type="text" id="username" name="j_username"/>
        <input class="x-hidden" type="password" id="password" name="j_password"/>
    </form>
</div>
<noscript>Please enable JavaScript</noscript>
</body>

With all these changes in place, saving username/password works in IE, Chrome and Firefox.

回答3:

There is the autoRender property which will allow you to apply the Extjs field to an already existing element on the page. So if you set up your basic form in html, the browser should recognize the fields for the form as login info, and then Extjs will overlay itself onto that form if you use the autoRender with a reference to the correct fields (and also the button on the form to a submit type button in your basic html form) it should work correctly. Also, keep in mind that the browser probably will not recognize an ajax call for logging in and you may need to use the basic form submission. I have a working example in my application, but I would have a hard time trying to pull out application specific code so have an example for here. Please comment if you need the example and I may be able to get back to you by monday.

回答4:

Answer by @Lagnat does not work for ExtJS 4.2.1 and 4.2.2. It might be due to removal of type config from button. What we need is standard submit button <input type="submit"> for the button. So I added it on the button with opacity: 0. Below is my working code (Tested working on Firefox 27, Chrome 33, Safari 5.1.7, IE 11. Autofill/Autosave password should be enabled for browser):

Ext.create('Ext.FormPanel', {
    width: 400,
    height: 500,
    padding: '45 0 0 25',
    autoEl: {
        tag: 'form',
        action: 'login.php',
        method: 'post'
    },
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Username',
        name: 'username',
        listeners: {
            afterrender: function() {
                this.inputEl.set({
                    'autocomplete': 'on'
                });
            }
        }
    }, {
        xtype: 'textfield',
        fieldLabel: 'Password',
        inputType: 'password',
        name: 'username',
        listeners: {
            afterrender: function() {
                this.inputEl.set({
                    'autocomplete': 'on'
                });
            }
        }
    }, {
        xtype: 'button',
        text: 'LOG IN',
        width: 100,
        height: 35,
        preventDefault: false,
        clickEvent: 'click',
        listeners: {
            afterrender: function() {
                this.el.createChild({
                    tag: 'input',
                    type: 'submit',
                    value: 'LOG IN',
                    style: 'width: 100px; height: 35px; position: relative; top: -31px; left: -4px; opacity: 0;'
                });
            }
        }
    }]
});