将重点放在Extjs文本字段上

Question

目前我在设置焦点在extjs文本字段时遇到了问题.当表单显示时,我想将焦点设置为名字文本框,我尝试在函数focus()中使用build但仍然无法使其工作.我很高兴看到你的建议.

var simple = new Ext.FormPanel({

    labelWidth: 75, 
    url:'save-form.php',
    frame:true,
    title: 'Simple Form',
    bodyStyle:'padding:5px 5px 0',
    width: 350,
    defaults: {width: 230},
    defaultType: 'textfield',
    items: [{
            fieldLabel: 'First Name',
            name: 'first',
            id: 'first_name',
            allowBlank:false
        },{
            fieldLabel: 'Last Name',
            name: 'last'
        },{
            fieldLabel: 'Company',
            name: 'company'
        }, {
            fieldLabel: 'Email',
            name: 'email',
            vtype:'email'
        }, new Ext.form.TimeField({
            fieldLabel: 'Time',
            name: 'time',
            minValue: '8:00am',
            maxValue: '6:00pm'
        })
    ],

    buttons: [{
        text: 'Save'
    },{
        text: 'Cancel'
    }]
});

simple.render(document.body);

Answer 1

有时在聚焦时增加一点延迟会有所帮助.这是因为某些浏览器(肯定是Firefox 3.6)需要一些额外的时间来呈现表单元素.

请注意,ExtJS的focus()方法接受defer作为参数,因此请尝试:

Ext.getCmp('first_name').focus(false, 200);

Answer 2

根据Pumbaa80的回答和Tanel的回答,我尝试了很多东西并找到了一种方法.这是代码:

{
    fieldLabel: 'First Name',
    name: 'first',
    id: 'first_name',
    allowBlank: false,
    listeners: {
      afterrender: function(field) {
        field.focus(false, 1000);
      }
    }
}

Answer 3

如果要在渲染表单后设置焦点,则应对文本字段使用"afterrender"事件.

    {
        fieldLabel: 'First Name',
        name: 'first',
        id: 'first_name',
        allowBlank: false,
        listeners: {
          afterrender: function(field) {
            field.focus();
          }
        }
    }

Answer 4

为什么不直接添加defaultFocus : '#first_name'而不是添加多行代码？

或者，在this.callParent(arguments);添加这一行之后Ext.getCmp('comp_id').focus('', 10);