Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / examples / qtips / qtips.js

diff --git a/examples/qtips/qtips.js b/examples/qtips/qtips.js
new file mode 100644 (file)
index 0000000..d7fcae3
--- /dev/null
+++ b/examples/qtips/qtips.js
@@ -0,0 +1,108 @@
+Ext.require([
+    'Ext.tip.*',
+    'Ext.Button'
+]);
+
+Ext.onReady(function() {
+    // Generate the buttons
+    var defaultButtonConfig = {
+        scale: 'medium',
+        style: {
+            marginRight: '10px'
+        }
+    };
+    
+    var buttons = [{
+            id      : 'tip1',
+            text    : 'Basic ToolTip',
+            renderTo: 'easiest'
+        },{
+            id      : 'tip2',
+            text    : 'autoHide disabled',
+            renderTo: 'easiest'
+        },{
+            id      : 'ajax-tip',
+            text    : 'Ajax ToolTip',
+            renderTo: 'easiest'
+        },{
+            id      : 'track-tip',
+            text    : 'Mouse Track',
+            renderTo: 'easiest'
+        },{
+            id      : 'leftCallout',
+            text    : 'Anchor right, rich content',
+            renderTo: 'anchor'
+        },{
+            id      : 'bottomCallout',
+            text    : 'Anchor below',
+            width   : 200,
+            renderTo: 'anchor'
+        },{
+            id      : 'trackCallout',
+            text    : 'Anchor with tracking',
+            renderTo: 'anchor'
+    }];
+    
+    Ext.each(buttons, function(config) {
+        var btn = Ext.create('Ext.Button', Ext.apply({}, config, defaultButtonConfig));
+        btn.show();
+    }, this);
+    
+    var tooltips = [{
+            target: 'tip1',
+            html: 'A very simple tooltip'
+        },{
+            target: 'ajax-tip',
+            width: 200,
+            autoLoad: {url: 'ajax-tip.html'},
+            dismissDelay: 15000 // auto hide after 15 seconds
+        },{
+            target: 'tip2',
+            title: 'My Tip Title',
+            html: 'Click the X to close me',
+            autoHide : false,
+            closable : true,
+            draggable: true
+        },{
+            target: 'track-tip',
+            title: 'Mouse Track',
+            width: 200,
+            html: 'This tip will follow the mouse while it is over the element',
+            trackMouse: true
+        },{        
+            title: '<a href="#">Rich Content Tooltip</a>',
+            id: 'content-anchor-tip',
+            target: 'leftCallout',
+            anchor: 'left',
+            html: null,
+            width: 415,
+            autoHide: false,
+            closable: true,
+            contentEl: 'content-tip', // load content from the page
+            listeners: {
+                'render': function(){
+                    this.header.on('click', function(e){
+                        e.stopEvent();
+                        Ext.Msg.alert('Link', 'Link to something interesting.');
+                        Ext.getCmp('content-anchor-tip').hide();
+                    }, this, {delegate:'a'});
+                }
+            }
+        },{
+            target: 'bottomCallout',
+            anchor: 'top',
+            anchorOffset: 85, // center the anchor on the tooltip
+            html: 'This tip\'s anchor is centered'
+        },{
+            target: 'trackCallout',
+            anchor: 'right',
+            trackMouse: true,
+            html: 'Tracking while you move the mouse'
+    }];
+        
+    Ext.each(tooltips, function(config) {
+        Ext.create('Ext.tip.ToolTip', config);
+    });  
+
+    Ext.QuickTips.init();
+});