Multi Line Text Area In Editor ExtJs

Question

I have a comment text area in an editor in the grid, but if i write some text and then i push the enter it just complete edit and not create new line. What i want is if i hit enter key, its create new line like this: Example :

" Wrong list:

1. asdasdasd

2. asdasdasdas"

Now i just write in comment like this : "Wrong list: 1.asdasd 2.asdasdasd"

What i must to do with my js?

This is the grid i have:

This is the code :

var chat_grid = Ext.create('Ext.grid.Panel', {
    id: 'chatGrid',
    store: SuratPesananChatDetailStore,
    height: 350,
    title: 'Comment Grid',
    viewConfig: {
        emptyText: '<P ALIGN="CENTER"><font color="red"><U> Tidak ada data </U></font></P>',
        getRowClass: function (record, rowIndex, rp, store) {
            return 'rowgridspdetailnonstd-height';
        }
    },
    plugins: Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit: 2, pluginId: 'rowEditingID' }),
    frame: true,
    loadMask: true,
    stripeRows: true,
    autoScroll: true,
    selModel: GridChatSelectionModel,
    cls: 'rowgridspdetailnonstd-height',
    tbar:
        [
            {
                id: "IdAddCommentLookUp",
                text: "Add Comment",
                iconCls: "icon-grid-add",
                listeners:
                {
                    'click': function () {
                        AddCommentListener();
                    }
                }

            },
            {
                id: "IdDeleteChat",
                text: "Delete Comment",
                iconCls: "icon-cancel",
                disabled: true,
                listeners:
                {
                    'click': function () {
                        DeleteChatListener();
                    }
                }

            },
            {
                id: "IdInviteUser",
                text: "Invite User",
                iconCls: "icon-grid-add",
                hidden: true,
                listeners:
                {
                    'click': function () {
                        InviteUserLookUp();
                    }
                }
            }
        ],
    columns:
        [

            {
                header: 'Date',
                dataIndex: 'CreatedOn',
                width: 120,
                hidden: false,
                sortable: false,
                sortableColumn: false
            },
            {
                header: 'Comment',
                dataIndex: 'Comment',
                editor: { xtype: 'textareafield', allowblank: false, maxLength: 165, enforceMaxLength: true, height: 100, grow: true, completeOnEnter: false },
                hidden: false,
                width: 370,
                sortable: false,
                sortableColumn: false
            },
            {
                header: 'Created By',
                dataIndex: 'CreatedBy',
                width: 120,
                hidden: false,
                sortable: false,
                sortableColumn: false
            },
            {
                header: 'Department',
                dataIndex: 'Department',
                width: 120,
                hidden: false,
                sortable: false,
                sortableColumn: false
            },
            {
                header: 'Document Name',
                dataIndex: 'FileName',
                width: 150,
                hidden: false,
                sortable: false,
                sortableColumn: false
            },
            {
                header: 'Upload Document',
                dataIndex: 'Panel',
                width: 120,
                hidden: false,
                sortable: false,
                sortableColumn: false,
                renderer: function (v, m, r, row) {

                    if (r.data.Panel == 'Download') {
                        var fileName = r.data.FilePath;
                        return "<a href='#' onClick=\"redirect('" + fileName + "')\">" + v + "</a>";
                    }
                    else if (r.data.Panel == 'Upload') {
                        return "<a href='#' onClick=\"AddUploadComment('" + row + "')\">" + v + "</a>";
                    }
                    else {
                        return v;
                    }

                }
            }
        ]
});

I have try all the way in google but i can't solve this case.

Answer 1

Enable keyevents of your comment editor, and stopEvent() in Enter key

Sample config:

         editor: {
            xtype: 'textareafield',
            allowblank: false,
            maxLength: 165,
            enforceMaxLength: true,
            height: 100,
            grow: true,
            completeOnEnter: false,
            enableKeyEvents: true, //Listen to keyevents
            listeners: {
                keydown: function(field, e) {
                    if (e.getKey() == e.ENTER) {
                        e.stopEvent(); // Stop event propagation
                    }
                }
            }
        }

Ref: https://www.sencha.com/forum/showthread.php?293592-Stop-RowEditing-plugin-from-completing-the-edit-on-keypress-enter