PDA

View Full Version : How to enable the autocomplete feature of the textfield's underlying input element?



mx_starter
19 Apr 2013, 4:31 AM
Hello,
the standard html form fields have the very useful autocomplete feature which can save a lot of boring work, especially when you test a large form which requires input in the text fields.

Well, as we know, ExtJS produces its 'textfield' components with underlying input elements with the autocomplete="off" by default (it is unclear to me why).

Well - how to turn this back on?

In fact,

myTextFieldComponent.inputEl.set( {autocomplete: 'on'} ) ;
changes the attribute to on, but there is noautocomplete text appearing.

Moreover, is it possible this to be turned on globally like this:


Ext.override('Ext.form.field.Text', {

initComponent: function(){
this.callParent(arguments);
this.inputEl.set({autocomplete: 'on'});
}
});

i have no results with that...

slemmon
20 Apr 2013, 10:51 PM
inputEl.set(.... seems to be the right way to go. Make sure you set a name field on the field as well.

As for a global override you might extend textfield and do the inputEl.set() in the textfield's afterRender() method.

mx_starter
22 Apr 2013, 6:23 AM
inputEl.set(.... seems to be the right way to go. Make sure you set a name field on the field as well.

Did you tested this?

Attached is a snapshot from the firebug inspecting my text field.
You can see there is a name, as well as id for the field, but still no effect.
(the autocomplete attribute is set via an 'afterrender' listener)
43279



As for a global override you might extend textfield and do the inputEl.set() in the textfield's afterRender() method.

You mean, like this ?:


Ext.override('Ext.form.field.Text', {
afterrender: function(){
this.callParent(arguments);
this.inputEl.set({autocomplete: 'on'}); }
});

slemmon
23 Apr 2013, 10:44 PM
I did not test it. The fieldSubTpl has the autocomplete attribute set there. So, you could override Ext-form-field-Base's fieldSubTpl in a defined/overridden class or you could use afterrender.

mx_starter
23 Apr 2013, 11:54 PM
I did not test it. The fieldSubTpl has the autocomplete attribute set there. So, you could override Ext-form-field-Base's fieldSubTpl in a defined/overridden class or you could use afterrender.

Not sure if i understood you correctly.
My question was if the above Ext.override code is correct and will make so that every one instantiated form field with xtype: 'textfield' will have its input element with autocomplete="on".

slemmon
24 Apr 2013, 9:13 AM
It appears your override would work, yes.

mx_starter
14 Oct 2014, 11:18 PM
Need to refresh this thread again - my 'autocomplete'-set fields still does not work as expected.

I noticed, that the ExtJS form panels do not actually create any <form> tags.

Could this be a reason for this behaviour?

And the other question - according to the standard, the 'autocomplete' attribute of the <input> elements is ON by default. The fact they appear as OFF in the Ext forms mean that the attribute is intentionaly turned off by the framework - why?

Cheers, guys.

mx_starter
14 Oct 2014, 11:37 PM
UPDATE:
The lack of the <form> tag is not the reason for this behaviour.

For example, this simple code is working without any problems:



<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>


<body>
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
</body>
</html>


So, the cat is not in this hole :-?

mx_starter
15 Oct 2014, 12:58 AM
UPDATE #2:
Digging within the issue - i simply replaced all occurences of the autocomplete="off" with autocomplete="on" within my ext-all-debug.js.

All my fields are rendered with autocomplete=on and still no efect???
Wth is going on here?
Browsers tested are Chrome 38.0.2125.101, Firefox 32.03.3, IE 11 - all on Windows 7 Pro/x64.

Started to thing this could be a Windows related issue, but the efect is the same with 2 different computers...

mx_starter
15 Oct 2014, 1:55 AM
UPDATE #3:

just to illustrate this - i created a fiddle.
It consist of a simple override (which adds an afterrender listener to the Ext.form.field.Base). The listener itself sets the autocomplete attribute to ON if the field is instantiated with the enableAutoComplete config option.
Included is a simple form panel.

If you inspect the input field, you should see the autocomplete turned on, but with no effect of the completion.

Here it is:
br5


Any comments?

mx_starter
15 Oct 2014, 11:39 PM
Still no ideas?
Is that so complicated issue?

mx_starter
4 Dec 2014, 5:18 AM
A ping 2 months later....