1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    49
    Vote Rating
    3
    Answers
    2
    svendahlstrand is on a distinguished road

      0  

    Default Answered: Multiple tabs in tabpabel - one view

    Answered: Multiple tabs in tabpabel - one view


    I want something like this:

    * A Tabpanel for navigation
    * Three items in this Tabpanel, e.g. iOS, Android, Windows Phone
    * All items share the same view, it's only the content that differs (from a Store with different filter dependent on the current tab)

    Is this even possible and the correct approach? Another way is to use a toolbar with buttons in a panel, with a card layout, and make all the navigation myself. But how do I emulate to Tabpanel look and feel?

    Thanks!

  2. Hmm I guess this means I have to solve this navigation problem with another UI design pattern.

    Im thinking about having Products (the carousel view), Favorites, and Settings tabs in the tab panel. And on the Products tab having a extra toolbar for the filtering of products. Then I work around the problem completely. Thanks for your suggestions.

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


    Are you wanting to share the same view instance? If so then you can remove (not destroying the view) and add it to the next tab.
    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.

  4. #3
    Sencha User Olivierco's Avatar
    Join Date
    Nov 2011
    Location
    Paris - France
    Posts
    65
    Vote Rating
    -1
    Answers
    3
    Olivierco is an unknown quantity at this point

      0  

    Default


    1 - First I recomend to make a MVC-S app
    2 - for each tab make a unique view conected to a unique store which one get his own store
    xtype: 'tabpanel',
    items: [{
    xtype: 'myview2'
    },
    {
    xtype: 'myview2'
    },
    {
    xtype: 'myview3'
    }
    ]

  5. #4
    Sencha User
    Join Date
    Apr 2012
    Posts
    49
    Vote Rating
    3
    Answers
    2
    svendahlstrand is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    Are you wanting to share the same view instance? If so then you can remove (not destroying the view) and add it to the next tab.
    Ahh that sounds smart! So right now I'm doing this, and get a new view instance for each tab:

    Code:
    Ext.define('woodler.view.Main', {
      extend: 'Ext.TabPanel',
      xtype: 'main',
    
    
      config: {
        fullscreen: true,
    
    
        items: [
          {
            title: I18n.t('ios'),
            xtype: 'products'
          },
          {
            title: I18n.t('android'),
            xtype: 'products'
          },
          {
            title: I18n.t('windows'),
            xtype: 'products'
          }
        ]
      }
    });
    How do I share the same instance of products view? Thanks!

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


    I personally would prefer you to use separate views but if you wanted to use one then you can listen for the activeitemchange event and remove from old tab and add to new tab

    Code:
    tabpanel.on('activeitemchange', 'onTabChange', tabpanel, null, 'before'); //need before order
    
    onTabChange : function(panel, newTab, oldTab) {
        var comp = oldTab.down('products');
    
        oldTab.remove(comp, false); //do not destroy the component
    
        newTab.add(comp);
    }
    *disclaimer* Just typed that from my header, should work still.
    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.

  7. #6
    Sencha User
    Join Date
    Apr 2012
    Posts
    49
    Vote Rating
    3
    Answers
    2
    svendahlstrand is on a distinguished road

      0  

    Default


    Ok, think I get it. But using this approach in the beginning of the apps life cycle there will be three instances, right? Thats a problem because in the products view theres a carousel. I populate this carousel in the controller but the controller will know about three carousels in the beginning. Correct me if I'm wrong.

    Think about my problem in this way. I have a view with a products carousel. The end user should be able to filter the products to be displayed in the carousel (eg. only iOS, Android or Windows products). I would like to use the Tabpanel design pattern for the filtering. So the tab bar should have iOS, Android, etc. and when the user clicks one of them I will filter the carousel (using a store filter). But I would also like some other alternatives in the tab bar (Settings, Favorites) and they should have their own views.

    Does this make my problem any clearer? Am I on the right track? Thank you so much for your help.

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


    You would still have 3 tabs so you can get the titles and they would use fit layout. Then when you add the products component it would fit to that tab.
    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.

  9. #8
    Sencha User
    Join Date
    Apr 2012
    Posts
    49
    Vote Rating
    3
    Answers
    2
    svendahlstrand is on a distinguished road

      0  

    Default


    Hmm I guess this means I have to solve this navigation problem with another UI design pattern.

    Im thinking about having Products (the carousel view), Favorites, and Settings tabs in the tab panel. And on the Products tab having a extra toolbar for the filtering of products. Then I work around the problem completely. Thanks for your suggestions.

Thread Participants: 2