Upgrade to ExtJS 3.3.1 - Released 11/30/2010

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

index bb7dc8f..eec0155 100644 (file)
--- a/docs/source/SliderTip.html
+++ b/docs/source/SliderTip.html
@@ -1,36 +1,84 @@
  <html>
  <head>
  <html>
  <head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
    <title>The source code</title>
      <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
      <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  </head>
  <body  onload="prettyPrint();">
    <title>The source code</title>
      <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
      <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  </head>
  <body  onload="prettyPrint();">
-    <pre class="prettyprint lang-js"><div id="cls-Ext.ux.SliderTip"></div>/**\r
- * @class Ext.ux.SliderTip\r
- * @extends Ext.Tip\r
- * Simple plugin for using an Ext.Tip with a slider to show the slider value\r
- */\r
-Ext.ux.SliderTip = Ext.extend(Ext.Tip, {\r
-    minWidth: 10,\r
-    offsets : [0, -10],\r
-    init : function(slider){\r
-        slider.on('dragstart', this.onSlide, this);\r
-        slider.on('drag', this.onSlide, this);\r
-        slider.on('dragend', this.hide, this);\r
-        slider.on('destroy', this.destroy, this);\r
-    },\r
-\r
-    onSlide : function(slider){\r
-        this.show();\r
-        this.body.update(this.getText(slider));\r
-        this.doAutoWidth();\r
-        this.el.alignTo(slider.thumb, 'b-t?', this.offsets);\r
-    },\r
-\r
-    getText : function(slider){\r
-        return String(slider.getValue());\r
-    }\r
-});\r
+    <pre class="prettyprint lang-js">/*!
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
+ */
+<div id="cls-Ext.slider.Tip"></div>/**
+ * @class Ext.slider.Tip
+ * @extends Ext.Tip
+ * Simple plugin for using an Ext.Tip with a slider to show the slider value. Example usage:
+<pre>
+new Ext.Slider({
+    width: 214,
+    minValue: 0,
+    maxValue: 100,
+    plugins: new Ext.slider.Tip()
+});
  </pre>
  </pre>
+ * Optionally provide your own tip text by overriding getText:
+ <pre>
+ new Ext.Slider({
+     width: 214,
+     minValue: 0,
+     maxValue: 100,
+     plugins: new Ext.slider.Tip({
+         getText: function(thumb){
+             return String.format('<b>{0}% complete</b>', thumb.value);
+         }
+     })
+ });
+ </pre>
+ */
+Ext.slider.Tip = Ext.extend(Ext.Tip, {
+    minWidth: 10,
+    offsets : [0, -10],
+    
+    init: function(slider) {
+        slider.on({
+            scope    : this,
+            dragstart: this.onSlide,
+            drag     : this.onSlide,
+            dragend  : this.hide,
+            destroy  : this.destroy
+        });
+    },
+    
+    /**
+     * @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) {
+        this.show();
+        this.body.update(this.getText(thumb));
+        this.doAutoWidth();
+        this.el.alignTo(thumb.el, 'b-t?', this.offsets);
+    },
+
+    <div id="method-Ext.slider.Tip-getText"></div>/**
+     * 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);
+    }
+});
+
+//backwards compatibility - SliderTip used to be a ux before 3.2
+Ext.ux.SliderTip = Ext.slider.Tip;</pre>    
  </body>
  </html>
 \ No newline at end of file
  </body>
  </html>
 \ No newline at end of file