Extjs Dynamically Update Panel content html

To add html to an EXTJS panel after it has been rendered you can use.

Ext.getCmp(''the I.D of your panel'').body.update(''your HTML");

new Ext.Panel({
            border: false,
            frame: false,
            width: 200,
            region: 'west',
            id: 'panel-id',
            bodyStyle: "background: #fff"
        }
//and I want in another module change panel content... so use this:
Ext.getCmp('panel-id').body.update('html content for example');
Example 2:

{
    xtype: 'panel',
    title: 'Testing',
    id: 'taskpanel',
    html: 'testing'
}
//to update the panel content. For html use body.update
3 Ways to render HTML inside of a ExtJS container

Ext.onReady(function() {
    new Ext.Panel({
        renderTo: Ext.getBody(),
        title: '3 Ways to render HTML inside of a ExtJS container',
        items: [{
            html: "<a href='#'>1. HTML property of a panel</a>",
            xtype: "panel"},
        {
            xtype: "panel",
            html: new Ext.XTemplate("<a href='#'>{value}").apply({
                value: '2. HTML property of a panel generated by an XTemplate'
            })},
        {
            xtype: 'box',
            autoEl: {
                tag: 'a',
                html: '3. Dom element created by a DomHelper and wrapped as Component',
                href: '#'
            }}]
    });
});

Config Options

1. autoEl

Ext.create('Ext.Component', {
    id: 'widget',
    renderTo: Ext.getBody(),
    autoEl: {
      tag: 'h3',
      html: '<span>My Content</span>'
    }
  });
output:
<h3 id="widget">
    <span>My Content</span>
  </h3>
2. html

 Ext.create('Ext.Component', {
    id: "widget",
    renderTo: Ext.getBody(),
    html: '<span>My Content</span>'
  });
output:
 <div id="widget">
    <span>My Content</span>
  </div>

3. tpl
  var widget = Ext.create('Ext.Component', {
    id: "widget",
    renderTo: Ext.getBody(),
    tpl: '<span>Hello {name}</span>',
    data: {name: 'LeVeon'}
  });
//Output:
 <div id="widget">
    <span>Hello LeVeon</span>
  </div>





4, rendertpl
 Ext.create('Ext.Component', {
    id: "widget",
    renderTo: Ext.getBody(),
    renderTpl: '<span>Hello {name}</span>',
    renderData: {name: 'LeVeon'}
  });
output:
 <div id="widget">
    <span>Hello LeVeon</span>
  </div>

Example for Icon component using renderTpl

 IconComponent = Ext.extend(Ext.Component, {
   iconCls: 'myIcon',
   renderTpl: '<img alt="" src="{blank}" class="{iconCls}"/>',
   onRender: function() {
       Ext.applyIf(this.renderData, {
           blank: Ext.BLANK_IMAGE_URL,
           iconCls: this.iconCls
       });
       Ext.applyIf(this.renderSelectors, {
           iconEl: '.' + this.iconCls
       });
       IconComponent.superclass.onRender.call(this);
   },
   changeIconCls: function(newIconCls) {
       if (this.rendered) {
           this.iconEl.replaceClass(this.iconCls, newIconCls);
       }
       this.iconCls = newIconCls;
   }
});