Results 1 to 6 of 6

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

  1. #1
    Ext JS Premium Member
    Join Date
    Apr 2011
    Location
    Chicago, IL
    Posts
    24
    Answers
    3

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

    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:

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



    Christopher R McGuire
    Chicago, IL 60640

  2. 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.

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

  3. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199
    Answers
    87

    Default

    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.


    Code:
    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.

  4. #3
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,102
    Answers
    113

    Default

    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:

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

  5. #4
    Ext JS Premium Member
    Join Date
    Apr 2011
    Location
    Chicago, IL
    Posts
    24
    Answers
    3

    Default

    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:

    Code:
    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.
    Christopher R McGuire
    Chicago, IL 60640

  6. #5
    Ext JS Premium Member
    Join Date
    Apr 2011
    Location
    Chicago, IL
    Posts
    24
    Answers
    3

    Default

    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.

    Code:
    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 "";
    
    
        	  }
    Christopher R McGuire
    Chicago, IL 60640

  7. #6
    Sencha User
    Join Date
    Aug 2014
    Posts
    6
    Answers
    1

    Default

    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:
    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?

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •