javascript - 无法扩展 ExtJS 4 中的 Base 字段

Question

这就是我尝试扩展Ext.form.field.Base的方式:

Ext.define('Ext.form.field.CKEditorInline', {
    extend: 'Ext.form.field.Base',
    alias: 'widget.ckeditorinline',
    requires: [
        'Ext.XTemplate'
    ],
    constructor: function(config) {
        Ext.applyIf(config, {
        fieldSubTpl: [
        '<div id="{id}-editor" contenteditable="true" class="ckeditorinline"></div><input id="{id}" name="{name}" type="text" value="{value}" style="display:none"/>',
        { compiled: true }]
        });
        this.callParent([config]);
    },
    getValue: function () {
        var el = document.getElementById(this.id + "-inputEl-editor");
        if (!!el) {
            return el.innerHTML;
        }
        return null;
    },
    setValue: function (value) {
        var el = document.getElementById(this.id + "-inputEl-editor");
        if (value === "") value = "<p><br/></p>";
        if (!!el) {
            el.innerHTML = !!value ? value : "<p><br/></p>";
        }
    },
    reset: function () {
        var el = document.getElementById(this.id + "-inputEl-editor");
        if (!!el) {
            el.innerHTML = '<p><br/></p>';
        }
    }
});

所以，基本上我想要的是使用可编辑的 div 而不是输入字段。但是，当我尝试在此字段中键入(打印)某些内容时，我发现无法打印空格字符或使用 Enter 进行中断(因此，诸如“一二”或“一\n二”之类的值是不可能的相反，我得到“onetwo”)。这是什么问题？我该如何解决它？

Answer 1

您可能需要将空格更改为  并将回车更改为 <br/> 。您可以尝试:

setValue: function (value) {
    var el = document.getElementById(this.id + "-inputEl-editor");
    if (value === "") value = "<p><br/></p>";
    value = value.replace(/\n/, "<br/>");
    value = value.replace(/\s/g, "&nbsp;");
    if (!!el) {
        el.innerHTML = !!value ? value : "<p><br/></p>";
    }
},