ExtJs：defaultFocus 不会将焦点放在表单文本字段上

Question

看到这个 fiddle：https://fiddle.sencha.com/#view/editor&fiddle/36vh。即使通过 #fldxyz 引用组件正确设置了 defaultFocus，组件也没有获得焦点。

Ext.application({
    name : 'myapp',

    // autoCreateViewport is deprecated
    mainView: 'myapp.MyPanel',

    launch : function() {
    }
});

Ext.define('myapp.MyPanel', {
    extend: 'Ext.panel.Panel',          // does not work
//    extend: 'MyPanel',                // works

    layout: 'fit',
    //defaultFocus: '[reference=fld]',
    //defaultFocus: 'textfield:first',
    defaultFocus: '#fldxyz',
    items: [{
        xtype: 'form',
        layout: 'anchor',
        items: [{
            xtype: 'textfield',
            fieldLabel: 'Name',
            value: 'Indigo',
            id: 'fldxyz',
            //reference: 'fld',
            selectOnFocus: true
        }, {
            xtype: 'textfield',
            fieldLabel: 'Last',
            value: 'Montoya'
        }]
    }]
});

我用 6.6.0 和 7.2.0 测试过。

怎么了？

谢谢

Answer 1

在 doc of defaultFocus 中如下：指定子组件在调用此容器的方法焦点方法时接收焦点。 您没有调用 focus() 方法并且它没有聚焦。我已经在 'afterrender' 侦听器事件中添加了它。

Ext.application({
    name : 'myapp',
    mainView: 'myapp.MyPanel'
});

Ext.define('myapp.MyPanel', {
    extend: 'Ext.panel.Panel',
    title: "My Form Panel",
    layout: 'fit',
    defaultFocus: '#fldxyz',
    items: [{
        xtype: 'form',
        layout: 'anchor',
        items: [{
            xtype: 'textfield',
            fieldLabel: 'Name',
            value: 'Indigo',
            id: 'fldxyz',
            selectOnFocus: true
        }, {
            xtype: 'textfield',
            fieldLabel: 'Last',
            value: 'Montoya'
        }]
    }],
    listeners: {
        afterrender: function(formPanel) {
            formPanel.focus();
        }
    }
});

ExtJs：defaultFocus 不会将焦点放在表单文本字段上

ExtJs: defaultFocus does not place the focus on form textfield

extjs