私のアプリケーションでは、ラジオ ボタンやチェックボックスなどの HTML 要素を持つパネルが必要です。
EXT パネルで要素 (ラジオ ボタンなど) をラップするには、これらの要素を変数に入れ、この変数を EXT パネルの HTML 機能に入れます。
コード
var p = new Ext.Panel({
title: 'OptionsPanel',
collapsible:true,
preventBodyReset: true,
renderTo: 'options',
width:400,
html: html.join('')
});
var html = [
'<ul id="controlToggle">',
'<li>',
'<input type="radio" name="type" value="none" id="noneToggle" class="toggle" checked="checked" >',
'<label for="noneToggle">navigate</label>',
'</li>',
'<li>',
'<input type="radio" name="type" value="polygon" id="polygonToggle" class="toggle" >',
'<label for="polygonToggle">draw polygon</label>',
'</li>',
'<li>',
'<input type="radio" name="type" value="modify" id="modifyToggle" class="toggle" >',
'<label for="modifyToggle">modify feature</label>',
'</li>',
'<ul>',
'<li>',
'<input id="createVertices" type="checkbox" checked="" name="createVertices" class="update">',
'<label for="createVertices">allow vertices creation</label>',
'</li>',
'<li>',
'<input id="rotate" type="checkbox" name="rotate" class="update">',
'<label for="rotate">allow rotation</label>',
'</li>',
'<li>',
'<input id="resize" type="checkbox" name="resize" class="update">',
'<label for="resize">allow resizing</label>',
'(<input id="keepAspectRatio" type="checkbox" name="keepAspectRatio" class="update" checked="checked">',
'<label for="keepAspectRatio">keep aspect ratio</label>)',
'</li>',
'<li>',
'<input id="drag" type="checkbox" name="drag" class="update">',
'<label for="drag">allow dragging</label>',
'</li>',
'</ul>',
'</li>',
'</ul>'
];
EXT パネルのこの HTML 要素を使用して、マップの動作を制御します。このため、ユーザーがラジオ ボタンをクリックすると、クリックされたことを理解するために jQuery を使用します。
jQuery
$(".toggle").click(function(){
for(key in controls) {
var control = controls[key];
if($(this).val() == key && $(this).is(":checked")) {
control.activate();
} else {
control.deactivate();
}
}
});
しかし、jQuery はトグル クラスを選択できません。これは、JavaScript 変数に EXT パネルがあるためです。
私の質問は、JavaScript 変数の HTML 要素を EXT パネルに選択するにはどうすればよいですか? つまり、イベント ハンドラーを使用して HTML 要素を EXT パネルに配置するにはどうすればよいでしょうか。
ハンドラー関数は Javascript コードで定義されています。