SenchaTouch-イベント
イベントは、クラスに何かが起こったときに発生するものです。たとえば、ボタンがクリックされたとき、または要素がレンダリングされる前/後などです。
イベントの書き方
イベントの作成方法は次のとおりです。
- リスナーを使用した組み込みイベント。
- 後でイベントを添付する
- カスタムイベント
リスナーを使用した組み込みイベント
Sencha Touchは、SenchaTouchファイルにイベントとカスタムイベントを書き込むためのリスナープロパティを提供します。
SenchaTouchでリスナーを書く
次のように、パネルにlistenプロパティを追加して、前のプログラム自体にリスナーを追加します。
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha', launch: function() {
Ext.create('Ext.Panel', {
html: 'My Panel', fullscreen: true, listeners: {
painted: function() {
Ext.Msg.alert('I was painted to the screen');
}
}
});
}
});
</script>
</head>
</html>これにより、次の結果が生成されます-
このようにして、listenersプロパティに複数のイベントを書き込むこともできます。
同じリスナー内の複数のイベント
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
var myButton = Ext.Viewport.add({
xtype: 'button',
centered: true,
text: 'Click me'
});
myButton.on({
tap: function() {
var randomWidth = 100 + Math.round(Math.random() * 200);
this.setWidth(randomWidth);
},
widthchange: function(button, newWidth, oldWidth) {
alert('My width changed from ' + oldWidth + ' to ' + newWidth);
}
});
}
});
</script>
</head>
</html>次の結果が得られます-
後でイベントを添付する
イベントを書き込む以前の方法では、要素の作成時にリスナーにイベントを書き込みました。
イベントを添付するもう1つの方法は、次のとおりです。
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
var myButton = Ext.Viewport.add({
xtype: 'button',
centered: true,
text: 'Click me'
});
myButton.on('tap', function() {
alert("Event listener attached by .on");
});
}
});
</script>
</head>
</html>次の結果が得られます-
カスタムイベント
Sencha Touchでカスタムイベントを記述し、fireEventメソッドを使用してイベントを発生させることができます。次の例では、カスタムイベントの作成方法について説明します。
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
var myButton = Ext.Viewport.add({
xtype: 'button',
centered: true,
text: "Just wait 5 seconds",
listeners: {
myEvent: function(button, points) {
alert('myEvent was fired! You score ' + points + ' points');
}
}
});
Ext.defer(function() {
var number = Math.ceil(Math.random() * 100);
myButton.fireEvent('myEvent', myButton, number);
}, 5000);
}
});
</script>
</head>
</html>ページが読み込まれ、ドキュメントの準備が整うと、ボタン付きのUIページが表示され、5秒後にイベントが発生すると、ドキュメントの準備が整うと、5秒後にアラートボックスが表示されます。
ここでは、カスタムイベント「myEvent」を記述し、button.fireEvent（eventName）;としてイベントを発生させています。