Extjs - Best way to display data

Question

I using extjs and i want display my dynamic data like bellow

I use xtype: displayfield but i think it's not well and i can't use it to make like my picture

items: [

    {
            xtype: 'displayfield',
            style: 'border: 1px solid #CCCCCC', 
            fieldLabel: 'a',
            name: 'a',
            value: 'a'
        }, {
            xtype: 'displayfield',
            style: 'border: 1px solid #CCCCCC', 
            fieldLabel: 'b',
            name: 'b',
            value: 'b'
    }],

any idea? How to do that thanks

Answer 1

For such a complex layout, and considering you apparently just need to display data, I'd go with a component with a custom template. This way, you can leverage HTML & CSS for presentation.

Here's, for example, how to make a reusable panel:

Ext.define('My.BudgetPanel', {
    extend: 'Ext.Panel'

    ,tpl: '<table>'
        // notice template variables
        + '<tr><td>{definedProject}</td><td>{definedPM}</td></tr>'
        + '</table>'
});

You can pass it your data at creation:

var panel = Ext.create('My.BudgetPanel', {
    data: {
        definedProject: 'My Project'
        ,definedPM: 'Foo Bar'
    }
});

And you can update with new data later:

panel.update({definedProject: 'My Project 2', definedPM: 'Baz Bat'});