ExtJS 4.1.1: Custom display text for multi-select combobox

Question

I've got a multi-select combobox whose display value I need to set following the particular schema "Selections [x]", where x corresponds to the number of selected items. Unfortunately, after trying it using a number of different approaches I couldn't find a way to achieve the desired result. Using the fieldSubTpl config or overwriting the valueToRaw() method seem to be the most promising approaches to me. However, I couldn't get either of them to work.

I found a working example of the desired behaviour for ExtJS 6 here. If you select more than one value the combobox displays "x values selected" rather than simply concatenating the selected values.

How can I achieve the same result in ExtJS 4.1.1?

Answer 1

You need to use displayTpl config for combo.

In this FIDDLE, I have created same example in ExtJS 4.x as you provide in ExtJS 6.x. It is working fine. Hope this will guide you or help you to achieve your required solution.

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    title: 'Multiple Seletion Example in ExtJS 4.x for combo box',
    items: [{
        xtype: 'combo',
        margin: 20,
        fieldLabel: 'Character Name',
        store: Ext.create('Ext.data.Store', {
            fields: ['id', 'name'],
            data: [{
                id: 0,
                name: 'John Snow'
            }, {
                id: 1,
                name: 'Tyrion Lannister'
            }, {
                id: 2,
                name: 'Morgan Dexter'
            }, {
                id: 3,
                name: 'Lannister'
            }, {
                id: 4,
                name: 'Silicon Vally'
            }]
        }),
        displayField: 'name',
        /*
        If you use using this then initially you will see {0 values selected}
           displayTpl: new Ext.XTemplate('{[values instanceof Array ? values.length === 1 ? values[0]["' + combo.displayField + '"] : values.length + " values selected" : values]}'),
        */
        valueField: 'id',
        queryMode: 'local',
        multiSelect: true,
        filterPickList: true,
        listeners: {
            render: function (combo) {
                //Use propery {displayTpl}
                //The template to be used to display selected records inside the text field. An array of the selected records' data will be passed to the template.
                combo.displayTpl = new Ext.XTemplate('{[values instanceof Array ? values.length === 1 ? values[0]["' + combo.displayField + '"] : values.length + " values selected" : values]}');
                /*
                you can also use like below function
                combo.displayTpl = new Ext.XTemplate('{[this.getDisplayField(values)]}', {
                    getDisplayField: function (values) {
                        if (Ext.isArray(values)) {
                            var len = values.length;
                            return len == 1 ? values[0].name : (len + ' values selected');
                        }
                        return values;
                    }
                });*/
            }
        }
    }]
});