View Full Version : textfield placeholder

6 Apr 2012, 2:43 AM
How to put a placeholder property to an html text input?
I coudl do it via Firebug, but throught the js code, I have no idea, it's not css, since 'placeholder' is a property object of the input like 'name'

I would like to place it on a combobox

Thanks for any solution

6 Apr 2012, 2:53 AM
use "emptyText" config for Placeholder

6 Apr 2012, 4:43 AM
ok for combos, but not working for textfields thought, it's not a real placeholder because it affects the value of the field

8 Apr 2012, 7:26 PM
while using "emptyText" configure, use "submitEmptyText" set to false, then it will not submit the value when form submitted, hope this will solve your problem :)

9 Apr 2012, 3:23 AM
thx that works

27 Jan 2015, 8:01 PM
You can override the default field behaviour.

Try following code before initialization.

(function() {
// Add placeholder as override on DateFields
var init = Ext.form.DateField.prototype.initComponent;
Ext.form.DateField.prototype.initComponent = function() {
this.on('afterrender', function() {
var el = this.getEl();
if (el && this.placeholderText) {
el.set({'placeholder': this.placeholderText});

Then just add the placeholderText property when creating a DateField:

new Ext.form.DateField({placeholderText: 'dd/mm/yyyy'})

This worked for me in Sencha 3.4. Obviously the advantage of doing it this way is that you utilize the HTML5 placeholder attribute which allows for display of your greyed text even when the field is focused (before text is entered).