Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / docs / source / Tip2.html
diff --git a/docs/source/Tip2.html b/docs/source/Tip2.html

new file mode 100644 (file)

index 0000000..db95f04
--- /dev/null
+++ b/docs/source/Tip2.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-slider.Tip'>/**
+</span> * @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:
+&lt;pre&gt;
+    Ext.create('Ext.slider.Single', {
+        width: 214,
+        minValue: 0,
+        maxValue: 100,
+        useTips: true,
+        renderTo: Ext.getBody()
+    });   
+&lt;/pre&gt;
+ * Optionally provide your own tip text by passing tipText:
+ &lt;pre&gt;
+ new Ext.slider.Single({
+     width: 214,
+     minValue: 0,
+     maxValue: 100,
+     useTips: true,
+     tipText: function(thumb){
+         return Ext.String.format('&lt;b&gt;{0}% complete&lt;/b&gt;', thumb.value);
+     }
+ });
+ &lt;/pre&gt;
+ * @xtype slidertip
+ */
+Ext.define('Ext.slider.Tip', {
+    extend: 'Ext.tip.Tip',
+    minWidth: 10,
+    alias: 'widget.slidertip',
+    offsets : [0, -10],
+    
+    isSliderTip: true,
+
+    init: function(slider) {
+        var me = this;
+        
+        slider.on({
+            scope    : me,
+            dragstart: me.onSlide,
+            drag     : me.onSlide,
+            dragend  : me.hide,
+            destroy  : me.destroy
+        });
+    },
+<span id='Ext-slider.Tip-method-onSlide'>    /**
+</span>     * @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);
+    },
+
+<span id='Ext-slider.Tip-method-getText'>    /**
+</span>     * 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);
+    }
+});</pre></pre></body></html>
+\ No newline at end of file