/**
+ * 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.
+ *
+ * @example
+ * Ext.create('Ext.slider.Single', {
+ * width: 214,
+ * minValue: 0,
+ * maxValue: 100,
+ * useTips: true,
+ * renderTo: Ext.getBody()
+ * });
+ *
+ * Optionally provide your own tip text by passing tipText:
+ *
+ * @example
+ * Ext.create('Ext.slider.Single', {
+ * width: 214,
+ * minValue: 0,
+ * maxValue: 100,
+ * useTips: true,
+ * tipText: function(thumb){
+ * return Ext.String.format('**{0}% complete**', thumb.value);
+ * },
+ * renderTo: Ext.getBody()
+ * });
*/
+Ext.define('Ext.slider.Tip', {
+ extend: 'Ext.tip.Tip',
+ minWidth: 10,
+ alias: 'widget.slidertip',
+ offsets : [0, -10],
-Ext.define('Ext.layout.component.Tip', {
+ isSliderTip: true,
- /* Begin Definitions */
+ init: function(slider) {
+ var me = this;
- alias: ['layout.tip'],
-
- extend: 'Ext.layout.component.Dock',
-
- /* End Definitions */
-
- type: 'tip',
-
- onLayout: function(width, height) {
- var me = this,
- owner = me.owner,
- el = owner.el,
- minWidth,
- maxWidth,
- naturalWidth,
- constrainedWidth,
- xy = el.getXY();
-
- // 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);
+ 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);
}
-});
-