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

时间:2015-05-19 04:59:16

标签: javascript c# asp.net extjs

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

"错误的清单:

  1. asdasdasd

  2. asdasdasdas"

  3. 现在我只是写下这样的评论:"错误列表:1.asdasd 2.asdasdasd"

    我的js必须做些什么?

    这是我的网格:

    My Comment Grid

    这是代码:

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

    我一直在谷歌尝试,但我无法解决这个问题。

1 个答案:

答案 0 :(得分:2)

启用评论编辑器的keyevents,并在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