How to read values from multiselector component

Question

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();
                }
            });

`__proto__` is not the multiselector component, it is [the prototype of the javascript object](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Object/proto). — Alexander, Mar 22 '18 at 18:12

score 0 · Accepted Answer · answered Mar 22 '18 at 18:10

0

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

answered Mar 22 '18 at 18:10

Narendra Jadhav

10,052
15
33
44

Thank you for your answer, it works on the fiddle but I am failing to incorporate it on my code, weird enough can't make the function work. – Nex Mar 23 '18 at 07:53
If you can provide the your code I can be try to help you for the same. – Narendra Jadhav Mar 23 '18 at 09:01
Hi, this is my code by trying to get the 'store' of the selected items on multiselect as getSelection doesn't work weird enough,added extra code on question. – Nex Mar 23 '18 at 12:14
If this id `AssignedUsers`is your `multiselectore` cmp then try this `Ext.getCmp('AssignedUsers').down('grid').getSelection()`. – Narendra Jadhav Mar 23 '18 at 12:23
I keep getting this warning and then it doesn't pass values. https://i.imgur.com/WOp8q7e.png – Nex Mar 23 '18 at 12:28
you need to put require this model `InTenders.model.TenderSaveModel` and another one is regarding of same mapping `tender`. – Narendra Jadhav Mar 23 '18 at 12:31
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/ this [`question`](https://stackoverflow.com/questions/24639335/javascript-console-log-causes-error-synchronous-xmlhttprequest-on-the-main-thr) – Narendra Jadhav Mar 23 '18 at 12:35
I can get the values in array perfectly but when I try to pass them to save with `record.set` I can't do that, it goes on maximum stack (infinite loop?) – Nex Mar 23 '18 at 12:47
instead of directly set please go with loop because `Ext.getCmp('AssignedUsers').down('grid').getSelection()` it's return an array. – Narendra Jadhav Mar 23 '18 at 12:53

How to read values from multiselector component

1 Answers1