Luc
19 Oct 2009, 10:39 AM
Hi,
For those of you interested in Google Wave, I thought I'ld share this simple example of how to embed a Wave in an ExtJS Window. Based on the sample from the Google Wave API tutorial. Works in Chrome and FF 3.5+
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Wave Embedded in Ext Window</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.0.0/ext-all-debug.js"></script>
<script src="http://wave-api.appspot.com/public/embed.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function() {
var wave = new WavePanel('https://wave.google.com/wave/');
var waveId= .... your WaveId here...... ;
wave.loadWave(waveId);
wave.setUIConfig('white', 'black', 'Arial', '13px');
var win = new Ext.Window({
title: 'Google Wave embedded in Ext Window',
height:500,
width:700
}).show();
wave.init(win.getLayoutTarget().dom);
})
</script>
</head>
<body>
</body>
</html>
To get the waveId you want to embed, just include blog-bot@appspot.com as participant and it will provide you with the Id.
Embedding the Wave in an Ext window preserves all the editing capabilities of the Wave (multi-user collaborative editing, drag&drop files (requires Gears), ...).
See screenshot for the end result.
Are there more Ext'ers interested in Google Wave (e.g. creating ExtJs based gadgets)?
For those of you interested in Google Wave, I thought I'ld share this simple example of how to embed a Wave in an ExtJS Window. Based on the sample from the Google Wave API tutorial. Works in Chrome and FF 3.5+
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Wave Embedded in Ext Window</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.0.0/ext-all-debug.js"></script>
<script src="http://wave-api.appspot.com/public/embed.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function() {
var wave = new WavePanel('https://wave.google.com/wave/');
var waveId= .... your WaveId here...... ;
wave.loadWave(waveId);
wave.setUIConfig('white', 'black', 'Arial', '13px');
var win = new Ext.Window({
title: 'Google Wave embedded in Ext Window',
height:500,
width:700
}).show();
wave.init(win.getLayoutTarget().dom);
})
</script>
</head>
<body>
</body>
</html>
To get the waveId you want to embed, just include blog-bot@appspot.com as participant and it will provide you with the Id.
Embedding the Wave in an Ext window preserves all the editing capabilities of the Wave (multi-user collaborative editing, drag&drop files (requires Gears), ...).
See screenshot for the end result.
Are there more Ext'ers interested in Google Wave (e.g. creating ExtJs based gadgets)?