PDA

View Full Version : Can't get Lists to work (new to sencha)



akinsey
9 Sep 2011, 5:19 PM
Hey guys, I've been struggling all day trying to figure out why I cant get a simple list to display. I'm trying to create a simple MVC app: on the main page I have a button that says "Summary" when you click the button it should take you to the summary view which is a list that is suppose to be populated by my store, but I cant get it to work no matter how many different ways I try.

Here is a link to my full project: http://filevo.com/tq53oh8tzw26.html

This is my application hierarchy:
http://i.imgur.com/nT6Cv.png

The only files that I think could possibly be causing the problem are these three:

HomeSummary.js


App.views.HomeSummary = Ext.extend(Ext.Panel , {
fullscreen: true,
layout: 'fit',
items: [{
xtype: 'list',
store: App.stores.SummaryStore,
itemTpl: '<div class="summaryItem">{summaryItem}</div>',
singleSelect: true,
itemSelector: 'div.summaryItem'
}],
initComponent: function() {
App.views.HomeSummary.superclass.initComponent.apply(this, arguments);
}
});




Ext.reg('summary', App.views.HomeSummary);


SummaryStore.js


Ext.regModel('SummaryList', {
fields: ['summaryItem']
});


App.stores.SummaryStore = new Ext.data.Store({
model: 'SummaryList',
autoLoad: true,
data: [
{summaryItem: 'Job Information'},
{summaryItem: 'Executive Summary'},
{summaryItem: 'Financials'},
{summaryItem: 'Planning Information'},
{summaryItem: 'Project Control Information'},
{summaryItem: 'PM Information'},
{summaryItem: 'CM Information'}
]
});


HomeController.js


Ext.regController('Home', {

// index action
index: function(options)
{
if ( ! this.indexView)
{
this.indexView = this.render({
xtype: 'index'
});
}

var backBtn = this.application.viewport.query('#backBtn')[0];
backBtn.hide();

this.application.viewport.setActiveItem(this.indexView, options.animation);
},

// summary action
summary: function()
{
if ( ! this.summaryView)
{
this.summaryView = this.render({
xtype: 'summary'
});
}

var backBtn = this.application.viewport.query('#backBtn')[0];
backBtn.show();

backBtn.setHandler(function()
{
Ext.dispatch({
controller: 'Home',
action: 'index',
historyUrl: 'Home/index',
//
animation: {
type: 'slide',
reverse: true
}
});
});

this.application.viewport.setActiveItem(this.summaryView);
}
});


Just for reference this is the stack trace I'm getting:
http://i.imgur.com/E6cEf.png

Any help is appreciated, thanks in advance.

NickT
9 Sep 2011, 6:20 PM
can you post the html page that shows the order of js files being loaded... i suspect it may be something with that

NickT
9 Sep 2011, 6:34 PM
I would suggest moving your script loads to the html head. Are you loading your viewport into the body tag? if so, I dont see any reason for loading your scripts within the body... just a thought. your code doesn't look to have any problems as far as i could see, and therefore, I suspect something like this sort of thing... script loading...



<script type="text/javascript" src="lib/sencha-touch-1.1.0/sencha-touch.js"></script>
<link rel="stylesheet" type="text/css" href="lib/sencha-touch-1.1.0/sencha-touch.css" />
<link rel="stylesheet" type="text/css" href="res/css/style.css" />
<script type="text/javascript" src="app/views/Viewport.js"></script>
<script type="text/javascript" src="app/views/home/HomeIndexView.js"></script>
<script type="text/javascript" src="app/views/home/HomeSummaryView.js"></script>
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="app/routes.js"></script>
<script src="app/controllers/HomeController.js" type="text/javascript"></script>
<script type="text/javascript" src="app/stores/SummaryStore.js"></script>

akinsey
10 Sep 2011, 4:16 AM
Actually I tried moving those around to fix the issue, because I read on the forum that it might help; still didn't work for me. Putting them into the body was just the last thing I tried. I don't have access to my code right now, but I'll test the order you posted when I do. Thanks for the tip.