Добавить дополнительный текст в панель

Question

Я dnymically загружаю текст из ответов на одной панели, и у меня проблема с правильным форматированием или добавлением текста.

Например, эта this.messagePanel.body.dom.innerHTML возвращается:

"<div id="panel-1428-outerCt" data-ref="outerCt" class="x-autocontainer-outerCt" role="presentation" style="width: 100%; table-layout: fixed; height: 100%;"> 
    <div id="panel-1428-innerCt" data-ref="innerCt" style="padding:5px 5px 5px 5px" class="x-autocontainer-innerCt"> 
     My Text... 
    </div> 
</div>" 

Теперь я wan't, чтобы добавить дополнительный текст, например TEST, так что конечный результат должен выглядеть следующим образом

"<div id="panel-1428-outerCt" data-ref="outerCt" class="x-autocontainer-outerCt" role="presentation" style="width: 100%; table-layout: fixed; height: 100%;"> 
     <div id="panel-1428-innerCt" data-ref="innerCt" style="padding:5px 5px 5px 5px" class="x-autocontainer-innerCt"> 
      My Text... 
      <br> 
      TEST 
     </div> 
    </div>" 

До сих пор я делал это с этим кодом, что совершенно неправильно, и теперь я пытаюсь найти правильное решение

var oldMessage = this.messagePanel.body.dom.innerText; 
var newMessage = oldMessage + "<br><br>" + message + "<br><br>"; 
var html = 
    "<div id='panel-1459-outerCt' data-ref='outerCt' class='x-autocontainer-outerCt' role='presentation'" + 
    " style='width:100%; table-layout:fixed; height:100%;'>" + 
    "<div id='panel-1459-innerCt' data-ref='innerCt' style='padding:5px 5px 5px 5px' class='x-autocontainer-innerCt'>" + 
    newMessage + 
    "</div></div>"; 
this.messagePanel.body.update(html); 

Не могли бы вы помочь мне найти способ добавления текста в новую строку на панели, которая уже содержит некоторый текст. Я использую EXTJS 6. Если вам нужна дополнительная информация, пожалуйста, дайте мне знать, и я предоставлю. Заранее спасибо

Answer 1

Это может сделать трюк!

Здесь работает скрипка: https://fiddle.sencha.com/#view/editor&fiddle/1kvu

Ext.application({ 
    name : 'Fiddle', 

    launch : function() { 
     var win=Ext.create({ 
      xtype:'window', 
      width:200, 
      height:300, 
      html:'text...' 
     }); 
     win.html+='<br>TEST</br>'; 
     win.show(); 
    } 
}); 

Другой способ заключается в использовании простого ярлыка, и добавить его на панель

var label=Ext.create({ 
xtype:'label', 
html:'<br>TEST</br>' 
}); 
panel.add(label); 

Или просто прятался этикетка или компонента, созданной ранее.