Why won't my List show?

[celwell]

Hi, I had my list showing ealier, but I moved some things around because I want it to show for the first 4 tabs and then the 5th tab takes them to Account page. Thanks for help.

CODE (couldn't get php tags to work right):

 initialize: function () {

        this.callParent(arguments);
        
        var eventsList = {
            xtype: "container",
            items: [
                {
                    xtype: "toolbar",
                    docked: "top",
                    ui: "secondary",
                    items: [
                        {
                            xtype: 'spacer', 
                            flex: 1 
                        },
                        {
                            xtype: "segmentedbutton",
                            allowDepress: false,
                            style: "text-transform: uppercase; font-weight: bold;",
                            flex: 200,
                            items: [
                                {
                                    xtype: "button",
                                    //id: "top",
                                    text: 'Top Events',
                                    flex: 1,
                                    pressed: true
                                },
                                {
                                    xtype: "button",
                                    //id: "latest",
                                    text: 'Happening Now',
                                    flex: 1
                                }
                            ],
                            listeners: {
                                toggle: function(container, button, pressed) {
                                    this.onSortButtonTap(button.id);
                                },
                                scope: this
                            }
                        },
                        { 
                            xtype: 'spacer', 
                            flex: 1
                        }
                    ]
                },
                {
                    xtype: "eventslist",
                    store: Ext.getStore("Events"),
                    listeners: {
                        itemtap: function(list, index, target, record, e, eOpts) {
                            this.onViewEvent(record.get('eid'));
                        },
                        scope: this
                    }
                }
            ]
        };
        
        var categoryTab = {
            xtype: 'container',
            iconCls: 'bookmarks',
            iconMask: true,
            title: 'Category',
            items: [
                eventsList
            ]
        };
        
        var timelineTab = {
            xtype: 'container',
            iconCls: 'time',
            iconMask: true,
            title: 'Timeline',
            items: [
                eventsList
            ]
        };
        
        var searchTab = {
            xtype: 'container',
            iconCls: 'search',
            iconMask: true,
            title: 'Search',
            items: [
                eventsList
            ]
        };
        
        var countryTab = {
            xtype: 'container',
            iconCls: 'add',
            iconMask: true,
            title: 'Country',
            items: [
                eventsList
            ]
        };
        
        var accountTab = {
            xtype: 'account',
            iconCls: 'user',
            iconMask: true,
            title: 'Account',
            badgeText: 'Login'
        };

        this.add([
            categoryTab,
            countryTab,
            timelineTab,
            searchTab,
            accountTab
        ]);
}

[mitchellsimoens]

The container in the eventsList variable needs a layout like fit to give the list a size.

[celwell]

Hmm... same problem, doesn't show anything except the top toolbar and the bottom tabs.

Here is the full code for that View:

Ext.define("WSI.view.EventsListContainer", {
    extend: "Ext.tab.Panel",
    alias: "widget.eventslistcontainer",
    config: {
        tabBarPosition: 'bottom',
        layout: {
            type: 'card',
            animation: {
                type: 'fade'
            }
        }
    },
    initialize: function () {


        this.callParent(arguments);
        
        var eventsList = {
            xtype: "container",
            layout: 'hbox',
            items: [
                {
                    xtype: "toolbar",
                    docked: "top",
                    ui: "secondary",
                    items: [
                        {
                            xtype: 'spacer', 
                            flex: 1 
                        },
                        {
                            xtype: "segmentedbutton",
                            allowDepress: false,
                            style: "text-transform: uppercase; font-weight: bold;",
                            flex: 200,
                            items: [
                                {
                                    xtype: "button",
                                    //id: "top",
                                    text: 'Top Events',
                                    flex: 1,
                                    pressed: true
                                },
                                {
                                    xtype: "button",
                                    //id: "latest",
                                    text: 'Happening Now',
                                    flex: 1
                                }
                            ],
                            listeners: {
                                toggle: function(container, button, pressed) {
                                    this.onSortButtonTap(button.id);
                                },
                                scope: this
                            }
                        },
                        { 
                            xtype: 'spacer', 
                            flex: 1
                        }
                    ]
                },
                {
                    xtype: "eventslist",
                    store: Ext.getStore("Events"),
                    listeners: {
                        itemtap: function(list, index, target, record, e, eOpts) {
                            this.onViewEvent(record.get('eid'));
                        },
                        scope: this
                    }
                }
            ]
        };
        
        var categoryTab = {
            xtype: 'container',
            iconCls: 'bookmarks',
            iconMask: true,
            title: 'Category',
            items: [
                eventsList
            ]
        };
        
        var timelineTab = {
            xtype: 'container',
            iconCls: 'time',
            iconMask: true,
            title: 'Timeline',
            items: [
                eventsList
            ]
        };
        
        var searchTab = {
            xtype: 'container',
            iconCls: 'search',
            iconMask: true,
            title: 'Search',
            items: [
                eventsList
            ]
        };
        
        var countryTab = {
            xtype: 'container',
            iconCls: 'add',
            iconMask: true,
            title: 'Country',
            items: [
                eventsList
            ]
        };
        
        var accountTab = {
            xtype: 'account',
            iconCls: 'user',
            iconMask: true,
            title: 'Account',
            badgeText: 'Login'
        };


        this.add([
            categoryTab,
            countryTab,
            timelineTab,
            searchTab,
            accountTab
        ]);
    },
    onSortButtonTap: function(sort) {
        this.fireEvent("sortCommand", this, sort);
    },
    onViewEvent: function(eid) {
        this.fireEvent("viewEventCommand", this, eid);
    }
});

[celwell]

I tried layout: 'fit' too.

[mitchellsimoens]

eventsList is nested within another container