What's New?

[CLOSED] Set css for the images via an ImageButton

  1. #1
    Jun 21, 2011, 1:48 AM

    [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
    Jun 21, 2011, 4:02 AM
    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
    Jun 21, 2011, 3:46 PM
    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
    Jun 21, 2011, 3:50 PM
    Hi,

    ImageButton doesn't support to define images via css.
    You have to define urls
    Vladimir Shcheglov
    Sr. Developer
    Ext.NETASP.NET Component Framework
    Bridge.NETWrite C#. Run JavaScript.
    Deck.NETFrameworks and Tools for .NET Developers
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter|Bridge.NET
  5. #5
    Jun 21, 2011, 4:15 PM
    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
    Jun 21, 2011, 6:04 PM
    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
    Jun 21, 2011, 7:35 PM
    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
    Jun 21, 2011, 8:22 PM
    Hi,

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

    http://dev.sencha.com/deploy/ext-3.3...mber=mouseover
    Geoffrey McGill
    Founder
    Ext.NETASP.NET Component Framework
    Bridge.NETRun your C# Apps on the web
    Deck.NETC# to JavaScript Compiler Playground
    RetypedThousands of JS libraries in C#
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter|Bridge.NET
  9. #9
    Jun 24, 2011, 2:47 PM
    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. [CLOSED] Images in resx files, how would you use them with an ImageButton?
    By sadaf in forum 1.x Legacy Premium Help
    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