我有一个非常简单的HTML。这个html使用panel.setHtml方法显示在Sencha面板中。 示例HTML的LayOut如下所示。
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被截断为一行 并在面板内设置如下。
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 :(得分:1)
我实现如下。
Ext.Viewport.add({
xtype : 'panel',
html : '<button>Foo</button>',
listeners : {
element : 'element',
delegate : 'button',
tap : function () {
console.log('button tap!');
}
}
});
因此,只会调用处理程序而不执行其他操作。
由于
答案 1 :(得分:-1)
我认为这里的“正确”答案是使用Sencha Touch button。除了可能不会导致此错误之外,Sencha已经做了大量工作来优化事件处理,并且使用内联事件不会利用这些优化。我不确定,但我有一种强烈的感觉,即破坏该按钮甚至不会破坏那里的事件处理程序,这在代码中是一个令人不快的泄漏。
var button = Ext.create('Ext.Button', {
text: 'Copy Text'
});
button.on({
click:{
copyText()
}
);