/*!
 * Ext JS Library 3.3.0
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/** * @class Ext.layout.boxOverflow.Scroller * @extends Ext.layout.boxOverflow.None * Description */ Ext.layout.boxOverflow.Scroller = Ext.extend(Ext.layout.boxOverflow.None, {
/** * @cfg animateScroll * @type Boolean * True to animate the scrolling of items within the layout (defaults to true, ignored if enableScroll is false) */ animateScroll: true,
/** * @cfg scrollIncrement * @type Number * The number of pixels to scroll by on scroller click (defaults to 100) */ scrollIncrement: 100,
/** * @cfg wheelIncrement * @type Number * The number of pixels to increment on mouse wheel scrolling (defaults to 3). */ wheelIncrement: 3,
/** * @cfg scrollRepeatInterval * @type Number * Number of milliseconds between each scroll while a scroller button is held down (defaults to 400) */ scrollRepeatInterval: 400,
/** * @cfg scrollDuration * @type Number * Number of seconds that each scroll animation lasts (defaults to 0.4) */ scrollDuration: 0.4,
/** * @cfg beforeCls * @type String * CSS class added to the beforeCt element. This is the element that holds any special items such as scrollers, * which must always be present at the leftmost edge of the Container */ beforeCls: 'x-strip-left',
/** * @cfg afterCls * @type String * CSS class added to the afterCt element. This is the element that holds any special items such as scrollers, * which must always be present at the rightmost edge of the Container */ afterCls: 'x-strip-right',
/** * @cfg scrollerCls * @type String * CSS class added to both scroller elements if enableScroll is used */ scrollerCls: 'x-strip-scroller',
/** * @cfg beforeScrollerCls * @type String * CSS class added to the left scroller element if enableScroll is used */ beforeScrollerCls: 'x-strip-scroller-left',
/** * @cfg afterScrollerCls * @type String * CSS class added to the right scroller element if enableScroll is used */ afterScrollerCls: 'x-strip-scroller-right', /** * @private * Sets up an listener to scroll on the layout's innerCt mousewheel event */ createWheelListener: function() { this.layout.innerCt.on({ scope : this, mousewheel: function(e) { e.stopEvent(); this.scrollBy(e.getWheelDelta() * this.wheelIncrement * -1, false); } }); }, /** * @private * Most of the heavy lifting is done in the subclasses */ handleOverflow: function(calculations, targetSize) { this.createInnerElements(); this.showScrollers(); }, /** * @private */ clearOverflow: function() { this.hideScrollers(); }, /** * @private * Shows the scroller elements in the beforeCt and afterCt. Creates the scrollers first if they are not already * present. */ showScrollers: function() { this.createScrollers(); this.beforeScroller.show(); this.afterScroller.show(); this.updateScrollButtons(); }, /** * @private * Hides the scroller elements in the beforeCt and afterCt */ hideScrollers: function() { if (this.beforeScroller != undefined) { this.beforeScroller.hide(); this.afterScroller.hide(); } }, /** * @private * Creates the clickable scroller elements and places them into the beforeCt and afterCt */ createScrollers: function() { if (!this.beforeScroller && !this.afterScroller) { var before = this.beforeCt.createChild({ cls: String.format("{0} {1} ", this.scrollerCls, this.beforeScrollerCls) }); var after = this.afterCt.createChild({ cls: String.format("{0} {1}", this.scrollerCls, this.afterScrollerCls) }); before.addClassOnOver(this.beforeScrollerCls + '-hover'); after.addClassOnOver(this.afterScrollerCls + '-hover'); before.setVisibilityMode(Ext.Element.DISPLAY); after.setVisibilityMode(Ext.Element.DISPLAY); this.beforeRepeater = new Ext.util.ClickRepeater(before, { interval: this.scrollRepeatInterval, handler : this.scrollLeft, scope : this }); this.afterRepeater = new Ext.util.ClickRepeater(after, { interval: this.scrollRepeatInterval, handler : this.scrollRight, scope : this });
/** * @property beforeScroller * @type Ext.Element * The left scroller element. Only created when needed. */ this.beforeScroller = before;
/** * @property afterScroller * @type Ext.Element * The left scroller element. Only created when needed. */ this.afterScroller = after; } }, /** * @private */ destroy: function() { Ext.destroy(this.beforeScroller, this.afterScroller, this.beforeRepeater, this.afterRepeater, this.beforeCt, this.afterCt); }, /** * @private * Scrolls left or right by the number of pixels specified * @param {Number} delta Number of pixels to scroll to the right by. Use a negative number to scroll left */ scrollBy: function(delta, animate) { this.scrollTo(this.getScrollPosition() + delta, animate); }, /** * @private * Normalizes an item reference, string id or numerical index into a reference to the item * @param {Ext.Component|String|Number} item The item reference, id or index * @return {Ext.Component} The item */ getItem: function(item) { if (Ext.isString(item)) { item = Ext.getCmp(item); } else if (Ext.isNumber(item)) { item = this.items[item]; } return item; }, /** * @private * @return {Object} Object passed to scrollTo when scrolling */ getScrollAnim: function() { return { duration: this.scrollDuration, callback: this.updateScrollButtons, scope : this }; }, /** * @private * Enables or disables each scroller button based on the current scroll position */ updateScrollButtons: function() { if (this.beforeScroller == undefined || this.afterScroller == undefined) { return; } var beforeMeth = this.atExtremeBefore() ? 'addClass' : 'removeClass', afterMeth = this.atExtremeAfter() ? 'addClass' : 'removeClass', beforeCls = this.beforeScrollerCls + '-disabled', afterCls = this.afterScrollerCls + '-disabled'; this.beforeScroller[beforeMeth](beforeCls); this.afterScroller[afterMeth](afterCls); this.scrolling = false; }, /** * @private * Returns true if the innerCt scroll is already at its left-most point * @return {Boolean} True if already at furthest left point */ atExtremeBefore: function() { return this.getScrollPosition() === 0; }, /** * @private * Scrolls to the left by the configured amount */ scrollLeft: function(animate) { this.scrollBy(-this.scrollIncrement, animate); }, /** * @private * Scrolls to the right by the configured amount */ scrollRight: function(animate) { this.scrollBy(this.scrollIncrement, animate); },
/** * Scrolls to the given component. * @param {String|Number|Ext.Component} item The item to scroll to. Can be a numerical index, component id * or a reference to the component itself. * @param {Boolean} animate True to animate the scrolling */ scrollToItem: function(item, animate) { item = this.getItem(item); if (item != undefined) { var visibility = this.getItemVisibility(item); if (!visibility.fullyVisible) { var box = item.getBox(true, true), newX = box.x; if (visibility.hiddenRight) { newX -= (this.layout.innerCt.getWidth() - box.width); } this.scrollTo(newX, animate); } } }, /** * @private * For a given item in the container, return an object with information on whether the item is visible * with the current innerCt scroll value. * @param {Ext.Component} item The item * @return {Object} Values for fullyVisible, hiddenLeft and hiddenRight */ getItemVisibility: function(item) { var box = this.getItem(item).getBox(true, true), itemLeft = box.x, itemRight = box.x + box.width, scrollLeft = this.getScrollPosition(), scrollRight = this.layout.innerCt.getWidth() + scrollLeft; return { hiddenLeft : itemLeft < scrollLeft, hiddenRight : itemRight > scrollRight, fullyVisible: itemLeft > scrollLeft && itemRight < scrollRight }; } }); Ext.layout.boxOverflow.scroller = Ext.layout.boxOverflow.Scroller;
/** * @class Ext.layout.boxOverflow.VerticalScroller * @extends Ext.layout.boxOverflow.Scroller * Description */ Ext.layout.boxOverflow.VerticalScroller = Ext.extend(Ext.layout.boxOverflow.Scroller, { scrollIncrement: 75, wheelIncrement : 2, handleOverflow: function(calculations, targetSize) { Ext.layout.boxOverflow.VerticalScroller.superclass.handleOverflow.apply(this, arguments); return { targetSize: { height: targetSize.height - (this.beforeCt.getHeight() + this.afterCt.getHeight()), width : targetSize.width } }; }, /** * @private * Creates the beforeCt and afterCt elements if they have not already been created */ createInnerElements: function() { var target = this.layout.innerCt; //normal items will be rendered to the innerCt. beforeCt and afterCt allow for fixed positioning of //special items such as scrollers or dropdown menu triggers if (!this.beforeCt) { this.beforeCt = target.insertSibling({cls: this.beforeCls}, 'before'); this.afterCt = target.insertSibling({cls: this.afterCls}, 'after'); this.createWheelListener(); } }, /** * @private * Scrolls to the given position. Performs bounds checking. * @param {Number} position The position to scroll to. This is constrained. * @param {Boolean} animate True to animate. If undefined, falls back to value of this.animateScroll */ scrollTo: function(position, animate) { var oldPosition = this.getScrollPosition(), newPosition = position.constrain(0, this.getMaxScrollBottom()); if (newPosition != oldPosition && !this.scrolling) { if (animate == undefined) { animate = this.animateScroll; } this.layout.innerCt.scrollTo('top', newPosition, animate ? this.getScrollAnim() : false); if (animate) { this.scrolling = true; } else { this.scrolling = false; this.updateScrollButtons(); } } },
/** * Returns the current scroll position of the innerCt element * @return {Number} The current scroll position */ getScrollPosition: function(){ return parseInt(this.layout.innerCt.dom.scrollTop, 10) || 0; }, /** * @private * Returns the maximum value we can scrollTo * @return {Number} The max scroll value */ getMaxScrollBottom: function() { return this.layout.innerCt.dom.scrollHeight - this.layout.innerCt.getHeight(); }, /** * @private * Returns true if the innerCt scroll is already at its right-most point * @return {Boolean} True if already at furthest right point */ atExtremeAfter: function() { return this.getScrollPosition() >= this.getMaxScrollBottom(); } }); Ext.layout.boxOverflow.scroller.vbox = Ext.layout.boxOverflow.VerticalScroller;
/** * @class Ext.layout.boxOverflow.HorizontalScroller * @extends Ext.layout.boxOverflow.Scroller * Description */ Ext.layout.boxOverflow.HorizontalScroller = Ext.extend(Ext.layout.boxOverflow.Scroller, { handleOverflow: function(calculations, targetSize) { Ext.layout.boxOverflow.HorizontalScroller.superclass.handleOverflow.apply(this, arguments); return { targetSize: { height: targetSize.height, width : targetSize.width - (this.beforeCt.getWidth() + this.afterCt.getWidth()) } }; }, /** * @private * Creates the beforeCt and afterCt elements if they have not already been created */ createInnerElements: function() { var target = this.layout.innerCt; //normal items will be rendered to the innerCt. beforeCt and afterCt allow for fixed positioning of //special items such as scrollers or dropdown menu triggers if (!this.beforeCt) { this.afterCt = target.insertSibling({cls: this.afterCls}, 'before'); this.beforeCt = target.insertSibling({cls: this.beforeCls}, 'before'); this.createWheelListener(); } }, /** * @private * Scrolls to the given position. Performs bounds checking. * @param {Number} position The position to scroll to. This is constrained. * @param {Boolean} animate True to animate. If undefined, falls back to value of this.animateScroll */ scrollTo: function(position, animate) { var oldPosition = this.getScrollPosition(), newPosition = position.constrain(0, this.getMaxScrollRight()); if (newPosition != oldPosition && !this.scrolling) { if (animate == undefined) { animate = this.animateScroll; } this.layout.innerCt.scrollTo('left', newPosition, animate ? this.getScrollAnim() : false); if (animate) { this.scrolling = true; } else { this.scrolling = false; this.updateScrollButtons(); } } },
/** * Returns the current scroll position of the innerCt element * @return {Number} The current scroll position */ getScrollPosition: function(){ return parseInt(this.layout.innerCt.dom.scrollLeft, 10) || 0; }, /** * @private * Returns the maximum value we can scrollTo * @return {Number} The max scroll value */ getMaxScrollRight: function() { return this.layout.innerCt.dom.scrollWidth - this.layout.innerCt.getWidth(); }, /** * @private * Returns true if the innerCt scroll is already at its right-most point * @return {Boolean} True if already at furthest right point */ atExtremeAfter: function() { return this.getScrollPosition() >= this.getMaxScrollRight(); } }); Ext.layout.boxOverflow.scroller.hbox = Ext.layout.boxOverflow.HorizontalScroller;