Concatenate in EditorGridPanel

Question

Inside of my editorGridPanel, I have a three columns. I want to concatenate the data inside of my 'firstname' and 'lastname' column directly going to or when the cursor or focus are now in my 'email address' column in every row. Could someone help me about this problem?

          var cm = new Ext.grid.ColumnModel({

            defaults: {
                sortable: true            
            },
            columns: [{
                    id: 'id',
                    header: 'ID',
                    dataIndex: 'id',
                    width: 220,
                    editable: false,
                    hidden: true
                },
                {
                    id: 'firstname',
                    header: 'First Name',
                    dataIndex: 'firstname',
                    width: 220,

                    editor: new fm.TextField({
                        allowBlank: false                           
                    }),
                    listeners: {


                        click: function(){
                            Ext.getCmp('b_save').enable();
                            Ext.getCmp('b_cancel').enable(); 

                        }                               
                    }
                },
                {
                    id: 'lastname',
                    header: 'Last Name',
                    dataIndex: 'lastname',
                    width: 220,
                    align: 'left',
                    editor: new fm.TextField({
                        allowBlank: false
                    }),
                    listeners: {
                        click: function(){
                            Ext.getCmp('b_save').enable();
                            Ext.getCmp('b_cancel').enable(); 
                        }                               
                    } 
                },
                {
                    id: 'email_address',
                    header: 'Email Address',
                    dataIndex: 'email_address',
                    width: 330,
                    align: 'left',
                    editor: new fm.TextField({
                        allowBlank: false
                    }),
                    listeners: {
                        click: function(){
                            Ext.getCmp('b_save').enable();
                            Ext.getCmp('b_cancel').enable(); 
                        }                               
                    } 
                },






             var grid = new Ext.grid.EditorGridPanel({
                viewConfig: {
                forceFit: true,
                autoFill: true                  

            },
                id: 'maingrid',
                store: store,

                cm: cm,                    

                width: 700,
                anchor: '100%',
                height: 700,

                frame: true,
                loadMask: true,
                waitMsg: 'Loading...',
                clicksToEdit: 2,
                sm : new Ext.grid.RowSelectionModel({
                    singleSelect: true
                    ,onEditorKey : function(field, e) {
                    if (e.getKey() == e.ENTER) {
                    var k = e.getKey(), newCell, g = this.grid,ed = g.activeEditor || g.lastActiveEditor;
                    e.stopEvent();
                    /*ed.completeEdit();*/
                    if(e.shiftKey){
                    newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
                    }else{
                    newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
                    }
                    if(newCell){
                    g.startEditing(newCell[0], newCell[1]);
                    }
                    }
                    else if(e.getKey() == e.TAB){
                        var k = e.getKey(), newCell, g = this.grid,ed = g.activeEditor || g.lastActiveEditor;
                    e.stopEvent();
                    newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
                    if(newCell){
                    g.startEditing(newCell[0], newCell[1]);
                    }
                    }
                    }

                }),
               });

Answer 1

You can add concatenated firstname and lastname and set it as value into your email_address field in listener for beforeedit editorgrid event:

listeners: {
    beforeedit: function(e) {
        if (e.field === 'email_address' && e.value === '') {
            var newValue = e.record.get('firstname') + '.' + e.record.get('lastname');
            e.record.set('email_address', newValue);
        }
    }
},

Fiddle with example: https://fiddle.sencha.com/#fiddle/3mf