PDA

View Full Version : [CLOSED] Label for ImageButton like desktop icon



CarpFisher
May 09, 2012, 6:01 PM
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

Vladimir
May 09, 2012, 6:26 PM
ImageButton doesn't support any label
You can place separate ImageButton and Label inside Container with VBox Layout

CarpFisher
May 10, 2012, 8:02 AM
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?

Daniil
May 10, 2012, 9:01 AM
Can I reuse the desktop icon object?

No, I don't think you could reuse it.


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>

CarpFisher
May 10, 2012, 9:38 AM
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!

CarpFisher
May 10, 2012, 10:56 AM
looks like


StyleSpec="float:left;"

for the container provides the effect that is needed

Daniil
May 10, 2012, 11:01 AM
Yes, I've just wanted to suggest the same.