How to populate Selected column in ItemSeclector with default values in Ext-JS

Question

I am using ItemSelector in Ext.ux.form. I need to populate the Selected column with some default values. I can populate the Available column correctly but when I try to set the store of toField to the default values, it ends up in the Available column. Following is the code snippet. Could anyone please help me out?

                                 var data = [{"name":"abcd"}];

                                 var ds = SailPoint.Store.createStore({
                                    url: CONTEXT_PATH + '/define/applications/discoverServers.json',
                                    fields: ['name','value'],
                                    autoLoad: true,
                                    baseParams: {domain : domain},
                                    listeners: {
                                                load: function() {
                                                alert('store loaded');
                                            }
                                        }
                                });

                                var itemselectorField = new Ext.Panel({
                                    title: 'Select Servers',
                                    width: 700,
                                    id:'selectServerId',
                                    bodyPadding: 10,
                                    height: 300,
                                    renderTo: 'itemselector',
                                    layout: 'fit',
                                    items:[{
                                        xtype: 'itemselector',
                                        name: 'itemselector',
                                        id: 'itemselectorField',
                                        anchor: '100%',
                                        imagePath: '../images/extjs-ux/',
                                        store: ds,
                                        displayField: 'name',
                                        valueField: 'name',
                                        allowBlank: false,                                          
                                        msgTarget: 'side',
                                        fromTitle: 'Available',
                                        toTitle: 'Selected',
                                        listeners: {
                                            afterrender: function() {
                                                    Ext.getCmp('itemselectorField').toField.store.loadData(data);
                                                    Ext.getCmp('selectServerId').doLayout();
                                                    alert("After Render");
                                            }
                                        }
                                    }
                                ]
                                });

Answer 1

You should use the setValue method of your itemselector field. Your listeners object should look like this:

listeners: {
    afterrender: function(field) { //Add the field argument to the afterrender
        var a = []; // The setValue method receives an Array
        for(var key in data) {
            a.push(data[key].name);
        }
        field.setValue(a);
    }
}

A fiddle so you can take a look: https://fiddle.sencha.com/#fiddle/gue