PDA

View Full Version : Scrolling the TabPanel's html contents to a specified position?



happybrowndog
12 Oct 2010, 1:48 AM
Hi hope someone can help me out.

I am using a TabPanel with the contentEI property set to a DIV with class "x-hide-display". The DIV's innerHTML contents are the result of an Ajax call. I would like to scroll the TabPanel vertically to a specified position inside the resulting contents.

To enable doing this, I've included Anchor (<a href>) tags with an id in the content returned by the Ajax call, and tried using plain old javascript and also a jquery call ("scrollTop()" on the DIV object), but nothing works to scroll the TabPanel's vertical scrollbar to the position in the content I need.

Is it wrong to assume that to scroll "within" the resulting DIV content it would affect the TabPanel's scrollbar's positioning? I'm guessing since none of what I tried works, the assumption is wrong.

Is there any solution to do this?

Animal
12 Oct 2010, 1:54 AM
Do not use contentEl.

That is for importing existing markup from within the HTML of the page as initially served

From the small description, it seems you are not doing that, but starting with an empty TabPanel?

Just load the HTML content, create a BoxComponent with that HTML as the html config, and add that to the TabPanel as a child item.

Then if there is a known element within it to scroll Into View, use http://dev.sencha.com/deploy/dev/docs/?class=Ext.Element&member=scrollIntoView

happybrowndog
12 Oct 2010, 2:24 PM
Hi... thanks for your help!
I changed my code from using contentEI to using a BoxComponent for run-time rendering (Ajax), and it works great (that is, it now displays in Internet Explorer as well as FireFox).

However, I still can't get scrolling the particular piece of the content into view.

The element in question is an anchor, and I get a reference to it via:
var oanchor = Ext.get("ARTICLE_" + o.articleid);
I checked in firebug, and oanchor is indeed the right element and not null.

Now I need the tabpanel that hosts the boxcomponent to scroll this into view.
So I got a reference to the boxcomponent and tried: oanchor.scrollIntoView(thetabpanel) , but I get an error in firebug ("J.style in undefined").
Similarly if I try with a reference to the boxcomponent itself, as in : oanchor.scrollIntoView(theboxcomponent).

Not sure what to do now... I'm out of ideas.

happybrowndog
12 Oct 2010, 10:33 PM
Well I figured it out, and am posting to help people out. The answer is:

oanchor.scrollIntoView(thetab.body)

"thetab" refers to the tab of the TabPanel, and "body" is the container it must scroll in. When "body" is missing, it just won't work. Tested in IE and FF.

Animal
12 Oct 2010, 11:33 PM
Well done dog!

But here's a hint: Use ext-all-debug.js when developing your app, so that you are using uncompressed code, and can debug it when you get errors like that.