1. #1
    Ext User
    Join Date
    Jul 2010
    Vote Rating
    cabennett85 is on a distinguished road


    Question changing scroll direction onOrientationChange

    I have a parent container that has two children, 1 docked panel, and another that is fit to the remaining space.

    The docked panel is initially set with a scroll direction based on the ipad orientation. onOrientation change, I move the docked panel to another position and I also wish to change the scroll direction. The dock position change works fine but not the scroll direction change, it just keeps the initial scroll config. The most obvious way to me seems to be the following:

    onOrientationChange: function(orientation, w, h) {
            News.newsPanel.superclass.onOrientationChange.call(this, orientation, w, h);
            if(orientation == 'portrait') {
                this.setSize(News.shortDim, News.longDim);
                this.headlinesPanel.dock = 'bottom';
                this.headlinesPanel.height = 250;
                this.headlinesPanel.scroll = 'horizontal';
            else {
                this.setSize(News.longDim, News.shortDim);
                this.headlinesPanel.dock = 'left';
                this.headlinesPanel.width = 250;
                this.headlinesPanel.scroll = 'vertical';
    I've also tried this.headlinesPanel.setScrollable('direction') in place of the this.headlinesPanel.scroll = 'direction'; lines.

    Any thoughts on why this isn't working?

    I appreciate the advice!

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Haarlem, Netherlands
    Vote Rating
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough



    In the next release 0.94 I have modified the setScrollable function to support changing the current scroll configuration.

    This means that you would be able to do:
    component.setScrollable('vertical'); // or 'both' or 'horizontal'
    In the meantime you could apply the following override that adds this capability.
    Ext.override(Ext.Component, {
         * Sets a Component as scrollable.
         * @param config {Mixed}
         * Acceptable values are a Ext.Scroller configuration, 'horizontal', 'vertical', 'both', and false
        setScrollable : function(config) {
            if (config !== false) {
                if (this.scroller) {
                var direction = Ext.isObject(config) ? config.direction: config,
                    both = direction === 'both',
                    horizontal = both || direction === 'horizontal',
                    vertical = both || direction === true || direction === 'vertical';
                config = Ext.apply({},
                Ext.isObject(config) ? config: {}, {
                    momentum: true,
                    horizontal: horizontal,
                    vertical: vertical
                if (!this.scrollEl) {
                    this.scrollEl = this.getContentTarget().createChild();
                    this.originalGetContentTarget = this.getContentTarget;
                    this.getContentTarget = function() {
                        return this.scrollEl;
                this.scroller = new Ext.util.Scroller(this.scrollEl, config);
            else {
                this.getContentTarget = this.originalGetContentTarget;

Similar Threads

  1. changing look anf feel of scroll bar
    By Neha Sodhi in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 28 Jul 2010, 11:39 PM
  2. kitchensink: dynamically change sourcepanel scroll direction
    By rtweed in forum Sencha Touch 1.x: Discussion
    Replies: 10
    Last Post: 7 Jul 2010, 6:21 AM
  3. Try to scroll to bottom of ever changing view
    By keckeroo in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 5 Oct 2008, 11:37 PM
  4. changing the initial sort direction of a table column to DESC
    By pillindra in forum Community Discussion
    Replies: 7
    Last Post: 1 Jul 2008, 1:05 PM

Thread Participants: 1

Tags for this Thread