PDA

View Full Version : Adding on click to the Panel



pulkitagarwal
15 Nov 2010, 9:14 AM
The panel does not become clickable . Instead this runs just before the panel gets rendered.
Please tell the fundamental issue I am commiting .


<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">

Ext.onReady(function() {

var myPanel = new Ext.Panel({
width : 600,
height : 650,
title : 'Ext Panels rock!',
collapsible : true,

html : '<div>' + 'My first Toolbar Panel!' + '</div>'
});
myPanel.on('click',alert("muhahahahaha"));
var panel = new Ext.Panel({
id:'main-panel',
baseCls:'x-plain',
renderTo: Ext.getBody(),
layout:'table',
layoutConfig: {columns:3},
// applied to child components
defaults: {frame:true, width:200, height: 200},
items:[{
title:'Item 1'
},{
title:'Item 2'
},{
xtype: 'button'
},{
title:'Item 4',
width:410,
colspan:2,
hidden: true
},{
title:'Item 5'
},{
title:'Item 6'
},
myPanel,
{
title:'Item 7',
width:410,
colspan:2
},{
title:'Item 8'
}



]
});
});

</script>
<div id='div1'>asdf</div>
</body>
</html>

Screamy
15 Nov 2010, 12:16 PM
According to the API docs, an Ext.Panel doesn't support a 'click' event. I looked all the way up the inheritance chain and didn't find a click event either.

Since it's not a recognized event for a panel, I'm guessing that myPanel.on() is falling on through and executing the alert().

pulkitagarwal
15 Nov 2010, 4:18 PM
Then how do we add a custom event for click to Ext.Panel ?

laurentParis
16 Nov 2010, 1:37 AM
...
var panel = new Ext.Panel({
id:'main-panel',
...
});
myPanel.el.on('click',function () {alert("muhahahahaha");});
...

pulkitagarwal
16 Nov 2010, 1:46 AM
:))=D>

dbassett74
3 Dec 2010, 9:17 AM
Is there a way to do this as a listener?

Condor
4 Dec 2010, 1:28 AM
listeners: {
render: function(c){
c.getEl().on({
click: function(e, t) {
// code here
}
}, c);
}
}

dbassett74
4 Dec 2010, 8:07 AM
Nice, thanks!