1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    48
    Vote Rating
    0
    Answers
    3
    celwell is on a distinguished road

      0  

    Default Unanswered: Why won't my List show?

    Unanswered: Why won't my List show?


    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):

    Code:
     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
            ]);
    }
    Last edited by mitchellsimoens; 16 Apr 2012 at 5:05 AM. Reason: added code with [CODE] tags

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


    The container in the eventsList variable needs a layout like fit to give the list a size.
    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.

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    48
    Vote Rating
    0
    Answers
    3
    celwell is on a distinguished road

      0  

    Default


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

    Here is the full code for that View:

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

  4. #4
    Sencha User
    Join Date
    Apr 2012
    Posts
    48
    Vote Rating
    0
    Answers
    3
    celwell is on a distinguished road

      0  

    Default


    I tried layout: 'fit' too.

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    898
    Answers
    3575
    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


    eventsList is nested within another container
    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.

Thread Participants: 1