我正在使用 extJS 构建一个简单的网站。
我可以成功地将来自 JQuery 和 extJS 中的点击事件附加到我在 body 标记本身的 HTML 中创建的元素。
但是，我附加到 extJS 生成的元素的事件要么没有效果，要么导致不生成 extJS 站点。
例如，上面的所有例子在本教程中 http://khaidoan.wikidot.com/extjs根本不起作用（它们准确地显示了我想要做的事情：从 extJS 内部操作 DOM），但是如果我尝试从 extJS 内部访问 DOM 元素，就像它所说的那样，我只会得到该元素“为 null”的错误“如下面的错误屏幕截图所示。我对 extJS 有什么不明白的地方，为什么我尝试使用 get() 访问的所有元素都是 null？
如何更改以下代码，以便可以将事件附加到 extJS 生成的元素，例如到“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”似乎包含正确的元素，但它不会改变背景颜色（尽管它在我测试过的没有 extJS 的纯 jquery 示例中确实如此），并且我无法使用任何其他 css 以任何方式操作它属性：
尝试使用delegate http://api.jquery.com/delegate/方法提供者jQuery http://jquery.com/.
JQuery("body").delegate("#myPanel", "click", function(){
//Your handler
});
在这里找到更多详细信息学习jquery http://www.learningjquery.com/2010/03/using-delegate-and-undelegate-in-jquery-1-4-2 jQuery API http://api.jquery.com/delegate/
我没有测试过这段代码，但只是你可以研究的另一个方向