1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    15
    Answers
    1
    Vote Rating
    0
    Kah0ona is on a distinguished road

      0  

    Default Answered: Upgrade to 2.0 RC caused screen to stay white

    Answered: Upgrade to 2.0 RC caused screen to stay white


    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:

    Code:
    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?

  2. 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?):
    Code:
    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])       
        }
    });

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,524
    Answers
    3447
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    It looks ok. Does the launch method fire for you?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    15
    Answers
    1
    Vote Rating
    0
    Kah0ona is on a distinguished road

      0  

    Default


    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
    Code:
    //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?

  5. #4
    Sencha User
    Join Date
    Nov 2011
    Posts
    15
    Answers
    1
    Vote Rating
    0
    Kah0ona is on a distinguished road

      0  

    Default


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

Thread Participants: 1