What's New?

[CLOSED] Toolbar on panel title

  1. #1
    Apr 06, 2011, 9:32 AM

    [CLOSED] Toolbar on panel title

    Hi! What i'm looking for is to simulate a toolbar on the title header of a panel, not the title bar and below it a toolbar, just one bar with a toolbar working as the title.

    That is, I'm interesting in a panel (collapsable) with several control on the title header of the panel (for example a button, a toolbar fill, text, etc...).
    When I click on this header the body of the panel will be shown or hidden. When the panel is collapsed, the page will only show one line (the title) and its controls (the button for example).

    Can you give me any idea about how to face it?

    Thank you
    Last edited by Daniil; Apr 07, 2011 at 3:07 PM. Reason: [CLOSED]
  2. #2
    Apr 06, 2011, 1:01 PM
    Hi,

    Hope, the following example will help to start implement what exactly you need.

    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>

    <script type="text/javascript">
        var toggle = function () {
            this.ownerCt.ownerCt.toggleCollapse();
        }
    </script>

    <style type="text/css">
        .header {
            color: #15428B;
            font-family: tahoma,arial,verdana,sans-serif !important;
            font-weight: bold !important;
        }
    </style>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Panel ID="Panel1" runat="server" Width="300" CollapseEl="body">
        <TopBar>
            <ext:Toolbar runat="server">
                <Items>
                    <ext:ToolbarSpacer Width="5" />
                    <ext:DisplayField runat="server" Text="Title" Cls="header" />
                    <ext:ToolbarSpacer Width="20" />
                    <ext:Button runat="server" Text="Button1" StandOut="true" />
                    <ext:Button runat="server" Text="Button2" StandOut="true" />
                    <ext:ToolbarFill />
                    <ext:Button runat="server" Text="Toggle">
                        <Listeners>
                            <Click Fn="toggle" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
        <Content>
            <br/>Some content<br/><br/><br/><br/><br/>I'm the bottom
        </Content>
    </ext:Panel>
    </form>
</body>
</html>
  3. #3
    Apr 07, 2011, 7:06 AM
    Perfect, that is exactly what I need, thank you Danii.

    Just one more question about it, if possible. It will be very useful for me to be able to collapse or expand easier, that is, clicking on the hole header (excepting the buttons or similar). That is, trying to maximize as much as possible the region to click for expand/ collapse on this bar, not only on a button, but without losing the toolbar functions (I have achieved it using a div but not with the toolbar). Any suggest?

    Thank you again!
  4. #4
    Apr 07, 2011, 10:24 AM
    Sure, it's possible.

    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>
 
    <script type="text/javascript">
        var onRender = function () {
            this.el.on(
                "click", 
                function () {
                    if (!this.locked) {
                        this.ownerCt.toggleCollapse();
                        this.locked = false;
                    }
                },
                this);
            
        }
    </script>
 
    <style type="text/css">
        .header {
            color: #15428B;
            font-family: tahoma,arial,verdana,sans-serif !important;
            font-weight: bold !important;
        }
    </style>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Panel ID="Panel1" runat="server" Width="300" CollapseEl="body">
        <TopBar>
            <ext:Toolbar runat="server">
                <Items>
                    <ext:ToolbarSpacer Width="5" />
                    <ext:DisplayField runat="server" Text="Title" Cls="header" />
                    <ext:ToolbarSpacer Width="20" />
                    <ext:Button runat="server" Text="Button1" StandOut="true">
                        <Listeners>
                            <Click Handler="this.ownerCt.locked = true;" />
                        </Listeners>
                    </ext:Button>
                    <ext:Button runat="server" Text="Button2" StandOut="true">
                        <Listeners>
                            <Click Handler="this.ownerCt.locked = true;" />
                        </Listeners>
                    </ext:Button>
                    <ext:ToolbarFill />
                </Items>
                <Listeners>
                    <Render Fn="onRender" />
                </Listeners>
            </ext:Toolbar>
        </TopBar>
        <Content>
            <br/>Some content<br/><br/><br/><br/><br/>I'm the bottom
        </Content>
    </ext:Panel>
    </form>
</body>
</html>
  5. #5
    Apr 07, 2011, 1:42 PM
    Fantastic, thank you!

    PS.- For another users, I think there is a bug on the code, the sentence 
    this.locked = false;
    should be out of the "if". 

     
        var onRender = function () { 
            this.el.on( 
                "click",  
                function () { 
                    if (!this.locked) { 
                        this.ownerCt.toggleCollapse(); 
                    }
                    this.locked = false; 
                }, 
                this); 
 
        }
    Last edited by jeybonnet; Apr 07, 2011 at 1:46 PM. Reason: Format
  6. #6
    Apr 07, 2011, 3:05 PM
    Quote Originally Posted by jeybonnet View Post
    PS.- For another users, I think there is a bug on the code, the sentence 
    this.locked = false;
    should be out of the "if". 

     
        var onRender = function () { 
            this.el.on( 
                "click",  
                function () { 
                    if (!this.locked) { 
                        this.ownerCt.toggleCollapse(); 
                    }
                    this.locked = false; 
                }, 
                this); 
 
        }
    Yes, you are absolutely right, it was my mistake.

Similar Threads

  1. [CLOSED] Dynamic Panel Title
    By pint in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 23, 2012, 6:25 AM
  2. [CLOSED] Panel Title Height
    By Timothy in forum 2.x Legacy Premium Help
    Replies: 12
    Last Post: Jun 08, 2012, 1:50 PM
  3. [CLOSED] ContextMenu in TreePanel shows menu when right click title or toolbar
    By jchau in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Nov 13, 2011, 4:43 PM
  4. [CLOSED] Collapsed Panel Title
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 27, 2009, 1:03 PM
  5. [CLOSED] Panel Footer title
    By sz_146 in forum 1.x Help
    Replies: 3
    Last Post: Dec 02, 2008, 11:10 AM

Tags for this Thread

Posting Permissions