代码之家  ›  专栏  ›  技术社区  ›  Nuri Engin

ExtJS无法显示Ext.panel。面板的html正确

  •  0
  • Nuri Engin  · 技术社区  · 7 年前

    我有一个类继承自 Ext.grid.Panel 并使用该类中的方法显示 panel 其中包括两项: listtoolbar 类别和a Ext.XTemplate 工作人员

    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!
                            }
                        ]
                }
            ]
        },
    

    不能显示面板项目; 列表工具栏 dashtpl 的html。相反,当 html 标记正在使用上面板。关键是显示器 [Object] [Object] 什么时候 dashTpl 第一个面板中使用的函数。

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

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

    这里是 Img 01 Img 02

    1 回复  |  直到 7 年前
        1
  •  1
  •   Narendra Jadhav    7 年前

    @Nuri,在你的代码中你正在设置 html 使用 Ext.XTemplate 的内部 panel ,这不是正确的使用方法 html 配置。

    如果要使用 html 在中配置 面板 然后您需要像下面的示例一样设置tpl

    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/Ext.XTemplate 在中配置 面板 然后您需要像下面的示例一样设置tpl

    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
    )
    

    在这个 FIDDLE ,我已经用上面提到的方法创建了一个演示。我希望这将帮助您或指导您实现您的要求。

    代码段

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