PDA

View Full Version : How to allow browser to "remember" textfield values?



justinzane
13 May 2012, 11:33 AM
Most browsers have a convience feature that "remembers" the last value(s) entered into a textfield. I've noticed that the Extjs 4 xtype: 'textfield' field I've been using do not trigger this browser feature. How can I enable/disable this browser convenience, especially for FF and Chrome, programatically?

scottmartin
14 May 2012, 8:31 AM
You will need to use a combo and simply hide the trigger ... something like:
http://dev.sencha.com/deploy/ext-4.0.0/examples/form/forum-search.html

Regards,
Scott.

justinzane
14 May 2012, 8:56 AM
No, perhaps I wasn't clear. I'm not concerned with "auto-suggest" type behavior like the example you showed. I'm talking about the browser's ability to store and later recall what the user types into <input type='text'...> fields.

For example, go to craigslist.org and type "developer" into the search box. Later, whether after a simple back navigation or after weeks, when you revisit that box and start typing "d", the browser, NOT the site, will suggest "developer" from your form history.

With Ext JS 4 xtype:"textfield" fields, this does not happen. Why?

scottmartin
14 May 2012, 10:27 AM
This is the same premise of what I mentioned, except that you would have to store the entries in a cookie and recall them in a dropdown list.

Instead of loading suggested data from a server, you would load past entries from the cookie.

Regards,
Scott.

justinzane
14 May 2012, 10:48 AM
Scott, thank you for your quick replies. You are, however, missing the point of my query. I, the ExtJS dev, do not want my SCRIPTS TO DO ANYTHING to recall values. My observation is that something in the way Ext wraps or styles <input....> fields is interfering with the way that the browser interacts with plain HTML <input name="foo" /> fields. I am trying to determine how to change a parameter on the xtype: "textfield" object OR on the various .sass settings related to textfields and forms so that the basic HTML browser behavior of storing a history of field entries will continue to occur.

In short, I want to know how to STOP extjs from changing the basic html form <-> browser interaction.

scottmartin
14 May 2012, 11:10 AM
I understand.

Since these are custom controls, you will have to provide this feature yourself. If there is a way to override this and provide the action you are looking for, as a default browser behavior, I am not aware of how to do this.

Scott.

justinzane
14 May 2012, 12:06 PM
Thanks. When I feel particularly ambitious, I'll take firebug and go through all the parent classes and CSS/SASS and see which particular element is changing the browser behavior. It is not critical, but I have learned to like that browser feature and I'm sure many users have as well.

nickelstar5
5 Sep 2012, 11:46 AM
I was able to accomplish browser completion by using the inputAttrTpl config item on the textfield. Here's a sample login form that uses that idea to turn the input field's autocomplete attribute to "on":


{
"xtype": "form",
"height": 135,
"width": 400,
"defaults": {
labelWidth: 75
},
"bodyCls": "my-pnl",
"bodyPadding": 20,
"title": "Enter Your Account Credentials",
"standardSubmit": true,
"url": "/site/login",
"items": [
{
"xtype": "textfield",
"anchor": "100%",
"inputId": "username",
"inputAttrTpl": [
"autocomplete=\"on\""
],
"name": "username",
"fieldLabel": "User Name",
"enableKeyEvents": true
},
{
"xtype": "textfield",
"anchor": "100%",
"inputId": "password",
"inputAttrTpl": [
"autocomplete=\"on\""
],
"inputType": "password",
"name": "password",
"fieldLabel": "Password",
"enableKeyEvents": true
},
{
"xtype": "button",
"iconCls": "icon-arrow-right",
"text": "Log In"
}
]
}

justinzane
6 Sep 2012, 3:54 PM
Works well for the plain text fields for me. Does not trigger the "Do you want to save this password?" browser query on the password field.

Thanks, though.

blagerweij
29 Sep 2012, 11:07 AM
1) Override default ExtJS Textfield behavior for autocomplete (copied from 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) Make sure the textfields are within a <form> tag: (see answer from lagnat), since ExtJS 4 the<form> tag is no longer present in a FormPanel.


autoEl: {
tag: 'form',
action: '/j_spring_security_check',
method: 'post'
},
3) Make sure there is a <form> present in the HTML, with the same <input> names:


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'
})
],
and within the HTML the regular form with same input names:


<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>
With all these changes in place, saving username/password works in IE, Chrome and Firefox.

Barry

ettavolt
1 Oct 2012, 2:24 AM
For passwords one may also trigger <form> submit (from js), and then prevent submit event.
Also, I think it's better to change form.Panel renderTpl and replace body <div>, not the container one, with <form>.