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's answer和Tanel's answer，我尝试了许多方法并找到了一种方法。这是代码：

{
    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

尝试添加以下属性：

hasfocus:true,

并使用以下功能：

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

{
    id: 'fist_name',
    xtype: 'textfield',
    hasfocus:true,
}

Answer 5

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

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

之后

Answer 6

我今天一直在努力解决这个问题，我想我得到了解决方案。诀窍是在表单面板上调用focus()方法后使用show()方法。也就是说，为show事件添加一个监听器：

Ext.define('My.form.panel', {
    extend: 'Ext.form.Panel',
    initComponent: function() {
        this.on({
            show: function(formPanel, options) {
                formPanel.down('selector-to-component').focus(true, 10);
            }
    });
    }
});

Answer 7

我一直在努力将重点放在Internet Explorer的文本框上（因为上述建议在chrome和Firefox中运行良好）。尝试了上面在此页面上建议的解决方案，但它们都没有在IE中工作。经过这么多研究后，我得到了适合我的解决方法，我希望它对其他人也有帮助：

使用focus(true)或者如果您想延迟这一点，请简单地使用focus(true, 200)。在上述问题的参考中，代码将是：

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

Answer 8

对我有用。在文本字段或文本区域中，添加侦听器配置：

listeners:{
            afterrender:'onRender'
        }

之后，在控制器中编写函数：

onRender:function(field){
    Ext.defer(()=>{
        field.focus(false,100);
    },1);
}

Ext.defer被包装为 setTimout（）。没有 Ext.defer（） field.focus（） 不起作用，我也不为什么。您不能在 listeners 配置中编写该函数，而不能使用控制器的函数名，但是好的做法是将函数保留在组件的控制器中。祝你好运。

Answer 9

我的表格在一个窗口内，除非我首先聚焦窗口，否则文本字段不会聚焦。

                listeners: {
                    afterrender: {
                        fn: function(component, eOpts){
                            Ext.defer(function() {
                                if (component.up('window')){
                                    component.up('window').focus();
                                }
                                component.focus(false, 100);
                            }, 30, this);
                        },
                        scope: me
                    }
                }

Answer 10

使用calculate_total(75, 12)事件。在元素上设置一个标志，以防止多次聚焦以确保稳定性。

afterlayout

Answer 11

UIManager.SetFocusTo = function (row, column) {
    var grd = Ext.getCmp('gridgrn');
    grd.editingPlugin.startEditByPosition({ 'column': column, 'row': row });

}

将重点放在Extjs文本字段上

11 个答案: