1. #1
    Sencha User
    Join Date
    Jul 2011
    Location
    Melbourne, Australia
    Posts
    8
    Vote Rating
    0
    schmoove_nz is on a distinguished road

      0  

    Default Unanswered: Can't populating MultiSelect control from JSON Store?

    Unanswered: Can't populating MultiSelect control from JSON Store?


    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

  2. #2
    Sencha User carol.ext's Avatar
    Join Date
    Jun 2007
    Location
    Littleton, Colorado, USA
    Posts
    704
    Vote Rating
    30
    Answers
    25
    carol.ext has a spectacular aura about carol.ext has a spectacular aura about

      0  

    Default


    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

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

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Location
    Melbourne, Australia
    Posts
    8
    Vote Rating
    0
    schmoove_nz is on a distinguished road

      0  

    Default Setting selected values

    Setting selected values


    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:

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

    Code:
            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:
    Code:
    {
                    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
                }

  4. #4
    Sencha User
    Join Date
    Jul 2011
    Location
    Melbourne, Australia
    Posts
    8
    Vote Rating
    0
    schmoove_nz is on a distinguished road

      0  

    Default


    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!

  5. #5
    Sencha User carol.ext's Avatar
    Join Date
    Jun 2007
    Location
    Littleton, Colorado, USA
    Posts
    704
    Vote Rating
    30
    Answers
    25
    carol.ext has a spectacular aura about carol.ext has a spectacular aura about

      0  

    Default


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

  6. #6
    Sencha User
    Join Date
    Jul 2011
    Location
    Melbourne, Australia
    Posts
    8
    Vote Rating
    0
    schmoove_nz is on a distinguished road

      0  

    Default


    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.

  7. #7
    Sencha User
    Join Date
    Nov 2007
    Posts
    29
    Vote Rating
    0
    joseph09 is on a distinguished road

      0  

    Default


    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)

    Code:
                         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);
    	    		}
            	    });

Thread Participants: 2