Hybrid View

  1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    2
    Vote Rating
    0
    ch-world is on a distinguished road

      0  

    Default Element.scrollIntoView

    Element.scrollIntoView


    public function scrollIntoView([String/HTMLElement/Element container])

    * container : String/HTMLElement/Element
    (optional) The container element to scroll (defaults to document.body)

    but doesn't. Btw. second argument is missing in doumentation

  2. #2
    Ext User
    Join Date
    Jul 2007
    Location
    Bulgaria
    Posts
    23
    Vote Rating
    0
    Peter.Ivanov is on a distinguished road

      0  

    Default


    this doest work for me too

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    It works.

    The way round you must use it is

    Code:
    Ext.get("id-of-element-to-be visible").scrollIntoView("id-of-container-element");

  4. #4
    Ext JS Premium Member rex.staples's Avatar
    Join Date
    Jul 2007
    Location
    Austin, TX
    Posts
    35
    Vote Rating
    1
    rex.staples is on a distinguished road

      0  

    Default


    This work-around is very implementation specific. The id-of-container-element must be configured to scroll. In my example below, without adding the height and overflow attributes the scroll into view did not work:

    PHP Code:
    <div id="id-of-container-element" style="width:600px; height:400px; overflow:auto;">
      ... 
    lots of content here that is pushing my element out of view ...
      <
    div id="id-of-element-to-be-visible"> ... </div>
    </
    div
    How do I use Element.scrollIntoView() to scroll the document body so that the element is in view?

    I should note that I am using ext2.0.

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Code:
    Ext.get("id-of-element-to-be visible").scrollIntoView(document.body);
    Obviously only works if the body is the element that must be scrolled to get the element into view.

    If you are using a Layout, then it's the Element of the Layout's containing the element you want in view that must be scrolled.

  6. #6
    Ext JS Premium Member rex.staples's Avatar
    Join Date
    Jul 2007
    Location
    Austin, TX
    Posts
    35
    Vote Rating
    1
    rex.staples is on a distinguished road

      0  

    Default


    I wish it were always as simple as document.body. Setting the document.body.scrollTop has no effect unless operating in quirks mode.

    http://www.quirksmode.org/js/doctypes.html

    My testbed used an HTML 4.01 transitional doctype and I was only ever able to scrollIntoView a scrollable div, but never the body; however using document.documentElement works (tested in FF, IE6, IE7).

    Specifically, I am now able to do this (when not in quirks mode):

    PHP Code:
    Ext.get("id-of-element-to-be-visible").scrollIntoView(document.documentElement); 
    I was completely wrong when I said I was implementing this with ext2.0; I was actually doing all these tests against ext1.1. Unfortunately the discovery above does not work with ext2.0. It seems ext2.0 is only able to scrollIntoView a scrollable div (even in quirks mode).

    Whereas ext1.1::Element.scrollIntoView() could be patched with a ternary Ext.isStrict test, ext2.0::Element.scrollIntoView() needs some additional love.