1. #1
    Sencha User
    Join Date
    Mar 2008
    Posts
    65
    Vote Rating
    6
    rtweed is on a distinguished road

      0  

    Default kitchensink: dynamically change sourcepanel scroll direction

    kitchensink: dynamically change sourcepanel scroll direction


    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

    Rob

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,049
    Vote Rating
    657
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    I believe you want the setScrollable method.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha User
    Join Date
    Mar 2008
    Posts
    65
    Vote Rating
    6
    rtweed is on a distinguished road

      0  

    Default


    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?

    Cheers!

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,049
    Vote Rating
    657
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Sencha User
    Join Date
    Mar 2008
    Posts
    65
    Vote Rating
    6
    rtweed is on a distinguished road

      0  

    Default


    Yep I saw that, but the following creates an error:

    this.scrollPanel.setScrollable('vertical');

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

  6. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,049
    Vote Rating
    657
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Has the scrollPanel been rendered yet?
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  7. #7
    Sencha User
    Join Date
    Mar 2008
    Posts
    65
    Vote Rating
    6
    rtweed is on a distinguished road

      0  

    Default


    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:

    this.sourcePanel.setScrollable('vertical');

    The text is still scrollable in both directions after you click the button and the panel pops up.
    Last edited by rtweed; 7 Jul 2010 at 3:21 AM. Reason: typo

  8. #8
    Sencha User
    Join Date
    Mar 2008
    Posts
    65
    Vote Rating
    6
    rtweed is on a distinguished road

      0  

    Default


    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.

  9. #9
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,049
    Vote Rating
    657
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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:

    Code:
    Ext.setup({
        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'
            }).show();
            
            new Ext.Button({
                text: 'Click me',
                handler: function(){
                    p.setHeight(50);
                }
            }).show();
        }
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  10. #10
    Sencha User
    Join Date
    Mar 2008
    Posts
    65
    Vote Rating
    6
    rtweed is on a distinguished road

      0  

    Default


    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

Similar Threads

  1. change the direction of collapse/expand ?
    By peng_0_0_1983 in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 3 Nov 2010, 2:15 AM
  2. Getting PagingToolbar change direction
    By js_coder in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 17 Feb 2010, 8:23 AM
  3. Grid: How to change default sort direction?
    By wgpubs in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 9 Feb 2009, 12:41 PM
  4. Change direction of a TreePanel
    By reza_sadeghzadeh in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 7 Sep 2007, 2:48 AM

Thread Participants: 1