View Full Version : kitchensink: dynamically change sourcepanel scroll direction

7 Jul 2010, 1:19 AM
I've been playing about with the kitchen sink demo. I wanted to try dynamically changing the scrolling direction of the sourcePanel from 'both' to, eg, 'vertical' and back again, depending on which menu option you'd chosen.

In the onSourceButtonTap I've tried changing:

this.sourcePanel.scroll = newDirection;

This seems to work the first time, but second and subsequent invocations of this line don't seem to have any effect - the scrolling direction is fixed to whatever it was set to first time round by this line. Am I doing the wrong thing? Is there a better/correct way to reset the scrolling direction of a panel?

Many thanks


7 Jul 2010, 1:47 AM
I believe you want the setScrollable (http://www.sencha.com/deploy/touch/docs/?class=Ext.Component&member=setScrollable) method.

7 Jul 2010, 2:29 AM
I figured that might be the case. Unfortunately I couldn't figure out how to use that method from the API documentation and couldn't find an example. Let's say I wanted to switch to 'vertical', could you give me an example of the syntax needed for the setScrollable method?


7 Jul 2010, 2:41 AM
FYI you can click the triangle on the docs to expand for more info:

Acceptable values are a Ext.Scroller configuration, 'horizontal', 'vertical', 'both', and false

7 Jul 2010, 3:00 AM
Yep I saw that, but the following creates an error:


Error is: TypeError: Result of expression 'this.getContentTarget()' [undefined] is not an object.

7 Jul 2010, 3:05 AM
Has the scrollPanel been rendered yet?

7 Jul 2010, 3:20 AM
OK you're right - I was attempting it too early. However, it still won't work. It doesn't now generate an error, but it doesn't change the scroll direction.

Try it for yourself - /sencha-0.91/examples/kitchensink/src/index.js

Find the function OnSourceButtonTap and the last line in that function:

this.sourcePanel.scroller.scrollTo({x: 0, y: 0});

Add either before or after that line:


The text is still scrollable in both directions after you click the button and the panel pops up.

7 Jul 2010, 5:11 AM
In fact it seems as if all the properties of the sourcePanel won't change once set - setHeight and setWidth don't seem to work after the first time either.

7 Jul 2010, 5:17 AM
It's just the scrolling, looks like the method wasn't setup to handle changing scrolling dynamically, which I guess isn't that common.

Height example:

tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady : function() {
var p = new Ext.Panel({
width: 400,
height: 400,
title: 'Foo',
html: 'Foo'

new Ext.Button({
text: 'Click me',
handler: function(){

7 Jul 2010, 5:36 AM
OK - it appears to be related to the showBy method. Looks like you can reset the height or width once the sourcePanel is displayed, but not whilst it is hidden. The problem is that if you change the width, you need to reposition the pop-up panel as its position is based on showBy using its original width

7 Jul 2010, 6:21 AM
I've found the workaround I think - if the width of the sourcePanel has changed from the original size with which it was first defined, then you call showBy, then change the width and height, and then call showBy again. That aligns the resized panel correctly to the button. However, if the new width is to be the same as the original width, then you don't make the second call to showBy (if you do, it gets misaligned). A bit of a pain, but it appears to work for me now as required.

Thanks for the help and pointers, Evan