ExtJS 4.1.1：多 select 组合框的自定义显示文本

Question

我有一个多 select 组合框，我需要根据特定模式 "Selections [x]" 设置其显示值，其中 x 对应于 selected 项目的数量。不幸的是，在尝试使用多种不同的方法后，我找不到一种方法来达到预期的结果。使用 fieldSubTpl 配置或覆盖 valueToRaw() 方法对我来说似乎是最有前途的方法。但是，我无法让他们中的任何一个工作。

我找到了 ExtJS 6 所需行为的工作示例 here。如果您 select 多个值，组合框将显示 "x values selected" 而不是简单地连接 selected 值。

如何在 ExtJS 4.1.1 中实现相同的结果？

Answer 1

您需要使用 displayTpl config for combo.

在此 FIDDLE 中，我在 ExtJS 4.x 中创建了与您在 ExtJS 6.x。它工作正常。希望这会指导您或帮助您实现所需的解决方案。

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

ExtJS 4.1.1：多 select 组合框的自定义显示文本

ExtJS 4.1.1: Custom display text for multi-select combobox

javascript

combobox

extjs

multi-select

extjs4.1