在ExtJS 4中捕获HtmlEditor内容的变化

时间:2011-12-07 00:29:26

标签: extjs html-editor

我想在用户更改ExtJS 4中的HtmlEditor内容时捕获。我已尝试同步,更改和推送事件都没有成功。每当获得焦点时,似乎都会触发同步,不会触发更改,并且我无法确定是什么原因导致触发。

当用户更改HtmlEditor的内容时,是否可以告诉哪个事件被触发?

由于

编辑: 我试过以下代码对我不起作用,有什么想法吗?

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});
    }
},

有关更多信息,我使用Firefox进行测试,我从this发布了其他信息。

1 个答案:

答案 0 :(得分:2)

看起来有textarea用于编辑源代码。与html中的任何其他字段一样,此字段仅在模糊后触发更改事件(HtmlEditor似乎依赖于此事件)。您可能应该绑定到其他事件,例如keydown,然后根据按下的键,触发适当的事件。您可以在渲染处理程序中执行此操作:

{
    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;
        }
    }
}