examples/qtips/qtips.js

   1 Ext.require([
   2     'Ext.tip.*',
   3     'Ext.Button'
   4 ]);
   5
   6 Ext.onReady(function() {
   7     // Generate the buttons
   8     var defaultButtonConfig = {
   9         scale: 'medium',
  10         style: {
  11             marginRight: '10px'
  12         }
  13     };
  14
  15     var buttons = [{
  16             id      : 'tip1',
  17             text    : 'Basic ToolTip',
  18             renderTo: 'easiest'
  19         },{
  20             id      : 'tip2',
  21             text    : 'autoHide disabled',
  22             renderTo: 'easiest'
  23         },{
  24             id      : 'ajax-tip',
  25             text    : 'Ajax ToolTip',
  26             renderTo: 'easiest'
  27         },{
  28             id      : 'track-tip',
  29             text    : 'Mouse Track',
  30             renderTo: 'easiest'
  31         },{
  32             id      : 'leftCallout',
  33             text    : 'Anchor right, rich content',
  34             renderTo: 'anchor'
  35         },{
  36             id      : 'bottomCallout',
  37             text    : 'Anchor below',
  38             width   : 200,
  39             renderTo: 'anchor'
  40         },{
  41             id      : 'trackCallout',
  42             text    : 'Anchor with tracking',
  43             renderTo: 'anchor'
  44     }];
  45
  46     Ext.each(buttons, function(config) {
  47         var btn = Ext.create('Ext.Button', Ext.apply({}, config, defaultButtonConfig));
  48         btn.show();
  49     }, this);
  50
  51     var tooltips = [{
  52             target: 'tip1',
  53             html: 'A very simple tooltip'
  54         },{
  55             target: 'ajax-tip',
  56             width: 200,
  57             autoLoad: {url: 'ajax-tip.html'},
  58             dismissDelay: 15000 // auto hide after 15 seconds
  59         },{
  60             target: 'tip2',
  61             title: 'My Tip Title',
  62             html: 'Click the X to close me',
  63             autoHide : false,
  64             closable : true,
  65             draggable: true
  66         },{
  67             target: 'track-tip',
  68             title: 'Mouse Track',
  69             width: 200,
  70             html: 'This tip will follow the mouse while it is over the element',
  71             trackMouse: true
  72         },{
  73             title: '<a href="#">Rich Content Tooltip</a>',
  74             id: 'content-anchor-tip',
  75             target: 'leftCallout',
  76             anchor: 'left',
  77             html: null,
  78             width: 415,
  79             autoHide: false,
  80             closable: true,
  81             contentEl: 'content-tip', // load content from the page
  82             listeners: {
  83                 'render': function(){
  84                     this.header.on('click', function(e){
  85                         e.stopEvent();
  86                         Ext.Msg.alert('Link', 'Link to something interesting.');
  87                         Ext.getCmp('content-anchor-tip').hide();
  88                     }, this, {delegate:'a'});
  89                 }
  90             }
  91         },{
  92             target: 'bottomCallout',
  93             anchor: 'top',
  94             anchorOffset: 85, // center the anchor on the tooltip
  95             html: 'This tip\'s anchor is centered'
  96         },{
  97             target: 'trackCallout',
  98             anchor: 'right',
  99             trackMouse: true,
 100             html: 'Tracking while you move the mouse'
 101     }];
 102
 103     Ext.each(tooltips, function(config) {
 104         Ext.create('Ext.tip.ToolTip', config);
 105     });
 106
 107     Ext.QuickTips.init();
 108 });