PDA

View Full Version : changing scroll direction onOrientationChange



cabennett85
3 Aug 2010, 12:28 PM
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';
}

this.doComponentLayout();

}


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! :)

TommyMaintz
3 Aug 2010, 1:17 PM
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) {
this.scroller.destroy();
}

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;
this.scroller.destroy();
}
}
});