0

在我的应用程序中，我需要一个具有 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 变量中。

我的问题是，如何将 Javascript 变量中的 HTML 元素选择到 EXT 面板中？换句话说，我如何使用事件处理程序将 HTML 元素放入 EXT 面板。

处理函数在 Javascript 代码中定义。

4

1 回答 1

0

需要考虑的几件事：

  1. 为什么不使用 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

  2. 如果你真的想在 ExtJs 中使用纯 HTML 元素 - 那也很好。但是为了订阅他们的事件，您实际上需要等到它们被渲染。因此，您首先需要订阅render面板的事件。并在处理程序中找到 HTML 元素（通过它们的 Id 或任何类型）并将侦听器添加到它们的事件中。但我建议选择#1。

于 2012-07-28T23:58:33.153 回答