NestedList added to Panel doesn't show

[mbritton]

Why isn't my nested list showing?

Thanks in advance!

var data = {
     text: 'Groceries',
     items: [{
         text: 'Drinks',
         items: [{
             text: 'Water',
             items: [{
                 text: 'Sparkling',
                 leaf: true
             }, {
                 text: 'Still',
                 leaf: true
             }]
         }, {
             text: 'Coffee',
             leaf: true
         }, {
             text: 'Espresso',
             leaf: true
         }, {
             text: 'Redbull',
             leaf: true
         }, {
             text: 'Coke',
             leaf: true
         }, {
             text: 'Diet Coke',
             leaf: true
         }]
     }, {
         text: 'Fruit',
         items: [{
             text: 'Bananas',
             leaf: true
         }, {
             text: 'Lemon',
             leaf: true
         }]
     }, {
         text: 'Snacks',
         items: [{
             text: 'Nuts',
             leaf: true
         }, {
             text: 'Pretzels',
             leaf: true
         }, {
             text: 'Wasabi Peas',
             leaf: true
         }]
     }]
 };


 Ext.define('ListItem', {
     extend: 'Ext.data.Model',
     config: {
         fields: [{
             name: 'text',
             type: 'string'
         }]
     }
 });


 var store = Ext.create('Ext.data.TreeStore', {
     model: 'ListItem',
     defaultRootProperty: 'items',
     root: data
 });


 var nestedList = Ext.create('Ext.NestedList', {
     id:'nl',
     fullscreen: true,
     title: 'Groceries',
     displayField: 'text',
     store: store
 });


Ext.application({
    name: 'MyApp',
    requires:[
        'MyApp.view.View1'
    ],
    launch: function() {
        Ext.create("Ext.tab.Panel", {
            fullscreen: true,
            showAnimation:true,
            items:[
                {
                    id:'v1',
                    xtype:'view1',
                    title:'Page One',
                    layout:'fit',
                    fullscreen:true,
                    initialize:function() {
                        console.log('INITIALIZE');
                        this.add(nestedList);
                        console.dir(nestedList);
                    },
                    activate:function() {
                        console.log('ACTIVATE');
                    },
                    show:function() {
                        console.log('SHOW');
                    },                    
                    add:function() {
                        console.log('ADD');
                    },                    
                },
                {
                    id:'v2',
                    xtype:'view1',
                    title:'Page Two',
                    layout:'fit',
                    html:'Welcome to Page Two'
                }
            ],
            tabBar: {
              docked:'bottom',
              showAnimation:true
            },
            id:'main',
        }); 
        
        this.createPageOneNestedList();       
    },


    createPageOneNestedList:function() {
        console.log('createPageOneNestedList');
        
         //console.dir(Ext.getCmp('v1'));
         //Ext.getCmp('v1').add(nestedList);
        
    }
});

[mitchellsimoens]

You shouldn't use Ext.create outside the launch method or else you will loose the user interactions on it, nothing will be tappable.

You are using the fullscreen config way too much. You should only use it if you want that component added to Ext.Viewport, no child items of another component should use the fullscreen config.

[mbritton]

Very helpful, thanks.

[mbritton]

I have a lot of this going on in my applications:

PostListViewMediator.prototype.createNestedList = function() {
    var store  = Ext.StoreMgr.lookup('postStore');
    var main = Ext.getCmp('main');
    
    var nl = Ext.create('Ext.NestedList', {
        id:'storyList',
        title: 'Web Log',
        iconCls: 'bookmarks',
        displayField: 'text',
        store:store,
        cls:'shot',
        showAnimation:true,
        detailCard: {
            html:'',
            scrollable:{
             direction:'vertical'   
            },
        },
        toolbar: {
          docked:'top',
          ui:'charcoal',
          showAnimation:true  
        },
        listeners: {
            leafitemtap: function(nestedList, list, index, target, record) {
                var detailCard = nestedList.getDetailCard();
                detailCard.setLayout('fit');
                detailCard.setStyleHtmlCls('shot');
                var html = '<div style="padding:10px;">'+record.get('content')+'</div>';
                detailCard.setHtml(html);
            }
        }        
        }
    );


    main.add(nl);
    main.unmask();
    
    
};

You said to not use Ext.create outside of the launch handler, but this approach has worked very well for me in the past, with a non-autoloading Viewport.

[mitchellsimoens]

It's fine if it is executed after the launch method has fired.

[mbritton]

You said: "You shouldn't use Ext.create outside the launch method". Am I safe in assuming this is a way of saying not to use it until the launch method has fired, to avoid potential race conditions? If so, are there other handlers that need to fire before create is used? Are there properties I can check to determine if the container is ready, instead of setting my own booleans?