Results 1 to 5 of 5

Thread: ExtJS 4.1: How to allow ENTER key to be pressed in TextArea EditorGrid?

  1. #1
    Sencha User
    Join Date
    Dec 2007
    Posts
    11
    Vote Rating
    0
      0  

    Question ExtJS 4.1: How to allow ENTER key to be pressed in TextArea EditorGrid?

    hello,

    I've defined an EditorGrid in ExtJS 4.1-RC1 and one of the columns has a TextArea as editor.

    When pressing the ENTER key to enter e newline in the textarea the grid intercepts the event and fires the completeEdit() event, closing the editor and commiting the changes.

    How can I avoid this behavior and allow newlines to be entered?

    This is the column definition:

    Code:
    {
          dataIndex: 'note',
          text: 'Note',
          width: 120,
          sortable: false,
          filterable: true,
          editor: {
            xtype: 'textarea',
            allowBlank: true,
            grow: true,
            completeOnEnter: false,
          },
        }
    note that the "completeOnEnter" option seems to have no effect

    Thanks for any reply.

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Answers
    3931
    Vote Rating
    1271
      0  

    Default

    This for cell or row editing?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Dec 2007
    Posts
    11
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by mitchellsimoens View Post
    This for cell or row editing?
    RowEditing

  4. #4
    Sencha User
    Join Date
    Apr 2012
    Posts
    4
    Vote Rating
    0
      0  

    Default

    twist3r,

    I was having this exact same issue and came across your post. After about two hours of digging thru the various sources, I finally came up with a solution (though it may not be optimal).

    The "submit on enter" functionality is setup in the afterRender event of Ext.grid.RowEditor. I created a simple override to remove it:

    Code:
    Ext.override(Ext.grid.RowEditor, {
       afterRender: function() {
            var me = this,
                plugin = me.editingPlugin;
    
            me.callParent(arguments);
            me.mon(me.renderTo, 'scroll', me.onCtScroll, me, { buffer: 100 });
    
            // Prevent from bubbling click events to the grid view
            me.mon(me.el, {
                click: Ext.emptyFn,
                stopPropagation: true
            });
    
            me.el.swallowEvent([
                'keypress',
                'keydown'
            ]);
    
            me.keyNav = Ext.create('Ext.util.KeyNav', me.el, {
                esc: plugin.onEscKey,
                scope: plugin
            });
    
            me.mon(plugin.view, {
                beforerefresh: me.onBeforeViewRefresh,
                refresh: me.onViewRefresh,
                scope: me
            });
        }
    });
    In the keyNav setup block, it used to have the following:
    Code:
    enter: plugin.completeEdit,
    which is the thing I removed. This is for 4.0.6, btw, not 4.1 but since no one had responded to you, I thought I'd share.

    Enjoy!

  5. #5
    Touch Premium Member
    Join Date
    Sep 2011
    Posts
    47
    Answers
    1
    Vote Rating
    1
      0  

    Default

    This seems to work for me
    PHP Code:
    {
        
    xtype'gridcolumn',    
        
    dataIndex'description',   
        
    editor: { 
            
    xtype'textareafield',
            
    listeners: { 
                
    afterrender: function(){
                    var 
    me this;
                     
    me.el.swallowEvent(['keypress','keydown'    ]); 
                }
            }
        }


Tags for this Thread

Posting Permissions

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