How to attach event listener to panel html link?

[epiphanydigital]

I have a standard link in the "html":"content area" of a standard panel and would like to prevent the default behavior for clicking, and adding my own behavior such as an Ext.Msg.alert() or other.

I would like to do this unobtrusively of course, so please no answers like the following:

<a href="#" javascript="Ext.Msg.alert('hello');">My Link</a>

[AndreaCammarata]

Hi.
You can achieve that using event delegation.
Take a look at the example that follow:

Ext.setup({
    onReady: function() {
        
		var handleLink = function(){
			alert('TAP');
		};


        var form = new Ext.Panel({
            fullscreen: true,
			html: '<a href="#">My Link</a>',
            dockedItems: [{
                xtype: 'toolbar',
                title: 'Example'
            }],
            listeners: {
				body: {
					tap: handleLink,
					delegate: 'a'
				}
			}
        });
    }
    
});

Hope this helps.

[yann Offredi]

Hi,

Well, after detected the event from HTML. How open an other panel (child) with a slide effect ?

For exemple, We have this in the main .js

Ext.setup({ onReady: function() { var handleLink = function(){ /* Something here to open a caroussel or panel with slide effect. And this carousseil/panel could be defined in another js or/and generated on the fly by a sql Query*/ }; var form = new Ext.Panel({ fullscreen: true, html: '<a href="#">My Link</a>', dockedItems: [{ xtype: 'toolbar', title: 'Example' }], listeners: { body: { tap: handleLink, delegate: 'a' } } }); } });

Regards

[Sameer Khan]

{
xtype:'component',
html:'<a href="----">Content</a>',
listeners: {click: {element: 'el',fn: function(){main.setActiveItem(panel object );}}}
},

[yann Offredi]

Thanks, I think is that. But If I take the example in post #2. your "main" is like "form" ?

And, if I add in your example some properties to 'href'
Example :
html : '<a href='foo.html' id='5'>Click on me </a>'.

How get the content of 'href' and 'id' in function (function(){main.setActiveItem( new Ext.caroussel ( {html:'foo.html',pageActive : 5},'slide') ))

regards

[Sameer Khan]

So, You maintain one global variable...but with my code control goes to other panel only...so to transfer your data from current panel to next activated panel ,maintain one gloabal variable... I think my idea is write or wrong ?