Catch change in content of HtmlEditor in ExtJS 4

Question

I want to capture whenever the user changes the content of an HtmlEditor in ExtJS 4. I have tried the sync, change, and push events all with no success. Sync seems to be fired whenever focus is gained, change isn't fired, and I can't tell what causes push to be fired.

Can anyone tell which event is fired when the user changes the content of an HtmlEditor?

Thanks

Edit: I have tried the following code which does not work for me, any ideas?

init: function() {
    this.control({
        'htmleditor[name="reportHtmlEditor"]': {
            render: this.addKeyHandler
        }
    });
},

addKeyHandler: function(field) {
    // This gets called fine on the component render
    var el = field.textareaEl;
    if (Ext.isGecko) {
        el.on('keypress',
        function() {
            // Do Stuff, which never gets called
        }, this, { buffer: 100});
    }
    if (Ext.isIE || Ext.isWebKit || Ext.isOpera) {
        el.on('keydown',
        function() {
            // Do Stuff, which never gets called
        }, this, { buffer: 100});
    }
},

For some more information, I am using Firefox to test this, and I got the other information from this post.

Answer 1

It looks like there is textarea used for editing source. This field, like any other in html, fires change event only after blur (HtmlEditor seems to rely on this event). You should probably bind to other event eg keydown and then depending on key pressed, fire appropriate event. You can do it in render handler:

{
    xtype: 'htmleditor',
    listeners: {
        render: function(){
            this.textareaEl.on('keydown', function() {
                this.fireEvent('sync', this, this.textareaEl.getValue());
            }, this, { buffer: 500 });
        },
        sync: function(sender, html){
            debugger;
        }
    }
}