1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    10
    Vote Rating
    0
    aladdinteng is on a distinguished road

      0  

    Default Unanswered: How to make the tabBar docked top to behave the same way as tabBar docked bottom?

    Unanswered: How to make the tabBar docked top to behave the same way as tabBar docked bottom?


    I'm looking to make a TabPanel with icons on top instead of just text.
    I read from previous posts that I have to override the x-tabbar.x-docked-top properties in the css.

    Is there an easy way to do this in the SCSS/Compass?
    If not, what specific properties of x-tabbar do I have to add/modify so that it behaves that way?

  2. #2
    Sencha User
    Join Date
    May 2012
    Posts
    10
    Vote Rating
    0
    aladdinteng is on a distinguished road

      0  

    Default


    Can I bump my thread?

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


    bumping a thread won't make us view the thread any faster.

    You will need to do CSS work, the elements are there for the icon.
    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. #4
    Sencha User
    Join Date
    May 2012
    Posts
    10
    Vote Rating
    0
    aladdinteng is on a distinguished road

      0  

    Default


    Sorry, I'm quite new.

    Which elements am I supposed to work on? Cause I set the iconCls and iconMask already and still the icons won't show.

  5. #5
    Sencha User
    Join Date
    Nov 2012
    Location
    London
    Posts
    19
    Vote Rating
    0
    alessio.valentini is on a distinguished road

      0  

    Default help

    help


    Can you provide guidelines on how to achieve this?! I really need this for a client project.

  6. #6
    Sencha User
    Join Date
    Feb 2011
    Location
    Düsseldorf, Germany
    Posts
    574
    Answers
    34
    Vote Rating
    31
    Kurt001 has a spectacular aura about Kurt001 has a spectacular aura about

      0  

    Default


    You could also use the tabBar inside a container. Then dock the container "top" and the tabBar "bottom".

  7. #7
    Sencha User
    Join Date
    Nov 2012
    Location
    London
    Posts
    19
    Vote Rating
    0
    alessio.valentini is on a distinguished road

      0  

    Default


    I do not get it...

    The tab bar is an element used within the Ext.tab.Panel context. How can you have it as a standalone component?

    Code:
    Ext.define("Project.view.Main", {
        extend: 'Ext.tab.Panel',
        xtype: 'MainTabPanel',
    
    
        config: {
    
    
            tabBar: {
                docked: 'bottom',
    
                layout: {
                    pack: 'center'
                }
            },
    
    
            // default animation when user change tab
            layout: {
                animation : { type: 'fade', duration: 500 }
            },
    
    
            // make tabBar top behave like bottom
            items: [
    
    
                {
                    xtype: 'DashboardContainer'
                },
                {
                    xtype: 'ComplianceContainer'
                },
           ]

  8. #8
    Sencha User
    Join Date
    Feb 2011
    Location
    Düsseldorf, Germany
    Posts
    574
    Answers
    34
    Vote Rating
    31
    Kurt001 has a spectacular aura about Kurt001 has a spectacular aura about

      0  

    Default Pro and Cons but no out of the box

    Pro and Cons but no out of the box


    I was talking about the tabBar (Ext.tab.Bar) and not the tabPanel (Ext.tab.Panel).

    The tabpanel cannot be changed like that, but the tabbar could be set that way.

    The tabpanel is a very comfy way to setup panels with buttons in the tabbar.

    The tabbar on its own needs to be set with controlers to switch views.


    So we are down to two options:
    1) Use the tabpanel and let the panel handle the logic of switching views.
    But you have to do the scss part.

    2) Use the tabbar and let sencha use the bottom css for the top position.
    But you have to switch views "manually".

  9. #9
    Sencha User
    Join Date
    Nov 2012
    Location
    London
    Posts
    19
    Vote Rating
    0
    alessio.valentini is on a distinguished road

      0  

    Default


    Any clue/high level explanation on the scss side?!

  10. #10
    Sencha User
    Join Date
    Feb 2011
    Location
    Düsseldorf, Germany
    Posts
    574
    Answers
    34
    Vote Rating
    31
    Kurt001 has a spectacular aura about Kurt001 has a spectacular aura about

      0  

    Default


    you might want to understand the tabbar first.
    The tabbar comes with automatically generated tabs.
    These are designed in touch/resources/themes/stylesheets/sencha-touch/default/widgets/_tabs.scss (line 184 in ST 2.1)

    The tabbar itself does not really matter. It's all about the tabs