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:
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
Quick tip: Try using Ext.getCmp() instead of Ext.get()
Better tip: See this: http://vimeo.com/14816550
Please see my answer to your other (duplicate?) question.
Looking at the code in this question (which you didn't fully post in the other question) the reason Ext.get() and Ext.getCmp() are not working for you is that the Panel is not yet rendered at the time you're calling them (that's why the calls return null). Since you are adding the Panel definitions into the viewport as items, they don't get rendered until the viewport is instantiated and rendered (this is a specific benefit of Ext, that it supports lazy-rendering for performance purposes). So to fix that, you should simply move any code that has to access the Panel's DOM either after the viewport code, or place it in an event handler for the Panel's render event (as I showed in the linked answer).
The answer you accepted happens to work simply because the attaching of the click handler is delayed for you behind the scenes, but it's not really the correct approach (and there is no need to inject jQuery just for this purpose, unless you're using it for something else).
来源：https://stackoverflow.com/questions/4182592/how-can-i-get-jquery-javascript-access-to-elements-generated-by-extjs