X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6746dc89c47ed01b165cc1152533605f97eb8e8d..refs/heads/master:/docs/source/Tip2.html diff --git a/docs/source/Tip2.html b/docs/source/Tip2.html index 6f24dae8..eee95f55 100644 --- a/docs/source/Tip2.html +++ b/docs/source/Tip2.html @@ -3,8 +3,8 @@ The source code - - + + @@ -15,82 +15,78 @@ -
/**
- * Component layout for Tip/ToolTip/etc. components
- * @class Ext.layout.component.Tip
- * @extends Ext.layout.component.Dock
- * @private
+  
/**
+ * 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);
     }
-});
-
+});