Question

我正在尝试显示来自webserver json的数据，但它未在视图中显示。起初我试图只显示消息，但无法成功。按照这个link和@rdougan提供的示例，我已经能够解析到类别，但无法解析后一个值，任何人都可以指导我。我到目前为止所做的代码如下：

{
    xtype: 'panel',
    padding: '20px',        
    //height: 100,        
    styleHtmlContent:true,
    store: 'TodaysWordStore',
    models: 'TodaysWordModel',

        tpl: 
        [
        '<tpl for=".">',
        '<ul class="parabox">',
        '<li><h2 onclick = "ratingStar()">{message} </h2> ',
        '<ul class="para-box-wrapper">',
        '<li class="greenbox"><div class="paragraph-def">',
        '{dictionaryDef}',
        '<span class="authorBox">Author: {authorName}</span>',
        '</div><div class="starBox">',
        '{ratingBox}',
        '</div></li>',
        '</ul></li></ul>', 
        '</tpl>',
        ]
       // '<div><strong>{dictionaryWord}</strong>, {dictionaryDef} <em class="muted">({role})</em></div></tpl>']
  },

我的商店

Ext.define('appname.store.TodaysWordStore',{
extend: 'Ext.data.Store', 

config:
{
model: 'appname.model.TodaysWordModel',
autoLoad:true,
proxy:
{
    type: 'ajax',
    url : 'location' //Your file containing json data
    reader:
    {
        type: 'json',
            //rootProperty:'accountInfo'
    }
}
}
});

我的模特是

Ext.define('appname.model.TodaysWordModel', {
extend: 'Ext.data.Model',
config: {
fields:[

   {name: 'message', mapping: 'accountInfo.message'}
]
}
});

我要解析的json

 ({"accountInfo":
{"expire_date":"2014-07-02 08:01:09",
"subscribe_date":"2013-07-02 08:01:09",
"time_remain":" 358 Days 1 Hour 24 Minutes",
"status":"not expired"},
"status":"TRUE",
 "message":"Todays Word",
"data":
[{"name":"curtain",
"author":"admin",
"word_id":"35",
"category":"business",
"definition":
[{"rating":
{"red":"0",
"green":"1",
"yellow":"0",   
"total_rating":1,
"final_rating":"Green"},
"defintion":"curtain",
"def_id":"11",
"example":"This is a sample example.",
"author":"admin"},
{"rating":
{"red":0,
"green":0,
"yellow":0,
"total_rating":0,
"final_rating":"This definition is not rated yet."},
"defintion":"to cover something",
"def_id":null,
"example":"This is curtain example.",
"author":"admin"}],
"is_favourite":"No"}]})

帮帮我

Answer 1

当您使用panel时，您正尝试使用dataview。使用tpl时，data应与Ext.panel.Panel配置选项一起使用，其中data只是一个包含{{1}要使用的数据的对象}}。但是，当您使用tpl表示数据时，应使用store代替Ext.view.view。请参阅此处的文档：http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.view.View

Answer 2

我通过添加额外的itemTpl来解决它。由于我只有数据tpl，因此无法从定义节点获取数据。

{
   xtype: 'list',
   store: 'ghak',
   height: 140,
   layout: 'fit',
  scrollable: {  
        direction: 'vertical',
        directionLock: true,
      },
       margin: '0 0 5px 0',

       itemTpl: [
       '<div>',                
       '<tpl for="data">',
       '<ul class="parabox">',
       '<li><h2 class="noStar" onclick = "addtofavourite({word_id})">{name} </h2>',                          
       '<tpl for="definitions">',
       '<ul class="para-box-wrapper">',
       '<li class="{rating}"><div class="paragraph-def" onclick = "rating({def_id})">','{defintion}',
       '<span class="authorBox">Author: {author}</span>',

       '</li>' ,
    '</div>',
    '</ul></li>', 
    '</tpl>',
    '</ul>',
    '</tpl>',
    '</div>'
    ].join('')

希望它会对某人有所帮助。感谢。

列出来自Sencha的json的数据

2 个答案: