What's New?

Problem with toolbar's border when Header is set to False

  1. #1
    Jul 29, 2011, 3:17 AM

    Problem with toolbar's border when Header is set to False

    Hi, all.
    I have a panel and I set its property "Header" to "False because its title bar is not necessary for me. It has a tool bar with a button to toggle collapse its items, and it is collapsed by default.

    code is like below:
    <%@ Page Language="C#"  %>
<!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></title>

    <script>
        function toggle() {
            if (!this.isExpand) {
                this.setIconClass("icon-bulletarrowup");
                this.isExpand = true;
            }
            else {
                this.setIconClass("icon-bulletarrowdown");
                this.isExpand = false;
            }
            this.ownerCt.ownerCt.toggleCollapse();

        }
    </script>

</head>
<body>
    <extNet:ResourceManager ID="ResourceManager1" runat="server">
    </extNet:ResourceManager>
    <extNet:Panel runat="server" Collapsed="true" CollapseEl="body" Header="false" Width="500"
        StyleSpec="padding:10px;">
        <TopBar>
            <extNet:Toolbar runat="server">
                <Items>
                    <extNet:ToolbarFill runat="server" />
                    <extNet:Button runat="server" Icon="BulletArrowDown">
                        <Listeners>
                            <Click Fn="toggle" />
                        </Listeners>
                    </extNet:Button>
                </Items>
            </extNet:Toolbar>
        </TopBar>
        <Items>
            <extNet:TextField ID="txtQueryNumber" runat="server" LabelWidth="55" FieldLabel="SN"
                Width="200" />
            <extNet:TextField ID="txtResponseName" runat="server" LabelWidth="55" FieldLabel="Name"
                Width="200" />
        </Items>
    </extNet:Panel>
</body>
</html>
    with this code, I got two problems:
    1. when this panel is Collapsed, its toolbar's bottom border is 0, I want it has bottom border, just like the left、top、right border。
    2. in the js function "toggle", I want to change the icon of toggle button, so I called its setIconClass method and pass "icon-bulletarrowup" or "icon-bulletarrowdown" based on its status. But it seems not work, image disappeared when the panel is expanded.

    So, How can I fix these issue?
  2. #2
    Jul 30, 2011, 3:03 PM
    Hi,

    Thanks for the good example. By the way, it always gives you a good chance to get a answer/solution quickly. Also feel free to bump thread if you provide a sample, but a thread is non-answered.

    To get an icon working, it should be registered.

    To add a bottom border, please use a respective .Cls.

    Example

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

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.ResourceManager1.RegisterIcon(Icon.BulletArrowUp);
        }
    }
</script>
<!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 () {
            var ct = this.ownerCt.ownerCt;
            this.setIconClass(ct.collapsed ? "icon-bulletarrowup" : "icon-bulletarrowdown");
            ct.toggleCollapse();
        };
    </script>
    
    <style type="text/css">
        .x-toolbar.my-toolbar {
            border-bottom-width: 1px;
            border-bottom-style: solid;
        }
    </style>
 
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Panel 
        runat="server" 
        Collapsed="true" 
        CollapseEl="body" 
        Width="500" 
        Html="Hello World!">
        <TopBar>
            <ext:Toolbar runat="server" Cls="my-toolbar">
                <Items>
                    <ext:ToolbarFill runat="server" />
                    <ext:Button runat="server" Icon="BulletArrowDown">
                        <Listeners>
                            <Click Fn="toggle" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
    </ext:Panel>
</body>
</html>
  3. #3
    Jul 31, 2011, 4:09 AM
    Thanks very much for your reply.
    Follow your suggestions, the icon and bottom border worked correctly, thank you.

    But I have found another problem that when the panel is expanded, the bottom border of this toolbar and the top border of the panel's body overlap each other. I know I should remove the "my-toolbar" cls when panel is expanded, so I made some changes in the code:
    <script type="text/javascript">
var toggle = function () {
            var ct = this.ownerCt.ownerCt;
            this.setIconClass(ct.collapsed ? "icon-bulletarrowup" : "icon-bulletarrowdown"); 
            var toolbar = this.ownerCt;
            if (ct.collapsed) {
                toolbar.removeClass("my-toolbar");
            }
            else {
                toolbar.addClass("my-toolbar");
            }
             ct.toggleCollapse(); 
 }; 
</script>
    it works very well, and thanks again.
    Last edited by benti; Jul 31, 2011 at 4:11 AM.
  4. #4
    Jul 01, 2013, 6:24 AM
    A related Ext.NET v2 discussion:
    http://forums.ext.net/showthread.php?14819

Similar Threads

  1. [CLOSED] Border layout with a toolbar in the centre section, the toolbar floats at the top? How can I stop this...
    By sadaf in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 07, 2011, 9:39 AM
  2. [CLOSED] Panel header and border visibility
    By kenanhancer in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 20, 2011, 11:54 AM
  3. [CLOSED] border false
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 23, 2009, 11:53 PM
  4. [CLOSED] border false
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 11, 2009, 2:08 AM
  5. Window without border, header, title
    By reinaldo.designerdigital in forum 1.x Help
    Replies: 2
    Last Post: Feb 05, 2009, 9:00 AM

Tags for this Thread

Posting Permissions