5

较早的一个问题提到了一种使用el配置的方法，以使浏览器记住密码。el但是， ExtJS 4.1 中不再存在该配置。

现在，我该怎么办？

4

5 回答 5

7

我相信它应该是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
        }]
    });
});
于 2012-08-20T11:06:50.300 回答
6

来自 lagnat 的答案大部分是正确的，要让它在 Chrome 和 Firefox 上也能正常工作，需要以下内容：

1) 为自动完成覆盖默认的 ExtJS 文本字段行为（从 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) 确保<form>HTML 中有一个存在，具有相同的<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 中使用。

于 2012-09-28T07:33:23.433 回答
1

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

于 2012-08-17T21:36:18.440 回答
0

@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;'
                });
            }
        }
    }]
});
于 2014-02-27T11:13:21.123 回答
-2

我推荐使用 ExtJS 的内置 Cookie 功能。

  • 您可以使用以下命令读取 cookie： readCookie('password);
  • 您可以使用以下方法创建 cookie： createCookie('password', "pass123", 30); // 保存 30 天

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

那有意义吗？

于 2012-08-15T16:12:43.677 回答