javascriptextjsextjs6.5

How to read values from multiselector component


I am trying to use multiselector from EXTJS 6.5.2

This is the code that I am using to create multiselector with the values that I need

{
    xtype: 'multiselector',
    title: 'I caktohet:',

    name: 'Caktohen[]',
    bind: '{userfullname.value}',

    fieldName: 'userfullname',

    viewConfig: {
        deferEmptyText: false,
        emptyText: 'Askush i zgjedhur'
    },

    search: {
        field: 'userfullname',
        model: 'InTenders.model.UserModel',
        store: {
            type: 'users',
            sorters: 'userfullname',
            // proxy: {
            //     type: 'rest',
            //     limitParam: null,
            //     url: 'api/User'
            // }
        }
    }
}

When I call form = win.down('form') records I can get all values except the multiselector values, they show like this on console.

Anyone can help me or guide me how to get the values?

Thank you.

//Code that I'm trying to get multiselector items and save them

saveTenderForm: function (button, e, eOpts) {
        var userMultiSelector = Ext.getCmp('AssignedUsers'); //save assigned users
        var selectedUsers = userMultiSelector.getStore().getData(); //get store and put them in array


        var me = this,
            win = button.up('window'),
            form = win.down('form'),
            // formApplyUpload = this.getFormApplyUpload(),
            // var ko = win.items.items[0].items.items[0].value; 
            recordtenderUsers = Ext.create('InTenders.model.TenderSaveModel');
            // recordtenderUsers = form.getRecord();
            // record = form.getRecord(),
            values = form.getValues();
            // appFile = this.getApplicationFile(),
            // callbacks;
            recordtenderUsers.set(values);
            recordtenderUsers.set('tenderUsers',selectedUsers.items);


        // // me.showMask();
        // if (form.isValid()) {

            recordtenderUsers.save({
                success: function (recordtenderUsers, operation) {
                    win.close();
                    me.hideMask();
                },
                failure: function (recordtenderUsers, operation) {
                    me.hideMask();
                }
            });

Solution

  • You can get value using multiselector.down('grid') this will return you the grid. And grid have method getSelection().

    In this FIDDLE, I have created a demo. I hope this will help/guide you to achieve your requirement.

    CODE SNIPPET

    Ext.application({
        name: 'Fiddle',
    
        launch: function () {
            Ext.create({
                xtype: 'form',
                renderTo: Ext.getBody(),
                items: [{
                    xtype: 'multiselector',
                    title: 'Multi selector example',
                    fieldName: 'text',
                    viewConfig: {
                        deferEmptyText: false,
                        emptyText: 'No value selected'
                    },
    
                    search: {
                        field: 'text',
                        store: {
                            fields: [{
                                name: 'text',
                                type: 'string'
                            }],
                            data: [{
                                text: 'ABC'
                            }, {
                                text: 'ABC 1'
                            }, {
                                text: 'ABC 2 '
                            }, {
                                text: 'ABC 3'
                            }, {
                                text: 'ABC 4'
                            }]
                        }
                    }
                }, {
                    xtype: 'button',
                    text: 'Get Value',
                    margin:15,
                    handler: function (btn) {
                        var multiselector = btn.up('form').down('multiselector');
                        if (multiselector.down('grid')) {
                            multiselector.down('grid').getSelection().forEach(rec => {
                                console.log(rec.get('text'));
                            });
                        }
                    }
                }]
            });
        }
    });