[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:

Code:

<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>

Hi @blueworld,

I can suggest you this solution.

Example

Code:

<%@ 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>

edit: thank you it works fine. My editor has assigned Panel1 to something else while I have pasted the code ;)