Results 1 to 3 of 3

Thread: [4.1] KeyMap for processing a form

  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    651
    Answers
    3

    Default [4.1] KeyMap for processing a form

    I am probably missing something simple but I can't seem to get a KeyMap to work in Ext 4.1. In this short example, I want to handle the Enter key when it is pressed. Any suggestions?

    Code:
    var form = Ext.create('Ext.form.Panel',{
                items: [{
                    fieldLabel: 'First',
                    labelWidth: 40,
                    width: 160,
                    xtype: 'textfield'
                },{
                    fieldLabel: 'Last',
                    labelWidth: 40,
                    width: 160,
                    xtype: 'textfield'
                }],
                renderTo: Ext.getBody()
    });
    
    var map = Ext.create('Ext.util.KeyMap',{
                fn: function(key,e){
                     alert('It Fired');
                     form.fireEvent('some_event');
                },
                key: Ext.EventObject.ENTER,
                target: form
    });

  2. #2
    Sencha User
    Join Date
    Jun 2008
    Posts
    10
    Answers
    1

    Wink

    Try this one:
    Code:
    form = Ext.create('Ext.form.Panel', {
     keys: [{
      key: Ext.EventObject.ENTER,
      fn: function(){alert('It Fired');}
     }],
     listeners: {
      render: function(p) {p.getKeyMap();}
     },
     ......
    });

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    651
    Answers
    3

    Default

    A slight problem ... the "keys" config can not be an array b/c the getKeyMap method applies the value directly to the config used for the KeyMap. Nothing in the constructor takes account for this. Therefore, the only option is for keys to be an object.

    Option B would be to define the KeyMap explicitly during the render listener and specify the element of the component.

    Code:
    var form = Ext.create('Ext.form.Panel',{
           ...
           listeners: {
               'render': function(p){ p.getKeyMap(); }
           },
           keys: {
                fn: function(key,e){
                    alert('Bam');
                },
                key: Ext.EventObject.ENTER            
           }
    });

Posting Permissions

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