Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Default Button and focus on text field

  1. #1
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    123
    Vote Rating
    0
      0  

    Default Default Button and focus on text field

    Hi,

    I have something which I believe should be really easy... but somehow I cannot get it to work.

    I need two things:
    1) position the focus on the first text field. When I say focus I really mean that the cursor should be placed in the first field.
    2) make the save button the default button. When the user presses return it should be like if he pressed the save button.

    I have a dialog box which has two text fields, one is a "name", the other a "description". I would like to set the cursor in the name field when the dialog box pops up. Also the window has two buttons one save one cancel. I would like the user to be able to type the enter key when he is done and this should do like when he presses save. The esc key should cancel the dialog box.

    I have tried to use name.focus() to position the cursor in the name field. Unfortunately the cursor does not go to the name field. The user cannot type right away the name he wants. He first need to select the text field with the mouse. Also a side focus method is that the field name seems to be validated immediately. Since I do not allow blank in the name field a validation before the user has a chance to enter anything has a really bad effect of showing him an error right away.

    For the default button I have tried using the defaultButton field in the Window element. I have set it to 0 (save button). This seems to work... until I press the name field. i.e. when the name field has focus the default button seems not to work anymore. Also when I set the default button the Esc key is not working anymore!

    Do you have any suggestion how I can do this?


    I tried the following:
    Code:
    var name = new Ext.form.TextField({ fieldLabel: 'Name', name: 'name', msgTarget:'side', 
    						allowBlank:false, blankText: 'Please supply a name',
    						anchor: '90%'});
    var description = new Ext.form.TextField({ fieldLabel: 'Description', name: 'description', anchor: '90%'});
    
    // create form panel
    var formPanel = new Ext.form.FormPanel({
        	baseCls:'x-plain', labelWidth: 70,
        	stateful:false,
            items: [name, description]
    });
    	
    // define window and show it in desktop
    var dialogBox = new Ext.Window({
    	title: 'Save Search...',
    	width: 650,
    	autoHeight:true,
    	resizable:false,
    	modal:true,
    	bodyStyle:'padding:5px;',
    	buttonAlign:'center',
    	stateful:false,
    	items: formPanel,
            defaultButton: 0,
    	buttons: [{
    	     text: 'Save', 
    	     handler: function() {
    	            // check form value 
    	         if (formPanel.form.isValid()) {
                         .....
                    } else{
    		    Ext.MessageBox.alert('Errors', 'Please supply a name.');
    		}             
    	      }
    	},{
    	    text: 'Cancel',
    	    handler: function(){dialogBox.close();}
    	}]
    });
    
    dialogBox.show();
    name.focus();
    Thanks Jean

  2. #2
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    123
    Vote Rating
    0
      0  

    Default How to place cursor in a text field

    Guys it would be so good for my application's users if I could set the cursor (focus) on a given text field.

    How do you do that with ExtJS? With normal HTML it is no problem, e.g. dom.focus(), with this you will see the cursor in the dom field. Very useful if you want to ease the users' experience. With that they can stick to the keyboard and not have to click click all the time.

    If I use focus with ExtJS, I don't see the cursor and the field is validated (before the user had a chance to enter anything), and the user has to click the textField anyway!!!

    There must be something I am doing wrong.

    Can someone please shed some light on this? Thanks a lot....

  3. #3
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,234
    Vote Rating
    1015
      0  

    Default

    You could do something like:

    Code:
    myField.on('render', function()
    {
       myField.getEl().dom.focus();
    }
    );

  4. #4
    Sencha Premium User NoahK17's Avatar
    Join Date
    Apr 2008
    Location
    Atlanta, GA
    Posts
    538
    Vote Rating
    2
      0  

    Default

    I just use...

    PHP Code:
    Ext.getCmp('myFormID').focus(''10); 
    The '10' makes the function wait 10ms before setting focus, so the form has time to render properly.
    Noah
    Front-End Developer
    Norfolk Southern

  5. #5
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    123
    Vote Rating
    0
      0  

    Default SUCCESS

    YES!

    This is what I needed. textField.setFocus('', 10); does it!

    Thank you very much Noah.

    This does indeed what I wanted. Selects the field, and does not trigger the isValid method! GREAT!

  6. #6

    Default

    Quote Originally Posted by BuckBazooka View Post
    This seems to work... until I press the name field. i.e. when the name field has focus the default button seems not to work anymore.
    Puzzled...

    I've tried this and the focus works on the field initially, but then the button loses it's focus so there's no more default button when ENTEr is pressed, so I'm still experiencing the above quote. It seems they're mutually exclusive.

  7. #7
    Ext User deanna's Avatar
    Join Date
    Aug 2007
    Location
    Alabama
    Posts
    306
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by JoyfulBobHome View Post
    Puzzled...

    I've tried this and the focus works on the field initially, but then the button loses it's focus so there's no more default button when ENTEr is pressed, so I'm still experiencing the above quote. It seems they're mutually exclusive.

    I use this to set a button to respond to enter
    PHP Code:
            this.map = new Ext.KeyMap("login-win", [{
                
    key : [1013],
                
    scope this,
                
    fn this.doLoginForm
            
    }]); 
    where this.doLoginForm is the same funtion that the button calls. You also need

    PHP Code:
        doLoginForm : function() {
            var 
    form this.loginPanel.getForm();
            if (!
    form.isValid()) {
                return;
            }
            
    form.submit({
    ... 
    at the top of the function to make sure the form is valid.

  8. #8

    Default

    Thanks for the prompt post! I'll give it a try!

  9. #9
    Ext User
    Join Date
    Nov 2008
    Posts
    2
    Vote Rating
    1
      1  

    Default Set focus to first input field in form in window

    Here's a bit of code which will set focus to the first element of a form in a window, without needing the field id. Very handy in popup dialogs.

    Code:
    app.base.formWin = Ext.extend(Ext.Window,{
                    modal: true,
    
                    // recurse until find an active field, and set focus
                    // to it
                    findFirst: function(item){
                        if (item instanceof Ext.form.Field && !item.hidden && !item.disabled){
                            item.focus(false, 50); // delayed focus by 50 ms
                            return true;
                        }
                        if (item.items && item.items.find) {
                            return item.items.find(this.findFirst,this);
                        }
                        return false;
                    },
                    
                    focus: function(){
                        // set focus to first available field
                        this.items.find(this.findFirst,this);
                    }
    };
    Adapted from http://extjs.com/forum/showthread.ph...083#post148083

    - Chris

  10. #10
    Ext User
    Join Date
    Mar 2010
    Posts
    3
    Vote Rating
    0
      0  

    Default keyMap for moving cursor

    Quote Originally Posted by deanna View Post
    I use this to set a button to respond to enter
    PHP Code:
            this.map = new Ext.KeyMap("login-win", [{
                
    key : [1013],
                
    scope this,
                
    fn this.doLoginForm
            
    }]); 
    where this.doLoginForm is the same funtion that the button calls. You also need

    PHP Code:
        doLoginForm : function() {
            var 
    form this.loginPanel.getForm();
            if (!
    form.isValid()) {
                return;
            }
            
    form.submit({
    ... 
    at the top of the function to make sure the form is valid.
    Hai, i want to make some codding like this too.For my case in object keyMap, key enter i use for move cursor for one textfield to next textfield. But i just don't know how to make function that handle moving cursor like this. Anyone one has idea? tnks

Page 1 of 2 12 LastLast

Posting Permissions

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