1. #1
    Sencha User d5chris's Avatar
    Join Date
    Feb 2011
    Location
    Sydney
    Posts
    59
    Vote Rating
    2
    d5chris is on a distinguished road

      0  

    Default How to make toolbar buttons appear like the tab bar icons

    How to make toolbar buttons appear like the tab bar icons


    Hi all,
    In a toolbar (dockedItem) that's docked to the top of a panel, i want the buttons to appear like they do in the 'bottom tabs' example in the sencha kitchen sink sample. Eg, with a big icon, and small centered text underneath.
    Like so:

    Can this be done somehow (without using a TabPanel preferably)?

  2. #2
    Sencha User
    Join Date
    Feb 2011
    Posts
    28
    Vote Rating
    0
    Larry Q is on a distinguished road

      0  

    Default


    Hi Chris,

    I asked something quite similar not long ago, and received a good answer. Hope this can help:

    http://www.sencha.com/forum/showthre...s-in-a-Toolbar

  3. #3
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    Portland, OR
    Posts
    133
    Vote Rating
    5
    markwyner is on a distinguished road

      0  

    Default


    Glad that worked out, Larry.

    Chris, I believe you can load a toolbar and add a number of buttons to it which you could then style by overriding sencha-touch.css with your own classes.

    The toolbar setup is easy enough:
    http://dev.sencha.com/deploy/touch/d...t.Toolbar.html

    Then, you can reference the post Larry mentioned which outlines how to set up new styles.
    -------------------------------------------
    Mark Wyner, Partner, Bunker
    http://bunkercollective.com/

  4. #4
    Sencha User d5chris's Avatar
    Join Date
    Feb 2011
    Location
    Sydney
    Posts
    59
    Vote Rating
    2
    d5chris is on a distinguished road

      0  

    Default


    Thanks larry.
    I was hoping i could use a TabBar like the TabPanel uses, however the CSS styles are written in such a way so that doesn't work.
    I'll probably just do what you say and write some extra CSS over a normal toolbar.

  5. #5
    Sencha User d5chris's Avatar
    Join Date
    Feb 2011
    Location
    Sydney
    Posts
    59
    Vote Rating
    2
    d5chris is on a distinguished road

      0  

    Default


    In the end, got them looking pretty close with the following code:

    This property on the toolbar:
    Code:
    cls: 'nav-bar',
    And this CSS:

    Code:
    .nav-bar .x-button {
      display: -webkit-box;
      display: box;
      -webkit-box-orient: vertical;
      box-orient: vertical;
    }
    .nav-bar .x-button img {
      position:relative;
      top:-3px;
    }
    .nav-bar .x-button span {
      padding-top:3px;
      font-size: 9px !important;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      text-shadow: #000 0 -1px 1px;
    }

  6. #6
    Sencha User
    Join Date
    Dec 2010
    Posts
    2
    Vote Rating
    0
    CrushYar is on a distinguished road

      0  

    Default


    d5chris, thank you! Exactly what i was looking for!You save the rest of my day!

  7. #7
    Sencha User
    Join Date
    Sep 2010
    Posts
    3
    Vote Rating
    0
    extjs5788 is on a distinguished road

      0  

    Default


    Apply the baseCls:'x-tabbar' to toolbar and baseCls:'x-tab' to buttons inside the toolbar. and it should work.

    As shown below, you need to apply the x-tab-active class when the button is pressed.

    Ext.create('Ext.Container', {
    fullscreen: true,
    layout: {
    type: 'vbox',
    pack: 'center'
    },
    items: [
    {
    xtype : 'toolbar',
    docked: 'bottom',
    baseCls:'x-tabbar',
    defaults : {
    iconMask: true,
    align : 'center',
    baseCls:'x-tab'
    },
    items: [
    {
    xtype : 'spacer'
    },
    {
    text:'Accounts',
    iconCls:'home',
    ui :'normal',
    iconAlign : 'top',
    handler: function() {
    var b = Ext.ComponentQuery.query('button[iconCls="action"]')[0];
    b.removeCls('x-tab-active');
    this.addCls('x-tab-active');
    }
    },
    {
    text : 'Options',
    iconCls : 'action',
    ui : 'normal',
    iconAlign : 'top',
    handler: function() {
    var b = Ext.ComponentQuery.query('button[iconCls="home"]')[0];
    b.removeCls('x-tab-active');
    this.addCls('x-tab-active');
    }
    },
    {
    xtype : 'spacer'
    }
    ]
    }
    ]
    });

Similar Threads

  1. how to add icons / buttons in a docked panel without using toolbar?
    By samuelp in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 30 Sep 2011, 1:27 PM
  2. Buttons with icons?
    By satdaten in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 24 Jul 2010, 11:42 AM
  3. Large Icons on Toolbar Buttons
    By big_jim in forum Ext 2.x: Help & Discussion
    Replies: 12
    Last Post: 10 Jun 2010, 11:59 AM
  4. Any way to make Toolbar buttons like MS office 2008 on MAC?
    By Stju in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 10 Feb 2010, 8:57 AM

Thread Participants: 4