Showing a list in a tab panel. (Michellsimeons Where you at!)

[jonathansimmons]

So I'm fairly new to sencha touch. Recently I started a building a simple app in 1.1 and then realized 2.0 existed. I'm prone to using the latest greatest so I though I'd give it a shot since I'm just learning I don't want to learn the old way.

I have an MVC app all setup with 2.0 details below:

Controller: Main
Views: Viewport (Ext.tabPanel), ListUsers (Ext.list), and Donations (Ext.list)
Models: User (ajax proxy), Donation (ajax proxy)
Stores: Users, Donations

The Main controller instantiates the Viewport view and everything loads in fine. The tab functionality is working great I can switch to and from the ListUser to Donations views without a problem.

My issues is that the lists themselves are not populating. They data doesn't show. I'm not sure how to check that Users or donations stores are indeed getting the info from the server, is that possible? They are set to autoLoad but I've not gotten any errors so I'm just not sure.

In my insainty of trying to work this out I tested making ListUsers a regular panel with a simple bit of HTML just to be sure they were rendering, which worked. So My thought is either a.) my data is not loaded or b.) it's loaded by I'm doing something wrong preventing it from showing.

Any help or a direction in how I can troubleshoot why this is happening would be greatly appreciated. Below is my main controller, Viewport and ListUser views for reference.

Main.js (Controller)

Ext.define('AdminApp.controller.Main', {
	extend: 'Ext.app.Controller',
	requires: ['AdminApp.store.Users'],
	models: ['User', 'Donation'],
	stores: ['Users', 'Donations'],
	views:  ['Viewport', 'ListUsers', 'ShowUser', 'Donations'],
    
	init: function() {
		console.log('controller Loaded');


		Ext.Viewport.setActiveItem({xtype: 'Viewport'});	
		

		this.control({
			'Viewport': {
				show: console.log('viewport loaded')
			},
			'ListUser': {
				show: console.log('listusers loaded')
			},
		})
	
	}
});

Viewport. js (View)

Ext.define('AdminApp.view.Viewport', {
	extend: 'Ext.tab.Panel',
	alias: 'widget.Viewport',
	requires: ['AdminApp.view.ListUsers', 'AdminApp.view.ShowUser'],
	layout: 'card',
	config: {
	    scrollable: true,
	    tabBarPosition: 'bottom',
	    items: [
	        {
	            xtype: 'ListUsers',
		    title: 'Users',
	            iconCls: 'user',
		    // html: 'testing'
	        },
			{
	            xtype: 'Donations',
		    title: 'Donations',
	            iconCls: 'bookmarks',
		    // html: 'testing'
	        }
	    ]
	}
});

ListUser (View)

Ext.define('AdminApp.view.ListUsers', {
	extend: 'Ext.List',
	alias: 'widget.ListUsers',
	requires : ['AdminApp.store.Users'],
	config: {
		fullscreen: true,
		itemTpl: '<span>{user_id}</span>',
		store: 'AdminApp.store.Users',
		items: [],
		html: 'testing'
	}
});

[jonathansimmons]

@mitchellsimoens forgive me for butchering your name.

[rdougan]

I haven't tried your code, but the 'layout' configuration should be inside the config: {} block in your Viewport view.

You should also add the 'fullscreen: true' configuration to your viewport, so it knows to go in the main viewport (and remove the Ext.Viewport.setActiveItem)

[jonathansimmons]

Thanks for the note, However that just breaks the app throwing and error: "Cannot call method 'setReverse' of null".

I added fulscreen: true as it was infact missing on my viewport, which I think was due to a deprecated mistake in the docs.

Your reference to removing the Ext.Viewport.setActiveItem doesn't quite make sense. My controller is instantiating my view which is why it's there rather than having autoCreateViewport on the main viewport.

That being said neither of these fixed the issue of the data not showing. I have confirmed that the data is present in the store and formatted according to the model, it just won't show up.

this is what my store looks like in the log. Something seems not right to me:

Ext.apply.create.Class

autoLoad: true
data: Ext.apply.create.Class
allowFunctions: false
eventDispatcher: Ext.apply.create.Class
getEventDispatcher: function () {
getKey: function (record) {
getObservableId: function () {
getUniqueId: function () {
id: "ext-util-mixedcollection-4"
items: Array[843]
0: Ext.apply.create.Class
data: Object
__proto__: Object
__defineGetter__: function __defineGetter__() { [native code] }
__defineSetter__: function __defineSetter__() { [native code] }
__lookupGetter__: function __lookupGetter__() { [native code] }
__lookupSetter__: function __lookupSetter__() { [native code] }
constructor: function Object() { [native code] }
hasOwnProperty: function hasOwnProperty() { [native code] }
isPrototypeOf: function isPrototypeOf() { [native code] }
propertyIsEnumerable: function propertyIsEnumerable() { [native code] }
toLocaleString: function toLocaleString() { [native code] }
toString: function toString() { [native code] }
valueOf: function valueOf() { [native code] }
dirty: false
id: "AdminApp.model.Donation-ext-record-205"
index: 0
internalId: "ext-record-205"
modified: Object
phantom: true
raw: Object
ID: "30"
address_city: "info removed for privacy"
address_country: "United States"
address_country_code: "US"
address_state: "LA"
address_street: "5info removed for privacy"
address_zip: "info removed for privacy"
date: "2011-05-22 18:26:07"
first_name: "info removed for privacy"
item_name1: "Donation to info removed for privacy"
last_name: "info removed for privacy"
mc_gross_1: "200.00"
memo: ""
parent_txn_id: ""
payer_email: "info removed for privacy"
payer_id: "info removed for privacy"
payment_date: "18:26:07 May 22, 2011 PDT"
receiver_email: "info removed for privacy"
subscr_id: ""
txn_id: "info removed for privacy"
txn_type: ""
user: "0"
user_id: "64"
__proto__: Object
store: Ext.apply.create.Class
__proto__: TemplateClass
1: Ext.apply.create.Class
2: Ext.apply.create.Class
.....