CODEWITHSUNDEEP
javascriptextjsextjs5
LellisMoon
LellisMoon

Reputation: 5020

HTMLEditor focus cursor inside textarea

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

Upvotes: 0

Views: 978

Answers (1)

LightNight
LightNight

Reputation: 851

Afterrender event can make it

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

});

Upvotes: 1

Related Questions