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.
@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
htmlconfig inpanelthen 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.XTemplateconfig inpanelthen 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)
});
}
});