Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Big icons & Buttons

  1. #1

    Default Big icons & Buttons

    Hello !
    I'm new on this forum and a new ExtJs user.
    I'm thinking to write some application with this framework and I'm moving the first steps in this direction.
    Obviously I've encountered the first problem: how I can fit an icon that have a size of 50x50 pix into a button ?
    I've searched in forum but I've found only the solution for icon thah is 32x32 pix
    Any help is apreciated.
    Bye
    Paolo

  2. #2

    Default

    Hey !
    no more answers !
    Thank to all that have helped me !
    It's possible to have a little help ?
    What kind of forum is it ? Where is the collaborations ?
    At the end I only asked a very little thing that can by solved with a very little answer !
    However many thank to all !

  3. #3
    Ext User Joe's Avatar
    Join Date
    Apr 2007
    Posts
    243

    Default When posting a question ...

    It may help if you provide a bit more detail about what you have tried so far and where you are running into the issue.

    Asking .. "can you provide me exact code to do what I want to do", is a bit of a tall order for any forum.

    Related post: http://extjs.com/forum/showthread.php?t=25690

    Did you try getting the one you mentioned that works for 32x32 - getting it working at 32x32 - then changing it to 50x50? If so, what broke?

    Provide some details like that and you may get some exact details for a solution.
    Joseph Francis,
    CoreLan / Meeting Consultants

  4. #4

    Default

    Well Joe,
    I'm using extjs 3.0 RC2 because i've readed on forum that version 3.0 of buttons is more flexible for larger icons than 32x32. Thaht's all. I haven't tryed any other solutions.
    For these reasons I was thinking that the solution must be very simple and I'm sorry for my second post. Probably it was too little gently.
    However in fact my only question is if it is possible to use icons larger than 32x32 in (in my case 50x50) with extjs 3.0 RC2 and what and where is the way to follow for do this ?
    Bye

  5. #5
    Ext User Joe's Avatar
    Join Date
    Apr 2007
    Posts
    243

    Default I was just about to post that ...

    I was just about to post the link to 3.0 /examples/toolbar/toolbars.html

    Copy that demo and related files. Update the add in the css to point to your icon. I tried it with a 50px icon and looked ok in the version with wider text - play with it, may get you there.

    If you are new to ExtJS - start with 3.0.
    Joseph Francis,
    CoreLan / Meeting Consultants

  6. #6

    Default

    Ok Joe thank you !
    I'll do that.

  7. #7
    Ext User Joe's Avatar
    Join Date
    Apr 2007
    Posts
    243

    Default scale ...

    Large scale is only 32 px.

    Looking at the source, it seems you should be able to make your own x-btn-super-large (instead of small or large, etc). You will need to add your own css styles with your own name and size details.

    Example (there are many)
    HTML Code:
    .x-btn-noicon .x-btn-small .x-btn-text{
        height: 16px;
    }
    would be ...
    HTML Code:
    .x-btn-noicon .x-btn-super-large .x-btn-text{
        height: 50px;
    }
    ... and so on ..

    Then use super-large for scale in your configs.

    I have not tried this, but from looking at how the css files are layed out and a quick glance and the docs / source, it seems this may work.
    Joseph Francis,
    CoreLan / Meeting Consultants

  8. #8

    Default

    Ok. I've tryed what you have tell me.
    I have modifyed the buttons sample and the result was a big icon (50x50) in a button panel.
    This encourage me. But I'm in another situation.
    My goal is to produce an application layout like this:

    var viewport = new Ext.Viewport({
    layout : "border",
    items : [{
    region : "center",
    items : [ {
    xtype:'toolbar',
    items:[{
    xtype: 'button',
    scale: 'large',
    iconCls: 'add50'
    }]

    }]
    } , {
    region : "north",
    height : 30
    } , {
    region : "south",
    height : 150
    } , {
    region : "west",
    width : 200
    }
    ]

    })
    I've created in the css a right recall to my .png file (add50).
    I want to create a toolbar in the center region with 10-12 buttons 50x50 big.
    With this code the result is that the icon's button is always automatically re-scaled to a size (i think) of 32x32 and not the original size of 50x50.
    There is a solution for this ?

  9. #9
    Ext User Joe's Avatar
    Join Date
    Apr 2007
    Posts
    243

    Default It does due to scale large ...

    In your code ...

    Where you are using ....

    Code:
    scale: 'large',
    Try using ...
    Code:
    scale: 'super-large',
    .. super-large should match your css additions of course ...
    Joseph Francis,
    CoreLan / Meeting Consultants

  10. #10

    Default

    Sorry for the lag time: I'm busy.
    Problem solved !
    Thank you so much Joe.
    See you..

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •