X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/3789b528d8dd8aad4558e38e22d775bcab1cbd36..6746dc89c47ed01b165cc1152533605f97eb8e8d:/docs/source/Tip.html diff --git a/docs/source/Tip.html b/docs/source/Tip.html index 6f24dae8..89d606c4 100644 --- a/docs/source/Tip.html +++ b/docs/source/Tip.html @@ -15,82 +15,80 @@
-/** - * Component layout for Tip/ToolTip/etc. components - * @class Ext.layout.component.Tip - * @extends Ext.layout.component.Dock - * @private +/** + * @class Ext.slider.Tip + * @extends Ext.tip.Tip + * Simple plugin for using an Ext.tip.Tip with a slider to show the slider value. In general this + * class is not created directly, instead pass the {@link Ext.slider.Multi#useTips} and + * {@link Ext.slider.Multi#tipText} configuration options to the slider directly. + * {@img Ext.slider.Tip/Ext.slider.Tip1.png Ext.slider.Tip component} + * Example usage: +<pre> + Ext.create('Ext.slider.Single', { + width: 214, + minValue: 0, + maxValue: 100, + useTips: true, + renderTo: Ext.getBody() + }); +</pre> + * Optionally provide your own tip text by passing tipText: + <pre> + new Ext.slider.Single({ + width: 214, + minValue: 0, + maxValue: 100, + useTips: true, + tipText: function(thumb){ + return Ext.String.format('<b>{0}% complete</b>', thumb.value); + } + }); + </pre> */ - -Ext.define('Ext.layout.component.Tip', { - - /* Begin Definitions */ - - alias: ['layout.tip'], - - extend: 'Ext.layout.component.Dock', - - /* End Definitions */ - - type: 'tip', +Ext.define('Ext.slider.Tip', { + extend: 'Ext.tip.Tip', + minWidth: 10, + alias: 'widget.slidertip', + offsets : [0, -10], - onLayout: function(width, height) { - var me = this, - owner = me.owner, - el = owner.el, - minWidth, - maxWidth, - naturalWidth, - constrainedWidth, - xy = el.getXY(); + isSliderTip: true, - // Position offscreen so the natural width is not affected by the viewport's right edge - el.setXY([-9999,-9999]); - - // Calculate initial layout - this.callParent(arguments); - - // Handle min/maxWidth for auto-width tips - if (!Ext.isNumber(width)) { - minWidth = owner.minWidth; - maxWidth = owner.maxWidth; - // IE6/7 in strict mode have a problem doing an autoWidth - if (Ext.isStrict && (Ext.isIE6 || Ext.isIE7)) { - constrainedWidth = me.doAutoWidth(); - } else { - naturalWidth = el.getWidth(); - } - if (naturalWidth < minWidth) { - constrainedWidth = minWidth; - } - else if (naturalWidth > maxWidth) { - constrainedWidth = maxWidth; - } - if (constrainedWidth) { - this.callParent([constrainedWidth, height]); - } - } - - // Restore position - el.setXY(xy); + init: function(slider) { + var me = this; + + slider.on({ + scope : me, + dragstart: me.onSlide, + drag : me.onSlide, + dragend : me.hide, + destroy : me.destroy + }); }, - - doAutoWidth: function(){ - var me = this, - owner = me.owner, - body = owner.body, - width = body.getTextWidth(); - - if (owner.header) { - width = Math.max(width, owner.header.getWidth()); - } - if (!Ext.isDefined(me.frameWidth)) { - me.frameWidth = owner.el.getWidth() - body.getWidth(); - } - width += me.frameWidth + body.getPadding('lr'); - return width; + /** + * @private + * Called whenever a dragstart or drag event is received on the associated Thumb. + * Aligns the Tip with the Thumb's new position. + * @param {Ext.slider.MultiSlider} slider The slider + * @param {Ext.EventObject} e The Event object + * @param {Ext.slider.Thumb} thumb The thumb that the Tip is attached to + */ + onSlide : function(slider, e, thumb) { + var me = this; + me.show(); + me.update(me.getText(thumb)); + me.doComponentLayout(); + me.el.alignTo(thumb.el, 'b-t?', me.offsets); + }, + + /** + * Used to create the text that appears in the Tip's body. By default this just returns + * the value of the Slider Thumb that the Tip is attached to. Override to customize. + * @param {Ext.slider.Thumb} thumb The Thumb that the Tip is attached to + * @return {String} The text to display in the tip + */ + getText : function(thumb) { + return String(thumb.value); } -}); -+});