[CLOSED] Label for ImageButton like desktop icon

  1. #1

    [CLOSED] Label for ImageButton like desktop icon

    Hi

    How do you add a label underneath an ImageButton, just like the desktop icons? If ImageButton is not the right component to use, which one is the best or easiest to create such effect? Thanks

    Chris
    Last edited by Daniil; May 11, 2012 at 4:34 PM. Reason: [CLOSED]
  2. #2
    ImageButton doesn't support any label
    You can place separate ImageButton and Label inside Container with VBox Layout
  3. #3
    Can I reuse the desktop icon object?

    Or should I extend the ImageButton and make an IconButton class which use a container and a Vbox layout?
  4. #4
    Quote Originally Posted by CarpFisher View Post
    Can I reuse the desktop icon object?
    No, I don't think you could reuse it.

    Quote Originally Posted by CarpFisher View Post
    Or should I extend the ImageButton and make an IconButton class which use a container and a Vbox layout?
    I think you will need to inherit your class from Container, not ImageButton.

    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 v2 Example</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:Container 
            runat="server" 
            Layout="VBoxLayout" 
            Width="60">
            <LayoutConfig>
                <ext:VBoxLayoutConfig Align="Stretch" />
            </LayoutConfig>
            <Items>
                <ext:Container runat="server" Layout="HBoxLayout">
                    <LayoutConfig>
                        <ext:HBoxLayoutConfig Pack="Center" />
                    </LayoutConfig>
                    <Items>
                        <ext:ImageButton ID="ImageButton1" runat="server" ImageUrl="resources/images/test.png" />
                    </Items>
                </ext:Container>
                <ext:Label 
                    runat="server" 
                    Text="Some label"
                    Margins="5 0 0 0"
                    StyleSpec="text-align: center;" />
            </Items>
        </ext:Container>
    </body>
    </html>
  5. #5
    Thank you so much the example helps a lot.

    However when I looked at why I initially choose an ImageButton, it is because all the buttons seem to behave a bit differently in the layout. They different because they can be located side by side in the parent panel and automatically arranged nicely (by the default layout I presume that is autolayout) , even if the parent panel is re-sized. However, with a normal container, the containers won't be placed side by side (but underneath each other) unless it is in Hboxlayout or in the same row a tablelayout. The problems is both HboxLayout and tablelayout has different limitation (such as I have to predefine the numbers of columns) that are not as good as the arrangement of the autolayout.

    Is that I want that I can define a normal container to behave like a button in the layout arrangement?

    Thanks!
  6. #6
    looks like

    StyleSpec="float:left;"
    for the container provides the effect that is needed
    Last edited by Daniil; May 10, 2012 at 11:02 AM. Reason: Please use [CODE] tags
  7. #7
    Yes, I've just wanted to suggest the same.

Similar Threads

  1. [CLOSED] change icon of a label from directmethod
    By CarpFisher in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 18, 2012, 4:44 PM
  2. Change Label Icon in Ajax Event?
    By Tbaseflug in forum 1.x Help
    Replies: 2
    Last Post: Jun 11, 2010, 1:46 PM
  3. [CLOSED] Update label Icon over AjaxMethod
    By reinout.mechant@imprss.be in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Jun 07, 2009, 2:48 AM
  4. [CLOSED] GridPanel + Icon and/or Label Icon
    By state in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 28, 2009, 2:03 AM

Tags for this Thread

Posting Permissions