Home/ Questions/Q 8340041
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T05:03:44+00:00

I am trying to capture a .keypress event from JQuery in some Sencha elements,

  • 0

I am trying to capture a .keypress event from JQuery in some Sencha elements, but it seems that somehow Sencha is hiding them to JQuery.

I’ll show a piece of code, that is simplier, but has the same problem:

        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>

My objective here is that when I click on button1 the alert’s pop up is shown, but it doesn’t happen. However, if I change the JQuery code to:

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

And I click over the div content the pop up it is shown, so the library is correctly loaded.

I think it must be something related to how Sencha creates the html, which I have inspect, and I can see that button1 is like follows:

<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>

But still I cannot use JQuery where I want.
Any idea or solution to access sencha elements with JQuery selector?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    i dont know why do you wanna use ExtJS with jquery
    try avoiding using both because that will only increase the page times and wont add any new functionality
    Extjs in itself is a pretty big library and surely supports DOM manipulation

    Problem with your code is that Ext.onReady() event fires when all the dependencies have been loaded. ExtJS makes the HTML elements dynamically so at the time when this event is raised all the scrips are present but nothing has been created so there is no element with the id jquery hence you cannot access it via jquery

    what i would suggest insted of this is to
    *put this peice of jquery code inside some afterrender event so that you are sure that the HTML element is present
    *if you cant do this then use jquery live OR jquery on because they are function that can be used to assign event handlers to dynamically created elements.
    *most prefrred would be to put a listener in the ExtJS style to the element and Extjs will handle the raising of the event for you. Something like this

    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'); }
        }
    }
    • 0