extjs panel html add javascript function don't work

Question

in my extjs app, i create a panel, i also add jquery to one page, however when i click the test section in this page, this page don't render test alert, it seems extjs panel forbid the jquery function. is there any solution to load both html and js to panel content.

relative code below:

var feedback=Ext.create('Ext.panel.Panel', {
    title: 'Hello',
    layout: 'fit',
    autoScroll: true,
    bodyStyle:{"background-color":"#fed"},
    html: '<div id="test">test</div>',
});

....

$("#test").click(function(){
    alert('test')
})

Your missing renderTo:Ext.getBody() jsfiddle.net/JohnDR/v8yLA — Bit

Nicolas Boisvert Nicolas Boisvert · Accepted Answer · 2014-03-20T15:31:31

By experience, mixing jquery selector and Extjs element can be pain to manage together. I would suggest to use Ext js selector to do what you're trying to achieve in jquery, since it's pretty basic. However, if you still want to use jquery, using on() function could help, the object is maybe not rendered yet when your jquery code is reached.

$("#test").on('click', function(){
    alert('test')
})

extjs panel html add javascript function don't work

1 Answers