Menu
I am building a simple site with extJS.
I can successfully attach click events from JQuery and from within extJS but only to elements which I create in the HTML in the body tag itself.
However, events that I attach to extJS-generated elements either have no effect or cause the extJS site not to be generated.
For example, all the examples on in this tutorial simply don't work (and they show exactly what I want to do: manipulate DOM from inside extJS), but if I try to access a DOM element from inside extJS as it states, I simply get the error that that element "is null" as in the error screenshot below. What am I not understanding about extJS, why are all the elments I try to access with get() null?
How can I change the following code so that I can attach events to extJS-generated elements, e.g. to the "myPanel" div?
Here are the errors I get in Firebug:
although myPanel div does exist:
@Mchl, getCmp doesn't seem to work:
<html>
<head>
<title>New Backend Layout</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<style type="text/css">
html, body {
font: normal 12px verdana;
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
height: 100%;
}
.empty .x-panel-header {
background-color: #FFFF99;
}
.empty .x-panel-body {
text-align:left;
color: #333;
background-color: #FFFFCC;
padding: 10px;
font-size:11px;
}
.withtabs .x-panel-header {
background-color: #FFFF99;
}
.withtabs .x-panel-body {
text-align:left;
color: #333;
background-color: #FFFFCC;
font-size:11px;
}
.subpanel .x-panel-body {
padding: 5px;
}
.withtabs .x-tab-panel-header {
background-color: #CCFF99;
}
.withtabs .x-tab-strip {
background-color: #CCFF99;
}
</style>
<script type="text/javascript">
google.load("jquery", "1.4.3");
google.setOnLoadCallback(function() {
$('#testInHtml').css("background-color","yellow"); //changes color of element
$('#ext-gen9').css('background-color', 'red'); //does not change color of element
});
Ext.onReady(function() {
var item1 = new Ext.Panel({
title: 'Start',
html: 'Welcome',
cls:'empty'
});
var item2 = new Ext.Panel({
title: 'Application',
html: 'the application',
cls:'empty'
});
var accordion = new Ext.Panel({
region:'east',
margins:'5 5 5 0',
split:true,
width: 210,
bodyStyle: 'background: #FFFFCC',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [item1, item2]
});
var content = new Ext.Panel({
id: 'myPanel',
region:'center',
margins:'5 0 5 5',
cls:'empty',
bodyStyle:'background:ivory; font-size: 13pt',
html:'<p id="test123">This is where the content goes for each selection.</p>',
// listeners: {
// click: function() {
// alert('was clicked333'); //has no effect
// }
// }
});
//Ext.get('myPanel').on('click', function() { alert('was clicked2');}); //causes extJS-generated site not to appear
Ext.get('testInHtml').on('click', function() {alert('was clicked');}); //works
//Ext.get('ext-gen9').on('click', function() {alert('was clicked');}); //causes extJS-generated site not to appear
var viewport = new Ext.Viewport({
layout:'border',
items:[content, accordion]
});
});
</script>
</head>
<body>
<p id="testInHtml">this is a test</p>
</body>
</html>
@arun, "this" seems to contain the right element, but it does not change the background color (although it does in a jquery-only example without extJS which I tested), and I cannot manipulate it in any way with any other css attributes:
963
Try using the delegate method provided by jQuery.
JQuery("body").delegate("#myPanel", "click", function(){
//Your handler
});
Find more details here learningjquery jquery api
I've not tested this code, but just another direction you can look into
103
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
