List 列表中带有XTemplate的Senha Touch复杂模型

我正在解析一个相对复杂的JSON文件，但在列表中呈现时遇到了问题

JSON的（精简版）摘录如下：

{"root":[
  {
     "success":"true",
     "text":"Vecka 2, 14 januari 2011",
     "chart":[
        {
           "pbpl":"1",
           "arso":"JAY SMITH",
           "tit":"JAY SMITH",
           "labl":"COLUMBIA",
           "buyExt":[
              {
                 "storeId":"61002",
                 "buyPri":"100",
                 "buyURL":"http://clk.tradedoubler.com/click?p=46&a=1861394&url=http%3A%5C%5Ccdon.se%5Cmusik%5Csmith_jay%5Cjay_smith-13014585"
              },
              {
                 "storeId":"61010251",
                 "buyPri":"130",
                 "buyURL":"http://www.bengans.se/Product.aspx?skivkod=882785"
              },
           ]
        },
        {
           "pbpl":"2",
           "arso":"ROBYN",
           "tit":"BODY TALK PT.2",
           "labl":"KONICHIWA RECORDS",
           "buyExt":[
              {
                 "storeId":"61002",
                 "buyPri":"100",
                 "buyURL":"http://clk.tradedoubler.com/click?p=46&a=1861394&url=http%3A%5C%5Ccdon.se%5Cmusik%5Crobyn%5Cbody_talk_pt.2-11318544"
              },
              {
                 "storeId":"61010251",
                 "buyPri":"130",
                 "buyURL":"http://www.bengans.se/Product.aspx?skivkod=870725"
              },
           ]
        },
        ...

这就是模型：

Ext.regModel('Chart', {
    fields: [
        {name: 'text', type: 'string'},
        {name: 'chart', fields: [
            {name: 'arso', type: 'string'},
            {name: 'tit', type: 'string'},
            {name: 'pbpl', type: 'integer'}
        ]}
    ]
});

我使用的模板是：

app.chartItemTpl = new Ext.XTemplate(
    '<tpl for="chart">',
    '   <div class="thumb-wrap chart_row" id="{#}">',
    '       <table>',
    '           <tr>',
    '               <td class="chart_pbpl">{#}</td>',
    '               <td class="chart_album">',
    '                   <span class="arso">{arso}</span><br />',
    '                   <span class="tit">{tit}</span><br />',
    '               </td>',
    '           </tr>',
    '       </table>',
    '   </div>',
    '   <div style="clear: both"></div>',
    '</tpl>'
);

有人知道怎么解决这个问题吗？ 谢谢

---

Arttie

由于这是一个列表，您需要为一个单独的列表项提供模板，而不是为整个列表提供模板，即不在所有图表元素中循环，只为一个这样的元素提供模板。如果列表的存储设置正确，则只需删除

'

和

'

，模板即可工作。列表本身通过其元素应用循环。

注意：我的答案基于Sencha Touch 2.3.0

你在这里试图做的事情看起来有点混乱。通常，您会在

代理

的

读卡器

上设置一个

根属性

（而不是

根

），该属性指向JSON中的对象，该对象包含要放在列表中的所有对象，或者换句话说，要迭代。在本例中，类似于

rootProperty:'root[0].charts'

，考虑到您不使用JSON上对象

charts

之外的

text

字段

然后，考虑到您需要

arso

和

tit

，您的模型将是这样的。您可以使用

pbpl

替换

#

值，因为XTemplate不需要循环

Ext.regModel('Chart', {
    fields: [
        "pbpl",
        "arso",
        "tit",
       ]
    ]
});

您的XTemplate将是：

app.chartItemTpl = new Ext.XTemplate([
    '   <div class="thumb-wrap chart_row" id="{pbpl}">',
    '       <table>',
    '           <tr>',
    '               <td class="chart_pbpl">{pbpl}</td>',
    '               <td class="chart_album">',
    '                   <span class="arso">{arso}</span><br />',
    '                   <span class="tit">{tit}</span><br />',
    '               </td>',
    '           </tr>',
    '       </table>',
    '   </div>',
    '   <div style="clear: both"></div>'].join();
);

Ext.regStore('ChartsStore', {
    model: 'Chart',
    proxy: {
        type: 'json',
        reader: {
            type: 'json',
            root: 'root[0].chart' // For some reason, root is an "array", that's why the "[0]". No sure if this works on Sencha Touch 2.3.0.
        }
    },
    getGroupString: function (record) {
        if (record && record.data.text) {
            return record.get('text');
        } else {
            return 'No description';
        }
    }
});

由于在Sencha Touch 2.3文档中找不到类型

scripttag

，我已将

proxy

的

type

更改为

json

---

我知道这是一个很老的问题，但我想回答它。

谢谢你的回答，伊利亚139。如果我删除tpl标签，它只显示一个没有图表条目的损坏项目。我相信问题在于我想循环“图表”，这是一个更深的节点。还有其他想法/例子吗？

Ext.regStore('ChartsStore', {
    model: 'Chart',
    proxy: {
        type: 'json',
        reader: {
            type: 'json',
            root: 'root[0].chart' // For some reason, root is an "array", that's why the "[0]". No sure if this works on Sencha Touch 2.3.0.
        }
    },
    getGroupString: function (record) {
        if (record && record.data.text) {
            return record.get('text');
        } else {
            return 'No description';
        }
    }
});