[英]Elements event handler into EXT.js panel
在我的應用程序中,我需要一個包含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無法選擇切換類,因為它位於EXT面板中的Javascript變量中。
我的問題是,如何在EXT面板中選擇Javascript變量中的HTML元素? 換句話說,如何使用事件處理程序將HTML元素放入EXT面板。
處理程序函數在Javascript代碼中定義。
需要考慮的幾件事:
您為什么不使用ExtJs可視元素,例如Ext.form.field.Radio http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.field.Radio和Ext。 form.field.Checkbox http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.field.Checkbox
如果您真的想在ExtJs中使用純HTML元素-也可以。 但是,為了訂閱他們的事件,您實際上需要等待直到它們被渲染。 因此,您首先需要訂閱面板的render
事件。 然后在處理程序中找到HTML元素(按其ID或任何類型),並將偵聽器添加到其事件中。 但是我建議選擇#1。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.