1. #1
    Ext User big_jim's Avatar
    Join Date
    Feb 2008
    Posts
    7
    Vote Rating
    0
    big_jim is on a distinguished road

      0  

    Default Large Icons on Toolbar Buttons

    Large Icons on Toolbar Buttons


    Sorry if this has been asked before, but I tried to search and couldn't find anything.

    I have a toolbar where I want to have buttons with icons larger than the 16px x 16px that seems to be the only supported size.

    If I merely set the icon, without modifying the CSS, I get the following:


    I succeeded in making the the buttons and icons larger by defining the buttons as follows:

    Code:
          tb.add(
            {
              icon: 'close2_x32.png',
              cls: 'x-btn-bigicon'
            }
    where x-btn-bigicon is a user defined class
    Code:
    .x-btn-bigicon .x-btn-center .x-btn-text
    {
        background-position:center;
        background-repeat:no-repeat;
        height:32px;
        width:32px;
        cursor:pointer;
        white-space:nowrap;
        padding:0;
    }
    Now, this works, but the problem is that on mouseover, the background looks messed up. I'll provide images to explain better than words could.

    Without Mouseover (looks fine/normal)


    With Mouseover Normal Button


    With Mouseover Split Button


    I've tried messing with the btn-sprite image and the btn-over classes in the CSS but I haven't been able to figure it out.

    Any help would be appreciated.
    Last edited by big_jim; 7 Feb 2008 at 10:03 AM. Reason: typos

  2. #2
    Ext User big_jim's Avatar
    Join Date
    Feb 2008
    Posts
    7
    Vote Rating
    0
    big_jim is on a distinguished road

      0  

    Default


    It's looking like I need to modify the
    .x-toolbar .x-btn-over classes, and provide them with a new image that works for my icons (which are 32x32px) due to the lack of CSS support for scaling.

    Does anybody have an attractive background that would be easy to scale?

    Alternatively, if somebody has another solution (aside from the obvious of just scaling down my icons), that would be very much appreciated.

  3. #3
    Ext User big_jim's Avatar
    Join Date
    Feb 2008
    Posts
    7
    Vote Rating
    0
    big_jim is on a distinguished road

      0  

    Default


    With enough CSS hacking and my own fancy new sprites, I got it to work with 32x32 icons (or indeed any icon with a height <= 32px)

    Using the following CSS as well as the attached sprite image, all you need to do is add the config option " cls: 'x-btn-bigicon' " on any toolbar button

    Success:



    note: this solution does NOT work for non-toolbar buttons, although following a similar process WOULD work
    note: The attached sprite image is only 3px wide, so you might have to search for it with your mouse.

    Code:
    .x-toolbar .x-btn-bigicon .x-btn-center .x-btn-text{
      background-position:center;
      background-repeat:no-repeat;
      height:36px;
      width:36px;
      cursor:pointer;
      white-space:nowrap;
      padding:0;
    }
    
    .x-toolbar .x-btn-bigicon .x-btn-menu-arrow-wrap .x-btn-center button {
    height:36px;
    background-position: 0px 10px;
    }
    
    .x-toolbar .x-btn-bigicon.x-btn-over .x-btn-menu-arrow-wrap .x-btn-center button {
    background-position:0pt -40px;
    }
    
    .x-toolbar .x-btn-over.x-btn-bigicon .x-btn-left {
    background:transparent url(tbar-bigsprite.gif) scroll 0pt -1px;
    background-repeat: repeat-x;
    }
    
    .x-toolbar .x-btn-over.x-btn-bigicon .x-btn-right {
    background:transparent url(tbar-bigsprite.gif) scroll 0pt -38px;
    background-repeat: repeat-x;
    }
    
    .x-toolbar .x-btn-over.x-btn-bigicon .x-btn-center {
    background:transparent url(tbar-bigsprite.gif) scroll 0pt -75px;
    background-repeat: repeat-x;
    }
    
    .x-toolbar .x-btn-click.x-btn-bigicon .x-btn-left, .x-toolbar .x-btn-bigicon .x-btn-click .x-btn-left, .x-toolbar .x-btn-pressed.x-btn-bigicon .x-btn-left, .x-toolbar .x-btn-menu-active.x-btn-bigicon .x-btn-left {
    background:transparent url(tbar-bigsprite.gif) scroll 0pt -112px;
    background-repeat: repeat-x;
    }
    
    .x-toolbar .x-btn-click.x-btn-bigicon .x-btn-right, .x-toolbar .x-btn-bigicon .x-btn-click .x-btn-right, .x-toolbar .x-btn-pressed.x-btn-bigicon .x-btn-right, .x-toolbar .x-btn-menu-active.x-btn-bigicon .x-btn-right  {
    background:transparent url(tbar-bigsprite.gif) scroll 0pt -149px;
    background-repeat: repeat-x;
    }
    
    .x-toolbar .x-btn-click.x-btn-bigicon .x-btn-center, .x-toolbar .x-btn-bigicon .x-btn-click .x-btn-center, .x-toolbar .x-btn-pressed.x-btn-bigicon .x-btn-center, .x-toolbar .x-btn-menu-active.x-btn-bigicon .x-btn-center  {
    background:transparent url(tbar-bigsprite.gif) scroll 0pt -186px;
    background-repeat: repeat-x;
    }
    A big thanks to all of those who helped...
    Attached Images

  4. #4
    Sencha - Community Support Team VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    8
    VinylFox will become famous soon enough VinylFox will become famous soon enough

      0  

    Default


    Your just too quick for us big_jim

    Nice work by the way, Ive had to do this before and its not the simplest of things.

  5. #5
    Sencha - Training Team RWaters's Avatar
    Join Date
    Mar 2007
    Location
    Los Angeles, CA
    Posts
    714
    Vote Rating
    0
    RWaters is on a distinguished road

      0  

    Default


    Thanks for this, it came in handy. It doesn't work so well in IE due to the use of multiple class selecters (.x-btn-over.x-btn-bigicon) not being supported.

    For my case I just removed the need for the .x-btn-bigicon and made the overrides apply to all toolbars. I also made a couple other tweaks. Firstly I needed to be able to display large icons with text and the current CSS made the icon display underneath the text. By changing the width to auto and setting some padding I was able to get a nice display. Buttons that contain only text and no icons would then display with a bunch of padding and look odd so I added a class x-btn-noicon that could be set to remove this padding. Lastly the separarators looked a bit odd since they were still 16px in height so I adjusted them to the new height.

    Code:
    .x-toolbar .x-btn .x-btn-center .x-btn-text {
        background-position: center;
        background-repeat: no-repeat;
        height: 36px;
        width: auto;
        cursor: pointer;
        white-space: nowrap;
        padding: 0;
        padding-left: 32px;
    }
    .x-toolbar .x-btn-noicon .x-btn-center .x-btn-text  {
      padding-left: 0 !important;
    }
    .x-toolbar .ytb-sep {
      height: 36px;
      background-repeat: repeat-y;
    }

  6. #6
    Ext User
    Join Date
    Feb 2008
    Posts
    3
    Vote Rating
    0
    ngeorgopoulos is on a distinguished road

      0  

    Default Large Icons on Toolbar Buttons

    Large Icons on Toolbar Buttons


    Thanks to Jim and to Rich but unfortunately I did not manage to get neither of these solutions to work properly.

    As Rich has already pointed out Jim's solution fails in IE due to IE's restrictions. But I did not manage to get Rich's proposed solution to work (hover and clicked image effect are presented distorted). Am I missing something?

    Rich I have some questions for u:

    1) Do you make the changes in ext-all.css or do you override the CSS in another css?
    2) Don't u make any changes to images involved in order to apply hover and clicked effect? Which images do u use? If you made any changes to any of the image files is it possible to post them up here?

    3) Finally are u sure that these are only the changes u have made? Please provide (if possible) a complete online working solution?

    4) Or even better can we have an OFFICIAL PROPOSED SOLUTION to this ordinary problem? I think it is very usual for someone to have 32x32 icons and not to use the default ones.

    tia
    nikos

    p.s. I think I managed to make Jim's script to work also in IE7 but it breaks a little bit the 16x16 icons (I am using big_jim's image). I am overriding CSS in my own script so u have to change also the image URL relative path (greyed out). if u do not know what u are doing do not make any changes. I learned the hard way IE's disabilities one more time!

    Code:
     
    .x-toolbar .x-btn-bigicon .x-btn-center .x-btn-text{
    background-position:center;
    background-repeat:no-repeat;
    height:36px;
    width:36px;
    cursor:pointer;
    white-space:nowrap;
    padding:0;
    }
    .x-toolbar .x-btn-bigicon .x-btn-menu-arrow-wrap .x-btn-center button {
    height:36px;
    background-position: 0px 10px;
    }
    .x-toolbar .x-btn-bigicon.x-btn-over .x-btn-menu-arrow-wrap .x-btn-center button {
    background-position:0pt -40px;
    }
    .x-toolbar .x-btn-bigicon.x-btn-over .x-btn-left {
    background: url(../Images/toolbar/tbar-bigsprite.gif) no-repeat 0 -1px;
    }
    .x-toolbar .x-btn-bigicon.x-btn-over .x-btn-right {
    background: url(../Images/toolbar/tbar-bigsprite.gif) no-repeat 0 -38px;
    }
    .x-toolbar .x-btn-bigicon.x-btn-over .x-btn-center {
    background: url(../Images/toolbar/tbar-bigsprite.gif) repeat-x 0 -75px;
    }
    .x-toolbar .x-btn-bigicon.x-btn-click .x-btn-left, .x-toolbar .x-btn-bigicon.x-btn-pressed .x-btn-left, .x-toolbar .x-btn-bigicon.x-btn-menu-active .x-btn-left{
    background: url(../Images/toolbar/tbar-bigsprite.gif) no-repeat 0 -112px;
    }
    .x-toolbar .x-btn-bigicon.x-btn-click .x-btn-right, .x-toolbar .x-btn-bigicon.x-btn-pressed .x-btn-right, .x-toolbar .x-btn-bigicon.x-btn-menu-active .x-btn-right{
    background: url(../Images/toolbar/tbar-bigsprite.gif) no-repeat 0 -149px;
    }
    .x-toolbar .x-btn-bigicon.x-btn-click .x-btn-center, .x-toolbar .x-btn-bigicon.x-btn-pressed .x-btn-center, .x-toolbar .x-btn-bigicon.x-btn-menu-active .x-btn-center{
    background: url(../Images/toolbar/tbar-bigsprite.gif) repeat-x 0 -186px;
    }

  7. #7
    Ext User
    Join Date
    Apr 2008
    Posts
    18
    Vote Rating
    0
    DamienValentine is on a distinguished road

      0  

    Default


    My attempts to force 32px icons crashed. Anyways, I made a little solution whihc can be not so professional, but working. So. First you have to create css-file with next content:
    HTML Code:
    .x-toolbar .x-btn-bigicon .x-btn-center .x-btn-text{
      background-position:center;
      background-repeat:no-repeat;
      height:36px;
      width:36px;
      cursor:pointer;
      white-space:nowrap;
      padding:0;
    }
    
    .x-toolbar .x-btn-bigicon .x-btn-menu-arrow-wrap .x-btn-center button {
    height:36px;
    }
    
    .x-toolbar .x-btn-bigicon.x-btn-over .x-btn-menu-arrow-wrap .x-btn-center button {
    }
    
    .x-toolbar .x-btn-over.x-btn-bigicon .x-btn-left {
    background:transparent url(../images/tbar-hover-left.gif);
    background-repeat: no-repeat;
    }
    
    .x-toolbar .x-btn-over.x-btn-bigicon .x-btn-right {
    background:transparent url(../images/tbar-hover-right.gif);
    background-repeat: no-repeat;
    }
    
    .x-toolbar .x-btn-over.x-btn-bigicon .x-btn-center {
    background:transparent url(../images/tbar-hover.gif);
    background-repeat: repeat-x;
    }
    
    .x-toolbar .x-btn-click.x-btn-bigicon .x-btn-left, .x-toolbar .x-btn-bigicon .x-btn-click .x-btn-left, .x-toolbar .x-btn-pressed.x-btn-bigicon .x-btn-left, .x-toolbar .x-btn-menu-active.x-btn-bigicon .x-btn-left {
    background:transparent url(../images/tbar-pressed-left.gif);
    background-repeat: no-repeat;
    }
    
    .x-toolbar .x-btn-click.x-btn-bigicon .x-btn-right, .x-toolbar .x-btn-bigicon .x-btn-click .x-btn-right, .x-toolbar .x-btn-pressed.x-btn-bigicon .x-btn-right, .x-toolbar .x-btn-menu-active.x-btn-bigicon .x-btn-right  {
    background:transparent url(../images/tbar-pressed-right.gif);
    background-repeat: no-repeat;
    }
    
    .x-toolbar .x-btn-click.x-btn-bigicon .x-btn-center, .x-toolbar .x-btn-bigicon .x-btn-click .x-btn-center, .x-toolbar .x-btn-pressed.x-btn-bigicon .x-btn-center, .x-toolbar .x-btn-menu-active.x-btn-bigicon .x-btn-center  {
    background:transparent url(../images/tbar-pressed.gif);
    background-repeat: repeat-x;
    }
    Next link this css file to your html file by using
    <link rel="stylesheet" type="text/css" href="css/bigicons.css" />
    before <body> statement. Then download images pack and unzip in some folder. Change paths in css so they will point to unzipped images.
    When you define your 32px * 32px toolbar button use:
    Code:
    var tbar2 = new Ext.Toolbar({ 
                renderTo: this.tbar, 
                items: [ 
                    {
                    cls: 'x-btn-bigicon',
                    icon: 'images/worker32x32.gif',
                    }, 
                    {text:'Received',iconCls:'received'}, 
                    {text:'Enroute',iconCls:'enroute'}, 
                    {text:'Complete',iconCls:'complete'} 
                ] 
            });
    You're done.
    Attached Files

  8. #8
    Ext User
    Join Date
    Feb 2008
    Posts
    3
    Vote Rating
    0
    ngeorgopoulos is on a distinguished road

      0  

    Default


    thanx.. I am on vacation ...I 'll give it a try as soon as I get back.

    nikos

  9. #9
    Sencha User bruglur's Avatar
    Join Date
    Nov 2008
    Location
    Chiaravalle (AN)
    Posts
    16
    Vote Rating
    0
    bruglur is on a distinguished road

      0  

    Question


    Hi, i have the some problem with the toolbar , i have tested the last code posted but not working with the Internet Explorer ... Don't show the image !

    Please help me!

  10. #10
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Ext 3 will take care of this for you if you can hold off the requirement for just a while (or upgrade to premium membership and access the development code!)