getSelection array values for MULTI Select list in Sencha

Question

I don't know how to get the values of the MULTI select list.

I have tried to use the method getSelection; however, I'm getting an error that it's undefined. Here's my code:

refs : {
    optionlist : 'Overlayitemlist',
},
var reco= Ext.getCmp('optionlist').getSelection() ;

Here's the error:

Uncaught TypeError: Cannot call method 'getSelection' of undefined

Where am I going wrong?

Answer 1

You can make use of selectionchange event to keep track of your multi selection and based on that, you can push all those values inside an array. Here is an example:

Ext.create('Ext.List', {
    fullscreen: true,
    mode: 'MULTI',
    store: {
        fields: ['name'],
            data: [{
            name: 'Red'
        }, {
            name: 'Orange'
        }, {
            name: 'Yellow'
        }, {
            name: 'Green'
        }, {
            name: 'Blue'
        }] // data
    }, // store
     itemTpl: '{name}',
     listeners: {
         selectionchange: function (list, records) {
            var names = [];
            Ext.Array.each(records, function (item) {
                names.push('<li>' + item.data.name + '</li>');
            });
            Ext.Msg.alert('You selected ' + records.length + ' item(s)', '<ul>' + names.join('') + '</ul>');
         } 
     } 
});

Answer 2

Here's the updated example from Senhca's site (link). Apparently even their demo is not working properly.

/*global Ext:false */
Ext.application({
    launch: function () {
        Ext.create('Ext.List', {
            fullscreen: true,
            mode: 'MULTI',
            store: {
                fields: ['name'],
                data: [{
                    name: 'Red'
                }, {
                    name: 'Orange'
                }, {
                    name: 'Yellow'
                }, {
                    name: 'Green'
                }, {
                    name: 'Blue'
                }] // data
            }, // store
            itemTpl: '{name}',
            listeners: {
                selectionchange: function (list, records) {
                    var names = [];
                    Ext.Array.each(list.selected.items, function (item) {
                        names.push('<li>' + item.data.name + '</li>');
                    }); // each()

                    Ext.Msg.alert('You selected ' + list.selected.items.length + ' item(s)');
                } // selectionchange
            } // listeners
        }); // create()
    } // launch
}); // application()