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

Question

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

ps: 我无法正确获得 diplayfield html 内容的高度。

pps:由 htmleditor 创建的 html 内容。

Answer 1

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

I employed this hack as a temporary fix :

我向 displayfield 添加了一个 renderer 并创建了类似于 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 '';
                },

            }