將元素事件處理程序放入EXT.js面板

在我的應用程序中，我需要一個具有HTML元素（如單選按鈕和複選框）的面板。將元素事件處理程序放入EXT.js面板

對於用EXT面板包裹元素（單選按鈕等），我將這些元素放入一個變量中，並將該變量放入EXT面板的HTML特徵中。

CODE

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代碼中定義。

來源

2012-07-28 user1344766

不確定我編輯得對。 – 2012-07-28 23:56:05

幾件事情要考慮：

你爲什麼不使用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。

來源

2012-07-28 23:58:33 sha

如果我使用單選按鈕＃1，我可以使用處理java腳本函數的事件處理程序。在jquery中，我使用此代碼$（「。update」）。change（update）;該更新是一個函數我如何在Extjs中執行此操作？ – user1344766 2012-07-29 00:52:58

絕對 - 檢查如何配置監聽器，例如：http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.field.Radio-cfg-listeners – sha 2012-07-29 01:00:02

將元素事件處理程序放入EXT.js面板

回答

相關問題