Upgrade to 2.0 RC caused screen to stay white

[Kah0ona]

Hello,

Our little app used to work in the previous 2.0 Beta, but since the RC I keep getting a white screen. The console does not give me any errors. Also, the main view is, according to the console, 'rendered: true'.
If i inspect the elements i can even see a whole bunch of html is rendered.

This is my code of my main instantiation in app.js:

Ext.application({
    name: 'MarktBuzz',
   
    tabletStartupScreen: 'tablet_startup.jpg',
    phoneStartupScreen: 'phone_startup.jpg',
    
    controllers: ['Positioning','Slide'],
    models: ['Shops', 'Items'],
    views: ['Main','components.MallHeader','components.MediaCarousel',
            'items.Items','items.ItemsDetails','items.ItemsList',
            'shops.Shops','shops.ShopsDetails','shops.ShopsList' ],

    stores: ['Combined'],
    requires: ['Ext.util.GeoLocation','Ext.XTemplate', 'MarktBuzz.view.Main'],
    launch: function() {
        
        MarktBuzz = this;
        MarktBuzz.combinedStore = Ext.create('MarktBuzz.store.Combined', {
            storeId: 'combinedStore'
        });
        buildTemplates();
        
        MarktBuzz.view = Ext.create('MarktBuzz.view.Main', {
            fullscreen : true
        });

        createGeoLocationObject();
        
        MarktBuzz.Geolocation.updateLocation()
    }
});

Is something obvious wrong here?

[mitchellsimoens]

It looks ok. Does the launch method fire for you?

[Kah0ona]

Okay, now I restructured the whole project with the new command line tool, generated a new app, and then pasted my code back in. Now it shows tabpanel with two panes.

Now the problem is that the list , with data from jsonp service is not populated, whilst the data is verified to be in the store. Or the list is not drawn at all. Something obvious going wrong here?

3 nested components are

//main view
Ext.define('MarktBuzz.view.Main', {
    extend: 'Ext.tab.Panel',

    requires : 
            ['MarktBuzz.view.items.Items', 
              'MarktBuzz.view.shops.Shops',
              'Ext.TabPanel'],
    
    config: {
        
        tabBarPosition: 'bottom',
        items : [
            {xtype : 'itemspanel'},
            {xtype : 'shopspanel'}
        ]

    }
});

//itemslist container view
Ext.define('MarktBuzz.view.items.Items', {
    extend: 'Ext.Panel',
    xtype: 'itemspanel',
    requires: ['MarktBuzz.view.items.ItemsList', 'Ext.Panel'],
    config: {
        title:                     'Aanbiedingen',
        iconCls:                 'more',

        layout: {
            type: 'card',
            animation: {
                type: 'slide',
                direction: 'left'
            }
        },
       
        items : [
            {
                xtype : 'itemslistpanel'
            }
        ]      
}
});

//items list

Ext.define('MarktBuzz.view.items.ItemsList', {
    extend: 'Ext.Panel',
    xtype : 'itemslistpanel',
    
    requires : ['MarktBuzz.view.components.MallHeader', 'Ext.List', 'Ext.Panel'],
    config: {

        layout : 'fit',
        items : [
            {
                xtype : 'mallheadertoolbar'
            },
            {
                xtype : 'list',
                action: 'item',
                fullscreen: true,
                grouped : true,
                store: MarktBuzz.combinedStore,
                cls: 'mb_richList',
                itemTpl: MarktBuzz.templateItemList,
                allowDeselect: false,
                singleSelect: true
            }
        
    ]        
    }
});

//list template 
MarktBuzz.templateItemList = Ext.create('Ext.XTemplate', 
        '<tpl for="Item">',
            '<tpl if="xindex == 1">',
                '<div class="mb_richListImage">',
                    '<img src="' + MB_config_itemThumbPath + '{thumbImg}"/>',
                '</div>',
                '<div class="smallDistance">{parent.distance:this.getDistance}</div>',
                '<h2>{title}</h2>',
                '<p>{Shop_id:this.getShopName}</p>',
                '{ItemType_id:this.getTypeClass}',
            '</tpl>',
        '</tpl>',
        {
            
            getShopName : function(value) {
                
                var index = MarktBuzz.combinedStore.find('Shop_id', value);
                this.relatedShop = MarktBuzz.combinedStore.getAt(index).getData()
                return this.relatedShop.name;
                
            },
            
            getTypeClass : function(value) {
                var typeString;
                
                return '<div class="type t' + value + '">' + MB_config_itemType[value] + '</div>';
            },
            getDistance : function(distance) {
    
                if (distance < 0.8) {
                    return (distance * 1000).toFixed(1) + ' m.';
                } else {
                    return distance.toFixed(1) + ' km.';
                }
            }
        }
    );

Am I missing something obvious here?

[Kah0ona]

Solved it. Somehow the list was set to hidden:true according to inspecting the object.

Somehow removing the fullscreen: true on the list object fixed it:

So my list code is now like this (got rid of the xtype thing, and used initialzie function instead. Is there a reason why this works now / what was wrong with the old approach?):

Ext.define('MarktBuzz.view.items.ItemsList', {
	extend: 'Ext.Panel',
	xtype : 'itemslistpanel',
	
	requires : ['MarktBuzz.view.components.MallHeader', 'Ext.List', 'Ext.Panel'],
	config: {
		fullscreen : true,
		layout : 'fit'
		
		/*items : [
			{
				xtype : 'mallheadertoolbar'
			},
			{
				xtype : 'list',
				action: 'item',
				fullscreen: true,
				           
				grouped : true,
				store: MarktBuzMarktz.combinedStore,
				cls: 'mb_richList',
				itemTpl: MarktBuzz.templateItemList,
				allowDeselect: false,
				singleSelect: true
			}
		]*/
	},
	
	initialize: function() {
        this.callParent(arguments);
        
        var toolbar, itemsList, searchBox;
        
        toolBar = Ext.create('MarktBuzz.view.components.MallHeader');
        
        itemsList = Ext.create('Ext.List',{
        	action: 'item',
			//fullscreen: true,
			grouped : true,
			store: MarktBuzz.combinedStore,
			cls: 'mb_richList',
			itemTpl: MarktBuzz.templateItemList,
			allowDeselect: false,
			singleSelect: true,
			
        });
        
        this.add([toolBar, itemsList])       
    }
});