如何在组合列表中显示空格？

Question

当我 select 项目时，我的值中有很多空格的组合 - 显示空格。但是他们在列表中丢失了。见演示：

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

是否可以在组合列表中显示所有空格？

Answer 1

您可以使用自定义函数覆盖模板，它将 spaces 替换为 none 破坏 space - 。类似于：

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()
            }]
        });
    }
});

如何在组合列表中显示空格？

How to show whitespaces in combo list?

extjs