javascript - ExtJS 显示对象属性

Question

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

但我想保持代码干净，所以我想知道是否有一些小部件或类似的东西可以用另一种方式来完成。

附言我试着举个例子。 从这里开始

{
    "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