View Full Version : Generate dynamic html table inside tpl using JSON data

21 Oct 2014, 9:21 AM
First off, is it possible to generate a dynamic table with x rows and x columns using JSON data? I have a html table inside an XTemplate and I can generate the columns but am having some trouble with the rows.

this is what i have so far

this.tpl = new Ext.XTemplate(
"<table border='1' style='width:100%'>" +
"<tr>" +
"<tpl for='.'>"+
"<th style='color:white;'>{COLUMNS}</th>" +
"</tpl>" +
"<tr>" +
"<tpl for='VALUES'>"+
"<td align='center' style='color:white;'>{.}</td>" +
"<tr></tr>" +

sample JSON Data:

{"data" :[
{"COLUMNS": "ColumnA", "VALUES":["1","2","3,"]},{ "COLUMNS":"ColumnB", "VALUES": ["4","5","6"]},{ "COLUMNS":"ColumnC", "VALUES":["7","8","9"]}

so the columns show up fine but the rows dont show at all. I think my JSON format is where the issue is at. So Can somebody suggest a format that will work for both columns and rows?

23 Oct 2014, 10:52 PM
That JSON snippet probably isn't the most conducive to do what you're wanting, but it's doable. See the fiddle below. The trick is to use template member functions to process the whole dataset for both the headers and then for the rows.


27 Oct 2014, 12:34 PM
I'd do something with greater control and do the ajax request manually, instead of letting internal ExtJS deal with it.

I'd do something along the lines of:

url: '/my/jsonstore.json',
params: {
param_one: 1,
param_two: 'hello'
success: function(response) {
var jsonResponse = Ext.decode(response.responseText);
var data = jsonResponse['data'];

var tpl = "<table border='1' style='width: 100%'>";

Ext.Array.forEach(data, function(columnData) {
// create headers here
// also add values here

// finally
this.tpl = new Ext.XTemplate(tpl);