Extjs - 显示数据的最佳方式

Question

我使用extjs，我希望显示我的动态数据，如下！

我使用的是xtype：displayfield但我觉得它不太好，我不能用它来制作像我的照片

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'
    }],

任何想法？如何做到这一点，谢谢

Answer 1

对于这样一个复杂的布局，考虑到你显然只需要显示数据，我会选择一个custom template的组件。这样，您就可以利用HTML＆amp;用于演示的CSS。

例如，如何制作可重复使用的面板：

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

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

您可以在创建时传递数据：

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

您可以稍后使用新数据进行更新：

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