[CLOSED] Scrolling a container with an expanded DateField scrolls everything except the datepicker menu

  1. #1

    [CLOSED] Scrolling a container with an expanded DateField scrolls everything except the datepicker menu

    Hi,

    Consider this example:

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    <html>
        <head runat="server">
            <title>Scrolling test</title>
        </head>
        <body>
            <ext:ResourceManager runat="server" />
            
            <ext:Panel runat="server" AutoScroll="true" Height="200">
                <Defaults>
                    <ext:Parameter Name="width" Value="200" Mode="Raw" />
                </Defaults>
                <Items>
                    <ext:TextField FieldLabel="Field1" />
                    <ext:TextField FieldLabel="Field2" />
                    <ext:TextField FieldLabel="Field3" />
                    <ext:TextField FieldLabel="Field4" />
                    <ext:TextField FieldLabel="Field5" />
                    <ext:DateField FieldLabel="Field6" />
                    <ext:TextField FieldLabel="Field7" />
                    <ext:TextField FieldLabel="Field8" />
                    <ext:TextField FieldLabel="Field9" />
                    <ext:TextField FieldLabel="Field10" />
                </Items>
            </ext:Panel>
        </body>
    </html>
    If you expand the DateField, and then scroll the entire panel (with the mouse wheel for example, not with the scrollbars - because the menu will be hidden) then the panel scrolls as expected, but the date picker remains fixed.

    Tested on Firefox, Chrome and IE latest.

    Screenshot attached.

    Any suggestions?

    Thanks!
    Attached Thumbnails Click image for larger version. 

Name:	scroll problem.png 
Views:	7 
Size:	20.2 KB 
ID:	7570  
    Last edited by Daniil; Feb 11, 2014 at 3:00 AM. Reason: [CLOSED]
  2. #2
    Hi Anup,

    Well, that date picker component is a DateMenu. I.e. it is a floating component. It renders directly to a <body> and absolutely positioned. So, it cannot be scrolled in the Panel.

    You could listen to the scroll event and:

    - Hide the date picker; or
    - Re-position it

    As far as I can see in Ext.NET v2 (ExtJS 4) the problem is solved by hiding a date picker on scroll.
  3. #3
    To me it seems an inconsistency with Ext JS - they hide a combo box (data view) when scrolling outside, but not the date picker.

    As you noted, it is not an issue with Ext JS 4, so I think I'll look to hide the DateMenu if scrolling is not inside the DateMenu itself.
  4. #4
    Yes, it is definitely an inconsistency. It might be even considered as a bug. Though, I think we will leave it in Ext.NET v1.

    If you are in trouble (I believe you are not:)) to hide a DateMenu, please don't hesitate to ask our assistance.
  5. #5
    Quote Originally Posted by Daniil View Post
    Yes, it is definitely an inconsistency. It might be even considered as a bug. Though, I think we will leave it in Ext.NET v1.

    If you are in trouble (I believe you are not:)) to hide a DateMenu, please don't hesitate to ask our assistance.
    Yeah. Bug sounds right.

    Anyway, this is the approach I took to fixing it - I wanted to overwrite DateField itself so that all uses will get it automatically.

    Let me know if it can be done better!

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    <html>
        <head runat="server">
            <title>Scrolling test</title>
            
            <ext:ResourcePlaceHolder runat="server" Mode="Script" />
    
            <script>
                Ext.form.DateField.override({
                    onFocus: function () {
                        if (this.menu && this.menu.hidden === true) {
                            this.menu.on('show', function () {
                                this.mon(Ext.getDoc(), 'mousewheel', this.collapseIf, this);
                            }, this);
    
                            this.menu.on('hide', function () {
                                Ext.getDoc().un('mousewheel', this.collapseIf, this);
                            }, this);
                        }
    
                        Ext.form.DateField.superclass.onFocus.call(this);
                    },
    
                    collapseIf: function (e) {
                        if (!this.isDestroyed && !e.within(this.menu)) {
                            this.menu.hide();
                        }
                    }
                });
            </script>
        </head>
        <body>
            <ext:ResourceManager runat="server" />
            
            <ext:Panel runat="server" AutoScroll="true" Height="200">
                <Defaults>
                    <ext:Parameter Name="width" Value="200" Mode="Raw" />
                </Defaults>
                <Items>
                    <ext:TextField FieldLabel="Field1" />
                    <ext:TextField FieldLabel="Field2" />
                    <ext:TextField FieldLabel="Field3" />
                    <ext:TextField FieldLabel="Field4" />
                    <ext:TextField FieldLabel="Field5" />
                    <ext:DateField FieldLabel="Field6" />
                    <ext:TextField FieldLabel="Field7" />
                    <ext:TextField FieldLabel="Field8" />
                    <ext:TextField FieldLabel="Field9" />
                    <ext:TextField FieldLabel="Field10" />
                </Items>
            </ext:Panel>
        </body>
    </html>
  6. #6
    This seems like something we could add directly to the v1.x source.

    I will discuss with Daniil.
    Geoffrey McGill
    Founder
  7. #7
    Anup, your fix is good. I committed it to SVN branches/1 with some optimizations, revision #5662.

    Thank you for the report and the possible fix!
  8. #8
    Geoff and Daniil,

    Many thanks for the fix. Looks good.

    Your optimization makes sense. I too would have use onTriggerClick handler but I didn't want to replace your entire method, hence I used onFocus as I can see that was called by the trigger click handler and was not implemented by DateField itself, so was safe to override - but your solution is better :)

Similar Threads

  1. Replies: 2
    Last Post: Jan 23, 2014, 2:56 PM
  2. [CLOSED] Datepicker automatically scrolls to itself on page load
    By jchau in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 16, 2010, 8:33 PM
  3. DateField Listener when expanded for shim
    By niceguymattx in forum 1.x Help
    Replies: 1
    Last Post: Jun 09, 2010, 11:54 AM
  4. [CLOSED] <ext:DateField, always show datepicker
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 23, 2009, 8:31 AM
  5. Replies: 2
    Last Post: Aug 15, 2008, 3:34 PM

Posting Permissions