0

私はかなり単純なhtmlを持っています。この html は、panel.setHtml メソッドを使用して Sencha Panel 内に表示されます。サンプル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 は 1 行に切り捨てられ、以下のようにパネル内に設定されます。

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にあります。

助けてください。

ありがとう、ゲンダフル

4

2 に答える 2

1

以下のように実装しました。

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

したがって、ハンドラーはボタンに対してのみ呼び出され、それ以外は呼び出されません。

ありがとう

于 2013-03-17T20:19:54.483 に答える
-1

ここでの「正しい」答えは、Sencha Touch ボタンを使用することだと思います。このエラーを引き起こさない可能性が高いだけでなく、Sencha はイベント処理を最適化するためにかなりの作業を行っており、インライン イベントを使用してもそれらの最適化を利用できません。確かではありませんが、そのボタンを破棄してもそこにあるイベント ハンドラーも破棄されないような気がします。これは、コードの不快なリークです。

var button = Ext.create('Ext.Button', {
    text: 'Copy Text'
});

button.on({
    click:{
         copyText()
    }
);
于 2013-03-10T05:46:48.623 に答える