How to use Ext.XTemplate directly on a panel on ExtJS 6/7

Question

This doesn't show anything inside the panel body:

  {                     
    xtype: 'panel',                     
    title: 'Test',                     
    region: 'east',                     
    width: 400,                     
    tpl: new Ext.XTemplate('<p>Hello world</p>'),                     
    split: true,                     
    collapsible: true                 
    }

The panel is correctly rendered, since I can put data inside the "html" property and it works. I'm pretty sure I'm missing something pretty obvious.

Answer 1

You will need to provide a data config to display the tpl. As per to docs, it works in conjunction with data. For the time being, the data can be an empty array.

Refer the below code or fiddle

{
    xtype: 'panel',
    title: 'Test',
    region: 'east',
    width: 400,
    height: 400,
    data: [],
    tpl: new Ext.XTemplate('<p>Hello world</p>'),
    split: true,
    collapsible: true,
    renderTo: Ext.getBody()
}