1. #1
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    104
    Vote Rating
    0
    jej2003 is on a distinguished road

      0  

    Default Unanswered: Change the Window Tool size

    Unanswered: Change the Window Tool size


    Is there a way to change the size of the tool icons? They are currently 15x15 but I'd like to make them about 20x20, but still be positioned correctly. Any information on how to do this?

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    Answers
    690
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Have a look at: (inspecting tool icon in DeveloperTools(chrome)/Firebug
    .x-tool img { .. }

    The sprites are located at: (refer to your local version)
    http://dev.sencha.com/deploy/ext-4.1...ol-sprites.gif

    Regards,
    Scott.

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    104
    Vote Rating
    0
    jej2003 is on a distinguished road

      0  

    Default


    Thanks Scott. I've changed the image and its' size, but now I would like to move it further left. After looking at the DOM in Firebug the tool is being positioned using leftomevalue. If I change the size of the tool then it becomes really close to the right border of the window. Is this positioned in Javascript? If so if someone could point me to where so I can have more control over it's position that would be great.

  4. #4
    Sencha Premium Member
    Join Date
    Oct 2012
    Location
    Atlanta, GA
    Posts
    7
    Vote Rating
    0
    scott.jackson is on a distinguished road

      0  

    Exclamation Also Having This Issue

    Also Having This Issue


    I'm also trying to do the same thing. I've examined the CSS and have made the following change:
    Code:
    .vdsNavigation .x-tool {
        width: 21px;
        height: 21px;
    }
    .vdsNavigation .x-tool-collapse-top {
        background-position: 0px 0px;
        background-image: url(assets/btn_close.png) !important;
        background-color: transparent;
    }
    .vdsNavigation .x-tool-expand-bottom {
        background-position: 0px 0px;
        background-image: url(assets/btn_open.png) !important;
        background-color: transparent;
    }
    This does cause my correct image to appear as 21x21, however internally the style of .x-tool is being set inline back to 15x15. The 15x15 div.x-tool is positioned for 15x15 and not 21x21, even though the .x-tool IMG is sized to 21x21. This means the tool is not centered for the 21x21 image, and only the upper left 15x15 rectangle actually activates its function (expanding or collapsing).

    How do I override (or remove) that inline style?
    2012-11-07 13_38_37.png
    (Sencha 4.1.x, Architect 2.1, Internet Explorer 8)

  5. #5
    Sencha User
    Join Date
    Apr 2012
    Posts
    16
    Vote Rating
    0
    Corcho is on a distinguished road

      0  

    Default


    Having sort of the same problem here on 4.2.1. I'm setting $tool-size to 23px and apparently it's applied to the .x-tool img, but the .x-tool doesn't adjust to the inner image's size. Also the "text" part of the header is not getting this tool size.

    EDIT: Looking at older versions, this size was applied to the .x-tool and worked (ie 4.0.7).

  6. #6
    Sencha User
    Join Date
    Oct 2012
    Location
    Atlanta, GA
    Posts
    1
    Vote Rating
    0
    scottj is on a distinguished road

      0  

    Default


    I was unable to solve this issue, and convinced the product owner to accept the smaller icons.

  7. #7
    Sencha User
    Join Date
    Apr 2012
    Posts
    16
    Vote Rating
    0
    Corcho is on a distinguished road

      0  

    Default


    Further debugging took me to this:

    Captura.PNG

    If I manually add a close tool (not the one created with "closable: true") and add the sizes manually to the ".x-tool", the "manual close tool" renders ok and also the text container is making space for it. But the automatic close tool keeps with default sizes and and so is the space text container is making for it.

  8. #8
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    North Carolina
    Posts
    308
    Vote Rating
    22
    Answers
    3
    worthlutz will become famous soon enough

      0  

    Default


    Did anyone figure out how to use larger icons for the tools?

    I've been playing around with it a bit but have not come up with a satisfactory solution.

    I'm still using Extjs 4.

    Thanks,
    Worth

  9. #9
    Sencha Premium Member
    Join Date
    Jul 2011
    Posts
    3
    Vote Rating
    0
    Bernd Goldschmidt is on a distinguished road

      0  

    Default You can set width and height

    You can set width and height


    You can define width and height of tool itself when defining it:

    Code:
    {
      type: 'close',
      tooltip: 'Return', 
      cls: 'tool-something-close',
      width: 32,
      height: 32,
      callback: 'returnItem'
    },