Sencha Touch 2:一个简单的处理HTML按钮显示在面板内给出未定义的错误

Sencha Touch 2 : A simple handler for HTML Button displayed insided panel is giving undefined error

本文关键字：显示 按钮 错误 未定义 HTML 处理 Touch 简单 一个 Sencha      更新时间：2023-09-26

我有一个非常简单的html。这个html在Sencha Panel中使用Panel显示。setHtml方法。示例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被截断成一行和设置在面板内，如下所示。

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);

问题:

当按钮被点击时，我得到'Uncaught ReferenceError: copyText is not defined'错误。

你知道我做错了什么吗?我们可以在sencha面板里面设置完整的html吗?

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

请帮助。

谢谢你,Gendaful

我的实现如下:

Ext.Viewport.add({
    xtype     : 'panel',
    html      : '<button>Foo</button>',
    listeners : {
        element  : 'element',
        delegate : 'button',
        tap      : function () {
            console.log('button tap!');
        }
    }
});

因此，处理程序将只调用按钮，而不调用其他。

谢谢

我认为这里的"正确"答案是使用Sencha Touch按钮。除了可能不会导致此错误之外，Sencha已经做了大量的工作来优化事件处理，使用内联事件并没有利用这些优化。我不确定，但我有一种强烈的感觉，销毁按钮甚至不会销毁那里的事件处理程序，这是代码中令人不快的泄漏。

var button = Ext.create('Ext.Button', {
    text: 'Copy Text'
});
button.on({
    click:{
         copyText()
    }
);
相关文章：