HTMLEditor将光标聚焦在textarea中(HTMLEditor focus cursor inside textarea)

 我有一个简单的面板，里面有HTML编辑器。 
 
 我只想将光标聚焦在组件的textarea中。 
 我试图将它集中在afterrender上，将组件默认设置为焦点，但我无法使其工作。 
 
 这是我的代码，我该怎么办？ 是否有可能将此textarea设置为焦点？ 
 
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 

I've a simple panel with an HTML Editor inside it.
 
I only want to focus my cursor inside the textarea of the component.
 I've tried to focus it on afterrender, to set the component default focused, but I can't make it work. 
 
this my code, what should i do? are there possibilities to set this textarea on focus?
 
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'
                }
            ]
        }
    ]

});
 
Also tryed with this
 
{
   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();
    }

});
 
The problem seems to be on the browser i'm using, the second code works on firefox but not on chrome and edge

原文：https://stackoverflow.com/questions/35743758