javascript - 键入时如何在 Extjs 中使用多选和搜索

Question

我正在使用这个多选功能

http://docs-origin.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.ComboBox-cfg-multiSelect

它工作正常，我可以选择多个值。但是您键入时的搜索仅适用于第一个条目，它不适用于下一个条目

我想像我们在 Stackoverflow 问题中选择标签一样

Answer 1

原始 ComboBox 存在问题 - 它使选择与选择器上的值列表同步。要获得所描述的行为，您应该扩展它或找到另一个组件。

下面是一个示例扩展，它并不完美，但可以作为起点：

Ext.define('Ext.form.field.MultiComboBox', {
    extend: 'Ext.form.field.ComboBox',

    initComponent: function() {
        this.displayTpl = new Ext.XTemplate(
            '<tpl for=".">' +
            '<tpl if="xindex == xcount">{[typeof values === "string" ? values : values["' + this.displayField + '"]]}</tpl>' +
            '</tpl>'
        );
        this.tpl =  Ext.create('Ext.XTemplate',
            '<tpl for=".">',
                '<div class="x-boundlist-item x-boundlist-item-no-selection">{' + this.displayField + '}</div>',
            '</tpl>'
        );
        this.multiSelect = true;
        this.selection = [];

        this.callParent();
    },

    // when tag is added or removed, this sets size for table cell
    adjustSelectedWidth: function() {
        var me = this,
            cell = me.selectedCell,
            width = 0;

        cell.select('span.tag').each(function(el) {
            width += el.getWidth() + el.getMargin('lr');
        });
        cell.setWidth(width);
    },

    // creates table cell for tags, and attaches click handler
    afterRender: function(){
        var me = this;
        me.callParent(arguments);

        var triggerWrap = me.triggerWrap,
            tr = triggerWrap.down('tr');

        // create table cell
        me.selectedCell = tr.createChild({
            tag: 'td',
            cls: Ext.baseCSSPrefix + 'selected-cell'
        }, tr.child('td'));

        // attach click handler
        me.mon(me.selectedCell, {
            click: me.onSelectedCellClick,
            scope: me
        });

        me.addChildEls({ name: 'selectedCell', select: '.' + Ext.baseCSSPrefix + 'selected-cell' });
    },

    // handle click on list
    onItemClick: function(picker, record) {
        var me = this,
            cell = me.selectedCell,
            value = record.get(me.valueField),
            display = record.get(me.displayField);

        if (me.selection.indexOf(record) === -1) {
            // TODO: make template

            // store selection
            me.selection.push(record);

            // create element which displays tag
            me.selectedCell.createChild({
                tag: 'span',
                html: display + '<span class="remove-tag"></span>',
                cls: 'tag tag-' + value,
                recordValue: value
            });
        }      

        // adjust width
        me.adjustSelectedWidth();
    },

    onSelectedCellClick: function(event) {
        var me = this,
            targetEl = event.getTarget('.remove-tag', null),
            tagEl = targetEl.parentNode,
            match = tagEl && tagEl.className.match(/tag/);

        if (match) {
            tagEl = Ext.get(tagEl);
            var value = tagEl.getAttribute('recordValue');
            var index = -1;

            // remove value from selection
            me.selection = me.selection.filter(function(element, index, array) {
                return element.get(me.valueField) != value;
            }, me);

            // remove element which displays tag
            tagEl.remove();

            // adjust width
            me.adjustSelectedWidth();
        }
    },

    // return value based on selection stored in combo instead of selection model
    getValue: function() {
        var me = this,
            sel = me.selection,
            value = '';

        for (var i = 0; i < sel.length; ++i) {
            value += (i === 0 ? '' : me.delimiter) + sel[i].get(me.valueField);
        }
        return value;
    }
});


Ext.onReady(function() {

    Ext.define('Tag', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'name',  type: 'string'}
        ]
    });

    var data = {
        tags: [
            { name: '00' },{ name: '01' },{ name: '02' },{ name: '03' },{ name: '04' },{ name: '05' },{ name: '06' },{ name: '07' },{ name: '08' },{ name: '09' },
            { name: '10' },{ name: '11' },{ name: '12' },{ name: '13' },{ name: '14' },{ name: '15' },{ name: '16' },{ name: '17' },{ name: '18' },{ name: '19' },
            { name: '20' },{ name: '21' },{ name: '22' },{ name: '23' },{ name: '24' },{ name: '25' },{ name: '26' },{ name: '27' },{ name: '28' },{ name: '29' },
            { name: '30' },{ name: '31' },{ name: '32' },{ name: '33' },{ name: '34' },{ name: '35' },{ name: '36' },{ name: '37' },{ name: '38' },{ name: '39' }
        ]
    };

    //note how we set the 'root' in the reader to match the data structure above
    var store = Ext.create('Ext.data.Store', {
        autoLoad: true,
        model: 'Tag',
        data : data,
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'tags'
            }
        }
    });

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

        items: [
            Ext.create('Ext.form.field.MultiComboBox', {
                store: store,
                displayField: 'name',
                valueField: 'name',
                queryMode: 'local',

                width: 400
            })
        ]
    });

});

工作示例：http: //jsfiddle.net/f2JuX/16/