CODEWITHSUNDEEP
javascriptjqueryextjs
user1919
user1919

Reputation: 3938

Issue with combining extjs with jquery

I try to use jquery together with extjs. I want when I click on an image to get the id of the image and store it in a variable. I use jquery for this part. The image lives in an extjs panel. I use with no result and afterrender listener Here is my code:

items: [{
                xtype: 'tabpanel',
                width: 600,
                activeTab: 0,
                flex: 2,
                layout: {type: 'fit'},
                items: [{
                        xtype: 'panel',
                        title: 'Images',
                        items: [{contentEl:'img',autoScroll:true,height:500 }],


                        listeners: {afterrender: function(c){c.el.on('click', function() 

                        { 

                         $('img').on( 'click',function() { // event delegation
                            var idImg = $(this).attr('id');
                            alert(idImg);
                            addMarker(idImg)

                            var alt = $(this).attr('alt'); // get the value of alt
                            $('#curInterId').val(alt); // place the internal id in the text box 
                                    });


                         });}},

                        },{ 
                        xtype: 'panel',
                        title: 'Material',
                        items: [{contentEl:'msg',autoScroll:true,height:500 }]
                        }]
            }],renderTo : Ext.getBody()
        },

Upvotes: 0

Views: 84

Answers (1)

Scriptable
Scriptable

Reputation: 19750

Try something like this:

Fiddle Link

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.create("Ext.panel.Panel", {
            layout: "fit",
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'panel',
                title: 'Images',
                items: [{
                    xtype: 'image',
                    height: 200,
                    width: 600,
                    src: 'http://www.newbridgegreen.com/assets/bootstrap/img/sencha_logo.png',
                    listeners: {
                        el: {
                            click: function() {
                                Ext.Msg.alert("Message");
                            }
                        }
                    }
                }]
            }]
        });
    }
});

The key here is the el: within listeners, you can add standard DOM click handlers to any element using this method.

Upvotes: 2

Related Questions