PDA

View Full Version : How to add an anchor tag that fires an event without firing the location.href event?



DocAhrens
26 Jan 2012, 5:03 PM
In ExtJs 4.x, I am trying to figure out how to configure a link to fire an event using the following:


items: [
{
xtype: 'component',
autoEl: {
tag: a',
href: '#',
html: 'Link Text'
},
listeners: {
click: function() {
// handle click here
}
}
}
]

without firing the default location.href event and without adding the '#' to the url in the browser? Can you tell me what I am missing? I could not find my answer in the documentation for autoEl.

vadimv
26 Jan 2012, 11:59 PM
would be sth like:


Ext.create('Ext.Component', {
autoEl: {
tag: 'a',
href: 'google.com',
html: 'Hello world!',
},
listeners : {
el : {
click : function(ev)
{
ev.preventDefault();
}
}
},
renderTo: Ext.getBody()
});

DocAhrens
30 Jan 2012, 12:12 PM
I am not using the 'Ext.create' format that you put in the answer, but rather I am calling my code in an initComponent of a Window definition in a fieldcontainer (while trying to follow your pattern of setting a listener for 'el'):


Ext.define('Company.view.MyWindow', {
extend: 'Ext.window.Window',
alias: 'widget.mywindow',
...
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'fieldset',
...
items: [{
xtype: 'fieldcontainer',
...
items: [{
xtype: 'component',
autoEl: {
tag: 'a',
href: '#change',
title: 'This is a tootip',
cn: 'Change',
listeners: {
el: {
click: function(ev){
ev.preventDefault();
console.log('CHANGE ev.type: ' + ev.type +
' | el.text: ' + el.text + ' | el.id: ' + el.id
);
}
}
}
}
}
]
},

With the above code, the click event is NOT prevented and the console.log does NOT fire. What am I missing?

vadimv
30 Jan 2012, 12:58 PM
was just an example, you can use it with xtype , whatever....and yes you are doing wrong, don't use it in autoEl scope, put it outside, in the component, see in my example, you noticed Ext.create instead to notice the right place of the listener ;).

DocAhrens
30 Jan 2012, 1:28 PM
Thanks! Using the following worked great:


items: [
{
xtype: 'component',
autoEl: {
tag: 'a',
href: '#change',
title: 'Make changes to this Campaign',
cn: 'Change'
},
listeners: {
el: {
click: function(ev){
ev.preventDefault();
console.log('ev.type: ' + ev.type + ' | ev.target.text: ' + ev.target.text);
}
}
}
}
]

ajinkyachhatre
28 Mar 2013, 2:07 AM
Hi,
I have the following code, but the link does not show up (sencha touch app):


{
width: '10%',
height: 44,
cls: 'x-form-label x-form-label-nowrap',
xtype: 'component',
autoEl: {
tag: 'a',
href: '#change',
title: 'Make changes to this Campaign',
cn: 'Change'
},
listeners: {
tap: {
fn: function() {},
element: 'element'
}
}
}