Javascript ExtJS无法正确显示Ext.panel.panel的html

我从Ext.grid.Panel继承了一个类，并在该类中使用一个方法来显示一个包含两项的面板：一个listtoolbar类和一个Ext.XTemplate人员

不能显示面板的项目；listtoolbar和dashtpl的html。相反，它在html标记使用上面板时工作。问题是在第一个面板中使用dashTpl函数时显示[Object][Object]

这里是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>' +

这可能是什么原因？谢谢你的建议

---

这里是和

@Nuri，在您的代码中，您使用的是内部设置，这不是使用html配置的正确方式

若你们想在面板中使用配置，那个么你们需要像下面的例子那个样设置tpl

在本文中，我使用上面提到的方法创建了一个演示。我希望这将帮助您或指导您实现您的要求

代码片段

---

亲爱的@Narendra Jadhav我了解tpl的情况，但这里我也面临渲染问题。在上面的getDashBoardTpl函数中，我可以在一个面板中呈现配置，但是当我为这个面板创建项目时，它不会显示。我认为原因可能是布局调整，但配置无效。为什么会这样，你知道吗？我曾尝试向父面板添加两个textfield项，但它们也没有出现。@NuriEngin Ok可以通过继承的类AGrid从何处告诉我调用此函数getDashBoardTpl？的位置。有一个功能，包括一个面板；xtype:'panel'，…，项：{xtype:'panel'，name:'dashboardtpl'，renderTo:Ext.getBody，bodyPadding:20，flex:1，autoScroll:true，布局：{align:'stretch'，type:'anchor'，pack:'start'}，html:me.getDashBoardTplcan您可以创建吗？这样我可以尝试检查/调试实际问题。

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>' +

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>'

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
)

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)
        });
    }
});