Elements事件处理程序进入EXT.js面板

Question

In my application I need a panel that has HTML elements like radio button and checkbox.

For wrapping elements (radio button and etc.) with EXT panel I put these elements into a variable and put this variable into HTML feature of EXT panel.

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>'
];

I control my map behaviors with this HTML elements in the EXT panel. For this reason when user clicks a radio button I use jQuery to understand that it was clicked.

jQuery

$(".toggle").click(function(){
    for(key in controls) {
        var control = controls[key];
        if($(this).val() == key && $(this).is(":checked")) {
            control.activate();
        } else {
            control.deactivate();
        }
    }
});

But jQuery can't select toggle class because it is in a Javascript variable into EXT panel.

My question is, how can I select HTML elements in Javascript variables into an EXT panel? In other words, how can I use event handlers for putting HTML elements into an EXT panel.

The handler function is defined in the Javascript code.

Answer 1

Couple things to consider:

1. Why don't you use ExtJs visual elements like Ext.form.field.Radio http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.field.Radio and Ext.form.field.Checkbox http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.field.Checkbox

2. If you really want to use plain HTML elements inside ExtJs - that's fine too. But in order to subscribe to their events you actually need to wait until they will be rendered. So you first need to subscribe to render event of your panel. And in the handler find HTML elements (by their Id or by type of whatever) and add listener to their events. But I would recommend to go with #1.