Results 1 to 2 of 2

Thread: Inline Header, Navbar and Footer like JQuery Mobile?

  1. #1
    Sencha Premium Member
    Join Date
    Aug 2007
    Location
    NYC
    Posts
    92
    Vote Rating
    0
      0  

    Default Inline Header, Navbar and Footer like JQuery Mobile?

    I'm new to Sencha Touch and I'm designing an app that will have an inline header, top navbar, and bottom navbar, all of which are inline and scroll with the rest of the content (vs being fixed).

    This is easy to do in JQuery Mobile but I can't figure out how to do the same with Sencha Touch and this it is a decisive issue for choosing between the two because I need to maximize screen space for content (vs toolbars, header).

    I've played with setting the scrollable on the main panel and other places. I can do this in ExtJs but can't do so with Touch.

    I "think" I resolved this issue. See my comments and additional questions after the code.

    Here's my example code:

    App.js:

    Code:
    Ext.Loader.setConfig({
        enabled: true
    });
    
    Ext.application({
        stores: [
            'Contacts'
        ],
        views: [
            'Main'
        ],
        name: 'MyApp',
    
        launch: function() {
            Ext.create('MyApp.store.Contacts');
            Ext.create('MyApp.view.Main', {fullscreen: true});
        }
    
    });
    Main.js

    Code:
    Ext.define('MyApp.view.Main', {
        extend: 'Ext.Container',
        alias: 'widget.main',
    
     /*   config: {
            layout: {//tried different layouts, would expect to use default on main
                type: 'vbox'
            },*/
            scrollable: true,
            items: [
                {
                    xtype: 'container',
                    itemId: 'headerCnt',
                    items: [
                        {
                            xtype: 'titlebar',
                            docked: 'top',
                            title: 'Title'
                        },
                        {
                            xtype: 'toolbar',
                            docked: 'top',
                            items: [
                                {
                                    xtype: 'segmentedbutton',
                                    items: [
                                        {
                                            xtype: 'button',
                                            text: 'Page1'
                                        },
                                        {
                                            xtype: 'button',
                                            text: 'Page 2'
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    xtype: 'container',
                    itemId: 'cardPanel',
                    layout: {
                        type: 'card'
                    },
                    flex: 1,
                    items: [
                        {
                            xtype: 'list',
                            id: 'pageList1',
                            itemId: 'page1List',
                            scrollable: false,
                            itemTpl: [
                                '<div>List Item {firstName}, {lastName}</div>'
                            ],
                            store: 'Contacts',
                            pinHeaders: false
                        },
                        {
                            xtype: 'list',
                            itemId: 'page2List',
                            itemTpl: [
                                '<div>List Item {string}</div>'
                            ]
                        }
                    ]
                },
                {
                    xtype: 'container',
                    itemId: 'footerContainer',
                    items: [
                        {
                            xtype: 'toolbar',
                            docked: 'top',
                            items: [
                                {
                                    xtype: 'segmentedbutton',
                                    items: [
                                        {
                                            xtype: 'button',
                                            text: 'Settings'
                                        },
                                        {
                                            xtype: 'button',
                                            text: 'Etc'
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    
    });
    Contacts.js

    Code:
    Ext.define('MyApp.store.Contacts', {
        extend: 'Ext.data.Store',
    
        config: {
            data: [
                {
                    firstName: 'Tommy',
                    lastName: 'Maintz'
                },
                {
                    firstName: 'Ed',
                    lastName: 'Spencer'
                },
                {
                    firstName: 'Jamie',
                    lastName: 'Avins'
                },
                {
                    firstName: 'Aaron',
                    lastName: 'Conran'
                }//exc
            ],
            storeId: 'Contacts',
            proxy: {
                type: 'ajax',
                reader: {
                    type: 'json'
                }
            },
            fields: [
                {
                    name: 'firstName'
                },
                {
                    name: 'lastName'
                }
            ]
        }
    });
    If I set scrollable to true on the list, it scrolls independently. FAIL
    If I set scrollable to false, the list has zero height. FAIL

    Set cardPanel layout from card to default. Programmatically hide and show the "cards". SUCCESS

    What's the best practice here?

    (also when I scroll to the top or bottom, it "overscrolls" to show a white background and bounces back. Is there a way to eliminate this?)

  2. #2
    Sencha User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,050
    Answers
    3976
    Vote Rating
    1381
      0  

    Default

    You have the toolbars docked and therefore will stay in place as the panel will scroll. Remove it and ensure sizing and it should take part in the scrolling.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •