CODEWITHSUNDEEP
javascriptjsonextjs
user2714602
user2714602

Reputation: 231

ExtJS display object properties

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.

P.S. 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.

Upvotes: 1

Views: 1299

Answers (1)

existdissolve
existdissolve

Reputation: 3114

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

Upvotes: 3

Related Questions