1. #1
    Sencha User
    Join Date
    May 2007
    Posts
    74
    Vote Rating
    0
    marceloverdijk is on a distinguished road

      0  

    Default Extending the Get Started with a list >> no items showing

    Extending the Get Started with a list >> no items showing


    I'm trying to extend the getting started application by adding a tab panel with a list.
    The list uses an inline store with fixed data.

    But when I navigate to the List tab no list items ares displayed. Just an empty with the titlebar.

    Am I missing something here..?

    Code:
    Ext.define("App.view.Main", {
        extend: 'Ext.tab.Panel',
        requires: ['Ext.TitleBar'],
        
        config: {
            tabBarPosition: 'bottom',
            
            items: [
                {
                    title: 'Welcome',
                    iconCls: 'home',
                    
                    styleHtmlContent: true,
                    scrollable: true,
    
                    items: {
                        docked: 'top',
                        xtype: 'titlebar',
                        title: 'Welcome to Sencha Touch 2'
                    },
                    
                    html: [
                        "You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
                        "contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
                        "and refresh to change what's rendered here."
                    ].join("")
                },
                {
                    title: 'List',
                    iconCls: 'action',
                    
                    items: [
                        {
                            docked: 'top',
                            xtype: 'titlebar',
                            title: 'List'
                        },
                        {
                            xtype: 'list',
                            store: {
                                fields: ['name'],
                                data: [
                                    {name: 'Cowper'},
                                    {name: 'Everett'},
                                    {name: 'University'},
                                    {name: 'Forest'}
                                ]
                            },
                            itemTpl: '{name}'
                        }
                    ]
                }
            ]
        }
    });

  2. #2
    Sencha User
    Join Date
    Feb 2012
    Posts
    10
    Vote Rating
    1
    wozznik is on a distinguished road

      0  

    Default


    You must to change your list tab for something like this:

    Code:
    {
        title: 'List',
        iconCls: 'action',
        xtype: 'list',
    
    
        store: {
            fields: ['name'],
            data: [
                {name: 'Cowper'},
                {name: 'Everett'},
                {name: 'University'},
                {name: 'Forest'}
            ]
        },
        itemTpl: '{name}',
            
        items: [
            {
                docked: 'top',
                xtype: 'titlebar',
                title: 'List'
            },
        ]
    }
    It creates a list inside the tab panel

  3. #3
    Sencha User
    Join Date
    May 2007
    Posts
    74
    Vote Rating
    0
    marceloverdijk is on a distinguished road

      0  

    Default


    Thanks, it worked.

    I thought it needed to be part of the items, just as the titlebar.

    I also wonder what I should then if I want to have some kind of form above the list?

Thread Participants: 1