/ext-4.1.0_b3/docs/extjs/examples/qtips/qtips.js

  1Ext.require([
  2    'Ext.tip.*',
  3    'Ext.Button'
  4]);
  5
  6Ext.onReady(function() {
  7    // Generate the buttons
  8    var defaultButtonConfig = {
  9        scale: 'medium',
 10        style: {
 11            "margin-right": '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});