extjs - 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

对于如此复杂的布局，并且考虑到您显然只需要显示数据，我会使用带有自定义模板的组件。这样，您可以利用 HTML 和 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'});