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

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..." hd porno faketaxi