how to display multiselect values from the combobox to the gridpanel extjs 4

Question

forum member I am having one problem is displaying the combobox name selected values to my gridpanel column.

I am having the gridPanel with one column containing the resources combobox and the user can select multiple values from the resource.

below is my gridpanel column with the column combobox gridpanel column

{
             xtype: 'gridcolumn',
             dataIndex: 'resourceid',
             text: 'Resource',
             field: resourcecombo
        },

resourcecombo

var resourcecombo = new Ext.form.ComboBox({
     id: 'resourceid',
     name: 'resourceid',
     emptyText: 'Select resource',
     displayField: 'firstname',
     store: Ext.create('rms.store.employee'),
     valueField: 'id',
     multiSelect: true,
     queryMode: 'local',
     typeAhead: true

});

here I getting the list of resources and I can do multiselect also. Based on this multiselect the id is send to server and with the response I want to set the values to grid column.

but, something wrong is there I am getting the correct response from server, but my gridcolumn displays only one name in this column..

I want to display the name of all the resource selected, separated by comma sign , like rishi,yogi,hiren etc

solution just change the gridcolumn with below code

xtype: 'gridcolumn',
             dataIndex: 'resources',
             header: 'Resources name',
             field: resourcecombo,
             renderer: function(resources){
                var result = [];
                resources = resources || [];
                for (var idx = 0, len = resources.length; idx < len; idx++ ){
                    var value = resources[idx].name;
                    if(value){
                        result.push(value);
                    }
                }
                return result.join(', ');
            }

and change the model with below code

Ext.define('rms.model.taskmainModel', {
    extend : 'Ext.data.Model',

    fields : [ 
               { name : 'id', type : 'int' }, 
               { name : 'taskname', type: 'string'},
               **{ name : 'resources', type: 'auto'},**
               { name : 'cmpname', mapping: 'project.company.cmpname'}

             ]

});

above solution works for me, hope this may help some one.

thanks for your support.

score 0 · Answer 1 · answered Apr 17 '12 at 08:43

You have specified the name displayed on the combobox is 'firstname', and this string will correspond 1-1 to its value beneath (i.e. 'id'). If you think it does not work your way, just think about these:

How will the "selected items" be displayed on the combobox if multi items are chosen and this combobox is not in "focus" state? (The combo will show one random of the selected item, or list them as in a menu?)
How will the "selected items" be RE-displayed after you click on the combobox again to select some other items? (If multi items has been selected, will all of them display the same "name of all the resource selected, separated by comma sign , like rishi,yogi,hiren" as you described?)

So I recommend to choose other ways, such as: using another field to show the comma-separated names

thanks for you reply, my problem is resolved. Above is my solution — Yogendra Singh, Apr 17 '12 at 09:39

how to display multiselect values from the combobox to the gridpanel extjs 4

1 Answers1