What's New?

[CLOSED] Close Button

  1. #1
    Aug 23, 2012, 5:09 PM

    [CLOSED] Close Button

    I would like to close a button, similar to the way you can close a tab -- Is this possible?
    Last edited by Daniil; Aug 28, 2012 at 5:18 PM. Reason: [CLOSED]
  2. #2
    Aug 23, 2012, 5:23 PM
    Hi,

    Well, any Tool is not really a Button, it's just a clickable icon. You could take this icon (inspect HTML element and its CSS to get the URL), place on the page and attach a Click listener.

    If you need a Button with this icon, then I can suggest the following.

    Example
    <%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>

    <style type="text/css">
        .close-button {
            background-position: 0px 0px !important;
            width: 15px !important;
            height: 15px !important;
        }
    </style>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:Button runat="server" IconCls="x-tool close-button" />
</body>
</html>
  3. #3
    Aug 24, 2012, 12:30 PM
    Hi Daniil,

    I have modified this to show text on the button and also added menu, but I can't able to show menu Arrow icon at right to the text as menu arrow showing at normal button with menu.

    
<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ext.NET Example</title>
    <style type="text/css">
        .close-button
        {
            background-position: -15px 0px !important;
            width: 130px !important;
            height: 15px !important;
        }        
        
        .my-class a.x-menu-item
        {
            padding-left: 0;
        }
    </style>
    <script language="javascript" type="text/javascript">
        var ctrl;
        var intervalId = 0;

        var onAfterRender = function (menu, button) {
            menu.el.on(
            'mouseleave',
            function () {
                ctrl = button;
                if (!button.lockHideMenu) {
                    button.hideMenu();
                }
            },
            this,
            {
                delay: 1
            });
            menu.el.on(
            'mouseenter',
            function () {
                ctrl = button;
                clearInterval(intervalId);
                button.lockHideMenu = true;
                (function () {
                    button.lockHideMenu = false;
                }).defer(1);
            });
        };

        var onButtonLeave = function () {
            ctrl = this;
            intervalId = setInterval('checkHideMenu()', 1);
        };

        var onButtonEnter = function () {
            ctrl = this;
            if (intervalId != null)
                clearInterval(intervalId);
            ctrl.showMenu();
        };

        function checkHideMenu() {
            leaveFromMenu = true;
            if (ctrl != null)
                ctrl.hideMenu();
        }
    </script>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:ButtonGroup ID="btnGrp" runat="server">
        <Items>
            <ext:Button ID="Button1" runat="server" IconCls="x-tool close-button" Text="<b>Site Administration</b>" Width="140"  MenuArrow ="true">
                <Menu>
                    <ext:Menu runat="server" ID="mnuAdmin" ShowSeparator="false" Cls="my-class">
                        <Items>
                            <ext:MenuItem ID="btnCompanyAdmin" runat="server" Text="Company Administration">
                            </ext:MenuItem>
                            <ext:MenuItem ID="btnLoanAdmin" runat="server" Text="Loan Administration">
                            </ext:MenuItem>
                            <ext:MenuItem ID="btn3rdPartyAdmin" runat="server" Text="3rd Party Administration">
                            </ext:MenuItem>
                        </Items>
                        <Listeners>
                            <AfterRender Handler="onAfterRender(this, Button1);" />
                        </Listeners>
                    </ext:Menu>
                </Menu>
                <Listeners>
                    <AfterRender Handler="this.mon(this.el, 'mouseenter', onButtonEnter, this);
                               this.mon(this.el, 'mouseleave', onButtonLeave, this);" />
                </Listeners>
            </ext:Button>
        </Items>
    </ext:ButtonGroup>
</body>
</html>
  4. #4
    Aug 24, 2012, 1:42 PM
    Well, when a Button is configured with a Menu, then it automatically sets up its Icon to the arrow one.

    Setting up IconCls you override it. The Button can't use two icons.

Similar Threads

  1. Create a button to close a window
    By Orwel in forum 2.x Help
    Replies: 2
    Last Post: Aug 10, 2012, 12:16 PM
  2. How to display / hide 'close' button on Tab
    By Aod47 in forum 1.x Help
    Replies: 12
    Last Post: Dec 17, 2011, 11:07 AM
  3. [CLOSED] How can I close a tab using a button.
    By majunior in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 18, 2011, 3:00 PM
  4. Handling browser close Button
    By ranganath in forum 1.x Help
    Replies: 0
    Last Post: Jun 01, 2010, 3:27 AM
  5. Component with close button
    By powerPT in forum 1.x Help
    Replies: 1
    Last Post: Jun 04, 2008, 9:49 PM

Posting Permissions