ComboBox Display Edit Values Show [object, Object] in RowEditing Grid

[crmcguire74]

Hello everyone-

I am using a RowEditing plugin within a data grid, implementing the MVC architecture. All is working as expected (minus some bumps with Internet Explorer), but one of the issues is with the combo box controls used within the inline editor. I have set my displayField and valueField properties within the column model as needed, but what happens is on data load, the grid displays the value, only due to the fact that I placed a renderer on the column to pull the name and display it within the column. On edit of the grid row, the Text Box shows [object, Object], rather than using the renderer, or the displayField. Any idea to have the textfield show the pre selected name property of my combobox, or the selected value when the user so chooses it?

The store/view/model can be referenced from:

http://www.sencha.com/forum/showthread.php?239690-Data-Not-Rendered-into-Grid-within-Internet-Explorer-using-ExtJS-4-MVC-Architecture&p=878568#post878568

In addition, an example combo box store used in the above reference is:

Ext.define('MyApp.store.UserTypes', {
    extend: 'Ext.data.Store',
    model: 'MyApp.model.UserType',
    proxy: {
        type: 'ajax',
        url : '/servlet/DS',
        extraParams: {
            method: 'getUserTypes',
            token: TOKEN
        },
        reader: {
            type: 'json',
            root: 'value',
            successProperty: 'success'
        }
    }
});

Thank you in advance for any guidance on this issue.

Talk soon

[tvanzoelen]

What if you try to create a new datatype for that column, for example I did for the binary type. But youre own type and configure the model with it.

Ext.data.Types.BINARY = {

    convert: function(v, data) {
        return v;
    },


    sortType: function(v) {
        return v  // When sorting,
    },

    type: 'binary'

};

Just change the convert function to your needs.

[Farish]

Considering that the value field is 'id' and display field is 'name' from a store of names (store_names), this is what the grid column should look like:

{header: 'Name', dataIndex: 'name', flex:1, 
                editor: {
                    xtype:'combo',
                    store: store_names,
                    displayField: 'name',                    
                    valueField: 'id',
                    queryMode: 'local',
                    editable: false,
                    forceSelection: true
                },
                renderer: function(value){
                    if(value != 0 && value != "")
                    {
                        if(store_names.findRecord("id", value) != null)
                            return store_names.findRecord("id", value).get('name');
                        else 
                            return value;
                    }
                    else
                        return "";  // display nothing if value is empty
                }
            }

this works fine for me. have you set forceSelection to false? the renderer should always return one value and not an object.

[crmcguire74]

Hi there Farish-

The value coming back in the renderer is not a string unfortunately, but an object value...I can adjust the renderer though to read:

renderer: function(value) {
    	  	
    	  	if (typeof value != 'undefined') {
    	  		if (value.name != null)
    	  			return value.name;
    	  		else
    	  			return "";
    	  	}
    	  	else
    	  		return "";


    	  }

...and that will display properly the values on the initial load of the grid, but when going into RowEdit mode, the [object, Object] will then simply read as blank values (and not the true selected value). When editing or selecting a value now, the [object, Object] is finally gone, but now it simply just remains blank...almost there though.

[crmcguire74]

I finally adjusted for the blanks with the below code...thank you so much for the help and guidance to get me to the solution!

The issue was that sometimes, the value was an object, and at others, it was an integer, which, from your code, I used to reference the record of the data store.

renderer: function(value) {
 
    	  	if (!isNaN(value)){
    	  		
    	  		if (Ext.data.StoreManager.lookup('UserStati').findRecord('id', value) != null) 
    	  			return Ext.data.StoreManager.lookup('UserStati').findRecord('id', value).get('name');
    	  		else
    	  			return value;   
    	  			 	  		
    	  	}
    	  	
    	  	else if (typeof value != 'undefined') {
    	  		if (value.name != null)
    	  			return value.name;
    	  		else
    	  			return "";
    	  	}
    	  	
    	  	else
    	  		return "";


    	  }

[extLearning]

Hi,

I'm having the same problem here.
->Column display is ok, because of renderer.
->displayTpl of combobox is set and working

Adapting my renderer didn't work. Still shows [Object object]. Here is my code:

        {
            header: 'company'
            dataIndex: 'company',
            renderer: function (value, metaData) {
                return 'test';
                if(Ext.isDefined(value)){
                    console.log(value.name);
                    return value.name;
                }
                return '';
            },
            flex: 1,
            autoSizeColumn: true,
            filter: {
                type: 'list'
            },
            editor: {
                xtype: 'combobox',
                queryMode: 'local',
                bind: {
                    store: '{companies}'
                },
                displayField: 'name',
                valueField: 'id',
                tpl: Ext.create('Ext.XTemplate',
                    '<tpl for=".">',
                    '<tpl if="active == false">',
                    '<div class="x-boundlist-item x-combo-grayed-out-item">{name}</div>',
                    '</tpl>',
                    '<tpl if="active == true">',
                    '<div class="x-boundlist-item">{name}</div>',
                    '</tpl>',
                    '</tpl>'
                ),
                displayTpl: Ext.create('Ext.XTemplate',
                    '<tpl for=".">',
                    '{name}',
                    '</tpl>'
                ),
                listeners: {
                    beforeselect: function (combo, record, index) {
                        return (record.data && record.data.active);
                    }
                }
            }
        },

Can anybody help?