[CLOSED] [1.0] ButtonGroup tools

**danielg** · Mar 01, 2010, 7:29 AM

Is it possible for the ButtonGroup to have the ability to add Tools to it? Please see the attached image for an example of what I mean.

I'd like to be able to add an "Expand" icon to a ButtonGroup, associate a Tooltip with it, as illustrated in the attached image, and allow it to be clickable.

Any thoughts on how this could be achieved?

Many thanks,

Dan

**Vladimir** · Mar 01, 2010, 11:40 AM

Hi,

Try the following sample

<%@ 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 id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server">
        </ext:ResourceManager>
        
        <ext:ButtonGroup ID="Group1" runat="server" Title="Clipboard">
            <Items>
                <ext:TableLayout runat="server" Columns="2">
                    <Cells>
                        <ext:Cell>
                            <ext:Button runat="server" Text="Button" Icon="Add" Scale="Large">
                            </ext:Button>
                        </ext:Cell>
                        <ext:Cell>
                            <ext:Button runat="server" Text="Button" Icon="Add" Scale="Large">
                            </ext:Button>
                        </ext:Cell>
                    </Cells>
                </ext:TableLayout>
            </Items>
            <Plugins>
                <ext:BottomTitle runat="server" />
            </Plugins>
            <Listeners>
                <AfterRender Delay="10" Handler="var td = &#100;ocument.createElement('td'); this.fbar.el.child('.x-toolbar-right-row').dom.appendChild(td); #{Button1}.render(td);" />
            </Listeners>
        </ext:ButtonGroup>
        
        <ext:Button ID="Button1" runat="server" Icon="Add" Flat="true" AutoRender="false" />
    </form>
</body>
</html>

**geoffrey.mcgill** · Mar 01, 2010, 11:50 AM

This would make a good plugin.

**danielg** · Mar 01, 2010, 12:48 PM

Thanks - just what I needed!

The button was slightly big, so it was forcing the height of the ButtonGroup to increase, but I added the following Cls to the Button:

Cls="groupButtonTool"

And added the following style:

.groupButtonTool .x-btn-text
{
    height: 12px !important;
    width: 12px !important;
}

And specified my custom IconCls:

IconCls="iconButtonGroupExpand"

CSS:

.iconButtonGroupExpand
{
    background-image: url("Images/IconButtonGroupExpand.png") !important;
}

I've attached the "IconButtonGroupExpand.png" image to this post, if anyone wants to replicate the icon that's used in Word/Excel etc.

Cheers

Dan

Thread: [CLOSED] [1.0] ButtonGroup tools

Thread Tools

Search Thread

Display

[CLOSED] [1.0] ButtonGroup tools

RE: [CLOSED] [1.0] ButtonGroup tools

RE: [CLOSED] [1.0] ButtonGroup tools

RE: [CLOSED] [1.0] ButtonGroup tools

Similar Threads

[CLOSED] Dynamic ButtonGroup

[CLOSED] Buttons alignment on ButtonGroup

[CLOSED] Content vs. Item on ButtonGroup

[CLOSED] [1.0] ButtonGroup BottomTitle plugin in IE8

[CLOSED] ButtonGroup Bug

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] [1.0] ButtonGroup tools

[CLOSED] [1.0] ButtonGroup tools

RE: [CLOSED] [1.0] ButtonGroup tools

RE: [CLOSED] [1.0] ButtonGroup tools

RE: [CLOSED] [1.0] ButtonGroup tools

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us