NestedList not rendering properly, fixes upon orientation change

[dchan]

I've been at this problem for 8 hours and have attempted to scour every possible resource to remedy this.

I have a NestedList that I'm activating and for some reason, the content area (not the toolbar[s]) is not appearing until I change the orientation of my device. Then it loads fine. The odd thing is that this happens in WebKit browsers on both Android and iOS devices, but NOT Chrome or Safari. It's driving me nuts.

I've even tried forcing a doLayout and doComponentLayout at various points (before render, after activate, etc, etc.), but nothing seems to work. Does anyone have any clues?

Here is some potentially relevant snippets:

Ext.regModel('allItems', {
    fields: [	{name: 'id', type: 'int'},
    			{name: 'text', type: 'string'},
    			{name: 'image', type: 'string'},
    			{name: 'description', type: 'string'}
    		]
});


var optionsStore = new Ext.data.TreeStore({
    model: 'allItems',
    proxy: {
    	url: 'json/?id=1&type=menu',
        type: 'ajax',
        reader: {
            type: 'tree',
            root: 'items'
        }
    }
});


Project.views.mainDataList = new Ext.NestedList({
    fullscreen: true,
	toolbar: {
		ui:'dark',
		id:'itemToolbar',
		items: [
			{xtype: 'spacer'},
			{
				text: 'Home',
				align: 'right',
				handler: function(){
					Project.views.mainPanel.setActiveItem(0, {type:Project.defaultAnim, reverse: true});
		        }
			}
		]	
	},
    title: 'Categories',
    displayField: 'text',
    emptyText: 'Could not load any items.',
    store: optionsStore,
    useTitleAsBackText: false,
    loadingText: 'Loading...',
	getDetailCard: function(record, parentRecord) {
		currentItemRecord = record.attributes.record.get('text');
        return new Ext.Panel({
            items:[
            	{
            		xtype: 'container',
            		flex: 4,
            		cls: 'itemPhotoContainer',
            		layout: {type: 'vbox' },
            		height: Ext.is.Tablet ? 400 : 180,
            		html: '<div class="itemPhoto" style="background-image:url(images/' + 
            			   record.attributes.record.get('image') + ');"></div>'
            	}
		        ]}
            ],
            baseCls: 'homeCanvas',
            scroll: 'vertical',
			listeners: {				
				activate: function(){
					Project.views.mainDataList.toolbar.setTitle(currentItemRecord);
				}
			}
        });
    }
});



Project.views.categoriesChooser = new Ext.Panel({
    id: 'categoryLister',
    dockedItems:[{
        xtype: 'toolbar',
        items: Project.objects.bottomToolbarOrder,
		layout: { pack:'center' },
        dock: 'bottom'
		}
    ],
    defaults: {
        cls: 'card'
    },
    items: Project.views.mainDataList,	
  	}
});

[jay@moduscreate.com]

You might want to post in the proper place .

Moving to Sencha Touch help.

[christythomas]

I'm seeing a similar problem. Did you solve this problem? If so, how?

[dchan]

Nope. Still no luck. Anybody???

Thanks, Deborah

[christythomas]

I have a workaround and that is to setHeight("100%") on the nested list. I do this instead of doComponentLayout as setHeight will call that and ensure the height is not 0 as that is what I was seeing was the cause of the problem.

[dchan]

Lifesaver! THANK YOU

[schreyerplace]

Not only does the nested list not render correctly, return to the parent list causes the list to overlap the docked bottom toolbar.

Rotating the device triggering layout adjustments always fixes everything.

Is there any way to manually fire the orientation change event as a work around?

[schreyerplace]

I forgot to add that setHeight("100%") isn't "fixing" the nested list problem for me.

Not only does the nested list not render correctly, return to the parent list causes the list to overlap the docked bottom toolbar.

Rotating the device triggering layout adjustments always fixes everything.

Is there any way to manually fire the orientation change event as a work around?

[Geoffrey Freedom]

Same issue here. Not sure what the problem is.