1. #1
    Ext User
    Join Date
    Jul 2009
    Posts
    30
    Vote Rating
    0
    rehanazher is on a distinguished road

      0  

    Default Focus on text Field

    Focus on text Field


    Hi All,

    I have some textfields on a form , after submitting the form if its a failure i want to set focus to a particular text field and select the text all text in the field.

    i have tried following but not working:

    Code:
    Ext.getCmp('raddName').focus();
    Ext.fly('raddName').focus();
    where raddName is the id as well as the name of textfield.

    Thanks in advance .

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    The first one should work if 'raddName' is the id of the TextField.

  3. #3
    Ext User
    Join Date
    Jul 2009
    Posts
    30
    Vote Rating
    0
    rehanazher is on a distinguished road

      0  

    Default Focus on text Field

    Focus on text Field


    Hi Condor,

    Thanks for the quick reply, below is my code I can not find it still working , can you please check it for any problem.


    Code:
    function NewRackType(){
    		var Newrack = new Ext.FormPanel({
    	 	labelWidth:90,
    		url:'process.php', 
            frame:true, 
            title:'New Rack Type', 
    		defaultType:'textfield',
    		monitorValid:true,
    		items:[{
    			xtype: 'textfield',
    			fieldLabel: 'Rack Type',
    			labelStyle: 'font-weight:bolder;',
    			name: 'raddName',
    			id: 'raddName',
    			allowBlank: false,
    			width: 200
    		},{
    			xtype: 'hidden',
    			name: 'newRack',
    			width: 200,
    			value: '1'
    		}],
    		// All the magic happens after the user clicks the button     
    		buttons:[{ 
    			text:'Add',
    			formBind: true,	 
    			handler:function(){ 
    				Newrack.getForm().submit({ 
    					method:'POST', 
    					success:function(){ 
    						Ext.Msg.alert('Status', 'PoP Added Sucessfully!', function(btn, text){
    							if (btn == 'ok'){
    								Newrack.getForm().reset(); 
    							}
    						});
    					},
    					failure:function(form, action){ 
    						if(action.failureType == 'server'){ 
    							obj = Ext.util.JSON.decode(action.response.responseText); 
    							Ext.Msg.show({
    								title: 'Error!',
      								msg: 'Add New Rack Type Failed! <br> '+obj.errors.reason,
    								icon: Ext.MessageBox.ERROR,
    								buttons: Ext.MessageBox.OK
    							}); 
    							Ext.getCmp('raddName').focus();
    							//Ext.fly('raddName').focus();
    						}else{ 
    							Ext.Msg.show({
    								title: 'Error!',
      								msg: 'Add New Rack Type Failed! <br> Server is Unreachable:'+action.response.responseText,
    								icon: Ext.MessageBox.ERROR,
    								buttons: Ext.MessageBox.OK
    							});
    					
    							
    						} 
    
    					} 
    				}); 
    			} 
    		},{
    			text:'Reset',
    			formBind: true,	 
    			handler: function(){
    				Newrack.getForm().reset();
    			}
    		},{
    			text:'Close',
    			//formBind: true,	 
    			handler: function(){
    				win.hide();
    			}
    		}
    		] 		
    	});
    	  var win = new Ext.Window({
            layout:'fit',
            width:350,
    		height: 220,
            closable: false,
            resizable: false,
            plain: true,
            border: false,
            items: [Newrack]
    	});
    	win.show();
    }

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Focus the textfield in the fn of the messagebox (the OK button needs the focus first).

  5. #5
    Ext User
    Join Date
    Jul 2009
    Posts
    30
    Vote Rating
    0
    rehanazher is on a distinguished road

      0  

    Default


    Hi,

    I am a newbie to EXtJS, can you please help with just putting a code help.

    Thanks,

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Code:
    Ext.Msg.show({
        title: 'Error!',
        msg: 'Add New Rack Type Failed! <br> '+obj.errors.reason,
        icon: Ext.MessageBox.ERROR,
        buttons: Ext.MessageBox.OK,
        fn: function(btn){
            Ext.getCmp('raddName').focus();
        }
    });
    (now it gets the focus after you press OK)

  7. #7
    Ext User
    Join Date
    Jul 2009
    Posts
    30
    Vote Rating
    0
    rehanazher is on a distinguished road

      0  

    Default Focus on text Field

    Focus on text Field


    Thanks Condor ,

    Now focus is working but how to select the text in the text field.

    Thanks again for your quick help.

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Code:
    Ext.getCmp('raddName').focus(true);

  9. #9
    Ext User
    Join Date
    Jul 2009
    Posts
    30
    Vote Rating
    0
    rehanazher is on a distinguished road

      0  

    Default Focus on text Field

    Focus on text Field


    dumb me , should read the documents .

    Thanks for the help Condor, its working now.

  10. #10
    Sencha User
    Join Date
    Nov 2013
    Posts
    2
    Vote Rating
    0
    ssh_hameed is on a distinguished road

      0  

    Default Focus on text field not working when change tab and page load.

    Focus on text field not working when change tab and page load.


    Hi Friends

    Am using tab panel, it contain 3 tabs with tbar text box. If select anyone panel, focus to that panel text box. But it not woking when page load and press tab panel Only. Am used like this
    Ext.getCmp('id_text').focus(true);
    Ext.getCmp('id_text').focus().

    Its working after when press any button in that panel. Not working only when change that tab,

    listeners: {
    'tabchange': function (tabPanel, tab) {
    Ext.getCmp('id_text').focus(true);
    // Ext.getCmp('id_text').focus().
    }
    }


    thanx advance.............

Thread Participants: 2