Results 1 to 5 of 5

Thread: Problem with ViewPort and links to element ID

  1. #1

    Default Problem with ViewPort and links to element ID

    I have a viewport with north, west and center regions. Center is a Panel which can contain links to other pages and some links are to a specific ID in another page (page.html#someID).

    I'm having what looks like a timing issue with the rendering of the viewport when you click a link to an ID on another page. What happens in that the panel (with ID element) renders and scrolls to that element -- and then the viewport renders overwriting this with the center content starting from the top -- no scrolling to that ID.

    I'm still using 2.2.1, and so started looking at 3.X as potentially solving this issue but the viewport doesn't render using my existing code. Tried looking thru the forums but haven't found anything that looked like it was close.

    And was hoping that someone had a clear idea of what the problem is and how to correct it (before I begin porting the 3.x and hoping that that fixes this).

    Any ideas?

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    No, Ext 3 won't fix that.

    How are you including the links in the center region? Using el or contentEl?

    In that case Ext is modifying the page layout and thereby resetting any scrollTop.

    You will have to locate the element yourself from the location.hash and use scrollIntoView to make it visible.

  3. #3

    Default

    The panel (a.k.a. center content) is HTML code that is in the page. I simply instanciate an panel and use applyTo to make the wrapping <div> the panel.

    I took your suggestion and added some code after the call to viewport.doLayout to find the element with the ID. I've tried both scrollIntoView and the even simpler scrollTo methods on element -- and still am not seeing any scrolling or any errors.

    So maybe I'm still missing something very basic. Here's what I added:

    var url=location.href;
    var urlId=url.indexOf('#');
    if(urlId > 0) {
    var destId = url.substring (urlId+1);
    var dest = Ext.get(destId);
    var thisTopic = Ext.get('content'); //center panel with content
    dest.scrollIntoView(thisTopic);

    I also tried this using the variable for the Panel object itself.

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    1. You shouldn't be using applyTo when that panel is part of a container (e.g. Viewport). Use 'el' or 'contentEl' instead.

    2. Don't try to locate the # in the url, it's much easier to use:
    Code:
    var destId = location.hash.substr(1);
    3. You need to specify the scrolling element in scrollIntoView. Is 'content' the actual scrolling element? Or is it Ext.getCmp('content').body?

  5. #5

    Default Aha!

    #3 gave me the final hint I needed to get this working. Stupid, I kept seeing that the scrolling area was a child and not recognizing that I had the wrong <div>. Thank you for the patience with a very beginner level problem.

Similar Threads

  1. Replies: 12
    Last Post: 27 Sep 2010, 7:29 PM
  2. Viewport inside form element, insted of body element
    By ncardeli in forum Ext 2.x: Help & Discussion
    Replies: 17
    Last Post: 19 Mar 2010, 7:11 PM
  3. websnapr thumbnails only work on page links, not links owned by ext...
    By hereitcomes in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 22 Apr 2009, 2:35 PM
  4. Problem with HtmlEditor and links
    By mcohnen in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 7 Mar 2008, 2:05 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •