Stock ticker example

example.url

http://qa.postapp.com/mobile/builder/?id=b18f7738-d2e8-4ea3-9503-08f8866aecd8

ticker.js

{
	setup: function() {
		// See below
	},

	index: function(interaction) {
   		// Jeff: `panel` wasn't defined, you need to define it to use it.
		// this.renderIndex(panel, interaction); // is this the correct way to render this panel?

		// Define the panel once if it isn't defined.	
		if(!this.panel) {
			// This was a local variable in the setup function.  Since it is defined in a function and it's a
			// local variable it is out of scope to other functions.  Either define it in the index function or make it a property of
			// something that both the setup function and the index function have access to, like the `this` reference.
			// I just moved it to the index function.
			// var stockFeed = Wbx.controllers.getControllerById('stocks');	// we can define this in the setup right?

			var stockFeed = Wbx.controllers.getControllerById('stocks');
			
			// Use a Wbx.views.DataView - only use a Ext.DataView if you need to disable scrolling for some reason.
			// new Ext.DataView({
			this.panel = new Wbx.views.DataView({
				cls: 'stock-ticker',
				// The targetController isn't necessary, it was only used as a way to navigate to and back from feed
				// pages, since you aren't navigating away from this page to the stockFeed then you don't need this.
				//targetController: c.store.controller, //what would be the purpose of this?
				// Leave scrolling on.
				// scroll: false,
				layout: 'vbox',
				width: '100%',
				// If you don't want the items to be selectable, change the itemSelector to something that doesn't exist
				// in the template.
				itemSelector: 'li.unicorn',
				// DataViews load data from stores, you can just use the reference to the stockFeed page's store
				// as the store for this DataView's store.
				store: stockFeed.store,
				tpl: new Wbx.views.Template(
				            '<div class="table-view sums imgs">',
				                '<ul class="section">',
				                    '<tpl for=".">',
				                        '<li class="entry">',
										'<tpl for="title">',
			                            	'<div class="row-label">{content}</div>',
										'</tpl>',
										'<tpl for="content">',
			                            	'<div class="row-label">{content}</div>',
										'</tpl>',										
				                        '</li>',
				                    '</tpl>',
				                '</ul>',
				            '</div>'
				        )        
			});
			// Tell the store to load, the DataView will get populated automatically.
			this.panel.store.load(); 
		}
		// Render the view after the panel is defined.
		this.renderIndex(this.panel, interaction);
	}
}