What's New?

[CLOSED] Displaying a menubar always centered in available width (Borderlayout)

  1. #1
    Jul 29, 2013, 9:32 AM

    [CLOSED] Displaying a menubar always centered in available width (Borderlayout)

    Hi,

    I am using a borderlayout with a collapsable panel in the west region.
    I am displaying a menubar in my center region. If i collapse or expand my left panel, I would like to have the menbar always centered in center-region

    Please see this simple example:

    <script runat="server">
    
    Protected Sub Page_Load(sender As Object, e As EventArgs)

    End Sub
    
    
</script>

<%@ Page Language="VB" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
    <title>ComponentColumn Pin Editor - Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" />

    <style>
        #mapToolbar {
            position: absolute;
            left: 50%;
            right: 0px;
            top: 65px;
            z-index: 5000;
        }
    </style>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />

        <ext:Toolbar ID="mapToolbar" runat="server" Flat="false" Width="330">
            <Items>
                <ext:Button ID="ButtonAlarm" runat="server" Text="Alarm" Icon="Clock" Visible="True">
                    <Listeners>
                        <Click Handler="#{AlarmWindow}.show()" />
                    </Listeners>

                </ext:Button>
                <ext:Button ID="Button2" runat="server" Text="Fullscreen" Icon="Application">
                    <Listeners>
                    </Listeners>
                </ext:Button>

            </Items>
        </ext:Toolbar>

        <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
            <Items>


                <ext:Panel ID="WestBoarderLayoutPanel" runat="server" Region="West" Collapsible="true" MarginsSummary="5 0 5 5" CMarginsSummary="5 5 5 5" Split="True" Width="532">
                    <LayoutConfig>
                        <ext:HBoxLayoutConfig Align="Stretch" />
                    </LayoutConfig>
                    <Listeners>
                    </Listeners>
                    <Items>
                    </Items>
                </ext:Panel>
                <ext:Panel runat="server" Region="Center" ID="mapPanel" Collapsible="false" MarginsSummary="5 5 5 0">
                    <Content>
                        <div id="map">
                            Hi!
                        </div>
                    </Content>
                </ext:Panel>
            </Items>
        </ext:Viewport>

    </form>
</body>
</html>
    Last edited by Daniil; Jul 29, 2013 at 2:27 PM. Reason: [CLOSED]
  2. #2
    Jul 29, 2013, 12:40 PM
    Hi @blueworld,

    I can suggest you this solution.

    Example
    <%@ Page Language="VB" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<!DOCTYPE html>
 
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <script>
        var position = function () {
            var tb = App.Toolbar1,
                p = App.Panel1,
                x = tb.getAlignToXY(p, "c-c")[0];

            tb.showAt(x, 65);
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
 
        <ext:Toolbar 
            ID="Toolbar1" 
            runat="server" 
            Width="330" 
            Floating="true">
            <Items>
                <ext:Button runat="server" Text="Button 1" />
                <ext:Button runat="server" Text="Button 2" />
            </Items>
        </ext:Toolbar>
 
        <ext:Viewport runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel 
                    runat="server" 
                    Region="West" 
                    Collapsible="true" 
                    Width="500">
                    <Listeners>
                        <Collapse Fn="position" />
                        <Expand Fn="position" />
                    </Listeners>
                </ext:Panel>

                <ext:Panel 
                    ID="Panel1" 
                    runat="server" 
                    Region="Center" 
                    Html="Hi!" />
            </Items>
            <Listeners>
                <AfterLayout Fn="position" Single="true" />
            </Listeners>
        </ext:Viewport>
    </form>
</body>
</html>
  3. #3
    Jul 29, 2013, 2:04 PM
    edit: thank you it works fine. My editor has assigned Panel1 to something else while I have pasted the code ;)
    Last edited by blueworld; Jul 29, 2013 at 2:08 PM.

Similar Threads

  1. BorderLayout inside BorderLayout that is in MasterPage
    By drorl in forum 2.x Help
    Replies: 0
    Last Post: Apr 19, 2012, 3:52 PM
  2. [CLOSED] How can I do this RowLayout with centered rows
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Sep 23, 2010, 6:19 PM
  3. Master Page, Centered Viewport
    By dankohler in forum Examples and Extras
    Replies: 1
    Last Post: Dec 22, 2009, 9:05 AM
  4. [CLOSED] IFrame mask not centered
    By CSG in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 20, 2009, 6:04 PM
  5. [CLOSED] ComboBox Item List not displaying full Width
    By bfolger in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Aug 24, 2009, 10:12 PM

Tags for this Thread

Posting Permissions