View Full Version : JSON data not shown by List

15 Apr 2011, 9:49 AM
hello everybody,

i started my first sencha app by creating a skeleton using the sencha-generator. After some tweaking and fixing i got that running.
then i started to implement my first simple app. A week-list with infos for each day. I want to simply retrieve a JSON string and print it to a list. Then, when i touch a list-item, a detail page should come up. so far so good.
My Problem is, that the data is not rendered on the list.
Some problem with the store i guess, as i had to replace

store: carmaCal.stores.days


initComponent : function() {
store: Ext.getStore('days')

in the list-component to make it somehow start without errors.

I follow the MVC-structure, so i have my day-model and -store in Day.js:

carmaCal.models.Day = Ext.regModel('carmaCal.models.Day', {
fields: [
{name: 'title', type: 'string'},
{name: 'content', type: 'string'},

carmaCal.stores.days = new Ext.data.Store({
autoLoad: true,
storeId : 'days-store' ,
model: 'carmaCal.models.Day',
proxy: {
type: 'ajax',
url : '/carmaCal/webapp/public/resources/data/getCalJson.php',
reader: {
type: 'json',
root: 'dates'
listeners: {
exception: function() { console.log('HTTP error occured'); }

then i have the view in Week.js:

carmaCal.views.Week = Ext.extend(Ext.Panel, {
dockedItems: [{
xtype: 'toolbar',
title: 'CarmaCal'
items: [{
xtype: 'list',
emptyText : 'No data available.',

itemTpl: '<div class="date">{title}</div>',
initComponent : function() {
store: Ext.getStore('days')
initComponent: function() {
carmaCal.views.Week.superclass.initComponent.apply(this, arguments);

my viewport looks like this:

carmaCal.views.Viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
//put instances of cards into app.views namespace
Ext.apply(carmaCal.views, {
week: new carmaCal.views.Week()
//put instances of cards into viewport
Ext.apply(this, {
items: [
carmaCal.views.Viewport.superclass.initComponent.apply(this, arguments);

and finally app.js:

defaultTarget: "viewport",
name: "carmaCal",
launch: function() {
this.views.viewport = new carmaCal.views.Viewport();

any help is highly appreciated!