javascript - 具有 html 值的 Extjs5 显示字段无法自动高度

Question

更新 extjs4->extjs5 后displayfield不要将高度调整为 html 内容。仅调整文本内容的大小。怎么修？

ps：我无法正确获得显示字段 html-content 的高度。

pps：由htmleditor.

Answer 1

我在将 extjs4 应用程序移植到 extjs5 时遇到了类似的问题。

我使用这个 hack 作为临时修复：

我添加了一个并创建renderer了displayfield与 extjs4 中生成的原始元素类似的 html。然后我应用一个update来displayfield afterrender显示这个html而不是原始输出。

            {
                xtype: 'displayfield',
                fieldLabel: 'Testing',
                value: 'Hello <br/> Hello <br/>Hello <br/>Hello <br/>Hello <br/>Hello <br/>Hello <br/>Hello <br/>Hello <br/>Hello <br/>Hello <br/>Hello <br/>Hello <br/>Hello <br/>Hello <br/>Hello <br/>',
                renderer: function(value, x) {
                    //hack for displayfield issue in ExtJS 5
                    var rtn = value.replace(/(\r\n|\n|\r)/gm, "</br>");
                    var html = [
                        '<tbody>',
                            '<tr class="x-form-item-input-row">',
                                '<td style="" valign="top" halign="left" width="' + x.labelWidth + '" class="x-field-label-cell">',
                                    '<label class="x-form-item-label x-unselectable x-form-item-label-left" style="width:' + x.labelWidth + 'px;margin-right:5px;" unselectable="on">' + x.getFieldLabel() +':</label>',
                                '</td>',
                                '<td class="x-form-item-body x-form-display-field-body " colspan="2">',
                                    '<div class="x-form-display-field" aria-invalid="false" data-errorqtip="">',
                                        rtn,
                                    '</div>',
                                '</td>',
                            '</tr>',
                        '</tbody>'
                    ];
                    x.on('afterrender',function(){
                         x.update(html.join(''));
                    });
                    return '';
                },

            }