1. #1
    Sencha User
    Join Date
    Aug 2007
    Location
    NYC
    Posts
    85
    Vote Rating
    0
    JEBriggs is on a distinguished road

      0  

    Default Unanswered: Inline Header, Navbar and Footer like JQuery Mobile?

    Unanswered: 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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,754
    Answers
    3462
    Vote Rating
    827
    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 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 @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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."