javascript - HTMLEditor 将光标聚焦在文本区域内

Question

我有一个简单的面板，里面有一个 HTML 编辑器。

我只想将光标聚焦在组件的文本区域内。
我尝试将其集中在渲染后，以将组件设置为默认焦点，但我无法使其工作。

这是我的代码，我该怎么办？是否有可能将此文本区域设置为焦点？

Ext.define('MyApp.view.MyViewport', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.myviewport',

    requires: [
        'MyApp.view.MyViewportViewModel',
        'Ext.panel.Panel',
        'Ext.form.field.HtmlEditor'
    ],

    viewModel: {
        type: 'myviewport'
    },
    layout: 'fit',

    items: [
        {
            xtype: 'panel',
            layout: 'fit',
            title: 'My Panel',
            items: [
                {
                    xtype: 'htmleditor',
                    height: 150,
                    id: 'myEditor',
                    fieldLabel: 'Label'
                }
            ]
        }
    ]

});

也尝试过这个

{
   xtype: 'htmleditor',
   height: 150,
   id: 'myEditor',
   fieldLabel: 'Label',
   listeners: {
       afterrender: 'onMyEditorAfterRender'
   }
}



Ext.define('MyApp.view.MyViewportViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.myviewport',

    onMyEditorAfterRender: function(component, eOpts) {
        component.focus();
    }

});

问题似乎出在我正在使用的浏览器上，第二个代码可以在 Firefox 上运行，但不能在 chrome 和 Edge 上运行

Answer 1

Afterrender事件可以做到

Ext.define('MyApp.view.MyViewport', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.myviewport',

    requires: [
        'MyApp.view.MyViewportViewModel',
        'Ext.panel.Panel',
        'Ext.form.field.HtmlEditor'
    ],

    viewModel: {
        type: 'myviewport'
    },
    layout: 'fit',

    items: [
        {
            xtype: 'panel',
            layout: 'fit',
            title: 'My Panel',
            items: [
                {
                    xtype: 'htmleditor',
                    height: 150,
                    id: 'myEditor',
                    fieldLabel: 'Label',
                    listeners: {
                        afterrender: {
                            fn: function(component) {
                                component.focus();
                            }
                        }
                }
                }
            ]
        }
    ]

});