Forms 浏览器在登录时不记得密码
提到了一种使用Forms 浏览器在登录时不记得密码,forms,extjs,login,extjs4,extjs4.1,Forms,Extjs,Login,Extjs4,Extjs4.1,提到了一种使用elconfig使浏览器记住密码的方法。然而，extjs4.1中不再存在elconfig 现在，我该怎么办？我建议使用ExtJS的内置Cookie功能 您可以使用以下命令读取cookie:readCookie（'password'） 您可以使用以下命令创建cookie:createCookie（'password'，'pass123'，30）；//保存30天 然后，您可以使用基本业务逻辑使用存储的密码自动填充formField 这有意义吗？有一个autoRender属性，允许您
elel现在，我该怎么办？我建议使用ExtJS的内置Cookie功能
- 您可以使用以下命令读取cookie:readCookie（'password'）
- 您可以使用以下命令创建cookie:createCookie（'password'，'pass123'，30）；//保存30天
这有意义吗？有一个autoRender属性，允许您将Extjs字段应用于页面上已经存在的元素。因此，如果您在html中设置基本表单，浏览器应该将表单的字段识别为登录信息，然后Extjs将自身覆盖到该表单上，如果您使用autoRender并引用正确的字段（以及表单上的按钮到基本html表单中的submit type按钮），它应该可以正常工作。
另外，请记住，浏览器可能无法识别用于登录的ajax调用，您可能需要使用基本表单提交。我在我的应用程序中有一个工作示例，但我很难提取特定于应用程序的代码，所以这里有一个示例。如果您需要示例，请发表评论，我可能会在周一之前回复您。我认为应该是contentEl而不是el，但我是用另一种方式。您可以直接使用ExtJS构建整个过程。唯一的问题是，默认情况下，Ext字段将使用autocomplete=off属性创建，因此我使用派生类来覆盖它
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
}]
});
});
lagnat的回答基本上是正确的，要在Chrome和Firefox上实现这一点，需要以下几点： 1） 覆盖自动完成的默认ExtJS文本字段行为（从lagnat复制）： 2） 确保文本字段位于
autoEl: {
tag: 'form',
action: '/j_spring_security_check',
method: 'post'
},
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'
})
],
<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>
请启用JavaScript
所有这些更改就绪后，保存用户名/密码在IE、Chrome和Firefox中都可以使用。Answer by@Lagnat不适用于ExtJS 4.2.1和4.2.2。这可能是由于从按钮中删除了配置。我们需要的是按钮的标准提交按钮
opacity:0请不要在你的标题中加标签：我相信这个答案和我的答案的结合实际上是提问者可能需要的。我忘记了自动完成关闭的事情，现在我模糊地记得关于it@lagnat这在IE9中适用，但在Firefox和Chrome中不会提示保存密码。您是尝试使用ajax表单保存还是常规表单提交？@PaulSchroeder两者都有：首先是ajax提交来验证用户名和密码，然后一个常规的表单提交，如果检查出来的话。@JohnnyHK它正在为我的FF工作，但我发现Chrome也有同样的问题。我猜Chrome需要将标记放在页面上，而不是在准备好后生成，除了完全用ExtJS样式手工编写HTML之外，我看不到任何方法可以做到这一点。我急切地等待一个更好的解决方案，如果它存在的话。我希望看到你的例子。我尝试过lagnat的解决方案，但我无法在chrome和firefox上保存密码。是的。。。我记得有同样的问题。。。让我看看我能想出什么。显然，我们的登录仍然使用Ext 3.2.1，我们的应用程序中仍有一些地方显然仍然在旧版本上。Cookie存储不安全-密码存储在明文中，任何有权访问浏览器的人都可以轻松访问（除其他问题外）。请参阅原始链接问题中的已接受答案。为此，最好使用浏览器的内置功能。
<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>
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;'
});
}
}
}]
});