ExtJS display object properties

Question

I'd like to display the content of a JSON arriving from a servlet into the browser inside a list. In pure HTML I'd use the definition list tag but I have to load everything dynamically and I don't want to read the JSON, parse it and create hand by hand the html code. Another way to do it is having a table with the headers row filled by the property keys and the second data row by the properties values.

But I'd like to keep the code clean so I was wondering if there is some widget or similar to do it in another way.

PS I try to make an example. Starting from this

{
    "a": "A",
    "b": "B",
    "c": 6
}

I want to reach this

a A
b B
c 6

Maybe printing it inside a table and showing differently the first column, that is in fact an header.

Answer 1

I would check out the Ext.XTemplate class ( http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.XTemplate ). Using this, you can easily create highly structured HTML that's driven by your JSON data.

Here's an example:

Ext.create('Ext.panel.Panel', {
    width: 500,
    height: 200,
    bodyPadding:10,
    title: 'Test Template',
    data: {
        "a": "A",
        "b": "B",
        "c": 6
    },
    tpl: Ext.create('Ext.XTemplate', 
        '<table border="1" cellpadding="10" cellspacing="0">',
            '<tpl foreach=".">',
                '<tr>',
                   '<td>{$}</td>',
                    '<td>{.}</td>',
                '</tr>',
            '</tpl>',
        '</table>'
    ),
    renderTo: Ext.getBody()
}) 

And a live version of it to play around with: https://fiddle.sencha.com/#fiddle/21n