html值为don'的Extjs5显示字段;不能工作自动高度

Extjs5 displayfield with html-value don't work auto height

本文关键字:不能 字段 工作 高度 显示 Extjs5 don 值为 html      更新时间:2023-09-26

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

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

pps:htmleditor创建的html内容。

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

我使用这个黑客作为临时修复:

我在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 '';
                },
            }