Sencha Touch 2 : A simple handler for HTML Button displayed insided panel is giving undefined error
Question
I have a pretty simple html. This html is displayed inside Sencha Panel using panel.setHtml method. LayOut of the sample HTML is as below.
HTML File
<!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>
Below code sets html inside the panel.The above mentioned html is truncated into one line and is set inside the panel as below.
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);
ISSUE :
When the Button is clicked, I am getting 'Uncaught ReferenceError: copyText is not defined' Error.
Any ideas of what wrong I am doing here? Cant we set the complete html with the inside the sencha panel.
The running code is at http://www.senchafiddle.com/#5LdC5
Please help.
Thank you, Gendaful
2 answers
solution1
1 ACCPTED 2013-03-17 20:19:54
I implemented it as below.
Ext.Viewport.add({
xtype : 'panel',
html : '<button>Foo</button>',
listeners : {
element : 'element',
delegate : 'button',
tap : function () {
console.log('button tap!');
}
}
});
So, the handler will be called for button only and nothing else.
Thanks
solution2
-1 2013-03-10 05:46:48
I think the "right" answer here is to use a Sencha Touch button . Beyond likely not causing this error, Sencha has done substantial work to optimize event handling, and using inline events don't take advantage of those optimizations. I'm not certain, but I have a strong feeling that destroying that button doesn't even destroy event handler there, which is an unpleasant leak in the code.
var button = Ext.create('Ext.Button', {
text: 'Copy Text'
});
button.on({
click:{
copyText()
}
);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.