Results 1 to 6 of 6

Thread: DefaultButton plugin - submit on ENTER

  1. #1
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    239

    Default DefaultButton plugin - submit on ENTER

    My form should auto-submit when ENTER is pressed.
    I have found a couple of related posts in the forums, but I either don't understand them or they seem to have limitations like not working for buttons in toolbars or only working with regular form submit (instead of AJAX).

    So I came up with my own solution as a plugin.

    Usage: Simply add the plugin to the button which should be triggered
    Code:
    {
        text: 'Save',
        xtype: 'button',
        plugins: 'defaultButton',
        handler: yourRegularHandler
    }
    The button component has to be nested in a form for this to work
    (but it works even if the HTML button is not nested in the HTML form, like when the ExtJS button component is in the footer of a FormPanel).

    Code:

    PHP Code:
    (function(){

        var 
    ns Ext.ns('Ext.ux.plugins');
        
    /**
         * @class Ext.ux.plugins.DefaultButton
         * @extends Object
         *
         * Plugin for Button that will click() the button if the user presses ENTER while
         * a component in the button's form has focus.
         *
         * @author Stephen Friedrich
         * @date 21-JAN-2010
         * @version 0.2
         *
         */
        
    Ext.ux.plugins.DefaultButton =  Ext.extend(Object, {
            
    init: function(button) {
                
    button.on('afterRender'setupKeyListenerbutton);
            }
        });

        function 
    setupKeyListener() {
            var 
    formPanel this.findParentByType('form');
            
    //noinspection ObjectAllocationIgnored
            
    new Ext.KeyMap(formPanel.el, {
                
    keyExt.EventObject.ENTER,
                
    shiftfalse,
                
    altfalse,
                
    fn: function(keyCodee){
                    if(
    this.hidden || e.target.type === 'textarea' && !e.ctrlKey) {
                        return 
    true;
                    }

                    
    this.el.select('button').item(0).dom.click();
                    return 
    false;
                },
                
    scopethis
            
    });
        }

        
    Ext.ComponentMgr.registerPlugin('defaultButton'ns.DefaultButton);

    })(); 
    I coded some explicit handling for textarea, so that pressing "Enter" while a textarea is focused still works (inserts a line break in the textarea), but ctrl-enter triggers the button.

    Any feedback (be kind - this is my first, little plugin)?

    Tested on FF 2, FF 3.5, IE 6, IE 8
    Last edited by stephen.friedrich; 21 Jan 2010 at 8:35 AM. Reason: tiny code bug fix

  2. #2
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    786

    Thumbs up

    Didn't test it, but looks like a neat little and well done plugin to me! :-)
    Congrats!

    Steffen

  3. #3

    Thumbs up

    very useful plugin.
    Thanks!

  4. #4
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    239

    Default

    I updated the code in the first post.
    There was a tiny bug: Hidden buttons were click()ed on.

    I had a form where either a SplitButton or a Button is hidden and the other one should be triggered. Now that works correctly by adding the plugin to both buttons.

  5. #5
    Ext JS Premium Member
    Join Date
    Jun 2009
    Posts
    29

    Default

    THANKS, i was looking for this kind of solution.
    GREAT !

  6. #6

    Default

    very useful,i will use it in my programme

Posting Permissions

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