Question

我试图在一些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元素的任何想法或解决方案？

Answer 1

我不知道为什么你要使用带有jquery的ExtJS
试着避免使用两者因为这只会增加页面时间而不会添加任何新功能
Extjs本身就是一个非常大的库，肯定支持DOM操作

代码问题是Ext.onReady（）事件在加载了所有依赖项时触发。 ExtJS动态生成HTML元素，因此在引发此事件时，所有的scrips都存在，但没有创建任何内容，因此没有带有id jquery的元素，因此您无法通过jquery访问它我建议这样做是为了将这个jquery代码放在一些后续事件中，这样你就可以确定HTML元素存在了 *如果你不能这样做，那么使用jquery live或jquery on，因为它们是可以用来为动态创建的元素分配事件处理程序的函数。
*大多数prefrred将listener in the ExtJS style放入元素，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'); }
        }
    }

在Ext Js元素上使用JQuery

1 个答案: