Results 1 to 9 of 9

Thread: I need a "specialkey" or "keydown" event, but on a FormPanel

  1. #1
    Sencha User
    Join Date
    Nov 2009
    Posts
    58

    Default I need a "specialkey" or "keydown" event, but on a FormPanel

    The case is as follows:

    When the user presses "Enter" on a Field, I want to focus the next field on the FormPanel. I know how to do it with the events of the field class, in fact just so I did it. But is it possible to add an event listener in a form panel with key code?

    The question is NOT how to add event listener, but how to provide key code(s) with that listener.

    Now i am reading documentation for EventManager...

    Any ideas about that?
    Thanks!

  2. #2
    Sencha User
    Join Date
    Feb 2008
    Location
    USA
    Posts
    162

    Default

    You need to attach an event listener to the panel element. The keypress events are not listed in the events fired by the formpanel / panel component, so you need to attach it to the element.

    I think there is a plugin out there that simplifies adding DOM listeners to Ext components.

    So something like this:

    Code:
    <html>
    <body>
    <link rel="stylesheet" type="text/css" href="/inc/js/ext-3.2.1/resources/css/ext-all.css" />
    <script type="text/javascript" src="/inc/js/ext-3.2.1/adapter/ext/ext-base-debug.js"></script>
    <script type="text/javascript" src="/inc/js/ext-3.2.1/ext-all-debug.js"></script>
    <script type="text/javascript">
    
    Ext.onReady(function(){
    
        var tree = new Ext.form.FormPanel({
            renderTo: document.body,
            width:400,
            height:700,
            frame:true,
            items:[{
                xtype: 'textfield',
                fieldLabel: 'First Name'
            },{
                xtype: 'textfield',
                fieldLabel: 'Last Name'
            }],
            listeners:{
                render:function(panel){
                    panel.el.on('keypress',panel.myPanelKeyHandler);
                }
            },
            myPanelKeyHandler:function(e){
                var key = e.getKey();
                if( key === e.ENTER ){
                    Ext.Msg.alert('ENTER Key Pressed!', 'omg!' );
                }else{
                    Ext.Msg.alert('Other Key Pressed!', key );
                }
            }
        });
    
    });
    </script>
    </body>
    </html>
    JSJoy.com - my blog on the joy that is JavaScript!
    Ext Extension: Awesome Uploader - Drag n' Drop Awesome Uploading

  3. #3
    Sencha User
    Join Date
    Nov 2009
    Posts
    58

    Default

    thanks! i will test it

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Also have a look at the 'keys' config option.

  5. #5
    Sencha User
    Join Date
    Nov 2009
    Posts
    58

    Default

    Well... the problem still exists
    I will describe it again:
    I have a form with some fields. When the user hits enter, I want to focus the next field of the form.
    I did the following:
    Code:
    var MyForm = Ext.extend(Ext.form.FormPanel, {
    	initComponent:function() {
    		Ext.apply(this, {
    /*some config options*/
    			defaults: {
    /*some config options*/
    				enableKeyEvents: true,
    			},
    	
    /*some config options*/
    
    	onRender:function() {
    /*code*/
    		this.el.on('keypress', this.onKeyPress, this);
    /*code*/
    	},
    	onKeyPress:function(f,e) {	
    		var key = e.getKey();
    		if( key == e.ENTER ){
    /* Code to select next field on the form*/
    		}
    I tried all three events - keydown, keypress and spatialkey. code works well but not as expected.
    The events keydown, keypress and spatialkey described by two parameters: (Ext.form.TextField this, Ext.EventObject e)

    BUT in this case onKeyPress function is called with only a single parameter - event object. I did not find a function of the form that give me back the current focused field... So I can not focus the next field, because I have no idea which is curennt selected at the moment

    any ideas?
    thanks!

  6. #6
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    You can use e.getTarget() to get the event target. Then you can check if this event target is within the itemCt of one of the fields.

  7. #7
    Sencha User
    Join Date
    Nov 2009
    Posts
    58

    Default

    Thank a lot!!! I got it!

    Code:
    	onKeyPress:function(e) {	
    		var key = e.getKey();
    		if( key == e.ENTER ){
    			var Current = Ext.getCmp(e.getTarget().id);
    			var Next = Current.nextSibling();
    			if (Current === this.GetField('Last_edit_field_id')) {
    				this.GetField('First_edit_field_id').focus();
    			} else {
    // must be wery careful with labels !!!!! 
    				while (Next.isXType('label')) { Next = Next.nextSibling(); };
    				Next.focus();
    			}
    		}
    	},

  8. #8
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    You have to check that 'Current' is defined as a Field (it some cases it can be something else, e.g. HtmlEditor font selection, DateField today button etc.).

  9. #9
    Sencha User
    Join Date
    Nov 2009
    Posts
    58

    Default

    you're right, of course it is necessary
    generally more I use this library, so more I like it

Similar Threads

  1. I need a "specialkey" or "keydown" event, but on a FormPanel
    By emils in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 18 Feb 2011, 5:55 AM
  2. Cannot catch the "keypress" and "specialkey" event.
    By fancing in forum Ext 3.x: Bugs
    Replies: 2
    Last Post: 4 Oct 2010, 5:18 AM
  3. Replies: 3
    Last Post: 28 Oct 2009, 6:38 AM
  4. Replies: 8
    Last Post: 22 Jun 2009, 8:56 PM

Posting Permissions

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