我正在用extJS构建一个简单的站点.
我可以成功地将JQuery和extJS中的单击事件附加到body标签本身在HTML中创建的元素上.
但是,我附加到extJS生成的元素的事件要么无效,要么导致不生成extJS站点.
例如,所有关于in this tutorial的示例都根本不起作用(它们确实显示了我想做的事情：从extJS内部操作DOM),但是,如果我尝试从extJS内部访问DOM元素,那么我得到的只是该元素“为空”的错误,如下面的错误屏幕截图所示.我对extJS不了解什么,为什么我尝试使用get()访问的所有要素都为null？
如何更改以下代码,以便可以将事件附加到extJS生成的元素,例如到“ myPanel” div？
这是我在Firebug中遇到的错误：
尽管myPanel div确实存在：
@ 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”似乎包含正确的元素,但是它不会改变背景色(尽管在没有测试的extJS的纯jquery示例中确实如此),并且我无法以任何其他CSS方式对其进行操作属性：
解决方法:
JQuery("body").delegate("#myPanel", "click", function(){
//Your handler
});
在这里找到更多详细信息
learningjquery
jquery api
我尚未测试此代码,但您可以研究另一个方向