Question

我想将从servlet到达的JSON内容显示在列表中的浏览器中。在纯HTML中我会使用定义列表标记，但我必须动态加载所有内容，我不想读取JSON，解析它并手工创建html代码。另一种方法是使用一个表，其中标题行由属性键填充，第二个数据行由属性值填充。

但我想保持代码清洁，所以我想知道是否有一些小部件或类似的东西以另一种方式做。

P.S。我试着举个例子。从这个开始

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

我想达到这个

a A
b B
c 6

也许在表格中打印并以不同方式显示第一列，实际上是标题。

Answer 1

我会查看Ext.XTemplate类（http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.XTemplate）。使用此功能，您可以轻松创建由JSON数据驱动的高度结构化的HTML。

以下是一个例子：

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()
})

和它的实时版本：https://fiddle.sencha.com/#fiddle/21n

ExtJS显示对象属性

1 个答案: