javascript - HTML値を持つExtjs5表示フィールドが自動高さで機能しない

Question

更新後、extjs4->extjs5displayfieldは高さを html コンテンツに合わせてサイズ変更しません。テキスト コンテンツのサイズのみを変更します。直し方？

ps: そして、diplayfield html-content の高さを適切に取得できません。

pps: によって作成された html コンテンツhtmleditor。

Answer 1

extjs4 アプリケーションを extjs5 に移植しているときに、同様の問題に遭遇しました。

このハックを一時的な修正として採用しました：

に を追加し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 '';
                },

            }