Can't populating MultiSelect control from JSON Store?

[schmoove_nz]

Has anyone successfully populated a MultiSelect control from a JSON data store? I would have assumed the 'store' parameter of a MultiSelect would accept a standard JSON data store the same way a ComboBox does (using 'displayField' and 'valueField', with the selected items set by the 'value' parameter), but it seems the only way to populate a MultiSelect control is with an Array Store - so is there an easy way to convert two fields from a JSON store to an Array Store and pass this to the MultiSelect component?

Seems like a bit of an oversight that the component can't be populated with data from the same store as the rest of the form, but maybe I just have my ExtJS concepts skewed - any help would be much appreciated!

Thanks

[carol.ext]

What do your store and multiselect item look like (please use code tags, # on toolbar)? Also, your json.

I noticed you are on the other side of the world and a back and forth conversation might take a while.

So, I will add that I took the multiselect example and changed to use a store with json data. Seemed to work.

http://docs.sencha.com/ext-js/4-0/#!...lect-demo.html

 
    var ds2 = Ext.create('Ext.data.Store', {
        data: [{value: 123, text: 'One Hundred Twenty Three'},
            {value: '1', text: 'One'}, 
            {value: '2', text: 'Two'}, 
            {value: '3', text: 'Three'}, 
            {value: '4', text: 'Four'}, 
            {value: '5', text: 'Five'},
            {value: '6', text: 'Six'}, 
            {value: '7', text: 'Seven'}, 
            {value: '8', text: 'Eight'}, 
            {value: '9', text: 'Nine'}],
        fields: ['value','text'],
        sortInfo: {
            field: 'value',
            direction: 'ASC'
        }
    });

items:[{
            anchor: '100%',
            xtype: 'multiselect',
            msgTarget: 'side',
            fieldLabel: 'Multiselect',
            name: 'multiselect',

            allowBlank: false,
            // minSelections: 2,
            // maxSelections: 3,
            displayField: 'text',
            valueField: 'value', 
            store: ds2,

            value: ['3', '4', '6'],

            ddReorder: true
        }],

[schmoove_nz]

Thanks for the reply Carol.

Apologies, I actually phrased the thread topic incorrectly- I can populate the Multiselect from a JSON store fine, just having trouble setting the selected values.

I can't see why the "value" param on the Multiselect wouldn't be setting the selected values correctly on load. If I use setValue() from a button it has no problem setting the same values.

Any help would be much appreciated! Code is as follows:


My model:

        
Ext.define('Artist', {
            extend: 'Ext.data.Model',
            idProperty: 'artist_id',
            fields: [
               {name: 'artist_id',                    type: 'int'},
               {name: 'artist_name',                type: 'string'}
            ]
});

Store:

        this.artistStore = new Ext.data.Store({
            storeId: 'ArtistStore',
            model: 'Artist',
            pageSize: 50,
            proxy: {
                type: 'rest',
                url: '/api/artists',
                reader: {
                    type: 'json',
                    root: 'artists'
                }
            },
            autoLoad: true
        });

The MultiSelect component:

{
                xtype: 'multiselect',
                msgTarget: 'side',
                fieldLabel: 'Artists',
                name: 'user_artists',
                id: 'user_artists',
                store: Ext.getStore('ArtistStore'),
                displayField: 'artist_name',
                 valueField: 'artist_id',
                value: [1,2,3],
                 allowBlank: false, 
                height: 270
            }

[schmoove_nz]

I think this may be quite a complex issue.

It looks like the 'user_artists' field from the record being loaded into the form is overriding the value of the component when referenced with the 'name' parameter in the Multiselect. If I remove the 'name' paramter and replace the ArtistStore with your ds2 store, it works. So it appears to be a problem loading data from a remote store, combined with the form's loaded record overriding the value.

Could someone from Sencha maybe weigh in on this?

Thanks!

[carol.ext]

I would think you would want it to set the values based on the record loaded into the form. Apparently not.

[schmoove_nz]

Yes, absolutely - but the values in the record loaded into the form are just a string with delimiters (1,2,3,4,5 etc) - so obviously they need to be converted to an array before you can use them to set the 'value' parameter.
I think the trouble with using the 'name' parameter is that it tries to automatically set the value of the Multiselect with the string, which is an invalid value type for the control, so nothing gets set.

[joseph09]

I had a similar scenario that I solved by using an AJAX request to generate a string of id's to load into the multiselect field then split the string into an array and then setValue(arr)

                     Ext.Ajax.request({
            		url: '/get_data.php',
            		params: {
                	    id: 	id,
                	    action: 	'load_selected_artists'
            		},
                        // INCOMING RESPONSE STRING = 1,2,3,4,5,6,7
            		success: function(response){
     	    		    var multiselectField = form.findField('user_artists');
     	    		    var arr = response.responseText.split(',');
     	    		    multiselectField.setValue(arr);
	    		}
        	    });