List data from json on Sencha - json

Question

i am trying to show data from webserver json and it is not shown in view. At first i tried to show message only but could not succed. following this link and sample provided by #rdougan i have been able to parse upto categories but unable parse latter value can any one guide me.
code i have done till now are as follow:
{
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>']
},
My store is
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'
}
}
}
});
My model is
Ext.define('appname.model.TodaysWordModel', {
extend: 'Ext.data.Model',
config: {
fields:[
{name: 'message', mapping: 'accountInfo.message'}
]
}
});
The json i want to parse
({"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"}]})
Help me

Answer 1

You are trying to use a panel, when you should be using a dataview. The tpl is meant to be used with the data config option when using an Ext.panel.Panel, where data is just an Object containing the data to be used by the tpl. However, when you are using a store for your data, you should use an Ext.view.view instead of the panel. See the docs here: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.view.View

Answer 2

I solved it by adding an extra itemTpl. Since i had tpl for data only it was not able to fetch data from definitions node.
{
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('')
Hope it would help someone.
Thanks.