Results 1 to 4 of 4

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

  1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    79
    Answers
    7

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

    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)
    Code:
    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)
    Code:
    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)
    Code:
    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'
    	}
    });

  2. #2
    Sencha User
    Join Date
    Nov 2011
    Posts
    79
    Answers
    7

    Default

    @mitchellsimoens forgive me for butchering your name.

  3. #3
    Sencha User rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159
    Answers
    93

    Default

    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)
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  4. #4
    Sencha User
    Join Date
    Nov 2011
    Posts
    79
    Answers
    7

    Default

    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:

    Code:
    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
        • .....

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •