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

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:

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


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);


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'}


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];

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];

controller: 'Home',
action: 'index',
historyUrl: 'Home/index',
animation: {
type: 'slide',
reverse: true


Just for reference this is the stack trace I'm getting:

Any help is appreciated, thanks in advance.

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

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>

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.