PDA

View Full Version : [CLOSED] Displaying a menubar always centered in available width (Borderlayout)



blueworld
Jul 29, 2013, 9:32 AM
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>

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

blueworld
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 ;)