编辑器 ExtJs 中的多行文本区域

Question

我在网格的编辑器中有一个注释文本区域，但是如果我写了一些文本然后我按下输入它只是完成编辑而不是创建新行。我想要的是如果我按回车键，它会创建这样的新行： 示例：

" 错误列表：

1. asdasdasd

2. asdasdasdas"

现在我只写这样的评论：“错误列表：1.asdasd 2.asdasdasd”

我必须用我的 js 做什么？

这是我的网格：

这是代码：

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;
                    }

                }
            }
        ]
});

我已经在google中尝试过，但我无法解决这个案例。

Answer 1

启用评论编辑器的按键事件，并在 Enter 键中启用 stopEvent()

示例配置：

         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
                    }
                }
            }
        }

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