<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TYPO3 Notifications</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="typo3/contrib/extjs/resources/css/ext-all-notheme.css" />
<style type=text/css>
body {
margin: 20px;
line-height: 1.5;
}
p {
margin: 10px 0;
}
</style>
<!-- overrides to base library -->
<!-- page specific -->
<link rel="stylesheet" type="text/css" href="typo3/sysext/t3skin/extjs/xtheme-t3skin.css" />
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="typo3/contrib/extjs/adapter/ext/ext-base-debug.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="typo3/contrib/extjs/ext-all-debug.js"></script>
<!-- overrides to base library -->
<!-- page specific -->
<script type="text/javascript" src="t3lib/js/extjs/notifications.js"></script>
<script type="text/javascript">
Ext.ns('TYPO3');
Ext.onReady(function() {
var returnButtonClicked = function(button) {
alert("You clicked the button " + button);
};
p = new Ext.Panel({
unstyled: true,
layout: 'anchor',
renderTo: Ext.getBody(),
defaults: {
style: 'margin:10px;',
width: 250,
unstyled: true
},
items: [{
html: '<h4>Dialogs</h4>'
}, {
xtype: 'button',
text: 'show Info Dialog',
handler: function() {
TYPO3.Dialog.InformationDialog({
title: 'Test',
msg: 'some information'
});
}
}, {
xtype: 'button',
text: 'show Question Dialog',
handler: function() {
TYPO3.Dialog.QuestionDialog({
title: 'Test',
msg: 'proceed?',
fn: returnButtonClicked
});
}
}, {
xtype: 'button',
text: 'show Warning Dialog',
handler: function() {
TYPO3.Dialog.WarningDialog({
title: 'Test',
msg: 'Warming!'
});
}
}, {
xtype: 'button',
text: 'show Error Dialog',
handler: function() {
TYPO3.Dialog.ErrorDialog({
title: 'Test',
msg: 'Error!'
});
}
}, {
html: '<h4>Windows</h4>'
}, {
xtype: 'button',
text: 'get Window without id and show',
handler: function() {
var w = TYPO3.Windows.getWindow({
title: 'Testwindow',
html: 'some content!',
width: 400
}).show();
}
}, {
xtype: 'button',
text: 'get Window with id "testwindow" and show',
handler: function() {
var w = TYPO3.Windows.getWindow({
title: 'Testwindow',
html: 'some content!',
width: 400,
height: 300,
autoHeight: false,
id: 'testwindow',
collapsible: true,
buttons: [{
text: 'ok, i will do!',
handler: function() {
w.hide()
}
}]
}).show();
}
}, {
xtype: 'button',
text: 'show Window "testwindow"',
handler: function() {
TYPO3.Windows.show('testwindow');
}
}, {
xtype: 'button',
text: 'get Windows count',
handler: function() {
alert('I have ' + TYPO3.Windows.getCount() + ' windows in stack.');
}
}, {
xtype: 'button',
text: 'show Windows stack',
handler: function() {
var s = [];
TYPO3.Windows.each(function(w) {
s.push(w.id);
});
alert("I have these windows in stack:\n\n" + s.join(', '));
}
}, {
xtype: 'button',
text: 'clear Windows stack',
handler: function() {
TYPO3.Windows.closeAll();
}
}]
});
p.doLayout();
});
</script>
</head>
<body>
<h1>TYPO3 Notifications and Windows</h1>
<p>See <a href="t3lib/js/extjs/notifications.js" target="blank">notifications.js</a></p>
</body>
</html>