AlwaysVisibleControlExtender for ExtJs/Ext.Net
I always find myself having to revert to AjaxControlToolkit for AlwaysVisibleControlExtender. It would be great to have such an extension for ExtJs/Ext.Net.
Moreover, if Coolite team has used Drupal, it would be further beneficial to have this Control like the Drupal-sticky headers.
What happens in Drupal is that a control is shown on its actual position on the page if the control is not out-of-view. It is only when scrolling takes the control out-of-view that the control sticks towards the top of the page.
RE: AlwaysVisibleControlExtender for ExtJs/Ext.Net
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
Code:
<%@ 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>
RE: AlwaysVisibleControlExtender for ExtJs/Ext.Net
Thanks for the code vlad!!
RE: AlwaysVisibleControlExtender for ExtJs/Ext.Net
I was looking for a similar sample as well and found this. I made a few minor revisions.
Example
Code:
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
StringBuilder buffer = new StringBuilder();
for (int i = 1; i <= 300; i++)
{
buffer.AppendFormat("<p>Line {0}</p>", i);
}
this.Form.Controls.Add(new LiteralControl(buffer.ToString()));
}
</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>
<style type="text/css">
.always-visible {
position : fixed;
z-index : 99999;
}
</style>
<script type="text/javascript">
var setPosition = function () {
var align,
offset,
pos = ComboBox1.getValue(),
cmp = Panel1;
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 = [-25, 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 = [-25, 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 = [-25, -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 runat="server">
<ext:ResourceManager runat="server">
<Listeners>
<WindowResize Fn="setPosition" Buffer="500" />
</Listeners>
</ext:ResourceManager>
<ext:Panel
ID="Panel1"
runat="server"
Title="Always visible"
Cls="always-visible"
Width="210"
Height="100"
Frame="true"
Padding="10"
LabelWidth="50"
Layout="form">
<Items>
<ext:ComboBox
ID="ComboBox1"
runat="server"
FieldLabel="Position"
FireSelectonload="true"
Width="100">
<SelectedItem Value="tl" />
<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>
<Listeners>
<Select Fn="setPosition" />
</Listeners>
</ext:ComboBox>
</Items>
</ext:Panel>
</form>
</body>
</html>
RE: AlwaysVisibleControlExtender for ExtJs/Ext.Net
Hi geoff, I could not figure out any practical difference (regarding Always Visible functionality) between your and vlad's code. Still, thanks for taking time out to reply!!!
