PDA

View Full Version : Problem displaying NestedList with static Json



HadesKeeper
8 Sep 2011, 5:26 AM
Hi, I'm having trouble populating my nested list with a static json file. I'm not sure if my nested list code is the problem or if my viewport is conflicting or if both are happening. When I try and debug my code it breaks on the first line of my viewport page with the following error:

sencha-touch.js:6TypeError: 'undefined' is not an object(evaluating 'c.length')

This is in the sencha-touch.js:6 file I have linked to my app. I reinstalled my sencha base files from the website but I still get the error.

This is the code for my viewport:

RiceScout.Viewport = Ext.extend(Ext.Panel,{
id : 'viewport',
layout : 'card',
fullscreen: true,


cardSwitchAnimation: 'slide',


initComponent: function() {
this.monitorOrientation = true;
Ext.apply(this, {


dockedItems: [
{
// Top Bar
dock : 'top',
xtype : 'toolbar',

baseCls: 'whiteGradient',
items: [
{
text: '',
},


]
},
{
xtype: 'home'
}

]
});




RiceScout.Viewport.superclass.initComponent.apply(this, arguments);
}


});
Ext.reg('RiceScout.Viewport', RiceScout.Viewport);




This is the code for my homepage with my nested list:

Ext.regModel('ListItem', {fields: [
{name: 'species',type: 'string'},
{name: 'common_name',type: 'string'},
{name: 'scientific_name',type: 'string'},
{name: 'description',type: 'string'},
{name: 'category',type: 'string'},
{name: 'management',type: 'string'},
{name: 'behavior',type: 'string'},
{name: 'imgURL',type: 'string'}
],


});


var insectStore = new Ext.data.TreeStore({
model: 'ListItem',
proxy: {
type: 'ajax',
url: 'bugs.json',
reader: {
type: 'json',
root: 'menuItems'
}
},
autoLoad: true

});






var nestedList = new Ext.NestedList({
height: '100%',
layout: 'card',
title: 'Home',
displayField: 'name',
styleHtmlContent: true,
store: insectStore,
tpl: ["<div class='gradient'><div><h3>{category}</h3></div></div>","{species}"],
scroll: 'vertical',


getDetailCard: function(item, parent) {
var itemData = item.attributes.record.data,
parentData = parent.attributes.record.data,
detailCard = new Ext.Panel({
scroll: 'vertical',
styleHtmlContent: true,
tpl: ["<div class='whiteGradient'><div><h3>{common_name}</h3></div></div>","{imgURL}","{description}"]
});
detailCard.update(itemData);
this.backButton.setText(parentData.text);
return detailCard;
},

toolbar: {
cls: "gradient",
},


});


RiceScout.home = new Ext.extend(Ext.Panel, {
title: "home",
iconCls: "home",
cls: 'mainbackground',


initComponent: function() {
insectStore.load();
Ext.apply(this, {


defaults: {
styleHtmlContent: true
}, fullscreen: true,
title: 'main content',


scroll: 'vertical',
html: '<p>Needs list display of parent categories/ or just a list item of insects.</p>',


dockedItems: [{
dock : 'top',
xtype : 'toolbar',
baseCls: 'whiteGradient',
},{


title: 'NestedList',
items: nestedList,
styleHtmlContent:true,

button:{
styleHtmlContent:true,

},
}],

});
RiceScout.home.superclass.initComponent.apply(this, arguments);
}
});

Ext.reg('home', RiceScout.home);

This is my json file. I already ran it through a validator so it should be good:



{
"menuItems":[
{ "category" : "insects",
"species" : "Beetles (Coleoptera)",
"common_name" : null,
"scientific_name" : "Colaspis spp.",
"description" : " Identification: <br></br>These tan and golden bugs (about 1/2 inch long) feed on rice when it begins to head. Females lay light-green, cylinder-shaped eggs in two-row clusters on leaves, stems and panicles. Eggs turn redblack just before larval emergence. Nymphs (immatures) are black with red marks on the abdomen. Older nymphs resemble adults. Nymphs and adults suck the sap from developing rice grains. During the flowering and milk stages, this causes empty grains and reduces yield. During the soft-dough stage, pathogens enter the grain at the feeding spot, and the pathogen infection and bug feeding together cause pecky rice.",
"imgURL" : "/ricescout/images/bug.png",
"management" : "do something about these pests",
"behavior" : "These beetles have loud parties at night leave neighboring insects angry and testy the following morning."

}

]
}





This is what is displayed on the testing server:
27939

I think it's obvious that I'm still new to programming. I don't even really know what questions to ask, but any direction that you guys could give me would be great. Thanks, Meghan