View Full Version : NestedList not rendering properly, fixes upon orientation change

8 Mar 2011, 2:54 PM
I've been at this problem for 10+ 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 in Chrome or Desktop 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 are 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: {
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({
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.categoriesChooser = new Ext.Panel({
id: 'categoryLister',
xtype: 'toolbar',
items: Project.objects.bottomToolbarOrder,
layout: { pack:'center' },
dock: 'bottom'
defaults: {
cls: 'card'
items: Project.views.mainDataList,