ExtJS Can not display Ext.panel.Panel's html properly

Question

I've a class inherit from Ext.grid.Panel and using a method inside this class to display a panel which includes two items: a listtoolbar class and a Ext.XTemplate staff.

Ext.define('MyApp.view.BGrid', {
    extend: 'MyApp.view.AGrid', //This class extends from 'Ext.grid.Panel'
    requires: [
            ...
            'Ext.layout.container.VBox',
            'MyApp.view.base.ListToolbar'
    ],
    getDashBoardTpl: function () {
        var me = this;

        return [
            {
                xtype: 'panel',
                // html: 'so what?', // Displays the text; See -Img 01
                // html: me.dashTpl(), // Displays as [object object]; See -Img 02
                layout: {type: 'vbox', align: 'stretch', pack: 'center'},
                items:
                    [
                        {
                            xtype: 'listtoolbar', //Display nothing!
                            flex: 1
                        },
                        {
                            xtype: 'panel',
                            name: 'dashtpl',
                            flex: 1,
                            // html: 'so WHat?' //Display nothing!
                            html: me.dashTpl() //Display nothing!
                        }
                    ]
            }
        ]
    },

It can not displaying panel's items; listtoolbar and dashtpl's html. instead of that it works when the html tag is using upper panel. Just the thing is displays [Object] [Object] when dashTpl function used in first panel.

Here is dashTpl();

dashTpl: function(){
        var tpl= new Ext.XTemplate(
            '<tpl for=".">' +
                '<div class="dashTpl">'+
                    '<table style="width:100%;height:80px;text-align:center" >'+
                        '<tr style="width:100%;">'+
                            '<td style="box-shadow: 10px 5px 5px #BDBDBD;background-color:#EEEEEE;width:20%">'+
                                '<a>'+
                                    '<span style="font-size:24px;"><b style="color: #8000FF;">5,875.00</b></span><br/>'+
                                    '<div>'+
                                        '<b style="color: #6E6E6E;font-size:14px;">€</b>' +

What could be the reason for this? Thanks in advice.

Here is Img 01 and Img 02

Answer 1

@Nuri, In your code you are setting html using Ext.XTemplate inside of panel, this is not right way to use html config.

If you want to use html config in panel then you need to set tpl like below example

html:'<table class="x-date-table"><tbody><tr><th>SNo.</th><th>Date</th><th>Event</th><th>Venue Details</th></tr><tr><td>1</td><td>12 February</td><td>Waltz with Strauss</td><td>Main Hall</td></tr><tr><td>2</td><td>24 March</td><td>The Obelisks</td><td>West Wing</td></tr><tr><td>3</td><td>15 February</td><td>Kolidoscop</td><td>Reception Hall</td></tr><tr><td>4</td><td>24 March</td><td>The data center</td><td>UDM</td></tr></tbody></table>'

If you want to use tpl/Ext.XTemplate config in panel then you need to set tpl like below example

tpl: new Ext.XTemplate(
    //start table
    '<table class="x-date-table">',
    //Header of my table
    '<tr>',
    '<th>SNo.</th>',
    '<th>Date</th>',
    '<th>Event</th>',
    '<th>Venue Details</th>',
    '</tr>',
    //Looping insdie tpl for creating multiple row depend on data
    '<tpl for=".">', //Start loop tpl
    '<tr>',
    '<td>{#}</td>',
    '<td>{date}</td>',
    '<td>{event}</td>',
    '<td>{venue}</td>',
    '</tr>',
    '</tpl>', //End loop tpl
    '</table>' //Close table
)

In this FIDDLE, I have created a demo using same as mentioned above. I hope this will help you or guide you to achieve your requirement.

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {
        //Array of data for testing/example
        var data = [{
            date: '12 February',
            event: 'Waltz with Strauss',
            venue: 'Main Hall'
        }, {
            date: '24 March',
            event: 'The Obelisks',
            venue: 'West Wing'
        }, {
            date: '15 February',
            event: 'Kolidoscop',
            venue: 'Reception Hall'
        }, {
            date: '24 March',
            event: 'The data center',
            venue: 'UDM'
        }];
        //Panel show data with XTemplate
        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            fullscreen: true,
            title: 'Example of XTemplate in Panel',
            tpl: new Ext.XTemplate(
                //start table
                '<table class="x-date-table">',
                //Header of my table
                '<tr>',
                '<th>SNo.</th>',
                '<th>Date</th>',
                '<th>Event</th>',
                '<th>Venue Details</th>',
                '</tr>',
                //Looping insdie tpl for creating multiple row depend on data
                '<tpl for=".">', //Start loop tpl
                '<tr>',
                '<td>{#}</td>',
                '<td>{date}</td>',
                '<td>{event}</td>',
                '<td>{venue}</td>',
                '</tr>',
                '</tpl>', //End loop tpl
                '</table>' //Close table
            ),
            data: data
        });

        /*This function will create html base on data and return
         * @param {Array} arr contain of data/records
         * @return {String/HTML}
         */
        function doGetHtml(arr) {
            let html = `<table class="x-date-table"><tr><th>SNo.</th><th>Date</th><th>Event</th><th>Venue Details</th></tr>`;

            arr.forEach((item, index) => {
                html += `<tr><td>${index+1}</td><td>${item.date}</td><td>${item.event}</td><td>${item.venue}</td></tr>`;
            });
            return `${html}</table>`
        }

        //Panel show data with HTMl
        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            margin: '20 0 0 0',
            fullscreen: true,
            title: 'Example of HMTL in Panel',
            html: doGetHtml(data)
        });
    }
});