1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    Atlanta, Georgia
    Posts
    40
    Vote Rating
    2
    mbritton is on a distinguished road

      0  

    Default Answered: NestedList added to Panel doesn't show

    Answered: NestedList added to Panel doesn't show


    Why isn't my nested list showing?

    Thanks in advance!

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

  2. 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.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,057
    Answers
    3495
    Vote Rating
    850
    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


    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.
    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
    Jan 2012
    Location
    Atlanta, Georgia
    Posts
    40
    Vote Rating
    2
    mbritton is on a distinguished road

      0  

    Default


    Very helpful, thanks.

  5. #4
    Sencha User
    Join Date
    Jan 2012
    Location
    Atlanta, Georgia
    Posts
    40
    Vote Rating
    2
    mbritton is on a distinguished road

      0  

    Default


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

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

  6. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,057
    Answers
    3495
    Vote Rating
    850
    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's fine if it is executed after the launch method has fired.
    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.

  7. #6
    Sencha User
    Join Date
    Jan 2012
    Location
    Atlanta, Georgia
    Posts
    40
    Vote Rating
    2
    mbritton is on a distinguished road

      0  

    Default


    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?

Thread Participants: 1