HTMLEditor將焦點放在textarea裏面

Question

我有一個簡單的面板，裏面有一個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(); 
    } 

}); 

這個問題似乎是在我使用的瀏覽器也tryed，第二代碼工作在Firefox，但無法在Chrome和邊緣

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

});