/**
- * @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>
+
/**
+ * Component layout for Tip/ToolTip/etc. components
+ * @class Ext.layout.component.Tip
+ * @extends Ext.layout.component.Dock
+ * @private
*/
-Ext.define('Ext.slider.Tip', {
- extend: 'Ext.tip.Tip',
- minWidth: 10,
- alias: 'widget.slidertip',
- offsets : [0, -10],
+
+Ext.define('Ext.layout.component.Tip', {
+
+ /* Begin Definitions */
+
+ alias: ['layout.tip'],
+
+ extend: 'Ext.layout.component.Dock',
+
+ /* End Definitions */
+
+ type: 'tip',
- isSliderTip: true,
+ onLayout: function(width, height) {
+ var me = this,
+ owner = me.owner,
+ el = owner.el,
+ minWidth,
+ maxWidth,
+ naturalWidth,
+ constrainedWidth,
+ xy = el.getXY();
- init: function(slider) {
- var me = this;
-
- slider.on({
- scope : me,
- dragstart: me.onSlide,
- drag : me.onSlide,
- dragend : me.hide,
- destroy : me.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) {
- var me = this;
- me.show();
- me.update(me.getText(thumb));
- me.doComponentLayout();
- me.el.alignTo(thumb.el, 'b-t?', me.offsets);
- },
+ // 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);
- /**
- * 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);
+ // 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);
+ },
+
+ 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;
}
-});