Extjs htmleditor增长以适应其值的内容

Question

我如何在没有滚动条的情况下使用内容值来扩展extjs htmleditor (就像extjs textArea grow一样)。

Answer 1

使用shrinkWrap配置。

*如果该属性是一个数字，则解释如下：

0:宽度和高度都不依赖于内容。这等同于false。

1:宽度取决于内容(收缩换行)，但高度与内容无关。

2:高度取决于内容(收缩换行)，但宽度与内容无关。默认设置。

3:宽度和高度都取决于内容(收缩包装)。这等同于true。

在CSS术语中，收缩包装宽度类似于内联块元素，而不是块级元素。一些容器布局总是收缩包装它们的子容器，有效地忽略了这个属性(例如，Ext.layout.container.HBox，Ext.layout.container.VBox，Ext.layout.component.Dock)。默认为: 2*

Answer 2

这应该可以做到：

Ext.application({

    name: 'Fiddle',

    launch: function() {
        new Ext.form.field.HtmlEditor({
            renderTo: document.body,
            height: 22,
            width: 300,
            defaultValue: '',
            listeners: {
                initialize: function(field) {
                    var body = field.getEditorBody();
                    body.style.overflow = 'hidden';
                    Ext.DomHelper.applyStyles(body, {
                        'word-wrap': 'break-word'
                    });
                    this.getToolbar().hide();
                },
                change: function(field) {
                    var body = field.getEditorBody();
                    field.setHeight(body.offsetHeight);
                }
            }
        })
    }
});

Sencha小提琴：https://fiddle.sencha.com/#view/editor&fiddle/271j