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 はトグル クラスを選択できません。これは、JavaScript 変数に EXT パネルがあるためです。

私の質問は、JavaScript 変数の HTML 要素を EXT パネルに選択するにはどうすればよいですか? つまり、イベント ハンドラーを使用して HTML 要素を EXT パネルに配置するにはどうすればよいでしょうか。

ハンドラー関数は Javascript コードで定義されています。

4

1 に答える 1

0

考慮すべきいくつかの事項:

  1. 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 に答える