Results 1 to 6 of 6

Thread: Rowediting with combobox shows [Object object]

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

    Default Answered: Rowediting with combobox shows [Object object]

    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:
    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);
                        }
                    }
                }
            },

  2. It's working now. Here is the solution:

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

  3. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    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?

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

    Default

    Hi Gary,

    currently my renderer looks like this:

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

    Code:
    renderer: function (value) {
                    return 'test';
                }
    This is the model, my combobox shows:

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

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

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

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

    Default

    Hi,

    I found a way to get to the display value:

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

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

    Default

    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
    Code:
    else return '';
    Almost there!

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

    Default

    It's working now. Here is the solution:

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

Posting Permissions

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