Set default value on select form field

[cyberwombat]

Given this:

xtype: 'selectfield',
			                    	name: 'gender',
                    				label: 'Gender',
                    				required: false,
                    				useClearIcon: true,
                    				options: [{
                    					text: 'Male',
                    					value: 'male'
                    				}, {
                    					text: 'Female',
                    					value: 'female'
                    				}]

How do I start with a blank value - If I add a blank option is shows in drop down.
Thanks!

[mitchellsimoens]

If you want text to be shown when there is no value, then placeHolder is the config you want to use. It's marked as deprecated but it will not be and that message will be removed on next release.

[cyberwombat]

Doesn't seem to work for selects.

This works:

{
    xtype: 'textfield',
    label: 'Phone Number',
    required: true,
    placeHolder: '9992222',
},

But this doesn't

{
    xtype: 'selectfield',
    name: 'gender',
    label: 'Gender',


    required: false,
    useClearIcon: true,
       placeHolder: 'Female',  //or any other value such as female, hello, blank
    options: [{
        text: 'Male',
        value: 'male'
    }, {
        text: 'Female',
        value: 'female'
    }]


},

[cyberwombat]

Evidently you have to trick it. It's a two step process. In the view setup a listener for the painted event:

Ext.define('MyApp.view.Register', {
    extend: 'Ext.Panel',
    xtype: 'register',
    initialize: function() {
        this.on({
            scope: this,
            painted: 'onPainted',
        });
    },
    onPainted: function() {
        Ext.getCmp('gender').setOptions([  //use id of select
            {text: 'Male',  value: 'male'},
            {text: 'Female', value: 'female'}
        ])
    },
  .....

And then in the select do NOT put options:

{
     xtype: 'selectfield',
     name: 'gender',
     label: 'Gender',
     id: 'gender',   //we need an id for the listener
     required: false,
     useClearIcon: true,
     placeHolder: ''   //this can be anything
},