2013-03-10 47 views
0

我有一个非常简单的HTML。该html使用panel.setHtml方法显示在Sencha面板中。 LayOut示例HTML如下。Sencha Touch 2:HTML按钮的简单处理程序显示中的面板给出了未定义的错误

HTML文件

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function copyText() 
{ 
alert('It is clicked'); 
} 
</script> 
</head> 
<body> 

Field1: <input type="text" id="field1" value="Hello World!"><br> 
Field2: <input type="text" id="field2"> 
<br><br> 
<button onclick="copyText()">Copy Text</button> 

</body> 
</html> 

下面代码上述HTML被截断成一行 并且如下被设定在面板内设置的html的panel.The内部。

var res = '<!DOCTYPE html><html><head><script>function copyText(){}</script></head><body>Field1: <input type="text" id="field1" value="Hello World!"><br>Field2: <input type="text" id="field2"><br><br><button onclick="copyText()">Copy Text</button><p>A function is triggered when the button is clicked. The function copies the text from Field1 into Field2.</p></body></html>'; 
Ext.getCmp('dummyPanel').setHtml(res); 

问题:

当单击该按钮时,我得到 '未捕获的ReferenceError:的copytext没有定义' 错误。

任何想法,我在这里做什么错?我们不能在Sencha面板里面设置完整的html。

正在运行的代码是在http://www.senchafiddle.com/#5LdC5

请帮助。

谢谢 Gendaful

+0

为什么要在面板中放一个'html'文档?我不知道ST2足够聪明,可以将它包装在'iframe'中(这是必要的)。你应该尝试使用一个实际的[button](http://docs.sencha.com/touch/2-1/#!/api/Ext.Button)和一个类似于@Sergio在他的回答中的处理程序。 – jakerella 2013-03-10 17:36:13

+0

我将整个HTML放在面板中,因为我正在从服务器获取整个html作为响应,并且必须按原样显示它。此HTML还包含事件处理和前端验证。所以,这就是我依赖于在面板中显示整个HTML的原因。完全同意你的观点,我必须解析服务器响应HTML,并相应地创建sencha本地组件,并编写我自己的验证,因为上述方法似乎并不奏效。感谢指针。 – Gendaful 2013-03-10 20:47:32

+1

我想我唯一的建议是,在使用'Ext.getCmp('dummyPanel')。setHtml(res)''之前,可能会将该文档包装在'