Results 1 to 6 of 6

Thread: TabPanel modification

  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    26

    Question TabPanel modification

    My app has 5 bottom tabs, they stay consistent through out the app.

    Each tab loads landing page of that section. There are more "internal" pages to the section, which can be reached by interacting on items on the landing page.

    The help I need is, how do I navigate through these internal section pages, and still keep the tab selected through out, till I go into another section by clicking on another tab.

    For example, say the first tab is news listing, and second tab is event listing, and third tab is media listing.

    Once I click on the events tab, the landing page of the Events section loads. Now, if I navigate through the events, view detail, etc, I want the event tab to stay selected.

  2. #2
    Sencha User
    Join Date
    Dec 2011
    Location
    Hyderabad, India
    Posts
    117

    Default

    Refer to the tabs2 example in senchaTouch. you will better understand this.

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    26

    Default

    Hi Naga,

    That is all about just a simple tabpanel. I am looking to set multiple views per tab, with one view visible at once.

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Location
    Hyderabad, India
    Posts
    117

    Default

    you mean multiple carousels in each tab ?

  5. #5
    Sencha User
    Join Date
    Oct 2011
    Posts
    26

    Default

    Yes. multiple cards in each panel. Default card is a list, and then ability to display information about each item in the list upon user interaction. All while staying in the same panel (same tab selected)

  6. #6
    Sencha User
    Join Date
    Dec 2011
    Location
    Hyderabad, India
    Posts
    117

    Default

    first create one tabpanel

    Code:
    tabPanel = new Ext.TabPanel({
                tabBar: {
                    dock: 'bottom',
                 layout: {
                        pack: 'center'
                    },
                },
                fullscreen: true,
                cardSwitchAnimation: {
                    type: 'slide',
                    cover: true
                },
                defaults: {
                    scroll: 'horizantal'
                },
               items: [carousel1, carousel2,carousel3]
            });
    and now define carousels like

    Code:
    var carousel1 = new Ext.Carousel({
    
    
        defaults: {
            cls: 'card'
        },
        fullscreen: true,
        id: 'Carousel',
        
        title: 'Tab1', //  Title on the tabbar
        layout: {
                    type: 'card'
                },
         dockedItems: {
            dock: 'top',
            xtype: 'toolbar',
            title: 'Carousel1',
            items: [
            // items in the toolbar
         ]
        },
        iconCls: 'internal', // if you need any icon for the tab
        items: [    
        {
            title: 'carousel Item1',
            html: '1'
        },
        {
            title: 'carousel Item2',
            html: '2'
        },
        {
            title: 'carousel Item3',
            html: '3'
        }]
    });
    similarly create another carousels also

Tags for this Thread

Posting Permissions

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