Rowediting with combobox shows [Object object]

[extLearning]

Hi,

I'm using a grid with rowediting plugin and a combobox managing 'company' objects. The column itself displays the company name correctly, because a renderer is available. The combobox itself displays its items correctly, too, because displayTpl is set.

But on activating the rowediting editor, the display shows [Object object].

My problem is related to following post, but his solution didn't work for me.
http://www.sencha.com/forum/showthre...owEditing-Grid

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

        {
            header: 'Company',
            dataIndex: 'company',
            renderer: function (value) {
                if(Ext.isDefined(value)){
                    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);
                    }
                }
            }
        },

[Gary Schlosberg]

According to that thread, the solution involved configuring the renderer. What have you tried as renderer config? What does your data look like for each combo?

[extLearning]

Hi Gary,

currently my renderer looks like this:

renderer: function (value) {
                if (Ext.isDefined(value)) {
                    return value.name;
                }
                return '';
            }

I also tried this to generally return a string to see, if [Object object] disappears:

renderer: function (value) {
                return 'test';
            }

This is the model, my combobox shows:

Ext.define('app.model.Company', {
    extend: 'app.model.Base',


    fields: [
        {name: 'name',  type: 'string'},
        {name: 'normalizedName',  type: 'string'},
        {name: 'active', type: 'boolean'}
    ],

    proxy: {
        type: 'direct',
        api: {
            create:companyService.createOrUpdateCompany,
            read: companyService.loadCompanies,
            update: companyService.createOrUpdateCompany,
            destroy: companyService.removeCompany
        }
    }
});

and here is the store which is binded to the combobox:

    stores: {
        companies: {
            autoLoad : true,
            autoDestroy: true,
            model: 'app.model.Company',
            sorters: [
                {
                    property: 'name',
                    direction: 'ASC'
                }
            ]
        }
    }

The row data of the grid has the following model. (Combobox shows the company of users)

Ext.define('app.model.User', {
    extend: 'app.model.Base',


    fields: [
        {name: 'name',  type: 'string'},
        {name: 'surName',  type: 'string'},
        {name: 'email', type: 'string'},
        {name: 'selectedWorkingGroup', type: 'string'},
        {name: 'active', type: 'boolean'},
        {name: 'company', reference: 'Company'},
        {name: 'roles', reference: 'Role'},
        {name: 'assignedWorkingGroups', reference: 'WorkingGroup'}
    ],
    associations: [
        {type: 'hasMany', model: 'Role'}
    ],


    proxy: {
        type: 'direct',
        api: {
            read: userService.loadUsers,
            destroy: userService.removeUser
        }
    }
});

Any ideas what I could try to solve the problem?

Thx!

[extLearning]

Hi,

I found a way to get to the display value:

getDisplayValue: function() {
     if(this.displayTplData && this.displayTplData.length){
         return this.displayTplData[0].name.name;
     }
     else return ''; // todo in case of selecting a new item
},

So now the name of the company and not [Object object] is displayed. But now my template for the dropdown menu is not applied. How can I fix that?

[extLearning]

My bad! The template of the dropdown menu still works.

Now, only the case of selecting a new item need's to be fixed, in order not to show nothing because of

else return '';

Almost there!

[extLearning]

It's working now. Here is the solution:

getDisplayValue: function() {
    if(this.displayTplData && this.displayTplData.length){
        if(this.displayTplData[0].text)
            return this.displayTplData[0].text.name;
        return this.displayTplData[0].name;
     }else{
         return this.displayTpl.apply(this.displayTplData); // apply default displayTpl
     }
},

In order to beautify it, next step is to adapt the default displayTpl to do all this stuff up there for me