Dynamically change the search options in Ext JS 5.

问题:

Im attempting to alter the search options in a Ext.view.MultiSelector component based on a drop down selection, however whatever I try to do to update the search options is not reflected in the UI. Below is a basic example of what I'm trying to do.

I'm not sure if there is a function I'm not calling, or if the search options are just never re-loaded from the store once the element is drawn to the canvas?

this.multiSelectorObj =  Ext.create('Ext.view.MultiSelector', {
            valueField: 'id',
            displayField: 'name',
            showDefaultSearch: true,
            plusButtonType: 'add',
            hideHeaders: true,
            colspan: 2,
            search: {
                xtype: 'multiselector-search',
                store: {
                    type: 'store',
                    fields: ['id', 'name'],
                    autoload: true,
                    data: [{ id: 1, name: 'Option 1 -- I want to change this' }] 
                }
            },
            showRemoveButton: true,
            columns: [{
                text: "Name",
                dataIndex: "name",
                flex: 1
            }]
        }
    );


Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    items: [
        {xtype: 'combobox',
            fieldLabel: 'Choose State',
            store: {
                fields: [ 'id', 'name' ],
                data: [
                    { id: 1, name: 'Set 1' },
                    { id: 2, name: 'Set 2' }
                ]
            },
            queryMode: 'local',
            displayField: 'name',
            valueField: 'id',
            listeners: {
                scope: this,
                'change': function(scope, newVal, oldVal, eOpts) {
                    //Attempting now to have a different set of options to choose from in the
                    //MultiSelector 
                    //But nothing seems to work
                    var search = this.multiSelectorObj.getSearch();
                    search.data = [{id: 1, name: 'Option Data Set 2'}]
                    this.multiSelectorObj.setSearch(search);

                //Nor does setting a new search store like this
                this.multiSelectorObj.getSearch().store = Ext.create('Ext.data.Store', {
                     data:[{id:1, name:'New Opt'}],
                     fields: ['id', 'name'],
                     autoLoad: true
                 });

            }
        },
    },

//MULTISELECTOR
this.multiSelectorObj
]

});

回答1:

For this you need to use select on ComboBox. Inside of select event you need to get multiselector-search grid's store and you can use loadData of that store.

In this FIDDLE, I have created a demo using formpanel, multiselector and Combobox. I hope this will help/guide you to achieve you requirement.

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.create('Ext.form.Panel', {
            bodyPadding: 10,
            title: 'Dynamically change the search options in Ext JS 5.1.3 MultiSelector',
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'multiselector',
                valueField: 'id',
                displayField: 'name',
                showDefaultSearch: true,
                plusButtonType: 'add',
                hideHeaders: true,
                colspan: 2,
                search: {
                    xtype: 'multiselector-search',
                    store: {
                        type: 'store',
                        fields: ['id', 'name'],
                        autoload: true,
                        data: [{
                            id: 1,
                            name: 'Option 1 -- I want to change this'
                        }]
                    }
                },
                showRemoveButton: true,
                columns: [{
                    text: "Name",
                    dataIndex: "name",
                    flex: 1
                }]
            }],
            tbar: ['->', {
                xtype: 'combobox',
                fieldLabel: 'Choose Data',
                store: {
                    fields: ['id', 'name', 'data'],
                    data: [{
                        id: 1,
                        name: 'Set 1',
                        data: [{
                            id: 1,
                            name: 'Option1 Data Set 1'
                        }, {
                            id: 2,
                            name: 'Option2 Data Set 1'
                        }]
                    }, {
                        id: 2,
                        name: 'Set 2',
                        data: [{
                            id: 1,
                            name: 'Option1 Data Set 2'
                        }, {
                            id: 2,
                            name: 'Option2 Data Set 2'
                        }]
                    }]
                },
                queryMode: 'local',
                displayField: 'name',
                valueField: 'id',
                listeners: {
                    select: function (combo, rec) {
                        var form = combo.up('form'),
                            store = form.down('multiselector grid').getStore(),
                            mltiSGrid = form.down('multiselector-search grid');

                        store.removeAll(); //Remove data from seleted data in grid
                        mltiSGrid.getSelectionModel().deselectAll(); //Deselect seleted record from search grid
                        mltiSGrid.getStore().loadData(rec.get('data'))

                    }
                }
            }],
            listeners: {
                afterrender: function (form) {
                    var plus = form.down('multiselector').tools[0];
                    //Fire click event of plus button for creating search view
                    plus.el.dom.click();
                    //Hide the multiselector-search
                    form.down('multiselector-search').hide();
                }
            }
        });
    }
});