Solved

Set focus on Extjs textfield

Posted on 2012-03-29
7
12,615 Views
Last Modified: 2013-11-11
The situation is that I have a form that pops up when I click on a row in a grid and I want to focus the cursor on the first input field in the form so the end user can start typing right away.  This code be the check box or the 'Requisition Number',
 
 I have Googled this and found this code.
           Ext.getCmp('req_num').focus(false, 200);

However,  I have not been able to get it to work
Where do I insert this line of code in the following form code?

I have aslo tried the 'afterrender' event with out success on the 'Requisition Number',

I am using Ext Js 2.0.

Thanks for the help.  Here is the form code.

CODE BEGINS
  var rForm;
    function rSetForm() {
        if (!rForm) {
            rForm = new Ext.form.FormPanel({
                id: 'rform',
                frame:true,
                autoScroll: true,
                anchor: '100% 100%',
                labelAlign: 'right',
                reader: rEditReader,
                title: '40-1 Entry',
                items: [{
                    id:'rCols',
                    layout:'column',
                    bodyStyle: 'padding-top:0px; padding-bottom: 10px; padding-left:0px; padding-right:5px; text-align: left',
                    items:
                    [{
                        id: 'col-1row-1',
                        columnWidth:1,
                        layout: 'form',
                        bodyStyle: 'padding-top:0px; padding-left:0px; padding-right:5px',
                        labelWidth:150,
                        items:
                        [{
                            id: 'rReqId',
                            xtype: 'hidden',
                            value: Toa.Application.reqId,
                            name: 'req_id'
                        },{
                            id: 'rProjId',
                            xtype: 'hidden',
                            value: Toa.Application.projId,
                            name: 'proj_id'
                        },{
                            id: 'toMod',
                            xtype: 'fieldset',
                            name: 'toMod',
                            checkboxName:'toMod-checkbox',
                            checkboxToggle:true,
                            title: 'Is this a modification to an existing Task Order? (Checked = Yes)',
                            autoHeight:true,
                            defaults: {
                                width: 100
                            },
                            collapsed: true,
                            listeners:{
                            },
                            bodyStyle: 'padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px',
                            items : parentKCombo
                        }]
                    },{
                        id: 'col-1row2',
                        columnWidth:.5,
                        layout: 'form',
                        bodyStyle: 'padding-top:0px; padding-bottom: 10px; padding-left:0px; padding-right:5px',
                        labelWidth:150,
                        items: [ {
                            id: 'rReqNum',
                            xtype: 'textfield',
                            name: 'req_num',
                            fieldLabel: 'Requisition Number',
                            disabled: false,
                            grow: false,
                            width: '150',
                            minLength: '4',
                            maxLength: '100',
                            style: 'margin-top: 2px; margin-bottom: 1px; margin-left: 1px',
                            allowBlank:false,
                            listeners: {
                                afterrender: function(field) {
                                    field.focus(false, 4000);
                                }
                            }

                    },
                    {
                        xtype: 'combo',
                        id: 'rCtrCombo',
                        fieldLabel: 'Contractor',
                        mode: 'local',
                        triggerAction: 'all',
                        store: ctrStore,
                        displayField: 'display',
                        valueField: 'value',
                        editable: false,
                        selectOnFocus: true,
                        hiddenName: 'ctr_id',
                        autoWidth: true,
                        allowBlank: false,
                        forceSelection: true,
                        style: 'margin: 0px',
                        listeners: {
                            select: function(combo, record) {
                                rWin.getComponent('rform').getForm().findField('con_num').setValue(record.get('conNum'));
                                rWin.getComponent('rform').getForm().findField('con_id').setValue(record.get('conId'));
                            }
                        }
                    }
                    ,{
                        id: 'rRequestDt',
                        xtype: 'datefield',
                        name: 'request_dt',
                        format: 'm/d/Y',
                        style: 'margin: 0px',
                        allowBlank: false,
                        fieldLabel: 'Request Date'
                    },{
                        id: 'rRegionNotifDt',
                        xtype: 'datefield',
                        name: 'region_notif_dt',
                        format: 'm/d/Y',
                        style: 'margin:0px',
                        fieldLabel: 'Region Notified Date'
                    },
                    new Ext.form.ComboBox({
                        id: 'rsvcCombo',
                        mode: 'local',
                        triggerAction: 'all',
                        store: svcStoreReq,
                        displayField: 'display',
                        valueField: 'value',
                        editable: false,
                        selectOnFocus: true,
                        hiddenName: 'svc_type_id',
                        autoWidth: true,
                        forceSelection: true,
                        style: 'margin: 0px',
                        allowBlank: false,
                        listeners: {
                            select: function (combo, record, index) {
                                if (record.get('display') == 'INCENTIVE') {
                                    Ext.getCmp ('rparent40').show();
                                    Ext.getCmp ('rparent40').getEl().up('div.x-form-element').prev('label').show(); //shows the label
                                    Ext.getCmp ('rparent40').syncSize();
                                }
                                else {
                                    Ext.getCmp ('rparent40').hide();
                                    Ext.getCmp ('rparent40').getEl().up('div.x-form-element').prev('label').hide(); //hides the label
                                    Ext.getCmp ('rparent40').syncSize();
                                }
                            }
                        },
                        fieldLabel: 'Service Type'
                    })
                    ,
                    new Ext.form.ComboBox({
                        id: 'rparent40',
                        mode: 'local',
                        triggerAction: 'all',
                        store: parentReqStore,
                        displayField: 'display',
                        valueField: 'value',
                        editable: false,
                        selectOnFocus: true,
                        hiddenName: 'parent_40_id',
                        autoWidth: true,
                        forceSelection: true,
                        style: 'margin: 0px',
                        hidden: false,
                        fieldLabel: 'Parent 40 Rec'
                    })
                    ,{   // Row Three ----------------------------------------------
                        id: 'rAllocRequestDt',
                        xtype: 'datefield',
                        name: 'alloc_request_dt',
                        format: 'm/d/Y',
                        style: 'margin-top: 0px; margin-bottom: 2px; margin-left: 0px',
                        fieldLabel: 'Alloc. Request Date'
                    //width: 165
                    },{   // Row Four ----------------------------------------------
                        id: 'rHqNotifDt',
                        xtype: 'datefield',
                        name: 'hq_notif_dt',
                        format: 'm/d/Y',
                        style: 'margin-top: 0px; margin-bottom: 2px; margin-left: 0px',
                        fieldLabel: 'HQ Notified Date'
                    //width: 165

                    },{   // Row Eight ----------------------------------------------
                        id: 'restStartDt',
                        xtype: 'datefield',
                        name: 'est_start_dt',
                        format: 'm/d/Y',
                        style: 'margin: 0px',
                        fieldLabel: 'Estimated Start Date'
                    //width: 165
                    },{
                        id: 'rEstEndDt',
                        xtype: 'datefield',
                        name: 'est_end_dt',
                        format: 'm/d/Y',
                        style: 'margin-top: 0px; margin-bottom: 2px',
                        fieldLabel: 'Estimated End Date'
                    }]
                },{
                    id: 'col-1row-2',
                    columnWidth:.5,
                    layout: 'form',
                    bodyStyle: 'padding-top:0px; padding-bottom: 10px; padding-left:0px; padding-right:5px',
                    labelWidth:200,
                    items: [
                    new Ext.form.NumberField ({
                        id: 'rFiscalYr',
                        name: 'fiscal_yr',
                        style: 'margin-top: 2px; margin-left: 1px; text-align: right',
                        minLength: '4',
                        minLengthText: 'This is a year field and must have four(4) digits',
                        maxLength: '4',
                        maxLengthText: 'This is a year field and can only have four(4) digits',
                        allowDecimals: false,
                        allowBlank: false,
                        fieldLabel: 'Fiscal Year'
                    })
                    ,{   // Row Two
                        id: 'rContractDisplay',
                        xtype: 'textfield',
                        name: 'con_num',
                        style: 'margin-top: 2px; margin-left: 1px',
                        disabled: true,
                        fieldLabel: 'Contract Number'
                    },{   // Row Two
                        id: 'rContractId',
                        xtype: 'hidden',
                        name: 'con_id',
                        fieldLabel: 'Contract Id'
                    },{   // Row Five
                        id: 'Space1',
                        xtype: 'panel',   // This is used to add a space in the form
                        bodyStyle: 'padding-top:24px; padding-left:0px; padding-right:5px; background-color:#F4FBED',
                        disable:false
                    },   // Row Six
                    new Ext.form.NumberField ({
                        id: 'rQty',
                        name: 'req_qty',
                        style: 'margin-top: 2px; margin-left: 1px; text-align: right',
                        maxLength: '20',
                        maxLengthText: 'This is field and can only have twenty(20) digits',
                        allowDecimals: false,
                        allowBlank: true,
                        listeners: {
                            'valid': function (field) {
                                var f1 = (field.getValue())*1;
                                var f2 = (Ext.getCmp ("rUnitCost").getValue())*1;
                                if ((f1 >= 0) && (f2 >= 0)) {
                                    Ext.getCmp('rGrossCost').setValue(f1*f2);
                                }
                            },
                            'change': function (field) {
                                var f1 = (field.getValue())*1;
                                var f2 = (Ext.getCmp ("rUnitCost").getValue())*1;
                                if ((f1 >= 0) && (f2 >= 0)) {
                                    Ext.getCmp ("rOverrideCost").setValue('');
                                }
                            }
                        },
                        fieldLabel: '40-1 Quantity'
                    })
                    ,
                    new Ext.form.NumberField ({
                        id: 'rUnitCost',
                        name: 'req_unit_cost',
                        style: 'margin-top: 2px; margin-left: 1px; text-align: right',
                        maxLength: '20',
                        maxLengthText: 'This is field and can only have twenty(20) digits',
                        allowDecimals: true,
                        decimalPrecision: '2',
                        allowBlank: true,
                        listeners: {
                            'valid': function (field) {
                                var f1 = field.getValue()*1;
                                var f2 = Ext.getCmp ("rQty").getValue()*1;
                                if ((f1 >= 0) && (f2 >= 0)) {
                                    Ext.getCmp('rGrossCost').setValue(f1*f2);
                                }
                            },
                            'change': function (field) {
                                var f1 = field.getValue()*1;
                                var f2 = Ext.getCmp ("rQty").getValue()*1;
                                if ((f1 >= 0) && (f2 >= 0)) {
                                    Ext.getCmp ("rOverrideCost").setValue('');
                                }
                            }
                        },
                        fieldLabel: '40-1 Unit Cost'
                    })
                    ,{   // Row Seven
                        id: 'rGrossCost',
                        xtype: 'textfield',
                        name: 'req_gross_cost',
                        fieldLabel: 'Total Estimated Cost',
                        decimalPrecision: '2',
                        vtype: 'numeric2D',
                        disabled: true,
                        style: 'margin: 0px; margin-left: 1px; text-align: right',
                        allowBlank:true
                    },
                    new Ext.form.NumberField ({
                        id: 'rOverrideCost',
                        name: 'req_override_cost',
                        style: 'margin: 0px; margin-left: 1px; text-align: right',
                        maxLength: '20',
                        maxLengthText: 'This is field and can only have twenty(20) digits',
                        allowDecimals: true,
                        decimalPrecision: '2',
                        listeners: {
                            'change': function (field) {
                                Ext.getCmp ("rQty").setValue('');
                                Ext.getCmp ("rUnitCost").setValue('');
                                Ext.getCmp ('rGrossCost').setValue('');
                            }
                        },
                        allowBlank:true,
                        fieldLabel: 'Override Total Cost'
                    })
                    ]
                },{
                    id: 'col-1row-3',
                    columnWidth:1,
                    layout: 'form',
                    bodyStyle: 'padding-top:0px; padding-left:0px; padding-right:5px',
                    labelWidth:150,
                    items: [ {
                        id: 'rDescription',
                        xtype: 'textarea',
                        name: 'description',
                        style: 'margin-top: 2px; margin-left: 1px',
                        width: '500',
                        grow: true,
                        growMin: '75',
                        growMax: '300',
                        maxLength: '1000',
                        maxLengthText: 'This field can have a maximum of 1000 characters',
                        allowBlank: true,
                        fieldLabel: 'Description'
                    },{
                        id: 'rComment',
                        xtype: 'textarea',
                        name: 'comments',
                        style: 'margin-top: 2px; margin-left: 1px',
                        width: '500',
                        grow: true,
                        growMin: '75',
                        growMax: '300',
                        allowBlank:true,
                        fieldLabel: 'Comments'
                    }]
                }]
            }] //Item Element 1 end
            });
    }
    return rForm;
CODE ENDS
0
Comment
Question by:capturetheflag
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
7 Comments
 
LVL 1

Author Comment

by:capturetheflag
ID: 37787443
I am new to ExtJS and I want to set focus on a text field in a new (pop up) Ext.window .  
I am getting the focus on the field now but, I am not able to tab to the other fields.  The focus always returns to the first field.  I have tried other things in the listner but only 'Valid' seems to work so far and I do not need to validate this field.

 Here is the code thanks for your help.

                        id: 'col-1row2',
                        columnWidth:.5,
                        layout: 'form',
                        bodyStyle: 'padding-top:0px; padding-bottom: 10px; padding-left:0px; padding-right:5px',
                        labelWidth:150,
                        items: [ {
                            id: 'rReqNum',
                            xtype: 'textfield',
                            name: 'req_num',
                            fieldLabel: 'Requisition Number',
                            disabled: false,
                           grow: false,
                            width: '150',
                            minLength: '4',
                            maxLength: '100',
                            style: 'margin-top: 2px; margin-bottom: 1px; margin-left: 1px',
                            allowBlank:false,
                            listeners: {
                                'valid': function (field) {
                                    var f = Ext.get('req_num');
                                    f.focus.defer(1000, f);
                                }
                            }
                        }
0
 
LVL 1

Author Comment

by:capturetheflag
ID: 37787504
Hello again,

Should I insert this code:

Ext.getCmp('req_num').focus(false, 500);

In this code that shows the new window:

 rWin.show(Ext.getBody());

Thanks for your help.
0
 
LVL 1

Author Comment

by:capturetheflag
ID: 37787691
OR do i set the focus somewhere in here?

    var rWin;
    this.rWindow = function () {
        if (!rWin) {
            rWin = new Ext.Window(
            {
                id: 'rWindow',
                layout:'anchor',
                width:850,
                height:540,
                modal: true,
                closable: false,
                closeAction:'hide',
                plain: true,
                items: rForm,
                tbar: [rDeleteAction],
                monitorResize: true,
                buttons: rWinButtons
            });
        }
        rWin.doLayout();
        rWin.show(Ext.getBody());
    };
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 9

Expert Comment

by:Shaun McNicholas
ID: 37791251
I've found that focus should be handled in separate functions. You might try creating your form in one function and then on the completion of that form do a separate function to set the focus. That way it's happening after the form has been created in the DOM.

Also you should set some kind of condition like a hidden field that tells JavaScript that the focus function has already fired once. Just create a hidden field called focus set and in the same function where you're telling JavaScript to set the focus, check the valua of this hidden field. So on the first focus you set the hidden field to yes. You focus function would be something like this

Function setfocusField() {
var focusIsSet = document.getElementByID('focusset').value;
If (focusIsSet!='Yes') { document.getElementByID('focusset').value='Yes';
 document.getElementByID('fieldToFocusCursor').focus();
}

This way you've set a value in the form where once its occurred the first time it will be ignored for the remainder of the page's actions.
0
 
LVL 1

Accepted Solution

by:
capturetheflag earned 0 total points
ID: 37902723
None of the solutions worked for me.

capture the flag
0
 
LVL 1

Author Closing Comment

by:capturetheflag
ID: 37918431
None of the solutions worked for me.
0

Featured Post

Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Tools for analysis of code 4 51
Hta File displays dynamic File names 4 52
Problem in javascript 17 32
Javascript: Range object 16 17
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

697 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question