[CLOSED] Set css for the images via an ImageButton

  1. #1

    [CLOSED] Set css for the images via an ImageButton

    How can I set css for the images via an ImageButton
    Last edited by Daniil; Jun 24, 2011 at 2:48 PM. Reason: [CLOSED]
  2. #2
    Hi,

    What kind of css would you like to set?

    All Ext.Component inheritors have .Cls property, you can use it to set up any css class.
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi,

    What kind of css would you like to set?

    All Ext.Component inheritors have .Cls property, you can use it to set up any css class.
    I would like to set the css property that each image which will use

    ex:
    ImageUrl = "button.gif"
    OverImageUrl = "overButton.gif"
    DisabledImageUrl = "disabled.gif"
    PressedImageUrl = "pressed.gif"
    I do not want to inform the url of the image but the css class and inform the css url
    Last edited by Daniil; Jun 21, 2011 at 4:03 PM. Reason: Please use [CODE] tags
  4. #4
    Hi,

    ImageButton doesn't support to define images via css.
    You have to define urls
    Vladimir Shcheglov
    Sr. Developer
  5. #5
    Quote Originally Posted by Vladimir View Post
    Hi,

    ImageButton doesn't support to define images via css.
    You have to define urls
    So I have to use the button.
    I set the button on the icon IconCls the button will have.
    There are as set via css to change the mouse over the image?

    Another detail.
    The image is 16 x 16 px if I set the button size 16x16
    The bottom of the button appears as shown in the attached image.

    Dung view only the image, it is possible?

    <ext:Button ID="ClearFilterButton" runat="server" IconCls="CssExtClearFilterButton-d"
                                                                    ToolTip="Limpa os filtros" Disabled="true" Height="16" Width="16">
                                                                    <Listeners>
                                                                        <Click Handler="clearFilter(null);" />
                                                                    </Listeners>
                                                                </ext:Button>
    Attached Thumbnails Click image for larger version. 

Name:	botão.JPG 
Views:	57 
Size:	5.1 KB 
ID:	2894  
  6. #6
    Please see the example. I used this image:
    Name:  user48x48.png
Views: 150
Size:  3.9 KB

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
        
        <style type="text/css">
            .my-icon {
                background-image: url("/Resources/images/user48x48.png");
            }
            
            .x-btn-tl, .x-btn-tr, .x-btn-tc, .x-btn-ml, .x-btn-mr, .x-btn-mc, .x-btn-bl, .x-btn-br, .x-btn-bc {
                background-image: none;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Button 
                runat="server"
                Cls="my-icon"
                Disabled="true" 
                Height="48" 
                Width="48" />
        </form>
    </body>
    </html>
  7. #7
    Quote Originally Posted by Daniil View Post
    Please see the example. I used this image:
    Name:  user48x48.png
Views: 150
Size:  3.9 KB

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
        
        <style type="text/css">
            .my-icon {
                background-image: url("/Resources/images/user48x48.png");
            }
            
            .x-btn-tl, .x-btn-tr, .x-btn-tc, .x-btn-ml, .x-btn-mr, .x-btn-mc, .x-btn-bl, .x-btn-br, .x-btn-bc {
                background-image: none;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Button 
                runat="server"
                Cls="my-icon"
                Disabled="true" 
                Height="48" 
                Width="48" />
        </form>
    </body>
    </html>
    And there is the possibility to change the image to place the mouse over?
  8. #8
    Hi,

    Please investigate using the "mouseover" and "mouseout" events, see

    http://dev.sencha.com/deploy/ext-3.3...mber=mouseover
    Geoffrey McGill
    Founder
  9. #9
    Quote Originally Posted by geoffrey.mcgill View Post
    Hi,

    Please investigate using the "mouseover" and "mouseout" events, see

    http://dev.sencha.com/deploy/ext-3.3...mber=mouseover
    Ok, thanks.

Similar Threads

  1. [CLOSED] [1.0] ImageButton AutoDataBind
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 21, 2011, 2:19 PM
  2. Replies: 4
    Last Post: Mar 30, 2011, 11:46 AM
  3. Problem with imageButton
    By joao.msdn in forum 1.x Help
    Replies: 3
    Last Post: Apr 23, 2010, 12:24 PM
  4. Refresh ImageButton
    By Maia in forum 1.x Help
    Replies: 9
    Last Post: Jan 12, 2010, 2:49 PM
  5. [CLOSED] imagebutton skinid
    By majestic in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 22, 2009, 4:07 PM

Posting Permissions