List data from json on Sencha

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

score 1 · Answer 1 · answered Jul 10 '13 at 11:36

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

answered Jul 10 '13 at 11:36

kevhender

4,285
1
13
16

1

Your model looks very incomplete at the moment. At the very least, you should have all of the fields that you are trying to show in your `dataview` in your model. You need to study the docs and get a better feel for how this whole concept works: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Model. Also take a look at the tutorials and examples, they can be very helpful: http://docs.sencha.com/extjs/4.2.1/#!/guide/data – kevhender Jul 11 '13 at 11:13

score 0 · Accepted Answer · answered Aug 01 '13 at 08:54

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.

List data from json on Sencha

2 Answers2

Linked