examples/qtips/qtips.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.require([
  16     'Ext.tip.*',
  17     'Ext.Button'
  18 ]);
  19
  20 Ext.onReady(function() {
  21     // Generate the buttons
  22     var defaultButtonConfig = {
  23         scale: 'medium',
  24         style: {
  25             marginRight: '10px'
  26         }
  27     };
  28
  29     var buttons = [{
  30             id      : 'tip1',
  31             text    : 'Basic ToolTip',
  32             renderTo: 'easiest'
  33         },{
  34             id      : 'tip2',
  35             text    : 'autoHide disabled',
  36             renderTo: 'easiest'
  37         },{
  38             id      : 'ajax-tip',
  39             text    : 'Ajax ToolTip',
  40             renderTo: 'easiest'
  41         },{
  42             id      : 'track-tip',
  43             text    : 'Mouse Track',
  44             renderTo: 'easiest'
  45         },{
  46             id      : 'leftCallout',
  47             text    : 'Anchor right, rich content',
  48             renderTo: 'anchor'
  49         },{
  50             id      : 'bottomCallout',
  51             text    : 'Anchor below',
  52             width   : 200,
  53             renderTo: 'anchor'
  54         },{
  55             id      : 'trackCallout',
  56             text    : 'Anchor with tracking',
  57             renderTo: 'anchor'
  58     }];
  59
  60     Ext.each(buttons, function(config) {
  61         var btn = Ext.create('Ext.Button', Ext.apply({}, config, defaultButtonConfig));
  62         btn.show();
  63     }, this);
  64
  65     var tooltips = [{
  66             target: 'tip1',
  67             html: 'A very simple tooltip'
  68         },{
  69             target: 'ajax-tip',
  70             width: 200,
  71             autoLoad: {url: 'ajax-tip.html'},
  72             dismissDelay: 15000 // auto hide after 15 seconds
  73         },{
  74             target: 'tip2',
  75             title: 'My Tip Title',
  76             html: 'Click the X to close me',
  77             autoHide : false,
  78             closable : true,
  79             draggable: true
  80         },{
  81             target: 'track-tip',
  82             title: 'Mouse Track',
  83             width: 200,
  84             html: 'This tip will follow the mouse while it is over the element',
  85             trackMouse: true
  86         },{
  87             title: '<a href="#">Rich Content Tooltip</a>',
  88             id: 'content-anchor-tip',
  89             target: 'leftCallout',
  90             anchor: 'left',
  91             html: null,
  92             width: 415,
  93             autoHide: false,
  94             closable: true,
  95             contentEl: 'content-tip', // load content from the page
  96             listeners: {
  97                 'render': function(){
  98                     this.header.on('click', function(e){
  99                         e.stopEvent();
 100                         Ext.Msg.alert('Link', 'Link to something interesting.');
 101                         Ext.getCmp('content-anchor-tip').hide();
 102                     }, this, {delegate:'a'});
 103                 }
 104             }
 105         },{
 106             target: 'bottomCallout',
 107             anchor: 'top',
 108             anchorOffset: 85, // center the anchor on the tooltip
 109             html: 'This tip\'s anchor is centered'
 110         },{
 111             target: 'trackCallout',
 112             anchor: 'right',
 113             trackMouse: true,
 114             html: 'Tracking while you move the mouse'
 115     }];
 116
 117     Ext.each(tooltips, function(config) {
 118         Ext.create('Ext.tip.ToolTip', config);
 119     });
 120
 121     Ext.QuickTips.init();
 122 });
 123