ExtJS: How detach or promote source code HtmlEditor?

Question

How detach or promote source code mode window of HtmlEditor in another textarea? I mean , How source code when typing in HtmlEditor may be displayed in another textarea element?

I create form with HtmlEditor & form with Textarea, and I assume that it is necessary to attach listner to 'textareafield' and get data from HtmlEditor textarea in source mode, but do not know how it to make.

{
    xtype: 'htmleditor',
    listeners: {
       }
    },

 ...

  {
    xtype: 'form',
    layout: {
      type: 'fit'
    },
    title: 'Source Code',
    flex: 1,
    items: [
    {
      xtype: 'textareafield',
      id:'textareaEl'
    }
    ]
  }

Answer 1

I made it)

  {
    xtype: 'htmleditor',
    id:'seditor',
    listeners: {
      render: function(){
    this.textareaEl.on('keydown', function() {
      this.fireEvent('sync', this, this.textareaEl.getValue());
    }, this, { buffer: 2 });
      },
      sync: function(sender, html){
      }
    },
    style: 'background-color: white;',
    hideLabel: true,
    labelPad: 0
    }

Answer 2

I don't think there is anything like this in standard component. I guess you can create text area yourself and update it periodically with the data from htmleditor.