Results 1 to 7 of 7

Thread: How to set focus in the form field

  1. #1
    Sencha User
    Join Date
    Nov 2008
    Posts
    33

    Default How to set focus in the form field

    Hi Guys,

    is there any way to set the field focus to a specified field when the form is showed ?


    i tried this but does not work :

    PHP Code:
    frmContent.on('load', function(){
                var 
    name frmContent.findById('name');
                
    name.focus();
            }, 
    this, {
                
    buffer20
            
    }) 
    thanks in advance !!

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    try this and remember to read the API docs first

    Code:
    new Ext.FormPanel({
    	title       : "Simple Form",
    	width       : 350,
    	defaults    : {width: 230},
    	defaultType : "textfield",
    	items       : [{
    		fieldLabel : "Name",
    		id         : "name",
    		name       : "name",
    		allowBlank : false
    	},{
    		fieldLabel : "Company",
    		id         : "company",
    		name       : "company"
    	}, {
    		fieldLabel : "Email",
    		id         : "email",
    		name       : "email",
    		vtype      : "email"
    	}],
    	listeners :  {
    		afterrender : function(form) {
    			form.getComponent("name").focus();
    		}
    	}
    });
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User
    Join Date
    Nov 2008
    Posts
    33

    Default

    hi and thanks for helping .. tried but seems doesn not work!!

    here is my code .. :

    PHP Code:
    var frmContent = new Ext.FormPanel({
                
    title'TITLE',
                
    id'frmContent',
                
    bodyStyle'padding:15px;background:transparent',
                
    borderfalse,
                
    waitMsgTargettrue,
                
    items: [{
                    
    xtype'textfield',
                    
    fieldLabel'Variabile',
                    
    name'name',
                    
    id'name',
                    
    anchor'95%',
                    
    allowBlankfalse
                
    }, {
                    
    xtype'combo',
                    
    storecomboStore,
                    
    displayField'Lingua',
                    
    valueField'Id',
                    
    hiddenName'id',
                    
    editablefalse,
                    
    mode'remote',
                    
    forceSelectiontrue,
                    
    triggerAction'all',
                    
    fieldLabel'Lingua',
                    
    emptyText'Seleziona una lingua ... ',
                    
    selectOnFocustrue,
                    
    anchor'95%'
                
    }, {
                    
    xtype'textfield',
                    
    fieldLabel'Valore',
                    
    name'value',
                    
    anchor'95%'
                
    }],
                
    listeners: {
                    
    afterrender : function(form) {
                           
    form.getComponent('name').focus();
                   }
                },
                
    buttons: [{
                    
    text'Inserisci',
                    
    iconCls'icon-save',
                    
    handler: function(){
                        
    frmContent.form.submit({
                            
    url'myurl',
                            
    waitMsg'Inserimento dati ...',
                            
    success: function(formaction){
                                
    frmContent.form.reset();
                            },
                            
    failure: function(formaction){
                                
    Ext.MessageBox.alert('Errore''Problemi durante l\'inserimento');
                                
    win.close();
                            }
                        });
                    }
                }, {
                    
    text'Chiudi',
                    
    iconCls'silk-appgo',
                    
    handler: function(){
                        
    win.close();
                    }
                }]
            });

    win = new Ext.Window({
                            
    layout'form',
                            
    autoHeighttrue,
                            
    width400,
                            
    closeAction'hide',
                            
    items: [frmContent]
                        });
                        
    win.show(); 

  4. #4
    Sencha User
    Join Date
    Nov 2008
    Posts
    33

    Default

    hi and thanks for helping .. tried but seems doesn not work!!

    here is my code .. :

    PHP Code:
    var frmContent = new Ext.FormPanel({
                
    title'TITLE',
                
    id'frmContent',
                
    bodyStyle'padding:15px;background:transparent',
                
    borderfalse,
                
    waitMsgTargettrue,
                
    items: [{
                    
    xtype'textfield',
                    
    fieldLabel'Variabile',
                    
    name'name',
                    
    id'name',
                    
    anchor'95%',
                    
    allowBlankfalse
                
    }, {
                    
    xtype'combo',
                    
    storecomboStore,
                    
    displayField'Lingua',
                    
    valueField'Id',
                    
    hiddenName'id',
                    
    editablefalse,
                    
    mode'remote',
                    
    forceSelectiontrue,
                    
    triggerAction'all',
                    
    fieldLabel'Lingua',
                    
    emptyText'Seleziona una lingua ... ',
                    
    selectOnFocustrue,
                    
    anchor'95%'
                
    }, {
                    
    xtype'textfield',
                    
    fieldLabel'Valore',
                    
    name'value',
                    
    anchor'95%'
                
    }],
                
    listeners: {
                    
    afterrender : function(form) {
                           
    form.getComponent('name').focus();
                   }
                },
                
    buttons: [{
                    
    text'Inserisci',
                    
    iconCls'icon-save',
                    
    handler: function(){
                        
    frmContent.form.submit({
                            
    url'myurl',
                            
    waitMsg'Inserimento dati ...',
                            
    success: function(formaction){
                                
    frmContent.form.reset();
                            },
                            
    failure: function(formaction){
                                
    Ext.MessageBox.alert('Errore''Problemi durante l\'inserimento');
                                
    win.close();
                            }
                        });
                    }
                }, {
                    
    text'Chiudi',
                    
    iconCls'silk-appgo',
                    
    handler: function(){
                        
    win.close();
                    }
                }]
            });

    win = new Ext.Window({
                            
    layout'form',
                            
    autoHeighttrue,
                            
    width400,
                            
    closeAction'hide',
                            
    items: [frmContent]
                        });
                        
    win.show(); 

  5. #5
    Sencha User
    Join Date
    Nov 2008
    Posts
    33

    Default

    hi and thanks for helping .. tried but seems doesn not work!!

    here is my code .. :

    PHP Code:
    var frmContent = new Ext.FormPanel({
                
    title'TITLE',
                
    id'frmContent',
                
    bodyStyle'padding:15px;background:transparent',
                
    borderfalse,
                
    waitMsgTargettrue,
                
    items: [{
                    
    xtype'textfield',
                    
    fieldLabel'Variabile',
                    
    name'name',
                    
    id'name',
                    
    anchor'95%',
                    
    allowBlankfalse
                
    }, {
                    
    xtype'combo',
                    
    storecomboStore,
                    
    displayField'Lingua',
                    
    valueField'Id',
                    
    hiddenName'id',
                    
    editablefalse,
                    
    mode'remote',
                    
    forceSelectiontrue,
                    
    triggerAction'all',
                    
    fieldLabel'Lingua',
                    
    emptyText'Seleziona una lingua ... ',
                    
    selectOnFocustrue,
                    
    anchor'95%'
                
    }, {
                    
    xtype'textfield',
                    
    fieldLabel'Valore',
                    
    name'value',
                    
    anchor'95%'
                
    }],
                
    listeners: {
                    
    afterrender : function(form) {
                           
    form.getComponent('name').focus();
                   }
                },
                
    buttons: [{
                    
    text'Inserisci',
                    
    iconCls'icon-save',
                    
    handler: function(){
                        
    frmContent.form.submit({
                            
    url'myurl',
                            
    waitMsg'Inserimento dati ...',
                            
    success: function(formaction){
                                
    frmContent.form.reset();
                            },
                            
    failure: function(formaction){
                                
    Ext.MessageBox.alert('Errore''Problemi durante l\'inserimento');
                                
    win.close();
                            }
                        });
                    }
                }, {
                    
    text'Chiudi',
                    
    iconCls'silk-appgo',
                    
    handler: function(){
                        
    win.close();
                    }
                }]
            });

    win = new Ext.Window({
                            
    layout'form',
                            
    autoHeighttrue,
                            
    width400,
                            
    closeAction'hide',
                            
    items: [frmContent]
                        });
                        
    win.show(); 

  6. #6
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    Little button click happy are ya?

    That's because you have it placed in a window and that's going to mess with the focus. If you were to remove the window and add renderTo: Ext.getBody() to the form then it will focus correctly.

    To get it to work in a window, you will come into trouble if you use afterrender or show event also as there is a "lag" in the time it takes the window to actually show and when everything is rendered. Luckily, there is a delay option in the focus function. Here is how I got your form to display in a window and have it focus on the first textfield:

    Code:
    new Ext.Window({ 
    	autoHeight: true,
    	width: 400,
    	closeAction: 'hide',
    	items: [{
    		xtype: "form",
    		title: 'TITLE',
    		id: 'frmContent',
    		bodyStyle: 'padding:15px;background:transparent',
    		border: false,
    		waitMsgTarget: true,
    		items: [{
    			xtype: 'textfield',
    			fieldLabel: 'Variabile',
    			name: 'name',
    			id: 'name',
    			anchor: '95%',
    			allowBlank: false
    		},{
    			xtype: 'combo',
    			store: comboStore,
    			displayField: 'Lingua',
    			valueField: 'Id',
    			hiddenName: 'id',
    			editable: false,
    			mode: 'remote',
    			forceSelection: true,
    			triggerAction: 'all',
    			fieldLabel: 'Lingua',
    			emptyText: 'Seleziona una lingua ... ',
    			selectOnFocus: true,
    			anchor: '95%'
    		},{
    			xtype: 'textfield',
    			fieldLabel: 'Valore',
    			name: 'value',
    			anchor: '95%'
    		}],
    		buttons: [{
    			text: 'Inserisci',
    			iconCls: 'icon-save',
    			handler: function(){
    				frmContent.form.submit({
    					url: 'myurl',
    					waitMsg: 'Inserimento dati ...',
    					success: function(form, action){
    						frmContent.form.reset();
    					},
    					failure: function(form, action){
    						Ext.MessageBox.alert('Errore', 'Problemi durante l\'inserimento');
    						win.close();
    					}
    				});
    			}
    		},{
    			text: 'Chiudi',
    			iconCls: 'silk-appgo',
    			handler: function(){
    				win.close();
    			}
    		}]
    	}],
    	listeners: {
    		show : function(win) {
    			Ext.getCmp("name").focus("", 1000);
    		}
    	}
    }).show();
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  7. #7
    Sencha User
    Join Date
    Nov 2008
    Posts
    33

    Default

    tried and worked perfectly !! thank you so much
    ps .. i had a lot of problem yesterday when i tried to reply to your post .. sorry for posting three times .. cheers

Similar Threads

  1. Set focus on text field: where is the cursor?
    By Gunmen in forum Ext 2.x: Help & Discussion
    Replies: 12
    Last Post: 14 Feb 2011, 6:37 AM
  2. ComboBox selected value not set when changing field focus
    By spotk in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 24 Nov 2008, 11:10 PM
  3. how to set focus on a field in a dialog?
    By bwang_dal in forum Ext 2.x: Help & Discussion
    Replies: 20
    Last Post: 3 Mar 2008, 4:13 AM
  4. How to set focus on required field
    By dlbjr in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 6 Feb 2008, 6:28 AM

Posting Permissions

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