(function() {
function getQueryParam(name, queryString) {
var match = RegExp(name + '=([^&]*)').exec(queryString || location.search);
return match && decodeURIComponent(match[1]);
}
function hasOption(opt) {
var s = window.location.search;
var re = new RegExp('(?:^|[&?])' + opt + '(?:[=]([^&]*))?(?:$|[&])', 'i');
var m = re.exec(s);
return m ? (m[1] === undefined ? true : m[1]) : false;
}
var scriptTags = document.getElementsByTagName('script'),
defaultTheme = 'neptune',
defaultRtl = false,
i = scriptTags.length,
requires = [
'Ext.toolbar.Toolbar',
'Ext.form.field.ComboBox',
'Ext.form.FieldContainer',
'Ext.form.field.Radio'
],
defaultQueryString, src, theme, rtl;
while (i--) {
src = scriptTags[i].src;
if (src.indexOf('include-ext.js') !== -1) {
defaultQueryString = src.split('?')[1];
if (defaultQueryString) {
defaultTheme = getQueryParam('theme', defaultQueryString) || defaultTheme;
defaultRtl = getQueryParam('rtl', defaultQueryString) || defaultRtl;
}
break;
}
}
Ext.themeName = theme = getQueryParam('theme') || defaultTheme;
Ext.require(requires);
Ext.onReady(function() {
Ext.getBody().addCls(Ext.baseCSSPrefix + 'theme-' + Ext.themeName);
if (hasOption('nocss3')) {
Ext.supports.CSS3BorderRadius = false;
Ext.getBody().addCls('x-nbr x-nlg');
}
function setParam(param) {
var queryString = Ext.Object.toQueryString(
Ext.apply(Ext.Object.fromQueryString(location.search), param)
);
location.search = queryString;
}
function removeParam(paramName) {
var params = Ext.Object.fromQueryString(location.search);
delete params[paramName];
location.search = Ext.Object.toQueryString(params);
}
var toolbar;
setTimeout(function() {
toolbar = Ext.widget({
xtype: 'toolbar',
border: true,
id: 'options-toolbar',
floating: true,
fixed: true,
preventFocusOnActivate: true,
draggable: {
constrain: true
},
items: [{
xtype: 'combo',
width: 170,
labelWidth: 45,
fieldLabel: 'Theme',
displayField: 'name',
valueField: 'value',
labelStyle: 'cursor:move;',
margin: '0 5 0 0',
store: Ext.create('Ext.data.Store', {
fields: ['value', 'name'],
data : [
{ value: 'access', name: 'Accessibility' },
{ value: 'classic', name: 'Classic' },
{ value: 'gray', name: 'Gray' },
{ value: 'neptune', name: 'Neptune' }
]
}),
value: theme,
listeners: {
select: function(combo) {
var theme = combo.getValue();
if (theme !== defaultTheme) {
setParam({ theme: theme });
} else {
removeParam('theme');
}
}
}
}, {
xtype: 'tool',
type: 'close',
handler: function() {
toolbar.destroy();
}
}],
// Extra constraint margins within default constrain region of parentNode
constraintInsets: '0 -' + (Ext.getScrollbarSize().width + 4) + ' 0 0'
});
toolbar.show();
toolbar.alignTo(
document.body,
Ext.optionsToolbarAlign || 'tr-tr',
[
(Ext.getScrollbarSize().width + 4) * (Ext.rootHierarchyState.rtl ? 1 : -1),
-(document.body.scrollTop || document.documentElement.scrollTop)
]
);
var constrainer = function() {
toolbar.doConstrain();
};
Ext.EventManager.onWindowResize(constrainer);
toolbar.on('destroy', function() {
Ext.EventManager.removeResizeListener(constrainer);
});
}, 100);
});
})();
Ext.require([
'Ext.tip.*',
'Ext.Button',
'Ext.window.MessageBox'
]);
Ext.onReady(function() {
// Generate the buttons
var defaultButtonConfig = {
scale: 'medium',
style: {"margin-right": '10px'}
};
var defaultImgConfig = {
autoEl: 'div',
width: '500',
height: '400',
style: {"margin-right": '10px'}
};
var buttons = [{
id : 'tip2',
text : 'autoHide disabled',
renderTo: 'easiest'
},{
id : 'track-tip',
text : 'Mouse Track',
renderTo: 'easiest'
},{
id : 'leftCallout',
text : 'Anchor right, rich content',
renderTo: 'anchor'
}];
Ext.each(buttons, function(config) {
var btn = Ext.create('Ext.Button', Ext.apply({}, config, defaultButtonConfig));
btn.show();
}, this);
var images = [{
id: 'img1',
renderTo: 'image',
src: 'http://farm9.staticflickr.com/8389/8595756042_bbe0766282_o.jpg',
width: 600,
height: 400,
listeners: {
mouseover: {
element: 'el',
fn: function(el) {
newImage = new Image();
newImage.src = images[0].src;
var xx = newImage.width;
var yy = newImage.height;
newImage.remove();
var xxRatio = xx/images[0].width;
var yyRatio = yy/images[0].height;
window.onmousemove = handleMouseMove;
function handleMouseMove(event) {
event = event || window.event;
var xxPos = event.layerX * xxRatio - 250;
var yyPos = event.layerY * yyRatio - 200;
if(xxPos < 0) xxPos = 0;
if(yyPos < 0) yyPos = 0;
if(xxPos > (xx - 500) ) xxPos = xx - 500;
if(yyPos > (yy - 400) ) yyPos = yy - 400;
var tipImg;
try { tipImg = Ext.get('img1-ttip-body').down('div').down('div', true); }
catch (e) {}
try { tipImg.style.backgroundPosition = "-" + xxPos + "px -" + yyPos + "px"; }
catch (e) {}
}
}
},
mouseout: {
element: 'el',
fn: function(el) {
window.onmousemove = null;
}
}
}
}];
Ext.each(images, function(config) {
var mage = Ext.create('Ext.Img', Ext.apply({}, config, defaultImgConfig));
mage.show();
}, this);
var tooltips = [{
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: 500,
maxWidth: 500,
height: 400,
// autoHide: false,
closable: true,
// trackMouse: true,
dismissDelay: 15000,
hideDelay: 10000,
mouseOffset: [200,-90],
// draggable: true, //this header has a click event
contentEl: 'content-tip', // load content from the page
listeners: {
'render': function(){
this.header.on('click', function(header, e){
e.stopEvent();
Ext.Msg.alert('Link', 'Link to something interesting.');
Ext.getCmp('content-anchor-tip').hide();
}, this, {delegate:'a'});
}
}
},{
title: 'Zoom Window',
id: 'img1-ttip',
target: 'img1',
width: 500,
maxWidth: 500,
height: 400,
closable: true,
//trackMouse: true,
mouseOffset: [100,-70],
autoHide: false,
draggable: true,
//dismissDelay: 8000,
//hideDelay: 5000,
html: '<div style="background-image:url(http://farm9.staticflickr.com/8389/8595756042_bbe0766282_o.jpg);background-repeat:no-repeat;background-position:1000px 1000px; height:100%;"></div>',
}];
Ext.each(tooltips, function(config) {
Ext.create('Ext.tip.ToolTip', config);
});
// Ext.QuickTips.init();
});
<div id="easiest"></div>
<h2>Rich Content Tooltip</h2>
<div id="anchor"></div>
<div id="image"></div>
<div style="display:none;">
<div id="content-tip" style="overflow:hidden">
<img src="http://farm9.staticflickr.com/8389/8595756042_bbe0766282_o.jpg" alt="Thumbnail" />
</div>
</div>
@import url("http://docs.sencha.com/extjs/4.2.1/extjs-build/resources/ext-theme-neptune/ext-theme-neptune-all-debug.css");
body {
padding:20px;
padding-top:32px;
}
.x-body {
font-family:helvetica,tahoma,verdana,sans-serif;
font-size:13px;
}
p {
margin-bottom:15px;
}
h1 {
font-size:18px;
margin-bottom:20px;
}
h2 {
font-size:14px;
color:#333;
font-weight:bold;
margin:10px 0;
}
.example-info{
width:150px;
border:1px solid #c3daf9;
border-top:1px solid #DCEAFB;
border-left:1px solid #DCEAFB;
background:#ecf5fe url( http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/qtips/info-bg.gif ) repeat-x;
font-size:10px;
padding:8px;
}
pre.code{
background: #F8F8F8;
border: 1px solid #e8e8e8;
padding:10px;
margin:10px;
margin-left:0px;
border-left:5px solid #e8e8e8;
font-size: 12px !important;
line-height:14px !important;
}
.msg .x-box-mc {
font-size:14px;
}
#msg-div {
position:absolute;
left:50%;
top:10px;
width:400px;
margin-left:-200px;
z-index:20000;
}
#msg-div .msg {
border-radius: 8px;
-moz-border-radius: 8px;
background: #F6F6F6;
border: 2px solid #ccc;
margin-top: 2px;
padding: 10px 15px;
color: #555;
}
#msg-div .msg h3 {
margin: 0 0 8px;
font-weight: bold;
font-size: 15px;
}
#msg-div .msg p {
margin: 0;
}
.x-grid3-row-body p {
margin:5px 5px 10px 5px !important;
}
.feature-list {
margin-bottom: 15px;
}
.feature-list li {
list-style: disc;
margin-left: 17px;
margin-bottom: 4px;
}
.qtip-target {
width: 100px;
text-align:center;
padding: 5px 0;
border:1px dotted #99bbe8;
background:#dfe8f6;
color: #15428b;
cursor:default;
margin:10px;
font:bold 11px tahoma,arial,sans-serif;
float: left;
}
#image {
margin-top: 1em;
overflow: hidden;
}
#image img {
width:600px;
height:400px;
}