How to show whitespaces in combo list?

I have combo with lots of whitespaces in values, when I select item - whitespaces are displaying. However they are missing in list. See demo:

https://fiddle.sencha.com/#view/editor&fiddle/3i1v

Is it possible to show ALL whitespaces in combo list?

Solution 1:

You can override template with custom function which will replace spaces with none breaking space - &nbsp. Something like:

var states = Ext.create('Ext.data.Store', {
    fields: ['name'],
    data: [

        {
            "name": "Alabama        3"
        }, {
            "name": "Alaska   11"
        }
    ]
});

Ext.application({

    name: 'MyApp',
    launch: function () {

        Ext.create('Ext.form.Panel', {

            items: [{
                xtype: 'combo',
                fieldLabel: 'Choose State',
                store: states,
                displayField: 'name',
                tpl: Ext.create('Ext.XTemplate',
                    '<ul class="x-list-plain"><tpl for=".">',
                        '<li role="option" class="x-boundlist-item">{[this.replaceSpacesWithNbsp(values.name)]}</li>',
                    '</tpl></ul>',
                    {
                        replaceSpacesWithNbsp: function(name){
                           return name.replaceAll(' ', '&nbsp');
                        },
                    }
                ),
                renderTo: Ext.getBody()
            }]
        });
    }
});