Problem with ViewPort and links to element ID

[samitchell]

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?

[Condor]

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.

[samitchell]

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.

[Condor]

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:

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?

[samitchell]

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