Поймать изменение содержимого HtmlEditor в ExtJS 4 - PullRequest
3 голосов
/ 07 декабря 2011

Я хочу записывать всякий раз, когда пользователь изменяет содержимое HtmlEditor в ExtJS 4. Я пробовал синхронизировать, изменять и отправлять события, но все безуспешно.Кажется, что синхронизация срабатывает всякий раз, когда достигается фокус, изменение не срабатывает, и я не могу сказать, что вызывает толчок.

Может ли кто-нибудь сказать, какое событие вызывается, когда пользователь изменяет содержимое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, чтобы проверить это, и я получил другую информацию из этой записи.

1 Ответ

2 голосов
/ 07 декабря 2011

Похоже, есть текстовая область, используемая для редактирования источника.Это поле, как и любое другое в html, запускает событие change только после размытия (похоже, 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;
        }
    }
}
...