AlwaysVisibleControlExtender for ExtJs/Ext.Net

  1. #1

    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.
  2. #2

    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
    <%@ 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" FireSelect&#111;nload="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>
    Vladimir Shcheglov
    Sr. Developer
  3. #3

    RE: AlwaysVisibleControlExtender for ExtJs/Ext.Net

    Thanks for the code vlad!!
  4. #4

    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

    <%@ 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" 
                        FireSelect&#111;nload="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>
    Geoffrey McGill
    Founder & CEO
  5. #5

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

Similar Threads

  1. ExtJs or Ext.Net
    By thilakmsc in forum 2.x Help
    Replies: 1
    Last Post: Jul 25, 2012, 5:30 PM
  2. EXTJS 4
    By ajaxvador in forum 1.x Help
    Replies: 1
    Last Post: Jan 18, 2012, 4:46 PM
  3. EXTJS 3.0
    By speedstepmem2 in forum Licensing
    Replies: 8
    Last Post: Jun 10, 2009, 1:46 PM
  4. ExtJS 3.0
    By davidhoyt in forum Open Discussions
    Replies: 3
    Last Post: Dec 10, 2008, 1:52 PM
  5. [CLOSED] ExtJS 2.2
    By Timothy in forum 1.x Premium Help
    Replies: 2
    Last Post: Aug 06, 2008, 3:29 PM

Posting Permissions