Hi,
It is very simple to implement. At least for modern browsers (see the following sample). For old browsers (like IE6) is required to listen window scroll event and move window to the new position
!!! Please note that the following sample doesn't work under IE6
<%@ 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></title>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
for (int i = 0; i < 300; i++)
{
Form.Controls.Add(new LiteralControl("<p>Line</p>"));
}
}
</script>
<style type="text/css">
.always-visible{
position: fixed;
z-index:99999;
}
</style>
<script type="text/javascript">
function setPosition(pos, cmp){
var align, offset;
switch(pos){
case "tl":
align = "tl-tl";
offset = [10,10];
break;
case "tc":
align = "t-t";
offset = [0,10];
break;
case "tr":
align = "tr-tr";
offset = [-10,10];
break;
case "ml":
align = "l-l";
offset = [10,0];
break;
case "mc":
align = "c-c";
offset = [0,0];
break;
case "mr":
align = "r-r";
offset = [-10,0];
break;
case "bl":
align = "bl-bl";
offset = [10,-10];
break;
case "bc":
align = "b-b";
offset = [0,-10];
break;
case "br":
align = "br-br";
offset = [-10,-10];
break;
}
if(cmp.rendered){
cmp.el.alignTo(Ext.getBody(), align, offset);
}
else{
cmp.on("afterrender", function(){cmp.el.alignTo(Ext.getBody(), align, offset);}, this, {single:true})
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server">
<Listeners>
<WindowResize Handler="setPosition(#{Combo1}.getValue(), #{Panel1});" Buffer="500" />
</Listeners>
</ext:ResourceManager>
<ext:Panel ID="Panel1" runat="server"
Cls="always-visible"
Width="210"
Height="100"
Title="Always visible"
Frame="true"
Padding="10"
LabelWidth="50"
Layout="form"
>
<Items>
<ext:ComboBox ID="Combo1" runat="server" FieldLabel="Position" FireSelectonload="true" Width="100">
<Items>
<ext:ListItem Text="Top Left" Value="tl" />
<ext:ListItem Text="Top Center" Value="tc" />
<ext:ListItem Text="Top Right" Value="tr" />
<ext:ListItem Text="Middle Left" Value="ml" />
<ext:ListItem Text="Middle Center" Value="mc" />
<ext:ListItem Text="Middle Right" Value="mr" />
<ext:ListItem Text="Bottom Left" Value="bl" />
<ext:ListItem Text="Bottom Center" Value="bc" />
<ext:ListItem Text="Bottom Right" Value="br" />
</Items>
<SelectedItem Value="tl" />
<Listeners>
<Select Handler="setPosition(this.getValue(), #{Panel1});" />
</Listeners>
</ext:ComboBox>
</Items>
</ext:Panel>
</form>
</body>
</html>