0

いくつかの Sencha 要素で JQuery から .keypress イベントをキャプチャしようとしていますが、どういうわけか Sencha がそれらを JQuery に隠しているようです。

コードの一部を示します。これはより単純ですが、同じ問題があります。

        Ext.onReady(function(){

            $("#jquery").click(function() {
                alert('Handler for click called.');
            });

            var contextMenu = new Ext.menu.Menu({
                renderTo: document.body,
                width: 150,
                floating: false,
                plain: true,
                items: [{
                    text: 'button1',
                    id: 'jquery'
                },{
                    text: 'button2'
                }]
            });
        });
    </script>
</head>
<body>
<div id="test"> I am a div </div>
</body>

ここでの目的は、button1 をクリックするとアラートのポップアップが表示されることですが、発生しません。ただし、JQuery コードを次のように変更すると:

$("#test").click(function() {
alert('Handler for click called.');
});

そして、表示されたポップアップで div コンテンツをクリックすると、ライブラリが正しく読み込まれます。

これは、Sencha が html を作成する方法に関連しているに違いないと思います。これを調べたところ、button1 が次のようになっていることがわかります。

<a id="jquery" class="x-menu-item" hidefocus="true" unselectable="on" href="#"><img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-menu-item-icon " id="ext-gen7"><span class="x-menu-item-text" id="ext-gen8">button1</span></a>

しかし、それでも、必要な場所で JQuery を使用することはできません。JQuery セレクターを使用して sencha 要素にアクセスするためのアイデアや解決策はありますか?

4

1 に答える 1

3

jquery で ExtJS を使用する理由がわかりません。
両方の使用を避けてみてください。ページ時間が増えるだけで、新しい機能が追加されないためです
。Extjs 自体はかなり大きなライブラリであり、DOM 操作を確実にサポート

しています。 onReady() イベントは、すべての依存関係が読み込まれると発生します。ExtJS は HTML 要素を動的に作成するため、このイベントが発生した時点ですべてのスクリプトが存在しますが、何も作成されていないため、id jquery を持つ要素がないため、jquery 経由でアクセスすることはできません

。
*このjqueryコードをいくつかのafterrenderイベント内に配置して、HTML要素が存在することを確認します
*これができない場合はjqueryを使用してくださいliveOR jqueryonは、動的に作成された要素にイベント ハンドラーを割り当てるために使用できる関数であるためです。
*最も望ましいのは、ExtJS スタイルのリスナーを要素に配置することで、Extjs がイベントの発生を処理します。このようなもの

listeners: {
        click: {
            element: 'el', //bind to the underlying el property on the panel
            fn: function(){ console.log('click el'); }
        },
        dblclick: {
            element: 'body', //bind to the underlying body property on the panel
            fn: function(){ console.log('dblclick body'); }
        }
    }
于 2012-08-06T10:36:39.817 に答える