1. #1
    Sencha User
    Join Date
    Aug 2008
    Posts
    88
    Vote Rating
    0
    gogofe is on a distinguished road

      0  

    Default Style to apply to a button to see only the image of the button

    Style to apply to a button to see only the image of the button


    Hy, I have a button with an image. What is the css class to use to apply to a Ext.Button for seeing only the image of the button and not the button itself, just like you see a button in a toolbar or the buttons in this page(you just see only the image of the button and not the borders of the button). Thanks

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,501
    Vote Rating
    286
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    I don't know of anything pre-existing for doing that. Toolbars use x-toolbar but if you use that you'll find all sorts of other things change styling. Building your own is reasonably straightforward if you base it on x-toolbar. The complicated bit is deciding how you want it to behave under mouseover and mousedown. Here's an example based on the way the toolbars work. One thing to note is that Ext uses image sprites for the background images and varies appearance just by positioning that background image appropriately.

    Code:
    new Ext.Panel({
        cls: 'clear-bg',
        height: 300,
        layout: 'hbox',
        renderTo: Ext.getBody(),
        width: 300,
        items: [
            new Ext.Button({
                iconCls: 'your-icon-class',
                text: 'hey'
            }),
            new Ext.Button({
                iconCls: 'your-icon-class',
                text: 'hey'
            })
        ]
    });
    Code:
    .clear-bg .x-btn-tl, .clear-bg .x-btn-tr, .clear-bg .x-btn-tc, .clear-bg .x-btn-ml, .clear-bg .x-btn-mr,
    .clear-bg .x-btn-mc, .clear-bg .x-btn-bl, .clear-bg .x-btn-br, .clear-bg .x-btn-bc {
        background-position: 500px 500px;
    }
    
    .clear-bg .x-btn-over .x-btn-tl{
        background-position: -6px 0;
    }
    
    .clear-bg .x-btn-over .x-btn-tr{
        background-position: -9px 0;
    }
    
    .clear-bg .x-btn-over .x-btn-tc{
        background-position: 0 -9px;
    }
    
    .clear-bg .x-btn-over .x-btn-ml{
        background-position: -6px -24px;
    }
    
    .clear-bg .x-btn-over .x-btn-mr{
        background-position: -9px -24px;
    }
    
    .clear-bg .x-btn-over .x-btn-mc{
        background-position: 0 -2168px;
    }
    
    .clear-bg .x-btn-over .x-btn-bl{
        background-position: -6px -3px;
    }
    
    .clear-bg .x-btn-over .x-btn-br{
        background-position: -9px -3px;
    }
    
    .clear-bg .x-btn-over .x-btn-bc{
        background-position: 0 -18px;
    }
    
    .clear-bg .x-btn-click .x-btn-tl {
        background-position: -12px 0;
    }
    
    .clear-bg .x-btn-click .x-btn-tr {
        background-position: -15px 0;
    }
    
    .clear-bg .x-btn-click .x-btn-tc {
        background-position: 0 -12px;
    }
    
    .clear-bg .x-btn-click .x-btn-ml {
        background-position: -12px -24px;
    }
    
    .clear-bg .x-btn-click .x-btn-mr {
        background-position: -15px -24px;
    }
    
    .clear-bg .x-btn-click .x-btn-mc {
        background-position: 0 -3240px;
    }
    
    .clear-bg .x-btn-click .x-btn-bl {
        background-position: -12px -3px;
    }
    
    .clear-bg .x-btn-click .x-btn-br {
        background-position: -15px -3px;
    }
    
    .clear-bg .x-btn-click .x-btn-bc {
        background-position: 0 -21px;
    }

Thread Participants: 1