Question

我正在尝试构建一个可重复使用的html表，它将包含X列和X行

this.tpl = new Ext.XTemplate(
        "<table border='1' style='width:100%'>" +
        "<tpl for ='.'>" +
        "<tr><th style='color:white;'>{COLUMN_NAME}</th></tr>" +
            "<tr>" +
              "<td align='center' style='color:white;'>{VALUE}</td>" +
            "</tr>" +
          "</tpl>" +
        "</table>"
      );

JSON数据：

{ "data":[{"COLUMN_NAME":"columnA", "VALUE":"valueA"},{"COLUMN_NAME":"columnB",         "VALUE":"valueB"}]}

因此，使用此数据，表应该有两列和两行。它现在的方式是表格显示同一列中的所有内容。对于前

Answer 1

您的数据结构的方式必须为您添加的每一行运行循环。

tpl : new Ext.XTemplate(
    "<table border='1' style='width:100%'>" +
        "<tr>" +
            "<tpl for='.'>"+
                "<th style='color:white;'>{COLUMN_NAME}</th>" +
            "</tpl>" +
         "</tr>"+
         "<tr>" +
             "<tpl for='.'>"+
                 "<td align='center' style='color:white;'>{VALUE}</td>" +
             "</tpl>"+
         "</tr>"+
     "</table>"
 )

有一种更好的方法来构建yoru数据（如下所示），如果可能，我会这样做：

Ext.create('Ext.panel.Panel', {
    title: 'My Test',
    width: 500,
    height: 500,
    renderTo: Ext.getBody(),
    data : {
        columns: [{
            "name": "ColumnA"
        },{
            "name": "ColumnB"
        },{
            "name": "ColumnC"
        }],
        rows : [{
            "valueA" : "Row 1 - A",
            "valueB" : "Row 1 - B",
            "valueC" : "Row 1 - C"
        }]
    },
    tpl : new Ext.XTemplate(
        "<table border='1' style='width:100%'>" +
            "<tr>" +
                 "<tpl for='columns'>" +
                     "<th style='color:black;'>{name}</th>" +
                 "</tpl>" +
                 "<tpl for='rows'>"+
                     "<tr>"+
                         "<td align='center' style='color:black;'>{valueA}</td>" +
                         "<td align='center' style='color:black;'>{valueB}</td>" +
                         "<td align='center' style='color:black;'>{valueC}</td>" +
                     "</tr>" +
                "</tpl>"+
            "<tr>"> +
        "</table>"
    )
});

EXTJS / HTML：如何在动态行和列的xtemplate中创建html表

1 个答案: