ExtJs 4 MultiSelect编辑表单不加载选择

Question

I need some help about combo box with multiple select in Extjs 4.

I need it in my forms for a simple ManyToMany relation splitted by a central table:

User -< User_Group >- Group.

Where:

User: id, name, year

User_Group: user_id, group_id

Group: id, name

I have no problem in the creation form of a User and i can save to databse by php all the groups I've associated by the combobox.

Now, I have a grid with all my users, and when I try to start edit one of them, the selections of the combobox are not loaded, but the combobox's field show the ids of the corrected selections.

For example:

When I try edit this user (json code)

{
    "id": 86,
    "name": "tempname",
    "year": 1492,
    "groups_id": [1,2,3]
}

The Edit form is filled with all the information and the field of combobox shows 1,2,3 , but nothing is selected in its dropdown menu.

This is my combobox:

{
    xtype: 'combobox',
    multiSelect: true,

    name: 'groups_id',
    fieldLabel: 'Group/s',

    valueField: 'id',
    displayField: 'name',

    store: 'Groups',
    allowBlank: false
}

So, why nothing is getting selected on the load of thtat form? And why the ids I pass to load the combobox (groups_id) are not getting really bind to it? It's wrong the json structure of a user?

I've passed two days on this...and yes...I'm pretty new to ExtJs ;)

Answer 1

Ok I managed to get things working after some sandwiches.

The problem was that, when I was loading the record to edit, record.get('groups_id') was an array of string (for example ["1","2","3"]) while I need an array of integer (like this [1,2,3]).

To convert/parse the record.get('groups_id') I made this:

//from [ "1" , "2" , "3"] to [ 1 , 2 , 3]

//preparing an empty array for the parsed ids
var ids_integer = new Array();

//one by one, from string to int
record.get('groups_id').forEach( function(id){
    ids_integer.push(parseInt(id));    
});

//sobstitute the String Array with the Int Array
record.set('groups_id', ids_integer);

var view = Ext.widget('useredit');    
view.down('form').loadRecord(record);   //finally load record in my form