文本区域内的 HTMLEditor 焦点光标

Question

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

我只想将光标放在组件的文本区域内。
我试图将它集中在 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'
                }
            ]
        }
    ]

});

也试过这个

{
   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();
                            }
                        }
                }
                }
            ]
        }
    ]

});

文本区域内的 HTMLEditor 焦点光标

HTMLEditor focus cursor inside textarea

javascript

extjs

extjs5