PDA

View Full Version : Getting started with showing the aeroglass onClick



Robb__
22 May 2007, 2:21 AM
I would like to use the nice "aeroglass" thing used in this example (http://www.yui-ext.com/deploy/yui-ext/examples/dialog/hello.html)
but instead when I click on an image,
<img src="test.jpg" onClick="show();"


<script>
function show(){
//show the areoglass dialog somehow
}
</script>

Could someone get me started?

Thanks!

22 May 2007, 4:38 AM
The answer is very simple.

Give your picture an ID. Look @ the default example below.



/*
* Ext JS Library 1.0.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* [email protected]
*
* http://www.extjs.com/license
*/

// create the HelloWorld application (single instance)
var HelloWorld = function(){
// everything in this space is private and only accessible in the HelloWorld block

// define some private variables
var dialog, showBtn;

// return a public interface
return {
init : function(){
showBtn = Ext.get('PICTURE_ID');
// attach to click event
showBtn.on('click', this.showDialog, this);
},

showDialog : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new Ext.BasicDialog("hello-dlg", {
autoTabs:true,
width:500,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
proxyDrag: true
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Submit', dialog.hide, dialog).disable();
dialog.addButton('Close', dialog.hide, dialog);
}
dialog.show(showBtn.dom);
}
};
}();

// using onDocumentReady instead of window.onload initializes the application
// when the DOM is ready, without waiting for images and other resources to load
Ext.onReady(HelloWorld.init, HelloWorld, true);