在Sencha上列出来自json的数据
在Sencha上列出来自json的数据
提问于 2013-07-10 15:04:42
我正在尝试显示来自not服务器json的数据，但它不在视图中显示。起初，我试图只显示消息，但不能成功。遵循@rdougan提供的这个link和示例，我已经能够解析到类别，但无法解析后面的值，任何人都可以指导我。到目前为止，我所做的代码如下：
{
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"}]})帮帮我
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-08-01 16:54:05
我通过添加一个额外的itemTpl解决了这个问题。因为我只对数据使用tpl，所以它不能从definitions节点获取数据。
{
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('')希望它能帮助到一些人。谢谢。
Stack Overflow用户
发布于 2013-07-10 19:36:29
您正在尝试使用panel，而您应该使用dataview。在使用Ext.panel.Panel时，tpl应与data配置选项一起使用，其中data只是一个包含tpl要使用的数据的对象。但是，当您对数据使用store时，应该使用Ext.view.view而不是panel。请参阅此处的文档：http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.view.View
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17564372
复制相关文章
相似问题
腾讯云开发者
