Question

earlier question提到了使用el配置的方法，以使浏览器记住密码。但是，ExtJS 4.1中不再存在el配置。

现在，我该怎么办？

Answer 1

我认为它应该是 contentEl 而不是 el ，但我这样做是另一种方式。你可以直接用ExtJS构建整个东西。唯一的变化是默认情况下将使用 autocomplete = off 属性创建Ext字段，因此我使用派生类来覆盖它。

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

Answer 2

lagnat的回答大多是正确的，为了让这个也适用于Chrome和Firefox，需要以下内容：

1）覆盖自动完成的默认ExtJS Textfield行为（从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）确保文本字段位于<form>标记内:(请参阅lagnat的回答），因为ExtJS 4，<form>标记不再出现在FormPanel中。

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

3）确保HTML中存在<form>，且名称相同<input>：

            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'
                })
            ],

并在HTML中使用具有相同输入名称的常规表单：

<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>

完成所有这些更改后，保存用户名/密码即可在IE，Chrome和Firefox中使用。

Answer 3

autoRender属性允许您将Extjs字段应用于页面上现有的元素。因此，如果您在html中设置基本表单，浏览器应该将表单的字段识别为登录信息，然后如果您使用autoRender并引用正确的字段（以及按钮），Extjs将自己覆盖到该表单上在表单上的基本html表单中的提交类型按钮）它应该正常工作。此外，请记住，浏览器可能无法识别登录的ajax调用，您可能需要使用基本表单提交。我在我的应用程序中有一个工作示例，但我会很难尝试提取特定于应用程序的代码，因此请在此处提供示例。如果你需要这个例子，请发表评论，我可以在星期一之前回复你。

Answer 4

@Lagnat的回答不适用于ExtJS 4.2.1和4.2.2。这可能是由于从按钮中删除了type配置。我们需要的是按钮的标准提交按钮<input type="submit">。所以我在opacity: 0的按钮上添加了它。以下是我的工作代码（已在Firefox 27，Chrome 33，Safari 5.1.7，IE 11上进行测试。应为浏览器启用自动填充/自动保存密码）：

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;'
                });
            }
        }
    }]
});

Answer 5

我建议使用ExtJS的内置Cookie功能。

您可以使用以下方式阅读Cookie：readCookie（'password）;
您可以使用以下命令创建Cookie：createCookie（'password'，“pass123”，30）; //保存30天

然后，您可以使用基本业务逻辑使用存储的密码自动填充formField。

这有意义吗？

浏览器在登录期间不记得密码

5 个答案: