View Full Version : Autocomplete for TextFields

17 Aug 2009, 6:09 AM

we use a ExtJS login form in TYPO3 if login timeout is reached. The annoying for many is that browser doesn't prefill the fields like in a normal form (if you saved the password in your Browser)
One thing is the autocomplete=off which can be changed with

autoCreate: {tag: 'input', type: 'text', size: '20', autocomplete: 'on'}

But password field never is prefilled by browser. I'm not sure which infos eg Firefox use to identify, but i think the name-field is used instead of id. But there i see no chance to set the name field in a form, source code doesn't use any config there.

How can i override this, and does it help with Browser saved passwords?

17 Aug 2009, 6:32 AM
Pre-filling from AutoComplete only works for <input> elements that exist in the markup and are not created by javascript.

You can find an example here (http://extjs.com/forum/showthread.php?p=368680#post368680).

17 Aug 2009, 6:40 AM
Hi Condor,

i tested with above, and autocomplete works as expected, even without existing markup.
But true, i try with the Cookie Provider, but isn't the name property needed for this?

17 Aug 2009, 6:56 AM
I don't get the Cookie Provider reference...

You were asking about a prefilled password field, and my example would do that.

17 Aug 2009, 7:03 AM

i don't know how the Browser password-reminder works, because that i ask for.
I have no chance (for now as i see) to use HTML markup as the login is used in any position in BE when login expires.

This is the code i use atm:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

login = new Ext.FormPanel({
url: "ajax.php",
formId: "loginform",
title: TYPO3.LLL.core.refresh_login_title,
defaultType: "textfield",
width: "100%",
bodyStyle: "padding: 5px 5px 3px 5px; border-width: 0; margin-bottom: 7px;",

items: [{
xtype: "panel",
bodyStyle: "margin-bottom: 7px; border: none;",
html: TYPO3.LLL.core.login_expired
fieldLabel: TYPO3.LLL.core.refresh_login_username,
name: "username",
id: "login_username",
allowBlank: false,
width: 250,
autoCreate: {tag: 'input', type: 'text', size: '20', autocomplete: 'on'}
fieldLabel: TYPO3.LLL.core.refresh_login_password,
name: "p_field",
width: 250,
allowBlank: false,
id: "password",
inputType: "password",
autoCreate: {tag: 'input', type: 'text', size: '20', autocomplete: 'on'}
xtype: "hidden",
name: "userident",
id: "userident",
value: ""
}, {
xtype: "hidden",
name: "challenge",
id: "challenge",
value: TYPO3.configuration.challenge
key: Ext.EventObject.ENTER,
fn: submitForm,
scope: this
buttons: [{
text: TYPO3.LLL.core.refresh_login_button,
formBind: true,
handler: submitForm
}, {
text: TYPO3.LLL.core.refresh_logout_button,
formBind: true,
handler: function() {
top.location.href = TYPO3.configuration.siteUrl + TYPO3.configuration.TYPO3_mainDir;

in the normal login form the passwordfield gets filled with stored information when field gets focussed.

17 Aug 2009, 12:03 PM
now i think it's not possible, i tried all ways also changing the markup in Firebug. Password field never match the password manager.

27 Jan 2014, 8:49 PM
Here is a related discussion for ExtJS 4.