Я создаю простой сайт с помощью extJS.
Я могу успешно прикреплять события кликов из JQuery и из extJS, но только к элементам, которые я создаю в HTML в самом теге body.
Однако события, которые я прикрепляю к элементам, сгенерированным extJS, либо не действуют, либо приводят к тому, что сайт extJS не генерируется.
Например, все примеры в этом уроке простоне работают (и они показывают именно то, что я хочу сделать: манипулировать DOM изнутри extJS), но если я пытаюсь получить доступ к элементу DOM изнутри extJS, как он утверждает, я просто получаю ошибку, что этот элемент "является нулевым"как на скриншоте ошибки ниже. Что я не понимаю в extJS, почему все элементы, к которым я пытаюсь получить доступ с помощью get (), имеют значение null?
Как я могу изменить следующий код, чтобы я мог прикрепитьсобытия для сгенерированных extJS элементов, например, для div "myPanel"?
Вот ошибки, которые я получаю в Firebug: 
, хотя div myPanel существует: 
@ Mchl, getCmp, похоже, не работает: 
<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», кажется, содержит правильный элемент, но не меняет фонcolor (хотя в примере только для jquery без extJS, который я тестировал), и я никак не могу манипулировать им с помощью любых других атрибутов css:
