Tip.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:5k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ /**
  2.  * @class Ext.Tip
  3.  * @extends Ext.Panel
  4.  * This is the base class for {@link Ext.QuickTip} and {@link Ext.Tooltip} that provides the basic layout and
  5.  * positioning that all tip-based classes require. This class can be used directly for simple, statically-positioned
  6.  * tips that are displayed programmatically, or it can be extended to provide custom tip implementations.
  7.  * @constructor
  8.  * Create a new Tip
  9.  * @param {Object} config The configuration options
  10.  */
  11. Ext.Tip = Ext.extend(Ext.Panel, {
  12.     /**
  13.      * @cfg {Boolean} closable True to render a close tool button into the tooltip header (defaults to false).
  14.      */
  15.     /**
  16.      * @cfg {Number} width
  17.      * Width in pixels of the tip (defaults to auto).  Width will be ignored if it exceeds the bounds of
  18.      * {@link #minWidth} or {@link #maxWidth}.  The maximum supported value is 500.
  19.      */
  20.     /**
  21.      * @cfg {Number} minWidth The minimum width of the tip in pixels (defaults to 40).
  22.      */
  23.     minWidth : 40,
  24.     /**
  25.      * @cfg {Number} maxWidth The maximum width of the tip in pixels (defaults to 300).  The maximum supported value is 500.
  26.      */
  27.     maxWidth : 300,
  28.     /**
  29.      * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop"
  30.      * for bottom-right shadow (defaults to "sides").
  31.      */
  32.     shadow : "sides",
  33.     /**
  34.      * @cfg {String} defaultAlign <b>Experimental</b>. The default {@link Ext.Element#alignTo} anchor position value
  35.      * for this tip relative to its element of origin (defaults to "tl-bl?").
  36.      */
  37.     defaultAlign : "tl-bl?",
  38.     autoRender: true,
  39.     quickShowInterval : 250,
  40.     // private panel overrides
  41.     frame:true,
  42.     hidden:true,
  43.     baseCls: 'x-tip',
  44.     floating:{shadow:true,shim:true,useDisplay:true,constrain:false},
  45.     autoHeight:true,
  46.     closeAction: 'hide',
  47.     // private
  48.     initComponent : function(){
  49.         Ext.Tip.superclass.initComponent.call(this);
  50.         if(this.closable && !this.title){
  51.             this.elements += ',header';
  52.         }
  53.     },
  54.     // private
  55.     afterRender : function(){
  56.         Ext.Tip.superclass.afterRender.call(this);
  57.         if(this.closable){
  58.             this.addTool({
  59.                 id: 'close',
  60.                 handler: this[this.closeAction],
  61.                 scope: this
  62.             });
  63.         }
  64.     },
  65.     /**
  66.      * Shows this tip at the specified XY position.  Example usage:
  67.      * <pre><code>
  68. // Show the tip at x:50 and y:100
  69. tip.showAt([50,100]);
  70. </code></pre>
  71.      * @param {Array} xy An array containing the x and y coordinates
  72.      */
  73.     showAt : function(xy){
  74.         Ext.Tip.superclass.show.call(this);
  75.         if(this.measureWidth !== false && (!this.initialConfig || typeof this.initialConfig.width != 'number')){
  76.             this.doAutoWidth();
  77.         }
  78.         if(this.constrainPosition){
  79.             xy = this.el.adjustForConstraints(xy);
  80.         }
  81.         this.setPagePosition(xy[0], xy[1]);
  82.     },
  83.     // protected
  84.     doAutoWidth : function(){
  85.         var bw = this.body.getTextWidth();
  86.         if(this.title){
  87.             bw = Math.max(bw, this.header.child('span').getTextWidth(this.title));
  88.         }
  89.         bw += this.getFrameWidth() + (this.closable ? 20 : 0) + this.body.getPadding("lr");
  90.         this.setWidth(bw.constrain(this.minWidth, this.maxWidth));
  91.         
  92.         // IE7 repaint bug on initial show
  93.         if(Ext.isIE7 && !this.repainted){
  94.             this.el.repaint();
  95.             this.repainted = true;
  96.         }
  97.     },
  98.     /**
  99.      * <b>Experimental</b>. Shows this tip at a position relative to another element using a standard {@link Ext.Element#alignTo}
  100.      * anchor position value.  Example usage:
  101.      * <pre><code>
  102. // Show the tip at the default position ('tl-br?')
  103. tip.showBy('my-el');
  104. // Show the tip's top-left corner anchored to the element's top-right corner
  105. tip.showBy('my-el', 'tl-tr');
  106. </code></pre>
  107.      * @param {Mixed} el An HTMLElement, Ext.Element or string id of the target element to align to
  108.      * @param {String} position (optional) A valid {@link Ext.Element#alignTo} anchor position (defaults to 'tl-br?' or
  109.      * {@link #defaultAlign} if specified).
  110.      */
  111.     showBy : function(el, pos){
  112.         if(!this.rendered){
  113.             this.render(Ext.getBody());
  114.         }
  115.         this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign));
  116.     },
  117.     initDraggable : function(){
  118.         this.dd = new Ext.Tip.DD(this, typeof this.draggable == 'boolean' ? null : this.draggable);
  119.         this.header.addClass('x-tip-draggable');
  120.     }
  121. });
  122. // private - custom Tip DD implementation
  123. Ext.Tip.DD = function(tip, config){
  124.     Ext.apply(this, config);
  125.     this.tip = tip;
  126.     Ext.Tip.DD.superclass.constructor.call(this, tip.el.id, 'WindowDD-'+tip.id);
  127.     this.setHandleElId(tip.header.id);
  128.     this.scroll = false;
  129. };
  130. Ext.extend(Ext.Tip.DD, Ext.dd.DD, {
  131.     moveOnly:true,
  132.     scroll:false,
  133.     headerOffsets:[100, 25],
  134.     startDrag : function(){
  135.         this.tip.el.disableShadow();
  136.     },
  137.     endDrag : function(e){
  138.         this.tip.el.enableShadow(true);
  139.     }
  140. });